/* ==========================================================================
   Area Clienti — stile dell'interfaccia (restyling 23/09/2026)
   Si appoggia a Bootstrap 5.3 (griglia, dropdown, collapse) e lo ridisegna
   con token propri. Tema chiaro/scuro con [data-bs-theme] sull'<html>.
   Font ospitati in locale: la CSP consente solo font-src 'self'.
   ========================================================================== */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   TOKEN
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
    --ob-primary: #0b6bcb;            /* blu Orso Blu, un filo più acceso del logo (#0060a0) */
    --ob-primary-600: #0a5aab;
    --ob-primary-rgb: 11, 107, 203;
    --ob-primary-text: #0b62b8;
    --ob-violet: #6d5efc;
    --ob-bg: #f2f5fa;
    --ob-surface: #ffffff;
    --ob-surface-2: #f7f9fc;
    --ob-surface-3: #eef2f8;
    --ob-border: #e4e9f2;
    --ob-border-strong: #d4dbe7;
    --ob-text: #0e1a2f;
    --ob-text-2: #37445c;
    --ob-muted: #68768f;
    --ob-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px -12px rgba(16, 24, 40, .12);
    --ob-shadow-lg: 0 30px 70px -24px rgba(6, 20, 56, .38);
    --ob-success: #0e8f52; --ob-success-bg: #e6f6ee;
    --ob-warning: #a86400; --ob-warning-bg: #fff3dc;
    --ob-danger: #cf2a48;  --ob-danger-bg: #fdeaee;
    --ob-info: #0a74ad;    --ob-info-bg: #e5f3fb;
    --ob-neutral: #56627a; --ob-neutral-bg: #edf0f5;
    --ob-hero-1: #030d24;
    --ob-hero-2: #082860;
    --ob-hero-3: #0b5aa6;
    --ob-bar-1: #63b1ff;
    --ob-bar-2: #0b6bcb;
    --ob-tip-bg: #0e1a2f;
    --ob-radius: 18px;
    --ob-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ob-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --ob-font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
[data-bs-theme=dark] {
    --ob-primary: #2f6fe8;
    --ob-primary-600: #4a84f0;
    --ob-primary-rgb: 76, 146, 255;
    --ob-primary-text: #8cbcff;
    --ob-bg: #060a17;
    --ob-surface: #0d1427;
    --ob-surface-2: #111a31;
    --ob-surface-3: #17213c;
    --ob-border: #1b2645;
    --ob-border-strong: #26345a;
    --ob-text: #e7ecf7;
    --ob-text-2: #c0cae0;
    --ob-muted: #8794b2;
    --ob-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 34px -14px rgba(0, 0, 0, .6);
    --ob-shadow-lg: 0 30px 80px -24px rgba(0, 0, 0, .8);
    --ob-success: #43d196; --ob-success-bg: rgba(67, 209, 150, .12);
    --ob-warning: #f4b545; --ob-warning-bg: rgba(244, 181, 69, .13);
    --ob-danger: #ff6d87;  --ob-danger-bg: rgba(255, 109, 135, .13);
    --ob-info: #5cc4ff;    --ob-info-bg: rgba(92, 196, 255, .12);
    --ob-neutral: #9ba8c4; --ob-neutral-bg: rgba(155, 168, 196, .12);
    --ob-hero-1: #01040c;
    --ob-hero-2: #06173a;
    --ob-hero-3: #0a3a78;
    --ob-bar-1: #7cc2ff;
    --ob-bar-2: #3b6ff0;
    --ob-tip-bg: #26345a;
}

/* Bootstrap che segue i nostri token */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --bs-body-font-family: var(--ob-font);
    --bs-body-bg: var(--ob-bg);
    --bs-body-color: var(--ob-text);
    --bs-emphasis-color: var(--ob-text);
    --bs-secondary-color: var(--ob-muted);
    --bs-tertiary-bg: var(--ob-surface-2);
    --bs-border-color: var(--ob-border);
    --bs-link-color: var(--ob-primary-text);
    --bs-link-hover-color: var(--ob-primary-600);
    --bs-link-color-rgb: var(--ob-primary-rgb);
    --bs-link-hover-color-rgb: var(--ob-primary-rgb);
    --bs-primary: var(--ob-primary);
    --bs-primary-rgb: var(--ob-primary-rgb);
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
    --bs-focus-ring-color: rgba(var(--ob-primary-rgb), .25);
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
body.ob-body {
    font-family: var(--ob-font);
    font-size: 15px;
    line-height: 1.5;
    background: var(--ob-bg);
    color: var(--ob-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}
::selection { background: rgba(var(--ob-primary-rgb), .22); }
a { text-underline-offset: 2px; }
b, strong { font-weight: 600; }
.ob-wrap { width: 100%; max-width: 1480px; margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px; }
.ob-muted { color: var(--ob-muted); }
.ob-nil { color: var(--ob-muted); opacity: .55; }
.ob-help { font-size: .8rem; color: var(--ob-muted); margin: 0; line-height: 1.45; }
.ob-optional { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; }
.ob-stack > * + * { margin-top: 16px; }
[data-bs-theme=light] .ob-if-dark,
[data-bs-theme=dark] .ob-if-light { display: none !important; }
[data-bs-theme=dark] input[type=date] { color-scheme: dark; }

/* Barra di caricamento in cima: sul NAS una pagina può metterci qualche secondo */
.ob-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 3000; pointer-events: none; opacity: 0; overflow: hidden; transition: opacity .2s; }
.ob-progress::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 3px;
    background: linear-gradient(90deg, transparent, #7cc2ff, var(--ob-violet), transparent); animation: ob-load 1.1s ease-in-out infinite; }
body.is-loading .ob-progress { opacity: 1; }
body.is-loading .ob-main { opacity: .6; transition: opacity .3s .25s; }
@keyframes ob-load { to { left: 100%; } }

/* --------------------------------------------------------------------------
   BOTTONI E CAMPI
   -------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 600; border-radius: 11px; padding: .55rem 1rem; font-size: .9rem; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; }
.btn-sm { padding: .38rem .75rem; font-size: .82rem; border-radius: 9px; }
.btn:active { transform: translateY(1px); }
.btn-primary {
    --bs-btn-bg: var(--ob-primary); --bs-btn-border-color: var(--ob-primary); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--ob-primary-600); --bs-btn-hover-border-color: var(--ob-primary-600); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ob-primary-600); --bs-btn-active-border-color: var(--ob-primary-600); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--ob-primary); --bs-btn-disabled-border-color: var(--ob-primary);
    --bs-btn-focus-shadow-rgb: var(--ob-primary-rgb);
    box-shadow: 0 6px 16px -8px rgba(var(--ob-primary-rgb), .8);
}
.ob-btn-soft {
    --bs-btn-bg: var(--ob-surface); --bs-btn-border-color: var(--ob-border-strong); --bs-btn-color: var(--ob-text);
    --bs-btn-hover-bg: var(--ob-surface-3); --bs-btn-hover-border-color: var(--ob-border-strong); --bs-btn-hover-color: var(--ob-text);
    --bs-btn-active-bg: var(--ob-surface-3); --bs-btn-active-border-color: var(--ob-border-strong); --bs-btn-active-color: var(--ob-text);
}
.ob-btn-ghost {
    --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: var(--ob-muted);
    --bs-btn-hover-bg: var(--ob-surface-3); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--ob-text);
    --bs-btn-active-bg: var(--ob-surface-3); --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--ob-text);
}
.form-control, .form-select {
    background-color: var(--ob-surface);
    border-color: var(--ob-border-strong);
    color: var(--ob-text);
    border-radius: 10px;
    font-size: .9rem;
}
.form-control::placeholder { color: var(--ob-muted); opacity: .8; }
.form-control:focus, .form-select:focus {
    background-color: var(--ob-surface);
    border-color: var(--ob-primary);
    color: var(--ob-text);
    box-shadow: 0 0 0 4px rgba(var(--ob-primary-rgb), .16);
}
.input-group-text { background: var(--ob-surface-3); border-color: var(--ob-border-strong); color: var(--ob-muted); font-size: .85rem; }
.form-check-input { border-color: var(--ob-border-strong); background-color: var(--ob-surface); }
.form-check-input:checked { background-color: var(--ob-primary); border-color: var(--ob-primary); }
.form-check-input:focus { border-color: var(--ob-primary); box-shadow: 0 0 0 4px rgba(var(--ob-primary-rgb), .16); }
.ob-label { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--ob-muted); margin: 0 0 6px; }
.ob-link { border: 0; background: none; padding: 0; color: var(--ob-primary-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ob-mono-input { font-family: var(--ob-font-mono); }

/* Bottoni-icona: nella fascia scura (vetro) e sulle card (ob-iconbtn-soft) */
.ob-iconbtn {
    width: 38px; height: 38px; flex-shrink: 0;
    display: inline-grid; place-items: center;
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .07); color: #fff; font-size: 1.02rem;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.ob-iconbtn:hover { background: rgba(255, 255, 255, .16); }
.ob-iconbtn:active { transform: scale(.96); }
.ob-iconbtn-soft { width: 34px; height: 34px; border-radius: 10px; border-color: var(--ob-border-strong); background: var(--ob-surface); color: var(--ob-text-2); font-size: .95rem; }
.ob-iconbtn-soft:hover { background: var(--ob-surface-3); color: var(--ob-text); }
.ob-iconbtn-danger:hover { background: var(--ob-danger-bg); border-color: transparent; color: var(--ob-danger); }
.ob-if-denso { display: none; }
.is-dense .ob-if-comodo { display: none; }
.is-dense .ob-if-denso { display: inline; }

/* --------------------------------------------------------------------------
   FASCIA IN ALTO ("hero") con orbite
   -------------------------------------------------------------------------- */
.ob-hero {
    /* niente overflow:hidden qui: taglierebbe il menu utente che scende sulle card (23/09) */
    position: relative; color: #fff;
    padding-bottom: 104px;
    background:
        radial-gradient(1100px 480px at 88% -20%, rgba(109, 94, 252, .38), transparent 62%),
        radial-gradient(900px 420px at 5% -10%, rgba(24, 132, 240, .42), transparent 60%),
        linear-gradient(160deg, var(--ob-hero-1) 0%, var(--ob-hero-2) 58%, var(--ob-hero-3) 100%);
}
.ob-hero::after { /* sfumatura verso il contenuto */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(3, 13, 36, .25));
}
.ob-hero-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* contenuto della fascia sopra la decorazione; la barra (col menu utente) anche sopra le card */
.ob-hero > .ob-wrap { position: relative; z-index: 1; }
.ob-hero > .ob-topbar { z-index: 30; }
.ob-orbit {
    position: absolute; top: 58%; left: 80%;
    border: 1px solid rgba(255, 255, 255, .11); border-radius: 50%;
    transform: translate(-50%, -50%);
}
.ob-orbit > i {
    position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
    background: #a9d6ff; box-shadow: 0 0 14px 4px rgba(140, 200, 255, .7);
}
.ob-orbit-1 { width: 380px; height: 380px; animation: ob-spin 48s linear infinite; }
.ob-orbit-2 { width: 700px; height: 700px; border-style: dashed; border-color: rgba(255, 255, 255, .07); animation: ob-spin 110s linear infinite reverse; }
.ob-orbit-2 > i { width: 5px; height: 5px; margin-left: -2.5px; top: -2.5px; background: #d9d2ff; box-shadow: 0 0 10px 3px rgba(170, 150, 255, .6); }
.ob-orbit-3 { width: 1060px; height: 1060px; border-color: rgba(255, 255, 255, .05); animation: ob-spin 190s linear infinite; }
.ob-orbit-3 > i { width: 6px; height: 6px; margin-left: -3px; top: -3px; }
@keyframes ob-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ob-stars {
    position: absolute; inset: 0; opacity: .7;
    background-image:
        radial-gradient(1.2px 1.2px at 7% 22%, #fff, transparent),
        radial-gradient(1px 1px at 18% 64%, rgba(255,255,255,.8), transparent),
        radial-gradient(1.4px 1.4px at 29% 12%, #fff, transparent),
        radial-gradient(1px 1px at 37% 78%, rgba(255,255,255,.7), transparent),
        radial-gradient(1.2px 1.2px at 46% 36%, rgba(255,255,255,.9), transparent),
        radial-gradient(1px 1px at 55% 8%, #fff, transparent),
        radial-gradient(1.6px 1.6px at 63% 58%, rgba(200,225,255,.9), transparent),
        radial-gradient(1px 1px at 71% 27%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 83% 82%, rgba(255,255,255,.8), transparent),
        radial-gradient(1px 1px at 91% 14%, #fff, transparent),
        radial-gradient(1.3px 1.3px at 96% 48%, rgba(255,255,255,.85), transparent),
        radial-gradient(1px 1px at 12% 90%, rgba(255,255,255,.6), transparent);
    animation: ob-twinkle 6s ease-in-out infinite alternate;
}
@keyframes ob-twinkle { from { opacity: .45; } to { opacity: .85; } }

.ob-topbar { position: relative; display: flex; align-items: center; gap: 16px; height: 72px; }
.ob-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-family: var(--ob-font-display); font-weight: 600; font-size: 1.18rem; letter-spacing: -.01em; }
.ob-brand:hover { color: #fff; }
.ob-mark { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); flex-shrink: 0; animation: ob-spin-mark 14s linear infinite; }
.ob-mark::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: linear-gradient(135deg, #a9d6ff, var(--ob-violet)); }
.ob-mark > i { position: absolute; top: -3.5px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(169, 214, 255, .9); }
@keyframes ob-spin-mark { to { transform: rotate(360deg); } }
.ob-logo-inline { height: 26px; width: auto; margin-left: 6px; opacity: .92; }
.ob-logo-center { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.ob-logo-center img { height: 36px; width: auto; display: block; }
.ob-topbar-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ob-userbtn {
    display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px 0 5px;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07);
    color: #fff; font-weight: 500; font-size: .9rem; transition: background-color .15s;
}
.ob-userbtn:hover, .ob-userbtn[aria-expanded=true] { background: rgba(255, 255, 255, .16); }
.ob-userbtn .bi-chevron-down { font-size: .75rem; opacity: .7; }
.ob-userbtn-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Schede di navigazione (solo amministratori) */
.ob-tabs {
    display: flex; gap: 4px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none;
    padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ob-tabs::-webkit-scrollbar { display: none; }
.ob-tabs a {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; white-space: nowrap;
    color: rgba(255, 255, 255, .72); text-decoration: none; font-weight: 500; font-size: .88rem; transition: background-color .15s, color .15s;
}
.ob-tabs a:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.ob-tabs a.is-active { background: #fff; color: var(--ob-hero-2); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .6); }
[data-bs-theme=dark] .ob-tabs a.is-active { background: rgba(255, 255, 255, .16); color: #fff; }

.ob-hero-head { padding-top: 34px; }
.ob-eyebrow { margin: 0 0 8px; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.ob-hero-title { margin: 0; font-family: var(--ob-font-display); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.45rem); overflow-wrap: anywhere; }
.ob-hero-sub { margin: 10px 0 0; max-width: 760px; color: rgba(255, 255, 255, .72); font-size: .98rem; }

/* --------------------------------------------------------------------------
   CONTENUTO
   -------------------------------------------------------------------------- */
.ob-main { position: relative; z-index: 1; flex: 1 0 auto; margin-top: -68px; padding-bottom: 12px; transition: opacity .2s; }
.ob-main > * + * { margin-top: 18px; }
.ob-main > .row + .row, .ob-main > section + section { margin-top: 18px; }

.ob-card { background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: var(--ob-radius); box-shadow: var(--ob-shadow); }
.ob-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ob-border); }
.ob-card-title-wrap { display: flex; align-items: center; gap: 10px; }
.ob-card-title { margin: 0; font-family: var(--ob-font-display); font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; }
.ob-card-sub { margin: 2px 0 0; font-size: .82rem; color: var(--ob-muted); }
.ob-card-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ob-card-body { padding: 20px; }
.ob-card-foot { padding: 12px 20px; border-top: 1px solid var(--ob-border); }
.ob-count { padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--ob-surface-3); color: var(--ob-text-2); }
.ob-sticky { position: sticky; top: 16px; }

/* Pillole (stati, ruoli, verso) */
.ob-pill { --pill-bg: var(--ob-neutral-bg); --pill-fg: var(--ob-neutral); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; line-height: 1.5; white-space: nowrap; background: var(--pill-bg); color: var(--pill-fg); }
.ob-pill .bi { font-size: .85em; }
.ob-pill-success { --pill-bg: var(--ob-success-bg); --pill-fg: var(--ob-success); }
.ob-pill-warning { --pill-bg: var(--ob-warning-bg); --pill-fg: var(--ob-warning); }
.ob-pill-danger  { --pill-bg: var(--ob-danger-bg);  --pill-fg: var(--ob-danger); }
.ob-pill-info    { --pill-bg: var(--ob-info-bg);    --pill-fg: var(--ob-info); }
.ob-pill-primary { --pill-bg: rgba(var(--ob-primary-rgb), .11); --pill-fg: var(--ob-primary-text); }
.ob-pill-neutral { --pill-bg: var(--ob-neutral-bg); --pill-fg: var(--ob-neutral); }
.ob-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Avatar con iniziali: il colore deriva dal nome (--h) */
.ob-avatar { --h: 210; width: 36px; height: 36px; flex-shrink: 0; display: inline-grid; place-items: center; border-radius: 50%; font-size: .74rem; font-weight: 700; letter-spacing: .02em; background: hsl(var(--h) 72% 92%); color: hsl(var(--h) 58% 30%); box-shadow: inset 0 0 0 1px hsl(var(--h) 60% 84%); }
[data-bs-theme=dark] .ob-avatar { background: hsl(var(--h) 45% 20%); color: hsl(var(--h) 85% 80%); box-shadow: inset 0 0 0 1px hsl(var(--h) 45% 28%); }
.ob-avatar-sm { width: 28px; height: 28px; font-size: .64rem; }
.ob-avatar-lg { width: 46px; height: 46px; font-size: .9rem; }
.ob-userbtn .ob-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.ob-names { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ob-names b { font-weight: 600; overflow-wrap: anywhere; }
.ob-names span { font-size: .84rem; color: var(--ob-muted); overflow-wrap: anywhere; }
.ob-id { font-size: .75rem; color: var(--ob-muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   HOME: sintesi + andamento
   -------------------------------------------------------------------------- */
.ob-kpis { padding: 6px 8px; display: flex; flex-direction: column; justify-content: center; }
.ob-kpi { display: flex; align-items: center; gap: 14px; padding: 14px 12px; }
.ob-kpi + .ob-kpi { border-top: 1px dashed var(--ob-border); }
.ob-kpis-row { flex-direction: row; flex-wrap: wrap; }
.ob-kpis-row .ob-kpi { flex: 1 1 240px; }
.ob-kpis-row .ob-kpi + .ob-kpi { border-top: 0; border-left: 1px dashed var(--ob-border); }
.ob-kpi-icon { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; font-size: 1.2rem; color: var(--ob-primary-text); background: rgba(var(--ob-primary-rgb), .1); }
.ob-kpi-label { display: block; font-size: .78rem; font-weight: 500; color: var(--ob-muted); }
.ob-kpi-value { display: block; font-family: var(--ob-font-display); font-size: 1.38rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ob-kpi-note { display: block; font-size: .76rem; color: var(--ob-muted); font-variant-numeric: tabular-nums; }
.ob-kpi-live { background: var(--ob-success-bg); }
.ob-kpi-live.is-late { background: var(--ob-warning-bg); }
.ob-live { position: relative; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--ob-success); }
.ob-live::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--ob-success); opacity: 0; animation: ob-ping 2.6s cubic-bezier(0, 0, .2, 1) infinite; }
.is-late .ob-live { background: var(--ob-warning); }
.is-late .ob-live::after { border-color: var(--ob-warning); }
@keyframes ob-ping { 0% { transform: scale(.35); opacity: .9; } 80%, 100% { transform: scale(1.25); opacity: 0; } }

.ob-chart-card { display: flex; flex-direction: column; padding: 18px 20px 14px; }
.ob-chart-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ob-chart-total { text-align: right; line-height: 1.1; }
.ob-chart-total b { display: block; font-family: var(--ob-font-display); font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ob-chart-total span { font-size: .78rem; color: var(--ob-muted); }
.ob-chart { position: relative; flex: 1; min-height: 150px; display: flex; align-items: flex-end; gap: 4px; padding-top: 6px; border-bottom: 1px solid var(--ob-border); }
.ob-chart::before { /* linee guida orizzontali */
    content: ""; position: absolute; inset: 6px 0 0 0; pointer-events: none; opacity: .7;
    background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), var(--ob-border) calc(25% - 1px), var(--ob-border) 25%);
}
.ob-bar { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; text-decoration: none; border-radius: 6px 6px 0 0; }
.ob-bar > span {
    display: block; width: 100%; border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, var(--ob-bar-1), var(--ob-bar-2));
    transform-origin: bottom; animation: ob-grow .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 14ms);
    transition: filter .15s;
}
.ob-bar.is-weekend { background: rgba(var(--ob-primary-rgb), .05); } /* sabato e domenica: colonna ombreggiata */
.ob-bar:hover > span { filter: brightness(1.15) saturate(1.15); }
.ob-bar:hover { background: rgba(var(--ob-primary-rgb), .06); }
.ob-bar.is-active > span { background: linear-gradient(180deg, #ffc15e, #ff7a45); opacity: 1; }
.ob-bar.is-empty > span { height: 3px; background: var(--ob-border-strong); animation: none; }
.ob-bar[data-tip]:hover::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 5;
    padding: 5px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none;
    font-size: .74rem; font-weight: 500; color: #fff; background: var(--ob-tip-bg); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45);
}
.ob-bar.tip-start:hover::after { left: 0; transform: none; }
.ob-bar.tip-end:hover::after { left: auto; right: 0; transform: none; }
@keyframes ob-grow { from { transform: scaleY(0); } }
.ob-chart-axis { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .72rem; color: var(--ob-muted); }
.ob-chart-hint { opacity: .8; }

/* --------------------------------------------------------------------------
   FILTRI
   -------------------------------------------------------------------------- */
.ob-filters { padding: 16px; }
.ob-filters-main { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ob-search { position: relative; display: flex; align-items: center; flex: 1 1 280px; }
.ob-search > .bi { position: absolute; left: 15px; color: var(--ob-muted); pointer-events: none; }
.ob-search input {
    width: 100%; height: 46px; padding: 0 46px 0 42px; border-radius: 13px; outline: none;
    border: 1px solid var(--ob-border-strong); background: var(--ob-surface-2); color: var(--ob-text); font-size: .95rem;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.ob-search input::placeholder { color: var(--ob-muted); }
.ob-search input:focus { border-color: var(--ob-primary); background: var(--ob-surface); box-shadow: 0 0 0 4px rgba(var(--ob-primary-rgb), .16); }
.ob-search kbd { position: absolute; right: 11px; padding: 1px 8px; border-radius: 6px; font-family: inherit; font-size: .74rem; color: var(--ob-muted); background: var(--ob-surface); border: 1px solid var(--ob-border-strong); box-shadow: 0 1px 0 var(--ob-border-strong); }
.ob-search-sm { flex: 0 0 260px; width: 260px; }
.ob-search-sm input { height: 36px; border-radius: 10px; font-size: .85rem; padding-right: 12px; padding-left: 38px; }
.ob-search-sm > .bi { left: 13px; font-size: .85rem; }
.ob-fld { display: flex; flex-direction: column; flex: 0 1 230px; min-width: 170px; }
.ob-fld-sm { flex-basis: 160px; min-width: 140px; }
.ob-fld .form-select { height: 46px; border-radius: 13px; background-color: var(--ob-surface-2); }
.ob-fld-range { flex: 0 1 auto; min-width: 0; }
.ob-range {
    display: flex; align-items: center; gap: 2px; height: 46px; padding: 0 8px; border-radius: 13px;
    border: 1px solid var(--ob-border-strong); background: var(--ob-surface-2); transition: border-color .15s, box-shadow .15s;
}
.ob-range:focus-within { border-color: var(--ob-primary); box-shadow: 0 0 0 4px rgba(var(--ob-primary-rgb), .16); }
.ob-range input { width: 138px; min-width: 0; height: 100%; padding: 0 6px; border: 0; outline: none; background: transparent; color: var(--ob-text); font-size: .88rem; font-variant-numeric: tabular-nums; }
.ob-range .bi { color: var(--ob-muted); font-size: .8rem; }
.ob-filters-actions { display: flex; gap: 6px; margin-left: auto; }
.ob-filters-actions .btn { height: 40px; border-radius: 12px; padding-left: 1.15rem; padding-right: 1.15rem; }
.ob-filters-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--ob-border); }
.ob-presets, .ob-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ob-active { padding-left: 14px; border-left: 1px solid var(--ob-border); }
.ob-chip {
    display: inline-flex; align-items: center; gap: 7px; height: 31px; padding: 0 13px; border-radius: 999px;
    font-size: .8rem; font-weight: 500; text-decoration: none; white-space: nowrap;
    color: var(--ob-text-2); background: var(--ob-surface); border: 1px solid var(--ob-border-strong);
    transition: background-color .15s, border-color .15s, color .15s;
}
.ob-chip:hover { color: var(--ob-primary-text); border-color: rgba(var(--ob-primary-rgb), .55); }
.ob-chip.is-active { color: #fff; background: var(--ob-primary); border-color: var(--ob-primary); }
.ob-chip-filter { color: var(--ob-primary-text); background: rgba(var(--ob-primary-rgb), .09); border-color: transparent; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.ob-chip-filter .bi { font-size: .68rem; opacity: .7; }
.ob-chip-filter:hover { background: rgba(var(--ob-primary-rgb), .16); border-color: transparent; }

/* Segmented control (link o radio .btn-check + label) */
.ob-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--ob-surface-3); max-width: 100%; }
.ob-seg > a, .ob-seg > label {
    margin: 0; padding: 6px 13px; border-radius: 9px; cursor: pointer; white-space: nowrap; text-decoration: none;
    font-size: .82rem; font-weight: 500; color: var(--ob-muted); transition: background-color .15s, color .15s, box-shadow .15s;
}
.ob-seg > a:hover, .ob-seg > label:hover { color: var(--ob-text); }
.ob-seg > a.is-active,
.ob-seg > .btn-check:checked + label { background: var(--ob-surface); color: var(--ob-text); box-shadow: 0 1px 3px rgba(16, 24, 40, .14), 0 0 0 1px var(--ob-border); }
[data-bs-theme=dark] .ob-seg > a.is-active,
[data-bs-theme=dark] .ob-seg > .btn-check:checked + label { background: var(--ob-border-strong); }
.ob-seg > .btn-check:disabled + label { opacity: .45; cursor: not-allowed; }
.ob-seg > .btn-check:focus-visible + label { outline: 2px solid var(--ob-primary); outline-offset: 1px; }

/* --------------------------------------------------------------------------
   TABELLA DATI
   -------------------------------------------------------------------------- */
.ob-table-wrap { max-height: calc(100vh - 160px); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--ob-border-strong) transparent; }
.ob-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; font-variant-numeric: tabular-nums; }
.ob-table thead th {
    position: sticky; top: 0; z-index: 2; padding: 11px 18px; text-align: left; white-space: nowrap;
    font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ob-muted);
    background: var(--ob-surface-2); border-bottom: 1px solid var(--ob-border);
}
.ob-table tbody td { padding: 12px 18px; vertical-align: middle; color: var(--ob-text); border-bottom: 1px solid var(--ob-border); }
.ob-table tbody tr:last-child td { border-bottom: 0; }
.ob-table tbody tr:not(.ob-day):not(.ob-empty-row) { transition: background-color .12s; }
.ob-table tbody tr:not(.ob-day):not(.ob-empty-row):hover td { background: rgba(var(--ob-primary-rgb), .045); }
.is-dense .ob-table tbody td { padding-top: 6px; padding-bottom: 6px; }
.is-dense .ob-table .ob-avatar-sm { width: 22px; height: 22px; font-size: .56rem; }
.is-dense .ob-when small { display: none; }
.ob-day td { padding: 18px 18px 8px !important; background: var(--ob-surface); }
.ob-day span { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ob-font-display); font-size: .86rem; font-weight: 600; color: var(--ob-text); }
.ob-day span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--ob-bar-1), var(--ob-violet)); box-shadow: 0 0 0 4px rgba(var(--ob-primary-rgb), .1); }
.ob-sort { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.ob-sort .bi { font-size: .78rem; opacity: .3; transition: opacity .15s; }
.ob-sort:hover { color: var(--ob-text); }
.ob-sort:hover .bi { opacity: .75; }
.ob-sort.is-active { color: var(--ob-primary-text); }
.ob-sort.is-active .bi { opacity: 1; }

.ob-when { display: inline-flex; flex-direction: column; line-height: 1.2; }
.ob-when small { margin-top: 3px; font-size: .74rem; color: var(--ob-muted); white-space: nowrap; }
.ob-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.ob-date { font-weight: 600; white-space: nowrap; }
.ob-mono { display: inline-block; padding: 2px 7px; border-radius: 6px; font-family: var(--ob-font-mono); font-size: .8rem; color: var(--ob-text-2); background: var(--ob-surface-3); }
.ob-person { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.ob-place { display: inline-flex; align-items: center; gap: 6px; }
.ob-place .bi { color: var(--ob-muted); font-size: .85rem; }
.ob-note { font-size: .84rem; color: var(--ob-text-2); overflow-wrap: anywhere; }
.ob-hours { display: inline-flex; flex-direction: column; gap: 5px; min-width: 58px; }
.ob-hours b { font-weight: 700; }
.ob-hours i { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 4px; background: var(--ob-surface-3); }
.ob-hours i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 4px; background: linear-gradient(90deg, #4fd6a0, var(--ob-success)); }

.ob-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 52px 16px; text-align: center; color: var(--ob-muted); }
.ob-empty-icon { width: 66px; height: 66px; margin-bottom: 6px; display: grid; place-items: center; border-radius: 20px; font-size: 1.8rem; color: var(--ob-primary-text); background: var(--ob-surface-3); }
.ob-empty b { font-size: 1rem; color: var(--ob-text); }
.ob-empty .ob-chip { margin-top: 8px; }

.ob-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.ob-pager-info { font-size: .85rem; color: var(--ob-muted); }
.ob-pager-info b { color: var(--ob-text); font-variant-numeric: tabular-nums; }
.ob-pager-nav { display: flex; gap: 3px; }
.ob-pg { min-width: 34px; height: 34px; padding: 0 9px; display: inline-grid; place-items: center; border-radius: 10px; font-size: .85rem; font-weight: 500; text-decoration: none; color: var(--ob-text-2); font-variant-numeric: tabular-nums; transition: background-color .15s, color .15s; }
.ob-pg:hover { color: var(--ob-text); background: var(--ob-surface-3); }
.ob-pg.is-active { color: #fff; background: var(--ob-primary); box-shadow: 0 6px 14px -8px rgba(var(--ob-primary-rgb), .9); }
.ob-pg.is-off { opacity: .3; pointer-events: none; }

/* --------------------------------------------------------------------------
   AMMINISTRAZIONE
   -------------------------------------------------------------------------- */
.ob-list > * + * { border-top: 1px solid var(--ob-border); }
.ob-list-empty { padding: 28px 20px; text-align: center; color: var(--ob-muted); margin: 0; }
.ob-newform { padding: 18px 20px; background: var(--ob-surface-2); border-bottom: 1px solid var(--ob-border); }

.ob-user { padding: 18px 20px; }
.ob-user-who { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.ob-user-who .ob-names { margin-right: 4px; }
.ob-user-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ob-block { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--ob-surface-2); border: 1px solid var(--ob-border); }
.ob-block .ob-label { margin-bottom: 0; }
.ob-doc { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 11px; background: var(--ob-surface); border: 1px solid var(--ob-border); }
.ob-doc-name { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.ob-doc-name a { font-weight: 500; font-size: .86rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-doc-name small { font-size: .74rem; color: var(--ob-muted); }
.ob-pdf { font-size: 1.3rem; color: #e5484d; }

.ob-perm-intro .ob-card-head { border-bottom: 0; }
.ob-perm + .ob-perm { margin-top: 18px; }
.ob-perm-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ob-border); }
.ob-perm-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 20px 0; }
.ob-setting { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--ob-surface-2); border: 1px solid var(--ob-border); }
.ob-setting .ob-label { margin: 0; }
.ob-switch { display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0; padding-left: 2.8em; }
.ob-switch .form-check-input { width: 2.4em; height: 1.3em; margin-top: 0; cursor: pointer; }
.ob-switch .form-check-label { font-size: .86rem; font-weight: 500; cursor: pointer; }
.ob-perm-section { padding: 18px 20px; }
.ob-rules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ob-rule { --rule-bg: var(--ob-neutral-bg); --rule-fg: var(--ob-neutral); display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 4px 5px 4px 12px; border-radius: 999px; font-size: .82rem; font-weight: 500; color: var(--rule-fg); background: var(--rule-bg); }
.ob-rule-servizio { --rule-bg: rgba(var(--ob-primary-rgb), .11); --rule-fg: var(--ob-primary-text); }
.ob-rule-luogo { --rule-bg: rgba(109, 94, 252, .12); --rule-fg: #5a4bd8; }
[data-bs-theme=dark] .ob-rule-luogo { --rule-fg: #b2a8ff; }
.ob-rule-lavoratore { --rule-bg: var(--ob-success-bg); --rule-fg: var(--ob-success); }
.ob-rule-x { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: inherit; background: transparent; opacity: .6; transition: opacity .15s, background-color .15s; }
.ob-rule-x:hover { opacity: 1; background: rgba(0, 0, 0, .08); }
[data-bs-theme=dark] .ob-rule-x:hover { background: rgba(255, 255, 255, .1); }
.ob-addrule { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ob-label-servizio .bi { color: var(--ob-primary-text); }
.ob-label-luogo .bi { color: #6d5efc; }
.ob-label-lavoratore .bi { color: var(--ob-success); }
.ob-disclosure {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 20px; text-align: left;
    border: 0; border-top: 1px solid var(--ob-border); border-radius: 0 0 var(--ob-radius) var(--ob-radius);
    background: transparent; color: var(--ob-text-2); font-weight: 500; font-size: .9rem; transition: background-color .15s;
}
.ob-disclosure:hover { background: var(--ob-surface-2); }
.ob-disclosure .ob-muted { font-size: .8rem; font-weight: 400; }
.ob-disclosure .bi-chevron-down { margin-left: auto; transition: transform .2s; }
.ob-disclosure[aria-expanded=true] { border-radius: 0; }
.ob-disclosure[aria-expanded=true] .bi-chevron-down { transform: rotate(180deg); }
.ob-subcard { height: 100%; padding: 14px; border-radius: 14px; border: 1px solid var(--ob-border); }
.ob-subcard.is-current { border-color: rgba(var(--ob-primary-rgb), .45); box-shadow: 0 0 0 3px rgba(var(--ob-primary-rgb), .07); }
.ob-subcard-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ob-subcard-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ob-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-toggle {
    display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 6px 12px; border-radius: 999px; cursor: pointer; user-select: none;
    font-size: .82rem; font-weight: 500; color: var(--ob-text-2); border: 1px solid var(--ob-border-strong); transition: background-color .15s, border-color .15s, color .15s;
}
.ob-toggle::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ob-border-strong); transition: background-color .15s, border-color .15s, box-shadow .15s; }
.ob-toggle:hover { border-color: rgba(var(--ob-primary-rgb), .5); }
.btn-check:checked + .ob-toggle { color: var(--ob-primary-text); background: rgba(var(--ob-primary-rgb), .1); border-color: rgba(var(--ob-primary-rgb), .45); }
.btn-check:checked + .ob-toggle::before { background: var(--ob-primary); border-color: var(--ob-primary); box-shadow: inset 0 0 0 3px var(--ob-surface); }
.btn-check:focus-visible + .ob-toggle { outline: 2px solid var(--ob-primary); outline-offset: 1px; }

.ob-ipgroup { padding: 16px 20px; }
.ob-ipgroup-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.ob-ipgroup-head .ob-pill { margin-left: auto; }
.ob-iprow { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 0; }
.ob-ip { display: block; padding: 6px 10px; border-radius: 9px; text-align: center; font-family: var(--ob-font-mono); font-size: .84rem; color: var(--ob-text); background: var(--ob-surface-3); border: 1px solid var(--ob-border); }
.ob-ip-label { display: flex; align-items: center; gap: 6px; margin: 0; }
.ob-ip-label .form-control { border-color: transparent; background: transparent; }
.ob-ip-label .form-control:hover { border-color: var(--ob-border-strong); }
.ob-ip-label .form-control:focus { border-color: var(--ob-primary); background: var(--ob-surface); }
.ob-hint { margin: 8px 0 0; font-size: .8rem; color: var(--ob-muted); }
.ob-hint code { padding: 1px 6px; border-radius: 6px; font-size: .8rem; color: var(--ob-text); background: var(--ob-surface-3); }

.ob-alert { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 12px; font-size: .87rem; line-height: 1.45; }
.ob-alert > .bi { margin-top: 1px; }
.ob-alert-danger  { color: var(--ob-danger);  background: var(--ob-danger-bg); }
.ob-alert-warning { color: var(--ob-warning); background: var(--ob-warning-bg); }
.ob-alert-info    { color: var(--ob-info);    background: var(--ob-info-bg); }
.ob-warn { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 11px; font-size: .85rem; color: var(--ob-danger); background: var(--ob-danger-bg); }

/* Menu utente */
.ob-menu { --bs-dropdown-link-active-bg: var(--ob-primary); min-width: 300px; max-width: min(380px, calc(100vw - 32px)); padding: 8px; border-radius: 16px; border: 1px solid var(--ob-border); background: var(--ob-surface); box-shadow: var(--ob-shadow-lg); }
.ob-menu-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--ob-border); }
.ob-menu-who { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.3; }
.ob-menu-who > b { overflow-wrap: anywhere; }
.ob-menu-who > span:not(.ob-pill) { max-width: 100%; font-size: .82rem; color: var(--ob-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-menu .dropdown-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; font-size: .9rem; color: var(--ob-text); }
.ob-menu .dropdown-item:hover, .ob-menu .dropdown-item:focus { background: var(--ob-surface-3); color: var(--ob-text); }
.ob-menu .ob-menu-danger, .ob-menu .ob-menu-danger:hover { color: var(--ob-danger); }

/* Notifiche */
.ob-toasts { position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); }
.ob-toast { display: flex; align-items: flex-start; gap: 11px; padding: 13px 10px 13px 15px; border-radius: 14px; font-size: .9rem; color: var(--ob-text); background: var(--ob-surface); border: 1px solid var(--ob-border); box-shadow: var(--ob-shadow-lg); animation: ob-toast-in .4s cubic-bezier(.2, .8, .2, 1) both; }
.ob-toast > .bi { font-size: 1.15rem; line-height: 1.3; }
.ob-toast > span { flex: 1; padding-top: 1px; }
.ob-toast-success > .bi { color: var(--ob-success); }
.ob-toast-danger > .bi { color: var(--ob-danger); }
.ob-toast-danger { border-color: rgba(207, 42, 72, .35); }
.ob-toast-x { padding: 2px 6px; border: 0; border-radius: 8px; background: transparent; color: var(--ob-muted); }
.ob-toast-x:hover { background: var(--ob-surface-3); color: var(--ob-text); }
.ob-toast.is-hiding { animation: ob-toast-out .25s ease-in both; }
@keyframes ob-toast-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
@keyframes ob-toast-out { to { opacity: 0; transform: translateX(16px); } }

.ob-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-top: 26px; padding-bottom: 30px; font-size: .78rem; color: var(--ob-muted); }
.ob-footer .bi { margin-right: 6px; }
.ob-version { font-variant-numeric: tabular-nums; cursor: help; }

/* --------------------------------------------------------------------------
   LOGIN
   -------------------------------------------------------------------------- */
.ob-body-login { background: #020714; }
.ob-login {
    position: relative; isolation: isolate; overflow: hidden; flex: 1;
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px 24px;
    background:
        radial-gradient(900px 620px at 82% 8%, rgba(109, 94, 252, .36), transparent 62%),
        radial-gradient(820px 620px at 8% 96%, rgba(24, 132, 240, .42), transparent 60%),
        linear-gradient(160deg, #020714 0%, #06193d 58%, #0a3f80 100%);
}
.ob-space { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ob-login .ob-orbit { top: 50%; left: 50%; }
.ob-login .ob-orbit-1 { width: 560px; height: 560px; }
.ob-login .ob-orbit-2 { width: 880px; height: 880px; }
.ob-login .ob-orbit-3 { width: 1240px; height: 1240px; }
.ob-login-card {
    position: relative; width: 100%; max-width: 420px; padding: 40px 36px 30px; text-align: center;
    color: var(--ob-text); background: var(--ob-surface); border-radius: 26px;
    box-shadow: 0 50px 110px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);
    animation: ob-rise .6s cubic-bezier(.2, .8, .2, 1) both;
}
.ob-login-card::before { /* bordo luminoso */
    content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: 27px; pointer-events: none;
    background: linear-gradient(140deg, rgba(169, 214, 255, .9), rgba(109, 94, 252, .45) 40%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
@keyframes ob-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.ob-login-logo { width: 72px; height: 72px; margin-bottom: 16px; }
.ob-login-title { margin: 0; font-family: var(--ob-font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -.025em; }
.ob-login-sub { margin: 4px 0 26px; color: var(--ob-muted); }
.ob-login-card .ob-alert { margin-bottom: 18px; text-align: left; }
.ob-login-form { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.ob-field-label { display: block; margin-bottom: 6px; font-size: .82rem; font-weight: 600; color: var(--ob-text-2); }
.ob-input { position: relative; display: flex; align-items: center; }
.ob-input > .bi { position: absolute; left: 15px; color: var(--ob-muted); pointer-events: none; }
.ob-input input {
    width: 100%; height: 50px; padding: 0 48px 0 44px; border-radius: 13px; outline: none; font-size: .96rem;
    color: var(--ob-text); background: var(--ob-surface-2); border: 1px solid var(--ob-border-strong);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.ob-input input:focus { border-color: var(--ob-primary); background: var(--ob-surface); box-shadow: 0 0 0 4px rgba(var(--ob-primary-rgb), .16); }
.ob-eye { position: absolute; right: 7px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; color: var(--ob-muted); background: transparent; }
.ob-eye:hover { color: var(--ob-text); background: var(--ob-surface-3); }
/* campo trappola del login: fuori schermo (non display:none, che molti bot riconoscono) */
.ob-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ob-pow { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 2px 0 0; font-size: .8rem; color: var(--ob-muted); }
.ob-pow.is-ok { color: var(--ob-success); }
.ob-pow .bi { font-size: .95rem; }
.ob-caps { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; font-size: .8rem; font-weight: 500; color: var(--ob-warning); }
.ob-btn-login {
    height: 52px; margin-top: 6px; border: 0; border-radius: 14px; font-size: 1rem;
    background: linear-gradient(135deg, #1b7de6 0%, #0b5aa6 55%, #4b3fd8 100%);
    box-shadow: 0 14px 30px -12px rgba(11, 90, 166, .9);
}
.ob-btn-login:hover { filter: brightness(1.08); }
.ob-btn-login .bi { transition: transform .2s; }
.ob-btn-login:hover .bi { transform: translateX(3px); }
.ob-login-note { margin: 24px 0 0; font-size: .78rem; line-height: 1.6; color: var(--ob-muted); }
.ob-login-foot { margin: 26px 0 0; font-size: .78rem; color: rgba(255, 255, 255, .5); }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .ob-user-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ob-sticky { position: static; }
}
@media (max-width: 991.98px) {
    .ob-perm-settings, .ob-addrule { grid-template-columns: 1fr; }
    .ob-fld, .ob-fld-sm { flex: 1 1 45%; }
    .ob-fld-range { flex: 1 1 100%; }
    .ob-range input { flex: 1; width: auto; }
    .ob-filters-actions { flex: 1 1 100%; margin-left: 0; }
    .ob-filters-actions .btn { flex: 1; }
    .ob-active { padding-left: 0; border-left: 0; }
}
@media (max-width: 767.98px) {
    body.ob-body { font-size: 14.5px; }
    .ob-wrap { padding-left: 16px; padding-right: 16px; }
    .ob-hero { padding-bottom: 88px; }
    .ob-topbar { height: 64px; }
    .ob-hero-head { padding-top: 22px; }
    .ob-hero-sub { font-size: .9rem; }
    .ob-main { margin-top: -60px; }
    .ob-user-grid { grid-template-columns: 1fr; }
    .ob-fld, .ob-fld-sm { flex: 1 1 100%; }
    .ob-kpis-row .ob-kpi + .ob-kpi { border-left: 0; border-top: 1px dashed var(--ob-border); }
    .ob-chart { min-height: 120px; gap: 2px; }
    .ob-iprow { grid-template-columns: minmax(0, 1fr) auto; }
    .ob-iprow .ob-ip-label { grid-column: 1 / -1; order: 3; }
    .ob-search-sm { flex: 1 1 100%; width: 100%; }
    .ob-pager { justify-content: center; }
    .ob-toasts { top: auto; bottom: 16px; }

    /* tabella: ogni riga diventa una scheda "etichetta: valore" */
    .ob-table-wrap { max-height: none; overflow: visible; }
    .ob-table thead { display: none; }
    .ob-table, .ob-table tbody, .ob-table tr, .ob-table td { display: block; width: 100%; }
    .ob-table tbody tr:not(.ob-day):not(.ob-empty-row) { padding: 10px 16px; border-bottom: 1px solid var(--ob-border); }
    .ob-table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 5px 0; border: 0; text-align: right; }
    .ob-table tbody td::before { content: attr(data-label); flex-shrink: 0; font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ob-muted); text-align: left; }
    .ob-table tbody tr:not(.ob-day):not(.ob-empty-row):hover td { background: transparent; }
    .ob-day td, .ob-empty-row td { display: block; }
    .ob-day td::before, .ob-empty-row td::before { content: none; }
    .ob-day td { padding: 16px 16px 6px !important; border-bottom: 1px solid var(--ob-border); text-align: left; }
    .ob-when { align-items: flex-end; }
    .ob-login-card { padding: 32px 22px 24px; border-radius: 22px; }
}

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

@media print {
    .ob-hero, .ob-filters, .ob-bento, .ob-footer, .ob-toasts, .ob-card-tools, .ob-pager-nav, .ob-progress { display: none !important; }
    body.ob-body { background: #fff; }
    .ob-main { margin-top: 0; }
    .ob-card { box-shadow: none; border: 0; }
    .ob-table-wrap { max-height: none; overflow: visible; }
    .ob-table thead th { position: static; }
}