/* ============================================================================ app.css — E-MIKE Preventivi. Redesign con layout sidebar + barra contestuale. Sfondo chiaro per leggibilità diurna; sidebar scura come identità; verde- lavoro come accento azioni; ambra come evidenza. Mobile-first sui contenuti, sidebar a comparsa sotto i 900px. ============================================================================ */ :root { --sfondo: #F5F6F4; /* pagina */ --carta: #FFFFFF; /* superfici/card */ --inchiostro: #1A2420; /* testo principale */ --tenue: #6B7771; /* testo secondario */ --bordo: #E2E6E2; /* bordi chiari */ --bordo-forte: #CDD3CE; --scuro: #11201A; /* sidebar, barra brand */ --scuro-2: #1B3329; /* hover voci sidebar */ --verde: #1F6B4A; /* accento azioni */ --verde-chiaro: #E6F4EC; --ambra: #E0922F; /* evidenza */ --ambra-chiaro: #FBF0DE; --ambra-scuro: #854F0B; --rosso: #C0492F; --rosso-chiaro: #FBEAE7; --giallo-chiaro: #FBF0DE; --raggio: 10px; --raggio-g: 14px; --ombra: 0 1px 3px rgba(26,36,32,.06), 0 4px 16px rgba(26,36,32,.05); } /* ===== TEMA SCURO: attivo con ===== */ html[data-tema="scuro"] { --sfondo: #0F1714; /* pagina */ --carta: #18221E; /* superfici/card */ --inchiostro: #E8EFEA; /* testo principale */ --tenue: #9DAAA3; /* testo secondario */ --bordo: #283732; /* bordi */ --bordo-forte: #34463F; --scuro: #0B130F; /* sidebar ancora più scura */ --scuro-2: #16271F; --verde: #3FA876; /* accenti leggermente più chiari per contrasto */ --verde-chiaro: #16302360; --ambra: #E5A24A; --ambra-chiaro: #3A2E1860; --ambra-scuro: #E5A24A; --rosso: #E0715A; --rosso-chiaro: #3A201B60; --giallo-chiaro: #3A2E1860; --ombra: 0 1px 3px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25); } * { box-sizing: border-box; } html, body { margin: 0; } html, body { max-width: 100%; } body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; background: var(--sfondo); color: var(--inchiostro); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--verde); text-decoration: none; } a:hover { text-decoration: underline; } /* ===== LAYOUT APP (sidebar + main) ===== */ body.app { display: flex; min-height: 100vh; } .sidebar { width: 230px; flex-shrink: 0; background: var(--scuro); color: #DCE6E0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08); color: var(--testo-chiaro, #E8EFE9); text-decoration: none; } .sidebar-brand:hover { text-decoration: none; } .brand-logo-font { font-family: 'Inversionz', monospace; font-size: 26px; letter-spacing: 2px; line-height: 1; color: #fff; } .brand-sotto { font-size: 12px; color: #8DA399; letter-spacing: .5px; padding-left: 2px; } .tema-toggle { background: none; border: 0; width: 100%; text-align: left; cursor: pointer; font: inherit; } .titolo-login { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .titolo-login .brand-logo-font { color: var(--inchiostro); font-size: 30px; } .titolo-login-sotto { font-size: 18px; font-weight: 600; color: var(--tenue); } .brand-logo { width: 34px; height: 34px; border-radius: 8px; background: var(--ambra); color: var(--scuro); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; } .brand-nome { font-weight: 600; font-size: 15px; line-height: 1.1; } .brand-nome small { font-weight: 400; font-size: 12px; color: #8DA399; } .sidebar-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; } .nav-voce { display: block; padding: 11px 14px; border-radius: 8px; color: #C3D2CA; font-size: 14.5px; font-weight: 500; } .nav-voce:hover { background: var(--scuro-2); color: #fff; text-decoration: none; } .nav-voce.attiva { background: var(--verde); color: #fff; } .nav-voce.piccola { font-size: 13px; font-weight: 400; padding: 8px 14px; color: #93A89D; } .sidebar-fondo { padding: 12px 10px 18px; border-top: 1px solid rgba(255,255,255,.08); } .sidebar-utente { padding: 6px 14px 10px; display: flex; flex-direction: column; } .sidebar-utente strong { font-size: 14px; color: #fff; } .sidebar-utente span { font-size: 12px; color: #8DA399; } .sidebar-velo { display: none; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: clip; } /* ===== BARRA CONTESTUALE ===== */ .barra-ctx { display: flex; align-items: center; gap: 14px; padding: 14px 26px; background: var(--carta); border-bottom: 1px solid var(--bordo); position: sticky; top: 0; z-index: 20; } .ctx-titolo { font-size: 19px; font-weight: 600; margin: 0; flex: 1; } .ctx-azioni { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .hamburger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 6px; } .hamburger span { width: 22px; height: 2px; background: var(--inchiostro); border-radius: 2px; } .contenuto { padding: 24px 32px 60px; max-width: 1400px; width: 100%; margin: 0 auto; overflow-x: clip; } /* Su schermi molto ampi (oltre il 4K-ish) diamo un po' più di respiro ma teniamo i form leggibili: il contenuto resta centrato, non si stira all'infinito. */ @media (min-width: 1800px) { .contenuto { max-width: 1600px; } } /* ===== BOTTONI ===== */ .btn-azione, .btn-principale { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; background: var(--verde); color: #fff; border: 0; border-radius: var(--raggio); font-size: 14.5px; font-weight: 600; cursor: pointer; font-family: inherit; } .btn-azione:hover, .btn-principale:hover { background: #185A3D; text-decoration: none; color: #fff; } .btn-secondario { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; background: var(--carta); color: var(--inchiostro); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; } .btn-secondario:hover { border-color: var(--verde); color: var(--verde); text-decoration: none; } .btn-pericolo { padding: 9px 16px; background: var(--rosso); color: #fff; border: 0; border-radius: var(--raggio); font-weight: 600; cursor: pointer; font-family: inherit; font-size: 14px; } /* ===== CARD / RIQUADRI ===== */ .riquadro { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-g); padding: 20px 22px; margin-bottom: 20px; box-shadow: var(--ombra); } .riquadro h2 { font-size: 16px; font-weight: 600; margin: 0 0 14px; } .riquadro-pericolo { border-color: #E7C7BF; } /* Su schermi ampi, i campi a tutta riga (figli diretti di form/section, non dentro una griglia) non devono diventare lunghissimi: restano leggibili. I campi dentro .griglia-* mantengono la larghezza della loro colonna. */ .riquadro > form > input[type="text"], .riquadro > form > input[type="number"], .riquadro > form > input[type="date"], .riquadro > form > input[type="password"], .riquadro > form > select, .riquadro > form > textarea, .riquadro > input[type="text"], .riquadro > select, .riquadro > textarea { max-width: 680px; } /* ===== FORM ===== */ label { display: block; margin: 12px 0 5px; font-size: 13.5px; font-weight: 500; color: var(--tenue); } label.checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--inchiostro); } label.checkbox input { width: auto; } input, select, textarea { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio); background: var(--carta); color: var(--inchiostro); font-size: 15px; font-family: inherit; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--verde); outline-offset: 1px; border-color: var(--verde); } textarea { resize: vertical; } .aiuto { font-size: 12.5px; color: var(--tenue); margin-top: 4px; } .griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .griglia-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } /* Variante per indirizzi: CAP corto, Città larga, Provincia cortissima */ .griglia-cap { display: grid; grid-template-columns: 110px 1fr 90px; gap: 14px; } /* Testata acquisti: data media, fornitore largo, estremi medio */ .griglia-acq-testata { display: grid; grid-template-columns: 180px 1fr 200px; gap: 14px; } /* ===== TABELLE ===== */ .tabella { width: 100%; border-collapse: collapse; font-size: 14.5px; } .tabella thead th { text-align: left; padding: 11px 12px; background: var(--sfondo); color: var(--tenue); font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--bordo); } .tabella thead th a { color: var(--tenue); } .tabella tbody td { padding: 13px 12px; border-bottom: 1px solid var(--bordo); vertical-align: middle; } .tabella tbody tr:last-child td { border-bottom: 0; } .tabella tbody tr:hover { background: #FAFBFA; } .tabella .num { text-align: right; } .tabella-card { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-g); overflow: hidden; box-shadow: var(--ombra); } .riga-totale { display: flex; justify-content: space-between; padding: 13px 14px; background: var(--sfondo); border-top: 1px solid var(--bordo-forte); font-size: 14.5px; } .riga-totale strong { font-size: 16px; } /* ===== BADGE / STATI ===== */ .badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; } .badge-verde { background: var(--verde-chiaro); color: var(--verde); } .badge-giallo { background: var(--ambra-chiaro); color: var(--ambra-scuro); } .badge-rosso { background: var(--rosso-chiaro); color: var(--rosso); } .badge-neutro { background: var(--sfondo); color: var(--tenue); } /* ===== STATISTICHE ===== */ .statistiche { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; } .stat { flex: 1; min-width: 120px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 14px 16px; box-shadow: var(--ombra); } .stat-n { display: block; font-size: 26px; font-weight: 700; } .stat-l { font-size: 12.5px; color: var(--tenue); line-height: 1.35; display: block; margin-top: 2px; } .stat-evidenza { background: var(--scuro); border-color: var(--scuro); min-width: 150px; } .stat-evidenza .stat-n { color: var(--ambra); } .stat-evidenza .stat-l { color: #8DA399; } .selettore-periodo { display: flex; align-items: center; flex-wrap: wrap; } /* ===== CHIP FILTRO ===== */ .filtri { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .chip { padding: 7px 15px; border-radius: 999px; border: 1px solid var(--bordo-forte); font-size: 13.5px; color: var(--tenue); background: var(--carta); } .chip:hover { border-color: var(--verde); text-decoration: none; } .chip-on { background: var(--verde); color: #fff; border-color: var(--verde); font-weight: 600; } .chip-on:hover { color: #fff; } /* ===== AVVISI ===== */ .avviso { padding: 12px 15px; border-radius: var(--raggio); margin-bottom: 18px; font-size: 14px; border: 1px solid transparent; } .avviso-errore { background: var(--rosso-chiaro); border-color: #E7C7BF; color: #8A2D1A; } .avviso-info { background: var(--verde-chiaro); border-color: #BFE3CE; color: #155939; } .avviso-attenzione { background: #FBF1DA; border-color: #EBD9A8; color: #8A6516; } .avviso-scadenza { background: var(--ambra-chiaro); border-color: #EAD3A7; color: var(--ambra-scuro); } .avviso-password { background: var(--ambra-chiaro); border-color: #EAD3A7; color: var(--ambra-scuro); } .pw { font-size: 16px; font-weight: 700; letter-spacing: .5px; background: var(--sfondo); padding: 2px 8px; border-radius: 6px; } .vuoto { color: var(--tenue); font-style: italic; padding: 8px 0; } /* ===== RICERCA ===== */ .riga-ricerca { display: flex; gap: 9px; margin-bottom: 18px; align-items: center; } .riga-ricerca input { flex: 1; } /* ===== SCHERMATE CENTRATE (login, cambio pw) ===== */ .schermata-centrata { display: flex; flex-direction: column; gap: 16px; min-height: 100vh; align-items: center; justify-content: center; padding: 1rem; background: var(--scuro); } .card { background: var(--carta); padding: 34px 32px; border-radius: var(--raggio-g); width: 100%; max-width: 380px; box-shadow: 0 12px 50px rgba(0,0,0,.3); } /* Riquadro istruzioni installazione PWA (sotto il login, solo nel browser) */ .pwa-aiuto { position: relative; background: var(--carta); border-radius: var(--raggio-g); width: 100%; max-width: 380px; padding: 20px 22px; box-shadow: 0 12px 50px rgba(0,0,0,.3); } .pwa-aiuto h2 { margin: 0 0 8px; font-size: 16px; } .pwa-perche { font-size: 13.5px; color: var(--tenue); margin: 0 0 14px; } .pwa-passi-titolo { font-size: 13.5px; font-weight: 600; margin: 0 0 6px; } .pwa-passi { margin: 0 0 10px; padding-left: 20px; font-size: 13.5px; line-height: 1.5; } .pwa-passi li { margin-bottom: 4px; } .pwa-nota { font-size: 12.5px; color: var(--tenue); margin: 0; font-style: italic; } .pwa-chiudi { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 24px; line-height: 1; color: var(--tenue); cursor: pointer; width: auto; padding: 0; } .card .titolo-app { font-size: 22px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; } .card .titolo-app .brand-logo { width: 30px; height: 30px; font-size: 16px; } .sottotitolo { color: var(--tenue); font-size: 14px; margin: 0 0 22px; } .link-secondario { text-align: center; margin-top: 16px; font-size: 13.5px; } /* ===== HOME (riquadri-azione) ===== */ .griglia-azioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 4px 0 8px; } .riquadro-azione { display: flex; flex-direction: column; gap: 5px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-g); padding: 20px 22px; box-shadow: var(--ombra); } .riquadro-azione:hover { border-color: var(--verde); text-decoration: none; transform: translateY(-1px); transition: .15s; } .riquadro-azione strong { font-size: 16px; color: var(--inchiostro); } /* ===== EDITOR PREVENTIVO ===== */ .cerca-prodotto { position: relative; margin-bottom: 14px; display: flex; gap: 8px; align-items: center; } .cerca-prodotto > input { flex: 1; min-width: 0; } .cerca-prodotto input { width: 100%; min-width: 0; } .risultati { position: absolute; left: 0; right: 0; z-index: 30; background: var(--carta); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); margin-top: 4px; max-height: 280px; overflow-y: auto; box-shadow: var(--ombra); } .risultato { padding: 11px 13px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--bordo); } .risultato:last-child { border-bottom: 0; } .risultato:hover { background: var(--verde-chiaro); } .righe { display: flex; flex-direction: column; gap: 10px; } .riga { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px; background: var(--sfondo); } .riga-spesa { border-style: dashed; } .riga-testo { background: #FCFAF4; border-color: #EAD3A7; } .r-descr { width: 100%; margin-bottom: 8px; } .riga-campi { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; } .riga-campi label { display: flex; flex-direction: column; font-size: 11.5px; color: var(--tenue); margin: 0; gap: 3px; } .riga-campi input { width: 88px; padding: 7px 9px; } .riga-campi .campo-iva input, .riga-campi .campo-sconto input { width: 70px; } .r-subtot { margin-left: auto; font-weight: 600; font-size: 15px; align-self: center; } .r-rimuovi { border: 0; background: none; color: var(--rosso); font-size: 18px; cursor: pointer; padding: 4px 8px; align-self: center; } .azioni-righe { display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap; } .totali { display: flex; flex-direction: column; gap: 7px; max-width: 340px; margin-left: auto; } .totale-riga { display: flex; justify-content: space-between; font-size: 14.5px; } .totale-riga.sconto { color: var(--rosso); } .totale-grande { font-size: 20px; font-weight: 700; border-top: 2px solid var(--verde); padding-top: 8px; margin-top: 4px; color: var(--verde); } .azioni-riga { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; } .inline { display: inline-flex; gap: 5px; align-items: center; margin: 0; } .mini-input { width: 150px; padding: 7px 9px; font-size: 13.5px; } /* campi extra profilo */ .campo-extra { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; } .campo-extra input { flex: 1; } .campo-extra .rimuovi-extra { border: 0; background: none; color: var(--rosso); font-size: 17px; cursor: pointer; padding: 4px 8px; } /* anteprima logo */ .logo-anteprima { max-height: 80px; max-width: 240px; background: #fff; padding: 6px; border: 1px solid var(--bordo); border-radius: 8px; } /* ===== RESPONSIVE ===== */ @media (max-width: 900px) { .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .25s ease; z-index: 60; height: 100vh; } .sidebar.aperta { transform: translateX(0); } .sidebar-velo { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50; opacity: 0; pointer-events: none; transition: opacity .2s; } .sidebar-velo.visibile { opacity: 1; pointer-events: auto; } .hamburger { display: flex; } .contenuto { padding: 18px 16px 50px; } .barra-ctx { padding: 12px 16px; } } @media (max-width: 640px) { .griglia-2, .griglia-3, .griglia-cap, .griglia-acq-testata { grid-template-columns: 1fr; } .tabella thead { display: none; } .tabella, .tabella tbody, .tabella tr, .tabella td { display: block; } .tabella tbody tr { border: 1px solid var(--bordo); border-radius: var(--raggio); margin-bottom: 10px; padding: 4px; background: var(--carta); } .tabella tbody td { border: 0; padding: 6px 10px; } .tabella tbody td.num { text-align: left; } .riga-campi input { width: 100%; } .riga-campi label { flex: 1; min-width: 70px; } .totali { max-width: none; } } /* ===== Cliente scelto nell'editor ===== */ .cliente-scelto { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--verde-chiaro); border: 1px solid #BFE3CE; border-radius: var(--raggio); padding: 12px 14px; margin: 6px 0 14px; flex-wrap: wrap; } .cliente-scelto strong { display: block; } /* ===== Modale ===== */ .modale { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; } /* L'attributo hidden deve sempre vincere su display:flex/grid/block */ [hidden] { display: none !important; } .modale-velo { position: absolute; inset: 0; background: rgba(17,32,26,.55); } .modale-box { position: relative; background: var(--carta); border-radius: var(--raggio-g); padding: 22px 24px; width: 100%; max-width: 460px; box-shadow: 0 18px 60px rgba(0,0,0,.3); } .modale-box h2 { margin: 0 0 4px; font-size: 17px; } .modale-azioni { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; } /* ===== Dashboard ===== */ .dash-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .lista-righe { display: flex; flex-direction: column; } .riga-lista { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--bordo); color: var(--inchiostro); text-decoration: none; } .riga-lista:last-child { border-bottom: 0; } .riga-lista:hover { background: #FAFBFA; text-decoration: none; } .rl-num { font-weight: 600; flex: 0 0 90px; } .rl-cli { flex: 1; min-width: 0; } .rl-tot { font-weight: 600; margin-left: auto; white-space: nowrap; } @media (max-width: 900px) { .dash-griglia { grid-template-columns: 1fr; } } @media (max-width: 640px) { /* Le righe-lista (ultimi preventivi, bozze, scadenze) non devono sforare: numero più stretto, contenuto che va a capo, importo e badge sotto. */ .riga-lista { flex-wrap: wrap; row-gap: 4px; } .rl-num { flex: 0 0 auto; } .rl-cli { flex: 1 1 100%; order: 3; min-width: 0; word-break: break-word; } .rl-tot { margin-left: auto; } .riga-lista .badge { flex: 0 0 auto; } } /* ===== Righe pagina Acquisti ===== */ .riga-acq-prodotto { margin-bottom: 8px; font-size: 15px; } .ra-unitario { align-self: center; margin-left: 8px; white-space: nowrap; } /* ===== Correzioni per il TEMA SCURO su elementi con colori fissi ===== */ html[data-tema="scuro"] .avviso-errore { color: #F0A593; border-color: #5A2B22; } html[data-tema="scuro"] .avviso-info { color: #8FD3AE; border-color: #1F5038; } html[data-tema="scuro"] .avviso-attenzione { background: #3A3010; color: #E8C77A; border-color: #5A4A1C; } html[data-tema="scuro"] .avviso-scadenza, html[data-tema="scuro"] .avviso-password { color: #E5B873; border-color: #5A4423; } html[data-tema="scuro"] .riga-testo { background: #1E2A24; border-color: #4A3D22; } html[data-tema="scuro"] .riquadro-pericolo { border-color: #5A2B22; } /* tabelle: intestazione e righe su tema scuro */ html[data-tema="scuro"] .tabella thead th { background: var(--scuro-2); color: var(--tenue); } /* Tab filtro attivi/archiviati nelle anagrafiche */ .tab-filtro { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--bordo); } .tab-voce { padding: 8px 16px; text-decoration: none; color: var(--tenue); font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab-voce.attiva { color: var(--verde); border-bottom-color: var(--verde); font-weight: 600; } .tab-voce:hover { color: var(--testo); } /* Sezione "voci non a catalogo" (secondaria) nell'editor preventivo */ .voci-manuali { margin-top: 14px; border-top: 1px dashed var(--bordo); padding-top: 12px; } .voci-manuali > summary { cursor: pointer; color: var(--tenue); font-size: 14px; font-weight: 600; list-style: none; } .voci-manuali > summary::-webkit-details-marker { display: none; } .voci-manuali > summary::before { content: "＋ "; color: var(--verde); } .voci-manuali[open] > summary::before { content: "－ "; } .risultato-vuoto { color: var(--tenue); font-style: italic; cursor: default; } .cerca-prodotto #sfoglia-prodotti { flex-shrink: 0; }