/* ═══════════════════════════════════════════════════════════════════
   Premium Theme — scoped to html.dark so the light ↔ dark toggle works
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Dark-mode CSS variables ─── */
html.dark {
    color-scheme: dark;
    --premium-bg: #020617;
    --premium-bg-soft: #0f172a;
    --premium-surface: rgba(15, 23, 42, 0.72);
    --premium-surface-strong: rgba(15, 23, 42, 0.88);
    --premium-border: rgba(255, 255, 255, 0.06);
    --premium-border-strong: rgba(148, 163, 184, 0.18);
    --premium-text: #f8fafc;
    --premium-muted: #94a3b8;
    --premium-muted-strong: #cbd5e1;
    --premium-accent: #6366f1;
    --premium-accent-strong: #4f46e5;
    --premium-shadow: 0 24px 60px rgba(2, 6, 23, 0.42);
}

/* ─── Light-mode CSS variables ─── */
html:not(.dark) {
    color-scheme: light;
    --premium-bg: #f8fafc;
    --premium-bg-soft: #f1f5f9;
    --premium-surface: rgba(255, 255, 255, 0.85);
    --premium-surface-strong: rgba(255, 255, 255, 0.95);
    --premium-border: rgba(0, 0, 0, 0.08);
    --premium-border-strong: rgba(100, 116, 139, 0.2);
    --premium-text: #0f172a;
    --premium-muted: #64748b;
    --premium-muted-strong: #475569;
    --premium-accent: #6366f1;
    --premium-accent-strong: #4f46e5;
    --premium-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
}

/* ─── Body background ─── */
.dark body,
.dark body.premium-app {
    min-height: 100vh;
    color: var(--premium-text);
    background:
        radial-gradient(circle at top, rgba(99, 102, 241, 0.12), transparent 30%),
        linear-gradient(180deg, #020617 0%, #020617 100%);
}

/* ─── Sidebar ─── */
.dark body aside,
.dark .premium-app aside,
.dark .premium-app .premium-sidebar {
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: var(--premium-border) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ─── Main area ─── */
.dark body main,
.dark .premium-app main,
.dark .premium-app .premium-main {
    background: transparent !important;
}

.premium-app .premium-page-shell {
    max-width: 100%;
}

/* ─── Headings ─── */
.dark body h1,
.dark body h2,
.dark body h3,
.dark body h4,
.dark .premium-app h1,
.dark .premium-app h2,
.dark .premium-app h3,
.dark .premium-app h4 {
    color: var(--premium-text) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
}

.premium-app p,
.premium-app label,
.premium-app small,
.premium-app span,
.premium-app li,
.premium-app th,
.premium-app td {
    color: inherit;
}

.dark .premium-app .premium-muted,
.dark .premium-app .text-gray-400,
.dark .premium-app .text-gray-500,
.dark .premium-app .text-gray-600 {
    color: var(--premium-muted) !important;
}

/* ─── Cards ─── */
.dark body .premium-card,
.dark body .premium-surface,
.dark body .premium-legacy-card,
.dark body .settings-section,
.dark body .chart-section,
.dark .premium-app .premium-card,
.dark .premium-app .premium-surface,
.dark .premium-app .premium-legacy-card,
.dark .premium-app .settings-section,
.dark .premium-app .chart-section {
    background: var(--premium-surface) !important;
    border: 1px solid var(--premium-border) !important;
    border-radius: 1rem !important;
    box-shadow: var(--premium-shadow) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.dark .premium-app .premium-card-flat {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--premium-border) !important;
    border-radius: 1rem !important;
}

.dark .premium-app .premium-card-subtle {
    background: rgba(15, 23, 42, 0.42) !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    border-radius: 1rem !important;
}

/* ─── Sidebar nav: consistent in light and dark ─── */
.premium-app aside nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.premium-app .premium-nav-link {
    display: flex !important;
    width: 100% !important;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    padding: 0.65rem 0.85rem 0.65rem 1rem !important;
    border: none !important;
    border-radius: 0.8rem !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--premium-muted) !important;
    transition: background-color 160ms ease, color 160ms ease !important;
}

.premium-app .premium-nav-link::before {
    content: "";
    position: absolute;
    left: 0.45rem;
    top: 50%;
    width: 0.18rem;
    height: 60%;
    border-radius: 9999px;
    background: rgb(99, 102, 241);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 160ms ease;
}

.premium-app .premium-nav-link:hover {
    background: transparent !important;
    color: var(--premium-text) !important;
}

.premium-app .premium-nav-link:hover::before {
    opacity: 0.45;
}

.premium-app .premium-nav-link.premium-nav-active {
    background: transparent !important;
    color: var(--premium-text) !important;
}

.premium-app .premium-nav-link.premium-nav-active::before {
    opacity: 1;
}

.premium-app .premium-nav-link svg {
    color: inherit !important;
}

.premium-app #adminLink {
    display: none !important;
}

.premium-app .premium-sidebar-header {
    border-color: var(--premium-border) !important;
}

.premium-app .premium-title {
    color: var(--premium-text) !important;
    font-weight: 600 !important;
}

.premium-app .premium-subtitle {
    color: var(--premium-muted) !important;
}

/* ─── Pills & chips ─── */
.dark .premium-app .premium-pill,
.dark .premium-app .premium-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px !important;
    border: 1px solid rgba(129, 140, 248, 0.22) !important;
    background: rgba(99, 102, 241, 0.12) !important;
    color: #c7d2fe !important;
    box-shadow: 0 12px 30px rgba(79, 70, 229, 0.16);
}

/* ─── Inputs ─── */
.dark .premium-app .premium-input {
    background: rgba(2, 6, 23, 0.78) !important;
    color: var(--premium-text) !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    border-radius: 1rem !important;
    padding: 0.75rem 1rem !important;
    outline: none;
    box-shadow: none !important;
}

.dark .premium-app .premium-input::placeholder {
    color: #64748b !important;
}

.dark .premium-app .premium-input:focus {
    border-color: rgba(129, 140, 248, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
}

.premium-app input[type="checkbox"],
.premium-app input[type="radio"] {
    accent-color: var(--premium-accent);
}

/* ─── Buttons ─── */
.premium-app .premium-button-primary,
.premium-app .premium-button-secondary {
    border-radius: 1rem !important;
    padding: 0.75rem 1.1rem !important;
    font-weight: 600 !important;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.premium-app .premium-button-primary {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
    color: #eff6ff !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    box-shadow: 0 18px 35px rgba(37, 99, 235, 0.22) !important;
}

.premium-app .premium-button-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 40px rgba(37, 99, 235, 0.28) !important;
}

.dark .premium-app .premium-button-secondary {
    background: rgba(15, 23, 42, 0.7) !important;
    color: var(--premium-muted-strong) !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
}

.dark .premium-app .premium-button-secondary:hover {
    background: rgba(30, 41, 59, 0.88) !important;
    color: var(--premium-text) !important;
}

/* ─── Tables ─── */
.premium-app .premium-table-wrap,
.premium-app .overflow-x-auto {
    border-radius: 1rem;
}

.dark .premium-app table {
    color: var(--premium-muted-strong);
}

.dark .premium-app thead tr,
.dark .premium-app .premium-table-head {
    background: rgba(15, 23, 42, 0.78) !important;
}

.dark .premium-app tbody tr:hover {
    background: rgba(99, 102, 241, 0.08) !important;
}

/* ─── Status messages ─── */
.dark .premium-app .premium-status-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
    color: #86efac !important;
}

.dark .premium-app .premium-status-error {
    background: rgba(244, 63, 94, 0.1) !important;
    border: 1px solid rgba(244, 63, 94, 0.22) !important;
    color: #fda4af !important;
}

.dark .premium-app .premium-divider,
.dark .premium-app hr {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ─── Filters & date range buttons ─── */
.dark .premium-app .range-btn.active,
.dark .premium-app .quick-date-btn.active-range,
.dark .premium-app [data-filter].active {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #e0e7ff !important;
    border-color: rgba(129, 140, 248, 0.3) !important;
}

.premium-app .range-btn,
.premium-app .quick-date-btn,
.premium-app [data-filter],
.premium-app .toc-link,
.premium-app button,
.premium-app a[id$="Badge"] {
    transition: all 160ms ease;
}

.dark .premium-app .toc-link {
    border-radius: 1rem !important;
    color: var(--premium-muted) !important;
}

.dark .premium-app .toc-link:hover,
.dark .premium-app .toc-link.active {
    background: rgba(99, 102, 241, 0.14) !important;
    color: var(--premium-text) !important;
}

/* ─── Login / reset cards ─── */
.dark body .login-box,
.dark body .forgot-card,
.dark body .reset-card,
.dark .premium-app .login-box,
.dark .premium-app .forgot-card,
.dark .premium-app .reset-card {
    background: var(--premium-surface-strong) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 1.5rem !important;
    box-shadow: var(--premium-shadow) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ─── Generic button rounding ─── */
.dark body .back-link,
.dark body .btn,
.dark body .btn-primary,
.dark body .btn-secondary,
.dark body .btn-danger,
.dark .premium-app .back-link,
.dark .premium-app .btn,
.dark .premium-app .btn-primary,
.dark .premium-app .btn-secondary,
.dark .premium-app .btn-danger {
    border-radius: 1rem !important;
}

.dark .premium-app .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    color: #eff6ff !important;
}

.dark .premium-app .btn-secondary {
    background: rgba(15, 23, 42, 0.82) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    color: var(--premium-muted-strong) !important;
}

.dark .premium-app .btn-danger {
    background: rgba(127, 29, 29, 0.74) !important;
    border: 1px solid rgba(248, 113, 113, 0.22) !important;
    color: #fecaca !important;
}