/* Turni – © 2026 Danilo Otupacca. Tutti i diritti riservati. Licenza d'uso: LICENZA.txt */
/* Turni – stile ispirato alle linee guida Apple (Human Interface Guidelines):
   sfondo raggruppato, schede bianche senza bordi, titoli grandi, controlli segmentati,
   barra delle schede traslucida sul telefono e barra laterale sul computer. */

:root {
  --bg: #f2f2f7;              /* sfondo raggruppato */
  --card: #ffffff;
  --card-2: #f7f7fa;          /* righe alternate, intestazioni */
  --fill: rgba(118, 118, 128, .12);
  --fill-2: rgba(118, 118, 128, .2);
  --text: #1d1d1f;
  --muted: #6e6e73;
  --faint: #aeaeb2;
  --line: rgba(60, 60, 67, .14);
  --line-strong: rgba(60, 60, 67, .24);
  --brand: #1f6f5c; --brand-ink: #ffffff; --brand-soft: #dff0ea;
  --ok: #248a3d; --ok-soft: #e3f5e8;
  --warn: #b25000; --warn-soft: #fff1e0;
  --bad: #d70015; --bad-soft: #ffe9eb;
  --radius: 14px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 12px rgba(0,0,0,.04);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08);
  --glass: rgba(249, 249, 252, .82);
  --nav-h: 56px; --side-w: 248px;
  --cell: 26px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --card: #1c1c1e; --card-2: #232326;
    --fill: rgba(118, 118, 128, .24); --fill-2: rgba(118, 118, 128, .32);
    --text: #f5f5f7; --muted: #98989d; --faint: #636366;
    --line: rgba(84, 84, 88, .55); --line-strong: rgba(84, 84, 88, .8);
    --brand: #3fb596; --brand-ink: #06231b; --brand-soft: #16332b;
    --ok: #30d158; --ok-soft: #12301b; --warn: #ff9f0a; --warn-soft: #33240b; --bad: #ff453a; --bad-soft: #3a1514;
    --shadow: none; --shadow-lg: 0 24px 64px rgba(0,0,0,.6);
    --glass: rgba(28, 28, 30, .78);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 16px/1.42 var(--font); letter-spacing: -.011em; min-height: 100dvh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); }
h1 { font-weight: 700; letter-spacing: -.025em; }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
h4 { margin: 18px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }

/* ------------------------------------------------------------ struttura */
#app { min-height: 100dvh; }
.main { max-width: 760px; margin: 0 auto; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px); }
#app.full .main { max-width: none; }
.screen { padding: 0 16px; }

.sidebar { display: none; }
@media (min-width: 900px) {
  .sidebar { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 20;
    padding: 18px 12px; background: var(--glass); border-right: 1px solid var(--line);
    -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
  .main { margin-left: var(--side-w); max-width: none; padding: 0 0 40px; }
  .main > .content-inner, .main #content:not(.view-griglia) { max-width: 820px; margin: 0 auto; }
  #app.full .main #content { max-width: none; }
  nav.tabs { display: none !important; }
  .screen { padding: 0 32px; }
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; min-height: 52px; }
.side-brand img.logo-full { max-width: 100%; max-height: 44px; object-fit: contain; }
.side-brand img.appicon { width: 32px; height: 32px; border-radius: 8px; }
.side-brand .name { font: 600 15px/1.2 var(--font-display); }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav button { display: flex; align-items: center; gap: 11px; border: 0; background: none; cursor: pointer; text-align: left;
  padding: 8px 10px; border-radius: 9px; font-size: 15px; font-weight: 500; color: var(--text); }
.side-nav button:hover { background: var(--fill); }
.side-nav button.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.side-nav .ico svg { width: 21px; height: 21px; display: block; }
.side-nav .count { margin-left: auto; font-size: 12px; font-weight: 600; background: var(--bad); color: #fff; border-radius: 99px; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; }
.side-foot { margin-top: auto; padding: 10px; font-size: 13px; color: var(--muted); }
.side-foot strong { display: block; color: var(--text); font-weight: 600; }

/* titolo grande in testa a ogni pagina */
.topbar-wrap { padding-top: env(safe-area-inset-top); }
.topbar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 16px 12px; }
.topbar h1 { font-size: 32px; line-height: 1.12; flex: 1; min-width: 0; }
.topbar .actions-inline { display: flex; gap: 8px; flex-wrap: wrap; }
@media (min-width: 900px) { .topbar { padding: 34px 32px 16px; } .topbar h1 { font-size: 30px; } }
.brandlogo { display: block; height: 32px; width: auto; max-width: 60%; object-fit: contain; margin: 14px 16px 0; }
@media (min-width: 900px) { .main .brandlogo { display: none; } }

/* testo */
.sub { color: var(--muted); font-size: 14px; }
.hint { color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.4; }
.center { text-align: center; }
.row { display: flex; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.gap { gap: 8px; }
.grow { flex: 1; min-width: 0; }
.sect { margin: 22px 16px 7px; font-size: 13px; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; font-family: var(--font); }
.screen .sect { margin-left: 4px; }

/* ------------------------------------------------------------ pulsanti */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer;
  background: var(--brand); color: var(--brand-ink); border-radius: 12px; padding: 11px 18px; min-height: 44px;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em; transition: filter .15s, transform .08s, background .15s; text-decoration: none; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.98); filter: brightness(.95); }
.btn.secondary { background: var(--brand-soft); color: var(--brand); }
.btn.gray { background: var(--fill); color: var(--text); }
.btn.ghost { background: transparent; color: var(--brand); padding: 6px 10px; min-height: 34px; font-weight: 500; }
.btn.ghost:hover { background: var(--fill); filter: none; }
.btn.danger { background: var(--bad-soft); color: var(--bad); }
.btn.small { padding: 6px 14px; min-height: 32px; font-size: 14px; border-radius: 99px; }
.btn.wide { width: 100%; margin-top: 20px; }
.btn[disabled] { opacity: .4; cursor: default; transform: none; filter: none; }
.btn:focus-visible, .namebtn:focus-visible, .person:focus-visible, .side-nav button:focus-visible, nav.tabs button:focus-visible,
.seg button:focus-visible, .dutychip:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.linkbtn { display: block; margin: 2px auto 0; border: 0; background: none; color: var(--brand); font-size: 14px; cursor: pointer; padding: 0; }
.linkbtn:hover { text-decoration: underline; }
.iconbtn { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--fill); color: var(--muted); cursor: pointer;
  display: grid; place-items: center; font-size: 15px; font-weight: 600; flex: none; }
.iconbtn:hover { background: var(--fill-2); }

/* controllo segmentato */
.seg { display: inline-flex; background: var(--fill); border-radius: 9px; padding: 2px; gap: 2px; max-width: 100%; }
.seg button { flex: 1; border: 0; background: none; border-radius: 7px; padding: 6px 14px; font-size: 14px; font-weight: 500;
  cursor: pointer; white-space: nowrap; color: var(--text); min-height: 30px; }
.seg button.on { background: var(--card); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
@media (prefers-color-scheme: dark) { .seg button.on { background: #636366; } }
.seg.full { display: flex; width: 100%; }
.seg .n { margin-left: 5px; font-size: 12px; color: var(--bad); font-weight: 700; }

/* ------------------------------------------------------------ schede e liste */
.card { background: var(--card); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.card.unread { box-shadow: inset 4px 0 0 var(--brand), var(--shadow); }
.card h3 { margin-bottom: 2px; }
details.card { padding: 0; }
details.card > summary { list-style: none; cursor: pointer; padding: 15px 16px; font-weight: 600; font-size: 17px; display: flex; align-items: center; gap: 10px; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(-45deg); transition: transform .2s; }
details.card[open] > summary::after { transform: rotate(45deg); }
details.card > .panel-body { padding: 0 16px 16px; }
details.card[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 4px; }

/* lista raggruppata (come le Impostazioni di iPhone) */
.list { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 12px; }
.list > * + * { border-top: 1px solid var(--line); }
.person { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 0;
  padding: 11px 16px; cursor: pointer; min-height: 52px; }
.person:hover { background: var(--card-2); }
.person::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(-45deg); flex: none; margin-left: 4px; }
.person.off { opacity: .5; }
.person .title { font-weight: 500; }
.list .person + .person { border-top: 1px solid var(--line); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 600; font-size: 14px;
  background: var(--fill); color: var(--muted); }
.swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }

.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px;
  background: var(--fill); color: var(--muted); white-space: nowrap; }
.pill.brand { background: var(--brand-soft); color: var(--brand); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.empty { text-align: center; color: var(--muted); padding: 48px 16px; }
.empty .big { font: 600 20px/1.3 var(--font-display); color: var(--text); margin-bottom: 4px; }
.body-text { white-space: pre-wrap; word-wrap: break-word; margin: 8px 0 0; line-height: 1.5; }
.reply { margin-top: 10px; padding: 10px 12px; background: var(--card-2); border-radius: 10px; font-size: 14px; }
.line { padding: 10px 2px; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cardacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ------------------------------------------------------------ settimana */
.weeknav { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; }
.weeknav .title { flex: 1; text-align: center; font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.weeknav .title .sub, .weeknav .title .linkbtn { font-weight: 400; font-size: 13px; }
.weeknav .navbtn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--card); box-shadow: var(--shadow); cursor: pointer;
  display: grid; place-items: center; color: var(--brand); font-size: 20px; font-weight: 500; }
.weeknav .navbtn:hover { background: var(--card-2); }
.card.total { display: flex; justify-content: space-between; align-items: baseline; }
.card.total strong { font: 700 28px/1 var(--font-display); letter-spacing: -.02em; }
.days { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 12px; }
.myday { display: flex; gap: 14px; align-items: flex-start; padding: 13px 16px; }
.myday + .myday { border-top: 1px solid var(--line); }
.myday.today { background: color-mix(in srgb, var(--brand) 7%, var(--card)); }
.myday.today .dname { color: var(--brand); }
.myday.off .what { color: var(--muted); }
.myday .when { width: 92px; flex: none; }
.myday .dname { font-weight: 600; }
.myday .dnum { color: var(--muted); font-size: 14px; }
.myday .what { flex: 1; min-width: 0; }
.myday .hrs { color: var(--muted); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eline { padding: 1px 0; font-variant-numeric: tabular-nums; }
.eline.code { font-weight: 600; color: var(--warn); }
.eline .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.duty { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; margin-right: 6px; font-size: 13px; font-weight: 600;
  color: var(--brand); background: var(--brand-soft); border-radius: 7px; padding: 3px 8px; }
.duty.office { color: var(--muted); background: var(--fill); }
.notice { background: var(--warn-soft); color: var(--warn); border-radius: 12px; padding: 11px 14px; margin: 10px 0; font-size: 14px; }
.notice.info { background: var(--brand-soft); color: var(--brand); }

/* ------------------------------------------------------------ barra delle schede (telefono) */
nav.tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: var(--glass); border-top: .5px solid var(--line-strong);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); padding-bottom: env(safe-area-inset-bottom); }
nav.tabs .inner { max-width: 760px; margin: 0 auto; display: flex; height: var(--nav-h); }
nav.tabs button { flex: 1; border: 0; background: none; color: var(--faint); font-size: 10.5px; font-weight: 500; letter-spacing: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; cursor: pointer; padding-top: 4px; }
nav.tabs button.on { color: var(--brand); }
nav.tabs .ico svg { width: 25px; height: 25px; display: block; }
.badge { position: absolute; top: 3px; left: calc(50% + 7px); background: var(--bad); color: #fff; border-radius: 99px;
  font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; display: flex; align-items: center; justify-content: center; }

/* ------------------------------------------------------------ moduli */
label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin: 14px 0 6px; }
input, select, textarea { width: 100%; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-sm);
  padding: 10px 12px; min-height: 44px; font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.sheet input, .sheet select, .sheet textarea { background: var(--card); }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
select.compact { width: auto; min-height: 36px; padding: 6px 32px 6px 12px; font-size: 15px; }
input[type=color] { padding: 4px; height: 44px; width: 64px; cursor: pointer; }
input[type=file] { padding: 8px; font-size: 14px; }
input[type=checkbox] { accent-color: var(--brand); }
textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.check { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 400; font-size: 15px; color: var(--text); cursor: pointer; }
.check input { width: 22px; height: 22px; min-height: 0; flex: none; }
.check.compact { margin: 0; }
/* interruttore stile iOS */
.switch { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; color: var(--text); font-size: 15px; cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; min-height: 0; padding: 0; border: 0; border-radius: 99px; background: var(--fill-2);
  position: relative; flex: none; cursor: pointer; transition: background .2s; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .2s; }
.switch input:checked { background: #34c759; }
.switch input:checked::after { transform: translateX(20px); }
.switch input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.check.chip { margin: 0; padding: 7px 12px 7px 10px; border-radius: 99px; background: var(--fill); font-size: 14px; }
.check.chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.check.chip input { width: 18px; height: 18px; }
.err { color: var(--bad); font-size: 14px; margin-top: 10px; min-height: 20px; }
.secret { font: 600 26px/1.2 ui-monospace, "SF Mono", SFMono-Regular, Consolas, Menlo, monospace; background: var(--card-2);
  border-radius: 12px; padding: 16px; text-align: center; letter-spacing: 2px; margin: 12px 0; user-select: all; }
.radio-list { background: var(--card); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); margin-top: 6px; }
.radio-list label { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; color: var(--text); font-size: 15px; font-weight: 400; cursor: pointer; }
.radio-list label + label { border-top: 1px solid var(--line); }
.radio-list input { width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; flex: none; accent-color: var(--brand); }
.radio-list small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }

/* orari di apertura */
.hours { display: grid; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 6px; }
.hrow { display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
.hrow + .hrow { border-top: 1px solid var(--line); }
.hrow .dname { width: 96px; font-weight: 500; }
.hrow select { width: auto; min-height: 34px; padding: 4px 28px 4px 10px; font-size: 14px; }
.hrow .closed { color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------ finestre (sheet) */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.36); z-index: 40; display: flex; align-items: flex-end; justify-content: center;
  animation: fade .18s ease-out; }
.sheet { background: var(--bg); width: 100%; max-width: 560px; max-height: 92dvh; overflow: auto; position: relative;
  border-radius: 14px 14px 0 0; padding: 8px 18px calc(env(safe-area-inset-bottom) + 20px); box-shadow: var(--shadow-lg);
  animation: rise .26s cubic-bezier(.2,.8,.2,1); }
.sheet::before { content: ""; display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--fill-2); margin: 0 auto 8px; }
@media (min-width: 700px) {
  .overlay { align-items: center; }
  .sheet { border-radius: 16px; padding: 14px 22px 22px; animation: pop .2s cubic-bezier(.2,.8,.2,1); }
  .sheet::before { display: none; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(40px); opacity: .6; } }
@keyframes pop { from { transform: scale(.97); opacity: 0; } }
.sheet-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; position: sticky; top: -8px; z-index: 2; }
.sheet-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; flex: 1; }
.sheet.wide { max-width: 720px; }
.actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.actions .btn { flex: 1; }
.seglist { margin-top: 10px; }
.segrow { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.segrow select { min-height: 40px; padding: 6px 28px 6px 10px; width: auto; font-size: 15px; }
.segrow select.grow { flex: 1; }
.pick { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 0; background: var(--card); text-align: left; cursor: pointer; font-size: 15px; }
.pick:hover { background: var(--card-2); }
.pick.on { color: var(--brand); font-weight: 600; }
.pick.on::after { content: "✓"; margin-left: auto; font-weight: 700; }
.pick .why { margin-left: auto; color: var(--muted); font-size: 13px; }
.pick.dim { color: var(--muted); }
.picklist { background: var(--card); border-radius: 12px; overflow: hidden; margin-top: 6px; }
.picklist > * + * { border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ accesso */
.login { padding: 12vh 22px 32px; max-width: 420px; margin: 0 auto; }
.login .logo { width: 76px; height: 76px; border-radius: 18px; margin-bottom: 18px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.login h1 { font-size: 34px; margin-bottom: 4px; }
.login form { margin-top: 18px; }
@media (min-width: 700px) {
  .login { margin-top: 8vh; padding: 36px 34px 30px; background: var(--card); border-radius: 20px; box-shadow: var(--shadow-lg); }
}
.storelogo { display: block; max-width: 260px; max-height: 80px; object-fit: contain; margin-bottom: 20px; }

#toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); transform: translate(-50%, 16px);
  background: rgba(30, 30, 32, .92); color: #fff; padding: 11px 18px; border-radius: 99px; font-size: 14px; font-weight: 500; max-width: min(92vw, 560px);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 8px 30px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: .25s cubic-bezier(.2,.8,.2,1); z-index: 60; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { #toast { bottom: 28px; left: calc(50% + var(--side-w) / 2); } }

.banner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--warn-soft); color: var(--warn);
  padding: 10px 16px; font-size: 14px; font-weight: 500; }

/* ------------------------------------------------------------ griglia turni */
.grid-top { padding: calc(env(safe-area-inset-top) + 14px) 16px 6px; }
@media (min-width: 900px) { .grid-top { padding: 30px 28px 6px; } }
.grid-top h1 { font-size: 30px; }
.grid-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toolbar { margin: 4px 0 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
label.inline { display: inline; margin: 0; font-size: 15px; color: var(--text); font-weight: 500; }
select.reparto { font-weight: 600; min-width: 220px; }
.dot { display: inline-block; border-radius: 50%; }
.dot.big { width: 14px; height: 14px; }

.gridwrap { overflow-x: auto; padding: 0 16px 8px; -webkit-overflow-scrolling: touch; }
@media (min-width: 900px) { .gridwrap { padding: 0 28px 8px; } }
.gblock { margin-bottom: 16px; }
.gcard { display: inline-block; min-width: 100%; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; overflow: clip; }  /* clip: angoli tondi senza bloccare la colonna dei nomi fissa a sinistra */
table.grid { border-collapse: separate; border-spacing: 0; user-select: none; -webkit-user-select: none; }
table.grid th, table.grid td { padding: 0; height: 30px; font-size: 12px; }
table.grid thead th { background: var(--card-2); color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--line); height: 34px; }
table.grid thead th.hh { text-align: left; padding-left: 3px; border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.grid thead th.hh.closed { color: var(--faint); }
table.grid .name { position: sticky; left: 0; z-index: 2; background: var(--card); min-width: 150px; max-width: 150px; text-align: left; padding: 0 10px 0 14px;
  border-right: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.grid thead th.name { background: var(--card-2); font: 600 14px/1.2 var(--font-display); color: var(--text); letter-spacing: -.01em; }
.gblock.today table.grid thead th.name { color: var(--brand); }
table.grid thead th.name .sp { display: block; font: 500 11px/1.2 var(--font); color: var(--warn); }
.namebtn { border: 0; background: none; padding: 0; cursor: pointer; font-weight: 500; font-size: 13px; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; text-align: left; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.namebtn:hover { color: var(--brand); }
.namebtn .pend { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
table.grid td.c { width: var(--cell); min-width: var(--cell); border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); cursor: pointer; position: relative; }
table.grid td.c.half { border-left: 1px dashed var(--line); }
table.grid td.c.shut { background: var(--card-2); }
/* barre del turno: colore pieno con 4px di "aria" sopra e sotto, anche sopra i bordi tra le celle */
table.grid td.c.on, table.grid td.c.corso { background-origin: border-box !important; }
table.grid td.c.on { border-left-color: transparent;
  background: linear-gradient(var(--card), var(--card)) top / 100% 4px no-repeat, linear-gradient(var(--card), var(--card)) bottom / 100% 4px no-repeat, var(--c); }
table.grid td.c.corso { background: linear-gradient(var(--card), var(--card)) top / 100% 4px no-repeat, linear-gradient(var(--card), var(--card)) bottom / 100% 4px no-repeat,
  repeating-linear-gradient(45deg, #8e8e93 0 3px, #c7c7cc 3px 6px); }
@media (max-width: 600px) { table.grid .name { min-width: 92px; max-width: 92px; padding: 0 6px 0 10px; } table.grid td.note, table.grid th.note { min-width: 70px; } }
#gridwrap.paint-on td.c { touch-action: none; cursor: crosshair; }
table.grid td.codecell { text-align: center; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; cursor: pointer;
  border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.code-ferie { background: #e5efff; color: #0a4fb3; }
.code-recupero { background: #f0eaff; color: #5a2db8; }
.code-assente { background: var(--fill); color: var(--muted); }
.code-libero { background: #e7f7ec; color: #1b7a37; }
.code-permesso { background: #fff3dc; color: #915200; }
.code-corso { background: repeating-linear-gradient(45deg, #ececf0 0 6px, #f7f7f9 6px 12px); color: #3a3a3c; }
.code-off { background: var(--fill); color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .code-ferie { background: #10274a; color: #8ab8ff; } .code-recupero { background: #261b45; color: #c3a8ff; }
  .code-libero { background: #11301b; color: #6fdc8c; } .code-permesso { background: #352409; color: #ffc163; }
  .code-corso { background: repeating-linear-gradient(45deg, #2c2c2e 0 6px, #232325 6px 12px); color: #d1d1d6; }
}
table.grid td.codecell.leave { background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,.05) 8px 10px); }
table.grid td.codecell.leave::before { content: "🔒 "; letter-spacing: 0; }
table.grid td.tot, table.grid th.tot { min-width: 46px; text-align: center; font-weight: 600; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.grid td.week, table.grid th.week { min-width: 62px; background: var(--card-2); }
table.grid td.week.over { color: var(--warn); background: var(--warn-soft); }
table.grid td.note, table.grid th.note { min-width: 92px; text-align: left; padding: 0 8px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-weight: 600; color: var(--brand); white-space: nowrap; }
table.grid tfoot th, table.grid tfoot td { background: var(--card-2); font-weight: 600; color: var(--muted); text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }
table.grid tfoot th.name { text-align: left; font-size: 12px; background: var(--card-2); }
table.grid tr.cov td.n0 { background: var(--bad-soft); color: var(--bad); }
table.grid tr.cov td.n1 { background: var(--warn-soft); color: var(--warn); }
table.grid td.c.on.lock { cursor: not-allowed; background: linear-gradient(var(--card), var(--card)) top / 100% 4px no-repeat, linear-gradient(var(--card), var(--card)) bottom / 100% 4px no-repeat,
  repeating-linear-gradient(135deg, #c7c7cc 0 4px, #e5e5ea 4px 8px); }
@media (prefers-color-scheme: dark) { table.grid td.c.on.lock { background: linear-gradient(var(--card), var(--card)) top / 100% 4px no-repeat, linear-gradient(var(--card), var(--card)) bottom / 100% 4px no-repeat,
  repeating-linear-gradient(135deg, #48484a 0 4px, #2c2c2e 4px 8px); } }
#gridwrap.paint-on td.c.locked { cursor: not-allowed; }
table.grid tr.me th.name, table.grid tr.me td.tot { background: color-mix(in srgb, var(--brand) 9%, var(--card)); }
table.grid tr.me .namebtn, table.grid tr.me th.name { color: var(--brand); font-weight: 600; }

/* incarichi del giorno sotto la tabella */
.duties { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 12px; border-top: 1px solid var(--line); background: var(--card); align-items: center; }
.duties .lbl { font-size: 12px; color: var(--muted); font-weight: 500; margin-right: 4px; }
.dutychip { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; border-radius: 99px; padding: 5px 11px 5px 9px; font-size: 13px;
  background: var(--fill); color: var(--text); font-weight: 500; }
.dutychip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.dutychip.missing { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.dutychip.missing::before { background: var(--faint); }
.dutychip.problem { background: var(--warn-soft); color: var(--warn); }
.dutychip.problem::before { background: var(--warn); }
.dutychip.office::before { border-radius: 2px; }
.dutychip b { font-weight: 600; }
.dutychip:hover { filter: brightness(.97); }
.duties .sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 4px; }

.summary { margin: 4px 16px 20px; max-width: 980px; }
@media (min-width: 900px) { .summary { margin: 4px 28px 24px; } }
table.simple { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
table.simple th { text-align: left; padding: 8px 8px; color: var(--muted); font-weight: 500; font-size: 13px; border-bottom: 1px solid var(--line); }
table.simple td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.simple tr:last-child td { border-bottom: 0; }
table.simple tr.warnrow td:last-child { color: var(--warn); font-weight: 500; }
.warnlist { margin: 8px 0 0; padding-left: 18px; color: var(--warn); font-size: 14px; }
.warnlist li { margin: 3px 0; }

.log { max-height: 440px; overflow: auto; }
.logrow { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }

/* logo e icona */
.logobox { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-height: 64px; display: flex; align-items: center; margin-bottom: 8px; }
.logobox img { max-height: 60px; max-width: 100%; }
.iconpreview { width: 58px; height: 58px; border-radius: 13px; border: .5px solid var(--line); background: #fff; object-fit: cover; box-shadow: 0 2px 8px rgba(0,0,0,.1); }

/* allegati */
.atts { margin-top: 12px; display: grid; gap: 6px; }
.att { display: flex; align-items: center; gap: 4px; }
.attlink { flex: 1; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text);
  border-radius: 10px; padding: 9px 12px; background: var(--card-2); min-width: 0; }
.attlink:hover { background: var(--fill); }
.attlink .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attico { flex: none; font: 700 10px/1 var(--font); color: #fff; background: #8e8e93; border-radius: 6px; padding: 7px 5px; min-width: 38px; text-align: center; }
.attico.ext-pdf { background: #e5383b; }
.attico.ext-doc, .attico.ext-docx, .attico.ext-odt { background: #2f6fde; }
.attico.ext-xls, .attico.ext-xlsx, .attico.ext-ods { background: #1f9d55; }
.attico.ext-jpg, .attico.ext-jpeg, .attico.ext-png { background: #8e5cd9; }

/* condivisione */
.qrbox { display: flex; justify-content: center; align-items: center; background: #fff; border-radius: 12px; padding: 14px; margin: 8px 0; min-height: 120px; }
.qrbox img { width: 200px; height: 200px; image-rendering: pixelated; }
.sharelink { word-break: break-all; background: var(--card); border-radius: 12px; padding: 12px 14px; margin-bottom: 6px; }
.sharelink .linkbtn { display: inline; margin-left: 8px; }

/* informativa */
.privacy-doc h2 { font-size: 22px; margin-bottom: 2px; }
.privacy-doc h3 { font-size: 16px; margin: 18px 0 4px; }
.privacy-doc p, .privacy-doc li { font-size: 15px; line-height: 1.55; margin: 4px 0; }
.privacy-doc ul { padding-left: 20px; margin: 4px 0; }
.privacy-gate { max-width: 660px; padding-top: 6vh; }
.privacy-gate .storelogo { max-height: 56px; }
.privacy-box { background: var(--card-2); border-radius: 14px; padding: 16px 18px; max-height: 50vh; overflow: auto; margin: 16px 0 6px; }
@media (max-width: 699px) { .privacy-box { background: var(--card); } }

/* ------------------------------------------------------------ stampa */
#print-root { display: none; }
@media print {
  @page { size: A4 portrait; margin: 14mm; }
  body.printing #app, body.printing nav, body.printing #toast, body.printing .overlay { display: none !important; }
  body.printing #print-root { display: block; }
  body { background: #fff !important; color: #000 !important; font-family: var(--font); }
  .page { page-break-after: always; break-after: page; font-size: 12.5pt; }
  .page:last-child { page-break-after: auto; break-after: auto; }
  .p-head { display: flex; justify-content: space-between; align-items: center; font-size: 10.5pt; border-bottom: 1.5pt solid #000; padding-bottom: 4mm; margin-bottom: 6mm; }
  .page h1 { font-size: 24pt; margin-bottom: 4mm; letter-spacing: -.02em; }
  .p-logo { height: 12mm; width: auto; }
  .p-draft { border: 1.5pt solid #000; display: inline-block; padding: 1mm 3mm; font-weight: 700; margin-bottom: 4mm; }
  .page table { width: 100%; border-collapse: collapse; }
  .page th, .page td { border: .75pt solid #555; padding: 2.6mm 3mm; text-align: left; vertical-align: top; }
  .page thead th { background: #f0f0f0; }
  .page tfoot td { font-weight: 700; }
  .page td.h, .page th.h { width: 16mm; text-align: center; }
  .page td.d { width: 38mm; }
  .page td.n, .page th.n { width: 30mm; }
  .p-foot { margin-top: 6mm; font-size: 9pt; color: #444; }
  .brandlogo, .sidebar { display: none; }
  .privacy-print { font-size: 11pt; } .privacy-print h2 { font-size: 16pt; } .privacy-print h3 { font-size: 12pt; margin: 4mm 0 1mm; }
}

/* orari leggibili: riga delle mezz'ore, etichette nelle barre, suggerimento durante il trascinamento */
table.grid thead th.hh { font-weight: 600; color: var(--text); border-left: 1px solid var(--line-strong); border-bottom: 0; height: 24px; padding-left: 4px; }
table.grid thead tr.mins th { height: 16px; font-size: 9px; font-weight: 500; color: var(--faint); text-align: left; padding-left: 3px;
  border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
table.grid thead tr.mins th.half { border-left: 1px dashed var(--line); }
table.grid thead th.closed { color: var(--faint); }
.seglabel { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); z-index: 1; pointer-events: none;
  font: 600 10.5px/1 var(--font); color: #fff; white-space: nowrap; letter-spacing: 0; text-shadow: 0 0 2px rgba(0,0,0,.25); font-variant-numeric: tabular-nums; }
.seglabel.dark { color: #1d1d1f; text-shadow: none; }
td.corso .seglabel, td.lock .seglabel { color: #3a3a3c; text-shadow: 0 0 2px rgba(255,255,255,.8); }
#dragtip { position: fixed; z-index: 70; transform: translate(14px, -130%); background: rgba(30,30,32,.92); color: #fff; padding: 6px 11px; border-radius: 99px;
  font: 600 13px/1.2 var(--font); pointer-events: none; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.25); font-variant-numeric: tabular-nums; }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font: 600 17px/1.3 var(--font-display); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(-45deg); transition: transform .2s; }
details.fold[open] > summary::after { transform: rotate(45deg); }
details.fold[open] > summary { margin-bottom: 6px; }
.importgrid { display: grid; gap: 8px; margin-top: 6px; }
.importrow { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 10px; padding: 8px 12px; }
.importrow .lab { flex: 1; min-width: 0; }
.importrow .lab small { display: block; color: var(--muted); font-size: 12px; }
.importrow select { width: auto; max-width: 52%; min-height: 36px; font-size: 14px; }
.importrow.miss { box-shadow: inset 3px 0 0 var(--warn); }

.duties { flex-direction: column; align-items: stretch; gap: 6px; }
.dutyrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dutyrow .lbl { width: 58px; flex: none; }

/* crediti e licenza */
.credit { display: block; margin: 22px auto 6px; border: 0; background: none; color: var(--faint); font-size: 12px; cursor: pointer; text-align: center; }
.credit:hover { color: var(--muted); text-decoration: underline; }
.side-foot .credit { margin: 10px 0 0; text-align: left; padding: 0; }
.about { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; }
.about .appicon { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
pre.legal { white-space: pre-wrap; font: 13px/1.5 var(--font); background: var(--card); border-radius: 12px; padding: 14px 16px; max-height: 50vh; overflow: auto; margin-top: 12px; }

/* ore e rotazioni */
.gridwrap.flush { padding: 0; margin: 0 -4px; }
table.sumtable th, table.sumtable td { white-space: nowrap; text-align: center; }
table.sumtable th:first-child, table.sumtable td.who, table.sumtable tfoot td:first-child { text-align: left; position: sticky; left: 0; background: var(--card); z-index: 1; }
table.sumtable td.who { font-weight: 600; }
table.sumtable td.hot { color: var(--warn); font-weight: 700; background: color-mix(in srgb, var(--warn) 10%, transparent); border-radius: 6px; }
table.sumtable tr.idle td { color: var(--faint); }
table.sumtable tfoot td { border-top: 1px solid var(--line-strong); color: var(--muted); font-weight: 600; }
table.sumtable .pill { cursor: pointer; border: 0; }
.row.wrap { flex-wrap: wrap; }
@media (min-width: 900px) { .main #content.wide-content { max-width: 1260px; } }

.importrow .pick { display: flex; flex-direction: column; gap: 6px; flex: 0 0 46%; min-width: 0; }
.importrow .pick input { font-size: 14px; }
td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.importrow .pick select { max-width: 100%; width: 100%; }

/* richieste del giorno accanto alla griglia */
.gtop { display: flex; align-items: flex-start; }
.dayreq { flex: 0 0 250px; margin: 8px 12px 8px 16px; font-size: 13px; }
.dayreq.empty { color: var(--faint); padding: 8px 2px; }
.dayreq summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 6px 2px; list-style: none; }
.dayreq summary::-webkit-details-marker { display: none; }
.dayreq summary::before { content: "›"; display: inline-block; transition: transform .15s; color: var(--muted); }
.dayreq[open] summary::before { transform: rotate(90deg); }
.dayreq ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.dayreq .linkrow { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: center; text-align: left;
  border: 0; background: var(--fill); border-radius: 8px; padding: 6px 8px; cursor: pointer; color: var(--text); font: inherit; }
.dayreq .linkrow:hover { background: var(--card-2); }
.dayreq .linkrow .sub { grid-column: 1; color: var(--muted); font-size: 12px; }
.dayreq .linkrow .pill { grid-column: 2; grid-row: 1 / span 2; }
.gridwrap.req-below .gtop { flex-direction: column; }
.gridwrap.req-below .dayreq { flex: none; width: auto; max-width: 520px; margin: 4px 14px 8px; position: sticky; left: 14px; }
.gridwrap.req-below .dayreq.empty { display: none; }
@media print { .dayreq { display: none !important; } }

/* prestazioni: il browser impagina e disegna solo i giorni sullo schermo (gli altri quando ci arrivi) */
.gcard { content-visibility: auto; contain-intrinsic-size: auto 0px auto var(--gh, 700px); }
@media print { .gcard { content-visibility: visible; } }

.verrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border-bottom: 1px solid var(--line); }
.verrow .title { font-weight: 600; font-size: 14px; }
.btn[disabled] { opacity: .45; cursor: default; }

.weeknav .title .weekno { font-weight: 600; color: var(--brand); }
.swapdays { margin: 8px 0 2px; display: grid; gap: 6px; }
.swapday { background: var(--fill); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.swapday .d { font-weight: 600; margin-bottom: 2px; }
.swapday .who { color: var(--muted); }
.weeknav .title .sub .linkbtn { display: inline; padding: 0; margin: 0; vertical-align: baseline; }

/* dashboard */
.dash .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 4px 0 16px; }
.kpis.small { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.kpi { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.kpis.small .kpi { box-shadow: none; background: var(--fill); padding: 10px 12px; }
.kpi .v { font: 700 28px/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpis.small .kpi .v { font-size: 22px; }
.kpi .l { font-size: 13px; color: var(--muted); margin-top: 2px; }
.kpi .s { font-size: 12px; color: var(--faint); margin-top: 6px; }
.kpi.warn .v { color: var(--warn); }
.kpi.ok .v { color: var(--ok, #1f7a4d); }
.dashgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.dashgrid .card { margin: 0; }
.vbars { display: flex; align-items: flex-end; gap: 8px; height: 200px; padding-top: 8px; }
.vbars .vb { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.vbars .val { font-size: 11px; color: var(--muted); height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vbars .track { flex: 1; width: 100%; max-width: 46px; display: flex; align-items: flex-end; }
.vbars .fill { width: 100%; background: var(--brand); border-radius: 6px 6px 2px 2px; min-height: 2px; }
.vbars .lab { font-size: 11px; color: var(--muted); margin-top: 6px; white-space: nowrap; }
.hbars { display: grid; gap: 10px; margin-top: 6px; }
.hb { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.hb .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb .track { background: var(--fill); border-radius: 6px; height: 14px; overflow: hidden; }
.hb .fill { height: 100%; border-radius: 6px; }
.hb .val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb .val span { color: var(--faint); }
@media (max-width: 600px) { .dashgrid { grid-template-columns: 1fr; } .vbars { gap: 4px; } .vbars .lab { font-size: 9.5px; } }
/* telefono: le tabelle larghe scorrono di lato dentro il loro riquadro, la pagina resta larga quanto lo schermo */
@media (max-width: 700px) {
  table.simple { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  table.simple th, table.simple td { white-space: nowrap; }
  table.simple td:last-child { white-space: normal; min-width: 180px; }
}
.dashgrid > * { min-width: 0; }
.dash .card.summary { margin: 0; max-width: none; }