/* ==========================================================
   CHERRYAPP PRO - PREMIUM "DARK TEAL & GOLD" DESIGN (V3)
   ========================================================== */

:root { 
    --c-gold: #e9c101;
    --c-bg-app: #161c1d;
    --c-surface: rgba(29, 34, 34, 0.6); 
    --c-border: #394040;
    --c-muted-dark: #4f5457;
    --c-muted-light: #697476;
    --c-text-alt: #879293;
    
    --primary: var(--c-gold);      
    --bg-app: var(--c-bg-app);       
    --surface: var(--c-surface);      
    --border-color: var(--c-border);
    
    --text-main: #ffffff; 
    --text-sec: var(--c-text-alt);
    --text-muted: var(--c-muted-light);
    
    --danger: #ef4444;        
    --success: #22c55e;      
    --warning: #ffc900;

    --glass-blur: blur(24px);
    --glow-primary: 0 0 15px rgba(233, 193, 1, 0.3);
    --shadow-premium: 0 20px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
    --border-top-glow: 1px solid rgba(233, 193, 1, 0.3); 
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    /* Fondo uniforme senza alone dorato in alto (prima c'era un radial-gradient
       con rgba(233,193,1,0.04) che riduceva il contrasto del testo bianco). */
    background: linear-gradient(180deg, var(--bg-app) 0%, #0e1314 100%);
    background-attachment: fixed;
    color: var(--text-main); 
    margin: 0; padding: 0; 
    overflow-x: hidden; -webkit-tap-highlight-color: transparent; 
}

::-webkit-scrollbar { height: 4px; width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 10px; }

/* =========================================================
   LOGIN SCREEN E SETUP ONBOARDING
   ========================================================= */
.login-wrapper { min-height: calc(100vh - 70px); width: 100vw; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; overflow: hidden; box-sizing: border-box; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border-color); border-top: var(--border-top-glow); border-radius: 32px; padding: 40px 30px; box-shadow: var(--shadow-premium); text-align: center; animation: fadeUpIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.login-icon { font-size: 70px; color: var(--primary); filter: drop-shadow(var(--glow-primary)); margin-bottom: 10px; }
.login-logo { width: auto; height: 130px; max-width: 80%; display: block; margin: 0 auto 20px; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.4)); }
.login-title { color: var(--text-main); font-weight: 900; font-size: 30px; letter-spacing: -0.5px; margin: 0 0 5px 0; text-transform: uppercase; }
.login-subtitle { color: var(--text-sec); font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 35px; }

.login-input-group { position: relative; margin-bottom: 20px; width: 100%; }
.login-input-group i.icon-left { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 22px; transition: 0.3s; z-index: 2; }
.login-input-group i.toggle-pass { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--text-muted); cursor: pointer; font-size: 22px; transition: 0.2s; }
.login-input-group i.toggle-pass:hover { color: var(--text-main); }

.login-input { width: 100%; padding: 20px 20px 20px 56px; background: rgba(22, 28, 29, 0.7); border: 1px solid var(--border-color); border-radius: 16px; color: var(--text-main); font-size: 15px; font-weight: 600; outline: none; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); }
.login-input::placeholder { color: var(--text-muted); opacity: 0.7; }
.login-input:focus { border-color: var(--primary); background: rgba(0,0,0,0.6); box-shadow: 0 0 0 4px rgba(233, 193, 1, 0.15), inset 0 2px 5px rgba(0,0,0,0.5); }
.login-input:focus + i.icon-left { color: var(--primary); filter: drop-shadow(var(--glow-primary)); }

.btn-login-premium { width: 100%; padding: 20px; background: linear-gradient(135deg, var(--primary) 0%, #b89800 100%); color: #000; border: none; border-radius: 16px; font-size: 15px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; margin-top: 5px; box-shadow: 0 10px 25px rgba(233, 193, 1, 0.4), inset 0 2px 0 rgba(255,255,255,0.3); transition: 0.3s; display: flex; justify-content: center; align-items: center; gap: 8px; }
.btn-login-premium:active { transform: translateY(3px); box-shadow: 0 5px 10px rgba(233, 193, 1, 0.2); }
.copyright-text { position: absolute; bottom: 25px; left: 0; width: 100%; text-align: center; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }

/* FIX SCROLL MOBILE SETUP: flex-direction column e margin auto evitano il taglio in alto */
.setup-container { display: flex; flex-direction: column; min-height: 100vh; padding: 40px 20px; box-sizing: border-box; }
.setup-card { width: 100%; max-width: 450px; margin: auto; background: var(--surface); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border-color); border-top: 1px solid rgba(233,193,1,0.3); border-radius: 32px; padding: 40px 25px; box-shadow: 0 20px 40px rgba(0,0,0,0.6); text-align: center; }

.setup-icon { font-size: 60px; color: var(--primary); filter: drop-shadow(var(--glow-primary)); margin-bottom: 15px; }
.setup-title { color: var(--text-main); font-weight: 900; font-size: 24px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.setup-desc { color: var(--text-sec); font-size: 13px; line-height: 1.5; margin-bottom: 30px; padding: 0 10px; }

.security-block { background: rgba(0, 0, 0, 0.4); border: 1px solid var(--border-color); border-radius: 20px; padding: 20px; margin: 25px 0; text-align: left; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); }
.security-block .label-form { color: #fff; margin-bottom: 12px; }

.checkbox-wrapper { display: flex; align-items: flex-start; gap: 12px; margin: 25px 0; text-align: left; cursor: pointer; }
.checkbox-wrapper input { width: 22px; height: 22px; accent-color: var(--primary); cursor: pointer; margin-top: 2px; flex-shrink: 0; }
.checkbox-text { color: var(--text-sec); font-size: 12px; line-height: 1.4; }
.checkbox-text span { color: var(--primary); font-weight: bold; text-decoration: underline; }

/* =========================================================
   STRUTTURA E NAVIGAZIONE INTERNA
   ========================================================= */
.header, .header-app { 
    background: rgba(22, 28, 29, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color); 
    padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; 
    position: sticky; top: 0; z-index: 2000; height: 75px; box-sizing: border-box;
}
.header-app { justify-content: flex-start; gap: 15px; }

#ricevimento-container, #fornitori-container, #collab-container, #notifiche-container, #firme-container, 
#dash-container, #scadenze-container, #upload-container, #perm-container, #sanificanti-container, 
#gest-pulizie-container, #pulizie-verifica-container, #impostazioni-container { 
    min-height: calc(100vh - 70px); padding-bottom: 30px; width: 100%; overflow-x: hidden; box-sizing: border-box;
}

/* --- BLOCCO BOTTOM BAR (Fissa, Sicura, Premium) --- */
#app-container { padding-bottom: 120px !important; }

.bottom-nav, #bottom-bar, .menu-bottom {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 75px; 
    background: rgba(15, 15, 15, 0.95) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid #222 !important; display: flex; justify-content: space-around; align-items: center; 
    z-index: 8000 !important; box-shadow: 0 -10px 30px rgba(0,0,0,0.8); padding-bottom: env(safe-area-inset-bottom);
}

.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: #555; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); height: 100%; user-select: none; -webkit-tap-highlight-color: transparent; }
.nav-item i { font-size: 24px; margin-bottom: 4px; transition: 0.3s; }
.nav-item span { font-size: 10px; font-weight: 900; letter-spacing: 0.5px; transition: 0.3s; }

/* Animazione Bottone Attivo */
.nav-item.active { color: var(--primary); }
.nav-item.active i { font-size: 28px; transform: translateY(-4px); filter: drop-shadow(0 0 8px rgba(233,193,1,0.6)); }
.nav-item.active span { opacity: 1; }

/* Tasto CHAT nel bottom-bar — SEMPRE azzurro (MODULO CHAT) */
#nav-chat { color: #0ea5e9 !important; }
#nav-chat i { color: #0ea5e9; filter: drop-shadow(0 0 6px rgba(14,165,233,0.35)); }
#nav-chat span { color: #0ea5e9; }
#nav-chat.active i { font-size: 30px; filter: drop-shadow(0 0 12px rgba(14,165,233,0.8)); transform: translateY(-4px); }

/* Badge rosso con conteggio messaggi non letti sul tasto CHAT.
   Posizionato SOPRA l'icona (negativo top) per maggiore visibilità. */
#nav-chat-badge {
    position: absolute;
    top: -4px;
    right: calc(50% - 24px);
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 11px !important;
    font-weight: 900;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    padding: 0 6px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(239,68,68,0.7), 0 0 0 2px #0d1117;
    line-height: 1;
    letter-spacing: 0;
    z-index: 2;
}
#nav-chat-badge.show { display: inline-flex; }
@keyframes chatBadgePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
#nav-chat-badge.pulse { animation: chatBadgePulse 0.45s ease; }

/* In-app banner anteprima messaggio chat (toast stile WhatsApp) */
.chat-inapp-banner {
    position: fixed;
    top: 75px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    max-width: 420px;
    width: calc(100% - 30px);
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
    padding: 12px 16px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(14,165,233,0.4), 0 0 0 1px rgba(255,255,255,0.1);
    z-index: 99998;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.chat-inapp-banner.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.chat-inapp-banner-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 13px; flex-shrink: 0;
}
.chat-inapp-banner-body { flex: 1; min-width: 0; }
.chat-inapp-banner-nome { font-size: 12px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-inapp-banner-testo { font-size: 11px; opacity: 0.92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-inapp-banner-close {
    background: rgba(0,0,0,0.15); border: none; color: #fff;
    width: 26px; height: 26px; border-radius: 50%;
    cursor: pointer; flex-shrink: 0; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}

/* =========================================================
   IL TASTO PIÙ (FAB BUTTON)
   ========================================================= */
.fab-btn { 
    position: fixed; bottom: 95px; right: 20px; 
    width: 65px; height: 65px; border-radius: 50%; 
    background: linear-gradient(135deg, var(--primary) 0%, #b89800 100%); 
    color: #000; display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 10px 30px rgba(233, 193, 1, 0.5), inset 0 2px 5px rgba(255,255,255,0.4); 
    cursor: pointer; 
    z-index: 1000;
    transition: 0.2s; border: none;
}
.fab-btn i { font-size: 32px; font-weight: bold; }
.fab-btn:active { transform: scale(0.9) translateY(4px); box-shadow: 0 5px 15px rgba(233, 193, 1, 0.4); }

/* =========================================================
   MENU HUB & SCHEDE MODULI
   ========================================================= */
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px; padding-bottom: 30px; }
.sez-header { grid-column: 1 / -1; margin: 25px 0 5px 0; display: flex; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.sez-header span { color: var(--text-sec); font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }

.module-card, .card-form, .firma-card, .notifica-card, .user-card, .fornitore-card, .scadenza-card, .acc-card, .stat-box {
    background: var(--surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color); border-top: 1px solid rgba(255,255,255,0.05); 
    border-radius: 24px; box-shadow: var(--shadow-premium); transition: 0.3s; position: relative; overflow: hidden;
}

.module-card { padding: 24px 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; }
.module-card:active { transform: scale(0.96); border-color: var(--primary); background: rgba(233,193,1,0.05); }
.module-card i { font-size: 36px; color: var(--primary); filter: drop-shadow(var(--glow-primary)); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.module-card:hover i.material-icons { transform: rotate(90deg); }
.module-card span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-main); text-align: center; }

#box-admin-settings:hover i { transform: rotate(180deg); color: var(--primary) !important; }

/* =========================================================
   INPUT E SELECT
   ========================================================= */
.input-wrapper { margin-bottom: 20px; }
.label-form { color: var(--primary); font-size: 10px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; display: block; margin-left: 4px; }

.input-form, .app-input, .input-acc { 
    width: 100%; padding: 18px 20px; 
    background: rgba(0,0,0,0.3); color: var(--text-main); 
    border-radius: 14px; border: 1px solid var(--border-color); 
    outline: none; font-size: 15px; font-weight: 600; transition: 0.3s;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}

select.input-form, select.app-input, select.input-acc {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9c101' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 18px center; background-size: 18px;
    padding-right: 50px; cursor: pointer;
}

.input-form:focus, .app-input:focus, .input-acc:focus { 
    border-color: var(--primary); background: rgba(0,0,0,0.6);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5), 0 0 0 3px rgba(233,193,1,0.15); 
}

/* Bottoni Standard */
.btn-back { background: rgba(255,255,255,0.05); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 12px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; backdrop-filter: blur(10px); }
.btn-back:active { background: rgba(255,255,255,0.1); transform: scale(0.9); }
.btn-azione { width: 100%; padding: 18px; border-radius: 16px; font-weight: 900; font-size: 14px; border: none; cursor: pointer; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.2s; letter-spacing: 1px; background: var(--surface); color: var(--text-main); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255,255,255,0.1); border: 1px solid var(--border-color); }
.btn-azione.primary { background: var(--primary); color: #000; box-shadow: 0 10px 25px rgba(233, 193, 1, 0.4), inset 0 2px 0 rgba(255,255,255,0.3); border: none; }
.btn-azione.danger { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--danger); box-shadow: 0 5px 15px rgba(239, 68, 68, 0.1); }
.btn-azione:active { transform: translateY(2px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
.btn-azione.primary:active { box-shadow: 0 5px 10px rgba(233, 193, 1, 0.2); }

/* =========================================================
   TABELLE EXCEL E LOG
   ========================================================= */
.table-wrapper, .excel-wrapper { 
    margin: 15px; border-radius: 16px; overflow-x: auto; overflow-y: auto; max-height: calc(100vh - 160px); 
    border: 1px solid var(--border-color); border-top: 1px solid rgba(255,255,255,0.05);
    background: var(--surface); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-premium);
}
.excel-table, table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: normal; }
.excel-table th, th { 
    background: rgba(22, 28, 29, 0.95); backdrop-filter: blur(10px); color: var(--primary); font-weight: 900; text-transform: uppercase; 
    padding: 18px 15px; position: sticky; top: 0; z-index: 20; letter-spacing: 1px; text-align: left; border-bottom: 2px solid var(--primary);
}
.excel-table td, td { padding: 15px; border-bottom: 1px solid var(--border-color); color: var(--text-main) !important; font-weight: 600; vertical-align: middle; text-align: left; line-height: 1.5; word-wrap: break-word; }
.excel-table tr:nth-child(even) td, tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.excel-table tr:hover td, tr:hover td { background: rgba(233,193,1,0.05); }

.btn-tabella { background: var(--primary); color: #000 !important; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 900; font-size: 11px; display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; border: none; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

/* Tabelle Storico Scrollabili Orizzontalmente */
.excel-wrapper-modern { 
    width: 100%; 
    overflow-x: auto; 
    background: var(--surface); 
    border-radius: 12px; 
    border: 1px solid var(--border-color); 
}
.excel-wrapper-modern table { 
    width: 100%; 
    min-width: 1000px; 
    border-collapse: collapse; 
    text-align: left; 
}
.excel-wrapper-modern th, .excel-wrapper-modern td { 
    padding: 12px 15px; 
    border-bottom: 1px solid var(--border-color); 
}
.excel-wrapper-modern th { 
    background: var(--primary); 
    color: #000; 
    font-weight: 900; 
    font-size: 11px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* =========================================================
   ACCOUNT E PROFILO
   ========================================================= */
.account-scroll { padding: 20px; min-height: calc(100vh - 70px); padding-bottom: 30px; box-sizing: border-box;}
.profile-header-card { 
    background: var(--surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color); border-top: var(--border-top-glow); 
    border-radius: 24px; box-shadow: var(--shadow-premium); text-align: center;
    padding: 30px 20px; margin-bottom: 20px;
}
.avatar-circle { width: 110px; height: 110px; background: var(--primary); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 900; margin: 0 auto 25px auto; border: 4px solid rgba(255,255,255,0.1); box-shadow: var(--glow-primary); }
.user-stats-row { display: flex; gap: 15px; margin-bottom: 35px; }
.stat-box { flex: 1; padding: 20px 10px; text-align: center; background: var(--surface); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.3); } 
.stat-val { display: block; font-size: 24px; font-weight: 900; color: var(--text-main); }
.stat-lab { font-size: 10px; color: var(--text-sec); text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; font-weight: 900; }

.acc-section-title { font-size: 11px; font-weight: 900; color: var(--text-sec); margin: 0 0 10px 15px; letter-spacing: 1.5px; text-transform: uppercase; }
.acc-card { overflow: hidden; margin-bottom: 30px; padding: 0; }
.acc-row { display: flex; align-items: center; gap: 15px; padding: 20px; border-bottom: 1px solid var(--border-color); transition: 0.2s; cursor: pointer; }
.acc-row:last-child { border-bottom: none; }
.acc-row:active { background: rgba(255,255,255,0.05); }
.acc-row i { background: rgba(0,0,0,0.5); width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 22px; border: 1px solid var(--border-color); }
.acc-row-info label { display: block; font-size: 10px; color: var(--text-sec); font-weight: 900; text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.5px; }
.acc-row-info span { display: block; font-size: 16px; color: var(--text-main); font-weight: bold; }

/* =========================================================
   PERMESSI E AZIENDA (DESIGN A PILLOLE)
   ========================================================= */
.switch-row { 
    background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); 
    border-radius: 16px; padding: 18px 20px; margin-bottom: 12px; 
    display: flex; justify-content: space-between; align-items: center; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); transition: 0.2s;
}
.switch-row:hover { background: rgba(233, 193, 1, 0.03); border-color: rgba(233, 193, 1, 0.3); }
.switch-label { font-size: 14px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 15px; }
.switch-label i { background: rgba(0,0,0,0.4); padding: 10px; border-radius: 12px; color: var(--primary); font-size: 20px; border: 1px solid var(--border-color);}

.azienda-card { padding: 30px 20px; text-align: center; }
.azienda-logo { width: 110px; height: 110px; object-fit: contain; margin: 0 auto 25px auto; border-radius: 50%; padding: 10px; background: rgba(0,0,0,0.3); border: 1px solid var(--border-color); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.info-row { background: rgba(0,0,0,0.2); border-radius: 16px; margin-bottom: 12px; padding: 18px; border: 1px solid var(--border-color); display: flex; align-items: center; gap: 15px; text-align: left; }
.info-row i { background: rgba(0,0,0,0.4); width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 20px; flex-shrink: 0; }

/* =========================================================
   CARDS LISTE (Fornitori, Team, Scadenze)
   ========================================================= */
.list-container, .firme-list, .fornitori-list, .collab-list-container { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

.user-card, .fornitore-card, .collab-item { padding: 16px; display: flex; align-items: center; gap: 15px; margin-bottom: 0; background: rgba(255, 255, 255, 0.03); border-radius: 16px; border: 1px solid var(--border-color); transition: all 0.2s ease; cursor: pointer; }
.user-card:active, .fornitore-card:active, .collab-item:active { transform: scale(0.98); background: rgba(255, 255, 255, 0.07); }

.user-avatar, .fornitore-icon, .notifica-icon, .collab-avatar-circle { width: 50px; height: 50px; border-radius: 14px; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; color: var(--primary); font-weight: 900; font-size: 18px; border: 1px solid var(--border-color); flex-shrink: 0; }
.user-avatar { border-radius: 50%; }

.action-btn.green { background: rgba(34, 197, 94, 0.15); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); }
.action-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }

.firma-card { padding: 20px; margin-bottom: 0; }
.firma-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; border-bottom: 1px dashed var(--border-color); padding-bottom: 12px; }

/* Info Collab */
.collab-info { flex: 1; }
.collab-name { display: block; font-weight: 900; color: #fff; font-size: 14px; margin-bottom: 2px; }
.collab-role { display: block; font-size: 11px; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

.info-block { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 15px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.info-label { font-size: 10px; text-transform: uppercase; color: var(--text-muted); font-weight: 800; letter-spacing: 0.5px; }
.info-value { font-size: 13px; color: #fff; font-weight: 600; }

/* =========================================================
   COMPONENTI VARI E ANIMAZIONI (Switch, Tabs)
   ========================================================= */
.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--border-color); transition: .3s; border-radius: 30px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); }
.slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background-color: var(--text-main); transition: .3s; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.4); }
input:checked + .slider { background-color: var(--success); }
input:checked + .slider:before { transform: translateX(22px); }

/* =========================================================
   MODULO SCADENZE E DMS
   ========================================================= */
.view-toggle { display: flex; gap: 10px; margin: 0 15px 20px 15px; background: #111; padding: 6px; border-radius: 16px; border: 1px solid #333; }
.toggle-btn { flex: 1; text-align: center; padding: 12px; border-radius: 12px; cursor: pointer; font-size: 11px; font-weight: 900; color: #888; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 6px; transition: 0.3s; }
.toggle-btn.active { background: var(--surface); color: var(--primary); box-shadow: 0 4px 10px rgba(0,0,0,0.4); border: 1px solid #444; }

.scadenza-card { background: var(--surface); border-radius: 20px; border: 1px solid #333; padding: 15px; margin-bottom: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.scadenza-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px dashed #333; }

.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.doc-badge { font-size: 9px; padding: 8px; border-radius: 8px; font-weight: 900; display: flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
.doc-badge.green { background: rgba(1, 218, 48, 0.1); color: #01da30; border: 1px solid #01da30; }
.doc-badge.yellow { background: rgba(255, 201, 0, 0.1); color: #ffc900; border: 1px solid #ffc900; }
.doc-badge.red { background: rgba(255, 68, 68, 0.1); color: #ff4444; border: 1px solid #ff4444; }
.doc-badge.neutral { background: rgba(255, 255, 255, 0.05); color: #888; border: 1px dashed #444; }

.alert-card { display: flex; align-items: center; gap: 12px; padding: 15px; border-radius: 16px; margin-bottom: 12px; border: 1px solid #333; background: var(--surface); }
.alert-card.red { border-left: 4px solid #ff4444; }
.alert-card.yellow { border-left: 4px solid #ffc900; }
.alert-icon { font-size: 26px; }
.alert-card.red .alert-icon { color: #ff4444; }
.alert-card.yellow .alert-icon { color: #ffc900; }
.alert-info { flex: 1; }
.alert-doc { font-size: 12px; font-weight: 900; color: #fff; text-transform: uppercase; display: block; margin-bottom: 3px;}
.alert-user { font-size: 10px; color: var(--text-dim); font-weight: 700; display: block;}
.alert-date { text-align: right; font-size: 12px; font-weight: 900; color: #fff; }
.alert-date span { font-size: 9px; font-weight: 800; text-transform: uppercase; }
.alert-card.red .alert-date span { color: #ff4444; }
.alert-card.yellow .alert-date span { color: #ffc900; }

.doc-check-list { background: rgba(0,0,0,0.3); border: 1px dashed #444; border-radius: 16px; padding: 15px; margin-bottom: 25px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.doc-item { font-size: 9px; font-weight: 900; padding: 6px 10px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; letter-spacing: 0.5px; }
.doc-item.present { background: rgba(1, 218, 48, 0.1); color: #01da30; border: 1px solid #01da30; }
.doc-item.missing { background: rgba(255, 68, 68, 0.1); color: #ff4444; border: 1px dashed #ff4444; }

/* =========================================================
   FIX OVERLAYS E GUEST (NUOVE COMPONENTI)
   ========================================================= */

/* --- TASTIERINO PIN (Reso Sicuro a livello di z-index) --- */
#pin-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:9999999; flex-direction:column; align-items:center; justify-content:center; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.pin-box { text-align:center; max-width:320px; width:100%; }
.pin-dots { display:flex; justify-content:center; gap:15px; margin:20px 0 30px 0; }
.pin-dot { width:16px; height:16px; border-radius:50%; border:2px solid var(--primary); background:transparent; transition:0.2s; }
.pin-dot.filled { background:var(--primary); }
.pin-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:15px; }
.pin-btn { background:#111; color:#fff; border:1px solid #333; border-radius:50%; width:70px; height:70px; font-size:24px; font-weight:900; display:flex; align-items:center; justify-content:center; margin:0 auto; cursor:pointer; transition:0.2s; box-shadow:0 4px 10px rgba(0,0,0,0.5); }
.pin-btn:active { background:var(--primary); color:#000; transform:scale(0.9); }
.pin-btn.action { background:transparent; border:none; box-shadow:none; color:var(--danger); font-size: 11px; }
.shake-anim { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

/* POPUP BOTTOM SHEET E OVERLAYS (ALERT, CONFIRM) */
.popup-bottom-sheet {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(22, 28, 29, 0.98); backdrop-filter: blur(10px); 
    z-index: 99999; display: none;
    align-items: flex-end; justify-content: center;
    padding-top: max(15px, env(safe-area-inset-top)); 
}
.popup-bottom-content {
    background: var(--surface); width: 100%; max-width: 600px;
    border-radius: 24px 24px 0 0; padding: 25px;
    border-top: 1px solid var(--primary); box-shadow: 0 -10px 40px rgba(0,0,0,0.8);
    animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.custom-confirm-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 99999999; display: none;
    align-items: center; justify-content: center; 
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-out;
}
.custom-confirm-box {
    background: var(--surface); border-radius: 20px; padding: 25px;
    width: 85%; max-width: 350px; text-align: center;
    border: 1px solid #333; box-shadow: 0 10px 40px rgba(0,0,0,0.9);
    transform: scale(0.95); animation: popIn 0.2s forwards;
}

#app-alert-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:99999999; align-items:center; justify-content:center; backdrop-filter:blur(4px); opacity:0; transition:opacity 0.3s ease; }
#app-alert-box { background:var(--surface); border-radius:24px; padding:30px 20px; width:85%; max-width:350px; text-align:center; transform:scale(0.8); transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border:1px solid #333; box-shadow:0 20px 50px rgba(0,0,0,0.8); }

@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* POPUP DI RICERCA (LOOKUP) */
.popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(22, 28, 29, 0.98); backdrop-filter: blur(10px);
    z-index: 10000; display: flex; flex-direction: column;
    padding-top: max(15px, env(safe-area-inset-top));
}
.popup-item {
    background: rgba(0,0,0,0.3); border: 1px solid var(--border-color);
    padding: 20px; border-radius: 16px; color: var(--text-main);
    font-weight: bold; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; gap: 15px; transition: 0.2s;
    margin-bottom: 10px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
}
.popup-item:active { transform: scale(0.97); border-color: var(--primary); background: rgba(233,193,1,0.05); }

/* MODULI OPERATIVI (Scanner, Upload, Firme) */
.upload-tabs { 
    display: flex; background: rgba(0,0,0,0.5); border-radius: 14px; 
    padding: 6px; margin-bottom: 20px; border: 1px solid var(--border-color);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}
.tab-btn { 
    flex: 1; padding: 14px; border-radius: 10px; border: none; background: transparent; 
    color: var(--text-muted); font-weight: 900; font-size: 11px; text-transform: uppercase;
    cursor: pointer; transition: 0.2s;
}
.tab-btn.active { 
    background: var(--surface); color: var(--primary); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); border: 1px solid var(--border-color);
}

.btn-action-scan { 
    background: rgba(0,0,0,0.3); border: 1px dashed var(--primary); color: var(--primary); 
    padding: 25px 15px; border-radius: 16px; display: flex; flex-direction: column; 
    align-items: center; gap: 12px; cursor: pointer; transition: 0.2s;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
}
.btn-action-scan:active { transform: scale(0.96); background: rgba(233,193,1,0.05); }
.btn-action-scan i { font-size: 38px; filter: drop-shadow(var(--glow-primary)); }
.btn-action-scan span { font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }

.firma-container { 
    background: #ffffff; border: 2px solid var(--border-color); border-radius: 16px; 
    margin-top: 15px; margin-bottom: 25px; position: relative; overflow: hidden;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
}
.firma-container canvas { width: 100%; display: block; cursor: crosshair; }

.btn-pulisci { 
    position: absolute; top: 10px; right: 10px; background-color: var(--surface); color: var(--text-sec); 
    border: 1px solid var(--border-color); padding: 8px 12px; border-radius: 8px; font-size: 10px; 
    font-weight: 900; text-transform: uppercase; cursor: pointer; z-index: 10;
    backdrop-filter: blur(5px); transition: 0.2s;
}
.btn-pulisci:hover { background-color: rgba(255, 255, 255, 0.03); border-color: rgba(233, 193, 1, 0.3); }
.btn-pulisci:active { transform: scale(0.9); }

.custom-file-upload-wrapper { position: relative; margin-top: 15px; width: 100%; }
.custom-file-upload-wrapper input[type="file"] { 
    opacity: 0 !important; position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%; cursor: pointer; z-index: 5; 
}
.custom-file-upload-label { 
    display: flex; align-items: center; justify-content: center; width: 100%; 
    padding: 15px; background: var(--surface); color: var(--primary); 
    border: 1px solid var(--border-color); border-radius: 12px; 
    font-weight: 900; font-size: 13px; text-transform: uppercase; transition: 0.2s; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3); z-index: 1; pointer-events: none;
}
.custom-file-upload-label i { margin-right: 10px; font-size: 22px; filter: drop-shadow(var(--glow-primary)); }
.file-name-display { display: block; font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 8px; font-style: italic; }

/* LENS EDITOR FULLSCREEN */
.editor-scanner-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: var(--bg-app); z-index: 10500; flex-direction: column;
}
.editor-header {
    padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;
    background: var(--surface); border-bottom: 1px solid var(--border-color);
    padding-top: max(15px, env(safe-area-inset-top));
}
.editor-footer {
    display: flex; justify-content: center; gap: 20px; padding: 20px;
    background: var(--surface); border-top: 1px solid var(--border-color);
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.rotate-btn {
    background: rgba(0,0,0,0.5); border: 1px solid var(--border-color); border-radius: 12px;
    width: 55px; height: 55px; display: flex; align-items: center; justify-content: center;
    color: var(--text-main); cursor: pointer; transition: 0.2s; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}
.rotate-btn:active { transform: scale(0.9); }
.rotate-btn.primary { border-color: var(--primary); color: var(--primary); }

/* STILE CHIPS E PILLOLE */
.chips-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; }
.chip { 
    background: rgba(0,0,0,0.4); border: 1px solid var(--border-color); 
    padding: 10px 15px; border-radius: 20px; font-size: 11px; 
    font-weight: 900; color: var(--text-muted); cursor: pointer; 
    transition: 0.2s; text-transform: uppercase; letter-spacing: 0.5px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
}
.chip:active { transform: scale(0.95); }
.chip.active { 
    background: var(--primary); color: #000; border-color: var(--primary); 
    box-shadow: 0 5px 15px rgba(233, 193, 1, 0.4);
}

.esito-radio {
    flex: 1; padding: 15px; border-radius: 14px; 
    border: 2px solid var(--border-color); background: rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 900; font-size: 13px; color: var(--text-muted);
    cursor: pointer; transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.esito-radio input { display: none; } 
.esito-radio i { font-size: 20px; transition: 0.3s; }

.esito-radio.green:has(input:checked) { background: rgba(34, 197, 94, 0.15); border-color: #22c55e; color: #22c55e; box-shadow: 0 4px 15px rgba(34, 197, 94, 0.2); }
.esito-radio.red:has(input:checked) { background: rgba(239, 68, 68, 0.15); border-color: #ef4444; color: #ef4444; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2); }

/* EXTRA MODALS BUTTONS (GUEST) */
.confirm-btns { display:flex; gap:10px; margin-top:20px; }
.confirm-btns button { flex:1; padding:15px; border-radius:12px; font-weight:900; font-size:12px; border:none; cursor:pointer; text-transform:uppercase; transition:0.2s; }
.btn-annulla { background:rgba(255,255,255,0.1); color:#fff; border:1px solid #444; }
.btn-annulla:active { background:rgba(255,255,255,0.2); }
.btn-procedi:active { transform:scale(0.95); }
/* ==========================================
   SISTEMAZIONE MENU IN BASSO (BOTTOM BAR)
   ========================================== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--surface, #111);
    border-top: 1px solid var(--border-color, #333);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom); /* Fondamentale per la barra Home dei nuovi iPhone */
}

.bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    color: var(--text-muted, #aaa);
    cursor: pointer;
    flex: 1; /* Divide lo spazio equamente tra i 3 pulsanti */
    transition: color 0.2s ease;
}

.bottom-nav .nav-item.active {
    color: var(--primary, #e9c46a); /* Usa il colore oro/primario per la pagina corrente */
}

.bottom-nav .nav-item i {
    font-size: 24px;
    margin-bottom: 4px;
}

.bottom-nav .nav-item span {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
}
/* =========================================================
   STILI PER CONSOLE FIRME LEGALI E AUDIT LOG
   ========================================================= */

.log-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Stile base della scheda di log/firma */
.log-card, .riga-firma-item {
    background: var(--surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--success); /* Accento verde a sinistra */
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3), 0 4px 10px rgba(0,0,0,0.4);
    position: relative;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s;
}

.log-card:active, .riga-firma-item:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.03);
}

.log-card.danger-log { border-left-color: var(--danger); }
.log-card.warning-log { border-left-color: var(--warning); }
.log-card.primary-log { border-left-color: var(--primary); }

/* Header della scheda */
.log-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 10px;
}

/* Info Admin e checkmark */
.admin-info {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 900;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.checkmark-icon {
    color: var(--success);
    margin-left: 8px;
    font-size: 16px;
}

/* Data e ora a destra */
.date-time {
    text-align: right;
    font-size: 10px;
    color: var(--text-sec);
    font-weight: bold;
    text-transform: uppercase;
}

.time-text {
    font-size: 12px;
    color: var(--text-main);
    font-family: monospace;
}

/* Testo dell'azione in giallo/oro */
.action-text {
    color: var(--primary);
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

/* Metadati: ID pillola e icona espansione */
.log-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.id-pill {
    background-color: rgba(0,0,0,0.5);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-family: monospace;
    font-size: 10px;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: bold;
}

.expand-icon {
    color: var(--text-muted);
    font-size: 20px;
    transition: transform 0.3s;
}

/* Stile per la scheda espansa */
.log-card.expanded { cursor: default; }
.log-card.expanded .expand-icon { transform: rotate(180deg); color: var(--success); }

/* Pannello Dettagli (mostrato solo in .expanded) */
.details-panel {
    display: none;
    border-top: 1px dashed var(--border-color);
    padding-top: 20px;
    margin-top: 15px;
    animation: fadeUpIn 0.3s forwards;
}
.log-card.expanded .details-panel { display: block; }

/* Contenitore Firma */
.signature-box-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 10px;
}

.signature-box {
    border: 2px dashed var(--success);
    border-radius: 8px;
    padding: 5px;
    background-color: #fff; /* Firma visibile su sfondo bianco */
}

/* Contenitore Dati Audit */
.audit-data-container {
    background-color: rgba(0,0,0,0.4);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}

.audit-header {
    display: flex;
    align-items: center;
    color: var(--text-sec);
    font-weight: 900;
    margin-bottom: 15px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.audit-icon { color: var(--primary); margin-right: 8px; font-size: 16px; }

.audit-data { display: grid; grid-gap: 12px; }

.audit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.audit-item:last-child { border-bottom: none; padding-bottom: 0; }

.audit-label { color: var(--text-muted); font-weight: bold; text-transform: uppercase; }
.audit-value { color: var(--text-main); font-family: monospace; font-weight: bold; font-size: 12px; text-align: right; word-break: break-all; max-width: 60%; }

.valid-pin { color: var(--success); font-family: inherit; }
.hmac-value { color: var(--warning); }


/* ============================================================
   PROFILO UTENTE (Account) — refactor responsive
   ============================================================ */
.acc-page {
    padding: 20px;
    padding-bottom: 100px;
    max-width: 720px;
    margin: 0 auto;
    animation: slideUp 0.35s ease;
}

.acc-header {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    text-align: center;
    padding: 28px 18px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}
.acc-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 80px;
    background: radial-gradient(ellipse at top, rgba(233,193,1,0.18), transparent 70%);
    pointer-events: none;
}
.acc-avatar {
    width: 92px; height: 92px;
    background: linear-gradient(135deg, var(--primary), #c19c00);
    color: #000;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    font-weight: 900;
    margin: 0 auto 16px;
    box-shadow: 0 10px 30px rgba(233,193,1,0.35);
    position: relative;
    z-index: 1;
}
.acc-name {
    margin: 0 0 4px;
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 0.3px;
    word-wrap: break-word;
    position: relative; z-index: 1;
}
.acc-mansione {
    color: var(--primary);
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative; z-index: 1;
}

.acc-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}
.acc-stat-box {
    padding: 16px 12px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
}
.acc-stat-num {
    display: block;
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
}
.acc-stat-num.success { color: var(--success); }
.acc-stat-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}

.acc-section-title {
    font-size: 11px;
    font-weight: 900;
    color: var(--text-muted);
    margin: 0 0 10px 6px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.acc-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    margin-bottom: 22px;
    overflow: hidden;
}
.acc-card.padded { padding: 18px; }

.acc-pref-hint {
    font-size: 11px;
    color: #888;
    margin: 0 0 12px;
    line-height: 1.4;
}
.acc-pref-list {
    background: rgba(0,0,0,0.3);
    border: 1px solid #2a2e34;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
}
.acc-pref-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.025);
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid #333;
    transition: border-color 0.15s, background 0.15s;
    cursor: pointer;
}
.acc-pref-item:hover { border-color: var(--primary); background: rgba(233,193,1,0.04); }
.acc-pref-item input[type="checkbox"] {
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}
.acc-pref-item .acc-pref-icon {
    background: rgba(0,0,0,0.4);
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}
.acc-pref-item .acc-pref-icon i { font-size: 18px; }
.acc-pref-item .acc-pref-meta { flex: 1; min-width: 0; }
.acc-pref-item .acc-pref-name {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.acc-pref-item .acc-pref-path {
    color: #777;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-pref-save {
    margin-top: 14px;
    width: 100%;
    padding: 13px;
    background: rgba(233,193,1,0.12);
    border: 1px solid var(--primary);
    color: var(--primary);
    font-weight: 900;
    cursor: pointer;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}
.acc-pref-save:active { transform: scale(0.97); background: rgba(233,193,1,0.2); }

.acc-info-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
}
.acc-info-row:last-child { border-bottom: none; }
.acc-info-icon {
    background: rgba(0,0,0,0.5);
    padding: 10px;
    border-radius: 10px;
    color: var(--primary);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.acc-info-icon i { font-size: 20px; }
.acc-info-text { flex: 1; min-width: 0; }
.acc-info-label {
    display: block;
    font-size: 9px;
    color: var(--text-muted);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}
.acc-info-value {
    font-size: 13px;
    color: #fff;
    font-weight: bold;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.acc-form-group { margin-bottom: 14px; }
.acc-form-label {
    display: block;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 5px;
}
.acc-form-label.primary { color: var(--primary); }
.acc-form-input-wrap { position: relative; }
.acc-form-input {
    width: 100%;
    padding: 13px 42px 13px 14px;
    background: rgba(0,0,0,0.35);
    border: 1px solid #333;
    color: #fff;
    border-radius: 10px;
    outline: none;
    font-size: 14px;
    box-sizing: border-box;
    font-family: inherit;
}
.acc-form-input:focus { border-color: var(--primary); }
.acc-form-input.center {
    text-align: center;
    font-size: 18px;
    letter-spacing: 5px;
}
.acc-form-input.readonly {
    cursor: not-allowed;
    opacity: 0.7;
}
.acc-form-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    cursor: pointer;
    font-size: 20px;
}
.acc-btn-primary {
    margin-top: 18px;
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    transition: all 0.2s;
}
.acc-btn-primary:active { transform: scale(0.97); }

.acc-btn-logout {
    width: 100%;
    padding: 14px;
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}
.acc-btn-logout:active { transform: scale(0.97); background: rgba(239,68,68,0.18); }

@media (max-width: 480px) {
    .acc-page { padding: 14px; padding-bottom: 100px; }
    .acc-header { padding: 22px 14px; }
    .acc-avatar { width: 78px; height: 78px; font-size: 26px; }
    .acc-name { font-size: 17px; }
    .acc-info-row { padding: 13px 14px; gap: 10px; }
}

/* ============================================================
   SCADENZIARIO HR — refactor responsive con classi pulite
   ============================================================ */
.scad-page {
    padding: 18px;
    padding-bottom: 100px;
    max-width: 1100px;
    margin: 0 auto;
    animation: fadeIn 0.3s ease;
}
.scad-toolbar {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.scad-toolbar-info { flex: 1; min-width: 200px; }
.scad-toolbar-title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.scad-toolbar-title i { color: var(--primary); font-size: 24px; }
.scad-toolbar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.scad-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--border-color);
    border-radius: 100px;
    font-size: 11px;
    color: var(--text-main);
    font-weight: bold;
}
.scad-chip i { font-size: 14px; color: var(--primary); }
.scad-chip strong { color: var(--primary); font-weight: 900; }

.scad-refresh {
    background: var(--primary);
    color: #000;
    border: none;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 14px rgba(233, 193, 1, 0.25);
    transition: all 0.2s;
    flex-shrink: 0;
    font-family: inherit;
}
.scad-refresh:hover { background: #ffd400; }
.scad-refresh:active { transform: scale(0.96); }
.scad-refresh i { font-size: 18px; }

@media (max-width: 600px) {
    .scad-toolbar { padding: 16px; flex-direction: column; align-items: stretch; }
    .scad-refresh { width: 100%; justify-content: center; }
    .scad-toolbar-title { font-size: 17px; }
}

.scad-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.scad-tab {
    padding: 12px 18px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.scad-tab:hover { color: #fff; }
.scad-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.scad-tab .badge-urg {
    background: #ef4444;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
}

/* Riepilogo totali (4 stat box) */
.scad-totals {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
@media (min-width: 600px) {
    .scad-totals { grid-template-columns: repeat(4, 1fr); }
}
.scad-tot-box {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--text-muted);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}
.scad-tot-box.ok       { border-top-color: var(--success); }
.scad-tot-box.warn     { border-top-color: #eab308; }
.scad-tot-box.late     { border-top-color: var(--danger); }
.scad-tot-box.miss     { border-top-color: #94a3b8; }
.scad-tot-num {
    display: block;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 4px;
    line-height: 1;
}
.scad-tot-box.ok   .scad-tot-num { color: var(--success); }
.scad-tot-box.warn .scad-tot-num { color: #eab308; }
.scad-tot-box.late .scad-tot-num { color: var(--danger); }
.scad-tot-box.miss .scad-tot-num { color: #94a3b8; }
.scad-tot-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Search box team */
.scad-search {
    width: 100%;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
    outline: none;
    margin-bottom: 14px;
    box-sizing: border-box;
    font-family: inherit;
}
.scad-search:focus { border-color: var(--primary); }

/* Pill colorate (mini contatori) */
.scad-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 900;
    margin: 2px;
}
.scad-pill.ok    { background: rgba(34,197,94,0.15);  color: var(--success); }
.scad-pill.warn  { background: rgba(234,179,8,0.18);  color: #eab308; }
.scad-pill.late  { background: rgba(239,68,68,0.15);  color: var(--danger); }
.scad-pill.miss  { background: rgba(148,163,184,0.18); color: #94a3b8; }
.scad-pill.skip  { background: rgba(75,85,99,0.25);   color: #6b7280; text-decoration: line-through; opacity: 0.7; }

/* Documento "non necessario" → riga spenta in fondo lista dettaglio */
.scad-doc-row.skip {
    border-left-color: #6b7280;
    opacity: 0.55;
    background: rgba(0,0,0,0.15);
}
.scad-doc-row.skip .scad-doc-name { text-decoration: line-through; color: #9ca3af; }
.scad-doc-row.skip .scad-doc-stato { color: #6b7280 !important; font-style: italic; }

/* Bottone marca/rimuovi NON_NECESSARIO */
.scad-mini-btn.skip   { color: #6b7280; border-color: #6b7280; background: rgba(75,85,99,0.08); }
.scad-mini-btn.unskip { color: #22c55e; border-color: #22c55e; background: rgba(34,197,94,0.08); }

/* ============================================================
   POPUP PIN — modale conferma operazioni che richiedono PIN
   ============================================================ */
.pin-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease-out;
}
.pin-modal {
    background: #161b22;
    border: 1px solid #30363d;
    border-top: 4px solid var(--warning);
    border-radius: 16px;
    padding: 26px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    text-align: center;
}
.pin-modal h3 { margin: 0 0 6px; color: #fff; font-size: 18px; }
.pin-modal p  { margin: 0 0 18px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.pin-modal-input {
    width: 100%;
    padding: 16px;
    background: #0d1117;
    border: 2px solid #30363d;
    color: #fff;
    border-radius: 12px;
    text-align: center;
    font-size: 24px;
    letter-spacing: 8px;
    font-weight: 900;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}
.pin-modal-input:focus { border-color: var(--warning); }
.pin-modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.pin-modal-btn {
    flex: 1;
    padding: 13px;
    border-radius: 10px;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    border: 1px solid;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.pin-modal-btn.cancel { background: transparent; color: var(--text-muted); border-color: #30363d; }
.pin-modal-btn.cancel:hover { color: #fff; background: rgba(255,255,255,0.05); }
.pin-modal-btn.confirm { background: var(--warning); color: #000; border-color: var(--warning); }
.pin-modal-btn.confirm:active { transform: scale(0.96); }
.pin-modal-error { color: var(--danger); font-size: 11px; margin-top: 10px; min-height: 14px; }

/* Card utente nel team */
.scad-user-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-left: 4px solid #94a3b8;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.scad-user-card:hover {
    border-left-color: var(--primary);
    transform: translateX(2px);
}
.scad-user-card.late { border-left-color: var(--danger); }
.scad-user-card.warn { border-left-color: #eab308; }
.scad-user-card.allok { border-left-color: var(--success); }
.scad-user-info { flex: 1; min-width: 0; }
.scad-user-name {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scad-user-mansione {
    color: var(--text-muted);
    font-size: 11px;
}
.scad-user-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.scad-user-card .chev {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Riga urgenza */
.scad-urg-row {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--danger);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.scad-urg-row.warn { border-left-color: #eab308; }
.scad-urg-row.miss { border-left-color: #94a3b8; }
.scad-urg-icon { font-size: 24px; flex-shrink: 0; }
.scad-urg-info { flex: 1; min-width: 200px; }
.scad-urg-doc {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
}
.scad-urg-user {
    color: var(--text-muted);
    font-size: 11px;
}
.scad-urg-stato {
    font-size: 11px;
    font-weight: bold;
    margin-top: 3px;
}
.scad-urg-stato.late { color: var(--danger); }
.scad-urg-stato.warn { color: #eab308; }
.scad-urg-stato.miss { color: #94a3b8; }
.scad-urg-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.scad-mini-btn {
    padding: 6px 12px;
    font-size: 10px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid;
    background: transparent;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}
.scad-mini-btn.view { color: #fff; border-color: var(--border-color); background: rgba(255,255,255,0.04); }
.scad-mini-btn.solleci { color: #eab308; border-color: #eab308; background: rgba(234,179,8,0.08); }
.scad-mini-btn:active { transform: scale(0.95); }

/* Empty state buono */
.scad-empty-good {
    text-align: center;
    padding: 60px 20px;
    border: 1px dashed var(--success);
    border-radius: 14px;
    background: rgba(34,197,94,0.05);
}
.scad-empty-good i { font-size: 56px; color: var(--success); }
.scad-empty-good h3 { color: var(--success); margin: 12px 0 6px; }
.scad-empty-good p { color: var(--text-muted); font-size: 12px; margin: 0; }

/* Dettaglio singolo utente */
.scad-back-btn {
    background: rgba(255,255,255,0.05);
    color: #fff;
    border: 1px solid var(--border-color);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.scad-back-btn:hover { background: rgba(255,255,255,0.1); }
.scad-back-btn:active { transform: scale(0.97); }

.scad-user-header {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
}
.scad-user-header h3 { margin: 0 0 4px; color: #fff; font-size: 17px; }
.scad-user-header .sub { color: var(--text-muted); font-size: 12px; margin: 0 0 12px; }

.scad-doc-row {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--success);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}
.scad-doc-row.late { border-left-color: var(--danger); }
.scad-doc-row.warn { border-left-color: #eab308; }
.scad-doc-row.miss { border-left-color: #94a3b8; }
.scad-doc-row .scad-doc-icon { font-size: 22px; flex-shrink: 0; }
.scad-doc-row .scad-doc-info { flex: 1; min-width: 0; }
.scad-doc-row .scad-doc-name {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scad-doc-row .scad-doc-stato {
    font-size: 11px;
    font-weight: bold;
    margin-top: 2px;
}
.scad-doc-row.late .scad-doc-stato { color: var(--danger); }
.scad-doc-row.warn .scad-doc-stato { color: #eab308; }
.scad-doc-row.miss .scad-doc-stato { color: #94a3b8; }
.scad-doc-row .scad-doc-stato.ok { color: var(--success); }

@media (max-width: 480px) {
    .scad-page { padding: 14px; padding-bottom: 100px; }
    .scad-toolbar { flex-direction: column; align-items: stretch; }
    .scad-toolbar .scad-refresh { width: 100%; justify-content: center; }
    .scad-tab { padding: 10px 12px; font-size: 11px; }
    .scad-user-card { padding: 12px 14px; }
    .scad-urg-row { padding: 12px 14px; gap: 10px; }
    .scad-urg-actions { width: 100%; justify-content: stretch; }
    .scad-mini-btn { flex: 1; justify-content: center; }
}