:root{--bg:#F8FAFC;--fg:#0F172A;--card:#fff;--muted:#475569;--line:#E2E8F0;--pri:#2563EB;--acc:#059669;--bad:#DC2626;--side:#0F172A;--sidefg:#CBD5E1;--r:10px;--sp:12px;--c1:#202945}
@media (prefers-color-scheme:dark){:root{--bg:#0B1220;--fg:#E2E8F0;--card:#111B2E;--muted:#94A3B8;--line:#22304A;--pri:#60A5FA;--acc:#34D399;--bad:#F87171;--side:#070C17;--c1:#60A5FA}}
/* Colori dai siti: WE navy #202945 (accento #F1D09F), AE arancio-rosso #D3411C (accento #FBBE5B) */
body[data-area=we]{--pri:#202945;--c1:#202945}
body[data-area=ae]{--pri:#D3411C;--c1:#D3411C}
@media (prefers-color-scheme:dark){body[data-area=we]{--pri:#F1D09F;--c1:#F1D09F}body[data-area=ae]{--pri:#FBBE5B;--c1:#FBBE5B}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 "Fira Sans",system-ui,sans-serif;display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--pri);color:#fff;padding:8px 12px;border-radius:6px;z-index:9}
.side{background:var(--side);color:var(--sidefg);padding:16px 12px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;color:#fff;margin:0 8px 20px}
.logo{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--pri),var(--acc))}
.side nav{display:flex;flex-direction:column;gap:2px}
.side a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:8px;color:inherit;text-decoration:none;transition:background .2s}
.side a:hover{background:rgba(255,255,255,.08)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
main{padding:20px 24px;min-width:0}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
h1{font-size:22px;margin:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.filters label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:2px}
input[type=date]{min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);font:inherit}
button{min-height:40px;padding:0 18px;border:0;border-radius:8px;background:var(--pri);color:#fff;font:500 14px inherit;cursor:pointer;transition:filter .2s}
button:hover{filter:brightness(1.1)}
.meta{color:var(--muted);font-size:13px;margin:8px 0 16px}
.badge{margin-left:8px;padding:2px 8px;border-radius:99px;background:#FEF3C7;color:#92400E;font-weight:500}
.alert{padding:12px;border-radius:8px;background:#FEE2E2;color:#991B1B}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--sp)}
.kpi,.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.kpi p{margin:0}.kpi-l{font-size:12px;color:var(--muted)}
.kpi-v{font:600 26px "Fira Code",monospace;margin:4px 0 2px!important}
.kpi-s{font-size:12px;color:var(--muted)}
.delta{font-weight:600;margin-right:6px}.delta.up{color:var(--acc)}.delta.down{color:var(--bad)}
.narr{background:var(--card);border-left:4px solid var(--pri);padding:12px 16px;border-radius:0 var(--r) var(--r) 0;margin:var(--sp) 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--sp)}
.card h3{font-size:14px;margin:0 0 8px}
.chart{position:relative;height:240px}
details{margin-top:8px;font-size:13px;color:var(--muted)}summary{cursor:pointer;min-height:24px}
table{width:100%;border-collapse:collapse}th,td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
td{font-variant-numeric:tabular-nums}.data thead th{font-size:12px;color:var(--muted)}
.tw{overflow-x:auto}.wide{grid-column:1/-1}
@media (max-width:760px){body{grid-template-columns:1fr}.side{position:static;height:auto}.side nav{flex-direction:row;overflow-x:auto}.side a span{white-space:nowrap}main{padding:16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
fieldset{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:2px 8px 6px;margin:0;background:var(--card)}
legend{font-size:12px;font-weight:600;color:var(--muted);padding:0 4px}
fieldset input[type=date]{min-height:34px}
.chk{flex-direction:row!important;align-items:center;gap:6px!important;min-height:40px;font-size:13px!important;color:var(--fg)!important}
.chk input{width:18px;height:18px}
.piv{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
.scroll{max-height:320px;overflow:auto}
td.up,td.down{font-weight:600}td.up{color:var(--acc)}td.down{color:var(--bad)}
tr.tot th,tr.tot td{font-weight:600;border-top:2px solid var(--line);position:sticky;bottom:0;background:var(--card)}
.data thead th{position:sticky;top:0;background:var(--card)}
.mono{font-family:"Fira Code",monospace;font-size:12px}small{font-weight:400;color:var(--muted)}
.tg{all:unset;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:2px;cursor:pointer;color:var(--muted);border-radius:4px}
.tg:hover{background:var(--line)}.tg:focus-visible{outline:2px solid var(--pri)}.tg:disabled{opacity:.4}
.tg-sp{display:inline-block;width:26px}
.pivot tr[data-lv]:not([data-lv="0"]) th{font-weight:400;color:var(--muted)}
a.rec{color:var(--pri);text-decoration:none}a.rec:hover{text-decoration:underline}
.logout{margin:20px 8px 0}.logout button{width:100%;background:rgba(255,255,255,.1);min-height:40px}
body.login{display:grid;place-items:center;grid-template-columns:1fr}
.box{width:min(360px,100% - 32px);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px}
.box .brand{color:var(--fg)}.box h1{font-size:18px;margin:0 0 16px}
.box form{display:flex;flex-direction:column;gap:12px}.box label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.box input{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit}
.box button{min-height:44px}
.az{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 16px;padding:4px;border-radius:10px;background:rgba(255,255,255,.08)}
.az a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:0 6px;border-radius:8px;color:var(--sidefg);text-decoration:none;font-size:13px;font-weight:500;line-height:1.2;transition:background .2s}
.az a:hover{background:rgba(255,255,255,.1)}
.az a[aria-current]{color:#fff}

@media (max-width:760px){.az{max-width:420px}}
/* Colore dell'azienda (dai siti): navy = World Explorer, arancio-rosso = African Explorer */
body[data-area=we]{--brand:#202945}
body[data-area=ae]{--brand:#D3411C}
.side{background:var(--brand);color:#fff}
.side .brand{color:#fff}
.side a{color:rgba(255,255,255,.88)}
.side a:hover{background:rgba(255,255,255,.14)}
.side nav a[aria-current]{background:rgba(255,255,255,.24);color:#fff;font-weight:600}
.logout button{background:rgba(255,255,255,.16)}
.az{background:rgba(0,0,0,.18)}
.az a[aria-current]{background:#fff}
.az a.az-we[aria-current]{color:#202945}
.az a.az-ae[aria-current]{color:#D3411C}
main{border-top:6px solid var(--brand)}
.pill{display:inline-block;background:var(--brand);color:#fff;padding:2px 14px;border-radius:99px;font-size:.62em;font-weight:600;letter-spacing:.02em;vertical-align:middle;margin-right:6px}
.kpi{border-top:3px solid var(--brand)}
.narr{border-left-color:var(--brand)}
.filters button{background:var(--brand)}
body.login main{border-top:0}
@media (max-width:760px){.side{padding-bottom:12px}}
/* Blocco logo a altezza fissa (120px): i due logo hanno proporzioni diverse, il menu sotto non deve spostarsi cambiando azienda */
.side .brand{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:0;height:120px;margin-bottom:20px}
.side .brand-logo{display:block;width:150px;height:92px;object-fit:contain;object-position:left center;margin:0}
.side .brand small{font-size:12px;font-weight:500;opacity:.85;letter-spacing:.04em;text-transform:uppercase;line-height:20px}
/* Riepilogo: box ridimensionabili (angolo in basso a destra), disposti a righe che si adattano */
.grid.piv{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sp)}
.piv .card{display:flex;flex-direction:column;resize:both;overflow:hidden;flex:0 0 auto;width:min(100%,440px);height:340px;min-width:260px;min-height:160px;max-width:100%}
.piv .card h3{flex:0 0 auto}
.piv .card .tw.scroll{flex:1 1 auto;min-height:0;max-height:none}
.rz-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 var(--sp);font-size:12px;color:var(--muted)}
.rz-reset{min-height:32px;padding:0 12px;background:transparent;color:var(--fg);border:1px solid var(--line);font-size:12px}
.rz-reset:hover{background:var(--line);filter:none}
@media (hover:none){.rz-bar span{display:none}}
/* Performance: box ridimensionabili solo in altezza */
.card.rz-v{display:flex;flex-direction:column;resize:vertical;overflow:hidden;height:340px;min-height:160px;margin-bottom:20px}
.card.rz-v h3{flex:0 0 auto}
.card.rz-v .tw.scroll{flex:1 1 auto;min-height:0;max-height:none}
.side .brand small{color:rgba(255,255,255,.85)}
/* African Explorer: il logo ha il testo arancio come lo sfondo, quindi sta su una targhetta bianca (versione a colori) */
body[data-area=ae] .side .brand-logo{background:#fff;border-radius:10px;padding:6px 10px;box-sizing:border-box;width:150px;height:92px}