#root {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* SPA Body Background — Dynamic gradient from tenant accent color */
body {
    background: var(--bg-body-gradient-end, #000000);
    background-image: linear-gradient(135deg, var(--bg-body-gradient-start, #3b0000) 0%, var(--bg-body-gradient-end, #000000) 100%);
    min-height: 100vh;
}

/* ============================================================
   Dynamic Tenant Primary Color Real-Time Theme Mappings
   ============================================================ */
:root {
    --primary-color-dark: color-mix(in srgb, var(--primary-color, #ef4444) 80%, black);
    --primary-color-light: color-mix(in srgb, var(--primary-color, #ef4444) 85%, white);
}

/* ============================================================
   Dynamic Scrollbar Styling (Themed with Primary Color)
   ============================================================ */
* {
    scrollbar-width: thin !important;
    scrollbar-color: color-mix(in srgb, var(--primary-color, #ef4444) 65%, transparent) rgba(0, 0, 0, 0.25) !important;
}

html.light-mode * {
    scrollbar-color: color-mix(in srgb, var(--primary-color, #ef4444) 65%, transparent) rgba(0, 0, 0, 0.06) !important;
}

::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 9999px !important;
}

html.light-mode ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
}

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary-color, #ef4444) 60%, transparent) !important;
    border-radius: 9999px !important;
    border: 1px solid transparent !important;
    background-clip: padding-box !important;
    transition: background-color 0.2s ease !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color, #ef4444) !important;
}


/* Primary Backgrounds */
#root .bg-red-600,
#root .bg-red-500,
#root .bg-red-700,
button.bg-red-600,
button.bg-red-500 {
    background-color: var(--primary-color, #ef4444) !important;
}

#root .hover\:bg-red-500:hover,
#root .hover\:bg-red-600:hover,
#root .hover\:bg-red-700:hover,
button.bg-red-600:hover,
button.bg-red-500:hover {
    background-color: var(--primary-color-dark, #dc2626) !important;
}

/* Primary Text Accents */
#root .text-red-400,
#root .text-red-500,
#root .text-red-600,
#root .hover\:text-red-400:hover,
#root .group-hover\:text-red-400:hover {
    color: var(--primary-color-light, #f87171) !important;
}

/* Primary Borders */
#root .border-red-500,
#root .border-red-600,
#root .border-red-500\/20,
#root .border-red-500\/25,
#root .border-red-500\/30,
#root .border-red-500\/40,
#root .border-red-500\/50,
#root .hover\:border-red-500\/40:hover {
    border-color: color-mix(in srgb, var(--primary-color, #ef4444) 40%, transparent) !important;
}

/* Subtle Primary Tints (Badges, Active Pills) */
#root .bg-red-500\/10,
#root .bg-red-500\/15,
#root .bg-red-500\/20,
#root .bg-red-600\/10,
#root .bg-red-600\/15,
#root .bg-red-600\/20,
#root .bg-red-650\/15 {
    background-color: color-mix(in srgb, var(--primary-color, #ef4444) 15%, transparent) !important;
}

/* Primary Gradients */
#root .from-red-650,
#root .from-red-600,
#root .from-red-500 {
    --tw-gradient-from: var(--primary-color, #ef4444) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: color-mix(in srgb, var(--primary-color, #ef4444) 75%, black) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

#root .to-red-500,
#root .to-red-600,
#root .to-red-700 {
    --tw-gradient-to: color-mix(in srgb, var(--primary-color, #ef4444) 75%, black) var(--tw-gradient-to-position) !important;
}

/* Focus Rings and Input Highlights */
#root .focus\:ring-red-500:focus,
#root .focus\:border-red-500:focus,
#root input:focus,
#root select:focus,
#root textarea:focus {
    border-color: var(--primary-color, #ef4444) !important;
    --tw-ring-color: color-mix(in srgb, var(--primary-color, #ef4444) 40%, transparent) !important;
}

/* Shadows and Glows */
#root .shadow-red-600\/10,
#root .shadow-red-600\/20,
#root .shadow-red-600\/30,
#root .shadow-red-500\/20,
#root .shadow-red-500\/30 {
    --tw-shadow-color: color-mix(in srgb, var(--primary-color, #ef4444) 30%, transparent) !important;
}

/* ============================================================
   React SPA Light Mode Comprehensive Overrides
   ============================================================ */
html.light-mode body {
    background: var(--bg-body-gradient-end, #f8fafc) !important;
    background-image: linear-gradient(135deg, var(--bg-body-gradient-start, #ffffff) 0%, var(--bg-body-gradient-end, #f8fafc) 100%) !important;
    color: #0f172a !important;
}

html.light-mode #root .bg-slate-950,
html.light-mode #root .bg-slate-900,
html.light-mode #root .bg-slate-900\/60,
html.light-mode #root .bg-slate-900\/80,
html.light-mode #root .bg-slate-900\/90,
html.light-mode #root .bg-slate-900\/50,
html.light-mode #root aside,
html.light-mode #root header {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

html.light-mode #root .bg-slate-850,
html.light-mode #root .bg-slate-850\/40,
html.light-mode #root .bg-slate-800,
html.light-mode #root .bg-slate-800\/40,
html.light-mode #root .bg-slate-800\/60,
html.light-mode #root .bg-slate-800\/80,
html.light-mode #root .bg-slate-800\/90 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light-mode #root .bg-slate-950\/40,
html.light-mode #root .bg-slate-950\/20,
html.light-mode #root .bg-slate-950\/80 {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

html.light-mode #root .border-slate-800,
html.light-mode #root .border-slate-800\/80,
html.light-mode #root .border-slate-800\/60,
html.light-mode #root .border-slate-750,
html.light-mode #root .border-slate-750\/70,
html.light-mode #root .border-slate-700,
html.light-mode #root .border-slate-700\/60,
html.light-mode #root .divide-slate-800,
html.light-mode #root .divide-slate-800\/60 {
    border-color: #e2e8f0 !important;
}

html.light-mode #root .text-white,
html.light-mode #root .text-slate-100 {
    color: #0f172a !important;
}

html.light-mode #root .text-slate-200 {
    color: #1e293b !important;
}

html.light-mode #root .text-slate-300 {
    color: #334155 !important;
}

html.light-mode #root .text-slate-400 {
    color: #64748b !important;
}

html.light-mode #root .text-slate-500 {
    color: #94a3b8 !important;
}

html.light-mode #root input,
html.light-mode #root select,
html.light-mode #root textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html.light-mode #root input::placeholder,
html.light-mode #root textarea::placeholder {
    color: #94a3b8 !important;
}

html.light-mode #root tr:hover {
    background-color: #f1f5f9 !important;
}

html.light-mode #root thead tr {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}


/* Custom Styles for Auth Layout */

/* Auth Page Background */
html:has(.auth-body) {
    overflow: hidden;       /* kill scroll at root level */
}

.auth-body {
    background-image: linear-gradient(135deg, var(--bg-body-gradient-start) 0%, var(--bg-body-gradient-end) 100%);
    height: 100vh;
    height: 100dvh;         /* dynamic viewport for mobile browsers */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;       /* clip bg-shapes and any overflow */
    padding: 1rem 0;
}

/* ============================================================
   Toast Notifications — Notify-Style (Slide from Bottom)
   ============================================================ */
.toast {
    position: fixed;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 2rem));
    z-index: 2147483647;
    min-width: 320px;
    max-width: 420px;
    padding: 0;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow:
        0 32px 64px -12px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex !important;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    transition:
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.4s ease,
        visibility 0s linear 0.4s;
    will-change: transform, opacity;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
    transition:
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.4s ease,
        visibility 0s linear 0s;
}

/* Inner body */
.toast-body {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
}

/* Icon wrapper */
.toast-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* Text area */
.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 0.1rem;
    line-height: 1.3;
}

.toast-message {
    font-size: 0.8125rem;
    font-weight: 400;
    opacity: 0.85;
    line-height: 1.45;
    word-break: break-word;
}

/* Progress bar */
.toast-progress {
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0 0 1rem 1rem;
    overflow: hidden;
}

.toast-progress-bar {
    height: 100%;
    width: 100%;
    border-radius: 0 0 1rem 1rem;
    transform-origin: left;
    animation: toastProgressShrink 3s linear forwards;
}

@keyframes toastProgressShrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ── Success ── */
.toast-success {
    background: rgba(6, 44, 28, 0.96) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    box-shadow:
        0 32px 64px -12px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(16, 185, 129, 0.25),
        inset 0 1px 0 rgba(16, 185, 129, 0.2) !important;
}

.toast-success .toast-icon {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1) !important;
}

.toast-success .toast-title { color: #34d399 !important; font-weight: 700 !important; }
.toast-success .toast-message { color: #ffffff !important; font-weight: 500 !important; }
.toast-success .toast-progress-bar { background: linear-gradient(90deg, #059669, #34d399) !important; }

/* ── Danger / Error ── */
.toast-danger,
.toast-error {
    background: rgba(45, 10, 10, 0.96) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    box-shadow:
        0 32px 64px -12px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(239, 68, 68, 0.25),
        inset 0 1px 0 rgba(239, 68, 68, 0.2) !important;
}

.toast-danger .toast-icon,
.toast-error .toast-icon {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.1) !important;
}

.toast-danger .toast-title,
.toast-error .toast-title { color: #f87171 !important; font-weight: 700 !important; }
.toast-danger .toast-message,
.toast-error .toast-message { color: #ffffff !important; font-weight: 500 !important; }
.toast-danger .toast-progress-bar,
.toast-error .toast-progress-bar { background: linear-gradient(90deg, #dc2626, #f87171) !important; }

/* ── Primary / Info ── */
.toast-primary {
    background: rgba(15, 23, 60, 0.96) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    box-shadow:
        0 32px 64px -12px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(99, 102, 241, 0.25),
        inset 0 1px 0 rgba(99, 102, 241, 0.2) !important;
}

.toast-primary .toast-icon {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #818cf8 !important;
    box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.1) !important;
}

.toast-primary .toast-title { color: #a5b4fc !important; font-weight: 700 !important; }
.toast-primary .toast-message { color: #ffffff !important; font-weight: 500 !important; }
.toast-primary .toast-progress-bar { background: linear-gradient(90deg, #4f46e5, #818cf8) !important; }

/* ── RTL support ── */
[dir="rtl"] .toast {
    direction: rtl;
    text-align: right;
}

/* Fallback Audio Prompt (Refined) */
/* Only shown if silent unlock fails repeatedly - rarely used now but kept for safety */
.audio-prompt {
    position: fixed;
    bottom: 5.5rem;
    /* Stack above toast */
    left: 2rem;
    z-index: 9999;
    max-width: 320px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1rem;
    color: white;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.4s ease-out;
}

/* Background Shapes */
.bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    opacity: 0.4;
}

.bg-shape-1 {
    top: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #990000 0%, transparent 70%);
}

.bg-shape-2 {
    bottom: -100px;
    left: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #6366f1 0%, transparent 70%);
}

/* Animations */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-container {
    animation: slideUp 0.5s ease-out;
    max-height: 100%;
    overflow-y: auto;       /* scroll inside container only */
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar on main-container but keep scroll functional */
.auth-body .main-container::-webkit-scrollbar {
    display: none;
}
.auth-body .main-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ============================================================
   Auth Pages – Mobile Responsiveness
   ============================================================ */

/* Small phones (≤ 480px) – edge-to-edge card */
@media (max-width: 480px) {
    .auth-body {
        align-items: flex-start;
        padding-top: env(safe-area-inset-top, 1rem);
    }

    .auth-body .main-container {
        max-width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Shrink background blobs so they don't cause overflow */
    .bg-shape-1 {
        width: 250px;
        height: 250px;
        top: -60px;
        right: -60px;
    }

    .bg-shape-2 {
        width: 300px;
        height: 300px;
        bottom: -60px;
        left: -60px;
    }
}

/* Medium phones (≤ 640px) */
@media (max-width: 640px) {
    .auth-body .main-container {
        max-width: 100%;
    }

    .toast {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        min-width: unset;
        max-width: calc(100% - 2rem);
        transform: translateX(0) translateY(calc(100% + 2rem));
    }

    .toast.show {
        transform: translateX(0) translateY(0);
    }

    [dir="rtl"] .toast {
        left: 1rem;
        right: 1rem;
    }
}


/* ============================================================
   Desktop Sidebar – Fixed Position Layout
   ============================================================ */
@media (min-width: 1025px) {
    .left-sidebar {
        position: fixed !important;
        top: var(--impersonation-bar-height, 0px) !important;
        bottom: 0 !important;
        height: calc(100vh - var(--impersonation-bar-height, 0px)) !important;
        z-index: 1001 !important;
    }
    
    html[dir="ltr"] .left-sidebar {
        left: 0 !important;
        right: auto !important;
    }
    html[dir="rtl"] .left-sidebar {
        right: 0 !important;
        left: auto !important;
        border-right: none !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .main-container {
        transition: margin 0.3s ease !important;
    }

    html[dir="ltr"] .main-container {
        margin-left: 260px !important;
        margin-right: 0 !important;
    }
    html[dir="ltr"] body.sidebar-collapsed .main-container {
        margin-left: 70px !important;
    }

    html[dir="rtl"] .main-container {
        margin-right: 260px !important;
        margin-left: 0 !important;
    }
    html[dir="rtl"] body.sidebar-collapsed .main-container {
        margin-right: 70px !important;
    }
}

/* Prevent main action buttons from losing their visibility and gradients in both modes */
.gradient-header button[onclick="openQuickCreateModal()"] {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;
}
.gradient-header button[onclick="openQuickCreateModal()"] i {
    color: #ffffff !important;
}
.gradient-header button[onclick="openQuickCreateModal()"]:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    transform: translateY(-1px);
}

.gradient-header button[onclick="openDistSuperModal()"] {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}
.gradient-header button[onclick="openDistSuperModal()"] i {
    color: #ffffff !important;
}
.gradient-header button[onclick="openDistSuperModal()"]:hover {
    background: linear-gradient(135deg, #059669 0%, #065f46 100%) !important;
    transform: translateY(-1px);
}

.gradient-header a[href*="attendance"] {
    background: linear-gradient(135deg, #e11d48 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25) !important;
}
.gradient-header a[href*="attendance"] i,
.gradient-header a[href*="attendance"] svg {
    color: #ffffff !important;
}
.gradient-header a[href*="attendance"]:hover {
    background: linear-gradient(135deg, #be185d 0%, #9d174d 100%) !important;
    transform: translateY(-1px);
}

/* Fix Leads Distribution glass button in light mode */
html.light-mode .gradient-header button.bg-white\/5 {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--text-color-base) !important;
}
html.light-mode .gradient-header button.bg-white\/5 i {
    color: #4f46e5 !important; /* solid indigo */
}
html.light-mode .gradient-header button.bg-white\/5:hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
}

/* Responsive header utilities display */
@media (max-width: 767px) {
    .header-row-1 {
        display: none !important;
    }
}
@media (min-width: 768px) {
    .header-row-1 {
        display: flex !important;
    }
}

/* Ensure Select2 dropdown opens above all sidebars, loaders, and navigation overlays */
.select2-container--open {
    z-index: 999999999 !important;
}

/* Fix stages sidebar dropdown clipping/overlapping items below it */
.dropdown-content.open {
    max-height: 1500px !important;
}

/* --- Flatpickr Calendar Styling (Dark Mode by Default) --- */
.flatpickr-calendar {
    direction: ltr !important;
    background: #111827 !important; /* gray-900 */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
    color: #f8fafc !important;
    border-radius: 16px !important;
    font-family: 'Tajawal', sans-serif !important;
}
.flatpickr-months {
    position: relative !important;
}
.flatpickr-months .flatpickr-prev-month {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 40px !important;
    height: 34px !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.flatpickr-months .flatpickr-next-month {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 40px !important;
    height: 34px !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.flatpickr-months .flatpickr-prev-month svg {
    transform: none !important;
}
.flatpickr-months .flatpickr-next-month svg {
    transform: rotate(180deg) !important;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after {
    border-bottom-color: #111827 !important;
}
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after {
    border-top-color: #111827 !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .numInputWrapper span.arrowUp:after,
.flatpickr-current-month .numInputWrapper span.arrowDown:after,
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    color: #f8fafc !important;
    fill: #f8fafc !important;
}
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
    color: #ef4444 !important;
}
.flatpickr-current-month {
    color: #f8fafc !important;
}
span.flatpickr-weekday {
    color: #94a3b8 !important;
    font-weight: 600 !important;
}
.flatpickr-day {
    color: #e2e8f0 !important;
    border-radius: 8px !important;
}
.flatpickr-day:hover, .flatpickr-day:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.flatpickr-day.today {
    border-color: #ef4444 !important;
    color: #fff !important;
}
.flatpickr-day.today:hover {
    background: #ef4444 !important;
    color: #fff !important;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
    color: rgba(255, 255, 255, 0.15) !important;
}

/* --- Flatpickr Calendar Styling (Light Mode Overrides) --- */
html.light-mode .flatpickr-calendar {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
    color: #0f172a !important;
}
html.light-mode .flatpickr-calendar.arrowTop:before, html.light-mode .flatpickr-calendar.arrowTop:after {
    border-bottom-color: #ffffff !important;
}
html.light-mode .flatpickr-calendar.arrowBottom:before, html.light-mode .flatpickr-calendar.arrowBottom:after {
    border-top-color: #ffffff !important;
}
html.light-mode .flatpickr-months .flatpickr-month,
html.light-mode .flatpickr-current-month .numInputWrapper span.arrowUp:after,
html.light-mode .flatpickr-current-month .numInputWrapper span.arrowDown:after,
html.light-mode .flatpickr-months .flatpickr-prev-month, html.light-mode .flatpickr-months .flatpickr-next-month {
    color: #0f172a !important;
    fill: #0f172a !important;
}
html.light-mode .flatpickr-current-month {
    color: #0f172a !important;
}
html.light-mode span.flatpickr-weekday {
    color: #64748b !important;
}
html.light-mode .flatpickr-day {
    color: #334155 !important;
}
html.light-mode .flatpickr-day:hover, html.light-mode .flatpickr-day:focus {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}
html.light-mode .flatpickr-day.selected {
    background: #ef4444 !important;
    color: #fff !important;
}
html.light-mode .flatpickr-day.flatpickr-disabled, html.light-mode .flatpickr-day.flatpickr-disabled:hover {
    color: rgba(0, 0, 0, 0.15) !important;
}

/* --- Calendar & Date Pickers --- */

/* Fix double borders on inputs in modals */
.modal-content input:focus {
    box-shadow: none !important;
}

/* --- Flatpickr Time Picker Styling (Dark Mode) --- */
.flatpickr-time {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #111827 !important;
    color: #f8fafc !important;
}
.flatpickr-time .flatpickr-time-separator {
    color: #f8fafc !important;
}
.flatpickr-time input {
    background: #1f2937 !important; /* dark input bg */
    color: #f8fafc !important; /* light text */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
}
.flatpickr-time input:hover, .flatpickr-time input:focus {
    background: #374151 !important;
}
.flatpickr-time .flatpickr-am-pm {
    color: #f8fafc !important;
    background: #1f2937 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
}
.flatpickr-time .flatpickr-am-pm:hover {
    background: #374151 !important;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: #f8fafc !important;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: #f8fafc !important;
}

/* --- Flatpickr Time Picker Styling (Light Mode Overrides) --- */
html.light-mode .flatpickr-time {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #ffffff !important;
    color: #0f172a !important;
}
html.light-mode .flatpickr-time .flatpickr-time-separator {
    color: #0f172a !important;
}
html.light-mode .flatpickr-time input {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
html.light-mode .flatpickr-time input:hover, html.light-mode .flatpickr-time input:focus {
    background: #e2e8f0 !important;
}
html.light-mode .flatpickr-time .flatpickr-am-pm {
    color: #0f172a !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
html.light-mode .flatpickr-time .flatpickr-am-pm:hover {
    background: #e2e8f0 !important;
}
html.light-mode .flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: #0f172a !important;
}
html.light-mode .flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: #0f172a !important;
}

/* --- Kanban & Operations Page Comprehensive Light Mode Styles --- */
html.light-mode .bg-\[\#0d121d\],
html.light-mode .bg-\[\#0f1419\],
html.light-mode .bg-\[\#131a22\],
html.light-mode .bg-\[\#0a0d11\],
html.light-mode .bg-\[\#1a2332\] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html.light-mode .bg-slate-900,
html.light-mode .bg-slate-900\/90,
html.light-mode .bg-slate-900\/80,
html.light-mode .bg-slate-900\/60,
html.light-mode .bg-slate-900\/50,
html.light-mode .bg-slate-850,
html.light-mode .bg-slate-800,
html.light-mode .bg-slate-800\/90,
html.light-mode .bg-slate-800\/80,
html.light-mode .bg-slate-800\/60,
html.light-mode .bg-slate-800\/40 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html.light-mode .bg-slate-950\/80,
html.light-mode .bg-slate-950\/90 {
    background-color: rgba(15, 23, 42, 0.4) !important;
}

html.light-mode .text-white,
html.light-mode .text-slate-100,
html.light-mode .text-slate-200,
html.light-mode .text-slate-300 {
    color: #0f172a !important;
}

html.light-mode .text-slate-400 {
    color: #64748b !important;
}

html.light-mode .text-slate-500 {
    color: #94a3b8 !important;
}

html.light-mode .border-slate-800,
html.light-mode .border-slate-800\/80,
html.light-mode .border-slate-800\/60,
html.light-mode .border-slate-700,
html.light-mode .border-slate-700\/60 {
    border-color: #e2e8f0 !important;
}

html.light-mode input,
html.light-mode select,
html.light-mode textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html.light-mode input::placeholder,
html.light-mode textarea::placeholder {
    color: #94a3b8 !important;
}

/* ============================================================
   Right Sidebar Light Mode Contrast Overrides
   — Must override Tailwind text-white / text-gray-* directly
   ============================================================ */
html.light-mode .right-sidebar {
    color: #0f172a !important;
}

html.light-mode .right-sidebar h2.sidebar-header-label {
    color: #475569 !important;
}

html.light-mode .right-sidebar .activity-card {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

/* Override Tailwind text-* utilities inside right sidebar */
html.light-mode .right-sidebar .text-white,
html.light-mode .right-sidebar .text-slate-100,
html.light-mode .right-sidebar .text-slate-200,
html.light-mode .right-sidebar .text-slate-300 {
    color: #0f172a !important;
}

html.light-mode .right-sidebar .text-gray-400,
html.light-mode .right-sidebar .text-slate-400 {
    color: #475569 !important;
}

html.light-mode .right-sidebar .text-gray-500,
html.light-mode .right-sidebar .text-slate-500 {
    color: #64748b !important;
}

/* Notification items */
html.light-mode .right-sidebar h4 {
    color: #0f172a !important;
}

html.light-mode .right-sidebar span {
    color: #475569 !important;
}

/* Time/muted spans stay slightly dimmer */
html.light-mode .right-sidebar .text-\[10px\],
html.light-mode .right-sidebar .text-xs {
    color: #64748b !important;
}

/* ─── Read notifications: remove opacity-50 in light mode, use color instead ─── */
/* In dark mode opacity-50 is fine; in light mode it makes text nearly invisible */
html.light-mode .right-sidebar .notification-item.opacity-50 {
    opacity: 1 !important;
}
/* Show read state by muting the text color instead */
html.light-mode .right-sidebar .notification-item.opacity-50 h4 {
    color: #94a3b8 !important;
}
html.light-mode .right-sidebar .notification-item.opacity-50 span {
    color: #cbd5e1 !important;
}

/* Calendar & Task sections */
html.light-mode .right-sidebar .calendar-event h4,
html.light-mode .right-sidebar .event-content h4,
html.light-mode .right-sidebar .notif-content h4 {
    color: #0f172a !important;
}

html.light-mode .right-sidebar .calendar-event span,
html.light-mode .right-sidebar .event-content span,
html.light-mode .right-sidebar .notif-content span {
    color: #64748b !important;
}

/* Online users */
html.light-mode .right-sidebar p.font-semibold {
    color: #0f172a !important;
}

/* Avatar fallback initials inside right sidebar */
html.light-mode .right-sidebar .bg-slate-800 {
    background-color: #e2e8f0 !important;
}

html.light-mode .right-sidebar .text-slate-300,
html.light-mode .right-sidebar .text-slate-400 {
    color: #475569 !important;
}

/* Delete button inside notification-item */
html.light-mode .right-sidebar button.text-gray-400 {
    color: #94a3b8 !important;
}
html.light-mode .right-sidebar button.hover\:text-red-500:hover {
    color: #ef4444 !important;
}

/* ============================================================
   Button and Drive Folder Selection Light Mode Fixes
   ============================================================ */

/* Fix primary button backgrounds and text in Light Mode to use Settings Primary Color */
html.light-mode #root button[type="submit"],
html.light-mode #root button.bg-gradient-to-r,
html.light-mode #root a.bg-gradient-to-r,
html.light-mode #root .btn-submit,
html.light-mode #root .btn-primary {
    background: var(--primary-color) !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 15px var(--primary-shadow, rgba(239, 68, 68, 0.25)) !important;
}

html.light-mode #root button[type="submit"]:hover,
html.light-mode #root button.bg-gradient-to-r:hover,
html.light-mode #root a.bg-gradient-to-r:hover,
html.light-mode #root .btn-submit:hover,
html.light-mode #root .btn-primary:hover {
    background: var(--primary-color-dark, var(--primary-color)) !important;
    color: #ffffff !important;
}

/* Upload Folder Selectors in Move/Copy Card modal */
html.light-mode .upload-folder-selectors button {
    background-color: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
html.light-mode .upload-folder-selectors button .text-slate-300 {
    color: #64748b !important; /* Muted gray for unselected text */
}
html.light-mode .upload-folder-selectors button:hover {
    background-color: rgba(0, 0, 0, 0.06) !important;
}

/* Selected States in Light Mode */
html.light-mode .upload-folder-selectors button[class*="bg-purple-500/15"] {
    background-color: rgba(168, 85, 247, 0.12) !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
}
html.light-mode .upload-folder-selectors button[class*="bg-purple-500/15"] .text-purple-400 {
    color: #7e22ce !important; /* Dark purple */
}

html.light-mode .upload-folder-selectors button[class*="bg-pink-500/15"] {
    background-color: rgba(236, 72, 153, 0.12) !important;
    border-color: rgba(236, 72, 153, 0.5) !important;
}
html.light-mode .upload-folder-selectors button[class*="bg-pink-500/15"] .text-pink-400 {
    color: #be185d !important; /* Dark pink */
}

html.light-mode .upload-folder-selectors button[class*="bg-amber-500/15"] {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
}
html.light-mode .upload-folder-selectors button[class*="bg-amber-500/15"] .text-amber-400 {
    color: #b45309 !important; /* Dark amber */
}

html.light-mode .upload-folder-selectors button[class*="bg-emerald-500/15"] {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}
html.light-mode .upload-folder-selectors button[class*="bg-emerald-500/15"] .text-emerald-400 {
    color: #047857 !important; /* Dark emerald */
}

html.light-mode .upload-folder-selectors button[class*="bg-blue-500/15"] {
    background-color: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}
html.light-mode .upload-folder-selectors button[class*="bg-blue-500/15"] .text-blue-400 {
    color: #1d4ed8 !important; /* Dark blue */
}

html.light-mode .upload-folder-selectors button[class*="bg-teal-500/15"] {
    background-color: rgba(20, 184, 166, 0.12) !important;
    border-color: rgba(20, 184, 166, 0.5) !important;
}
html.light-mode .upload-folder-selectors button[class*="bg-teal-500/15"] .text-teal-400 {
    color: #0f766e !important; /* Dark teal */
}

html.light-mode .upload-folder-selectors button[class*="bg-sky-500/15"] {
    background-color: rgba(14, 165, 233, 0.12) !important;
    border-color: rgba(14, 165, 233, 0.5) !important;
}
html.light-mode .upload-folder-selectors button[class*="bg-sky-500/15"] .text-sky-400 {
    color: #0369a1 !important; /* Dark sky */
}

html.light-mode .upload-folder-selectors button[class*="bg-gray-500/15"] {
    background-color: rgba(107, 114, 128, 0.12) !important;
    border-color: rgba(107, 114, 128, 0.5) !important;
}
html.light-mode .upload-folder-selectors button[class*="bg-gray-500/15"] .text-gray-400 {
    color: #4b5563 !important; /* Dark gray */
}