/* ============================================
   Global Theme System for Light/Dark Mode
   ============================================ */

/* Root Variables for Both Themes */
:root {
    --transition-duration: 200ms;
}

/* Smooth transitions for theme switching */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
}
    /* Sunrise/Sunset effect overlay */
    html.theme-transitioning::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 9999;
        animation: themeTransition 0.6s ease-in-out;
    }
/* Sunrise effect (going to light mode) */
html:not(.dark).theme-transitioning::before {
    xbackground: radial-gradient(ellipse at top, rgba(251, 191, 36, 0.3) 0%, rgba(251, 146, 60, 0.2) 20%, rgba(249, 115, 22, 0.1) 40%, transparent 70% );
}
/* Sunset effect (going to dark mode) */
html.dark.theme-transitioning::before {
    xbackground: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.3) 0%, rgba(79, 70, 229, 0.2) 20%, rgba(67, 56, 202, 0.1) 40%, transparent 70% );
}

@keyframes themeTransition {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

/* ============================================
   Base Background & Text Colors
   ============================================ */

/* Default (Dark Mode) */
html, html.dark {
    background-color: rgb(2, 6, 23);
    color: rgb(226, 232, 240);
}

html:not(.dark) {
    background-color: rgb(249, 250, 251);
    color: rgb(17, 24, 39);
}

body {
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

/* ============================================
   Card & Panel Components
   ============================================ */

.card, .panel, .k-grid, .k-window, .k-dialog {
    transition: background-color var(--transition-duration), border-color var(--transition-duration), box-shadow var(--transition-duration);
}

html.dark .card,
html.dark .panel {
    background-color: rgb(30, 41, 59);
    border-color: rgb(51, 65, 85);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

html:not(.dark) .card,
html:not(.dark) .panel {
    background-color: white;
    border-color: rgb(229, 231, 235);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* ============================================
   Form Controls (Inputs, Selects, etc.)
   ============================================ */

input, select, textarea, .k-input, .k-textbox, .k-dropdown {
    transition: background-color var(--transition-duration), border-color var(--transition-duration), color var(--transition-duration);
}

html.dark input,
html.dark select,
html.dark textarea,
html.dark .k-input,
html.dark .k-textbox,
html.dark .k-dropdown {
    background-color: rgb(30, 41, 59);
    border-color: rgb(71, 85, 105);
    color: rgb(226, 232, 240);
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus,
html.dark .k-input:focus,
html.dark .k-textbox:focus {
    border-color: rgb(6, 182, 212);
    outline: 2px solid rgba(6, 182, 212, 0.2);
}

html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea,
html:not(.dark) .k-input,
html:not(.dark) .k-textbox,
html:not(.dark) .k-dropdown {
    background-color: white;
    border-color: rgb(209, 213, 219);
    color: rgb(17, 24, 39);
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus,
html:not(.dark) .k-input:focus,
html:not(.dark) .k-textbox:focus {
    border-color: rgb(6, 182, 212);
    outline: 2px solid rgba(6, 182, 212, 0.2);
}

/* Disabled state */
html.dark input:disabled,
html.dark select:disabled,
html.dark textarea:disabled {
    background-color: rgb(15, 23, 42);
    color: rgb(100, 116, 139);
    opacity: 0.6;
}

html:not(.dark) input:disabled,
html:not(.dark) select:disabled,
html:not(.dark) textarea:disabled {
    background-color: rgb(243, 244, 246);
    color: rgb(156, 163, 175);
}

/* ============================================
   Buttons
   ============================================ */

button, .btn, .k-button {
    transition: background-color var(--transition-duration), border-color var(--transition-duration), color var(--transition-duration), box-shadow var(--transition-duration);
}

/* Primary Buttons */
html.dark .btn-primary,
html.dark .k-button-primary {
    background-color: rgb(6, 182, 212);
    border-color: rgb(6, 182, 212);
    color: white;
}

html.dark .btn-primary:hover,
html.dark .k-button-primary:hover {
    background-color: rgb(8, 145, 178);
    box-shadow: 0 4px 6px -1px rgba(6, 182, 212, 0.4);
}

html:not(.dark) .btn-primary,
html:not(.dark) .k-button-primary {
    background-color: rgb(6, 182, 212);
    border-color: rgb(6, 182, 212);
    color: white;
}

html:not(.dark) .btn-primary:hover,
html:not(.dark) .k-button-primary:hover {
    background-color: rgb(8, 145, 178);
    box-shadow: 0 4px 6px -1px rgba(6, 182, 212, 0.3);
}

/* Secondary Buttons */
html.dark .btn-secondary,
html.dark .k-button-secondary {
    background-color: rgb(51, 65, 85);
    border-color: rgb(71, 85, 105);
    color: rgb(226, 232, 240);
}

html.dark .btn-secondary:hover {
    background-color: rgb(71, 85, 105);
}

html:not(.dark) .btn-secondary,
html:not(.dark) .k-button-secondary {
    background-color: rgb(243, 244, 246);
    border-color: rgb(209, 213, 219);
    color: rgb(55, 65, 81);
}

html:not(.dark) .btn-secondary:hover {
    background-color: rgb(229, 231, 235);
}

/* ============================================
   Tables & Grids
   ============================================ */

table, .k-grid, .table {
    transition: background-color var(--transition-duration), border-color var(--transition-duration);
}

html.dark table,
html.dark .k-grid,
html.dark .table {
    background-color: rgb(30, 41, 59);
    border-color: rgb(51, 65, 85);
}

html.dark table thead,
html.dark .k-grid-header,
html.dark .table thead {
    background-color: rgb(15, 23, 42);
    color: rgb(203, 213, 225);
}

html.dark table tbody tr:hover,
html.dark .k-grid tbody tr:hover,
html.dark .table tbody tr:hover {
    background-color: rgb(51, 65, 85);
}

html.dark table td,
html.dark table th,
html.dark .k-grid td,
html.dark .k-grid th {
    border-color: rgb(51, 65, 85);
    color: rgb(226, 232, 240);
}

html:not(.dark) table,
html:not(.dark) .k-grid,
html:not(.dark) .table {
    background-color: white;
    border-color: rgb(229, 231, 235);
}

html:not(.dark) table thead,
html:not(.dark) .k-grid-header,
html:not(.dark) .table thead {
    background-color: rgb(249, 250, 251);
    color: rgb(55, 65, 81);
}

html:not(.dark) table tbody tr:hover,
html:not(.dark) .k-grid tbody tr:hover,
html:not(.dark) .table tbody tr:hover {
    background-color: rgb(249, 250, 251);
}

html:not(.dark) table td,
html:not(.dark) table th,
html:not(.dark) .k-grid td,
html:not(.dark) .k-grid th {
    border-color: rgb(229, 231, 235);
    color: rgb(17, 24, 39);
}

html:not(.dark) table td.text-red-600,
html:not(.dark) table th.text-red-600 {
    color: rgb(220, 38, 38);
}

/* ============================================
   Links
   ============================================ */

a {
    transition: color var(--transition-duration);
}

html.dark a {
    color: rgb(34, 211, 238);
}

html.dark a:hover {
    color: rgb(103, 232, 249);
}

html:not(.dark) a {
    color: black;
}

html:not(.dark) a:hover {
    color: black;
}

/* ============================================
   Borders & Dividers
   ============================================ */

hr, .divider, .border {
    transition: border-color var(--transition-duration);
}

html.dark hr,
html.dark .divider,
html.dark .border {
    border-color: rgb(51, 65, 85);
}

html:not(.dark) hr,
html:not(.dark) .divider,
html:not(.dark) .border {
    border-color: rgb(229, 231, 235);
}

/* ============================================
   Modals & Overlays
   ============================================ */

.modal, .overlay, .k-overlay {
    transition: background-color var(--transition-duration);
}

html.dark .modal-content,
html.dark .modal {
    background-color: rgb(30, 41, 59);
    color: rgb(226, 232, 240);
}

html:not(.dark) .modal-content,
html:not(.dark) .modal {
    background-color: white;
    color: rgb(17, 24, 39);
}

/* ============================================
   Text Colors Utilities
   ============================================ */

html.dark .text-primary {
    color: rgb(34, 211, 238);
}

html:not(.dark) .text-primary {
    color: rgb(6, 182, 212);
}

html.dark .text-secondary {
    color: rgb(148, 163, 184);
}

html:not(.dark) .text-secondary {
    color: rgb(107, 114, 128);
}

html.dark .text-muted {
    color: rgb(100, 116, 139);
}

html:not(.dark) .text-muted {
    color: rgb(156, 163, 175);
}

/* ============================================
   Background Utilities
   ============================================ */

html.dark .bg-primary {
    background-color: rgb(6, 182, 212);
}

html:not(.dark) .bg-primary {
    background-color: rgb(6, 182, 212);
}

html.dark .bg-secondary {
    background-color: rgb(30, 41, 59);
}

html:not(.dark) .bg-secondary {
    background-color: rgb(243, 244, 246);
}

html.dark .bg-surface {
    background-color: rgb(30, 41, 59);
}

html:not(.dark) .bg-surface {
    background-color: white;
}

/* ============================================
   Labels & Badges
   ============================================ */

html.dark .badge,
html.dark .label {
    background-color: rgb(51, 65, 85);
    color: rgb(203, 213, 225);
}

html:not(.dark) .badge,
html:not(.dark) .label {
    background-color: rgb(243, 244, 246);
    color: rgb(55, 65, 81);
}

/* ============================================
   Alert/Notification Components
   ============================================ */

html.dark .alert-info {
    background-color: rgba(6, 182, 212, 0.1);
    border-color: rgb(6, 182, 212);
    color: rgb(103, 232, 249);
}

html:not(.dark) .alert-info {
    background-color: rgba(6, 182, 212, 0.1);
    border-color: rgb(6, 182, 212);
    color: rgb(8, 145, 178);
}

html.dark .alert-success {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: rgb(34, 197, 94);
    color: rgb(134, 239, 172);
}

html:not(.dark) .alert-success {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: rgb(34, 197, 94);
    color: rgb(21, 128, 61);
}

html.dark .alert-warning {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: rgb(251, 191, 36);
    color: rgb(253, 224, 71);
}

html:not(.dark) .alert-warning {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: rgb(251, 191, 36);
    color: rgb(180, 83, 9);
}

html.dark .alert-danger,
html.dark .alert-error {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgb(239, 68, 68);
    color: rgb(252, 165, 165);
}

html:not(.dark) .alert-danger,
html:not(.dark) .alert-error {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgb(239, 68, 68);
    color: rgb(185, 28, 28);
}

/* ============================================
   Scrollbar Styling
   ============================================ */

html.dark ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html.dark ::-webkit-scrollbar-track {
    background: rgb(15, 23, 42);
}

html.dark ::-webkit-scrollbar-thumb {
    background: rgb(51, 65, 85);
    border-radius: 6px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: rgb(71, 85, 105);
}

html:not(.dark) ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html:not(.dark) ::-webkit-scrollbar-track {
    background: rgb(243, 244, 246);
}

html:not(.dark) ::-webkit-scrollbar-thumb {
    background: rgb(209, 213, 219);
    border-radius: 6px;
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background: rgb(156, 163, 175);
}

/* ============================================
   Search Inputs Specific
   ============================================ */

html.dark input[type="search"],
html.dark .search-field {
    background-color: rgb(30, 41, 59);
    border-color: rgb(71, 85, 105);
    color: rgb(226, 232, 240);
}

html.dark input[type="search"]::placeholder,
html.dark .search-field::placeholder {
    color: rgb(100, 116, 139);
}

html:not(.dark) input[type="search"],
html:not(.dark) .search-field {
    background-color: white;
    border-color: rgb(209, 213, 219);
    color: rgb(17, 24, 39);
}

html:not(.dark) input[type="search"]::placeholder,
html:not(.dark) .search-field::placeholder {
    color: rgb(156, 163, 175);
}

/* ============================================
   Tailwind Text Color Overrides for Dark Mode
   ============================================ */

html.dark .text-gray-900 {
    color: rgb(226, 232, 240) !important;
}

html.dark .text-gray-800 {
    color: rgb(203, 213, 225) !important;
}

html.dark .text-gray-700 {
    color: rgb(203, 213, 225) !important;
}

html.dark .text-gray-600 {
    color: rgb(148, 163, 184) !important;
}

html.dark .text-gray-500 {
    color: rgb(203, 213, 225) !important;
}

/* Ensure table cells specifically use consistent text color */
html.dark table td.text-gray-500,
html.dark tbody td.text-gray-500 {
    color: rgb(203, 213, 225) !important;
}

html.dark .text-gray-400 {
    color: rgb(148, 163, 184) !important;
}

html.dark .text-gray-600 {
    color: rgb(203, 213, 225) !important;
}

/* ============================================
   Tailwind Background Overrides for Dark Mode
   ============================================ */

html.dark .bg-white {
    background-color: rgb(30, 41, 59) !important;
}

html.dark .bg-gray-50 {
    background-color: rgb(30, 41, 59) !important;
}

html.dark .bg-gray-100 {
    background-color: rgb(51, 65, 85) !important;
}

html.dark .bg-gray-200 {
    background-color: rgb(71, 85, 105) !important;
}

html.dark .bg-gray-300 {
    background-color: rgb(15, 23, 42) !important;
    color: rgb(203, 213, 225) !important;
}

/* Exception for toggle switches - keep visible in dark mode */
html.dark input[type="checkbox"] + div.bg-gray-300,
html.dark label div.bg-gray-300 {
    background-color: rgb(71, 85, 105) !important;
}

html.dark input[type="checkbox"] + div.bg-gray-200,
html.dark label div.bg-gray-200 {
    background-color: rgb(71, 85, 105) !important;
}

/* Toggle switch checked state - multiple selectors to ensure it works */
html.dark input[type="checkbox"]:checked + div.peer-checked\:bg-blue-600,
html.dark input[type="checkbox"]:checked ~ div.peer-checked\:bg-blue-600,
html.dark input[type="checkbox"].peer:checked + div,
html.dark .peer:checked ~ div {
    background-color: rgb(59, 130, 246) !important;
}

/* Focus ring on toggles */
html.dark input[type="checkbox"]:focus ~ div,
html.dark input[type="checkbox"].peer:focus ~ div {
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.3) !important;
}

/* Specific override for Tailwind peer-checked pattern */
html.dark input.peer:checked ~ div[class*="peer-checked:bg-blue"] {
    background-color: rgb(59, 130, 246) !important;
}

html.dark input.peer:checked ~ div[class*="peer-checked:bg-"] {
    background-color: rgb(59, 130, 246) !important;
}

/* ============================================
   Tailwind Border Overrides for Dark Mode
   ============================================ */

html.dark .border-gray-200 {
    border-color: rgb(71, 85, 105) !important;
}

html.dark .border-gray-300 {
    border-color: rgb(71, 85, 105) !important;
}

html.dark .ring-gray-300 {
    --tw-ring-color: rgb(71, 85, 105) !important;
}

html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(71, 85, 105) !important;
}

html.dark .divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(71, 85, 105) !important;
}

/* ============================================
   Tailwind Hover State Overrides for Dark Mode
   ============================================ */

html.dark .hover\:bg-slate-100:hover {
    background-color: rgb(51, 65, 85) !important;
}

html.dark .hover\:bg-gray-50:hover {
    background-color: rgb(51, 65, 85) !important;
}

html.dark .hover\:bg-gray-100:hover {
    background-color: rgb(51, 65, 85) !important;
}

html.dark .hover\:text-gray-900:hover {
    color: rgb(226, 232, 240) !important;
}

/* ============================================
   Additional Color Overrides for Complex Components
   ============================================ */

/* Blue backgrounds in dark mode */
html.dark .bg-blue-100 {
    background-color: rgba(6, 182, 212, 0.1) !important;
    color: rgb(226, 232, 240) !important;
}

html.dark .bg-blue-500 {
    background-color: rgb(6, 182, 212) !important;
}

html.dark .bg-blue-600 {
    background-color: rgb(8, 145, 178) !important;
}

html.dark .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.1) !important;
}

html.dark .bg-green-500 {
    background-color: rgb(34, 197, 94) !important;
}

html.dark .bg-yellow-100 {
    background-color: rgba(251, 191, 36, 0.1) !important;
}

html.dark .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

/* Text colors for various states */
html.dark .text-blue-600 {
    color: rgb(34, 211, 238) !important;
}

html.dark .text-green-600 {
    color: rgb(134, 239, 172) !important;
}

html.dark .text-yellow-600 {
    color: rgb(253, 224, 71) !important;
}

html.dark .text-red-600 {
    color: rgb(252, 165, 165) !important;
}

html.dark .text-red-500 {
    color: rgb(252, 165, 165) !important;
}

/* Toggle switch specific styling */
html.dark .peer-checked\:bg-blue-500:checked ~ div,
html.dark input[type="checkbox"]:checked + div.peer-checked\:bg-blue-500 {
    background-color: rgb(6, 182, 212) !important;
}

html.dark .bg-blue-500 {
    background-color: rgb(6, 182, 212) !important;
}

html.dark .bg-blue-600 {
    background-color: rgb(6, 182, 212) !important;
}

/* Very specific toggle switch overrides - target the div directly after checkbox */
html.dark label input[type="checkbox"].peer:checked + div,
html.dark label input[type="checkbox"].peer:checked ~ div:first-of-type {
    background-color: rgb(59, 130, 246) !important;
}

html.dark label input[type="checkbox"].peer:not(:checked) + div,
html.dark label input[type="checkbox"].peer:not(:checked) ~ div:first-of-type {
    background-color: rgb(71, 85, 105) !important;
}

/* Override for any peer-checked bg classes */
html.dark label input.peer:checked + div[class*="peer-checked:bg-"],
html.dark label input.peer:checked ~ div[class*="peer-checked:bg-"] {
    background-color: rgb(59, 130, 246) !important;
}

html.dark label input.peer:not(:checked) + div[class*="bg-gray"],
html.dark label input.peer:not(:checked) ~ div[class*="bg-gray"] {
    background-color: rgb(71, 85, 105) !important;
}

html.dark .hover\:bg-blue-700:hover {
    background-color: rgb(8, 145, 178) !important;
}

/* Green/Red status badges */
html.dark .bg-green-600 {
    background-color: rgb(34, 197, 94) !important;
}

html.dark .bg-red-600 {
    background-color: rgb(239, 68, 68) !important;
}

html.dark .text-green-700 {
    color: rgb(134, 239, 172) !important;
}

html.dark .text-red-700 {
    color: rgb(252, 165, 165) !important;
}

html.dark .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.15) !important;
}

html.dark .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

html.dark .text-blue-700 {
    color: rgb(34, 211, 238) !important;
}

/* Disabled inputs need special handling */
html.dark input:disabled,
html.dark select:disabled,
html.dark textarea:disabled,
html.dark .k-input:disabled {
    background-color: rgb(15, 23, 42) !important;
    color: rgb(148, 163, 184) !important;
    opacity: 0.7;
}

/* Modal and dialog backgrounds */
html.dark .bg-gray-500 {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

html.dark .bg-gray-900 {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

/* Modal overlay opacity adjustments */
html.dark .bg-opacity-50 {
    --tw-bg-opacity: 0.85 !important;
}

html.dark .bg-opacity-75 {
    --tw-bg-opacity: 0.9 !important;
}

/* Spinner/loader border */
html.dark .border-gray-900 {
    border-color: rgb(203, 213, 225) !important;
}

/* Ring focus colors */
html.dark .ring-indigo-600:focus {
    --tw-ring-color: rgb(6, 182, 212) !important;
}

html.dark .focus\:ring-indigo-600:focus {
    --tw-ring-color: rgb(6, 182, 212) !important;
}

/* ============================================
   List Items (Menu Manager, etc.)
   ============================================ */

html.dark li {
    background-color: transparent;
    color: rgb(203, 213, 225);
}

html.dark ul li {
    background-color: transparent;
}

/* Active tab state in dark mode */
html.dark li.bg-white {
    background-color: rgb(30, 41, 59) !important;
    color: rgb(34, 211, 238) !important;
}

/* ============================================
   Bit Blazor UI Components (Date Picker, etc.)
   Using Bit.BlazorUI CSS Variables System
   ============================================ */

/* Override Bit.BlazorUI CSS variables for dark mode */
html.dark:root,
:root[bit-theme="dark"] {
    --bit-clr-bg-pri: rgb(15, 23, 42);
    --bit-clr-bg-sec: rgb(30, 41, 59);
    --bit-clr-bg-ter: rgb(51, 65, 85);
    --bit-clr-fg-pri: rgb(226, 232, 240);
    --bit-clr-fg-sec: rgb(203, 213, 225);
    --bit-clr-fg-ter: rgb(148, 163, 184);
    --bit-clr-pri: rgb(6, 182, 212);
    --bit-clr-pri-hover: rgb(8, 145, 178);
    --bit-clr-pri-active: rgb(34, 211, 238);
    --bit-clr-brd-pri: rgb(71, 85, 105);
    --bit-clr-brd-sec: rgb(51, 65, 85);
}

/* Additional direct overrides for Bit components in dark mode */
html.dark .bit-dtp,
html.dark .bit-cal,
html.dark .bit-drp,
html.dark .bit-txt {
    background-color: var(--bit-clr-bg-sec) !important;
    color: var(--bit-clr-fg-pri) !important;
    border-color: var(--bit-clr-brd-pri) !important;
}

/* Date picker icon button - override to match input background */
html.dark .bit-dtp-icn {
    background-color: var(--bit-clr-bg-sec) !important;
}

html.dark .bit-dtp-icn:hover {
    background-color: var(--bit-clr-bg-ter) !important;
}

html.dark .bit-dtp input,
html.dark .bit-txt input {
    background-color: var(--bit-clr-bg-sec) !important;
    color: var(--bit-clr-fg-pri) !important;
}

html.dark .bit-dtp input::placeholder,
html.dark .bit-txt input::placeholder {
    color: var(--bit-clr-fg-ter) !important;
}

/* Bit component buttons and interactive elements */
html.dark .bit-btn {
    background-color: var(--bit-clr-bg-ter) !important;
    color: var(--bit-clr-fg-sec) !important;
}

html.dark .bit-btn:hover {
    background-color: var(--bit-clr-pri) !important;
    color: white !important;
}

/* ============================================
   Checkboxes - Better visibility in dark mode
   ============================================ */

/* Default checkbox styling for dark mode */
/* :not(.sr-only):not(.peer) excludes Tailwind "sr-only peer" toggle-switch inputs
   (e.g. StateManager, GatewayManagement) so this custom box doesn't render next
   to their slider — those inputs must stay visually hidden via .sr-only. */
html.dark input[type="checkbox"]:not(.sr-only):not(.peer) {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid rgb(226, 232, 240);
    border-radius: 0.25rem;
    background-color: rgb(30, 41, 59);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease-in-out;
}

html.dark input[type="checkbox"]:not(.sr-only):not(.peer):hover {
    border-color: #2563EB;
    background-color: rgb(51, 65, 85);
}

html.dark input[type="checkbox"]:not(.sr-only):not(.peer):checked {
    background-color: #2563EB;
    border-color: #2563EB;
}

html.dark input[type="checkbox"]:not(.sr-only):not(.peer):checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%) rotate(45deg);
    width: 0.35rem;
    height: 0.65rem;
    border: solid white;
    border-width: 0 2px 2px 0;
}

html.dark input[type="checkbox"]:not(.sr-only):not(.peer):disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: rgb(71, 85, 105);
    background-color: rgb(15, 23, 42);
}

html.dark input[type="checkbox"]:not(.sr-only):not(.peer):focus {
    outline: 2px solid rgba(6, 182, 212, 0.4);
    outline-offset: 2px;
}

/* Light mode checkbox styling */
html:not(.dark) input[type="checkbox"]:not(.sr-only):not(.peer) {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgb(209, 213, 219);
    border-radius: 0.25rem;
    background-color: white;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease-in-out;
}

html:not(.dark) input[type="checkbox"]:not(.sr-only):not(.peer):hover {
    border-color: #2563EB;
    background-color: rgb(249, 250, 251);
}

html:not(.dark) input[type="checkbox"]:not(.sr-only):not(.peer):checked {
    background-color: #2563EB;
    border-color: #2563EB;
}

html:not(.dark) input[type="checkbox"]:not(.sr-only):not(.peer):checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%) rotate(45deg);
    width: 0.35rem;
    height: 0.65rem;
    border: solid white;
    border-width: 0 2px 2px 0;
}

html:not(.dark) input[type="checkbox"]:not(.sr-only):not(.peer):disabled {
    opacity: 1;
    cursor: not-allowed;
    border-color: rgb(156, 163, 175);
    background-color: rgb(229, 231, 235);
}

html:not(.dark) input[type="checkbox"]:not(.sr-only):not(.peer):disabled:checked {
    background-color: rgb(107, 114, 128);
    border-color: rgb(107, 114, 128);
}

html:not(.dark) input[type="checkbox"]:not(.sr-only):not(.peer):focus {
    outline: 2px solid rgba(6, 182, 212, 0.4);
    outline-offset: 2px;
}

/* ============================================
   Telerik DateTimePicker
   ============================================ */

/* -- Input wrapper -- */
html.dark .k-datetimepicker,
html.dark .k-input.k-datetimepicker {
    background-color: rgb(30, 41, 59) !important;
    border-color: rgb(71, 85, 105) !important;
    color: rgb(226, 232, 240) !important;
}

html:not(.dark) .k-datetimepicker,
html:not(.dark) .k-input.k-datetimepicker {
    background-color: white !important;
    border-color: rgb(209, 213, 219) !important;
    color: rgb(17, 24, 39) !important;
}

/* -- Input inner text field -- */
html.dark .k-input-inner {
    background-color: rgb(30, 41, 59) !important;
    color: rgb(226, 232, 240) !important;
}

html.dark .k-input-inner::placeholder {
    color: rgb(100, 116, 139) !important;
}

html:not(.dark) .k-input-inner {
    background-color: white !important;
    color: rgb(17, 24, 39) !important;
}

html:not(.dark) .k-input-inner::placeholder {
    color: rgb(156, 163, 175) !important;
}

/* -- Input icon button -- */
html.dark .k-input-button {
    background-color: rgb(30, 41, 59) !important;
    border-color: rgb(71, 85, 105) !important;
    color: rgb(148, 163, 184) !important;
}

html.dark .k-input-button:hover {
    background-color: rgb(51, 65, 85) !important;
    color: rgb(226, 232, 240) !important;
}

html:not(.dark) .k-input-button {
    background-color: white !important;
    border-color: rgb(209, 213, 219) !important;
    color: rgb(107, 114, 128) !important;
}

html:not(.dark) .k-input-button:hover {
    background-color: rgb(243, 244, 246) !important;
    color: rgb(55, 65, 81) !important;
}

/* -- Input focus ring -- */
html.dark .k-input.k-focus,
html.dark .k-datetimepicker.k-focus {
    border-color: rgb(6, 182, 212) !important;
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2) !important;
}

html:not(.dark) .k-input.k-focus,
html:not(.dark) .k-datetimepicker.k-focus {
    border-color: rgb(6, 182, 212) !important;
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2) !important;
}

/* -- Popup container -- */
html.dark .k-popup,
html.dark .k-animation-container > .k-popup {
    background-color: rgb(15, 23, 42) !important;
    border-color: rgb(51, 65, 85) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
    color: rgb(226, 232, 240) !important;
}

html:not(.dark) .k-popup,
html:not(.dark) .k-animation-container > .k-popup {
    background-color: white !important;
    border-color: rgb(209, 213, 219) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    color: rgb(17, 24, 39) !important;
}

/* -- Datetime popup layout containers -- */
html.dark .k-datetime-container,
html.dark .k-datetime-wrap {
    background-color: rgb(15, 23, 42) !important;
    border-color: rgb(51, 65, 85) !important;
}

html:not(.dark) .k-datetime-container,
html:not(.dark) .k-datetime-wrap {
    background-color: white !important;
    border-color: rgb(209, 213, 219) !important;
}

/* -- Date / Time tab toggle buttons -- */
html.dark .k-datetime-buttongroup .k-button {
    background-color: rgb(15, 23, 42) !important;
    border-color: rgb(51, 65, 85) !important;
    color: rgb(148, 163, 184) !important;
    box-shadow: none !important;
}

html.dark .k-datetime-buttongroup .k-button.k-selected {
    background-color: rgb(30, 41, 59) !important;
    border-color: rgb(51, 65, 85) !important;
    color: rgb(34, 211, 238) !important;
    box-shadow: none !important;
}

html.dark .k-datetime-buttongroup .k-button:hover:not(.k-selected) {
    background-color: rgb(51, 65, 85) !important;
    color: rgb(203, 213, 225) !important;
}

html:not(.dark) .k-datetime-buttongroup .k-button {
    background-color: rgb(243, 244, 246) !important;
    border-color: rgb(209, 213, 219) !important;
    color: rgb(107, 114, 128) !important;
    box-shadow: none !important;
}

html:not(.dark) .k-datetime-buttongroup .k-button.k-selected {
    background-color: white !important;
    border-color: rgb(209, 213, 219) !important;
    color: rgb(17, 24, 39) !important;
    font-weight: 500;
    box-shadow: none !important;
}

html:not(.dark) .k-datetime-buttongroup .k-button:hover:not(.k-selected) {
    background-color: rgb(229, 231, 235) !important;
    color: rgb(55, 65, 81) !important;
}

/* ---- Calendar ---- */

html.dark .k-calendar {
    background-color: rgb(15, 23, 42) !important;
    color: rgb(226, 232, 240) !important;
    border-color: rgb(51, 65, 85) !important;
}

html:not(.dark) .k-calendar {
    background-color: white !important;
    color: rgb(17, 24, 39) !important;
    border-color: rgb(229, 231, 235) !important;
}

/* Calendar header */
html.dark .k-calendar-header {
    background-color: rgb(15, 23, 42) !important;
    border-bottom: 1px solid rgb(51, 65, 85) !important;
    color: rgb(226, 232, 240) !important;
}

html:not(.dark) .k-calendar-header {
    background-color: white !important;
    border-bottom: 1px solid rgb(229, 231, 235) !important;
}

/* Calendar nav prev/next buttons */
html.dark .k-calendar-nav-prev,
html.dark .k-calendar-nav-next {
    background: transparent !important;
    border-color: transparent !important;
    color: rgb(148, 163, 184) !important;
    box-shadow: none !important;
}

html.dark .k-calendar-nav-prev:hover,
html.dark .k-calendar-nav-next:hover {
    background-color: rgb(51, 65, 85) !important;
    color: rgb(226, 232, 240) !important;
}

html:not(.dark) .k-calendar-nav-prev,
html:not(.dark) .k-calendar-nav-next {
    background: transparent !important;
    border-color: transparent !important;
    color: rgb(107, 114, 128) !important;
    box-shadow: none !important;
}

html:not(.dark) .k-calendar-nav-prev:hover,
html:not(.dark) .k-calendar-nav-next:hover {
    background-color: rgb(243, 244, 246) !important;
    color: rgb(17, 24, 39) !important;
}

/* Calendar month/year title button */
html.dark .k-nav-fast,
html.dark .k-calendar-title .k-button {
    background: transparent !important;
    border-color: transparent !important;
    color: rgb(226, 232, 240) !important;
    box-shadow: none !important;
    font-weight: 600;
}

html.dark .k-nav-fast:hover,
html.dark .k-calendar-title .k-button:hover {
    background-color: rgb(51, 65, 85) !important;
    color: rgb(34, 211, 238) !important;
}

html:not(.dark) .k-nav-fast,
html:not(.dark) .k-calendar-title .k-button {
    background: transparent !important;
    border-color: transparent !important;
    color: rgb(17, 24, 39) !important;
    box-shadow: none !important;
    font-weight: 600;
}

html:not(.dark) .k-nav-fast:hover,
html:not(.dark) .k-calendar-title .k-button:hover {
    background-color: rgb(243, 244, 246) !important;
    color: rgb(6, 182, 212) !important;
}

/* Calendar view (grid area) */
html.dark .k-calendar-view,
html.dark .k-calendar-table {
    background-color: rgb(15, 23, 42) !important;
}

html:not(.dark) .k-calendar-view,
html:not(.dark) .k-calendar-table {
    background-color: white !important;
}

/* Day-of-week header row */
html.dark .k-calendar-th {
    color: rgb(100, 116, 139) !important;
    background-color: rgb(15, 23, 42) !important;
}

html:not(.dark) .k-calendar-th {
    color: rgb(107, 114, 128) !important;
}

/* Day cells */
html.dark .k-calendar-td {
    color: rgb(226, 232, 240) !important;
    background-color: transparent !important;
}

html:not(.dark) .k-calendar-td {
    color: rgb(17, 24, 39) !important;
    background-color: transparent !important;
}

html.dark .k-calendar-td .k-calendar-cell-inner,
html.dark .k-calendar-td .k-link {
    color: rgb(226, 232, 240) !important;
}

html:not(.dark) .k-calendar-td .k-calendar-cell-inner,
html:not(.dark) .k-calendar-td .k-link {
    color: rgb(17, 24, 39) !important;
}

/* Day cell hover */
html.dark .k-calendar-td:hover .k-calendar-cell-inner,
html.dark .k-calendar-td:hover .k-link {
    background-color: rgb(51, 65, 85) !important;
    color: rgb(226, 232, 240) !important;
}

html:not(.dark) .k-calendar-td:hover .k-calendar-cell-inner,
html:not(.dark) .k-calendar-td:hover .k-link {
    background-color: rgb(243, 244, 246) !important;
    color: rgb(17, 24, 39) !important;
}

/* Weekend cells */
html.dark .k-weekend .k-calendar-cell-inner,
html.dark .k-weekend .k-link {
    color: rgb(148, 163, 184) !important;
}

html:not(.dark) .k-weekend .k-calendar-cell-inner,
html:not(.dark) .k-weekend .k-link {
    color: rgb(107, 114, 128) !important;
}

/* Other-month cells */
html.dark .k-other-month .k-calendar-cell-inner,
html.dark .k-other-month .k-link {
    color: rgb(71, 85, 105) !important;
}

html:not(.dark) .k-other-month .k-calendar-cell-inner,
html:not(.dark) .k-other-month .k-link {
    color: rgb(209, 213, 219) !important;
}

/* Disabled / out-of-range cells */
html.dark .k-calendar-td.k-disabled .k-calendar-cell-inner,
html.dark .k-calendar-td.k-disabled .k-link {
    color: rgb(51, 65, 85) !important;
    pointer-events: none;
}

html:not(.dark) .k-calendar-td.k-disabled .k-calendar-cell-inner,
html:not(.dark) .k-calendar-td.k-disabled .k-link {
    color: rgb(209, 213, 219) !important;
    pointer-events: none;
}

/* Today */
html.dark .k-today .k-calendar-cell-inner,
html.dark .k-today .k-link {
    color: rgb(34, 211, 238) !important;
    font-weight: 600;
}

html:not(.dark) .k-today .k-calendar-cell-inner,
html:not(.dark) .k-today .k-link {
    color: rgb(6, 182, 212) !important;
    font-weight: 600;
}

/* Selected day */
html.dark .k-selected .k-calendar-cell-inner,
html.dark .k-selected .k-link,
html.dark .k-calendar-td.k-selected .k-calendar-cell-inner {
    background-color: rgb(6, 182, 212) !important;
    color: white !important;
    border-color: rgb(6, 182, 212) !important;
}

html:not(.dark) .k-selected .k-calendar-cell-inner,
html:not(.dark) .k-selected .k-link,
html:not(.dark) .k-calendar-td.k-selected .k-calendar-cell-inner {
    background-color: rgb(6, 182, 212) !important;
    color: white !important;
    border-color: rgb(6, 182, 212) !important;
}

/* Calendar footer / Today button */
html.dark .k-calendar-footer,
html.dark .k-calendar .k-actions {
    background-color: rgb(15, 23, 42) !important;
    border-top: 1px solid rgb(51, 65, 85) !important;
}

html:not(.dark) .k-calendar-footer,
html:not(.dark) .k-calendar .k-actions {
    background-color: white !important;
    border-top: 1px solid rgb(229, 231, 235) !important;
}

html.dark .k-nav-today,
html.dark .k-calendar-footer .k-button {
    background: transparent !important;
    border-color: transparent !important;
    color: rgb(6, 182, 212) !important;
    box-shadow: none !important;
}

html.dark .k-nav-today:hover,
html.dark .k-calendar-footer .k-button:hover {
    background-color: rgb(51, 65, 85) !important;
    color: rgb(34, 211, 238) !important;
}

html:not(.dark) .k-nav-today,
html:not(.dark) .k-calendar-footer .k-button {
    background: transparent !important;
    border-color: transparent !important;
    color: rgb(6, 182, 212) !important;
    box-shadow: none !important;
}

html:not(.dark) .k-nav-today:hover,
html:not(.dark) .k-calendar-footer .k-button:hover {
    background-color: rgb(243, 244, 246) !important;
    color: rgb(8, 145, 178) !important;
}

/* ---- Time Selector ---- */
/* kendo uses both .k-timeselector and .k-time-selector depending on context */

html.dark .k-timeselector,
html.dark .k-time-selector {
    background-color: rgb(15, 23, 42) !important;
    color: rgb(226, 232, 240) !important;
    border-color: rgb(51, 65, 85) !important;
    border-left: 1px solid rgb(51, 65, 85) !important;
}

html:not(.dark) .k-timeselector,
html:not(.dark) .k-time-selector {
    background-color: white !important;
    color: rgb(17, 24, 39) !important;
    border-color: rgb(229, 231, 235) !important;
    border-left: 1px solid rgb(229, 231, 235) !important;
}

/* Time selector header (column labels: HOURS / MINUTES / AM•PM) */
html.dark .k-time-selector-header {
    background-color: rgb(15, 23, 42) !important;
    border-bottom: 1px solid rgb(51, 65, 85) !important;
    color: rgb(100, 116, 139) !important;
}

html:not(.dark) .k-time-selector-header {
    background-color: white !important;
    border-bottom: 1px solid rgb(229, 231, 235) !important;
    color: rgb(107, 114, 128) !important;
}

/* "Now" button in time selector header */
html.dark .k-time-now,
html.dark .k-time-selector-header .k-time-now {
    background: transparent !important;
    border-color: transparent !important;
    color: rgb(6, 182, 212) !important;
    box-shadow: none !important;
}

html.dark .k-time-now:hover,
html.dark .k-time-selector-header .k-time-now:hover {
    color: rgb(34, 211, 238) !important;
    background-color: rgb(51, 65, 85) !important;
}

html:not(.dark) .k-time-now,
html:not(.dark) .k-time-selector-header .k-time-now {
    background: transparent !important;
    border-color: transparent !important;
    color: rgb(6, 182, 212) !important;
    box-shadow: none !important;
}

html:not(.dark) .k-time-now:hover,
html:not(.dark) .k-time-selector-header .k-time-now:hover {
    color: rgb(8, 145, 178) !important;
    background-color: rgb(243, 244, 246) !important;
}

/* Time list scroll areas */
html.dark .k-time-list-container,
html.dark .k-time-list-wrapper {
    background-color: rgb(15, 23, 42) !important;
}

html:not(.dark) .k-time-list-container,
html:not(.dark) .k-time-list-wrapper {
    background-color: white !important;
}

/* Column title (HOURS / MINUTES / AM•PM label above each list) */
html.dark .k-time-list-wrapper .k-title {
    color: rgb(100, 116, 139) !important;
    background-color: rgb(15, 23, 42) !important;
}

html:not(.dark) .k-time-list-wrapper .k-title {
    color: rgb(107, 114, 128) !important;
    background-color: white !important;
}

/* Selection highlight band */
html.dark .k-time-highlight,
html.dark .k-time-list-highlight {
    background-color: rgb(30, 41, 59) !important;
    border-top: 1px solid rgb(71, 85, 105) !important;
    border-bottom: 1px solid rgb(71, 85, 105) !important;
}

html:not(.dark) .k-time-highlight,
html:not(.dark) .k-time-list-highlight {
    background-color: rgb(243, 244, 246) !important;
    border-top: 1px solid rgb(209, 213, 219) !important;
    border-bottom: 1px solid rgb(209, 213, 219) !important;
}

/* Time list items */
html.dark .k-time-list .k-item,
html.dark .k-time-list-item {
    color: rgb(203, 213, 225) !important;
    background-color: transparent !important;
}

html.dark .k-time-list .k-item:hover,
html.dark .k-time-list-item:hover {
    background-color: rgb(51, 65, 85) !important;
    color: rgb(226, 232, 240) !important;
}

html.dark .k-time-list .k-item.k-selected,
html.dark .k-time-list-item.k-selected {
    color: rgb(34, 211, 238) !important;
    font-weight: 600;
}

html:not(.dark) .k-time-list .k-item,
html:not(.dark) .k-time-list-item {
    color: rgb(55, 65, 81) !important;
    background-color: transparent !important;
}

html:not(.dark) .k-time-list .k-item:hover,
html:not(.dark) .k-time-list-item:hover {
    background-color: rgb(243, 244, 246) !important;
    color: rgb(17, 24, 39) !important;
}

html:not(.dark) .k-time-list .k-item.k-selected,
html:not(.dark) .k-time-list-item.k-selected {
    color: rgb(6, 182, 212) !important;
    font-weight: 600;
}

/* Time selector footer */
html.dark .k-time-selector-footer {
    background-color: rgb(15, 23, 42) !important;
    border-top: 1px solid rgb(51, 65, 85) !important;
}

html:not(.dark) .k-time-selector-footer {
    background-color: white !important;
    border-top: 1px solid rgb(229, 231, 235) !important;
}

/* Time selector footer buttons (Set / Cancel) — secondary style */
html.dark .k-timeselector .k-button,
html.dark .k-time-selector .k-button,
html.dark .k-time-selector-footer .k-button {
    background-color: rgb(51, 65, 85) !important;
    border-color: rgb(71, 85, 105) !important;
    color: rgb(226, 232, 240) !important;
    box-shadow: none !important;
}

html.dark .k-timeselector .k-button:hover,
html.dark .k-time-selector .k-button:hover,
html.dark .k-time-selector-footer .k-button:hover {
    background-color: rgb(71, 85, 105) !important;
    color: rgb(226, 232, 240) !important;
}

/* "Set" / confirm button — primary style */
html.dark .k-timeselector .k-button-primary,
html.dark .k-time-selector .k-button-primary,
html.dark .k-time-selector-footer .k-button-primary {
    background-color: rgb(6, 182, 212) !important;
    border-color: rgb(6, 182, 212) !important;
    color: white !important;
}

html.dark .k-timeselector .k-button-primary:hover,
html.dark .k-time-selector .k-button-primary:hover,
html.dark .k-time-selector-footer .k-button-primary:hover {
    background-color: rgb(8, 145, 178) !important;
    box-shadow: 0 4px 6px -1px rgba(6, 182, 212, 0.4) !important;
}

html:not(.dark) .k-timeselector .k-button,
html:not(.dark) .k-time-selector .k-button,
html:not(.dark) .k-time-selector-footer .k-button {
    background-color: rgb(243, 244, 246) !important;
    border-color: rgb(209, 213, 219) !important;
    color: rgb(55, 65, 81) !important;
    box-shadow: none !important;
}

html:not(.dark) .k-timeselector .k-button:hover,
html:not(.dark) .k-time-selector .k-button:hover,
html:not(.dark) .k-time-selector-footer .k-button:hover {
    background-color: rgb(229, 231, 235) !important;
    color: rgb(17, 24, 39) !important;
}

html:not(.dark) .k-timeselector .k-button-primary,
html:not(.dark) .k-time-selector .k-button-primary,
html:not(.dark) .k-time-selector-footer .k-button-primary {
    background-color: rgb(6, 182, 212) !important;
    border-color: rgb(6, 182, 212) !important;
    color: white !important;
}

html:not(.dark) .k-timeselector .k-button-primary:hover,
html:not(.dark) .k-time-selector .k-button-primary:hover,
html:not(.dark) .k-time-selector-footer .k-button-primary:hover {
    background-color: rgb(8, 145, 178) !important;
    box-shadow: 0 4px 6px -1px rgba(6, 182, 212, 0.3) !important;
}

/* -- Scrollbar styling for time lists -- */
html.dark .k-time-list-wrapper ::-webkit-scrollbar {
    width: 4px;
}

html.dark .k-time-list-wrapper ::-webkit-scrollbar-track {
    background: rgb(15, 23, 42);
}

html.dark .k-time-list-wrapper ::-webkit-scrollbar-thumb {
    background-color: rgb(51, 65, 85);
    border-radius: 2px;
}

html:not(.dark) .k-time-list-wrapper ::-webkit-scrollbar {
    width: 4px;
}

html:not(.dark) .k-time-list-wrapper ::-webkit-scrollbar-track {
    background: white;
}

html:not(.dark) .k-time-list-wrapper ::-webkit-scrollbar-thumb {
    background-color: rgb(209, 213, 219);
    border-radius: 2px;
}

/* -- Kendo flat-primary override (Today / Now buttons) --
   kendo-theme-default uses #ff6358 for .k-button-flat-primary text;
   override everywhere in the datetime popup. */
html.dark .k-calendar-footer .k-button-flat-primary,
html.dark .k-calendar-footer .k-button-flat.k-button-flat-primary,
html.dark .k-nav-today {
    color: rgb(6, 182, 212) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.dark .k-calendar-footer .k-button-flat-primary:hover,
html.dark .k-calendar-footer .k-button-flat.k-button-flat-primary:hover,
html.dark .k-nav-today:hover {
    color: rgb(34, 211, 238) !important;
    background-color: rgb(51, 65, 85) !important;
}

html:not(.dark) .k-calendar-footer .k-button-flat-primary,
html:not(.dark) .k-calendar-footer .k-button-flat.k-button-flat-primary,
html:not(.dark) .k-nav-today {
    color: rgb(6, 182, 212) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html:not(.dark) .k-calendar-footer .k-button-flat-primary:hover,
html:not(.dark) .k-calendar-footer .k-button-flat.k-button-flat-primary:hover,
html:not(.dark) .k-nav-today:hover {
    color: rgb(8, 145, 178) !important;
    background-color: rgb(243, 244, 246) !important;
}

/* -- Kendo solid-primary override (Set button) --
   kendo-theme-default maps .k-button-solid-primary to #ff6358;
   override within the time selector footer. */
html.dark .k-time-selector-footer .k-button-solid-primary,
html.dark .k-timeselector .k-button-solid-primary,
html.dark .k-time-selector .k-button-solid-primary {
    background-color: rgb(6, 182, 212) !important;
    border-color: rgb(6, 182, 212) !important;
    color: white !important;
    box-shadow: none !important;
}

html.dark .k-time-selector-footer .k-button-solid-primary:hover,
html.dark .k-timeselector .k-button-solid-primary:hover,
html.dark .k-time-selector .k-button-solid-primary:hover {
    background-color: rgb(8, 145, 178) !important;
    border-color: rgb(8, 145, 178) !important;
    box-shadow: 0 4px 6px -1px rgba(6, 182, 212, 0.4) !important;
}

html:not(.dark) .k-time-selector-footer .k-button-solid-primary,
html:not(.dark) .k-timeselector .k-button-solid-primary,
html:not(.dark) .k-time-selector .k-button-solid-primary {
    background-color: rgb(6, 182, 212) !important;
    border-color: rgb(6, 182, 212) !important;
    color: white !important;
    box-shadow: none !important;
}

html:not(.dark) .k-time-selector-footer .k-button-solid-primary:hover,
html:not(.dark) .k-timeselector .k-button-solid-primary:hover,
html:not(.dark) .k-time-selector .k-button-solid-primary:hover {
    background-color: rgb(8, 145, 178) !important;
    border-color: rgb(8, 145, 178) !important;
    box-shadow: 0 4px 6px -1px rgba(6, 182, 212, 0.3) !important;
}

/* -- Time list vignette (scroll fade) --
   Kendo adds ::before / ::after gradient overlays on .k-time-list-wrapper
   using white as the opaque color. In dark mode override to match the
   dark background so the fade blends correctly. */
html.dark .k-time-list-wrapper::before {
    background: linear-gradient(to bottom, rgb(15, 23, 42) 0%, transparent 100%) !important;
}

html.dark .k-time-list-wrapper::after {
    background: linear-gradient(to top, rgb(15, 23, 42) 0%, transparent 100%) !important;
}

html.dark .k-time-list::before {
    background: linear-gradient(to bottom, rgb(15, 23, 42) 0%, transparent 100%) !important;
}

html.dark .k-time-list::after {
    background: linear-gradient(to top, rgb(15, 23, 42) 0%, transparent 100%) !important;
}

/* Kendo v7+ uses mask-image on .k-time-list for the scroll fade instead of
   ::before/::after gradients. Remove the mask in dark mode so the transparent
   edges don't expose a white background. */
html.dark .k-time-list {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

html.dark .k-time-list-wrapper .k-time-list {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}