/* ==========================================================================
   fservices · tema osTicket — variabili, font e base comune
   Stessa identità dell'hub: navy profondo, rosso brand, titoli Lemon Milk,
   testo Roboto, card "vetro". Scuro di default, chiaro alternativo.
   Tutto il resto (staff, clienti, accesso) legge solo questi token.
   ========================================================================== */

@font-face {
    font-family: 'Lemon Milk Pro Bold';
    src: url('fonts/lemon-milk-pro-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Roboto, in locale (latin-ext prima: il browser sceglie il file giusto dagli unicode-range) */
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: normal; font-display: swap;
    src: url('fonts/roboto-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: normal; font-display: swap;
    src: url('fonts/roboto-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-weight: 500; font-style: normal; font-display: swap;
    src: url('fonts/roboto-latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto'; font-weight: 500; font-style: normal; font-display: swap;
    src: url('fonts/roboto-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-weight: 700; font-style: normal; font-display: swap;
    src: url('fonts/roboto-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto'; font-weight: 700; font-style: normal; font-display: swap;
    src: url('fonts/roboto-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Scuro (predefinito, come l'hub) ---------- */
:root,
:root[data-fs-theme="dark"] {
    --fs-bg: #141b36;
    --fs-navy: #1c2647;
    --fs-raised: #232f5c;
    --fs-text: #e8eaf2;
    --fs-muted: #93a0c4;
    --fs-faint: #6b76a0;
    --fs-red: #d51016;
    --fs-red-hover: #ab0d12;
    --fs-red-text: #ff7378;
    --fs-ok: #34c77b;
    --fs-warn: #f0a83b;
    --fs-crit: #ff5d5d;
    --fs-info: #5aa9e6;
    --fs-line: rgba(255, 255, 255, .08);
    --fs-line-strong: rgba(255, 255, 255, .16);
    --fs-card: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
    --fs-card-solid: #1b2447;
    --fs-shadow: 0 12px 32px -14px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .05);
    --fs-radius: 16px;
    --fs-radius-sm: 10px;

    --fs-heading: #ffffff;
    --fs-link: #8fb4ff;
    --fs-link-hover: #ffffff;
    --fs-ink-rgb: 255 255 255;
    --fs-glass-rgb: 20 27 54;
    --fs-glass-rgb-2: 17 23 46;
    --fs-well-rgb: 10 15 36;
    --fs-shadow-rgb: 0 0 0;
    --fs-field: rgba(255, 255, 255, .05);
    --fs-field-focus: rgba(255, 255, 255, .08);
    --fs-row-hover: rgba(255, 255, 255, .045);
    --fs-row-alt: rgba(255, 255, 255, .02);
    --fs-th-bg: rgba(255, 255, 255, .035);

    --fs-chip-danger: #ffd4d4;
    --fs-chip-warn: #ffe3b3;
    --fs-chip-ok: #c4f4da;
    --fs-chip-info: #cfe6fa;

    --fs-glow-red: .13;
    --fs-glow-blue: .10;
    --fs-watermark: url('brand/fservices-mark-white.png');
    --fs-watermark-opacity: .05;
    --fs-icon-filter: invert(1) brightness(1.15);
    color-scheme: dark;
}

/* ---------- Chiaro (come il tuo: barre e piede restano navy) ---------- */
:root[data-fs-theme="light"] {
    --fs-bg: #f3f4f9;
    --fs-navy: #e1e4f0;
    --fs-raised: #eef0f7;
    --fs-text: #1f2942;
    --fs-muted: #5b6683;
    --fs-faint: #808ba8;
    --fs-red-text: #b80d13;
    --fs-line: rgba(28, 38, 71, .10);
    --fs-line-strong: rgba(28, 38, 71, .20);
    --fs-card: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .62));
    --fs-card-solid: #ffffff;
    --fs-shadow: 0 14px 34px -16px rgba(28, 38, 71, .16), inset 0 1px 0 rgba(255, 255, 255, .8);

    --fs-heading: #141b36;
    --fs-link: #1d4fb8;
    --fs-link-hover: #d51016;
    --fs-ink-rgb: 28 38 71;
    --fs-glass-rgb: 255 255 255;
    --fs-glass-rgb-2: 255 255 255;
    --fs-well-rgb: 28 38 71;
    --fs-shadow-rgb: 28 38 71;
    --fs-field: rgba(28, 38, 71, .04);
    --fs-field-focus: rgba(28, 38, 71, .07);
    --fs-row-hover: rgba(28, 38, 71, .045);
    --fs-row-alt: rgba(28, 38, 71, .02);
    --fs-th-bg: rgba(28, 38, 71, .05);

    --fs-chip-danger: #a51616;
    --fs-chip-warn: #8a5a06;
    --fs-chip-ok: #1f7a4d;
    --fs-chip-info: #1d5a8f;

    --fs-glow-red: .07;
    --fs-glow-blue: .09;
    --fs-watermark: url('brand/fservices-mark-navy.png');
    --fs-watermark-opacity: .08;
    --fs-icon-filter: none;
    color-scheme: light;
}

/* Barre, piede e accesso restano sempre navy: sono l'accento del marchio (come nell'hub) */
.fs-chrome,
:root[data-fs-theme="light"] .fs-chrome {
    --fs-text: #e8eaf2;
    --fs-muted: #93a0c4;
    --fs-faint: #6b76a0;
    --fs-heading: #ffffff;
    --fs-line: rgba(255, 255, 255, .08);
    --fs-line-strong: rgba(255, 255, 255, .16);
    --fs-link: #cbd2e6;
    --fs-link-hover: #ffffff;
    --fs-ink-rgb: 255 255 255;
    --fs-field: rgba(255, 255, 255, .06);
    --fs-field-focus: rgba(255, 255, 255, .10);
    --fs-red-text: #ff7378;
    --fs-icon-filter: invert(1) brightness(1.15);
}

/* ---------- Derivati: si ricalcolano anche dentro le barre (.fs-chrome) ---------- */
:root,
.fs-chrome {
    --fs-surface: rgb(var(--fs-ink-rgb) / .05);
    --fs-surface-strong: rgb(var(--fs-ink-rgb) / .09);
    --fs-field-border: rgb(var(--fs-ink-rgb) / .16);
    --fs-field-border-hover: rgb(var(--fs-ink-rgb) / .28);
    --fs-ring: 0 0 0 3px rgba(213, 16, 22, .28);
    --fs-btn-grad: linear-gradient(180deg, #e3141b, #b80d13);
    --fs-btn-shadow: 0 8px 20px -8px rgba(213, 16, 22, .75), inset 0 1px 0 rgba(255, 255, 255, .18);
}
:root {
    --fs-popover: #1b2447;
    --fs-popover-text: #e8eaf2;
    --fs-chrome-bg: #171f40;
    --fs-chrome-pop: #1b2447;
}
:root[data-fs-theme="light"] {
    --fs-popover: #ffffff;
    --fs-popover-text: #1f2942;
    --fs-chrome-bg: #1c2647;
    --fs-field-border: rgb(28 38 71 / .26);
    --fs-field-border-hover: rgb(28 38 71 / .42);
}

/* ---------- Base comune ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    color: var(--fs-text);
    background:
        radial-gradient(900px 480px at 88% -8%, rgba(213, 16, 22, var(--fs-glow-red)), transparent 60%),
        radial-gradient(800px 520px at -8% 6%, rgba(90, 169, 230, var(--fs-glow-blue)), transparent 60%),
        var(--fs-bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Marchio grande e quasi trasparente dietro ai contenuti, come nell'hub */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--fs-watermark) no-repeat center center / auto min(64vh, 42rem);
    opacity: var(--fs-watermark-opacity);
}

::selection { background: rgba(213, 16, 22, .35); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: rgb(var(--fs-ink-rgb) / .14);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--fs-ink-rgb) / .26); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
    outline: 2px solid rgba(213, 16, 22, .75);
    outline-offset: 2px;
}

/* Titoli e piccole etichette: Lemon Milk, spaziatura larga (identico all'hub) */
.fs-display {
    font-family: 'Lemon Milk Pro Bold', Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: .015em;
}

.fs-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fs-red-text);
}

/* Pulsante tema (sole/luna): dentro le barre navy */
.fs-theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--fs-line);
    background: rgba(255, 255, 255, .06);
    color: #cbd2e6;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fs-theme-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .22); }
.fs-theme-toggle svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.fs-theme-toggle .fs-ico-sun { display: none; }
.fs-theme-toggle .fs-ico-moon { display: block; }
:root[data-fs-theme="dark"] .fs-theme-toggle .fs-ico-sun,
:root:not([data-fs-theme]) .fs-theme-toggle .fs-ico-sun { display: block; }
:root[data-fs-theme="dark"] .fs-theme-toggle .fs-ico-moon,
:root:not([data-fs-theme]) .fs-theme-toggle .fs-ico-moon { display: none; }

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}