/* ============================================================
   PREMIUM GLASS SYSTEM  (dark mode only)
   Apple-style frosted glass floating over a black canvas
   with a soft ambient color field for depth.
   Loaded last so it wins the cascade.
   ============================================================ */

[data-theme="dark"] {
    /* Reusable glass tokens */
    --glass-bg:        rgba(255, 255, 255, 0.045);
    --glass-bg-strong: rgba(255, 255, 255, 0.075);
    --glass-border:    rgba(255, 255, 255, 0.10);
    --glass-hairline:  rgba(255, 255, 255, 0.06);
    --glass-blur:      blur(22px) saturate(165%);
    --glass-blur-lg:   blur(30px) saturate(170%);
    --glass-shadow:
        0 12px 40px -14px rgba(0, 0, 0, 0.75),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

/* ---------- Ambient color field behind the glass ---------- */
[data-theme="dark"] body {
    background-color: #000 !important;
    background-image:
        radial-gradient(58vw 58vw at 10% 6%,  rgba(16, 185, 129, 0.12), transparent 60%),
        radial-gradient(52vw 52vw at 90% 16%, rgba(13, 148, 136, 0.11), transparent 60%),
        radial-gradient(68vw 68vw at 82% 96%, rgba(6, 182, 212, 0.09),  transparent 62%),
        radial-gradient(50vw 50vw at 16% 98%, rgba(20, 184, 166, 0.07), transparent 60%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* Workspace + main stay transparent so the ambient field shows through */
[data-theme="dark"] main.bg-slate-100,
[data-theme="dark"] main.bg-slate-50 {
    background: transparent !important;
}

/* ---------- Header bar ---------- */
[data-theme="dark"] nav.bg-white {
    background-color: rgba(8, 11, 16, 0.55) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: 0 8px 30px -14px rgba(0, 0, 0, 0.65);
}

/* ---------- Sidebar ---------- */
[data-theme="dark"] #sidebar,
[data-theme="dark"] aside.bg-white {
    background-color: rgba(10, 13, 18, 0.50) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--glass-border) !important;
}

[data-theme="dark"] #sidebar hr {
    border-color: var(--glass-hairline) !important;
}

/* ---------- Upload drop zone ---------- */
[data-theme="dark"] #drop-zone {
    background-color: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
}

[data-theme="dark"] #drop-zone:hover {
    background-color: var(--glass-bg-strong) !important;
    border-color: rgba(45, 212, 191, 0.35) !important;
}

/* ---------- Sidebar control cards (sliders, toggles, etc.) ---------- */
[data-theme="dark"] #sidebar .bg-slate-50 {
    background-color: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

/* ---------- AI Configuration button (sidebar) ---------- */
[data-theme="dark"] aside .bg-gradient-to-r.from-indigo-50 {
    background: var(--glass-bg-strong) !important;
    border: 1px solid var(--glass-border) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] aside .bg-gradient-to-r.from-indigo-50:hover {
    background: rgba(255, 255, 255, 0.10) !important;
}

/* ---------- Header pills (analytics, compliance, platform, profile, context) ---------- */
[data-theme="dark"] nav .rounded-xl.shadow-sm,
[data-theme="dark"] nav .theme-flip-front,
[data-theme="dark"] nav .theme-flip-back {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] nav .rounded-xl.shadow-sm:hover,
[data-theme="dark"] nav .theme-flip-back:hover {
    background: var(--glass-bg-strong) !important;
}

/* ---------- Modals / dialogs ---------- */
[data-theme="dark"] .bg-white.rounded-2xl {
    background-color: rgba(14, 17, 23, 0.72) !important;
    -webkit-backdrop-filter: var(--glass-blur-lg);
    backdrop-filter: var(--glass-blur-lg);
    border: 1px solid var(--glass-border) !important;
    box-shadow:
        0 24px 70px -20px rgba(0, 0, 0, 0.85),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.07) !important;
}

/* ---------- Generic .card glass (history items, result cards) ---------- */
[data-theme="dark"] .card,
[data-theme="dark"] .bg-white.rounded-xl,
[data-theme="dark"] .bg-white.rounded-lg {
    background-color: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    -webkit-backdrop-filter: blur(16px) saturate(155%);
    backdrop-filter: blur(16px) saturate(155%);
    box-shadow: var(--glass-shadow) !important;
}

/* ---------- Footer ---------- */
/* Footer is bg-black, which blends into the black page. Lift it onto a
   distinct frosted surface with a top hairline so it reads as its own bar. */
[data-theme="dark"] footer.bg-black {
    background-color: rgba(18, 22, 28, 0.85) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -8px 30px -14px rgba(0, 0, 0, 0.7);
}

/* Smooth the lift on interactive glass */
[data-theme="dark"] #drop-zone,
[data-theme="dark"] nav .rounded-xl.shadow-sm,
[data-theme="dark"] aside .bg-gradient-to-r.from-indigo-50 {
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* ============================================================
   PREMIUM GLASS SYSTEM  (LIGHT mode)
   Light theme = no data-theme attribute. Frosted white panels
   floating over a soft pastel ambient field.
   ============================================================ */

html:not([data-theme="dark"]) {
    --lglass-bg:        rgba(255, 255, 255, 0.42);
    --lglass-bg-strong: rgba(255, 255, 255, 0.62);
    /* Visible glass edge: a soft dark hairline (shows on light panels) */
    --lglass-border:    rgba(15, 23, 42, 0.12);
    --lglass-ring:      rgba(15, 23, 42, 0.08);
    --lglass-blur:      blur(20px) saturate(185%);
    --lglass-blur-lg:   blur(28px) saturate(190%);
    /* Outer float shadow + bright inner top highlight = glass sheen */
    --lglass-shadow:
        0 8px 28px -12px rgba(15, 23, 42, 0.22),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.95),
        inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

/* ---------- Ambient pastel field behind the glass ---------- */
html:not([data-theme="dark"]) body {
    background-color: #eaeff5 !important;
    background-image:
        radial-gradient(55vw 55vw at 8% 4%,  rgba(16, 185, 129, 0.12), transparent 60%),
        radial-gradient(50vw 50vw at 92% 12%, rgba(13, 148, 136, 0.10), transparent 60%),
        radial-gradient(64vw 64vw at 84% 96%, rgba(6, 182, 212, 0.10),  transparent 62%),
        radial-gradient(48vw 48vw at 14% 98%, rgba(20, 184, 166, 0.08), transparent 60%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* Workspace + main transparent so the ambient field shows through */
html:not([data-theme="dark"]) main.bg-slate-100,
html:not([data-theme="dark"]) main.bg-slate-50 {
    background: transparent !important;
}

/* ---------- Header bar ---------- */
html:not([data-theme="dark"]) nav.bg-white {
    background-color: rgba(255, 255, 255, 0.62) !important;
    -webkit-backdrop-filter: var(--lglass-blur);
    backdrop-filter: var(--lglass-blur);
    border-bottom: 1px solid var(--lglass-border) !important;
    box-shadow: 0 6px 24px -16px rgba(15, 23, 42, 0.25);
}

/* ---------- Sidebar ---------- */
html:not([data-theme="dark"]) #sidebar,
html:not([data-theme="dark"]) aside.bg-white {
    background-color: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: var(--lglass-blur);
    backdrop-filter: var(--lglass-blur);
    border-right: 1px solid var(--lglass-border) !important;
}

html:not([data-theme="dark"]) #sidebar hr {
    border-color: rgba(15, 23, 42, 0.07) !important;
}

/* ---------- Sidebar control cards (the "left bar items") ---------- */
html:not([data-theme="dark"]) #sidebar .bg-slate-50 {
    background-color: var(--lglass-bg) !important;
    border: 1px solid var(--lglass-border) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    box-shadow: var(--lglass-shadow) !important;
}
html:not([data-theme="dark"]) #sidebar .bg-slate-50:hover {
    background-color: var(--lglass-bg-strong) !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
}

/* ---------- AI Configuration button (sidebar) ---------- */
html:not([data-theme="dark"]) aside .bg-gradient-to-r.from-indigo-50 {
    background: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(238,242,255,0.55)) !important;
    border: 1px solid var(--lglass-border) !important;
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    box-shadow: var(--lglass-shadow);
}
html:not([data-theme="dark"]) aside .bg-gradient-to-r.from-indigo-50:hover {
    background: rgba(255, 255, 255, 0.9) !important;
}

/* ---------- Upload drop zone ---------- */
html:not([data-theme="dark"]) #drop-zone {
    background-color: var(--lglass-bg-strong) !important;
    -webkit-backdrop-filter: var(--lglass-blur);
    backdrop-filter: var(--lglass-blur);
    border: 1px solid var(--lglass-border) !important;
    box-shadow: var(--lglass-shadow) !important;
}
html:not([data-theme="dark"]) #drop-zone:hover {
    border-color: rgba(20, 184, 166, 0.45) !important;
}

/* ---------- Header pills ---------- */
html:not([data-theme="dark"]) nav .rounded-xl.shadow-sm,
html:not([data-theme="dark"]) nav .theme-flip-front,
html:not([data-theme="dark"]) nav .theme-flip-back {
    background: rgba(255, 255, 255, 0.42) !important;
    border: 1px solid var(--lglass-border) !important;
    -webkit-backdrop-filter: blur(16px) saturate(185%);
    backdrop-filter: blur(16px) saturate(185%);
    box-shadow: var(--lglass-shadow) !important;
}
html:not([data-theme="dark"]) nav .rounded-xl.shadow-sm:hover,
html:not([data-theme="dark"]) nav .theme-flip-back:hover {
    background: rgba(255, 255, 255, 0.62) !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
}

/* ---------- Modals / dialogs ---------- */
html:not([data-theme="dark"]) .bg-white.rounded-2xl {
    background-color: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: var(--lglass-blur-lg);
    backdrop-filter: var(--lglass-blur-lg);
    border: 1px solid var(--lglass-border) !important;
    box-shadow:
        0 24px 60px -22px rgba(15, 23, 42, 0.35),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.9) !important;
}

/* ---------- Generic cards (history/result cards) ---------- */
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .bg-white.rounded-xl,
html:not([data-theme="dark"]) .bg-white.rounded-lg {
    background-color: var(--lglass-bg) !important;
    border: 1px solid var(--lglass-border) !important;
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    box-shadow: var(--lglass-shadow) !important;
}

/* ---------- Footer (light mode) ----------
   Match the light glass UI: a frosted white footer with dark text.
   The footer markup was authored for a dark surface (white brand text,
   white logo icon), so we recolor those for the light surface here. */
html:not([data-theme="dark"]) footer.bg-black {
    background-color: rgba(255, 255, 255, 0.62) !important;
    color: #1e293b !important;
    -webkit-backdrop-filter: var(--lglass-blur);
    backdrop-filter: var(--lglass-blur);
    border-top: 1px solid var(--lglass-border) !important;
    box-shadow:
        0 -8px 30px -16px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
}

/* Brand logo chip + icon -> emerald tint instead of white-on-white */
html:not([data-theme="dark"]) footer.bg-black .bg-white\/10 {
    background-color: rgba(16, 185, 129, 0.12) !important;
}
html:not([data-theme="dark"]) footer.bg-black .bg-white\/10 svg {
    color: #059669 !important;
}

/* Muted footer text -> readable slates on the light surface */
html:not([data-theme="dark"]) footer.bg-black .text-slate-400,
html:not([data-theme="dark"]) footer.bg-black .text-slate-500 {
    color: #64748b !important;
}
html:not([data-theme="dark"]) footer.bg-black .text-slate-600 {
    color: #475569 !important;
}

/* Social/brand buttons keep white icons (they sit on colored/dark chips) */
html:not([data-theme="dark"]) footer.bg-black .bg-blue-600,
html:not([data-theme="dark"]) footer.bg-black .bg-slate-800,
html:not([data-theme="dark"]) footer.bg-black a[class*="0077B5"] {
    color: #ffffff !important;
}

/* Smooth interactive transitions in light glass */
html:not([data-theme="dark"]) #drop-zone,
html:not([data-theme="dark"]) nav .rounded-xl.shadow-sm,
html:not([data-theme="dark"]) #sidebar .bg-slate-50,
html:not([data-theme="dark"]) aside .bg-gradient-to-r.from-indigo-50 {
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}