/* ============================================================
   ZERON_XS — "Aurora Glass" design system (2026-08-28)
   Pro-grade futuristic chrome: glass topbar, aurora sidebar,
   gradient pills, glow micro-interactions.
   Light mode: white → violet gradient sidebar.
   Dark mode: deep aurora gradient + drifting glow blobs.
   ============================================================ */

/* ---------- 1. Sidebar surface ---------- */
.xs-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #faf8ff 55%, #f3efff 100%);
    border-right: 1px solid rgba(96, 32, 224, 0.10);
    box-shadow: 1px 0 0 rgba(96, 32, 224, 0.04);
}

html.dark .xs-sidebar {
    background:
        radial-gradient(600px 300px at 8% -5%, rgba(124, 90, 238, 0.30), transparent 60%),
        radial-gradient(500px 280px at 110% 30%, rgba(96, 32, 224, 0.24), transparent 60%),
        radial-gradient(420px 240px at 25% 115%, rgba(161, 132, 245, 0.16), transparent 60%),
        linear-gradient(180deg, #150b33 0%, #100926 55%, #0c071f 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}

/* Aurora glow blobs (dark mode only, fixed so they don't scroll) */
.xs-sidebar::before,
.xs-sidebar::after {
    content: '';
    position: fixed;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}
html.dark .xs-sidebar::before {
    opacity: 0.38;
    background: #7c5aee;
    top: -70px;
    left: -90px;
    animation: xsAuroraA 16s ease-in-out infinite alternate;
}
html.dark .xs-sidebar::after {
    opacity: 0.30;
    background: #6020e0;
    bottom: -90px;
    right: -70px;
    animation: xsAuroraB 20s ease-in-out infinite alternate-reverse;
}
.xs-sidebar > * { position: relative; z-index: 1; }

@keyframes xsAuroraA {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(30px, 24px) scale(1.12); }
    100% { transform: translate(-12px, 44px) scale(0.96); }
}
@keyframes xsAuroraB {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-34px, -20px) scale(1.15); }
    100% { transform: translate(18px, -38px) scale(0.94); }
}

/* ---------- 2. Glass topbar / strips ---------- */
.xs-glass {
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid rgba(96, 32, 224, 0.10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 32px -16px rgba(43, 14, 102, 0.14);
}
html.dark .xs-glass {
    background: rgba(11, 7, 28, 0.75);
    border-bottom-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.xs-glass-sm {
    background: rgba(248, 246, 255, 0.70);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(96, 32, 224, 0.08);
}
html.dark .xs-glass-sm {
    background: rgba(13, 8, 33, 0.60);
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* ---------- 3. Gradient text ---------- */
.xs-grad-text {
    background: linear-gradient(92deg, #a184f5 0%, #c2affa 55%, #ede8fe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html.dark .xs-grad-text {
    background: linear-gradient(92deg, #a184f5 0%, #c2affa 55%, #ede8fe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- 4. Topbar nav pills ---------- */
.xs-nav-link {
    color: #475569;
    font-size: .825rem;
    font-weight: 600;
    padding: .5rem .875rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: .375rem;
    position: relative;
    transition: all .2s cubic-bezier(.22, .61, .36, 1);
}
.xs-nav-link:hover {
    background: rgba(96, 32, 224, 0.08);
    color: #6020e0;
}
.xs-nav-link.active {
    background: linear-gradient(135deg, #6020e0 0%, #7c5aee 100%);
    color: #fff;
    box-shadow: 0 8px 24px -8px rgba(96, 32, 224, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html.dark .xs-nav-link { color: #cbd5e1; }
html.dark .xs-nav-link:hover { background: rgba(161, 132, 245, 0.14); color: #dcd2fd; }

/* ---------- 5. Dropdown panels (glass) ---------- */
.xs-dropdown-panel {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: .375rem;
    min-width: 17rem;
    border-radius: 1rem;
    border: 1px solid rgba(96, 32, 224, 0.12);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 24px 48px -12px rgba(43, 14, 102, 0.28), 0 4px 12px -6px rgba(43, 14, 102, 0.12);
    z-index: 40;
}
html.dark .xs-dropdown-panel {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(17, 10, 40, 0.92);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.55);
}

.xs-group-label {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: .5rem .875rem .25rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.xs-group-label::before {
    content: '';
    width: 10px;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #6020e0, #a184f5);
    flex: none;
}

/* ---------- 6. Dropdown items ---------- */
.xs-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .45rem .875rem;
    font-size: .8125rem;
    color: #334155;
    border-radius: .625rem;
    transition: all .15s cubic-bezier(.22, .61, .36, 1);
}
.xs-item:hover { background: rgba(96, 32, 224, 0.07); color: #6020e0; transform: translateX(2px); }
.xs-item.active {
    background: linear-gradient(135deg, rgba(96, 32, 224, 0.10), rgba(161, 132, 245, 0.12));
    color: #6020e0;
    font-weight: 600;
    box-shadow: inset 2px 0 0 #6020e0;
}
html.dark .xs-item { color: #cbd5e1; }
html.dark .xs-item:hover { background: rgba(161, 132, 245, 0.12); color: #dcd2fd; }
html.dark .xs-item.active { color: #c2affa; box-shadow: inset 2px 0 0 #a184f5; }

/* ---------- 7. Icon tiles ---------- */
.xs-icon {
    display: inline-flex;
    height: 1.25rem;
    width: 1.25rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: .45rem;
    background: linear-gradient(135deg, #ede8fe, #f6f3ff);
    border: 1px solid rgba(96, 32, 224, 0.10);
    color: #6020e0;
    font-size: .625rem;
    font-weight: 700;
}
html.dark .xs-icon { background: rgba(161, 132, 245, 0.16); border-color: rgba(255, 255, 255, 0.06); color: #c2affa; }

/* ---------- 8. Primary button (gradient + shine sweep) ---------- */
.xs-btn-primary {
    background: linear-gradient(135deg, #6020e0 0%, #7c5aee 100%);
    color: #fff;
    font-weight: 600;
    border-radius: .625rem;
    padding: .5rem .875rem;
    font-size: .8125rem;
    position: relative;
    overflow: hidden;
    transition: all .2s cubic-bezier(.22, .61, .36, 1);
    box-shadow: 0 8px 20px -8px rgba(96, 32, 224, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.xs-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -8px rgba(96, 32, 224, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.xs-btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform .6s ease;
    pointer-events: none;
}
.xs-btn-primary:hover::after { transform: translateX(120%); }

/* ---------- 9. Sidebar nav items ---------- */
.xs-snav {
    color: #475569;
    transition: all .18s cubic-bezier(.22, .61, .36, 1);
}
.xs-snav:hover {
    background: rgba(96, 32, 224, 0.06);
    color: #6020e0;
    transform: translateX(3px);
}
.xs-snav-active {
    background: linear-gradient(135deg, #6020e0 0%, #7c5aee 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 22px -8px rgba(96, 32, 224, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    animation: xsPillGlow 3s ease-in-out infinite;
}
html.dark .xs-snav { color: #cbd5e1; }
html.dark .xs-snav:hover { background: rgba(161, 132, 245, 0.12); color: #dcd2fd; }

/* Active icon tile inside sidebar pills */
.xs-sicon-active { background: rgba(255, 255, 255, 0.25) !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.3) !important; }

/* ---------- 10. Sidebar group headers (gradient tick) ---------- */
.xs-group-head { position: relative; }
.xs-group-head > span:first-child {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #94a3b8;
    letter-spacing: .1em;
}
.xs-group-head > span:first-child::before {
    content: '';
    width: 10px;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #6020e0, #a184f5);
    flex: none;
}
html.dark .xs-group-head > span:first-child { color: #7c86a8; }
.xs-group-head:hover > span:first-child { color: #6020e0; }
html.dark .xs-group-head:hover > span:first-child { color: #c2affa; }

/* ---------- 11. Sidebar scrollbar ---------- */
.sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(96, 32, 224, 0.30) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(96, 32, 224, 0.28); border-radius: 9999px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(96, 32, 224, 0.5); }
html.dark .sidebar-nav { scrollbar-color: rgba(161, 132, 245, 0.35) transparent; }
html.dark .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(161, 132, 245, 0.32); }

/* ---------- 12. Topbar icon buttons (bell / clock / theme) ---------- */
.xs-icon-btn {
    color: #64748b;
    border-radius: .625rem;
    transition: all .18s cubic-bezier(.22, .61, .36, 1);
}
.xs-icon-btn:hover { background: rgba(96, 32, 224, 0.08); color: #6020e0; transform: translateY(-1px); }
html.dark .xs-icon-btn { color: #94a3b8; }
html.dark .xs-icon-btn:hover { background: rgba(161, 132, 245, 0.14); color: #dcd2fd; }

/* ============================================================
   ZERON_XS — Aurora Glass CONTENT system (2026-08-28)
   Applies the glass aesthetic to every page that uses layouts.app.
   Targets the standard Tailwind utility combos used across the app
   so all SaaS / module pages inherit the redesign automatically.
   ============================================================ */

/* ---------- 13. Glass content cards ---------- */
/* Standard card: "rounded-xl border border-gray-200 bg-white shadow-sm" */
.rounded-xl.border.border-gray-200.bg-white.shadow-sm,
.rounded-xl.border.border-gray-200.bg-white {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-color: rgba(96, 32, 224, 0.10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
                0 12px 32px -16px rgba(43, 14, 102, 0.16);
}
html.dark .rounded-xl.border.border-gray-200.bg-white.shadow-sm,
html.dark .rounded-xl.border.border-gray-200.bg-white {
    background: rgba(17, 10, 40, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                0 12px 32px -16px rgba(0, 0, 0, 0.5);
}

/* ---------- 14. Glass tables ---------- */
/* Table wrapper: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm" */
.overflow-hidden.rounded-xl.border.border-gray-200.bg-white.shadow-sm {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-color: rgba(96, 32, 224, 0.10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
                0 12px 32px -16px rgba(43, 14, 102, 0.16);
}
html.dark .overflow-hidden.rounded-xl.border.border-gray-200.bg-white.shadow-sm {
    background: rgba(17, 10, 40, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Table header rows */
table thead.bg-gray-50 { background: rgba(96, 32, 224, 0.05); }
html.dark table thead.bg-gray-50 { background: rgba(161, 132, 245, 0.08); }
table thead tr th { color: #6020e0; }
html.dark table thead tr th { color: #c2affa; }

/* Table body hover */
table tbody tr.hover\:bg-gray-50:hover { background: rgba(96, 32, 224, 0.04); }
html.dark table tbody tr.hover\:bg-gray-50:hover { background: rgba(161, 132, 245, 0.06); }

/* ---------- 15. Glass filter bar ---------- */
/* _filters form: "mb-4 rounded-xl border border-gray-200 bg-white p-3 shadow-sm" */
form.mb-4.rounded-xl.border.border-gray-200.bg-white.p-3.shadow-sm {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-color: rgba(96, 32, 224, 0.10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
                0 12px 32px -16px rgba(43, 14, 102, 0.16);
}
html.dark form.mb-4.rounded-xl.border.border-gray-200.bg-white.p-3.shadow-sm {
    background: rgba(17, 10, 40, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ---------- 16. Glass inputs & selects ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"],
select, textarea {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(96, 32, 224, 0.15);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: all .18s cubic-bezier(.22,.61,.36,1);
}
input:focus, select:focus, textarea:focus {
    border-color: #6020e0;
    box-shadow: 0 0 0 3px rgba(96, 32, 224, 0.15);
}
html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="password"],
html.dark input[type="number"], html.dark input[type="date"], html.dark input[type="search"],
html.dark select, html.dark textarea {
    background: rgba(17, 10, 40, 0.5);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

/* ---------- 17. Glass page header ---------- */
/* Page title row: "mb-5 flex flex-wrap items-center justify-between gap-3" */
h1.text-xl.font-bold.text-gray-900 {
    color: #2b0e66;
    letter-spacing: -0.02em;
}
html.dark h1.text-xl.font-bold.text-gray-900 { color: #ede8fe; }

/* ---------- 18. Gradient primary buttons ---------- */
/* Standard primary: "rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-700" */
a.rounded-lg.bg-brand-600.px-4.py-2.text-sm.font-semibold.text-white.shadow-sm,
button.rounded-lg.bg-brand-600.px-4.py-2.text-sm.font-semibold.text-white.shadow-sm {
    background: linear-gradient(135deg, #6020e0 0%, #7c5aee 100%);
    box-shadow: 0 8px 20px -8px rgba(96, 32, 224, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all .2s cubic-bezier(.22,.61,.36,1);
}
a.rounded-lg.bg-brand-600.px-4.py-2.text-sm.font-semibold.text-white.shadow-sm:hover,
button.rounded-lg.bg-brand-600.px-4.py-2.text-sm.font-semibold.text-white.shadow-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -8px rgba(96, 32, 224, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ---------- 19. Status badges (glass pills) ---------- */
span.rounded-full.px-2.py-0\.5.text-xs {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ---------- 20. KPI stat cards (dashboard) ---------- */
/* "rounded-xl border border-gray-200 bg-white p-5 shadow-sm" */
.rounded-xl.border.border-gray-200.bg-white.p-5.shadow-sm {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-color: rgba(96, 32, 224, 0.10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
                0 12px 32px -16px rgba(43, 14, 102, 0.16);
}
html.dark .rounded-xl.border.border-gray-200.bg-white.p-5.shadow-sm {
    background: rgba(17, 10, 40, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ---------- 21. Footer glass ---------- */
footer.border-t.border-gray-200.bg-white {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-color: rgba(96, 32, 224, 0.10);
}
html.dark footer.border-t.border-gray-200.bg-white {
    background: rgba(17, 10, 40, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ---------- 22. Aurora Glass utility classes ---------- */
/* Glass card (used on dashboard + SaaS pages) */
.xs-glass-card {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-color: rgba(96, 32, 224, 0.10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
                0 12px 32px -16px rgba(43, 14, 102, 0.16);
}
html.dark .xs-glass-card {
    background: rgba(17, 10, 40, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                0 12px 32px -16px rgba(0, 0, 0, 0.5);
}

/* Glass tile (small stat / list item) */
.xs-glass-tile {
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(96, 32, 224, 0.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
html.dark .xs-glass-tile {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Glass table wrapper */
.xs-glass-table {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-color: rgba(96, 32, 224, 0.10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
                0 12px 32px -16px rgba(43, 14, 102, 0.16);
}
html.dark .xs-glass-table {
    background: rgba(17, 10, 40, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Ghost button (secondary) */
.xs-btn-ghost {
    background: rgba(255, 255, 255, 0.6);
    color: #6020e0;
    font-weight: 600;
    border-radius: .625rem;
    border: 1px solid rgba(96, 32, 224, 0.18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: all .18s cubic-bezier(.22,.61,.36,1);
}
.xs-btn-ghost:hover {
    background: rgba(96, 32, 224, 0.08);
    border-color: rgba(96, 32, 224, 0.35);
    transform: translateY(-1px);
}
html.dark .xs-btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    color: #c2affa;
    border-color: rgba(255, 255, 255, 0.12);
}
html.dark .xs-btn-ghost:hover {
    background: rgba(161, 132, 245, 0.14);
    border-color: rgba(161, 132, 245, 0.4);
}

/* Icon tile (KPI icon chip) */
.xs-icon-tile {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}