/* ============================================================
   NexusBadge v1.0.12 — App Shell CSS
   Layout: full-screen SPA con tab bar in basso
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

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

:root {
    --nxb-navy:     #1a2744;
    --nxb-navy2:    #1f3158;
    --nxb-surface:  #243a6a;
    --nxb-surface2: #2c4580;
    --nxb-border:   rgba(255,255,255,.18);
    --nxb-teal:     #00e8c0;
    --nxb-teal2:    #00c4a0;
    --nxb-red:      #ff4757;
    --nxb-amber:    #ffc107;
    --nxb-blue:     #5dbbff;
    --nxb-text:     #ffffff;
    --nxb-muted:    rgba(255,255,255,.75);
    --nxb-radius:   18px;
    --nxb-radius-s: 12px;
    --tab-h:        62px;
    --safe-t:       env(safe-area-inset-top, 0px);
    --safe-b:       env(safe-area-inset-bottom, 0px);
    --admin-top:    0px;
}

/* ---- APP SHELL ---- */
.nxb-app {
    position: fixed;
    left: 0; right: 0;
    top: var(--admin-top);
    bottom: 0;
    background: var(--nxb-navy);
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--nxb-text);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9990;
}

/* ---- SCHERMATE ---- */
.nxb-views {
    flex: 1;
    position: relative;
    overflow: hidden;
}
.nxb-view {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    pointer-events: none;
    transform: translateX(28px);
    transition: opacity .22s ease, transform .22s ease;
    padding-bottom: calc(var(--tab-h) + var(--safe-b) + 12px);
}
.nxb-view.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
.nxb-view.slide-left {
    transform: translateX(-28px);
    opacity: 0;
    pointer-events: none;
}

/* ---- TAB BAR ---- */
.nxb-tabbar {
    flex-shrink: 0;
    background: #111e30;
    border-top: 1px solid rgba(255,255,255,.16);
    display: flex;
    height: calc(var(--tab-h) + var(--safe-b));
    padding-bottom: var(--safe-b);
    z-index: 100;
}
.nxb-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.5);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    cursor: pointer;
    transition: color .18s;
    -webkit-tap-highlight-color: transparent;
    padding-top: 2px;
}
.nxb-tab.active { color: #00e0b8; }

/* ---- VIEW 1: TIMBRA ---- */
.nxb-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(16px + var(--safe-t)) 20px 10px;
}
.nxb-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
}
.nxb-logo-mark {
    width: 28px; height: 28px;
    background: var(--nxb-teal);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.nxb-logout {
    font-size: 12px;
    color: var(--nxb-muted);
    text-decoration: none;
    padding: 5px 12px;
    border: 1px solid var(--nxb-border);
    border-radius: 20px;
}

.nxb-hero { padding: 4px 20px 10px; position: relative; }
.nxb-hero::after {
    content: '';
    position: absolute;
    top: -40px; right: -20px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(0,201,167,.1) 0%, transparent 70%);
    pointer-events: none;
}
.nxb-greeting { font-size: 11px; color: var(--nxb-muted); margin-bottom: 1px; }
.nxb-azienda  { font-size: 13px; font-weight: 600; color: var(--nxb-text); margin-bottom: 4px; }
.nxb-name     { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.nxb-clock-row { display: flex; align-items: flex-end; justify-content: space-between; }
.nxb-clock {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 38px;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1;
    color: #fff;
}
.nxb-date-col { text-align: right; font-size: 11px; color: var(--nxb-muted); line-height: 1.5; }

/* Stato pill */
.nxb-stato-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 20px 10px;
    background: var(--nxb-surface2);
    border-radius: 12px;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.18);
}
.nxb-stato-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.nxb-stato-dot.pulse { animation: nxb-pulse 2s ease-in-out infinite; }
@keyframes nxb-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.nxb-stato-label { font-size: 14px; font-weight: 600; }
.nxb-stato-time  { font-size: 12px; color: var(--nxb-muted); margin-left: auto; font-family: 'IBM Plex Mono', monospace; }

.stato-entrata .nxb-stato-dot  { background: #00e0b8; box-shadow: 0 0 10px #00e0b8; }
.stato-entrata .nxb-stato-label { color: #00e0b8; }
.stato-pausa   .nxb-stato-dot  { background: #ffb020; box-shadow: 0 0 10px #ffb020; }
.stato-pausa   .nxb-stato-label { color: #ffb020; }
.stato-uscita  .nxb-stato-dot  { background: #ff3f50; box-shadow: 0 0 6px #ff3f50; }
.stato-uscita  .nxb-stato-label { color: #ff3f50; }
.stato-assente .nxb-stato-dot  { background: rgba(255,255,255,.4); }
.stato-assente .nxb-stato-label { color: rgba(255,255,255,.65); }

.nxb-gps {
    margin: 0 20px 10px;
    font-size: 11px;
    color: var(--nxb-muted);
}
.nxb-gps.ok  { color: var(--nxb-teal); }
.nxb-gps.err { color: var(--nxb-amber); }

.nxb-msg {
    margin: 0 20px 10px;
    padding: 11px 14px;
    border-radius: var(--nxb-radius-s);
    font-size: 13px;
    font-weight: 600;
    display: none;
    text-align: center;
    background: rgba(0,201,167,.1);
    color: var(--nxb-teal);
    border: 1px solid rgba(0,201,167,.2);
}
.nxb-msg.error { background: rgba(240,79,92,.1); color: var(--nxb-red); border-color: rgba(240,79,92,.2); }

/* PULSANTI */
.nxb-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    padding: 0 20px;
}
.nxb-btn {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 16px 10px 14px;
    border: none;
    border-radius: var(--nxb-radius);
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    transition: transform .12s, opacity .15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.nxb-btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background .12s; border-radius:inherit; }
.nxb-btn:active::after { background: rgba(255,255,255,.18); }
.nxb-btn:active        { transform: scale(.95); }
.nxb-btn:disabled      { opacity:1; cursor:not-allowed; transform:none!important; background: #2c3a5a !important; color: rgba(255,255,255,.45) !important; box-shadow:none !important; }
.nxb-btn:disabled .nxb-btn-ico { background: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.3) !important; }

.nxb-btn-ico {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    background: rgba(255,255,255,.18);
}

.nxb-btn-entrata  { background:linear-gradient(145deg,#00e8c0,#00b896); color:#0a1520; box-shadow:0 6px 24px rgba(0,224,184,.55); }
.nxb-btn-uscita   { background:linear-gradient(145deg,#ff4f5e,#e02030); color:#fff;    box-shadow:0 6px 24px rgba(255,63,80,.55); }
.nxb-btn-pausa-in { background:linear-gradient(145deg,#ffbe30,#e8980a); color:#1a0f00; box-shadow:0 6px 24px rgba(255,176,32,.5); }
.nxb-btn-pausa-in .nxb-btn-ico { background:rgba(0,0,0,.15); }
.nxb-btn-pausa-out{ background:linear-gradient(145deg,#5ab4ff,#1e82e8); color:#fff;    box-shadow:0 6px 24px rgba(77,166,255,.55); }
.nxb-btn-richiesta-personale {
    background:linear-gradient(145deg,#3a8ef6,#1a60d0);
    color:#fff; box-shadow:0 6px 24px rgba(58,142,246,.5);
}
.nxb-btn-uscita-auth {
    background:linear-gradient(145deg,#ff9a3c,#e07010);
    color:#fff; box-shadow:0 6px 24px rgba(255,154,60,.5);
}
.nxb-btn-richiesta-personale:disabled,
.nxb-btn-uscita-auth:disabled { opacity:1; background:#2c3a5a !important; color:rgba(255,255,255,.45) !important; box-shadow:none !important; cursor:not-allowed; }
.nxb-btn-richiesta-personale:disabled .nxb-btn-ico,
.nxb-btn-uscita-auth:disabled .nxb-btn-ico { background:rgba(255,255,255,.1) !important; color:rgba(255,255,255,.3) !important; }
.stato-autorizzata { background:rgba(255,154,60,.15); color:#ff9a3c; }

.nxb-spin { display:inline-block; width:18px; height:18px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:nxb-spin .65s linear infinite; }
.nxb-btn-pausa-in .nxb-spin { border-top-color:#333; }
@keyframes nxb-spin { to { transform: rotate(360deg); } }

/* ---- VIEW 2: STATO ---- */
.nxb-stato-view-header {
    padding: calc(16px + var(--safe-t)) 20px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nxb-stato-view-title { font-size: 18px; font-weight: 700; }

.nxb-toggle {
    display: flex;
    background: var(--nxb-surface);
    border-radius: 20px;
    padding: 3px;
}
.nxb-toggle-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 17px;
    background: transparent;
    color: var(--nxb-muted);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, color .18s;
    -webkit-tap-highlight-color: transparent;
}
.nxb-toggle-btn.active { background: var(--nxb-teal); color: #0f1f36; }

.nxb-nav-sett {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-bottom: 12px;
}
.nxb-nav-btn {
    width: 32px; height: 32px;
    border: 1px solid var(--nxb-border);
    border-radius: 50%;
    background: var(--nxb-surface);
    color: var(--nxb-text);
    font-size: 17px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.nxb-nav-btn:disabled { opacity:.3; cursor:not-allowed; }
.nxb-nav-periodo { font-size: 13px; font-weight: 600; }

.nxb-numeri {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 20px;
    margin-bottom: 14px;
}
.nxb-num-box {
    background: var(--nxb-surface);
    border-radius: var(--nxb-radius-s);
    padding: 14px 16px;
    text-align: center;
    border: 1px solid var(--nxb-border);
}
.nxb-num-val { font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:500; color:#fff; line-height:1; margin-bottom:4px; }
.nxb-num-val.teal  { color: var(--nxb-teal); }
.nxb-num-val.amber { color: var(--nxb-amber); }
.nxb-num-lbl { font-size:10px; color:var(--nxb-muted); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }

.nxb-giorni-list { display:flex; flex-direction:column; gap:6px; padding:0 20px; margin-bottom:14px; }

.nxb-giorno-row {
    display: flex;
    align-items: center;
    background: var(--nxb-surface);
    border-radius: var(--nxb-radius-s);
    padding: 10px 14px;
    border: 1px solid var(--nxb-border);
    gap: 12px;
    min-height: 58px;
}
.nxb-giorno-row.oggi   { border-color:rgba(0,201,167,.3); background:rgba(0,201,167,.06); }
.nxb-giorno-row.assente .dom { color: var(--nxb-muted); }

.nxb-giorno-day { width:32px; text-align:center; flex-shrink:0; }
.nxb-giorno-day .dow { font-size:9px; color:var(--nxb-muted); text-transform:uppercase; font-weight:700; letter-spacing:.5px; }
.nxb-giorno-day .dom { font-size:16px; font-weight:700; line-height:1.2; }

.nxb-giorno-mid { flex:1; min-width:0; }
.nxb-giorno-orari { font-size:11px; color:var(--nxb-muted); margin-bottom:5px; display:flex; gap:8px; flex-wrap:wrap; }
.nxb-bar { height:3px; background:rgba(255,255,255,.07); border-radius:2px; overflow:hidden; }
.nxb-bar-fill { height:100%; border-radius:2px; background:var(--nxb-teal); transition:width .5s ease; }
.nxb-bar-fill.straord { background:var(--nxb-amber); }

.nxb-giorno-ore { text-align:right; flex-shrink:0; }
.nxb-giorno-ore .ore-val { font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:500; display:block; }
.nxb-giorno-ore .str-val  { font-size:10px; color:var(--nxb-amber); font-weight:700; display:block; margin-top:2px; }
.nxb-giorno-ore .perm-val { font-size:10px; color:#7986cb; font-weight:700; display:block; margin-top:2px; }

.nxb-anom-icon { font-size:11px; }

.nxb-export-row { display:flex; gap:10px; padding:0 20px; margin-bottom:8px; }
.nxb-export-btn {
    flex:1; display:block; text-align:center;
    padding:13px; border-radius:var(--nxb-radius-s);
    font-size:13px; font-weight:700; text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}
.nxb-export-btn:active { opacity:.75; }
.nxb-export-btn.csv { background:rgba(0,201,167,.1); color:var(--nxb-teal); border:1px solid rgba(0,201,167,.22); }
.nxb-export-btn.pdf { background:rgba(240,79,92,.1); color:var(--nxb-red); border:1px solid rgba(240,79,92,.22); }

/* ---- LOGIN ---- */
.nxb-login-app {
    position: fixed;
    inset: 0;
    background: var(--nxb-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    z-index: 9990;
}


.nxb-login-card {
    background: var(--nxb-surface);
    border-radius: 24px;
    padding: 40px 28px;
    width: 100%; max-width: 360px;
    border: 1px solid var(--nxb-border);
    box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.nxb-login-logo { text-align:center; margin-bottom:28px; }
.nxb-login-logo .mark {
    width:56px; height:56px;
    background:linear-gradient(135deg,var(--nxb-teal),var(--nxb-teal2));
    border-radius:16px; display:inline-flex; align-items:center; justify-content:center;
    font-size:26px; margin-bottom:12px; box-shadow:0 8px 24px rgba(0,201,167,.35);
}
.nxb-login-logo h2 { font-size:21px; font-weight:800; color:#fff; margin-bottom:3px; }
.nxb-login-logo p  { font-size:13px; color:var(--nxb-muted); }

.nxb-login-field { margin-bottom:14px; }
.nxb-login-field label { display:block; font-size:11px; font-weight:700; color:var(--nxb-muted); margin-bottom:7px; letter-spacing:.6px; text-transform:uppercase; }
.nxb-login-field input {
    width:100%; background:var(--nxb-navy);
    border:1.5px solid var(--nxb-border); border-radius:12px;
    padding:14px 16px; font-family:'Plus Jakarta Sans',sans-serif;
    font-size:16px; color:var(--nxb-text); transition:border-color .2s;
    -webkit-appearance:none; appearance:none;
}
.nxb-login-field input:focus { outline:none; border-color:var(--nxb-teal); }
.nxb-login-field input::placeholder { color:rgba(232,240,254,.2); }

.nxb-login-btn {
    width:100%;
    background:linear-gradient(135deg,var(--nxb-teal),var(--nxb-teal2));
    color:var(--nxb-navy); border:none; border-radius:12px;
    padding:16px; font-family:'Plus Jakarta Sans',sans-serif;
    font-size:15px; font-weight:800; cursor:pointer;
    margin-top:8px; letter-spacing:.3px;
    box-shadow:0 6px 20px rgba(0,201,167,.35);
    -webkit-tap-highlight-color:transparent;
}
.nxb-login-btn:active { opacity:.9; transform:scale(.98); }

.nxb-login-error {
    background:rgba(240,79,92,.1); border:1px solid rgba(240,79,92,.22);
    color:var(--nxb-red); border-radius:10px; padding:12px 14px;
    font-size:13px; font-weight:600; margin-bottom:14px; text-align:center;
}

/* ---- FONT AWESOME ICONS ---- */
.nxb-btn-ico i {
    font-size: 20px;
    line-height: 1;
}
.nxb-logo-mark i {
    font-size: 15px;
    color: #0f1f36;
}
.nxb-assenza-ico {
    font-size: 20px;
    display: block;
    color: var(--nxb-teal);
}
.nxb-assenza-btn:has(.nxb-assenza-ico i.fa-umbrella-beach) .nxb-assenza-ico { color: #3a8ef6; }
.nxb-assenza-btn:has(.nxb-assenza-ico i.fa-calendar-check)  .nxb-assenza-ico { color: var(--nxb-teal); }
.nxb-assenza-btn:has(.nxb-assenza-ico i.fa-heart-pulse)     .nxb-assenza-ico { color: #a78bfa; }
.nxb-assenza-btn:has(.nxb-assenza-ico i.fa-kit-medical)     .nxb-assenza-ico { color: var(--nxb-red); }
.nxb-assenza-btn:has(.nxb-assenza-ico i.fa-handshake)       .nxb-assenza-ico { color: var(--nxb-amber); }
.nxb-assenza-btn:has(.nxb-assenza-ico i.fa-file-lines)      .nxb-assenza-ico { color: var(--nxb-muted); }

/* Fix font references */
.nxb-app, .nxb-login-card, .nxb-btn, .nxb-tab, .nxb-toggle-btn,
.nxb-login-btn, .nxb-login-field input {
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.nxb-clock, .nxb-num-val, .nxb-giorno-ore .ore-val {
    font-family: 'IBM Plex Mono', monospace;
}

.nxb-login-logo .mark i { font-size: 26px; color: #0f1f36; }
.nxb-login-btn i { margin-left: 6px; }
.nxb-gps i { font-size: 11px; }

/* ---- SEDE / SMART WORKING SELECTOR ---- */
.nxb-sede-selector {
    padding: 0 20px 14px;
    position: relative;
}

/* Pulsante singolo sede corrente */
.nxb-sede-current {
    display: flex;
}
.nxb-sede-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: var(--nxb-surface);
    border: 1.5px solid var(--nxb-border);
    border-radius: 20px;
    color: var(--nxb-muted);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.nxb-sede-tab i { font-size: 13px; }
.nxb-sede-tab.active {
    border-color: var(--nxb-teal);
    color: var(--nxb-teal);
    background: rgba(0,201,167,.08);
}
.nxb-sede-tab.sw-active {
    border-color: var(--nxb-blue);
    color: var(--nxb-blue);
    background: rgba(58,142,246,.08);
}

/* Dropdown sedi */
.nxb-sede-dropdown {
    position: absolute;
    top: calc(100% - 8px);
    left: 20px;
    background: var(--nxb-surface);
    border: 1.5px solid var(--nxb-border);
    border-radius: 14px;
    padding: 6px;
    z-index: 200;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nxb-sede-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--nxb-muted);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.nxb-sede-option:hover {
    background: rgba(255,255,255,.06);
    color: var(--nxb-text);
}
.nxb-sede-option.selected {
    color: var(--nxb-teal);
    background: rgba(0,201,167,.08);
}
.nxb-sw-option.selected {
    color: var(--nxb-blue);
    background: rgba(58,142,246,.08);
}

/* ---- PULSANTE MODIFICA TIMBRATURA (admin) ---- */
.nxb-edit-timb-btn {
    flex-shrink: 0;
    width: 30px; height: 30px;
    background: rgba(0,201,167,.1);
    border: 1px solid rgba(0,201,167,.2);
    border-radius: 8px;
    color: var(--nxb-teal);
    font-size: 13px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
}
.nxb-edit-timb-btn:active { background: rgba(0,201,167,.25); }

/* ---- ITEM LISTA TIMBRATURE NEL MODAL ---- */
.nxb-modal-timb-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--nxb-navy2);
    border: 1px solid var(--nxb-border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .15s;
    -webkit-tap-highlight-color: transparent;
}
.nxb-modal-timb-item:active { border-color: var(--nxb-teal); }
.nxb-modal-timb-item .tipo-label { font-size: 13px; font-weight: 600; color: var(--nxb-text); }
.nxb-modal-timb-item .ora-label  { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--nxb-teal); }
.nxb-modal-timb-item .auto-badge { font-size: 10px; color: var(--nxb-amber); margin-left: 6px; }

/* ---- RICHIESTE / APPROVAZIONI ---- */
.nxb-btn-nuova-rich {
    padding: 8px 16px;
    background: var(--nxb-teal);
    color: #0f1f36;
    border: none;
    border-radius: 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nxb-back-btn {
    background: var(--nxb-surface);
    border: 1px solid var(--nxb-border);
    border-radius: 50%;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    color: var(--nxb-text);
    cursor: pointer;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
}

/* Tipo richiesta buttons */
.nxb-tipo-rich-btn {
    padding: 14px 10px;
    background: var(--nxb-surface);
    border: 1.5px solid var(--nxb-border);
    border-radius: 12px;
    color: var(--nxb-text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: border-color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.nxb-tipo-rich-btn i { font-size: 22px; color: var(--nxb-teal); }
.nxb-tipo-rich-btn:active { border-color: var(--nxb-teal); background: rgba(0,201,167,.08); }

/* Form fields */
.nxb-form-field { margin-bottom: 14px; }
.nxb-form-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--nxb-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 7px;
}
.nxb-form-field input[type="date"],
.nxb-form-field input[type="time"],
.nxb-form-field select {
    width: 100%;
    background: var(--nxb-navy);
    border: 1.5px solid var(--nxb-border);
    border-radius: 12px;
    padding: 13px 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    color: var(--nxb-text);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.nxb-form-field input[type="date"]:focus,
.nxb-form-field input[type="time"]:focus,
.nxb-form-field select:focus {
    outline: none;
    border-color: var(--nxb-teal);
}
.nxb-form-field select option {
    background: var(--nxb-surface);
    color: var(--nxb-text);
}
.nxb-form-field textarea {
    width: 100%;
    background: var(--nxb-navy);
    border: 1.5px solid var(--nxb-border);
    border-radius: 12px;
    padding: 13px 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    color: var(--nxb-text);
    box-sizing: border-box;
    resize: none;
}
.nxb-form-field textarea:focus { outline: none; border-color: var(--nxb-teal); }
.nxb-form-field textarea::placeholder { color: rgba(232,240,254,.2); }

.nxb-btn-invia-rich {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--nxb-teal), var(--nxb-teal2));
    color: #0f1f36;
    border: none;
    border-radius: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nxb-btn-invia-rich:active { opacity: .9; }
.nxb-btn-invia-rich:disabled { opacity: .5; cursor: not-allowed; }

/* Badge contatore tab */
.nxb-badge-count {
    position: absolute;
    top: 6px; right: 8px;
    background: var(--nxb-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 10px;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
}
.nxb-tab { position: relative; }

/* Card richiesta */
.nxb-richiesta-card {
    background: var(--nxb-surface);
    border: 1px solid var(--nxb-border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.nxb-rich-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.nxb-rich-tipo { font-size: 14px; font-weight: 700; color: var(--nxb-text); }
.nxb-rich-stato {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.stato-inviata   { background: rgba(245,166,35,.15); color: var(--nxb-amber); }
.stato-ricevuta  { background: rgba(58,142,246,.15); color: #3a8ef6; }
.stato-in_attesa { background: rgba(245,166,35,.15); color: var(--nxb-amber); }
.stato-approvata  { background: rgba(0,201,167,.15); color: var(--nxb-teal); }
.stato-rifiutata  { background: rgba(240,79,92,.15); color: var(--nxb-red); }

.nxb-rich-date { font-size: 12px; color: var(--nxb-muted); margin-bottom: 6px; }
.nxb-rich-note { font-size: 12px; color: var(--nxb-muted); font-style: italic; }
.nxb-rich-nome { font-size: 12px; color: var(--nxb-teal); font-weight: 600; margin-bottom: 4px; }

/* Bottoni approvazione */
.nxb-approva-btns { display: flex; gap: 8px; margin-top: 12px; }
.nxb-btn-approva {
    flex: 1; padding: 10px;
    background: rgba(0,201,167,.12);
    color: var(--nxb-teal);
    border: 1px solid rgba(0,201,167,.25);
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nxb-btn-rifiuta {
    flex: 1; padding: 10px;
    background: rgba(240,79,92,.12);
    color: var(--nxb-red);
    border: 1px solid rgba(240,79,92,.25);
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ---- TIMBRA VIEW — fissa, no scroll ---- */
#nxb-view-timbra {
    overflow: hidden;
}
/* Header topbar compatto */
.nxb-topbar {
    padding: calc(10px + var(--safe-t)) 20px 6px;
}
.nxb-tab svg {
    width: 22px; height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s;
}
.nxb-tab.active svg { transform: translateY(-1px); }
.nxb-tab-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #00e0b8;
    opacity: 0;
    transition: opacity .18s;
}
.nxb-tab.active .nxb-tab-dot { opacity: 1; }

/* ---- BOTTONE ASSENZA più visibile ---- */
#nxb-assenza-toggle {
    background: var(--nxb-surface2) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    color: rgba(255,255,255,.8) !important;
}

/* ---- SEDE SELECTOR più visibile ---- */
.nxb-sede-tab {
    background: var(--nxb-surface2);
    border: 1.5px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.75);
}
.nxb-sede-tab.active {
    border-color: #00e0b8;
    color: #00e0b8;
    background: rgba(0,224,184,.12);
}
.nxb-sede-tab.sw-active {
    border-color: #5ab4ff;
    color: #5ab4ff;
    background: rgba(90,180,255,.12);
}
.nxb-sede-dropdown {
    background: var(--nxb-surface2);
    border-color: rgba(255,255,255,.15);
}
.nxb-sede-option {
    color: rgba(255,255,255,.65);
}
.nxb-sede-option:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}
.nxb-sede-option.selected {
    color: #00e0b8;
    background: rgba(0,224,184,.10);
}
.nxb-sw-option.selected {
    color: #5ab4ff;
    background: rgba(90,180,255,.10);
}

/* ---- GPS più leggibile ---- */
.nxb-gps { color: rgba(255,255,255,.55); }
.nxb-gps.ok  { color: #00e0b8; }
.nxb-gps.err { color: #ffb020; }

/* ---- NUM BOXES stato ---- */
.nxb-num-box {
    background: var(--nxb-surface2);
    border: 1px solid rgba(255,255,255,.16);
}
.nxb-num-val { color: #fff; }
.nxb-num-val.teal  { color: #00e0b8; }
.nxb-num-val.amber { color: #ffb020; }

/* ---- GIORNI LIST ---- */
.nxb-giorno-row {
    background: var(--nxb-surface2);
    border: 1px solid rgba(255,255,255,.12);
}
.nxb-giorno-row.oggi { border-color: rgba(0,224,184,.4); background: rgba(0,224,184,.08); }

/* ---- CARD ASSENZE — altezza uniforme ---- */
.nxb-assenza-card {
    height: 100px;
    background: var(--nxb-surface);
    border: 1.5px solid rgba(255,255,255,.14);
    border-radius: 14px;
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s, background .15s;
}
.nxb-assenza-card:active {
    background: var(--nxb-surface2);
}
.nxb-assenza-card-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    color: #ffffff !important;
}
.nxb-assenza-card-ico i {
    color: #ffffff !important;
}
.nxb-fa-ico {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.nxb-assenza-card-label {
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    color: #fff;
}

/* ================================================================
   ONBOARDING / PWA INSTALL
================================================================ */
.nxb-onboard {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 40px 24px 32px;
    background: var(--nxb-bg);
    box-sizing: border-box;
}
.nxb-onboard-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
}
.nxb-onboard-icon {
    width: 72px; height: 72px;
    background: var(--nxb-teal);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; color: var(--nxb-navy);
}
.nxb-onboard-app-name {
    font-size: 20px; font-weight: 700; color: var(--nxb-text);
}
.nxb-onboard-tagline {
    font-size: 13px; color: var(--nxb-muted); text-align: center;
}
.nxb-ob-desc {
    font-size: 14px; color: var(--nxb-muted); text-align: center;
    line-height: 1.6; margin-bottom: 28px; max-width: 320px;
}
.nxb-ob-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; max-width: 320px;
    background: var(--nxb-teal); color: var(--nxb-navy);
    border: none; border-radius: 14px;
    padding: 16px 24px; font-size: 16px; font-weight: 700;
    cursor: pointer; margin: 0 auto 16px;
}
.nxb-ob-skip {
    font-size: 13px; color: var(--nxb-muted); text-align: center;
    cursor: pointer; text-decoration: underline; margin-top: 8px;
}
/* Steps iOS */
.nxb-ob-steps { width: 100%; max-width: 340px; }
.nxb-ob-step {
    display: none;
    align-items: flex-start;
    gap: 14px;
    background: var(--nxb-surface);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
}
.nxb-ob-step.active { display: flex; }
.nxb-ob-step-num {
    width: 32px; height: 32px; min-width: 32px;
    background: var(--nxb-teal); color: var(--nxb-navy);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800;
}
.nxb-ob-step-body { flex: 1; }
.nxb-ob-step-title { font-size: 15px; font-weight: 700; color: var(--nxb-text); margin-bottom: 4px; }
.nxb-ob-step-hint  { font-size: 12px; color: var(--nxb-muted); margin-bottom: 14px; }
.nxb-ob-step-anim  { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* Browser bar simulata */
.nxb-ob-browser-bar {
    width: 100%; background: #1c2a45; border-radius: 10px;
    padding: 10px 12px; display: flex; align-items: center; gap: 10px;
}
.nxb-ob-url-bar { flex: 1; height: 8px; background: rgba(255,255,255,.15); border-radius: 4px; }
.nxb-ob-share-btn { color: #00c9a7; display: flex; align-items: center; justify-content: center; }
.nxb-ob-arrow { font-size: 22px; color: var(--nxb-teal); }
/* Menu item simulato */
.nxb-ob-menu-item {
    width: 100%; background: #1c2a45; border-radius: 10px;
    padding: 12px 16px; display: flex; align-items: center; gap: 12px;
    color: #fff; font-size: 13px;
}
.nxb-ob-menu-icon { color: #00c9a7; }
/* Dialog simulato */
.nxb-ob-dialog {
    width: 100%; background: #1c2a45; border-radius: 12px; overflow: hidden;
}
.nxb-ob-dialog-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.nxb-ob-dialog-icon {
    display: flex; flex-direction: column; align-items: center;
    padding: 16px; gap: 8px; color: #fff;
}
.nxb-ob-app-icon {
    width: 56px; height: 56px; background: var(--nxb-teal);
    border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--nxb-navy);
}
/* Navigazione step */
.nxb-ob-step-nav {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; max-width: 340px; margin-bottom: 16px;
}
.nxb-ob-nav-btn {
    background: none; border: 1px solid var(--nxb-border);
    border-radius: 20px; padding: 8px 16px; font-size: 13px;
    color: var(--nxb-muted); cursor: pointer;
}
.nxb-ob-nav-btn.nxb-ob-btn-done {
    background: var(--nxb-teal); color: var(--nxb-navy);
    border-color: var(--nxb-teal); font-weight: 700;
}
.nxb-ob-dots { display: flex; gap: 6px; align-items: center; }
.nxb-ob-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--nxb-border); transition: background .2s;
}
.nxb-ob-dot.active { background: var(--nxb-teal); width: 20px; border-radius: 4px; }
/* Animazioni */
@keyframes nxb-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.92)} }
@keyframes nxb-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
.nxb-pulse  { animation: nxb-pulse  1.4s ease-in-out infinite; }
.nxb-bounce { animation: nxb-bounce 1s ease-in-out infinite; }