/* ─────────────────────────────────────────────────────────────────────────
   ONKYO admin theme overrides.
   Layered on top of Filament's compiled CSS via a panels::head.end render hook
   (no npm/Vite build). Goal: soft, rounded, glassy dark SaaS dashboard with a
   sci-fi/gaming flair. Keep usability first — do not break Filament layout.
   ───────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dela+Gothic+One&family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Roboto+Slab:wght@300;400;600&display=swap');

@font-face {
    font-family: 'SFMono';
    src: url('/fonts/SFMono-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'SFMono';
    src: url('/fonts/SFMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'SFMono';
    src: url('/fonts/SFMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'SFMono';
    src: url('/fonts/SFMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

/* ── FONTS ─────────────────────────────────────────────────────────────── */

/* Body and nav: monospace feel throughout */
.fi-body,
body {
    font-family: 'IBM Plex Mono', monospace;
}

/* Default body / paragraph text → SFMono Regular */
p {
    font-family: 'SFMono', ui-monospace, monospace;
    font-weight: 400;
}

/* Navigation links */
.fi-nav-item-label,
.fi-sidebar-nav a,
.fi-topbar nav a {
    font-family: 'IBM Plex Mono', monospace;
}

/* All headings → Bebas Neue */
h1, h2, h3, h4,
.fi-page-header-heading,
.fi-section-header-heading,
.fi-modal-header-heading,
.fi-wi-stats-overview-stat-label,
[class*="-heading"],
[class*="-title"] {
    font-family: 'Bebas Neue', 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: 0.06em;
}

/* Brand logo in top-left bar → Dela Gothic One only */
.fi-logo {
    font-family: 'SFMono', system-ui, sans-serif;
    letter-spacing: 0.2em;
    font-weight: 400;
}

/* Buttons, labels, badges, tables, form UI → IBM Plex Sans */
.fi-btn,
.fi-badge,
label,
.fi-fo-field-wrp label,
.fi-ta-header-cell,
.fi-ta-cell,
.fi-fo-field-wrp,
.fi-select-option,
.fi-dropdown-list-item {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

:root {
    --onkyo-bg: #060c16;
    --onkyo-bg-2: #0b1424;
    --onkyo-accent: #8b6cff;
    --onkyo-accent-soft: rgba(139, 108, 255, 0.16);
    --onkyo-glass: rgba(18, 28, 48, 0.6);
    --onkyo-border: rgba(139, 108, 255, 0.14);
    --onkyo-radius: 0.9rem;
}

/* Page background: deep blue-black with a soft purple aurora. */
.fi-body,
body.fi-body {
    background-color: var(--onkyo-bg);
    background-image:
        radial-gradient(1200px 600px at 85% -5%, rgba(139, 108, 255, 0.10), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(80, 120, 255, 0.08), transparent 55%);
    background-attachment: fixed;
}

/* Glassy sidebar + topbar. */
.fi-sidebar .fi-sidebar-nav,
.fi-topbar > nav,
.fi-topbar {
    background: var(--onkyo-glass) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: var(--onkyo-border) !important;
}

/* Cards, sections, widgets, tables, modals: rounded + subtle glass. */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-modal-window,
.fi-dropdown-panel,
.fi-fo-field-wrp .fi-input-wrp {
    border-radius: var(--onkyo-radius) !important;
    border: 1px solid var(--onkyo-border) !important;
    background: var(--onkyo-glass) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Buttons: rounded, with a soft accent glow on primary. */
.fi-btn {
    border-radius: 0.7rem !important;
}
.fi-btn.fi-color-primary {
    box-shadow: 0 6px 20px -8px var(--onkyo-accent);
}

/* Brand text. */
.fi-logo {
    letter-spacing: 0.18em;
    font-weight: 700;
    color: #e8ecf6;
}

/* Stat widgets: gentle lift on hover. */
.fi-wi-stats-overview-stat {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -12px rgba(139, 108, 255, 0.35);
}

/* Auth pages (login / password reset): center it in the aurora with a glass card. */
.fi-simple-main {
    border-radius: 1.1rem !important;
    border: 1px solid var(--onkyo-border) !important;
    background: var(--onkyo-glass) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}