/* ============================================================ BioPhi · Area Riservata Riusa i design token di ../style.css (caricato prima di questo file). Nessun font o libreria ri-importati: i font sono nel di ogni pagina. Scelta di tema: le pagine dell'area riservata sono forzate a data-theme="dark" (niente toggle). Motivo: è uno strumento operativo usato prevalentemente di sera, e la palette scura del sito ([data-theme="dark"] in style.css) è già un verde profondo quasi identico a quello originale della dashboard -> unifichiamo il design system senza perdere la leggibilità serale. ============================================================ */ /* L'attributo [hidden] deve sempre vincere sulle regole display qui sotto (es. .ar-gate ha display:grid, che altrimenti lo terrebbe visibile). */ [hidden] { display: none !important; } .ar-body { /* Il sito usa --font-display: "Gotham" (non caricato) -> qui lo riportiamo a Playfair Display come da design system dichiarato. */ --font-display: "Playfair Display", Georgia, serif; --ar-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --ar-urgent: #d6584a; --ar-accent: var(--color-earth); /* ambra "azione" della dashboard */ min-height: 100dvh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); line-height: 1.6; } /* ---------- Bottoni condivisi ---------- */ .ar-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.3rem; border-radius: var(--radius-full); background: var(--color-primary); color: #06210b; font-weight: 600; font-size: var(--text-sm); border: none; cursor: pointer; } .ar-btn:hover { background: var(--color-primary-hover); } .ar-btn:disabled { opacity: .6; cursor: progress; } .ar-btn--ghost { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); } .ar-btn--ghost:hover { background: var(--color-surface-2); color: var(--color-text); } /* ---------- Login ---------- */ .ar-auth { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); } .ar-card { width: 100%; max-width: 400px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); padding: var(--space-10) var(--space-8); } .ar-back { display: inline-block; font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-6); } .ar-back:hover { color: var(--color-primary); } .ar-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-2); } .ar-title em { font-style: italic; color: var(--color-primary); } .ar-sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-8); } .ar-form { display: flex; flex-direction: column; gap: .4rem; } .ar-form label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-top: var(--space-4); } .ar-form input { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .7rem .9rem; color: var(--color-text); font-size: var(--text-sm); } .ar-form input:focus { outline: none; border-color: var(--color-primary); } .ar-form .ar-btn { margin-top: var(--space-6); width: 100%; } .ar-link-btn { margin-top: var(--space-3); background: none; border: none; color: var(--color-text-muted); font-size: var(--text-xs); text-decoration: underline; cursor: pointer; } .ar-link-btn:hover { color: var(--color-primary); } .ar-msg { margin-top: var(--space-4); font-size: var(--text-sm); min-height: 1.2em; } .ar-msg--error { color: var(--ar-urgent); } .ar-msg--ok { color: var(--color-primary); } /* ---------- Shell dashboard ---------- */ .ar-gate { min-height: 100dvh; display: grid; place-items: center; color: var(--color-text-muted); font-size: var(--text-sm); } .ar-topbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); background: color-mix(in oklab, var(--color-surface) 90%, transparent); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); } .ar-topbar-logo { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text); } .ar-topbar-logo span { color: var(--color-leaf); text-transform: lowercase; font-size: var(--text-xs); margin-left: 2px; } .ar-topbar-right { display: flex; align-items: center; gap: var(--space-4); } .ar-user { font-family: var(--ar-mono); font-size: var(--text-xs); color: var(--color-text-muted); } main { max-width: var(--content-wide); margin: 0 auto; padding: var(--space-6); } /* ============================================================ Dashboard operativa — CSS portato da BioPhi_Dashboard_Serale.html e rimappato sui token del design system. Scoping sotto #app. ============================================================ */ #app { color: var(--color-text); font-family: var(--font-body); } #app .header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; border-bottom: 1px solid var(--color-border); padding-bottom: 18px; } #app .header h1 { font-family: var(--font-display); font-weight: 600; font-size: 26px; margin: 0 0 4px; letter-spacing: .2px; } #app .header .clock { font-family: var(--ar-mono); color: var(--ar-accent); font-size: 13px; } #app .header .sub { color: var(--color-text-muted); font-size: 13px; margin-top: 2px; } #app .quickadd { display: flex; gap: 8px; margin-bottom: 24px; } #app .quickadd input { flex: 1; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); padding: 11px 14px; border-radius: 8px; font-family: var(--font-body); font-size: 14px; } #app .quickadd input:focus { outline: none; border-color: var(--ar-accent); } #app .quickadd button { background: var(--ar-accent); color: #241606; border: none; padding: 0 18px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px; } #app .quickadd button:hover { filter: brightness(1.08); } #app .io-btn { background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-primary); padding: 7px 12px; border-radius: 8px; font-size: 12px; font-family: var(--ar-mono); cursor: pointer; white-space: nowrap; } #app .io-btn:hover { border-color: var(--color-primary); } #app .grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin-bottom: 18px; } @media (max-width: 760px) { #app .grid { grid-template-columns: 1fr; } } #app .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 18px 18px 8px; } #app .card h2 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; } #app .card h2 .tag { font-family: var(--ar-mono); font-size: 10px; color: var(--color-text-muted); background: var(--color-surface-2); padding: 2px 7px; border-radius: 20px; border: 1px solid var(--color-border); } #app .empty { color: var(--color-text-muted); font-size: 13px; padding: 14px 0; font-style: italic; } #app .loading { color: var(--color-text-muted); font-size: 13px; padding: 20px 0; text-align: center; } #app .tonight-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); } #app .tonight-item:last-child { border-bottom: none; } #app .tonight-item input[type=checkbox] { margin-top: 3px; accent-color: var(--ar-accent); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; } #app .tonight-item .txt { flex: 1; } #app .tonight-item .txt .done { text-decoration: line-through; color: var(--color-text-muted); } #app .tonight-item .meta { font-size: 11px; color: var(--color-text-muted); font-family: var(--ar-mono); margin-top: 2px; } #app .deadline-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; } #app .deadline-row:last-child { border-bottom: none; } #app .deadline-row .name { flex: 1; padding-right: 10px; } #app .deadline-row .days { font-family: var(--ar-mono); font-size: 11px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; } #app .days.soon { background: rgba(214,88,74,.18); color: var(--ar-urgent); } #app .days.mid { background: rgba(232,163,61,.18); color: var(--ar-accent); } #app .days.far { background: rgba(143,185,150,.15); color: var(--color-primary); } #app .cantieri { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 18px; } @media (max-width: 1100px) { #app .cantieri { grid-template-columns: repeat(2,1fr); } } @media (max-width: 620px) { #app .cantieri { grid-template-columns: 1fr; } } #app .cant-col h3 { font-family: var(--ar-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin: 0 0 10px; display: flex; justify-content: space-between; } #app .task { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 8px; padding: 9px 11px; margin-bottom: 8px; font-size: 13px; } #app .task .top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; } #app .task .name { flex: 1; } #app .task .name.done { text-decoration: line-through; color: var(--color-text-muted); } #app .prio { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; } #app .prio.Alta { background: var(--ar-urgent); } #app .prio.Media { background: var(--ar-accent); } #app .prio.Bassa { background: var(--color-primary); } #app .task .actions { display: flex; gap: 6px; margin-top: 6px; } #app .task .actions button { background: none; border: none; color: var(--color-text-muted); font-size: 11px; cursor: pointer; font-family: var(--ar-mono); padding: 0; } #app .task .actions button:hover { color: var(--ar-accent); } #app .cant-more { font-size: 11px; color: var(--color-text-muted); font-family: var(--ar-mono); padding: 4px 2px 2px; font-style: italic; } #app .email-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; gap: 10px; } #app .email-row:last-child { border-bottom: none; } #app .email-row .who { font-weight: 600; } #app .email-row .ctx { color: var(--color-text-muted); font-size: 12px; } #app .email-row .when { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-accent); white-space: nowrap; } #app .email-row button { background: none; border: 1px solid var(--color-border); color: var(--color-text-muted); border-radius: 6px; padding: 3px 9px; font-size: 11px; cursor: pointer; font-family: var(--ar-mono); } #app .email-row button:hover { border-color: var(--color-primary); color: var(--color-primary); } /* ============================================================ Dashboard — viste, quick-add, chip, routine, calendario, gantt ============================================================ */ #app .header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #app .empty-state { text-align: center; margin-bottom: 18px; } #app .empty-state p { color: var(--color-text-muted); font-size: 13px; margin: 6px 0 12px; } /* Barra viste (in dashboard.html, sotto la topbar) */ .ar-views { display: flex; gap: 2px; flex-wrap: wrap; padding: 8px var(--space-6) 0; border-bottom: 1px solid var(--color-border); } .ar-views a { padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--color-text-muted); border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; } .ar-views a:hover { color: var(--color-text); } .ar-views a.active { color: var(--color-primary); border-color: var(--color-border); background: var(--color-surface); } /* Quick-add: select cantiere + input + bottoni (layout originale, esteso) */ #app .quickadd { flex-wrap: wrap; } #app .quickadd select { background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); border-radius: 8px; padding: 0 8px; font-size: 13px; font-family: var(--font-body); } #app .chip-toggle { background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-muted); border-radius: 8px; padding: 0 12px; font-size: 12px; font-family: var(--ar-mono); cursor: pointer; white-space: nowrap; } #app .chip-toggle.on { color: var(--color-primary); border-color: var(--color-primary); } /* Separatore "Documenti da sistemare" dentro la card Scadenze */ #app .deadline-sep { font-family: var(--ar-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin: 12px 0 2px; padding-top: 10px; border-top: 1px dashed var(--color-border); } #app .c-meta { font-size: 11px; color: var(--color-text-muted); font-family: var(--ar-mono); } #app .days { font-family: var(--ar-mono); font-size: 11px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; } /* Sotto-riga task (scadenza + chip) */ #app .task-sub { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 2px; align-items: center; } #app .chip { font-family: var(--ar-mono); font-size: 10px; padding: 2px 7px; border-radius: 20px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); } #app .chip.who { color: var(--color-primary); border-color: var(--color-primary); } #app .mini { background: none; border: none; color: var(--color-text-muted); font-size: 13px; cursor: pointer; padding: 0 4px; flex-shrink: 0; } #app .mini:hover { color: var(--ar-accent); } /* Card Routine (details) */ #app .routine-card { padding-top: 14px; } #app .routine-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; } #app .routine-card > summary::-webkit-details-marker { display: none; } #app .routine-card > summary h2 { display: inline-flex; } #app .routine-card > summary::before { content: "▸"; color: var(--color-text-muted); font-size: 11px; margin-right: 6px; } #app .routine-card[open] > summary::before { content: "▾"; } #app .routine-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; } #app .routine-row:last-of-type { border-bottom: none; } #app .routine-row.off { opacity: .5; } #app .r-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } #app .r-label { font-weight: 600; } #app .routine-row .actions { display: flex; gap: 8px; } #app .routine-row .actions button, #app .routine-add button { background: none; border: 1px solid var(--color-border); color: var(--color-text-muted); border-radius: 6px; padding: 3px 9px; font-size: 11px; cursor: pointer; font-family: var(--ar-mono); } #app .routine-row .actions button:hover { border-color: var(--color-primary); color: var(--color-primary); } #app .routine-add { display: flex; gap: 8px; padding: 12px 0 4px; } #app .routine-add input { flex: 1; background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: var(--font-body); } #app .routine-add select { background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); border-radius: 8px; padding: 0 8px; font-size: 13px; } /* ---------- Calendario ---------- */ #app .cal-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } #app .cal-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; text-transform: capitalize; margin-left: 4px; } #app .cal-legend { margin-left: auto; font-family: var(--ar-mono); font-size: 11px; color: var(--color-text-muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } #app .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 6px; } #app .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; } #app .cal-dow { background: var(--color-surface-2); font-family: var(--ar-mono); font-size: 10px; text-transform: uppercase; color: var(--color-text-muted); text-align: center; padding: 6px 0; } #app .cal-cell { background: var(--color-surface); min-height: 96px; padding: 4px 5px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } #app .cal-cell.other { background: var(--color-surface-offset); } #app .cal-cell.other .cal-num { opacity: .4; } #app .cal-cell.today { outline: 2px solid var(--color-primary); outline-offset: -2px; } #app .cal-num { font-family: var(--ar-mono); font-size: 11px; color: var(--color-text-muted); } #app .cal-chip { font-size: 10px; line-height: 1.35; padding: 1px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--color-border); background: var(--color-surface-2); } #app .cal-chip[data-id] { cursor: pointer; } #app .cal-chip[data-id]:hover { background: var(--color-surface-dynamic); } #app .cal-chip.done { opacity: .45; text-decoration: line-through; } #app .cal-chip.moved { border-left-style: double; } #app .cal-more { font-size: 9px; color: var(--color-text-muted); font-family: var(--ar-mono); } @media (max-width: 640px) { #app .cal-cell { min-height: 70px; } } /* colori per tipo — condivisi calendario + gantt */ #app .dot.task, #app .cal-chip.task { border-left-color: var(--color-primary); } #app .dot.deadline, #app .cal-chip.deadline { border-left-color: var(--ar-urgent); } #app .dot.routine, #app .cal-chip.routine { border-left-color: var(--ar-accent); } #app .dot.email, #app .cal-chip.email { border-left-color: var(--color-leaf); } #app .dot.task { background: var(--color-primary); } #app .dot.deadline { background: var(--ar-urgent); } #app .dot.routine { background: var(--ar-accent); } #app .dot.email { background: var(--color-leaf); } /* badge "data spostata" */ #app .days.moved { background: color-mix(in oklab, var(--color-leaf) 22%, transparent); color: var(--color-text); } /* ---------- Gantt (colonna nomi fissa + timeline scrollabile) ---------- */ #app .g2 { display: flex; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-surface); --g2-axis: 34px; --g2-group: 24px; --g2-row: 30px; } #app .g2-side { flex: 0 0 190px; border-right: 1px solid var(--color-border); background: var(--color-surface-2); } #app .g2-main { flex: 1; overflow-x: auto; } #app .g2-canvas { position: relative; } #app .g2-axis-spacer, #app .g2-axis { height: var(--g2-axis); } #app .g2-axis { position: relative; border-bottom: 1px solid var(--color-border); } #app .g2-month { position: absolute; top: 3px; font-family: var(--ar-mono); font-size: 10px; font-weight: 600; color: var(--color-text-muted); text-transform: capitalize; padding-left: 4px; border-left: 1px solid var(--color-border); } #app .g2-wk { position: absolute; top: 18px; font-family: var(--ar-mono); font-size: 9px; color: var(--color-text-faint); padding-left: 2px; } #app .g2-monthline { position: absolute; top: var(--g2-axis); bottom: 0; width: 1px; background: var(--color-border); } #app .g2-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-primary); z-index: 4; } #app .g2-grouprow { height: var(--g2-group); background: var(--color-surface-offset); } #app .g2-side .g2-grouprow { display: flex; align-items: center; padding: 0 10px; font-family: var(--ar-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); } #app .g2-name { height: var(--g2-row); display: flex; align-items: center; padding: 0 10px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--color-divider); cursor: pointer; } #app .g2-name:hover { color: var(--color-primary); background: var(--color-surface); } #app .g2-track { position: relative; height: var(--g2-row); border-top: 1px solid var(--color-divider); } #app .g-bar { position: absolute; top: 7px; height: 16px; border-radius: 4px; background: var(--color-primary); cursor: pointer; z-index: 2; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-primary) 60%, #000); } #app .g-bar:hover { filter: brightness(1.12); } #app .g-ms { position: absolute; top: 8px; width: 13px; height: 13px; transform: rotate(45deg); cursor: pointer; z-index: 3; margin-left: -6px; } #app .g-ms.deadline { background: var(--ar-urgent); } #app .g-ms.task { background: var(--color-primary); } #app .g-ms:hover { filter: brightness(1.15); } #app .g-orig { position: absolute; top: 10px; width: 9px; height: 9px; margin-left: -4px; border: 1px dashed var(--color-text-faint); transform: rotate(45deg); z-index: 2; } #app .g-tick { position: absolute; top: 12px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ar-accent); z-index: 2; } #app .gantt-hint { font-family: var(--ar-mono); font-size: 11px; color: var(--color-text-muted); margin-top: 10px; line-height: 1.5; } /* ---------- Note "data spostata" nelle modali ---------- */ .ar-dialog .dlg-moved { margin: 0; font-size: 12px; font-family: var(--ar-mono); color: var(--color-text); background: color-mix(in oklab, var(--color-leaf) 18%, transparent); border-radius: var(--radius-md); padding: 8px 10px; } .ar-dialog .dlg-check { flex-direction: row; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 13px; color: var(--color-text); } .ar-dialog .dlg-check input { width: auto; } /* ---------- Modale task ---------- */ .ar-dialog { border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text); padding: 0; max-width: 520px; width: calc(100% - 32px); } .ar-dialog::backdrop { background: rgba(0, 0, 0, .55); } .ar-dialog form { padding: 22px; display: flex; flex-direction: column; gap: 12px; } .ar-dialog h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0 0 4px; } .ar-dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-text-muted); font-family: var(--ar-mono); } .ar-dialog input, .ar-dialog select, .ar-dialog textarea { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); padding: 8px 10px; font-size: 14px; font-family: var(--font-body); } .ar-dialog input:focus, .ar-dialog select:focus, .ar-dialog textarea:focus { outline: none; border-color: var(--color-primary); } .ar-dialog .dlg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ar-dialog .dlg-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .ar-dialog .dlg-actions .spacer { flex: 1; } .ar-dialog .danger { color: var(--ar-urgent); border-color: var(--ar-urgent); } @media (max-width: 460px) { .ar-dialog .dlg-row { grid-template-columns: 1fr; } }