/* === [hidden] VINCE SEMPRE === Il browser da' agli elementi con l'attributo `hidden` un `display:none` a specificita' minima: basta una regola di classe con `display:flex` per annullarlo, e da quel momento nascondere un elemento dal codice non lo nasconde piu'. E' successo davvero — un pannello che non si chiudeva, col codice che faceva la cosa giusta e nessun errore da nessuna parte: il difetto piu' difficile da vedere. Con questa riga non puo' piu' capitare. */ [hidden] { display: none !important; } * { margin: 0; padding: 0; box-sizing: border-box; } /* ============================================================ FONDAMENTA VISIVE — palette WhatsApp ============================================================ Scelta dell'utente: il pannello deve somigliare a WhatsApp, perche' e' li' che il personale del negozio passera' la giornata e la somiglianza vale piu' della nostra identita'. I valori sono quelli veri di WhatsApp Web, con UNA correzione che va spiegata: il verde #00A884 col testo bianco sopra fa 3,03:1 di contrasto, sotto il minimo leggibile (4,5). WhatsApp lo usa su bottoni che contengono solo icone, dove la regola non si applica. Qui invece i bottoni hanno delle parole dentro, quindi: --accent #008069 verde scuro, dove c'e' del TESTO (4,89:1) --accent-vivo #00A884 verde WhatsApp, per icone, barre e stati --nonletti #25D366 il verde acceso del pallino dei non letti Il rosso Tatech (#CF1224) non sparisce: resta nel logo, e da qui in avanti fa il colore delle azioni distruttive — ruolo in cui, con l'accento diventato verde, non da' piu' nessuna ambiguita'. ============================================================ */ :root, [data-theme="light"] { /* --- Verdi WhatsApp --- */ --wa-50: #e7fcf4; --wa-100: #d9fdd3; /* bolla dei messaggi inviati */ --wa-200: #a5e8c8; --wa-300: #6ed6a8; --wa-400: #25d366; /* verde acceso: pallini, notifiche */ --wa-500: #00a884; /* verde WhatsApp */ --wa-600: #008069; /* verde per il testo */ --wa-700: #006c58; --wa-800: #005c4b; /* bolla inviati, tema scuro */ --wa-900: #075e54; /* teal storico */ /* --- Grigi WhatsApp --- */ --grigio-0: #ffffff; --grigio-25: #fbfbfb; --grigio-50: #f7f8fa; --grigio-100: #f0f2f5; /* fondo dell'applicazione */ --grigio-200: #e9edef; /* bordi */ --grigio-300: #d1d7db; /* bordi marcati */ /* I due grigi del testo tenue, con il contrasto MISURATO e non a occhio. Prima erano #8696a0 e #667781: il primo dava 3,05:1 sul bianco, sotto il minimo leggibile di 4,5 — ed e' il grigio con cui sono scritte date, note e sottotitoli, cioe' testo piccolo, dove servirebbe anche di piu'. Su uno schermo buono in una stanza buia si legge; su un portatile di fronte a una finestra sparisce. */ --grigio-400: #5d6b73; /* testo tenue — 5,5:1 sul bianco */ --grigio-500: #4a5860; /* testo secondario — 7,1:1 sul bianco */ --grigio-600: #4a5860; --grigio-700: #33434d; --grigio-800: #202c33; --grigio-900: #111b21; /* testo e pannelli scuri */ /* --- Ruoli --- */ --bg: var(--grigio-100); --bg-alt: var(--grigio-50); --bg-2: var(--grigio-50); --surface: var(--grigio-0); --surface-alt: var(--grigio-50); --surface-hover: var(--grigio-100); --text: var(--grigio-900); --text-2: var(--grigio-500); --text-secondary: var(--grigio-500); --text-3: var(--grigio-400); --text-light: var(--grigio-0); --border: var(--grigio-200); --border-forte: var(--grigio-300); --code-bg: var(--grigio-100); --accent: var(--wa-600); --accent-2: var(--wa-700); --accent-vivo: var(--wa-500); --accent-debole: var(--wa-50); --su-accento: #ffffff; --nonletti: var(--wa-400); --su-nonletti: var(--grigio-900); /* --- Conversazione --- */ --chat-sfondo: #efeae2; --bolla-entrata: #ffffff; --su-bolla-entrata: var(--grigio-900); --bolla-uscita: var(--wa-100); --su-bolla-uscita: var(--grigio-900); --green: var(--wa-600); --success: var(--wa-600); --success-debole: var(--wa-50); /* Il rosso del marchio Tatech, qui nel ruolo di "attenzione, e' definitivo". */ --red: #cf1224; --danger: #cf1224; --danger-debole: #fdecee; --yellow: #8a5a00; --warning: #8a5a00; --warning-debole: #fdf3e2; --info: #027eb5; --info-debole: #e7f4fb; --sidebar-bg: var(--grigio-900); --sidebar-text: var(--grigio-400); --sidebar-active: #ffffff; --sidebar-attivo-bg: var(--wa-600); /* --- Tipografia --- */ --font: 'SF Mono', 'Consolas', 'Liberation Mono', Menlo, monospace; --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Roboto, Arial, sans-serif; --t-xs: 11px; --t-sm: 12px; --t-base: 13px; --t-md: 15px; --t-lg: 18px; --t-xl: 22px; --t-2xl: 28px; /* --- Spaziature --- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; /* Il margine della pagina, in un posto solo: l'intestazione del cliente ci esce fuori con un margine negativo, e quando i due numeri non erano lo stesso (20 nel contenuto, 12 sul telefono) la pagina scorreva in orizzontale di 8 pixel senza che si capisse perche'. */ --pad-pagina: 20px; /* Altezza della barra che compare solo sul telefono. */ --h-barra: 52px; /* --- Forma --- */ --r-sm: 4px; --r: 8px; --r-lg: 12px; --r-xl: 16px; --r-tonda: 999px; --shadow-sm: 0 1px 2px rgba(11,20,26,0.06); --shadow: 0 1px 3px rgba(11,20,26,0.08), 0 1px 2px rgba(11,20,26,0.04); --shadow-md: 0 4px 12px rgba(11,20,26,0.10), 0 2px 4px rgba(11,20,26,0.05); --shadow-lg: 0 12px 32px rgba(11,20,26,0.14), 0 4px 8px rgba(11,20,26,0.07); --anello: 0 0 0 3px rgba(0,168,132,0.22); --modal-bg: rgba(11,20,26,0.5); --tr-veloce: 120ms cubic-bezier(0.4, 0, 0.2, 1); --tr: 180ms cubic-bezier(0.4, 0, 0.2, 1); } /* === SCURO — i colori del tema scuro di WhatsApp Web === */ [data-theme="dark"] { --grigio-0: #0b141a; /* fondo della conversazione */ --grigio-25: #0d1a21; --grigio-50: #111b21; /* fondo dell'applicazione */ --grigio-100: #182229; --grigio-200: #202c33; /* pannelli */ --grigio-300: #2a3942; /* bordi */ /* Stessa correzione al contrario: #667781 sul pannello scuro dava 3,08:1. Adesso il testo tenue sta a 5,9:1 e il secondario a 7,2:1. */ --grigio-400: #9aa8b1; --grigio-500: #aebac1; --grigio-600: #ccd0d5; --grigio-700: #ccd0d5; --grigio-800: #dfe3e7; --grigio-900: #e9edef; /* testo */ --bg: var(--grigio-50); --bg-alt: var(--grigio-100); --bg-2: var(--grigio-100); --surface: var(--grigio-200); --surface-alt: var(--grigio-100); --surface-hover: var(--grigio-300); --text: var(--grigio-900); --text-2: var(--grigio-500); --text-secondary: var(--grigio-500); --text-3: var(--grigio-400); --text-light: #ffffff; --border: var(--grigio-300); --border-forte: #313d45; --code-bg: var(--grigio-100); /* Sul fondo scuro il verde puo' tornare quello vivo: contro #202C33 il contrasto c'e', ed e' esattamente quello che fa WhatsApp. */ --accent: var(--wa-500); --accent-2: var(--wa-300); --accent-vivo: var(--wa-500); --accent-debole: rgba(0,168,132,0.16); --su-accento: #04231c; --nonletti: var(--wa-500); --su-nonletti: #04231c; --chat-sfondo: #0b141a; --bolla-entrata: #202c33; --su-bolla-entrata: var(--grigio-900); --bolla-uscita: var(--wa-800); --su-bolla-uscita: var(--grigio-900); --green: var(--wa-500); --success: var(--wa-500); --success-debole: rgba(0,168,132,0.16); --red: #f2637a; --danger: #f2637a; --danger-debole: rgba(242,99,122,0.15); --yellow: #e0a33c; --warning: #e0a33c; --warning-debole: rgba(224,163,60,0.15); --info: #53bdeb; --info-debole: rgba(83,189,235,0.15); --sidebar-bg: #0b141a; --sidebar-text: var(--grigio-500); --sidebar-active: #ffffff; --sidebar-attivo-bg: var(--wa-800); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3); --shadow-lg: 0 12px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.4); --anello: 0 0 0 3px rgba(0,168,132,0.35); --modal-bg: rgba(0,0,0,0.7); } /* Chi ha chiesto meno animazioni non deve subirle: non e' una preferenza estetica, per qualcuno il movimento sullo schermo da' nausea. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Il contorno di messa a fuoco serve a chi naviga da tastiera: prima non c'era su nulla tranne le schede del cliente. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); font-size: var(--t-base); line-height: 1.55; -webkit-font-smoothing: antialiased; } /* La barra di scorrimento: quella di sistema su fondo scuro e' bianca e spacca il tema. */ * { scrollbar-width: thin; scrollbar-color: var(--grigio-300) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--grigio-300); border-radius: var(--r-tonda); border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--grigio-400); background-clip: content-box; } *::-webkit-scrollbar-track { background: transparent; } /* === TEMA === */ .theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: var(--r-sm); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--t-base); margin-left: auto; flex-shrink: 0; transition: border-color var(--tr), background var(--tr); } .theme-toggle:hover { border-color: var(--accent); background: rgba(255,255,255,0.06); } .login-theme-toggle { position: fixed; top: var(--s-4); right: var(--s-4); border-color: var(--border); color: var(--text-2); background: var(--surface); } /* === ACCESSO === */ .login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: var(--s-4); } .login-box { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-8); box-shadow: var(--shadow-lg); } .login-box h1 { text-align: center; font-size: var(--t-lg); font-weight: 650; margin-bottom: var(--s-1); letter-spacing: -0.2px; } .login-box .subtitle { text-align: center; color: var(--text-2); margin-bottom: var(--s-6); font-size: var(--t-sm); } .login-box .error-msg { background: var(--danger-debole); color: var(--danger); padding: var(--s-3); font-size: var(--t-sm); margin-bottom: var(--s-3); display: none; border-radius: var(--r); border: 1px solid var(--danger); } .logo-login { display: block; margin: 0 auto var(--s-5); height: 44px; width: auto; } /* === IMPIANTO === */ .app-layout { display: flex; min-height: 100vh; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 200px; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; z-index: 100; } .sidebar-header { padding: var(--s-4) var(--s-4) var(--s-3); border-bottom: 1px solid rgba(255,255,255,0.07); } .logo { display: flex; align-items: center; gap: var(--s-2); } .logo img { height: 26px; width: auto; } .sidebar-header h2 { font-size: var(--t-base); font-weight: 700; color: #fff; letter-spacing: 0.2px; } .sidebar-header small { color: var(--grigio-500); font-size: var(--t-xs); } .sidebar-nav { flex: 1; padding: var(--s-3) var(--s-2); display: flex; flex-direction: column; gap: 2px; } .sidebar-nav a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r); color: var(--sidebar-text); text-decoration: none; font-size: var(--t-base); font-weight: 500; transition: background var(--tr-veloce), color var(--tr-veloce); } .sidebar-nav a:hover { color: #fff; background: rgba(255,255,255,0.05); } /* La voce attiva ha il fondo pieno del marchio: era una linguetta di 2px sul bordo sinistro, che a colpo d'occhio non si vedeva. */ .sidebar-nav a.active { color: var(--sidebar-active); background: var(--sidebar-attivo-bg); font-weight: 600; } .sidebar-nav a .icon { width: 18px; text-align: center; font-size: var(--t-md); flex-shrink: 0; } .nav-divider { height: 1px; background: rgba(255,255,255,0.07); margin: var(--s-2) var(--s-3); } .sidebar-footer { padding: var(--s-3) var(--s-4); border-top: 1px solid rgba(255,255,255,0.07); font-size: var(--t-xs); } .sidebar-footer .user-info { color: var(--grigio-500); margin-bottom: var(--s-2); } .sidebar-footer .user-info strong { color: var(--sidebar-active); font-weight: 600; } .btn-logout { background: none; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-sm); color: var(--sidebar-text); padding: var(--s-2) var(--s-3); cursor: pointer; font-size: var(--t-xs); width: 100%; font-family: var(--font-sans); transition: background var(--tr-veloce), color var(--tr-veloce); } .btn-logout:hover { background: rgba(255,255,255,0.08); color: #fff; } .main-content { margin-left: 200px; flex: 1; padding: var(--pad-pagina); min-height: 100vh; min-width: 0; } /* === COMPONENTI === */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; } .page-header h1 { font-size: var(--t-xl); font-weight: 650; letter-spacing: -0.3px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-4); box-shadow: var(--shadow-sm); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; } .card-header h3 { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-3); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-sm); transition: box-shadow var(--tr), transform var(--tr); } .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .stat-card .stat-value { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; } .stat-card .stat-label { font-size: var(--t-sm); color: var(--text-2); margin-top: var(--s-1); } .stat-card.accent .stat-value { color: var(--accent); } .stat-card.success .stat-value { color: var(--success); } .stat-card.warning .stat-value { color: var(--warning); } /* --- Moduli --- */ .form-group { margin-bottom: var(--s-4); } .form-group label { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--text-2); margin-bottom: var(--s-1); text-transform: uppercase; letter-spacing: 0.4px; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); } .form-control { width: 100%; padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font-size: var(--t-base); font-family: var(--font-sans); transition: border-color var(--tr-veloce), box-shadow var(--tr-veloce); } .form-control::placeholder { color: var(--text-3); } .form-control:hover:not(:disabled) { border-color: var(--border-forte); } .form-control:focus { outline: none; border-color: var(--accent); box-shadow: var(--anello); } .form-control:disabled { background: var(--surface-alt); color: var(--text-3); cursor: not-allowed; } textarea.form-control { resize: vertical; min-height: 72px; line-height: 1.55; } select.form-control { cursor: pointer; } /* --- Pulsanti --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font-size: var(--t-base); font-weight: 600; font-family: var(--font-sans); cursor: pointer; white-space: nowrap; transition: background var(--tr-veloce), border-color var(--tr-veloce), color var(--tr-veloce), box-shadow var(--tr-veloce); } .btn:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-forte); } .btn:active:not(:disabled) { transform: translateY(0.5px); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--su-accento); border-color: var(--accent); } .btn-primary:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); } .btn-success { background: var(--success); color: #fff; border-color: var(--success); } .btn-success:hover:not(:disabled) { filter: brightness(1.08); background: var(--success); } /* Distruttivo: contorno e non pieno. Il pieno rosso e' del marchio, e due bottoni rossi affiancati — "Salva" e "Elimina" — si distinguerebbero solo dalla parola sopra. Qui il pieno arriva solo passandoci sopra, cioe' quando si sta gia' prendendo la mira. */ .btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); } .btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); } .btn-secondary { background: var(--surface-alt); color: var(--text); border-color: var(--border); } .btn-secondary:hover:not(:disabled) { background: var(--surface-hover); } .btn-outline { background: transparent; } .btn-sm { padding: var(--s-1) var(--s-3); font-size: var(--t-sm); } .btn-lg { padding: var(--s-3) var(--s-5); font-size: var(--t-md); } /* --- Tabelle --- */ .table-wrapper { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); } table { width: 100%; border-collapse: collapse; } th, td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--border); font-size: var(--t-base); } th { font-weight: 600; color: var(--text-2); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.5px; background: var(--surface-alt); position: sticky; top: 0; z-index: 1; white-space: nowrap; } tbody tr { transition: background var(--tr-veloce); } tbody tr:hover { background: var(--surface-hover); } tbody tr:last-child td { border-bottom: none; } td .agent-id { font-family: var(--font); background: var(--code-bg); padding: 2px var(--s-2); border-radius: var(--r-sm); font-size: var(--t-xs); color: var(--text-2); } /* --- Etichette di stato --- */ .badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: 3px var(--s-2); border-radius: var(--r-tonda); font-size: var(--t-xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.3px; background: var(--surface-alt); color: var(--text-2); } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge-connected { color: var(--success); background: var(--success-debole); } .badge-disconnected { color: var(--danger); background: var(--danger-debole); } .badge-connecting, .badge-qr_pending { color: var(--warning); background: var(--warning-debole); } /* Un'etichetta che non e' ne' buona ne' cattiva: dice dove gira una cosa, non se e' rotta. Senza questa, "Server" si sarebbe letto come un allarme. */ .badge-neutro { color: var(--text-2); background: var(--surface-alt); } .badge-connecting::before, .badge-qr_pending::before { animation: pulse 1.5s infinite; } /* --- Finestre --- */ .modal-overlay { position: fixed; inset: 0; background: var(--modal-bg); display: flex; align-items: center; justify-content: center; z-index: 9500; opacity: 0; visibility: hidden; transition: opacity var(--tr), visibility var(--tr); padding: var(--s-4); backdrop-filter: blur(2px); } .modal-overlay.active { opacity: 1; visibility: visible; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-6); width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); transform: translateY(8px) scale(0.99); transition: transform var(--tr); } .modal-overlay.active .modal { transform: none; } /* Il ripristino non e' una finestrella: e' una procedura in quattro passi, e ognuno vuole spazio — la tabella delle copie, l'esplora dentro la copia, l'esplora delle cartelle del computer. Stretta com'era, si vedevano tre righe per volta e si perdeva il filo di dove si era arrivati. */ .modal.larga { max-width: 860px; max-height: 92vh; } /* La barra dei passi: dice sempre a che punto si e' e quanto manca. I passi gia' fatti sono cliccabili per tornare indietro senza perdere quello che si e' scelto; quelli davanti no — non si sceglie dove mettere qualcosa prima di aver detto cosa. */ .passi { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); } .passo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: var(--t-xs); white-space: nowrap; } .passo .n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--border); color: var(--text-2); font-size: 11px; font-weight: 700; } .passo.fatto { cursor: pointer; border-color: var(--success); color: var(--text); } .passo.fatto .n { background: var(--success); color: #fff; } .passo.fatto:hover { background: var(--surface-hover); } .passo.attuale { border-color: var(--accent); background: var(--surface); color: var(--text); font-weight: 600; } .passo.attuale .n { background: var(--accent); color: #fff; } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); border-bottom: 1px solid var(--border); padding-bottom: var(--s-4); } .modal-header h3 { font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.2px; } .modal-close { background: none; border: none; font-size: var(--t-lg); cursor: pointer; color: var(--text-3); line-height: 1; padding: var(--s-1); border-radius: var(--r-sm); transition: color var(--tr-veloce), background var(--tr-veloce); } .modal-close:hover { color: var(--text); background: var(--surface-hover); } .modal-footer { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); } /* --- QR --- */ .qr-container { background: #fff; padding: var(--s-4); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; margin: var(--s-3) 0; } .qr-image { border-radius: var(--r); } .qr-placeholder { background: var(--surface-alt); border: 1px dashed var(--border-forte); border-radius: var(--r-lg); padding: var(--s-8) var(--s-6); text-align: center; color: var(--text-2); margin: var(--s-3) 0; font-size: var(--t-sm); } /* --- Chat con l'AI --- */ .chat-layout { display: flex; height: calc(100vh - var(--s-10) - var(--s-4)); gap: var(--s-4); } .chat-sidebar { width: 260px; display: flex; flex-direction: column; } .chat-sidebar .sessions-list { flex: 1; overflow-y: auto; } .chat-session-item { padding: var(--s-3); border-radius: var(--r); cursor: pointer; transition: background var(--tr-veloce); } .chat-session-item:hover { background: var(--surface-hover); } .chat-session-item.active { background: var(--accent-debole); box-shadow: inset 3px 0 0 var(--accent); } .chat-session-item .session-title { font-size: var(--t-base); font-weight: 600; } .chat-session-item .session-meta { font-size: var(--t-xs); color: var(--text-3); margin-top: 2px; } .chat-main { flex: 1; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .chat-messages { flex: 1; overflow-y: auto; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); } .chat-message { max-width: min(80%, 640px); padding: var(--s-3) var(--s-4); font-size: var(--t-base); line-height: 1.55; border-radius: var(--r-lg); white-space: pre-wrap; word-break: break-word; } .chat-message.user { background: var(--accent); color: var(--su-accento); align-self: flex-end; border-bottom-right-radius: var(--r-sm); } .chat-message.assistant { background: var(--surface-alt); color: var(--text); align-self: flex-start; border: 1px solid var(--border); border-bottom-left-radius: var(--r-sm); } .chat-message pre { background: var(--code-bg); padding: var(--s-3); border-radius: var(--r); overflow-x: auto; margin: var(--s-2) 0; font-size: var(--t-sm); font-family: var(--font); } .chat-message code { font-size: var(--t-sm); font-family: var(--font); } .chat-message.user pre, .chat-message.user code { background: rgba(255,255,255,0.18); } .chat-input-area { display: flex; gap: var(--s-2); padding: var(--s-3); border-top: 1px solid var(--border); } .chat-input { flex: 1; padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r); font-size: var(--t-base); font-family: var(--font-sans); resize: none; background: var(--bg); color: var(--text); } .chat-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--anello); } .chat-send { padding: var(--s-2) var(--s-5); background: var(--accent); color: var(--su-accento); border: none; border-radius: var(--r); cursor: pointer; font-weight: 600; font-size: var(--t-sm); transition: background var(--tr-veloce); } .chat-send:hover:not(:disabled) { background: var(--accent-2); } .chat-send:disabled { opacity: 0.4; cursor: not-allowed; } .chat-empty { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--text-3); font-size: var(--t-sm); text-align: center; padding: var(--s-6); } /* --- Schede --- Ce n'erano due sistemi con aspetto diverso, `.tab` e `.ctab`: qui hanno la stessa forma, cosi' passando da una pagina all'altra non sembra un altro programma. I nomi restano due perche' li usa il JS. */ .tabs, .tab-nav { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--border); margin-bottom: var(--s-4); overflow-x: auto; } .tab { padding: var(--s-2) var(--s-4); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-2); font-size: var(--t-base); font-weight: 600; font-family: var(--font-sans); cursor: pointer; white-space: nowrap; transition: color var(--tr-veloce), border-color var(--tr-veloce); } .tab:hover { color: var(--text); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); } .file-editor { font-family: var(--font); min-height: 280px; font-size: var(--t-sm); line-height: 1.65; } /* --- Griglie --- `griglia-2/3/211` erano scritte a mano dentro l'attributo `style` di otto div: cosi' non si potevano stringere sul telefono, perche' uno stile in linea non lo sposta nessuna regola. Adesso sono classi, e sotto i 700 pixel diventano una colonna sola (vedi la sezione TELEFONO). */ .griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } .griglia-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3); } .griglia-211 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-3); } /* Elenco a sinistra, dettaglio a destra (i cron): sul telefono uno sotto l'altro, con l'elenco basso quanto basta a vederne tre. */ .due-colonne { display: flex; gap: var(--s-3); min-height: 200px; } .due-colonne-lato { width: 280px; border-right: 1px solid var(--border); overflow-y: auto; max-height: 350px; } .due-colonne-corpo { flex: 1; padding-left: var(--s-3); min-width: 0; } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } .detail-grid .full-width { grid-column: 1 / -1; } .grid { display: grid; gap: var(--s-3); } .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); } @media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } } /* --- Coda messaggi --- */ .queue-item { padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: var(--s-2); background: var(--surface); } .queue-detail { font-size: var(--t-sm); color: var(--text-2); } /* --- Avvisi --- */ .toast-container { position: fixed; bottom: var(--s-5); right: var(--s-5); z-index: 9999; display: flex; flex-direction: column-reverse; gap: var(--s-2); max-width: min(420px, calc(100vw - 40px)); } .toast { padding: var(--s-3) var(--s-4); color: #fff; font-size: var(--t-base); font-weight: 500; border-radius: var(--r); box-shadow: var(--shadow-lg); animation: slideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1); } .toast-success { background: var(--success); } .toast-error { background: var(--danger); color: #fff; } /* L'avviso informativo aveva il testo BIANCO su un grigio chiaro: 1,29:1, cioe' praticamente invisibile nel tema chiaro. Si usa un fondo scuro fisso, che funziona in tutti e due i temi — un avviso che non si legge tanto vale non mostrarlo. */ .toast-info { background: #2a3942; color: #fff; } @keyframes slideIn { from { transform: translateX(40px); opacity: 0; } } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes spin { to { transform: rotate(360deg); } } /* --- Menu a tendina --- */ .dropdown { position: relative; display: inline-block; } .dropdown-toggle { cursor: pointer; } .dropdown-menu { display: none; position: fixed; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg); z-index: 9000; padding: var(--s-1); overflow: hidden; } .dropdown-menu.show { display: block; } .dropdown-menu a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--t-base); color: var(--text); cursor: pointer; text-decoration: none; } .dropdown-menu a:hover { background: var(--surface-hover); } .dropdown-menu a.text-danger, .dropdown-menu a.danger { color: var(--danger); } .btn-delete-session { background: none; border: none; color: var(--text-3); font-size: var(--t-md); cursor: pointer; padding: 2px var(--s-1); line-height: 1; border-radius: var(--r-sm); transition: color var(--tr-veloce), background var(--tr-veloce); } .btn-delete-session:hover { color: var(--danger); background: var(--danger-debole); } /* Testo di stato riusato ovunque nei template di app.js */ .ok { color: var(--success); } .ko, .danger, .text-danger { color: var(--danger); } .warn { color: var(--warning); } .hint { font-size: var(--t-sm); color: var(--text-2); line-height: 1.55; } .scope-check { accent-color: var(--accent); } /* ============================================================ I COMPUTER DEL CLIENTE E LA SUA RETE ============================================================ Un cliente puo' avere piu' computer col bridge. Le icone dicono chi fa cosa senza doverlo leggere: prima si sapeva solo che "il bridge" era collegato, senza sapere quale ne' cosa avesse attaccato. ============================================================ */ .disp-griglia { display: block; } .disp-griglia-interna { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); } .disp-riepilogo { font-size: var(--t-sm); color: var(--text-2); margin-bottom: var(--s-3); } /* Un computer acceso che il server rifiuta: non e' un dettaglio da log. */ .disp-respinto { border: 1px solid var(--warning); background: var(--warning-debole); color: var(--text); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); font-size: var(--t-sm); line-height: 1.55; } .disp-respinto code { font-family: var(--font); font-size: var(--t-xs); } .disp-scheda { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4); background: var(--surface); display: flex; flex-direction: column; gap: var(--s-3); } .disp-scheda.spento { border-color: var(--danger); } .disp-testa { display: flex; align-items: center; gap: var(--s-2); } .disp-pallino { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--text-3); } .disp-pallino.acceso { background: var(--success); box-shadow: 0 0 0 3px var(--success-debole); } /* Rosso e non grigio: un computer registrato ma non collegato e' una cosa a cui guardare, non un dettaglio in secondo piano. Il grigio lo faceva sembrare "non pertinente". */ .disp-pallino.spento { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-debole); } /* Il terzo stato: collegato, ma c'e' qualcosa da guardare — un backup fallito, una sessione WhatsApp che non si aggancia. Prima esistevano solo verde e rosso, e un computer che lavorava ma aveva un problema si confondeva con uno spento. */ .disp-pallino.attenzione { background: var(--warning, #b8860b); box-shadow: 0 0 0 3px var(--warning-debole, rgba(184,134,11,.18)); } .attenzione { color: var(--warning, #b8860b); font-weight: 600; } .disp-nome { font-weight: 650; font-size: var(--t-md); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .disp-nome-clic { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; } .disp-nome-clic:hover { color: var(--accent); } .disp-ver { font-family: var(--font); font-size: var(--t-xs); color: var(--text-3); } /* --- La riga "Stato del computer": CPU, memoria, errori, storia --- */ /* Non un riquadro sopra tutto: una riga in piu' nella tabella, che si apre sotto quella del computer. bg-alt la stacca dalle righe normali senza sembrare un errore o un avviso. */ .diag-riga td { background: var(--bg-alt); padding: var(--s-4); border-top: none; } .diag-riga[hidden] { display: none; } .diag-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); } .diag-testa h4 { margin: 0; } .diag-testa-azioni { display: flex; gap: var(--s-2); } .diag-barra-riga { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); } .diag-barra-etichetta { flex: 0 0 auto; min-width: 90px; font-size: var(--t-sm); color: var(--text-2); } .diag-barra-fondo { flex: 1; height: 10px; background: var(--bg-alt); border-radius: var(--r-tonda); overflow: hidden; } .diag-barra-piena { height: 100%; background: var(--success); border-radius: var(--r-tonda); } .diag-barra-piena.diag-barra-critica { background: var(--danger); } .diag-barra-valore { flex: 0 0 auto; width: 40px; text-align: right; font-size: var(--t-sm); font-weight: 600; } /* Il grafichetto accanto alla barra: linea sola, scala fissa 0-100, niente assi. La barra dice "quanto adesso", la linea dice "sta salendo o no" — sono due domande diverse e per questo stanno una accanto all'altra. Transizione morbida sulla barra perche' si aggiorna ogni tre secondi e uno scatto secco sembrerebbe un guasto. */ .diag-barra-piena { transition: width .35s ease, background-color .35s ease; } .diag-spark-box { flex: 0 0 auto; width: 132px; height: 30px; line-height: 0; } .diag-spark { width: 132px; height: 30px; display: block; overflow: visible; } .diag-spark-linea { fill: none; stroke: var(--success); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .diag-spark-area { fill: var(--success); opacity: .14; stroke: none; } .diag-spark-critica .diag-spark-linea { stroke: var(--danger); } .diag-spark-critica .diag-spark-area { fill: var(--danger); } .diag-spark-nota { color: var(--text-2); } /* Sotto i 700px il grafico se ne va: in quella larghezza toglierebbe spazio all'etichetta e alla cifra, che sono quello che si legge davvero. */ @media (max-width: 700px) { .diag-spark-box { display: none; } .diag-spark-nota { display: none; } } .diag-errori, .diag-storia { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-lg); margin-top: var(--s-2); } .diag-errore { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); border-left: 3px solid var(--info); } .diag-errore:last-child { border-bottom: none; } .diag-errore-grave { border-left-color: var(--danger); } .diag-errore-avviso { border-left-color: var(--warning, #b8860b); } .diag-errore-testa { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--t-sm); } .diag-errore-dettagli { margin-top: 4px; font-size: var(--t-xs); color: var(--text-2); word-break: break-word; } .diag-storia-riga { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); font-size: var(--t-sm); } .diag-storia-riga:last-child { border-bottom: none; } .disp-icone { display: flex; gap: var(--s-2); } .disp-cap { width: 30px; height: 30px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; font-size: var(--t-md); background: var(--surface-alt); border: 1px solid var(--border); } /* Due cose diverse devono sembrare diverse: un'icona che dice soltanto "ce l'ha" (rete, stampanti) e' piatta e senza cornice; una su cui si clicca (schermo, terminale, file) e' un tasto vero, con bordo, ombra e mano. */ .disp-cap.si { background: transparent; border-color: transparent; opacity: 0.6; } .disp-cap.si.attiva { opacity: 1; background: var(--success-debole); border: 1px solid var(--success); box-shadow: 0 1px 2px rgba(11, 20, 26, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.06); } /* Il menu piccolo sotto un'icona (PowerShell o prompt dei comandi). */ .menu-rapido { position: fixed; z-index: 9700; min-width: 200px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; } .menu-rapido button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: transparent; border: 0; color: var(--text); text-align: left; padding: 8px 12px; border-radius: var(--r); cursor: pointer; font: inherit; font-size: var(--t-sm); } .menu-rapido button:hover, .menu-rapido button:focus { background: var(--surface-alt); outline: none; } .menu-rapido button small { color: var(--text-2); font-size: var(--t-xs); } /* Un'icona su cui si puo' cliccare deve sembrarlo prima del clic, non dopo: il cursore a mano da solo si scopre solo passandoci sopra per caso. */ button.disp-cap { font: inherit; cursor: pointer; padding: 0; } .disp-cap.attiva:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 3px 8px rgba(11, 20, 26, 0.18); } .disp-cap.attiva:active { transform: none; } .disp-cap.attiva:focus-visible { outline: 2px solid var(--success); outline-offset: 1px; } /* Assente e "non lo sappiamo" non sono la stessa cosa e non devono sembrarlo: un bridge vecchio non dichiara le proprie capacita', non e' che non le abbia. */ .disp-cap.no { opacity: 0.28; filter: grayscale(1); } .disp-cap.ignota { opacity: 0.45; filter: grayscale(1); border-style: dashed; } .disp-righe { font-size: var(--t-sm); color: var(--text-2); display: flex; flex-direction: column; gap: 2px; } /* Barra di ricerca e filtri sopra una tabella. Una sola, usata dai computer e dai clienti: due tabelle che si cercano nello stesso modo devono anche somigliarsi, o ogni elenco diventa un posto nuovo da imparare. */ .barra-filtri { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-3); } .barra-filtri .form-control { width: auto; } .barra-filtri .campo-cerca { flex: 1; min-width: 200px; } .barra-filtri .conteggio { font-size: var(--t-xs); color: var(--text-3); white-space: nowrap; margin-left: auto; } .disp-sotto { font-size: var(--t-xs); color: var(--text-3); margin-top: 2px; } /* La riga di sintesi di un'esecuzione di backup. Il messaggio d'errore di kopia per un server con file aperti e' arrivato a 249.452 caratteri: senza questo tetto la colonna si allargava fino a mandare la pagina fuori schermo, e lo storico si scorreva solo in orizzontale. Il testo intero sta sotto "vedi dettaglio". */ .riga-sintesi { max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-dettaglio { background: none; border: 0; padding: 0; margin-top: 2px; font-family: inherit; font-size: var(--t-xs); color: var(--accent); text-decoration: underline; cursor: pointer; } .link-dettaglio:hover { color: var(--accent-2); } /* Il log per intero dentro la modale: a scorrere e' lui, non la finestra, se no il pulsante "Chiudi" finisce a migliaia di righe di distanza. */ .testo-integrale { max-height: 55vh; overflow: auto; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s-3); } .testo-integrale pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font); font-size: var(--t-xs); color: var(--text-2); } /* Un allarme sulla riga della macchina: si deve vedere scorrendo la tabella, senza doverlo leggere. */ .disp-allarme { font-size: var(--t-xs); margin-top: 3px; padding: 2px 6px; border-radius: 4px; background: var(--warning-debole); color: var(--warning); display: inline-block; } .disp-allarme.grave { background: var(--danger-debole); color: var(--danger); } /* Nella tabella le celle sono strette: le azioni non devono andare a capo una per riga. */ .disp-azioni .btn-sm { white-space: nowrap; } /* Il ripristino: si sfoglia dentro una copia come dentro una cartella, ogni riga ha la sua casella di spunta, e quella scelta resta evidente — nel giorno in cui si ripristina non ci si puo' permettere di non essere sicuri di cosa si sta riportando indietro. Una riga "coperta" (dentro una cartella gia' spuntata piu' sopra) si vede spenta: e' gia' presa, non si spunta da sola, e la scritta accanto dice perche' invece di lasciarlo indovinare. */ /* L'elenco delle copie e' una TABELLA e non una tendina: su un server con piu' dischi ce n'e' una per disco per notte, e prima di scegliere da dove riprendere qualcosa si guardano quale disco, quanto pesa e quanti file non sono stati letti. Dentro un menu a tendina si vede una riga per volta e non si confrontano. */ .rip-copie { max-height: 190px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-lg); } .rip-tabella { width: 100%; border-collapse: collapse; font-size: var(--t-xs); } .rip-tabella th, .rip-tabella td { padding: var(--s-2) var(--s-3); text-align: left; white-space: nowrap; } .rip-tabella th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-2); font-weight: 600; z-index: 1; } .rip-tabella td.num, .rip-tabella th.num { text-align: right; font-variant-numeric: tabular-nums; } .rip-copia-riga { cursor: pointer; border-top: 1px solid var(--border); } .rip-copia-riga:hover { background: var(--surface-hover); } .rip-copia-riga.scelta { background: var(--success-debole); } .rip-copia-riga.scelta td:first-child { box-shadow: inset 3px 0 0 var(--success); } .rip-percorso { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: var(--s-2); font-size: var(--t-xs); } .rip-lista { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-lg); } .rip-riga { display: flex; align-items: center; gap: var(--s-2); justify-content: space-between; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); } .rip-riga:last-child { border-bottom: none; } .rip-riga:hover { background: var(--surface-hover); } .rip-riga.scelta { background: var(--success-debole); border-left: 3px solid var(--success); } .rip-riga.coperta { opacity: 0.6; } .rip-spunta { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; min-width: 0; flex: 1; } .rip-spunta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Il riepilogo di quanto e' scelto: sempre visibile, dal passo "cosa" al passo "dove", con la possibilita' di togliere una voce senza tornare a scovarla nella lista — vedi ripRidisegnaSelezionati() in app.js. */ .rip-selezionati { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; } .rip-selezionato { display: inline-flex; align-items: center; gap: 6px; background: var(--success-debole); border: 1px solid var(--success); border-radius: var(--r-sm); padding: 2px 6px; font-size: var(--t-xs); } .rip-selezionato button { background: none; border: none; cursor: pointer; color: var(--text-2); font-size: var(--t-base); line-height: 1; } /* Il selettore delle cartelle. Sta sopra la modale del piano (z-index 9600 contro 9500) perche' quella deve restare dov'e' con quello che ci hai gia' scritto dentro. */ .sfoglia-finestra { width: min(720px, 96vw); height: min(560px, 88vh); } /* La riga per scrivere un percorso a mano (un NAS non ancora raggiungibile non compare cliccando: va scritto) — vedi carica() in sfogliaCartelle(). */ .sfoglia-vai { display: flex; gap: var(--s-2); padding: 0 var(--s-4) var(--s-3); flex-shrink: 0; } .sfoglia-vai input { flex: 1; } .sfoglia-corpo { flex: 1; min-height: 0; overflow-y: auto; background: var(--surface); } .sfoglia-riga { display: flex; align-items: center; gap: var(--s-3); justify-content: space-between; padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--border); } .sfoglia-riga:hover { background: var(--surface-hover); } .sfoglia-riga.coperta { opacity: 0.6; } .sfoglia-spunta { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; min-width: 0; } .sfoglia-spunta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sfoglia-piede { border-top: 1px solid var(--border); padding: var(--s-3) var(--s-4); background: var(--surface-alt); display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; flex-wrap: wrap; } .sfoglia-scelte { display: flex; gap: var(--s-2); flex-wrap: wrap; flex: 1; min-width: 0; } .sfoglia-scelta { display: inline-flex; align-items: center; gap: 6px; background: var(--success-debole); border: 1px solid var(--success); border-radius: var(--r-sm); padding: 2px 6px; font-size: var(--t-xs); } .sfoglia-scelta button { background: none; border: none; cursor: pointer; color: var(--text-2); font-size: var(--t-base); line-height: 1; } .sfoglia-azioni { display: flex; gap: var(--s-2); flex-shrink: 0; } /* Il grafico dei backup: una barra per esecuzione, la piu' alta al 100%. Quella "principale" (il primo backup di un computer+destinazione) si vede diversa dalle altre — vedi il commento su renderBackupGrafico() in app.js sul perche' l'altezza da sola non basta a dire cos'e' incrementale. */ .backup-grafico-barre { display: flex; align-items: flex-end; gap: 2px; height: 110px; padding: var(--s-3); margin-bottom: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-alt); overflow-x: auto; } /* `backup-grafico-barra`, NON `backup-barra`: quel nome lo usa anche la barra di avanzamento di un backup in corso (piu' sotto), che veniva dopo nel foglio e vinceva: tutte le barre del grafico prendevano il suo grigio, e restavano colorate solo quelle fallite. "Non c'e' niente di verde" (Corvezzo, 12/09/2026). */ .backup-grafico-barra { flex: 1 0 4px; min-width: 4px; max-width: 22px; min-height: 3px; background: var(--accent); border-radius: 2px 2px 0 0; } .backup-grafico-barra.principale { background: var(--warning); } .backup-grafico-barra.errore { background: var(--danger); } .backup-grafico-legenda { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); font-size: var(--t-xs); color: var(--text-2); } .backup-legenda-pallino { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--accent); margin-right: 4px; vertical-align: middle; } .backup-legenda-pallino.principale { background: var(--warning); } .backup-legenda-pallino.errore { background: var(--danger); } /* I giorni dei backup: una casella per giorno per computer, colorata da com'e' FINITO il giorno (services/backup-giorni.js). E' la prima cosa della scheda perche' risponde alla prima domanda: sta funzionando? */ .backup-giorni { padding: var(--s-3); margin-bottom: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-alt); } .backup-giorni-riga { display: flex; align-items: center; gap: var(--s-3); margin-bottom: 4px; } .backup-giorni-nome { flex: 0 0 150px; font-size: var(--t-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .backup-giorni-celle { display: flex; gap: 3px; overflow-x: auto; } .backup-giorno { display: inline-block; flex: 0 0 14px; width: 14px; height: 14px; border-radius: 3px; background: var(--border); } .backup-giorno.ok { background: var(--success); } .backup-giorno.parziale { background: var(--warning); } .backup-giorno.errore { background: var(--danger); } .backup-giorno.in_corso { background: var(--text-2); } .backup-grafico-legenda .backup-giorno { width: 10px; height: 10px; flex-basis: 10px; margin-right: 4px; vertical-align: middle; } @media (max-width: 700px) { .backup-giorni-nome { flex-basis: 90px; } } /* Il cruscotto della scheda Stato: pochi numeri grandi, e sotto solo i problemi veri. Se non c'e' niente che non va, non c'e' niente da leggere. */ .cruscotto { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); } .cruscotto-tessera { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); background: var(--surface-alt); } .cruscotto-tessera.ok { border-color: var(--success); background: var(--success-debole); } .cruscotto-tessera.ko { border-color: var(--danger); background: var(--danger-debole); } .cruscotto-tessera.attenzione { border-color: var(--warning, #b8860b); } .cruscotto-valore { font-size: var(--t-xl); font-weight: 700; line-height: 1.2; } .cruscotto-su { font-size: var(--t-sm); font-weight: 500; color: var(--text-2); } .cruscotto-etichetta { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-2); margin-top: 2px; } .cruscotto-nota { font-size: var(--t-xs); color: var(--text-3); margin-top: var(--s-1); } button.cruscotto-tessera { font: inherit; text-align: left; width: 100%; } .cruscotto-tessera.apribile { cursor: pointer; transition: transform var(--tr-veloce), box-shadow var(--tr-veloce); } .cruscotto-tessera.apribile:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); } .cruscotto-elenco { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-alt); } .cruscotto-elenco.evidenzia { animation: evidenziaProblemi 1.4s ease; } @keyframes evidenziaProblemi { 0% { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-debole); } 100% { border-color: var(--border); box-shadow: none; } } /* I pacchetti che il cliente ha, in chiaro nel cruscotto: la domanda "cosa gli abbiamo venduto" e' la prima che ci si fa aprendo un cliente, e la risposta non deve stare dietro un pulsante. */ .moduli-riga { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); } .modulo-pastiglia { font-size: var(--t-xs); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text-2); } .modulo-pastiglia.attivo { border-color: var(--success); background: var(--success-debole); color: var(--text); font-weight: 600; } .modulo-pastiglia.spento { opacity: 0.45; text-decoration: line-through; } .cruscotto-problemi { margin: var(--s-2) 0 0; padding-left: var(--s-5); font-size: var(--t-sm); color: var(--text-2); } .cruscotto-problemi li { margin-bottom: var(--s-1); } .disp-os { font-family: var(--font); font-size: var(--t-xs); color: var(--text-3); } .disp-azioni { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; margin-top: auto; } .disp-ruolo { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--accent); background: var(--accent-debole); padding: var(--s-1) var(--s-2); border-radius: var(--r-tonda); } /* --- Rete del cliente --- */ .rete-griglia { display: flex; flex-direction: column; gap: var(--s-1); } .rete-riga { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); } .rete-riga.assente { opacity: 0.6; } .rete-icona { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--t-lg); background: var(--surface-alt); border-radius: var(--r); } .rete-corpo { flex: 1; min-width: 0; } .rete-nome { font-weight: 600; font-size: var(--t-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rete-sotto { font-size: var(--t-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rete-rete { text-align: right; flex-shrink: 0; } .rete-ip { font-family: var(--font); font-size: var(--t-sm); } .rete-mac { font-family: var(--font); font-size: var(--t-xs); color: var(--text-3); } .rete-stato { flex-shrink: 0; font-size: var(--t-xs); font-weight: 600; padding: var(--s-1) var(--s-2); border-radius: var(--r-tonda); background: var(--surface-alt); color: var(--text-3); } .rete-stato.vivo { background: var(--success-debole); color: var(--success); } @media (max-width: 700px) { .rete-rete { display: none; } } /* ============================================================ ACCESSO "SOLO CONVERSAZIONI" ============================================================ Un utente del negozio con il solo permesso WhatsApp non deve vedere un gestionale con dentro una chat: deve vedere una finestra di messaggistica e basta. Via il menu, l'intestazione del cliente, le schede e tutte le altre carte. Si nasconde per struttura, non elencando gli id da spegnere: una carta aggiunta domani sarebbe invisibile per difetto invece di comparire a sorpresa a chi non deve vederla. ============================================================ */ body.solo-conversazioni .sidebar, body.solo-conversazioni .client-hero, body.solo-conversazioni #client-tabs, body.solo-conversazioni .page-header, body.solo-conversazioni #page-dashboard, body.solo-conversazioni #page-clients, body.solo-conversazioni #page-chat, body.solo-conversazioni #page-users, body.solo-conversazioni #page-automations, body.solo-conversazioni #page-antispam { display: none !important; } /* Dentro il dettaglio cliente resta in piedi solo la scheda delle conversazioni, e dentro quella solo la sua carta. */ body.solo-conversazioni .ctab-panel:not(#ctab-conversazioni) { display: none !important; } body.solo-conversazioni #ctab-conversazioni > .card:not(#section-whatsapp) { display: none !important; } /* Il cassetto della riparazione e' fuori da #page-client-detail (e' globale, vedi piu' sotto ".rip-drawer-tab"): senza questa riga un amministratore in modalita' solo-conversazioni lo vedrebbe comunque spuntare sul bordo, proprio quello che questa modalita' vuole evitare. */ body.solo-conversazioni .rip-drawer-tab, body.solo-conversazioni .rip-drawer { display: none !important; } /* `.app-layout` e' un flex in riga: la barra, inserita come fratello del contenuto, finiva come colonna a sinistra e rubava larghezza invece di stare sopra. In questa modalita' l'impaginazione torna a blocchi. */ body.solo-conversazioni .app-layout { display: block; } body.solo-conversazioni .main-content { margin-left: 0; padding: 0; min-height: 0; } body.solo-conversazioni #page-client-detail { display: block !important; } body.solo-conversazioni #section-whatsapp { margin: 0; border: none; border-radius: 0; box-shadow: none; } body.solo-conversazioni .wa-webchat { height: calc(100vh - 46px); border: none; border-radius: 0; } /* Una barra sottile con il nome del negozio e l'uscita: senza, non si capisce a nome di chi si sta scrivendo e non si sa come uscire. */ /* ACCESSO CLIENTE (utente con ruolo client, non "solo conversazioni"). Tutto nascosto PER DIFETTO: si vede solo quello che applyPermissions() ha segnato con .cliente-visibile, cioe' le schede e i riquadri dei permessi dati. Una scheda aggiunta domani al pannello nasce invisibile al cliente. */ body.accesso-cliente .page:not(#page-client-detail), body.accesso-cliente .sidebar-nav, body.accesso-cliente .campana, body.accesso-cliente .rip-drawer-tab, body.accesso-cliente .rip-drawer, body.accesso-cliente .client-hero-top > .btn, body.accesso-cliente .client-hero-agent, body.accesso-cliente .client-hero-state, body.accesso-cliente #client-tabs .ctab:not(.cliente-visibile), body.accesso-cliente .ctab-panel > :not(.cliente-visibile) { display: none !important; } .pc-cliente { display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: var(--s-2) 0; border-top: 1px solid var(--border); } .pc-cliente-nome { display: flex; gap: var(--s-2); align-items: center; } .sc-barra { display: none; } body.solo-conversazioni .sc-barra { display: flex; align-items: center; gap: var(--s-3); height: 46px; padding: 0 var(--s-4); background: var(--sidebar-bg); color: #fff; } .sc-barra img { height: 22px; width: auto; } .sc-nome { font-weight: 600; font-size: var(--t-base); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-utente { font-size: var(--t-xs); color: var(--grigio-500); } .sc-esci { background: transparent; border: 1px solid rgba(255,255,255,0.18); color: #fff; border-radius: var(--r-sm); padding: var(--s-1) var(--s-3); font-size: var(--t-xs); cursor: pointer; font-family: var(--font-sans); } .sc-esci:hover { background: rgba(255,255,255,0.1); } /* --- Terminale SSH e desktop remoto --- */ .rete-ssh, .rete-desktop { flex-shrink: 0; margin-left: var(--s-2); border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: var(--r-sm); padding: var(--s-1) var(--s-3); font-size: var(--t-xs); font-weight: 700; cursor: pointer; font-family: var(--font-sans); transition: background var(--tr-veloce), color var(--tr-veloce); } .rete-ssh:hover, .rete-desktop:hover { background: var(--accent); color: var(--su-accento); } .ssh-overlay { position: fixed; inset: 0; z-index: 9600; overscroll-behavior: contain; background: var(--modal-bg); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: var(--s-4); } /* Una finestra aperta sopra un'altra (i file sopra il desktop remoto): niente sfocatura, che sopra una tela che cambia venti volte al secondo costa un ricalcolo a ogni fotogramma e rallenta tutto. */ .ssh-overlay.sopra { backdrop-filter: none; background: rgba(0, 0, 0, 0.45); } /* Il desktop remoto: niente sfocatura del fondo. Vedi apriFinestraDesktop. */ .ssh-overlay.desk-overlay { backdrop-filter: none; background: rgba(0, 0, 0, 0.72); } .ssh-finestra { position: relative; width: min(1000px, 96vw); height: min(680px, 92vh); display: flex; flex-direction: column; background: #0b141a; border: 1px solid var(--border-forte); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .ssh-barra { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); background: var(--grigio-800); color: #e9edef; flex-shrink: 0; } .ssh-titolo { font-family: var(--font); font-size: var(--t-sm); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ssh-stato { font-size: var(--t-xs); color: var(--grigio-500); } .ssh-chiudi { background: transparent; border: none; color: #e9edef; font-size: var(--t-xl); line-height: 1; cursor: pointer; padding: 0 var(--s-1); } .ssh-chiudi:hover { color: var(--danger); } .ssh-term { flex: 1; min-height: 0; padding: var(--s-2); background: #0b141a; } .ssh-term .xterm { height: 100%; } /* Il desktop remoto riusa la finestra del terminale: cambia solo il contenuto, che qui e' la tela disegnata da guacamole-common-js. Centrata, su fondo nero: quando il desktop e' piu' piccolo dell'area restano bande, non uno stiramento. */ .desk-schermo { flex: 1; min-height: 0; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; } .desk-schermo:focus { outline: none; } .desk-errore { color: var(--danger); font-size: var(--t-sm); padding: var(--s-4); text-align: center; } /* Comandi nella barra: schermo intero e tastiera del telefono. */ .desk-btn { background: transparent; border: 1px solid #3b4a54; color: #e9edef; border-radius: var(--r-sm); padding: 2px 8px; font-size: var(--t-base); line-height: 1.4; cursor: pointer; flex-shrink: 0; } .desk-btn:hover { border-color: #e9edef; } /* ---- La barra del desktop remoto ---- A sinistra chi si sta guardando e come va (pallino, nome, statistiche), a destra i comandi. Sfondo piu' scuro della barra del terminale, cosi' la tela e' la cosa piu' chiara sullo schermo. Niente