/* css/area-shell.css · Scheletro della app: layout, sidebar, testata, ricerca globale, badge connessione. Filone nuovo-design, PR 2 (design-02-scheletro). Regole del file: - mobile-first; le @media desktop sono `screen and (min-width:769px)`, stesso confine delle regole da telefono (max-width:768px); - solo token (--fc-*, --sp-*, --r, --rs, --r-pill, --sidebar-w, --st-*): niente hex, niente alias vecchi; - niente !important, niente font-family (lo mette base.css su body); - caricato DOPO base.css e gli altri fogli di area: possiede la forma dello scheletro; le regole vecchie che stavano in style.css e mobile.css per questi selettori sono state cancellate nella PR 2; - i @keyframes qui sotto sono globali al documento: fcFadeIn lo usano anche .task-modal-overlay e .note-history-overlay (area-task.css), fcSlideDown i due banner in cima (.fc-banner in base.css, design-13e), fcToastIn/Out i toast in base.css, rtPulse il badge connessione qui sotto, lnSpin lo spinner .ln-spinner di base.css (design-13a). */ /* ── Animazioni condivise ── */ @keyframes fcFadeIn{from{opacity:0}to{opacity:1}} @keyframes fcSlideDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}} /* Il verso lo dà --fc-toast-dy, dichiarato su .fc-toast in base.css: 8px da telefono (il toast sta in basso e sale), -8px da desktop (sta in alto e scende). design-02c. */ @keyframes fcToastIn{from{opacity:0;transform:translateY(var(--fc-toast-dy))}to{opacity:1;transform:none}} @keyframes fcToastOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(var(--fc-toast-dy))}} @keyframes rtPulse{0%,100%{opacity:1}50%{opacity:.35}} @keyframes lnSpin{to{transform:rotate(360deg)}} /* ── Layout ── */ .main{padding:var(--sp-3) var(--sp-4)} /* ── Skip link (WCAG 2.4.1): visibile solo al focus da tastiera ── */ .skip-link{position:absolute;left:-9999px;top:0;z-index:9999;padding:var(--sp-2) var(--sp-4);border-radius:0 0 var(--rs) 0;background:var(--fc-accent-fill);color:var(--fc-on-accent);font-weight:700;text-decoration:none} .skip-link:focus{left:0} /* ── Sidebar: cassetto da telefono, colonna fissa da 769px ── */ .sidebar{position:fixed;top:0;bottom:0;left:0;z-index:600;width:var(--sidebar-w);max-width:85vw;display:flex;flex-direction:column;padding-top:var(--fc-safe-top);background:var(--fc-card);border-right:1px solid var(--fc-sep);transform:translateX(-100%);transition:transform .25s ease} .sidebar.open{transform:none} .sidebar-overlay{position:fixed;inset:0;z-index:599;display:none;background:var(--fc-scrim)} .sidebar-overlay.open{display:block} .sidebar-logo{padding:var(--sp-5) var(--sp-4) var(--sp-3)} .logo{display:flex;align-items:center;gap:var(--sp-2)} .logo-badge{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--rs);background:var(--fc-accent-fill);color:var(--fc-on-accent);font-size:12px;font-weight:800} .logo-text{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .logo-text .g{color:var(--fc-accent)} .logo-text .w{color:var(--fc-label)} .sidebar-nav{flex:1;display:flex;flex-direction:column;padding:0 var(--sp-2) var(--sp-2);overflow-y:auto;scrollbar-width:none} .sidebar-nav::-webkit-scrollbar{display:none} .sidebar-section-label{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-4) var(--sp-3) var(--sp-1);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fc-label2)} .sidebar-section-label.is-fondo{margin-top:auto} .sidebar-section-label>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sidebar-sub-label{margin-left:var(--sp-1);font-weight:500;letter-spacing:0;text-transform:none} .sidebar-sub-label.is-ok{color:var(--fc-accent)} .sidebar-sub-label.is-danger{color:var(--fc-danger)} .sidebar-sub-btn{flex:none;display:inline-flex;align-items:center;min-height:24px;padding:0 var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--r-pill);background:none;color:var(--fc-label2);font:inherit;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;cursor:pointer} .sidebar-sub-btn:focus-visible{color:var(--fc-accent);border-color:var(--fc-accent)} .sidebar-sub-panel{padding:0 var(--sp-3) var(--sp-2);font-size:12px;color:var(--fc-label2)} .sidebar-sub-row{margin-bottom:var(--sp-2)} .sidebar-sub-note{margin-top:var(--sp-1);font-size:11px;color:var(--fc-label2)} .nav-item{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:1px;padding:0 var(--sp-3);border-radius:var(--rs);font-size:15px;font-weight:500;color:var(--fc-label);cursor:pointer;user-select:none;transition:background .15s} .nav-item.active{background:var(--fc-accent-soft);color:var(--fc-accent);font-weight:600} .nav-item:focus-visible{outline:2px solid var(--fc-accent);outline-offset:-2px} .nav-icon{flex:none;width:20px;text-align:center;font-size:11px;color:var(--fc-label2)} .nav-item.active .nav-icon{color:var(--fc-accent)} .nav-badge{display:none;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:auto;padding:0 5px;border-radius:var(--r-pill);background:var(--fc-danger-fill);color:var(--fc-on-accent);font-size:11px;font-weight:700} .sidebar-footer{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--fc-safe-bottom));border-top:1px solid var(--fc-sep)} .sidebar-avatar{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--fc-accent-fill);color:var(--fc-on-accent);font-size:12px;font-weight:600} .sidebar-user-info{flex:1;min-width:0} .sidebar-user-name{font-size:13px;font-weight:600;color:var(--fc-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sidebar-user-role{font-size:12px;color:var(--fc-label2)} .sidebar-logout:focus-visible{background:var(--fc-danger-soft);color:var(--fc-danger)} /* ── Testata: barra appiccicata in alto; il vetro (sfondo + blur) sta su ::before, così la testata non fa da contenitore ai pannelli position:fixed (#scadenzePanel, #alertPanel, foglio dal basso via .hdr-panel) da telefono. Da 769px invece i pannelli sono position:absolute;top:calc(100% + 1px) DENTRO la testata (il +1px lascia scoperta l'hairline border-bottom, che top:100% copriva perché misura sul padding box): la testata NON deve mai prendere transform, filter, contain o overflow. I primi tre la renderebbero contenitore anche dei fixed da telefono, overflow taglierebbe i pannelli assoluti da desktop (il vetro sta su ::before apposta). Da telefono ricerca e campanella stanno sulla prima riga, pillole e pulsante primario sulla seconda ── */ header{position:sticky;top:0;z-index:500;display:flex;align-items:center;gap:var(--sp-2);min-height:52px;padding:var(--fc-safe-top) var(--sp-3) 0;border-bottom:1px solid var(--fc-glass-border)} header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fc-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .hamburger{color:var(--fc-label);font-size:20px} .hdr-actions{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--sp-2);min-width:0;padding:var(--sp-2) 0} .hdr-btn{display:inline-flex;align-items:center;gap:4px;padding:0 var(--sp-3);border:0;border-radius:var(--r-pill);font-size:13px;letter-spacing:0;white-space:nowrap;cursor:pointer;transition:background .15s} .hdr-btn-ghost{background:var(--fc-accent-soft);color:var(--fc-accent)} .hdr-btn-warn{background:var(--fc-warn-soft);color:var(--fc-warn)} .hdr-btn-danger{background:var(--fc-danger-soft);color:var(--fc-danger)} .hdr-btn:focus-visible{outline:2px solid var(--fc-accent);outline-offset:2px} .hdr-pill{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 var(--sp-3);border:0;border-radius:var(--r-pill);background:var(--fc-fill);color:var(--fc-label);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer} .hdr-pill-info{background:var(--fc-info-soft);color:var(--fc-info)} .hdr-pill-warn{background:var(--fc-warn-soft);color:var(--fc-warn)} .hdr-pill-danger{background:var(--fc-danger-soft);color:var(--fc-danger)} .hdr-stats{font-size:13px;font-weight:500;color:var(--fc-label2)} .hdr-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:var(--rs);font-size:20px;cursor:pointer;text-align:center;line-height:44px} .hdr-bell-count{position:absolute;top:4px;right:4px;display:flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--fc-danger-fill);color:var(--fc-on-accent);font-size:11px;font-weight:700} .hdr-panel{position:fixed;left:5px;right:5px;bottom:0;z-index:9999;max-height:60vh;max-height:60dvh;overflow:hidden;padding-bottom:var(--fc-safe-bottom);background:var(--fc-card);border:1px solid var(--fc-sep);border-radius:var(--r) var(--r) 0 0;box-shadow:var(--fc-shadow)} .hdr-panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);border-bottom:1px solid var(--fc-sep);font-size:15px;font-weight:600;color:var(--fc-label)} .hdr-panel-head .btn{background:var(--fc-fill);color:var(--fc-label)} .hdr-panel-tools{display:flex;align-items:center;gap:var(--sp-1)} .hdr-panel-body{padding:var(--sp-2);max-height:calc(60vh - 68px - var(--fc-safe-bottom));max-height:calc(60dvh - 68px - var(--fc-safe-bottom));overflow-y:auto} /* Menu "⋯" dei quattro comandi admin (design-02c): pannello assoluto sotto il toggle, dentro la testata (sticky, z 500, senza overflow: può sporgere sul main). [hidden] di base.css lo chiude. */ .hdr-more{position:relative} .hdr-more-menu{position:absolute;top:calc(100% + var(--sp-1));right:0;z-index:9999;display:flex;flex-direction:column;gap:2px;min-width:200px;padding:var(--sp-1);background:var(--fc-card);border:1px solid var(--fc-sep);border-radius:var(--r);box-shadow:var(--fc-shadow)} .hdr-more-menu .hdr-btn{width:100%;justify-content:flex-start;min-height:44px;border-radius:var(--rs)} @media (hover:hover){ .hdr-btn-warn:hover{background:var(--fc-warn-soft)} .hdr-btn-danger:hover{background:var(--fc-danger-soft)} .hdr-btn-primary:hover{box-shadow:0 2px 8px var(--fc-glass-border)} .hdr-pill:hover{box-shadow:inset 0 0 0 1px var(--fc-sep)} .hdr-bell:hover{background:var(--fc-fill)} } @media screen and (max-width:768px){ .gsearch-wrap{order:-1;flex:1 1 200px} /* Pillole: 44px di bersaglio e testo troncato ("🚨 120 scadute + 11 in arrivo" allungava la barra sticky da 98 a 149px). inline-flex non tronca il testo diretto: inline-block + line-height. */ .hdr-pill{min-width:44px;min-height:44px;line-height:44px} #hdrStats,.hdr-more{display:none} } @media screen and (min-width:769px){ header{margin-left:var(--sidebar-w);padding:0 var(--sp-5)} .hamburger{display:none} .hdr-actions{padding:0} .hdr-panel{position:absolute;top:calc(100% + 1px);bottom:auto;left:auto;width:380px;max-height:70vh;max-height:70dvh;padding-bottom:0;border-radius:var(--r)} .hdr-panel-body{max-height:calc(70vh - 60px);max-height:calc(70dvh - 60px)} #scadenzePanel{right:120px} #alertPanel{right:60px} } /* ── Una riga anche a 1024-1366 (design-02d). Misurato il 21-set-2026 sulla Pipeline, dove #hdrStats dice "86 attive · 122 completate": con Import ed Export in barra i nove elementi chiedevano 1177 px, la testata ne offre w−288 (1152 a 1440, 1078 a 1366, 992 a 1280, 736 a 1024). Import ed Export stanno sempre nel menu "⋯" (index.html): restano 904 px con la ricerca al minimo. Sotto 1280 spariscono le statistiche e le pillole si troncano (regola condivisa col telefono, qui sotto). ── */ @media screen and (max-width:1279px){ /* Pillole troncate: "🚨 120 scadute + 11 in arrivo" allungava la barra. inline-flex non tronca il testo diretto: inline-block + line-height (44 da telefono, 36 da 769 in su, nei rispettivi blocchi). */ .hdr-pill{position:relative;display:inline-block;max-width:7.5em;overflow:hidden;text-overflow:ellipsis} #fcOfflineBadge{max-width:none} /* Scadenze e Alert: icona e numero, le parole solo per lo screen reader (giro visivo 28-set-2026: "40 sca…" a 1024, "40…" a 375). Clip a 1 px e non display:none, come "Nuova Op." sotto i 400. */ .hdr-pill-w{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} } @media screen and (min-width:769px) and (max-width:1279px){ #hdrStats{display:none} .hdr-pill{line-height:36px} } /* ── Sotto i 400px (iPhone mini/SE, 375): due righe, non tre. Le due pillole a 7.5em (121 px l'una) più "+ Nuova Op." (110) chiedevano 368 px in 299 (375 − 24 di padding − 44 di hamburger − 8 di gap). Pillole a 5.5em e il bottone ridotto al "+" (44 px): 252. Il testo "Nuova Op." resta nel bottone per lo screen reader (clip a 1 px, non display:none: WCAG 2.5.3, il nome contiene il testo visibile). ── */ @media screen and (max-width:400px){ .hdr-pill{max-width:5.5em} .hdr-btn-primary{position:relative;min-width:44px;justify-content:center;padding:0 var(--sp-2)} .hdr-btn-primary .hdr-btn-txt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} } @media (prefers-reduced-transparency:reduce){header::before{background:var(--fc-card);-webkit-backdrop-filter:none;backdrop-filter:none}} @media (display-mode:standalone){ header{-webkit-app-region:drag} .hdr-btn,.hdr-pill,.hdr-bell,.hamburger,.gsearch-input,.hdr-panel{-webkit-app-region:no-drag} } /* ── Ricerca globale: campo riempito nella testata, tendina a card ── */ .gsearch-wrap{position:relative;min-width:0} .gsearch-input{width:100%;min-height:44px;padding:0 var(--sp-3) 0 34px;border:0;border-radius:var(--rs);background:var(--fc-fill);color:var(--fc-label);font-size:16px} .gsearch-input::placeholder{color:var(--fc-label2)} .gsearch-input:focus{outline:2px solid var(--fc-accent);outline-offset:0} .gsearch-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:13px;line-height:1;opacity:.6;pointer-events:none} .gsearch-dd{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:600;display:none;max-height:min(320px,60vh);overflow-y:auto;background:var(--fc-card);border:1px solid var(--fc-sep);border-radius:var(--r);box-shadow:var(--fc-shadow)} .gsearch-dd.open{display:block} .gsearch-group{padding:var(--sp-2) var(--sp-3) var(--sp-1);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fc-label2)} .gsearch-empty{padding:var(--sp-4);text-align:center;font-size:15px;color:var(--fc-label2)} .gsearch-item{display:flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--fc-sep);cursor:pointer} .gsearch-item:last-child{border-bottom:0} .gsearch-item .status-dot{flex:none;margin-right:0} .gsearch-item .status-dot.st-agenzia{background:var(--fc-info)} .gsearch-item-id{flex:none;min-width:48px;font-size:12px;font-weight:700;color:var(--fc-accent);font-variant-numeric:tabular-nums} .gsearch-item-addr{flex:1;min-width:0;font-size:15px;font-weight:500;color:var(--fc-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gsearch-item-city{flex:none;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)} .gsearch-item-status{flex:none;padding:2px 8px;border-radius:var(--r-pill);background:var(--fc-fill);color:var(--fc-label);font-size:11px;font-weight:600;white-space:nowrap} .gsearch-item-status.is-top{background:var(--fc-accent-soft);color:var(--fc-accent)} @media (hover:hover){.gsearch-item:hover{background:var(--fc-fill)}} @media screen and (min-width:769px){ /* design-02d: base 256 e crescita fino a 320: in una riga che si riempie la ricerca cede prima che gli altri vadano a capo (flex-wrap spezza sulla base). Il placeholder misura 189 px in Arial 14 più 46 di padding: i 21 px in più coprono SF e Segoe, che l'input (senza font:inherit) usa altrove. */ .gsearch-wrap{flex:1 1 256px;max-width:320px} .gsearch-input{min-height:36px;font-size:14px} .gsearch-dd{right:auto;width:420px} } /* ── Stato connessione (js/modules/realtime-status.js): pallino più parola, mai il solo colore ── */ #rtStatusBadge{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:24px;padding:0 var(--sp-2);border-radius:var(--r-pill);background:var(--fc-fill);color:var(--fc-label);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} #rtStatusBadge[data-status="idle"]{background:var(--fc-fill);color:var(--fc-label)} #rtStatusBadge[data-status="subscribed"]{background:var(--fc-accent-soft);color:var(--fc-ok)} #rtStatusBadge[data-status="retrying"]{background:var(--fc-warn-soft);color:var(--fc-warn)} #rtStatusBadge[data-status="gaveup"]{background:var(--fc-danger-soft);color:var(--fc-danger);cursor:pointer} .rt-dot{width:7px;height:7px;border-radius:50%;background:currentColor} #rtStatusBadge[data-status="retrying"] .rt-dot{animation:rtPulse 1.2s ease-in-out infinite} /* ── Puntatore: hover solo dove esiste ── */ @media (hover:hover){ .nav-item:hover{background:var(--fc-fill)} .nav-item.active:hover{background:var(--fc-accent-soft)} .sidebar-sub-btn:hover{color:var(--fc-accent);border-color:var(--fc-accent)} .sidebar-logout:hover{background:var(--fc-danger-soft);color:var(--fc-danger)} } /* ── Da 769px: sidebar fissa, contenuto spostato ── */ @media screen and (min-width:769px){ .main{margin-left:var(--sidebar-w);padding:var(--sp-4) var(--sp-5)} .sidebar{max-width:none;transform:none} .sidebar-overlay.open{display:none} .nav-item{min-height:36px} } /* ── Piè di pagina (design-13a, era FOOTER di style.css) ── In fondo alla pagina, fuori da .main: da 769px segue la colonna del contenuto (la sidebar fissa ne copriva la parte sinistra). Era bianco al 25% su --fc-ink (circa 2:1): ora 11 px --fc-label2 su --fc-bg, il nome e l'anno in --fc-accent, e la safe-area sotto. Da telefono il testo sta sopra il bottone del bug (fisso a 24 px dal fondo, 44 px: 24 + 44 + 8 = 76), che prima ne copriva la fine. Il tag resta