/* ==========================================================================
   GLASSMORPHISM FOREST GREEN DESIGN SYSTEM — CAS Workflow (main.css)
   Theme: Sleek Dark/Light Glassmorphism with Mint & Emerald Accents
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: 'Outfit', sans-serif;
    --font-mono: 'Space Mono', 'SF Mono', Monaco, monospace;

    /* Light Theme - Slate/Indigo & White Premium Styling */
    --bg-primary:     #f8fafc;   /* Premium slate-50 backdrop */
    --bg-secondary:   #f1f5f9;
    --bg-canvas:      #e2e8f0;

    --clay-white:     #ffffff;
    --clay-surface:   rgba(255, 255, 255, 0.9);
    --clay-sidebar:   #0b1329;   /* Deep navy blue */

    --accent:         #4f46e5;   /* Indigo primary color */
    --accent-soft:    #c7d2fe;
    --accent-glow:    rgba(79, 70, 229, 0.12);
    --accent-hover:   #4338ca;

    --clay-green:     #10b981;
    --clay-pink:      #ec4899;
    --clay-orange:    #f59e0b;
    --clay-blue:      #3b82f6;
    --clay-red:       #ef4444;
    --clay-teal:      #06b6d4;

    --text-primary:   #0f172a;   /* Deep slate-900 */
    --text-secondary: #334155;
    --text-muted:     #64748b;

    /* Glass shadows & borders */
    --glass-shadow: 
        0 8px 32px 0 rgba(6, 47, 33, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
    --glass-shadow-hover: 
        0 12px 40px 0 rgba(6, 47, 33, 0.12),
        inset 0 1px 3px rgba(255, 255, 255, 0.8);
    
    --border-clay: 1.5px solid rgba(255, 255, 255, 0.5);
    --radius-clay: 20px;
    --radius-card: 18px;
    --radius-button: 12px;
    --radius-pill: 999px;
}

/* Dark Theme - Deep Forest Green Glassmorphism */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --bg-primary:     #061913;   /* Rich deep forest green */
        --bg-secondary:   #09241b;
        --bg-canvas:      #04120e;

        --clay-white:     #0c271e;
        --clay-surface:   rgba(12, 39, 30, 0.45);
        --clay-sidebar:   #030f0c;

        --accent:         #4ade80;   /* Bright neon green accent */
        --accent-soft:    #86efac;
        --accent-glow:    rgba(74, 222, 128, 0.15);
        --accent-hover:   #22c55e;

        --text-primary:   #f9fafb;   /* Clean light mint-white */
        --text-secondary: #a7f3d0;
        --text-muted:     #64748b;

        --glass-shadow: 
            0 8px 32px 0 rgba(0, 0, 0, 0.37),
            inset 0 1px 1px rgba(255, 255, 255, 0.08);
        --glass-shadow-hover: 
            0 12px 40px 0 rgba(0, 0, 0, 0.45),
            inset 0 1px 2px rgba(255, 255, 255, 0.12);

        --border-clay: 1.5px solid rgba(255, 255, 255, 0.08);
    }
}

:root.dark {
    --bg-primary:     #061913;   /* Rich deep forest green */
    --bg-secondary:   #09241b;
    --bg-canvas:      #04120e;

    --clay-white:     #0c271e;
    --clay-surface:   rgba(12, 39, 30, 0.45);
    --clay-sidebar:   #030f0c;

    --accent:         #4ade80;   /* Bright neon green accent */
    --accent-soft:    #86efac;
    --accent-glow:    rgba(74, 222, 128, 0.15);
    --accent-hover:   #22c55e;

    --text-primary:   #f9fafb;   /* Clean light mint-white */
    --text-secondary: #a7f3d0;
    --text-muted:     #64748b;

    --glass-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.37),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);
    --glass-shadow-hover: 
        0 12px 40px 0 rgba(0, 0, 0, 0.45),
        inset 0 1px 2px rgba(255, 255, 255, 0.12);

    --border-clay: 1.5px solid rgba(255, 255, 255, 0.08);
}

/* ── Base Body ─────────────────────────────────────────────── */
body {
    background-color: var(--bg-primary) !important;
    background-image:
        radial-gradient(ellipse 80% 50% at 20% 20%, rgba(99,102,241,0.03), transparent),
        radial-gradient(ellipse 60% 60% at 80% 80%, rgba(59,130,246,0.02), transparent),
        radial-gradient(ellipse 40% 60% at 60% 10%, rgba(147,51,234,0.01), transparent) !important;
    color: var(--text-primary);
    font-family: var(--font-primary) !important;
    font-weight: 500;
    min-height: 100vh;
    transition: background 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

/* ── Glass Card Surface ─────────────────────────────────────── */
.glass,
.bg-white.rounded-xl.border,
.bg-white.rounded-2xl.border,
.bg-white.rounded-xl.p-5,
.bg-white.rounded-2xl.p-6,
.bg-white.rounded-lg.p-4.border,
.bg-white.rounded-xl,
.bg-white.rounded-2xl,
.modal-content,
.kanban-column {
    background: var(--clay-surface) !important;
    border: var(--border-clay) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    position: relative;
    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.2s ease !important;
}

/* Hover effect on glass cards */
.glass-hover:hover,
.bg-white.rounded-xl.border:hover,
.bg-white.rounded-2xl.border:hover,
.bg-white.rounded-2xl:hover {
    transform: translateY(-4px);
    box-shadow: var(--glass-shadow-hover) !important;
}

/* Shiny reflection overlay on glass cards */
.glass::after,
.bg-white.rounded-xl.border::after,
.bg-white.rounded-2xl::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    border-radius: var(--radius-button) !important;
    font-weight: 700 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Primary Button - Emerald Gradient */
button[class*="bg-indigo"],
button[class*="bg-violet"],
button[class*="bg-purple"],
.btn-primary {
    background: linear-gradient(145deg, #10b981, #059669) !important;
    box-shadow:
        0 4px 14px 0 rgba(16, 185, 129, 0.3),
        inset 0 1px 2px rgba(255,255,255,0.2) !important;
    border: none !important;
    color: #fff !important;
}

button[class*="bg-indigo"]:hover,
button[class*="bg-violet"]:hover,
button[class*="bg-purple"]:hover,
.btn-primary:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow:
        0 6px 20px 0 rgba(16, 185, 129, 0.4),
        inset 0 1px 3px rgba(255,255,255,0.3) !important;
}

/* Press down squish */
button:active:not(:disabled) {
    transform: translateY(1px) scale(0.98) !important;
    box-shadow:
        0 2px 6px 0 rgba(16, 185, 129, 0.2),
        inset 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* ── Inputs ────────────────────────────────────────────────── */
input, select, textarea {
    border-radius: var(--radius-button) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.2) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    backdrop-filter: blur(5px);
}

@media (prefers-color-scheme: light) {
    :root:not(.dark) input, :root:not(.dark) select, :root:not(.dark) textarea {
        background: rgba(255, 255, 255, 0.85) !important;
        border: 1.5px solid rgba(16, 185, 129, 0.15) !important;
    }
}
:root.light input, :root.light select, :root.light textarea {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.15) !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow:
        0 0 0 3px var(--accent-glow),
        inset 0 2px 4px rgba(0,0,0,0.02) !important;
    transform: scale(1.005);
}

/* ── Sidebar ───────────────────────────────────────────────── */
#sidebar {
    background: #0b1329 !important; /* Sleek deep navy blue background */
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.3) !important;
    overflow-x: hidden !important;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease !important;
}

#sidebarNav {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

@media (max-width: 1023px) {
    #sidebar {
        transform: translateX(-100%) !important;
    }
    #sidebar.open {
        transform: translateX(0) !important;
    }
}

.sidebar-link {
    position: relative;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 12px !important;
    font-weight: 500 !important;
    margin: 2px 12px !important;
    color: #94a3b8 !important; /* Cool grey text */
    padding: 8px 12px !important;
}

.sidebar-link::before { content: none !important; }

.sidebar-link.active {
    background: #4f46e5 !important; /* Indigo active item background */
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px 0 rgba(79, 70, 229, 0.3) !important;
    transform: scale(1.01);
}

.sidebar-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    transform: translateX(2px);
}

/* Collapsed Sidebar overrides */
#sidebar.collapsed {
    width: 72px !important;
}

#sidebar.collapsed .sb-label,
#sidebar.collapsed .sb-logo-text,
#sidebar.collapsed .sb-signout-label,
#sidebar.collapsed .sb-user-info,
#sidebar.collapsed .sb-user-row p,
#sidebar.collapsed .mx-3.my-4,  /* Hide WFS AI Card completely */
#sidebar.collapsed .px-3.pt-4.pb-1\.5 { /* Hide category headers */
    display: none !important;
}

#sidebar.collapsed .sb-logo {
    min-height: 70px !important;
    padding: 12px 0 !important;
}

#sidebar.collapsed .sb-logo img {
    height: 28px !important;
    max-width: 40px !important;
}

#sidebar.collapsed .sb-toggle-btn {
    position: static !important;
    margin: 0 auto 8px auto !important;
}

#sidebar.collapsed .sb-toggle-btn i {
    transform: rotate(180deg) !important; /* flip arrows facing right */
}

#sidebar.collapsed .sidebar-link {
    justify-content: center !important;
    padding: 8px 0 !important;
    margin: 4px 8px !important;
}

#sidebar.collapsed .sidebar-link i {
    font-size: 16px !important;
    margin: 0 !important;
}

#main-content {
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#main-content.sidebar-collapsed {
    margin-left: 72px !important;
}

/* ── Collapsible Card Panels ───────────────────────────────── */
.expand {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

.expand.open {
    max-height: 5000px; /* High limit to prevent cutoff */
    transition: max-height 0.5s ease-in;
}

/* ── Kanban Cards ──────────────────────────────────────────── */
.kanban-card {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: grab;
}
.kanban-card:active { cursor: grabbing; }

/* ── Status colors with premium glass look ──────────────────── */
.bg-green-100 { 
    background: rgba(16, 185, 129, 0.12) !important; 
    border: 1px solid rgba(16, 185, 129, 0.25) !important; 
    color: #10b981 !important;
}
.bg-blue-100  { 
    background: rgba(59, 130, 246, 0.12) !important; 
    border: 1px solid rgba(59, 130, 246, 0.25) !important; 
    color: #60a5fa !important;
}
.bg-red-100   { 
    background: rgba(239, 68, 68, 0.12) !important; 
    border: 1px solid rgba(239, 68, 68, 0.25) !important; 
    color: #f87171 !important;
}
.bg-yellow-100{ 
    background: rgba(245, 158, 11, 0.12) !important; 
    border: 1px solid rgba(245, 158, 11, 0.25) !important; 
    color: #fbbf24 !important;
}
.bg-purple-100{ 
    background: rgba(139, 92, 246, 0.12) !important; 
    border: 1px solid rgba(139, 92, 246, 0.25) !important; 
    color: #a78bfa !important;
}
.bg-pink-100  { 
    background: rgba(236, 72, 153, 0.12) !important; 
    border: 1px solid rgba(236, 72, 153, 0.25) !important; 
    color: #fbcfe8 !important;
}

/* ── Tables ────────────────────────────────────────────────── */
.timesheet-row {
    transition: background 0.15s ease, transform 0.15s ease;
    border-radius: 8px;
}
.timesheet-row:hover {
    background: rgba(16, 185, 129, 0.06) !important;
    transform: scale(1.003);
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(79, 70, 229, 0.2);
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(79, 70, 229, 0.4); }

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.drawing-code-pill,
.mono-label,
.text-mono,
[class*="font-mono"] {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: -0.01em;
}

/* ── Notes Marquee Ticker Right-to-Left Animation ──────────── */
@keyframes tickerScroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}
#notesTickerInner {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
}

/* ── Ambient glow bg orbs ──────────────────────────────────── */
@keyframes greenFloat {
    0%, 100% { transform: translateY(0px) scale(1); }
    50%       { transform: translateY(-15px) scale(1.04); }
}
.glow-circle-1 {
    background: radial-gradient(circle, rgba(16,185,129,0.18), transparent 70%);
    animation: greenFloat 12s ease-in-out infinite;
    border-radius: 50%;
    filter: blur(40px);
}
.glow-circle-2 {
    background: radial-gradient(circle, rgba(52,211,153,0.12), transparent 70%);
    animation: greenFloat 16s ease-in-out infinite reverse;
    border-radius: 50%;
    filter: blur(40px);
}
.glow-circle-3 {
    background: radial-gradient(circle, rgba(74,222,128,0.1), transparent 70%);
    animation: greenFloat 20s ease-in-out infinite 4s;
    border-radius: 50%;
    filter: blur(40px);
}

/* ── Glass dark variant ────────────────────────────────────── */
.glass-dark {
    background: rgba(4, 18, 14, 0.9) !important;
    border: 1.5px solid rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-card) !important;
    box-shadow: var(--glass-shadow) !important;
}

/* ── Mobile Nav ────────────────────────────────────────────── */
#mobileBottomNav { display: none; }
@media screen and (max-width: 768px) {
    #mobileBottomNav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 45;
        background: linear-gradient(165deg, #09241b, #04120e);
        border-top: 1px solid rgba(255,255,255,0.05);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -6px 24px rgba(3, 15, 12, 0.4);
    }
    .mob-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px 6px;
        color: rgba(167, 243, 208, 0.6);
        border: none;
        background: none;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        min-height: 56px;
        font-weight: 600;
    }
    .mob-nav-btn.active {
        color: #34d399;
        transform: translateY(-2px) scale(1.05);
    }
    #contentArea { padding-bottom: 64px !important; }
}

/* ── Login card special glass treatment ───────────────────── */
#loginCard,
#login-card,
[id*="login"] > .bg-gray-800,
[id*="login"] > .bg-white,
.auth-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border: var(--border-clay) !important;
    border-radius: var(--radius-clay) !important;
    box-shadow: var(--glass-shadow) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) #loginCard,
    :root:not(.light) #login-card,
    :root:not(.light) [id*="login"] > .bg-gray-800,
    :root:not(.light) .auth-card {
        background: rgba(12, 39, 30, 0.65) !important;
    }
}

:root.dark #loginCard,
:root.dark #login-card,
:root.dark [id*="login"] > .bg-gray-800,
:root.dark .auth-card {
    background: rgba(12, 39, 30, 0.65) !important;
}

/* ── Selection color ────────────────────────────────────────── */
::selection {
    background: var(--accent-soft);
    color: var(--text-primary);
}

/* ── Dark Mode Contrast Overrides (bg-slate-100, border-slate-200, text-slate-800) ── */
@media (prefers-color-scheme: dark) {
    :root:not(.light) :not(body).bg-slate-50,
    :root:not(.light) :not(body).bg-slate-100,
    :root:not(.light) :not(body).bg-slate-200,
    :root:not(.light) :not(body).bg-gray-50,
    :root:not(.light) :not(body).bg-gray-100,
    :root:not(.light) :not(body).bg-gray-200 {
        background-color: rgba(255, 255, 255, 0.06) !important;
        background-image: none !important;
    }
    :root:not(.light) .border-slate-100,
    :root:not(.light) .border-slate-200,
    :root:not(.light) .border-gray-200 {
        border-color: rgba(255, 255, 255, 0.08) !important;
    }
    :root:not(.light) .text-slate-900,
    :root:not(.light) .text-slate-800,
    :root:not(.light) .text-slate-700,
    :root:not(.light) .text-slate-600 {
        color: var(--text-primary) !important;
    }
    :root:not(.light) .text-slate-500,
    :root:not(.light) .text-slate-400 {
        color: var(--text-secondary) !important;
    }
}

:root.dark :not(body).bg-slate-50,
:root.dark :not(body).bg-slate-100,
:root.dark :not(body).bg-slate-200,
:root.dark :not(body).bg-gray-50,
:root.dark :not(body).bg-gray-100,
:root.dark :not(body).bg-gray-200 {
    background-color: rgba(255, 255, 255, 0.06) !important;
    background-image: none !important;
}
:root.dark .border-slate-100,
:root.dark .border-slate-200,
:root.dark .border-gray-200 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
:root.dark .text-slate-900,
:root.dark .text-slate-800,
:root.dark .text-slate-700,
:root.dark .text-slate-600 {
    color: var(--text-primary) !important;
}
:root.dark .text-slate-500,
:root.dark .text-slate-400 {
    color: var(--text-secondary) !important;
}

/* ── Active Tab/Button overrides in dark mode (.bg-white.text-slate-800) ── */
@media (prefers-color-scheme: dark) {
    :root:not(.light) .bg-white.text-slate-800 {
        background-color: rgba(74, 222, 128, 0.15) !important;
        color: #4ade80 !important;
        border: 1px solid rgba(74, 222, 128, 0.25) !important;
        box-shadow: 0 4px 12px rgba(74, 222, 128, 0.1) !important;
    }
}

:root.dark .bg-white.text-slate-800 {
    background-color: rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(74, 222, 128, 0.25) !important;
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.1) !important;
}

/* ── Dropdown and Select Option text readability in dark mode ── */
@media (prefers-color-scheme: dark) {
    :root:not(.light) select option,
    :root:not(.light) [id*="Dropdown"],
    :root:not(.light) [id*="dropdown"],
    :root:not(.light) [id*="Dropdown"] div,
    :root:not(.light) [id*="dropdown"] div,
    :root:not(.light) .dropdown-menu,
    :root:not(.light) .dropdown-item {
        background-color: #0c271e !important;
        color: var(--text-primary) !important;
    }
    :root:not(.light) select {
        color: var(--text-primary) !important;
    }
}

:root.dark select option,
:root.dark [id*="Dropdown"],
:root.dark [id*="dropdown"],
:root.dark [id*="Dropdown"] div,
:root.dark [id*="dropdown"] div,
:root.dark .dropdown-menu,
:root.dark .dropdown-item {
    background-color: #0c271e !important;
    color: var(--text-primary) !important;
}
:root.dark select {
    color: var(--text-primary) !important;
}

/* ── Dark Mode High Contrast Visibility Fixes ── */
@media (prefers-color-scheme: dark) {
    :root:not(.light) :not(body).bg-white {
        background-color: var(--clay-surface) !important;
    }
    :root:not(.light) .bg-white\/40, 
    :root:not(.light) .bg-white\/60, 
    :root:not(.light) .bg-white\/80, 
    :root:not(.light) .bg-white\/30, 
    :root:not(.light) .bg-white\/50 {
        background-color: rgba(255, 255, 255, 0.03) !important;
    }
    :root:not(.light) .kanban-card.bg-white {
        background: var(--clay-surface) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }
    :root:not(.light) .bg-slate-50\/50 { background-color: rgba(255, 255, 255, 0.03) !important; }
    :root:not(.light) .bg-blue-50\/20 { background-color: rgba(59, 130, 246, 0.1) !important; }
    :root:not(.light) .bg-blue-50\/70 { background-color: rgba(59, 130, 246, 0.2) !important; }
    :root:not(.light) .text-blue-600 { color: #60a5fa !important; }
    :root:not(.light) .text-blue-700 { color: #93c5fd !important; }

    /* Colored Buttons Contrast Fixes in Dark Mode */
    :root:not(.light) .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.15) !important; }
    :root:not(.light) .text-indigo-600 { color: #a5b4fc !important; }
    :root:not(.light) .border-indigo-200 { border-color: rgba(99, 102, 241, 0.3) !important; }

    :root:not(.light) .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.15) !important; }
    :root:not(.light) .text-emerald-600 { color: #6ee7b7 !important; }
    :root:not(.light) .border-emerald-200 { border-color: rgba(16, 185, 129, 0.3) !important; }

    :root:not(.light) .bg-amber-50 { background-color: rgba(245, 158, 11, 0.15) !important; }
    :root:not(.light) .text-amber-750 { color: #fcd34d !important; }
    :root:not(.light) .border-amber-200 { border-color: rgba(245, 158, 11, 0.3) !important; }

    :root:not(.light) .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
    :root:not(.light) .text-blue-600 { color: #93c5fd !important; }
    :root:not(.light) .border-blue-200 { border-color: rgba(59, 130, 246, 0.3) !important; }

    :root:not(.light) .bg-violet-50 { background-color: rgba(139, 92, 246, 0.15) !important; }
    :root:not(.light) .text-violet-650, :root:not(.light) .text-violet-600 { color: #c7d2fe !important; }
    :root:not(.light) .border-violet-200 { border-color: rgba(139, 92, 246, 0.3) !important; }

    :root:not(.light) .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; }
    :root:not(.light) .text-red-400 { color: #fca5a5 !important; }
    :root:not(.light) .border-red-200 { border-color: rgba(239, 68, 68, 0.3) !important; }
}

:root.dark :not(body).bg-white {
    background-color: var(--clay-surface) !important;
}
:root.dark .bg-white\/40, 
:root.dark .bg-white\/60, 
:root.dark .bg-white\/80, 
:root.dark .bg-white\/30, 
:root.dark .bg-white\/50 {
    background-color: rgba(255, 255, 255, 0.03) !important;
}
:root.dark .kanban-card.bg-white {
    background: var(--clay-surface) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
:root.dark .bg-slate-50\/50 { background-color: rgba(255, 255, 255, 0.03) !important; }
:root.dark .bg-blue-50\/20 { background-color: rgba(59, 130, 246, 0.1) !important; }
:root.dark .bg-blue-50\/70 { background-color: rgba(59, 130, 246, 0.2) !important; }
:root.dark .text-blue-600 { color: #60a5fa !important; }
:root.dark .text-blue-700 { color: #93c5fd !important; }

:root.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.15) !important; }
:root.dark .text-indigo-600 { color: #a5b4fc !important; }
:root.dark .border-indigo-200 { border-color: rgba(99, 102, 241, 0.3) !important; }

:root.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.15) !important; }
:root.dark .text-emerald-600 { color: #6ee7b7 !important; }
:root.dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.3) !important; }

:root.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.15) !important; }
:root.dark .text-amber-750 { color: #fcd34d !important; }
:root.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.3) !important; }

:root.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
:root.dark .text-blue-600 { color: #93c5fd !important; }
:root.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.3) !important; }

:root.dark .bg-violet-50 { background-color: rgba(139, 92, 246, 0.15) !important; }
:root.dark .text-violet-650, :root.dark .text-violet-600 { color: #c7d2fe !important; }
:root.dark .border-violet-200 { border-color: rgba(139, 92, 246, 0.3) !important; }

:root.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; }
:root.dark .text-red-400 { color: #fca5a5 !important; }
:root.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.3) !important; }

/* Custom schedules tab styling for dark/light themes */
.schedule-tab-wrapper {
    background: var(--bg-canvas) !important;
    border: var(--border-clay) !important;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border-radius: 8px;
    padding: 2px;
}
.schedule-tab-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}
.schedule-tab-btn.active {
    background: var(--clay-white) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--glass-shadow) !important;
}
.schedule-tab-btn.inactive {
    background: transparent !important;
    color: var(--text-secondary) !important;
}
.schedule-tab-btn.inactive:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Custom comment popover styling for dark/light themes */
.comments-popover {
    background: var(--clay-white) !important;
    border: var(--border-clay) !important;
    box-shadow: var(--glass-shadow) !important;
}
.comments-popover-header, .comments-popover-footer {
    background: var(--bg-canvas) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.comments-popover-title {
    color: var(--text-primary) !important;
}
.comments-popover-list {
    color: var(--text-secondary) !important;
}
.comments-popover-input {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--bg-canvas) !important;
}
:root.dark .comments-popover-input {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
:root.dark .border-slate-100 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Ensure AI printable summaries with light background always have dark readable text */
#dprAiPrintableArea,
#momAiPrintableArea,
#aiSummaryPrintArea {
    background: #f8fafc !important;
    color: #0f172a !important;
}
#dprAiPrintableArea *,
#momAiPrintableArea *,
#aiSummaryPrintArea * {
    color: inherit !important;
}

/* Ensure AI Consumption card in dark mode uses correct theme background and border */
:root.dark .ai-consumption-card,
@media (prefers-color-scheme: dark) {
    :root:not(.light) .ai-consumption-card {
        background: var(--clay-surface) !important;
        border: var(--border-clay) !important;
    }
}

/* Ensure absolute position is retained for dropdown menus and search popups */
#notifDropdown, #noticeBoardDropdown, #searchDropdown {
    position: absolute !important;
}