/* ===== Default Theme (Admin / No Tenant) ===== */
/* Dark/light theme for the Super Admin area, defaulting to dark */

/* Theme Toggle Icon Animations */
.dark-icon-admin,
.light-icon-admin {
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theme-aware utility classes for both dark and light modes */
html[data-theme="default"],
html[data-theme="default-light"] {
    /* Text color utilities */
    .text-theme-strong { color: rgb(var(--color-text-strong)); }
    .text-theme-muted { color: rgb(var(--color-text-muted)); }
    .text-theme-subtle { color: rgb(var(--color-text-subtle)); }

    /* Background utilities */
    .bg-theme-surface-0 { background-color: rgb(var(--color-surface-0)); }
    .bg-theme-surface-1 { background-color: rgb(var(--color-surface-1)); }
    .bg-theme-surface-2 { background-color: rgb(var(--color-surface-2)); }

    /* Border utilities */
    .border-theme { border-color: rgb(var(--color-surface-border)); }

    /* Accent utilities */
    .bg-accent { background-color: rgb(var(--color-accent)); }
    .text-accent { color: rgb(var(--color-accent)); }
    .border-accent { border-color: rgb(var(--color-accent)); }
    .hover\:bg-accent:hover { background-color: rgb(var(--color-accent)); }
    .hover\:text-accent:hover { color: rgb(var(--color-accent)); }
    .hover\:border-accent:hover { border-color: rgb(var(--color-accent)); }
    .bg-accent-10 { background-color: rgb(var(--color-accent) / 0.1); }
    .bg-accent-20 { background-color: rgb(var(--color-accent) / 0.2); }

    /* Hover states */
    .hover\:text-theme-strong:hover { color: rgb(var(--color-text-strong)); }
    .hover\:bg-theme-surface-1:hover { background-color: rgb(var(--color-surface-1)); }
    .hover\:bg-theme-surface-2:hover { background-color: rgb(var(--color-surface-2)); }

    /* Card utilities */
    .border-surface-border { border-color: rgb(var(--color-surface-border)); }
    .rounded-card { border-radius: var(--radius-card); }

    /* Shadows */
    .shadow-glow { box-shadow: var(--shadow-glow); }

    /* Animation durations */
    .duration-normal { transition-duration: var(--duration-normal); }

    /* Glassmorphism utility */
    .glass {
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
    .glass.bg-theme-surface-0 { background-color: rgb(var(--color-surface-0) / 0.5) !important; }
    .glass.bg-theme-surface-1 { background-color: rgb(var(--color-surface-1) / 0.15) !important; }
    .glass.bg-theme-surface-2 { background-color: rgb(var(--color-surface-2) / 0.15) !important; }
    .glass.border-surface-border,
    .glass.border-theme { border-color: rgb(var(--color-surface-border) / 0.25) !important; }
}

/* ===========================
   DARK MODE (default)
   =========================== */
html[data-theme="default"] {
    /* Surfaces */
    --color-surface-0: 10 10 20;         /* Deep navy-black base */
    --color-surface-1: 15 23 42;         /* Panels, cards - slate-900 */
    --color-surface-2: 30 41 59;         /* Elevated surfaces - slate-800 */
    --color-surface-border: 51 65 85;    /* Borders - slate-700 */

    /* Text */
    --color-text-strong: 241 245 249;    /* Primary text - slate-100 */
    --color-text-muted: 148 163 184;     /* Secondary text - slate-400 */
    --color-text-subtle: 100 116 139;    /* Tertiary text - slate-500 */

    /* Accents - indigo */
    --color-accent: 99 102 241;          /* Indigo-500 */
    --color-accent-strong: 79 70 229;    /* Indigo-600 */
    --color-accent-indigo: 99 102 241;   /* Same as accent */

    /* Glows */
    --color-glow-cyan: rgba(99, 102, 241, 0.2);
    --color-glow-indigo: rgba(99, 102, 241, 0.2);

    /* Shadows */
    --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.15);

    /* Radii */
    --radius-card: 0.75rem;

    /* Motion */
    --duration-normal: 200ms;

    /* Scrollbar */
    scrollbar-color: rgb(var(--color-accent)) rgb(var(--color-surface-1));
}

/* Dark mode scrollbar - WebKit */
html[data-theme="default"] ::-webkit-scrollbar-track {
    background: rgb(var(--color-surface-1));
    border-radius: 5px;
}
html[data-theme="default"] ::-webkit-scrollbar-thumb {
    background: rgb(var(--color-accent));
    border-radius: 5px;
    border: 2px solid rgb(var(--color-surface-1));
}
html[data-theme="default"] ::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-accent-strong));
}

/* Dark mode background with subtle indigo glow */
html[data-theme="default"] body {
    background-color: rgb(var(--color-surface-0));
    background-image:
        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
    background-attachment: fixed;
}

/* ===========================
   LIGHT MODE (default-light)
   =========================== */
html[data-theme="default-light"] {
    /* Surfaces - clean light */
    --color-surface-0: 250 250 250;      /* Light base - gray-50 */
    --color-surface-1: 255 255 255;      /* Panels - white */
    --color-surface-2: 243 244 246;      /* Elevated - gray-100 */
    --color-surface-border: 229 231 235;  /* Borders - gray-200 */

    /* Text - dark on light */
    --color-text-strong: 17 24 39;       /* slate-900 */
    --color-text-muted: 107 114 128;     /* gray-500 */
    --color-text-subtle: 156 163 175;    /* gray-400 */

    /* Accents - indigo */
    --color-accent: 99 102 241;          /* Indigo-500 */
    --color-accent-strong: 79 70 229;    /* Indigo-600 */
    --color-accent-indigo: 99 102 241;

    /* Glows */
    --color-glow-cyan: rgba(99, 102, 241, 0.12);
    --color-glow-indigo: rgba(99, 102, 241, 0.12);

    /* Shadows */
    --shadow-glow: 0 1px 3px rgba(0, 0, 0, 0.1);

    /* Radii */
    --radius-card: 0.75rem;

    /* Motion */
    --duration-normal: 200ms;

    /* Scrollbar */
    scrollbar-color: rgb(var(--color-accent)) rgb(var(--color-surface-2));
}

/* Light mode scrollbar - WebKit */
html[data-theme="default-light"] ::-webkit-scrollbar-track {
    background: rgb(var(--color-surface-2));
    border-radius: 5px;
}
html[data-theme="default-light"] ::-webkit-scrollbar-thumb {
    background: rgb(var(--color-accent));
    border-radius: 5px;
    border: 2px solid rgb(var(--color-surface-2));
}
html[data-theme="default-light"] ::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-accent-strong));
}

/* Light mode background */
html[data-theme="default-light"] body {
    background-color: rgb(var(--color-surface-0));
    background-image:
        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.02) 0%, transparent 50%);
    background-attachment: fixed;
}

/* Details/Summary - hide default marker and rotate chevron on open */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}
details[open] > summary .details-chevron {
    transform: rotate(90deg);
}