/* ============================================
   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);
}

/* ============================================
   Telerik Components Overrides
   ============================================ */

/* Telerik Grid */
html.dark .k-grid-header {
    background-color: rgb(15, 23, 42) !important;
}

html.dark .k-grid-content {
    background-color: rgb(30, 41, 59) !important;
}

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

html:not(.dark) .k-grid-content {
    background-color: white;
}

/* Telerik Windows/Dialogs */
html.dark .k-window,
html.dark .k-dialog {
    background-color: rgb(30, 41, 59) !important;
    border-color: rgb(51, 65, 85) !important;
    color: rgb(226, 232, 240) !important;
}

html.dark .k-window-titlebar,
html.dark .k-dialog-titlebar {
    background-color: rgb(15, 23, 42) !important;
    border-bottom-color: rgb(51, 65, 85) !important;
}

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

html:not(.dark) .k-window-titlebar,
html:not(.dark) .k-dialog-titlebar {
    background-color: rgb(249, 250, 251);
    border-bottom-color: rgb(229, 231, 235);
}

/* Telerik TabStrip */
html.dark .k-tabstrip-items-wrapper {
    background-color: rgb(30, 41, 59) !important;
    border-color: rgb(51, 65, 85) !important;
}

html.dark .k-tabstrip .k-item {
    background-color: rgb(30, 41, 59) !important;
    border-color: rgb(51, 65, 85) !important;
    color: rgb(148, 163, 184) !important;
}

html.dark .k-tabstrip .k-item:hover {
    background-color: rgb(51, 65, 85) !important;
    color: rgb(203, 213, 225) !important;
}

html.dark .k-tabstrip .k-item.k-active,
html.dark .k-tabstrip .k-item:active {
    background-color: rgb(15, 23, 42) !important;
    border-bottom-color: transparent !important;
    color: rgb(34, 211, 238) !important;
}

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

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

/* ============================================
   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;
}