/* =========================================================================
   app.css — design tokens + base/reset
   Material 3-inspired dark glassmorphic system
   ========================================================================= */

/* Font loading moved to real <link> tags in layouts/base.php's <head> -
   @import inside an external stylesheet only starts fetching after the
   whole parent stylesheet finishes downloading (a serial waterfall, not
   parallel with the page's other requests), and is more prone to being
   stripped or mishandled by intermediate proxies/CDNs than a plain
   <link>. This was the actual cause of icons rendering as literal text
   (e.g. "bolt" instead of the icon glyph) reported in production -
   see KNOWN_ISSUES.md. */

/* The HTML `hidden` attribute only applies the UA stylesheet's display:none,
   which any class rule with its own `display` (e.g. .alert's display:flex)
   silently overrides - so a hidden .alert still showed. Restore the
   attribute's intended meaning everywhere, see KNOWN_ISSUES.md ISSUE-17. */
[hidden] { display: none !important; }

:root {
    color-scheme: dark;

    /* --- Accent (use sparingly — see spec) --- */
    --accent: #6366f1;
    --accent-hover: #7274f2;
    --accent-active: #4f52d6;
    --accent-glow: rgba(99, 102, 241, 0.35);
    --accent-soft: rgba(99, 102, 241, 0.12);

    /* --- Surfaces --- */
    --bg-base: #0a0a0f;
    --bg-elevated: #101018;
    --surface-glass: rgba(255, 255, 255, 0.04);
    --surface-glass-hover: rgba(255, 255, 255, 0.06);
    --surface-glass-active: rgba(255, 255, 255, 0.08);
    --border-glass: rgba(255, 255, 255, 0.08);
    --border-glass-strong: rgba(255, 255, 255, 0.14);

    /* --- Text --- */
    --text-primary: rgba(255, 255, 255, 0.94);
    --text-secondary: rgba(255, 255, 255, 0.64);
    --text-tertiary: rgba(255, 255, 255, 0.40);
    --text-on-accent: #ffffff;

    /* --- Status colors --- */
    --status-success: #22c55e;
    --status-success-bg: rgba(34, 197, 94, 0.12);
    --status-warning: #f59e0b;
    --status-warning-bg: rgba(245, 158, 11, 0.12);
    --status-danger: #ef4444;
    --status-danger-bg: rgba(239, 68, 68, 0.12);
    --status-pending: #94a3b8;
    --status-pending-bg: rgba(148, 163, 184, 0.12);
    --status-info: #38bdf8;
    --status-info-bg: rgba(56, 189, 248, 0.12);

    /* --- Radii --- */
    --radius-card: 28px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --radius-pill: 999px;

    /* --- Shadows --- */
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.45);
    --shadow-glow-accent: 0 0 0 1px rgba(99, 102, 241, 0.4), 0 8px 24px rgba(99, 102, 241, 0.25);

    /* --- Spacing scale --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* --- Type scale --- */
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;

    /* --- Motion --- */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --duration-fast: 150ms;
    --duration-base: 240ms;

    /* --- Layout --- */
    --sidebar-width: 264px;
    --topbar-height: 72px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--bg-base);
    min-height: 100vh;
    line-height: 1.5;
    position: relative;
    overflow-x: hidden;
}

/* Radial background glows — fixed, behind everything, non-interactive */
body::before,
body::after {
    content: '';
    position: fixed;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
}

body::before {
    width: 640px;
    height: 640px;
    top: -200px;
    left: -160px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
}

body::after {
    width: 560px;
    height: 560px;
    bottom: -180px;
    right: -140px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    opacity: 0.55;
}

.app-shell,
.public-shell {
    position: relative;
    z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-2);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p {
    margin: 0 0 var(--space-4);
    color: var(--text-secondary);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
    color: var(--accent-hover);
}

img {
    max-width: 100%;
    display: block;
}

.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

/* Visible keyboard focus everywhere — never suppressed */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    background: var(--accent-soft);
    color: var(--text-primary);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}