/* ================================================================== Gestionale Clienti — stile Direzione: strumento di lavoro "schedario/dossier". Calmo, leggibile, denso ma ordinato. Firma: barra-linguetta (spine) + dati in monospazio. ================================================================== */ :root { --ink: #1f2733; --ink-soft: #3b4652; --muted: #6b7480; --paper: #f4f5f7; --surface: #ffffff; --line: #e4e7ec; --line-soft: #eef1f4; --accent: #0f766e; --accent-dk: #0b5d56; --accent-sw: #d7ebe8; --ok-fg: #15803d; --ok-bg: #dcfce7; --wa-fg: #b45309; --wa-bg: #fef3c7; --mu-fg: #566270; --mu-bg: #eef1f4; --er-fg: #b42318; --er-bg: #fee4e2; --radius: 10px; --radius-sm: 7px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05); --shadow-lg: 0 8px 24px rgba(16,24,40,.10); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 .2em; } h2 { font-size: 1.15rem; letter-spacing: -.01em; margin: 0 0 .6em; } .muted { color: var(--muted); } .mono { font-family: var(--mono); font-size: .9em; } /* ---- firma: linguetta ---- */ .spine { display: inline-block; width: 4px; height: 1em; background: var(--accent); border-radius: 2px; vertical-align: -1px; margin-right: 2px; } /* ---- barra superiore ---- */ .topbar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; } .topbar-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 0 20px; min-height: 58px; flex-wrap: wrap; } .brand { font-weight: 700; color: var(--ink); letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 7px; } .brand:hover { text-decoration: none; } .mainnav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; } .mainnav a { color: var(--ink-soft); padding: 7px 12px; border-radius: var(--radius-sm); font-size: .93rem; font-weight: 500; } .mainnav a:hover { background: var(--line-soft); text-decoration: none; } .mainnav a.attivo { background: var(--accent-sw); color: var(--accent-dk); } .topbar-right { display: flex; align-items: center; gap: 12px; } .user-nome { color: var(--muted); font-size: .9rem; } /* ---- contenitore ---- */ .wrap { max-width: 1120px; margin: 26px auto; padding: 0 20px; } .pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .pagehead .sub { color: var(--muted); font-size: .95rem; margin-top: 2px; } /* ---- card ---- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 18px; } .card.tab { border-left: 4px solid var(--accent); } .card h2 { margin-bottom: 14px; } /* griglia riepilogo */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; margin-bottom: 22px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); border-left: 4px solid var(--accent); } .stat .num { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; font-family: var(--mono); } .stat .lbl { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; } /* ---- pulsanti ---- */ .btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 600; font-size: .92rem; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; } .btn:hover { text-decoration: none; } .btn-sm { padding: 6px 11px; font-size: .85rem; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-dk); color: #fff; } .btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); } .btn-ghost:hover { background: var(--line-soft); } .btn-danger { background: #fff; color: var(--er-fg); border-color: #f3b4ad; } .btn-danger:hover { background: var(--er-bg); } /* ---- form ---- */ form label { display: block; margin-bottom: 14px; font-weight: 600; font-size: .9rem; color: var(--ink-soft); } form input, form select, form textarea { width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; color: var(--ink); background: #fff; font-weight: 400; } form textarea { min-height: 90px; resize: vertical; } form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-sw); } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; } .form-grid .full { grid-column: 1 / -1; } .form-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; } /* ---- tabelle ---- */ .tabella { width: 100%; border-collapse: collapse; background: var(--surface); } .tablecard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .tabella th, .tabella td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); } .tabella th { background: #fafbfc; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; } .tabella tr:last-child td { border-bottom: none; } .tabella tbody tr:hover { background: #fafbfc; } .tabella td.num, .tabella td .mono { font-family: var(--mono); font-size: .88rem; } .riga-link { cursor: pointer; } /* ---- badge stato ---- */ .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; } .stato-fatto { background: var(--ok-bg); color: var(--ok-fg); } .stato-dafare { background: var(--wa-bg); color: var(--wa-fg); } .stato-annullato { background: var(--mu-bg); color: var(--mu-fg); } .tag-tipo { background: var(--accent-sw); color: var(--accent-dk); } /* ---- documenti ---- */ .doc-list { list-style: none; padding: 0; margin: 0; } .doc-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); } .doc-list li:last-child { border-bottom: none; } .doc-ico { font-family: var(--mono); font-size: .68rem; font-weight: 700; background: var(--mu-bg); color: var(--ink-soft); padding: 6px 8px; border-radius: 6px; min-width: 40px; text-align: center; } .doc-meta { flex: 1; min-width: 0; } .doc-meta .n { font-weight: 600; word-break: break-word; } .doc-meta .m { color: var(--muted); font-size: .82rem; } /* ---- flash / avvisi ---- */ .flash { padding: 11px 15px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .92rem; border: 1px solid transparent; } .flash-ok { background: var(--ok-bg); color: var(--ok-fg); border-color: #a7e3bd; } .flash-err { background: var(--er-bg); color: var(--er-fg); border-color: #f3b4ad; } .flash-info { background: var(--accent-sw); color: var(--accent-dk); border-color: #a9d6cf; } /* ---- barra ricerca/filtri ---- */ .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; } .toolbar form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; flex: 1; } .toolbar input, .toolbar select { margin: 0; } .toolbar .search { flex: 1; min-width: 200px; } /* ---- dettaglio cliente ---- */ .grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; } .kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; font-size: .93rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-word; } .empty { text-align: center; padding: 40px 20px; color: var(--muted); } .empty p { margin: 6px 0 16px; } .breadcrumb { font-size: .88rem; color: var(--muted); margin-bottom: 10px; } .breadcrumb a { color: var(--muted); } .risoluzione-box { background: var(--ok-bg); border-radius: var(--radius-sm); padding: 12px 14px; border: 1px solid #a7e3bd; white-space: pre-wrap; } .descr-box { background: #fafbfc; border-radius: var(--radius-sm); padding: 12px 14px; border: 1px solid var(--line); white-space: pre-wrap; } /* ---- auth ---- */ .auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; } .auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 32px; width: 100%; max-width: 380px; } .auth-brand { font-weight: 700; display: flex; align-items: center; gap: 7px; margin-bottom: 22px; color: var(--ink); } .auth-card h1 { font-size: 1.35rem; } .auth-card .btn-primary { width: 100%; justify-content: center; margin-top: 6px; } /* ---- footer ---- */ .sitefoot { max-width: 1120px; margin: 30px auto; padding: 18px 20px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; flex-wrap: wrap; } mark { background: #fff3bf; padding: 0 2px; border-radius: 2px; } /* ---- responsive ---- */ @media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .topbar-inner { min-height: 54px; } .mainnav { order: 3; width: 100%; overflow-x: auto; } .kv { grid-template-columns: 1fr; } .kv dt { margin-top: 6px; } .tabella .hide-sm { display: none; } } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ================================================================== DASHBOARD — grafici in puro CSS (nessuna dipendenza esterna) ================================================================== */ /* KPI: piccola variazione/etichetta sotto al numero */ .stat .hint { color: var(--muted); font-size: .78rem; margin-top: 2px; } .stat.accent-wa { border-left-color: var(--wa-fg); } .stat.accent-ok { border-left-color: var(--ok-fg); } /* griglia a due colonne per i pannelli grafico */ .dash-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; margin-bottom: 18px; } @media (max-width: 820px) { .dash-grid { grid-template-columns: 1fr; } } /* istogramma mensile a barre verticali */ .barchart { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 10px; } .barchart .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; min-width: 0; } .barchart .bar { width: 100%; max-width: 46px; background: var(--accent); border-radius: 6px 6px 0 0; position: relative; min-height: 3px; transition: height .25s ease; } .barchart .bar .val { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: .78rem; color: var(--ink-soft); font-weight: 600; } .barchart .lbl { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } /* ciambella (donut) via conic-gradient */ .donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .donut { width: 128px; height: 128px; position: relative; flex-shrink: 0; } .donut-svg { width: 100%; height: 100%; display: block; } .donut .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; } .donut .center .n { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; line-height: 1; } .donut .center .t { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .legend li { display: flex; align-items: center; gap: 9px; font-size: .9rem; } .legend .dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; } .legend .cnt { margin-left: auto; font-family: var(--mono); color: var(--ink-soft); font-weight: 600; } /* lista attività recente */ .activity { list-style: none; padding: 0; margin: 0; } .activity li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; } .activity li:last-child { border-bottom: none; } .activity .when { font-family: var(--mono); font-size: .8rem; color: var(--muted); white-space: nowrap; } .activity .what { flex: 1; } .activity .tagact { font-size: .72rem; padding: 1px 7px; border-radius: 999px; background: var(--line-soft); color: var(--ink-soft); } /* ================================================================== v1.2 — LAYOUT CON BARRA LATERALE (stile dashboard) ================================================================== */ :root { --side-bg: #232a4d; --side-bg2: #1d2340; --side-txt: #b9bfda; --side-hi: #ffffff; --work: #16a34a; /* verde: intervento */ --travel: #f59e0b; /* arancione: viaggio */ } .layout { display: flex; min-height: 100vh; align-items: stretch; } /* ---- sidebar ---- */ .sidebar { width: 224px; flex-shrink: 0; background: linear-gradient(180deg, var(--side-bg), var(--side-bg2)); color: var(--side-txt); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .side-logo { display: flex; align-items: center; gap: 11px; padding: 20px 20px 18px; color: #fff; font-weight: 700; } .logo-mark { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; box-shadow: 0 2px 8px rgba(15,118,110,.4); } .logo-txt { font-size: 1rem; letter-spacing: -.01em; } .side-nav { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; flex: 1; } .side-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 9px; color: var(--side-txt); font-size: .93rem; font-weight: 500; position: relative; } .side-nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; } .side-nav a.attivo { background: rgba(255,255,255,.12); color: #fff; } .side-nav a.attivo::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; background: var(--accent); border-radius: 0 3px 3px 0; } .side-nav svg { width: 21px; height: 21px; flex-shrink: 0; } .side-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 4px; } .side-user { display: flex; align-items: center; gap: 11px; padding: 8px 12px; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-sw); color: var(--accent-dk); display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex-shrink: 0; } .side-user-name { color: #fff; font-size: .9rem; font-weight: 500; } .side-logout { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; color: var(--side-txt); font-size: .9rem; } .side-logout:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; } .side-logout svg { width: 20px; height: 20px; } /* ---- colonna principale ---- */ .main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } .main-col .wrap { max-width: 1180px; width: 100%; margin: 0 auto; padding: 26px 26px 0; flex: 1; } .main-col .sitefoot { max-width: 1180px; width: 100%; margin: 24px auto 0; } /* ---- responsive: su telefono la sidebar diventa una barra orizzontale in alto ---- */ @media (max-width: 860px) { .layout { flex-direction: column; } .sidebar { width: 100%; height: auto; position: sticky; top: 0; z-index: 40; flex-direction: column; } .side-logo { padding: 12px 16px; } .side-nav { flex-direction: row; overflow-x: auto; padding: 6px 10px; gap: 4px; } .side-nav a { flex-direction: column; gap: 4px; padding: 8px 12px; min-width: 68px; text-align: center; } .side-nav a.attivo::before { left: 50%; top: auto; bottom: -6px; transform: translateX(-50%); width: 22px; height: 4px; border-radius: 3px 3px 0 0; } .side-lbl { font-size: .72rem; } .side-nav svg { width: 22px; height: 22px; } .side-foot { flex-direction: row; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.08); } .side-user-name { display: none; } .main-col .wrap { padding: 18px 16px 0; } } /* ================================================================== v1.2 — GRAFICI DASHBOARD aggiuntivi ================================================================== */ /* selettore Giorno/Mese/Anno */ .seg { display: inline-flex; background: var(--line-soft); border-radius: 8px; padding: 3px; gap: 2px; } .seg button { border: none; background: transparent; font: inherit; font-size: .82rem; font-weight: 600; color: var(--muted); padding: 6px 13px; border-radius: 6px; cursor: pointer; } .seg button.on { background: #fff; color: var(--accent-dk); box-shadow: var(--shadow); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .card-head h2 { margin: 0; } /* barre ore lavorate (una variante per periodo) */ .hours-view { display: none; } .hours-view.on { display: block; } .hbars { display: flex; align-items: flex-end; gap: 8px; height: 190px; padding-top: 22px; } .hbars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; min-width: 0; } .hbars .bar { width: 100%; max-width: 40px; background: var(--accent); border-radius: 6px 6px 0 0; min-height: 2px; position: relative; } .hbars .bar .val { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); font-weight: 600; white-space: nowrap; } .hbars .lbl { font-size: .68rem; color: var(--muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; } /* barre punteggio 1-5 */ .scores { display: flex; flex-direction: column; gap: 10px; } .score-row { display: flex; align-items: center; gap: 12px; } .score-row .stars { width: 96px; color: #eab308; font-size: .95rem; letter-spacing: 1px; white-space: nowrap; } .score-row .track { flex: 1; background: var(--line-soft); border-radius: 999px; height: 12px; overflow: hidden; } .score-row .fill { height: 100%; background: var(--accent); border-radius: 999px; min-width: 2px; } .score-row .cnt { width: 28px; text-align: right; font-family: var(--mono); font-size: .85rem; color: var(--ink-soft); font-weight: 600; } .score-avg { text-align: center; margin-top: 6px; } .score-avg .big { font-family: var(--mono); font-size: 2rem; font-weight: 700; } .score-avg .lbl { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; } /* barre lavoro vs viaggio (impilate) */ .wt-legend { display: flex; gap: 16px; font-size: .85rem; margin-bottom: 14px; } .wt-legend span { display: inline-flex; align-items: center; gap: 6px; } .wt-legend .dot { width: 11px; height: 11px; border-radius: 3px; } .wt-list { display: flex; flex-direction: column; gap: 12px; } .wt-row .wt-top { display: flex; justify-content: space-between; font-size: .86rem; margin-bottom: 5px; } .wt-row .wt-top .who { color: var(--ink-soft); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; } .wt-row .wt-top .tot { font-family: var(--mono); color: var(--muted); } .wt-bar { display: flex; height: 16px; border-radius: 6px; overflow: hidden; background: var(--line-soft); } .wt-bar .seg-work { background: var(--work); } .wt-bar .seg-travel { background: var(--travel); } .wt-summary { display: flex; gap: 14px; margin-top: 4px; } .wt-summary .box { flex: 1; border-radius: 9px; padding: 12px 14px; } .wt-summary .box.work { background: #dcfce7; } .wt-summary .box.travel { background: #fef3c7; } .wt-summary .box .n { font-family: var(--mono); font-size: 1.4rem; font-weight: 700; } .wt-summary .box .t { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; } .wt-summary .box.work .t { color: #15803d; } .wt-summary .box.travel .t { color: #b45309; } /* ================================================================== v1.3 — TEMA "LUCAPERNICI.COM" (override cumulativo) Identità ripresa dal sito: dark tech-editoriale, etichette monospazio "// SEZIONE", separatori ✦, accento verde smeraldo. ================================================================== */ :root { /* palette sito */ --ink: #14181d; --ink-soft: #3a424b; --muted: #6d7681; --paper: #f3f4f5; --surface: #ffffff; --line: #e3e6e9; --line-soft: #edeff1; --accent: #059669; /* smeraldo */ --accent-dk: #047857; --accent-sw: #d4f0e4; --side-bg: #0c1116; /* quasi nero, come l'hero del sito */ --side-bg2: #10161d; --side-txt: #97a1ac; } /* etichetta monospazio in stile sito: // SEZIONE */ .kicker { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dk); display: block; margin-bottom: 4px; } .kicker::before { content: "// "; opacity: .65; } /* titoli pagina più editoriali */ .pagehead h1 { font-size: 1.65rem; letter-spacing: -.03em; } /* KPI stile sito: numeri grandi, etichette micro maiuscole mono */ .stat .num { font-size: 2.1rem; } .stat .lbl { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; } /* sidebar: logo quadrato "LP-like" e voce attiva smeraldo */ .logo-mark { background: var(--accent); border-radius: 8px; box-shadow: 0 2px 10px rgba(5,150,105,.45); } .side-nav a.attivo::before { background: var(--accent); } .side-foot .avatar { background: rgba(5,150,105,.18); color: #34d399; } /* separatore ✦ come nel sito */ .diamond-sep { color: var(--accent); font-size: .8rem; margin: 0 6px; } /* barra periodo (mese/anno) della dashboard */ .periodbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 14px; margin-bottom: 18px; } .periodbar .plabel { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .periodbar .pnav { display: inline-flex; align-items: center; gap: 6px; } .periodbar .pnav a { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-soft); font-weight: 700; } .periodbar .pnav a:hover { background: var(--line-soft); text-decoration: none; } .periodbar .pcur { font-weight: 700; letter-spacing: -.01em; min-width: 130px; text-align: center; } .periodbar .seg { margin-left: auto; } /* scheda VOTO DEL PERIODO */ .votebox { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .votebox .ring { position: relative; width: 130px; height: 130px; flex-shrink: 0; } .votebox .ring svg { width: 100%; height: 100%; display: block; } .votebox .ring .inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .votebox .ring .v { font-family: var(--mono); font-size: 1.9rem; font-weight: 700; line-height: 1; } .votebox .ring .m { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; } .votebox .detail { flex: 1; min-width: 200px; } .votebox .stars-big { color: #eab308; font-size: 1.25rem; letter-spacing: 2px; } .votebox .rowline { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: .92rem; } .votebox .rowline:last-child { border-bottom: none; } .votebox .rowline b { font-family: var(--mono); } .delta-up { color: #059669; font-weight: 700; } .delta-down { color: #dc2626; font-weight: 700; } .delta-flat { color: var(--muted); font-weight: 600; } /* tabella statistiche mensili */ .tab-right td, .tab-right th { text-align: right; } .tab-right td:first-child, .tab-right th:first-child { text-align: left; } .mini-meter { display: inline-block; width: 74px; height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; vertical-align: middle; margin-right: 8px; } .mini-meter i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } /* ================================================================== v1.4 — TEMA DARK "LUCAPERNICI.COM" (fedele allo screenshot homepage) Override cumulativo: blu notte profondo, accento ARANCIONE, puntini blu/arancio come le particelle dell'hero, logo gradiente arancio→viola. ================================================================== */ :root { /* palette dallo screenshot del sito */ --ink: #eef1f8; /* testo chiaro */ --ink-soft: #c3c9d9; --muted: #8b93ab; --paper: #0a0e1f; /* blu notte profondo (sfondo) */ --surface: #131a31; /* card */ --line: rgba(255,255,255,.10); --line-soft: rgba(255,255,255,.06); --accent: #ff8a1e; /* arancione bottone "Avvia un progetto" */ --accent-dk: #f97316; --accent-sw: rgba(255,138,30,.16); --blue: #6ea8ff; /* azzurro "intelligenti" / kicker */ --side-bg: #070b18; --side-bg2: #0a1024; --side-txt: #97a1bc; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35); --shadow-lg: 0 10px 34px rgba(0,0,0,.55); } /* sfondo con micro-particelle blu/arancio come l'hero del sito */ body { background-color: var(--paper); background-image: radial-gradient(rgba(110,168,255,.13) 1px, transparent 1.4px), radial-gradient(rgba(255,138,30,.09) 1px, transparent 1.4px), radial-gradient(1100px 500px at 75% -80px, rgba(59,92,182,.28), transparent 70%); background-size: 26px 26px, 44px 44px, 100% 100%; background-position: 0 0, 13px 22px, 0 0; background-attachment: fixed; color: var(--ink); } a { color: var(--blue); } h1, h2 { color: var(--ink); } /* parola in gradiente come "intelligenti" nel titolo del sito */ .grad { background: linear-gradient(92deg, var(--blue) 0%, #b57be0 45%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* kicker in stile "● DISPONIBILE PER ..." (azzurro, puntino arancione) */ .kicker { color: var(--blue); } .kicker::before { content: "● "; color: var(--accent); opacity: 1; } /* logo con gradiente arancio→viola come il badge LP del sito */ .logo-mark { background: linear-gradient(135deg, #ff8a1e 0%, #e0653a 45%, #8b5cf6 100%); box-shadow: 0 2px 12px rgba(255,138,30,.35); } /* sidebar */ .side-nav a.attivo { background: rgba(255,255,255,.08); } .side-nav a.attivo::before { background: var(--accent); } .side-foot .avatar { background: rgba(255,138,30,.18); color: #ffb469; } /* card e tabelle su fondo scuro */ .card, .tablecard, .stat, .periodbar { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--surface); border-color: var(--line); } .tabella { background: transparent; } .tabella th { background: rgba(255,255,255,.04); color: var(--muted); } .tabella th, .tabella td { border-bottom-color: var(--line-soft); } .tabella tbody tr:hover { background: rgba(255,255,255,.035); } .stat .num { color: #fff; } /* pulsanti: primario ARANCIONE con testo scuro, come nel sito */ .btn-primary { background: var(--accent); color: #1a1206; } .btn-primary:hover { background: #ffa04a; color: #1a1206; } .btn-ghost { color: var(--ink-soft); border-color: var(--line); } .btn-ghost:hover { background: rgba(255,255,255,.07); } .btn-danger { background: rgba(220,38,38,.12); color: #f87171; border-color: rgba(248,113,113,.35); } .btn-danger:hover { background: rgba(220,38,38,.2); } /* form su dark */ form input, form select, form textarea { background: #0d1329; border-color: var(--line); color: var(--ink); } form input:focus, form select:focus, form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,138,30,.22); } form label { color: var(--ink-soft); } form select option { background: #0d1329; color: var(--ink); } /* selettori e controlli */ .seg { background: rgba(255,255,255,.07); } .seg button { color: var(--muted); } .seg button.on { background: var(--accent); color: #1a1206; box-shadow: none; } .periodbar .pnav a { border-color: var(--line); color: var(--ink-soft); } .periodbar .pnav a:hover { background: rgba(255,255,255,.07); } /* flash e badge traslucidi */ .flash-ok { background: rgba(34,197,94,.12); color: #4ade80; border-color: rgba(74,222,128,.3); } .flash-err { background: rgba(220,38,38,.12); color: #f87171; border-color: rgba(248,113,113,.3); } .flash-info { background: rgba(110,168,255,.12); color: var(--blue); border-color: rgba(110,168,255,.3); } .stato-fatto { background: rgba(34,197,94,.15); color: #4ade80; } .stato-dafare { background: rgba(255,170,60,.16); color: #ffb75e; } .stato-annullato { background: rgba(255,255,255,.08); color: var(--muted); } .tag-tipo { background: rgba(110,168,255,.15); color: var(--blue); } /* grafici: barre ore in gradiente arancio (firma del sito) */ .hbars .bar, .barchart .bar { background: linear-gradient(180deg, #ffa04a, var(--accent-dk)); } .hbars .bar .val, .barchart .bar .val { color: var(--ink-soft); } .score-row .track { background: rgba(255,255,255,.08); } .score-row .fill { background: linear-gradient(90deg, var(--accent), #ffb469); } .mini-meter { background: rgba(255,255,255,.08); } .mini-meter i { background: var(--accent); } .votebox .ring svg circle:last-child { stroke: var(--accent); } /* lavoro vs viaggio: verde/arancio calibrati sul dark */ :root { --work: #22c55e; --travel: #f5a524; } .wt-bar { background: rgba(255,255,255,.08); } .wt-summary .box.work { background: rgba(34,197,94,.13); } .wt-summary .box.travel { background: rgba(245,165,36,.13); } .wt-summary .box.work .t { color: #4ade80; } .wt-summary .box.travel .t { color: #ffb75e; } .wt-summary .box .n { color: var(--ink); } /* documenti, dettagli, footer */ .doc-ico { background: rgba(255,255,255,.08); color: var(--ink-soft); } .risoluzione-box { background: rgba(34,197,94,.1); border-color: rgba(74,222,128,.25); color: var(--ink-soft); } .descr-box { background: rgba(255,255,255,.04); border-color: var(--line); color: var(--ink-soft); } .sitefoot { border-top-color: var(--line); } /* login / installazione su dark */ .auth-body { background-color: var(--paper); background-image: radial-gradient(rgba(110,168,255,.13) 1px, transparent 1.4px), radial-gradient(rgba(255,138,30,.09) 1px, transparent 1.4px), radial-gradient(900px 480px at 70% -60px, rgba(59,92,182,.3), transparent 70%); background-size: 26px 26px, 44px 44px, 100% 100%; } .auth-card { background: var(--surface); border-color: var(--line); } .auth-brand { color: var(--ink); } /* focus ring coerente */ :focus-visible { outline-color: var(--accent); } /* ================================================================== v1.5 — MODULO APPARATI & SCADENZE ================================================================== */ .stato-scaduta { background: rgba(220,38,38,.2); color: #f87171; } .stato-critica { background: rgba(220,38,38,.14); color: #fb923c; } /* banner avvisi in dashboard */ .alertbox { border: 1px solid rgba(248,113,113,.35); background: linear-gradient(180deg, rgba(220,38,38,.10), rgba(220,38,38,.05)); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 18px; margin-bottom: 18px; } .alertbox.warn { border-color: rgba(255,170,60,.35); background: linear-gradient(180deg, rgba(255,138,30,.10), rgba(255,138,30,.04)); } .alertbox .a-head { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 8px; } .pulse { width: 10px; height: 10px; border-radius: 50%; background: #f87171; flex-shrink: 0; box-shadow: 0 0 0 0 rgba(248,113,113,.6); animation: pulse 1.6s infinite; } .alertbox.warn .pulse { background: var(--accent); box-shadow: 0 0 0 0 rgba(255,138,30,.55); animation-name: pulse-o; } @keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(248,113,113,0); } 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); } } @keyframes pulse-o { 70% { box-shadow: 0 0 0 9px rgba(255,138,30,0); } 100% { box-shadow: 0 0 0 0 rgba(255,138,30,0); } } .alertbox ul { list-style: none; margin: 0; padding: 0; } .alertbox li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .92rem; flex-wrap: wrap; } .alertbox li:last-child { border-bottom: none; } .alertbox .gg { font-family: var(--mono); font-weight: 700; white-space: nowrap; } .alertbox .gg.rosso { color: #f87171; } .alertbox .gg.ambra { color: #ffb75e; } @media (prefers-reduced-motion: reduce) { .pulse { animation: none; } } /* ================================================================== v2.0 — HMS SURPRISE: famiglie apparati, relazioni, nuovi stati ================================================================== */ .stato-lavorazione { background: rgba(110,168,255,.16); color: var(--blue); } .stato-rimandato { background: rgba(181,123,224,.16); color: #c99bf0; } /* sezioni famiglia nell'inventario */ details.fam { margin-bottom: 16px; } details.fam > summary { list-style: none; cursor: pointer; } details.fam > summary::-webkit-details-marker { display: none; } .fam-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); background: linear-gradient(90deg, rgba(255,138,30,.12), rgba(255,138,30,.02) 60%), var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); box-shadow: var(--shadow); user-select: none; } .fam-head::before { content: "▸"; color: var(--accent); font-size: .9rem; transition: transform .15s; } details.fam[open] .fam-head::before { transform: rotate(90deg); } .fam-title { font-weight: 700; letter-spacing: -.01em; font-size: 1.02rem; } .fam-count { margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: .82rem; background: rgba(255,255,255,.08); padding: 3px 11px; border-radius: 999px; color: var(--ink-soft); } .fam-body { margin-top: 8px; } .asset-table td { vertical-align: top; } .chip-alert { display: inline-block; margin-left: 7px; font-size: .72rem; font-weight: 700; background: rgba(220,38,38,.16); color: #f87171; border-radius: 999px; padding: 1px 8px; vertical-align: 2px; } /* parco macchine in dashboard */ .park-list { display: flex; flex-direction: column; gap: 10px; } .park-row { display: flex; align-items: center; gap: 12px; } .park-row .p-name { width: 118px; font-size: .88rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .park-row .track { flex: 1; background: rgba(255,255,255,.08); border-radius: 999px; height: 12px; overflow: hidden; } .park-row .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--accent)); min-width: 3px; } .park-row .cnt { width: 30px; text-align: right; font-family: var(--mono); font-weight: 700; font-size: .85rem; } /* ================================================================== v3.0 — MASTERPIECE: palette Ctrl+K, rinnovi, fascicolo ================================================================== */ .ksearch { display: flex; align-items: center; gap: 9px; margin: 4px 12px 8px; padding: 9px 12px; width: calc(100% - 24px); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: var(--side-txt); font: inherit; font-size: .88rem; cursor: pointer; text-align: left; } .ksearch:hover { background: rgba(255,255,255,.1); color: #fff; } .ksearch svg { width: 16px; height: 16px; flex-shrink: 0; } .ksearch span { flex: 1; } .ksearch kbd { font-family: var(--mono); font-size: .68rem; padding: 2px 7px; background: rgba(255,255,255,.1); border-radius: 5px; border: 1px solid rgba(255,255,255,.14); } @media (max-width: 860px) { .ksearch { margin: 6px 12px; } .ksearch kbd { display: none; } } .pal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(5,8,18,.72); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 9vh 16px 16px; } .pal-box { width: 100%; max-width: 620px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; } .pal-box input { width: 100%; border: none; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); padding: 16px 18px; font: inherit; font-size: 1.02rem; outline: none; } .pal-results { max-height: 55vh; overflow-y: auto; padding: 8px; } .pal-hint { color: var(--muted); padding: 16px; font-size: .9rem; text-align: center; } .pal-group { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding: 10px 12px 4px; } .pal-item { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); } .pal-item:hover { background: rgba(255,138,30,.12); text-decoration: none; } .pal-item .pal-t { display: block; font-weight: 600; } .pal-item .pal-s { display: block; color: var(--muted); font-size: .82rem; } /* fascicolo stampabile: pulito, chiaro, per carta */ body.stampa { background: #fff; color: #1a1a1a; font-size: 13px; } body.stampa .foglio { max-width: 860px; margin: 0 auto; padding: 28px; } body.stampa h1 { font-size: 1.5rem; color: #111; margin-bottom: 2px; } body.stampa h2 { font-size: 1.02rem; color: #111; border-bottom: 2px solid #ff8a1e; padding-bottom: 4px; margin: 22px 0 10px; } body.stampa table { width: 100%; border-collapse: collapse; font-size: 12.5px; } body.stampa th, body.stampa td { border: 1px solid #ddd; padding: 6px 8px; text-align: left; vertical-align: top; } body.stampa th { background: #f4f4f4; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } body.stampa .intesta { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 3px solid #0a0e1f; padding-bottom: 12px; } body.stampa .marca { font-weight: 800; font-size: 1.05rem; } body.stampa .marca small { display: block; font-weight: 400; color: #666; } body.stampa .noprint { margin: 14px 0; } @media print { body.stampa .noprint { display: none; } body.stampa .foglio { padding: 0; } } /* ---- v3.0: CALENDARIO INTERNO (autonomo, responsive) ---- */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .cal-head-row { margin-bottom: 5px; } .cal-dow { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 4px 0; } .cal-cell { min-height: 92px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(255,255,255,.02); padding: 5px; overflow: hidden; } .cal-vuota { background: transparent; border-color: transparent; } .cal-oggi { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .cal-num { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-family: var(--mono); font-size: .8rem; color: var(--ink-soft); margin-bottom: 4px; } .cal-oggi .cal-num span { background: var(--accent); color: #1a1206; border-radius: 6px; padding: 0 6px; font-weight: 700; } .cal-add { margin-right: auto; color: var(--muted); font-weight: 700; padding: 0 5px; border-radius: 5px; opacity: 0; } .cal-cell:hover .cal-add { opacity: 1; } .cal-add:hover { background: rgba(255,138,30,.18); color: var(--accent); text-decoration: none; } .cal-ev { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 5px; font-size: .72rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; } .cal-ev:hover { background: rgba(255,255,255,.07); text-decoration: none; } .cal-ora { font-family: var(--mono); font-size: .66rem; color: var(--muted); } .cal-tit { overflow: hidden; text-overflow: ellipsis; } .cal-more { font-size: .68rem; color: var(--muted); padding: 1px 4px; } .cal-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .dot-aperto { background: #ffb75e; } .dot-lavorazione { background: var(--blue); } .dot-rimandato { background: #c99bf0; } .dot-chiuso { background: #4ade80; } .dot-annullato { background: #7d879a; } .cal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding: 0 4px; font-size: .8rem; color: var(--muted); } .cal-legend span { display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 720px) { .cal-cell { min-height: 58px; padding: 3px; } .cal-tit { display: none; } /* su telefono: puntini + ora */ .cal-ev { padding: 1px 2px; } .cal-add { opacity: 1; } } /* ================================================================== v3.0.1 — HOTFIX 1) L'overlay Ctrl+K compariva da solo: display:flex della classe vinceva sull'attributo hidden. Ora [hidden] vince sempre. 2) Toggle Mese/Anno della dashboard: da