/* monitor UI - application stylesheet (T10d; UI.md 6.2, 6.4).
   System fonts only. Colours are variables on :root, with a dark set under prefers-color-scheme.
   Shared classes for every page (the admin pages too): page, page-header, card, toolbar, btn (primary, danger),
   input, select, field (label + input + help + error), table.data (th[aria-sort] with button.sort), badge
   (ok, warn, bad, info, muted), empty, muted, num, stack, row, json-editor. */

:root {
  color-scheme: light dark;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eceff3;
  --border: #dde1e6;
  --border-strong: #b9c0c9;
  --text: #1a1d21;
  --text-2: #3f4751;
  --muted: #5d6671;
  --accent: #1f5fbf;
  --accent-hover: #184c99;
  --accent-soft: #e7effb;
  --on-accent: #ffffff;
  --focus: #1f5fbf;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.06);
  --shadow-pop: 0 8px 28px rgba(16, 24, 40, 0.18);

  --ok-bg: #e5f3e9;   --ok-fg: #17603a;
  --warn-bg: #fff2dc; --warn-fg: #8a4b00;
  --bad-bg: #fde9e7;  --bad-fg: #b42318;
  --info-bg: #e7effb; --info-fg: #1d4f99;
  --muted-bg: #eceff3; --muted-fg: #46505b;

  /* segment colours, fixed everywhere (UI.md 6.2) */
  --seg-accepted: #1d6b3c;  /* accettato: dark green */
  --seg-pending: #6cc080;   /* consegnato in attesa di accettazione: light green */
  --seg-progress: #2f6fd0;  /* in lavorazione: blue */
  --seg-missing: #b4bac3;   /* mancante: grey */
  --hatch-a: #7b848f;       /* sconosciuto: hatched */
  --hatch-b: #e4e7eb;

  --line-accepted: #1d6b3c;
  --line-delivered: #4ea866;
  --line-progress: #2f6fd0;
  --line-total: #7b848f;
  --grid: #e5e8ec;

  --radius: 8px;
  --radius-sm: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111316;
    --surface: #1b1e23;
    --surface-2: #21252b;
    --surface-3: #2a2f36;
    --border: #343a42;
    --border-strong: #4c545e;
    --text: #e7e9ec;
    --text-2: #c4c9d0;
    --muted: #9ba3ae;
    --accent: #79aaf2;
    --accent-hover: #9cc0f6;
    --accent-soft: #1e2b3f;
    --on-accent: #0c1424;
    --focus: #8fb8f5;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.55);

    --ok-bg: #173523;   --ok-fg: #8fd8a5;
    --warn-bg: #3a2a10; --warn-fg: #f3c26b;
    --bad-bg: #3d1b18;  --bad-fg: #f59c92;
    --info-bg: #1e2b3f; --info-fg: #a4c4f5;
    --muted-bg: #2a2f36; --muted-fg: #c4c9d0;

    --seg-accepted: #2a8a4e;
    --seg-pending: #8fcf9c;
    --seg-progress: #4f8de0;
    --seg-missing: #5a616c;
    --hatch-a: #8a929c;
    --hatch-b: #2a2f36;

    --line-accepted: #2a8a4e;
    --line-delivered: #8fcf9c;
    --line-progress: #4f8de0;
    --line-total: #8a929c;
    --grid: #2c3138;
  }
}

/* ------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
}
h1, h2, h3 { line-height: 1.25; margin: 0; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 16px; font-weight: 650; }
h3 { font-size: 14px; font-weight: 650; }
p { margin: 0 0 8px; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
main:focus, [tabindex="-1"]:focus { outline: none; }
abbr[title] { text-decoration: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 300;
  background: var(--surface); color: var(--accent); padding: 8px 12px; border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
}
.skip-link:focus { left: 8px; }
.boot-message { padding: 24px; color: var(--muted); }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.strong { font-weight: 700; }
.nowrap { white-space: nowrap; }
.pre-line { white-space: pre-line; }
.code { font-family: var(--mono); font-size: 0.92em; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num-inline { font-variant-numeric: tabular-nums; }
.unknown { color: var(--muted); font-style: italic; font-size: 12.5px; }
.empty { color: var(--muted); padding: 14px 0; margin: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hint {
  font-size: 12.5px; color: var(--text-2); border-left: 3px solid var(--border-strong);
  padding: 4px 10px; margin: 0 0 12px;
}

/* ------------------------------------------------------------ shell */

.mock-banner {
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center;
  background: var(--warn-bg); color: var(--warn-fg); padding: 6px 24px; font-size: 12.5px;
}
.mock-roles a { margin-left: 6px; color: inherit; }
.mock-roles a[aria-current] { font-weight: 700; text-decoration: none; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  min-height: 56px; padding: 0 24px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand-mark {
  width: 24px; height: 14px; border-radius: 3px; flex: none; forced-color-adjust: none;
  background: linear-gradient(90deg, var(--seg-accepted) 0 44%, transparent 44% 50%, var(--seg-pending) 50% 72%,
    transparent 72% 78%, var(--seg-progress) 78% 100%);
}
.brand-text { display: grid; line-height: 1.15; }
.brand-text strong { font-size: 14.5px; }
.brand-sub { font-size: 11.5px; color: var(--muted); }

.nav { flex: 1; min-width: 0; }
/* wraps rather than running under the user menu: between the hamburger's 860px and about 1450px the admin's menu does not fit */
.nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 4px 0; }
.nav-list > li > a, .navgroup > summary {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius-sm);
  color: var(--text-2); text-decoration: none; font-weight: 600; cursor: pointer; user-select: none;
}
.nav-list > li > a:hover, .navgroup > summary:hover { background: var(--surface-3); color: var(--text); }
.nav a[aria-current="page"], .navgroup.current > summary { color: var(--accent); background: var(--accent-soft); }
.navgroup { position: relative; }
.navgroup > summary { list-style: none; }
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary::after { content: "\25BE"; font-size: 11px; color: var(--muted); }
.dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 210px;
  list-style: none; margin: 0; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop);
}
.dropdown-right { left: auto; right: 0; }
.dropdown a, .dropdown .linklike {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-weight: 500;
}
.dropdown a:hover, .dropdown .linklike:hover { background: var(--surface-3); text-decoration: none; }
.dropdown a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
.user-menu { margin-left: auto; }
.user-menu > summary { font-weight: 500; }
.user-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-toggle { margin-left: auto; }

.mobile-nav {
  background: var(--surface); border-bottom: 1px solid var(--border); padding: 4px 16px 14px;
  box-shadow: var(--shadow);
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav a, .mobile-nav .linklike {
  display: block; width: 100%; text-align: left; padding: 10px 8px; border-radius: var(--radius-sm);
  color: var(--text); font-weight: 600; text-decoration: none;
}
.mobile-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
.mobile-group h2 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
  margin: 12px 0 2px; padding: 0 8px; display: flex; gap: 8px; align-items: center;
}

main { display: block; }
.page { max-width: 1360px; margin: 0 auto; padding: 20px 24px 56px; min-width: 0; }
.page-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px;
  margin-bottom: 16px;
}
.page-header > div { min-width: 0; }
.page-header p { margin: 4px 0 0; }
.crumbs { margin: 0 0 8px; font-size: 13px; }
.section-title { font-size: 16px; margin: 0 0 12px; }
.h1-code { font-size: 15px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.asof-line { margin: -6px 0 12px; font-size: 13px; }

/* ------------------------------------------------------------ cards, toolbars, forms */

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 16px; min-width: 0;
}
.card > h2 { margin-bottom: 8px; }
.card-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px;
}
.card.inset { background: var(--surface-2); margin: 12px 0 16px; }
.card h3 { margin: 12px 0 8px; }
.card-header h3, .card.inset > h3:first-child { margin: 0; }

.toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 16px;
}
.card .toolbar { background: var(--surface-2); }
.toolbar .grow { flex: 1 1 200px; }
.toolbar .grow .input { width: 100%; }

.field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.field > label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field .help { font-size: 12px; color: var(--muted); margin: 0; }
.field .error, .error { font-size: 12.5px; color: var(--bad-fg); margin: 0; font-weight: 600; }
.field.invalid .input, .field.invalid .select { border-color: var(--bad-fg); }
.field-inline > label { font-size: 12px; }
.field-wide { grid-column: 1 / -1; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }

.input, .select {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  min-height: 34px; padding: 5px 10px; max-width: 100%;
}
textarea.input { min-height: 60px; resize: vertical; line-height: 1.4; }
.select { padding-right: 28px; }
.input:focus-visible, .select:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.input::placeholder { color: var(--muted); opacity: 0.8; }
.input[readonly] { background: var(--surface-2); }
.json-editor {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5; width: 100%; min-height: 260px;
  resize: vertical; white-space: pre; tab-size: 2;
}
.check { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; font-weight: 500; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn:hover { background: var(--surface-3); color: var(--text); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { color: var(--bad-fg); border-color: var(--bad-fg); background: var(--surface); }
.btn.danger:hover { background: var(--bad-bg); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn.small-btn { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.linklike {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px;
}
.linklike:hover { text-decoration-color: currentColor; }
.linklike.strong { font-weight: 700; }

.segmented {
  display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 2px; margin: 0; background: var(--surface); min-width: 0; flex-wrap: wrap;
}
.segmented label {
  position: relative; display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 4px;
  font-weight: 600; color: var(--text-2); cursor: pointer;
}
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.segmented label.active { background: var(--accent); color: var(--on-accent); }
.segmented label:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }

.alert {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; margin-bottom: 16px;
}
.alert.bad { background: var(--bad-bg); color: var(--bad-fg); border-color: color-mix(in srgb, var(--bad-fg) 30%, transparent); }
.alert.warn { background: var(--warn-bg); color: var(--warn-fg); }
.alert.info { background: var(--info-bg); color: var(--info-fg); }
.loading { padding: 16px 0; }

/* ------------------------------------------------------------ badges */

.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; vertical-align: middle;
  background: var(--muted-bg); color: var(--muted-fg);
}
.badge.ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge.warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge.bad { background: var(--bad-bg); color: var(--bad-fg); }
.badge.info { background: var(--info-bg); color: var(--info-fg); }
.badge.muted { background: var(--muted-bg); color: var(--muted-fg); }
.badge.cft-X { background: var(--ok-bg); color: var(--ok-fg); }
.badge.cft-C, .badge.cft-D { background: var(--info-bg); color: var(--info-fg); }
.badge.cft-H { background: var(--warn-bg); color: var(--warn-fg); }
.badge.cft-A, .badge.cft-K { background: var(--bad-bg); color: var(--bad-fg); }

/* ------------------------------------------------------------ tables */

/* position: relative keeps the absolutely positioned .sr-only labels inside the scroll box; without it they
   escape it and widen the whole page on a phone. */
.table-wrap { position: relative; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.data th, table.data td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.data thead th {
  background: var(--surface-2); color: var(--text-2); font-size: 12.5px; font-weight: 650;
  vertical-align: bottom; white-space: nowrap; border-bottom-color: var(--border-strong);
}
table.data thead th.num, table.data td.num, table.data th.num { text-align: right; }
table.data tbody th { font-weight: 600; }
table.data tbody tr:hover > * { background: var(--surface-2); }
table.data tfoot th, table.data tfoot td { font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--border-strong); border-bottom: 0; }
table.data caption { text-align: left; }
/* the sort control inside a sortable header: button.sort or button.btn, both drawn as header text */
th[aria-sort] .sort, th[aria-sort] .btn {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-weight: inherit; color: inherit;
}
th[aria-sort] .sort:focus-visible, th[aria-sort] .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
th[aria-sort] .sort::after, th[aria-sort] .btn::after { content: "\2195"; font-size: 11px; color: var(--muted); opacity: 0.7; }
th[aria-sort="ascending"] .sort::after, th[aria-sort="ascending"] .btn::after { content: "\25B2"; color: var(--accent); opacity: 1; font-size: 9px; }
th[aria-sort="descending"] .sort::after, th[aria-sort="descending"] .btn::after { content: "\25BC"; color: var(--accent); opacity: 1; font-size: 9px; }
th[aria-sort].num .sort, th[aria-sort].num .btn { flex-direction: row-reverse; }
input.num { font-variant-numeric: tabular-nums; text-align: right; }

.progress-table .cell-cantiere { min-width: 210px; }
.progress-table .cell-cantiere a { font-weight: 650; text-decoration: none; }
.progress-table .cell-cantiere a:hover { text-decoration: underline; }
.progress-table .cell-bar { min-width: 140px; width: 170px; }
.progress-table .cell-deadline { min-width: 120px; }
.progress-table .cell-quality { min-width: 92px; }
.progress-table .cell-asof { white-space: nowrap; }
.progress-table tr.inactive > * { color: var(--text-2); }
.progress-table tbody th, .progress-table tfoot th { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.progress-table tfoot th { background: var(--surface-2); }

.deadline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.deadline-date { font-variant-numeric: tabular-nums; }
.deadline-days { font-size: 12.5px; }
.deadline-note { flex-basis: 100%; font-size: 12px; }
.cell-deadline .deadline { display: grid; gap: 2px; }

.notes-disclosure { margin-top: 4px; }
.notes-disclosure summary { cursor: pointer; font-size: 12px; color: var(--accent); width: max-content; }
ul.notes { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); max-width: 340px; }
.card ul.notes, .unit-card ul.notes { max-width: none; }
ul.notes li + li { margin-top: 2px; }

/* ------------------------------------------------------------ bars and legends */

.segbar {
  display: flex; gap: 2px; width: 100%; min-width: 80px; height: 12px;
  border-radius: 4px; overflow: hidden; forced-color-adjust: none;
}
.segbar-sm { height: 10px; }
.segbar-lg { height: 18px; }
.seg { display: block; min-width: 0; height: 100%; }
.seg-accepted { background: var(--seg-accepted); }
.seg-deliveredPending { background: var(--seg-pending); }
.seg-inProgress { background: var(--seg-progress); }
.seg-missing { background: var(--seg-missing); }
.seg-unknown { background: repeating-linear-gradient(135deg, var(--hatch-a) 0 2px, var(--hatch-b) 2px 5px); }

.swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px;
  vertical-align: -1px; flex: none; forced-color-adjust: none;
}
.legend {
  display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0;
  font-size: 12.5px; color: var(--text-2);
}
.legend li { display: inline-flex; align-items: center; }
.unit-cards + .legend { margin: -4px 0 16px; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.tile-label { display: flex; align-items: center; font-size: 13px; font-weight: 650; color: var(--text-2); }
.tile-label .swatch + .swatch { margin-left: -4px; }
.tile-value { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 4px 0 2px; overflow-wrap: anywhere; }
.tile-value.unknown { font-size: 18px; font-style: italic; font-weight: 600; color: var(--muted); }
.tile-sub { font-size: 12.5px; color: var(--text-2); }
.tile-foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12px; }

.linebars { display: grid; }
.linebar { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--border); }
.linebar:first-child { border-top: 0; padding-top: 4px; }
.linebar.strong { border-top: 2px solid var(--border-strong); }
.linebar-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.linebar-label { font-weight: 650; }
.linebar.strong .linebar-label { font-size: 15px; }
.linebar-nums { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.linebar-nums div { display: flex; gap: 6px; align-items: baseline; }
.linebar-nums dt { font-size: 12px; color: var(--muted); }
.linebar-nums dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ cantiere page */

.facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 10px 0 0; }
.facts > div { display: grid; gap: 1px; min-width: 0; }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; }
.facts-stacked { display: grid; gap: 10px; }

.unit-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 12px; }
.unit-card { margin-bottom: 0; display: flex; flex-direction: column; gap: 10px; }
.unit-card .card-header { margin-bottom: 0; }
.unit-card h3 { margin: 0; font-size: 15px; }
.figure-numbers { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.figure-numbers th { text-align: left; font-weight: 500; padding: 3px 0; display: flex; align-items: center; }
.figure-numbers td { padding: 3px 0 3px 10px; }
.figure-numbers tr.sub th { padding-left: 16px; font-size: 12.5px; color: var(--text-2); }
.figure-numbers tr.sub td { font-size: 12.5px; color: var(--text-2); }
.figure-numbers tr.strong th, .figure-numbers tr.strong td { font-weight: 700; border-top: 1px solid var(--border); padding-top: 6px; }
.sources { font-size: 12.5px; }
.sources ul { margin: 2px 0 0; padding-left: 18px; color: var(--text-2); }
.unit-card p { margin: 0; }

.funnel .cell-minibar { width: 140px; }
.minibar { display: block; width: 120px; height: 8px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 5px; forced-color-adjust: none; }
.minibar > span { display: block; height: 100%; background: var(--seg-progress); }
.minibar-unknown { background: repeating-linear-gradient(135deg, var(--hatch-a) 0 2px, var(--hatch-b) 2px 5px); }
.source-states { margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px;
}
.table-toggle > summary { cursor: pointer; color: var(--accent); font-weight: 600; margin: 12px 0 8px; width: max-content; }
.retired-row > * { color: var(--text-2); }

.linechart { position: relative; margin-top: 8px; }
.legend-lines { margin-bottom: 6px; }
.linechart svg { display: block; max-width: 100%; overflow: visible; touch-action: pan-y; }
.linechart svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.linechart .grid line { stroke: var(--grid); stroke-width: 1; }
.linechart .grid text { fill: var(--muted); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.linechart path.series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.linechart .total-line { stroke: var(--line-total); stroke-width: 1; stroke-dasharray: 5 4; }
.linechart .crosshair { stroke: var(--border-strong); stroke-width: 1; }
.linechart circle.marker { stroke: var(--surface); stroke-width: 2; }
.linechart .l-accepted { stroke: var(--line-accepted); }
.linechart .l-delivered { stroke: var(--line-delivered); }
.linechart .l-progress { stroke: var(--line-progress); }
.linechart circle.l-accepted { fill: var(--line-accepted); stroke: var(--surface); }
.linechart circle.l-delivered { fill: var(--line-delivered); stroke: var(--surface); }
.linechart circle.l-progress { fill: var(--line-progress); stroke: var(--surface); }
.line-key { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--muted); margin-right: 6px; vertical-align: middle; flex: none; forced-color-adjust: none; }
.line-key.l-accepted { border-top-color: var(--line-accepted); }
.line-key.l-delivered { border-top-color: var(--line-delivered); }
.line-key.l-progress { border-top-color: var(--line-progress); }
.line-key.line-total { border-top: 1px dashed var(--line-total); }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5; min-width: 200px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop); padding: 8px 10px; font-size: 12.5px;
}
.chart-tip-day { font-weight: 700; margin-bottom: 4px; }
.chart-tip-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0 4px; align-items: center; }
.chart-tip-row .num { padding-left: 12px; font-weight: 650; }

/* ------------------------------------------------------------ T11b: euros per contract, contract-type groups, Contabilità */

.header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.euro-jump { font-size: 13px; font-weight: 600; }
table.data tr.group-row > th {
  position: static; background: var(--surface-3); color: var(--text); font-size: 13.5px; font-weight: 700;
  border-top: 2px solid var(--border-strong); padding-top: 7px; padding-bottom: 7px;
}
table.data tbody tr.group-row:hover > * { background: var(--surface-3); }
table.data tr.subtotal-row > th, table.data tr.subtotal-row > td { font-weight: 650; background: var(--surface-2); }
.progress-table tbody tr.subtotal-row > th { background: var(--surface-2); }
.bycontract-table tbody th { min-width: 200px; }
.bycontract-table tbody th a { font-weight: 650; text-decoration: none; }
.bycontract-table tbody th a:hover { text-decoration: underline; }

.acct-card .card-header h2 { margin: 0; }
.acct-facts { margin: 0 0 6px; }
.acct-facts dd { font-variant-numeric: tabular-nums; }
.acct-monitor { margin: 4px 0 0; }
.acct-warnings { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.acct-warnings .badge { white-space: normal; }
.acct-body { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.acct-section { display: grid; gap: 8px; min-width: 0; }
.acct-section + .acct-section { border-top: 1px dashed var(--border); padding-top: 12px; }
.acct-section h3 { margin: 0; }
.acct-section p { margin: 0; }
.acct-table td { vertical-align: middle; }
.acct-table .input { min-width: 0; width: 100%; }
.acct-input { min-width: 9.5rem; }
.acct-input-sm { min-width: 5.5rem; max-width: 8rem; }
.sal-check { font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: var(--radius-sm); margin: 0; }
.sal-check-ok { background: var(--ok-bg); color: var(--ok-fg); }
.sal-check-warn { background: var(--warn-bg); color: var(--warn-fg); }
.sal-check-muted { background: var(--muted-bg); color: var(--muted-fg); }

/* ------------------------------------------------------------ status page */

.vm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 14px; }
.vm { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; min-width: 0; background: var(--surface); }
.vm-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.vm-header h3 { margin: 0; }
.matrix th .state-name { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.matrix td, .matrix th { padding: 6px 8px; }
.transfers .pkg { word-break: break-all; }
.cell-error { color: var(--bad-fg); max-width: 360px; overflow-wrap: anywhere; }
.pager { margin-top: 12px; justify-content: flex-end; }
.pager .field-inline { display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------ login, profile */

.page-login { display: grid; justify-items: center; padding-top: 8vh; }
.login-card { width: min(400px, 100%); padding: 24px; }
.login-card .btn { width: 100%; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.profile-grid .card { margin-bottom: 0; }

/* ------------------------------------------------------------ toasts, modal */

.toasts {
  position: fixed; right: 16px; bottom: 16px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px; max-width: min(440px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--ok-fg);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
}
.toast.error { border-left-color: var(--bad-fg); }
.toast > span { flex: 1; }
.toast-close { background: none; border: 0; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 2px; }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 150; background: rgba(10, 14, 20, 0.5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  width: min(540px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--surface); color: var(--text); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 20px;
}
.modal-title { font-size: 17px; margin-bottom: 12px; }
.modal-actions { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ------------------------------------------------------------ narrow screens */

@media (max-width: 1100px) {
  .unit-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .topbar { gap: 12px; }
}
@media (max-width: 600px) {
  body { font-size: 14px; }
  .page { padding: 14px 16px 48px; }
  .topbar { padding: 0 16px; min-height: 52px; }
  .mock-banner { padding: 6px 16px; }
  .brand-sub { display: none; }
  h1 { font-size: 20px; }
  .card { padding: 14px 14px; }
  .toolbar { padding: 10px 12px; }
  .toolbar .field-inline, .toolbar .field-inline .select { width: 100%; }
  .tile { padding: 12px; }
  .tile-value { font-size: 21px; }
  .page-header .segmented { width: 100%; }
  .header-actions { width: 100%; align-items: stretch; }
  .euro-jump { align-self: flex-start; }
  .page-header .segmented label { flex: 1; justify-content: center; padding: 6px 6px; }
  .pager { justify-content: flex-start; }
  .linebar-nums { gap: 2px 14px; }
  .progress-table .cell-cantiere { min-width: 150px; max-width: 170px; }
  .toasts { left: 16px; right: 16px; max-width: none; }
}

@media (forced-colors: active) {
  .seg, .swatch, .minibar > span { forced-color-adjust: none; }
  .segbar { border: 1px solid CanvasText; }
  .badge { border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------ T13d: Risorse (RESOURCES.md 7) */

/* Host states: ok green, attention amber, critical red, unknown hatched grey (as "sconosciuto"); always with the
   word next to them. Chart series: four categorical slots (blue, aqua, violet, magenta), an order checked for
   colour-vision separation on both surfaces; thresholds are dashed in the attention and critical colours. */
:root {
  --res-ok: #2e8b4e;
  --res-attention: #d18a00;
  --res-critical: #c9302c;
  --res-s1: #2a78d6;
  --res-s2: #1baf7a;
  --res-s3: #6250d6;
  --res-s4: #e87ba4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --res-ok: #4cc27a;
    --res-attention: #f0b43c;
    --res-critical: #f0716a;
    --res-s1: #3987e5;
    --res-s2: #199e70;
    --res-s3: #9085e9;
    --res-s4: #d55181;
  }
}

.res-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; forced-color-adjust: none;
  background: repeating-linear-gradient(135deg, var(--hatch-a) 0 2px, var(--hatch-b) 2px 4px);
  box-shadow: inset 0 0 0 1px var(--hatch-a);
}
.res-ok > .res-dot, .res-dot.res-ok { background: var(--res-ok); box-shadow: none; }
.res-attention > .res-dot, .res-dot.res-attention { background: var(--res-attention); box-shadow: none; }
.res-critical > .res-dot, .res-dot.res-critical { background: var(--res-critical); box-shadow: none; }
.res-state {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 9px 0 7px; border-radius: 999px;
  font-size: 12px; font-weight: 650; line-height: 22px; white-space: nowrap; vertical-align: middle;
  background: var(--muted-bg); color: var(--muted-fg);
}
.res-state.res-ok { background: var(--ok-bg); color: var(--ok-fg); }
.res-state.res-attention { background: var(--warn-bg); color: var(--warn-fg); }
.res-state.res-critical { background: var(--bad-bg); color: var(--bad-fg); }
h1 .res-state { font-size: 12.5px; margin-left: 6px; vertical-align: 3px; }

.prom-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; margin-bottom: 12px;
}
.prom-name { font-weight: 650; }
.prom-line .cell-error { max-width: none; font-size: 12.5px; }
.prom-alert { flex-basis: 100%; margin: 4px 0 0; }

button.tile { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.res-tile:hover { border-color: var(--border-strong); background: var(--surface-2); }
.res-tile[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.res-tile .tile-label { gap: 7px; }
.res-tile .tile-value { font-variant-numeric: normal; }

.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 12px; }
.res-host {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 12px 14px 10px 18px;
}
.res-host::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: var(--radius) 0 0 var(--radius);
  background: repeating-linear-gradient(135deg, var(--hatch-a) 0 2px, var(--hatch-b) 2px 5px); forced-color-adjust: none;
}
.res-host.res-ok::before { background: var(--res-ok); }
.res-host.res-attention::before { background: var(--res-attention); }
.res-host.res-critical::before { background: var(--res-critical); }
.res-host-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.res-host-head h3 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.res-host-head h3 a { text-decoration: none; }
.res-host-head h3 a:hover { text-decoration: underline; }
.res-host-sub { margin: -2px 0 0; overflow-wrap: anywhere; }
.res-reasons { list-style: none; margin: 2px 0; padding: 0; display: grid; gap: 5px; font-size: 12.5px; color: var(--text); }
.res-reasons li { display: flex; align-items: baseline; gap: 6px; }
.res-reasons .badge { flex: none; line-height: 18px; font-size: 11.5px; }
.res-reasons-lg { font-size: 13.5px; gap: 8px; }
.res-reasons-lg .badge { line-height: 20px; font-size: 12px; }
.res-metrics { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 4px 0 0; font-size: 13px; }
.res-metrics > div { display: contents; }
.res-metrics dt { color: var(--muted); font-size: 12.5px; }
.res-metrics dd { margin: 0; min-width: 0; }
.res-val { font-weight: 650; font-variant-numeric: tabular-nums; }
.res-sub { display: inline; margin-left: 6px; font-size: 12px; color: var(--muted); }
.res-val.lvl-attention { color: var(--warn-fg); }
.res-val.lvl-critical { color: var(--bad-fg); }
.res-val.lvl-attention::before, .res-val.lvl-critical::before { content: "\25B2\00a0"; font-size: 0.8em; }
.res-novalues { margin: 2px 0 0; }
.res-host-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: auto;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.res-host-foot a { font-weight: 600; text-decoration: none; }
.res-host-foot a:hover { text-decoration: underline; }
/* Proxmox nodes (T13e) */
.res-pve .prom-line { margin-top: 4px; }
.res-pve-sub { margin: 18px 0 4px; font-size: 15px; }
.res-storages { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.res-storages .res-sub { margin-left: 2px; }
.res-host details.table-toggle { font-size: 12.5px; }
.res-vms th[scope="row"] { font-weight: 500; white-space: nowrap; }
.res-vms td { white-space: nowrap; }
.res-vms th, .res-vms td { padding-left: 6px; padding-right: 6px; }
.res-vmid { margin-left: 5px; }
.res-pve-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; margin-top: 10px; }
.res-caption { caption-side: top; text-align: left; font-weight: 650; font-size: 13.5px; padding: 0 0 6px; }

.res-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; }
.res-stato-link { font-weight: 600; }
.res-section { margin-bottom: 16px; transition: opacity 0.15s; }
.res-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 4px; }
.res-section-head .section-title { margin: 0; }
.res-loading { opacity: 0.55; }
.res-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 14px; margin-top: 10px; }
.res-chart { margin-bottom: 0; padding: 14px 16px 10px; }
.res-chart-head h3 { margin: 0 0 4px; font-size: 14px; }
.res-chart-unit { font-weight: 500; }
.res-chart .legend-lines { margin-bottom: 2px; }
.res-chart-foot { margin: 6px 0 0; }
.res-chart .table-toggle > summary { margin: 6px 0 4px; font-size: 12.5px; }
.res-other > summary { margin-top: 14px; }

.tchart { position: relative; margin-top: 4px; }
.tchart svg { display: block; max-width: 100%; overflow: visible; touch-action: pan-y; }
.tchart svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.tchart .grid line { stroke: var(--grid); stroke-width: 1; }
.tchart .grid .day-line { stroke: var(--grid); }
.tchart .grid text { fill: var(--muted); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.tchart .grid text.day-text { fill: var(--text-2); font-weight: 600; }
.tchart path.series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tchart .th { stroke-width: 1.5; stroke-dasharray: 6 4; }
.tchart .th.th-attention { stroke: var(--res-attention); }
.tchart .th.th-critical { stroke: var(--res-critical); }
.tchart text.th-label {
  font-size: 11px; font-weight: 600; font-family: var(--font);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
}
.tchart text.th-label.th-attention { fill: var(--warn-fg); }
.tchart text.th-label.th-critical { fill: var(--bad-fg); }
.tchart .crosshair { stroke: var(--border-strong); stroke-width: 1; }
.tchart circle.marker { stroke: var(--surface); stroke-width: 2; }
.tchart .s1 { stroke: var(--res-s1); }
.tchart .s2 { stroke: var(--res-s2); }
.tchart .s3 { stroke: var(--res-s3); }
.tchart .s4 { stroke: var(--res-s4); }
.tchart circle.s1 { fill: var(--res-s1); stroke: var(--surface); }
.tchart circle.s2 { fill: var(--res-s2); stroke: var(--surface); }
.tchart circle.s3 { fill: var(--res-s3); stroke: var(--surface); }
.tchart circle.s4 { fill: var(--res-s4); stroke: var(--surface); }
.line-key.s1 { border-top-color: var(--res-s1); }
.line-key.s2 { border-top-color: var(--res-s2); }
.line-key.s3 { border-top-color: var(--res-s3); }
.line-key.s4 { border-top-color: var(--res-s4); }

/* `table.data td` (left) outranks `td.num`: the Risorse tables right-align their numbers explicitly */
table.data.res-table td.num, table.data.res-table th.num { text-align: right; }
table.data.res-top { width: auto; min-width: min(100%, 520px); }
.res-values tr.res-group-start > * { border-top: 1px solid var(--border-strong); }
.res-values tbody tr:first-child > * { border-top: 0; }
.res-values td .badge { margin-left: 6px; }
.res-top .cell-minibar { width: 140px; }
.res-upload-facts { margin: 4px 0 10px; }
.res-upload-facts dd { font-variant-numeric: tabular-nums; }
.res-waiting { margin-bottom: 8px; }

/* The main menu is one item longer (Risorse): between the phone menu (860 px) and 1240 px its items wrap instead
   of running under the user menu, which shows only the role there (the name stays in its aria-label). */
@media (min-width: 861px) and (max-width: 1240px) {
  .nav-list { flex-wrap: wrap; row-gap: 2px; padding: 4px 0; }
  .user-menu .user-name { display: none; }
}
@media (max-width: 600px) {
  .res-section-head .segmented { width: 100%; }
  .res-section-head .segmented label { flex: 1; justify-content: center; }
  .res-chart { padding: 12px 12px 8px; }
  .res-host { padding: 12px 12px 10px 16px; }
}
@media (forced-colors: active) {
  .res-dot, .res-host::before { forced-color-adjust: none; }
  .res-state { border: 1px solid CanvasText; }
}

/* ------------------------------------------------------------ T15i: DPaC (DPAC.md 12) */

/* Package groups: accettato = the existing dark green; validato and ricevuto = two lighter greens; da trasferire =
   the "mancante" grey; scartato = a red-orange with a 45-degree stripe pattern; sconosciuto = hatched. Adjacent pairs
   in bar order (accepted, validated, received, rejected, not transferred) were checked with the dataviz validator on
   both surfaces (CVD and normal-vision separation pass); the light green and the grey sit under 3:1 by design, so
   every bar has its numbers next to it, a text alternative and a tooltip per part. */
:root {
  --dpac-validated: #52b06f;
  --dpac-received: #a8dbb2;
  --dpac-rejected: #d4521f;
  --dpac-rejected-2: #f2a27f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --dpac-validated: #5fbd79;
    --dpac-received: #c2ecca;
    --dpac-rejected: #ef7a45;
    --dpac-rejected-2: #8f3a17;
  }
}

.dg-accepted { background: var(--seg-accepted); }
.dg-validated { background: var(--dpac-validated); }
.dg-received { background: var(--dpac-received); }
.dg-rejected { background: repeating-linear-gradient(45deg, var(--dpac-rejected) 0 3px, var(--dpac-rejected-2) 3px 5px); }
.dg-notTransferred { background: var(--seg-missing); }
.dg-unknown { background: repeating-linear-gradient(135deg, var(--hatch-a) 0 2px, var(--hatch-b) 2px 5px); }
.swatch.dg-rejected { background: repeating-linear-gradient(45deg, var(--dpac-rejected) 0 2px, var(--dpac-rejected-2) 2px 4px); }

.dpac-bar { margin-bottom: 4px; }
.dpac-bar-empty { padding: 2px 0; }
.dpac-legend { margin: 4px 0 10px; }
.dpac-legend li { cursor: help; }
.dpac-nums {
  display: flex; flex-wrap: wrap; gap: 0 12px; list-style: none; margin: 0 0 4px; padding: 0;
  font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.dpac-nums li { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.dpac-nums .swatch { margin-right: 0; width: 9px; height: 9px; }
.dpac-num-value { font-weight: 650; color: var(--text); }
.dpac-num-total { color: var(--muted); }
.dpac-table .cell-dpac-bar { min-width: 240px; width: 320px; }
.dpac-table .cell-dpac-name { min-width: 180px; }
.dpac-table .cell-dpac-name a { font-weight: 650; text-decoration: none; }
.dpac-table .cell-dpac-name a:hover { text-decoration: underline; }
.dpac-table .badge { white-space: normal; }
.dpac-file { word-break: break-all; }
.dpac-warn-list, .dpac-result ul { margin: 4px 0 0; padding-left: 18px; }
.dpac-result .facts { margin-top: 6px; }
.dpac-result > div { min-width: 0; }
.dpac-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }

.dpac-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dpac-check {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  padding: 10px 12px 8px 16px; min-width: 0;
}
.dpac-check::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--muted-fg); forced-color-adjust: none;
}
.dpac-check.sev-bad::before { background: var(--bad-fg); }
.dpac-check.sev-warn::before { background: var(--warn-fg); }
.dpac-check.sev-info::before { background: var(--info-fg); }
.dpac-check-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.dpac-check-count { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.dpac-check-msg { margin: 4px 0 2px; }
.dpac-check-more > summary { cursor: pointer; color: var(--accent); font-size: 12.5px; width: max-content; max-width: 100%; }
.dpac-pkg-list {
  list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 2px 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); font-size: 12.5px;
}
.dpac-pkg-list li { overflow-wrap: anywhere; }
.dpac-evidence { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 6px 0 2px; }
.dpac-evidence > div { display: contents; }
.dpac-evidence dt { color: var(--muted); }
.dpac-evidence dd { margin: 0; overflow-wrap: anywhere; }

.dpac-lots tbody th { min-width: 150px; }
.dpac-states > summary { cursor: pointer; color: var(--accent); font-size: 12px; width: max-content; }
.dpac-state-table { border-collapse: collapse; margin-top: 4px; width: 100%; }
.dpac-state-table th, .dpac-state-table td { padding: 2px 6px 2px 0; border: 0; font-weight: 400; text-align: left; }
.dpac-state-table thead th { color: var(--muted); font-size: 11.5px; }
.dpac-state-table td.num, .dpac-state-table th.num { text-align: right; }
.dpac-minibar { display: inline-block; vertical-align: middle; width: 80px; margin: 0 6px 0 0; }
.dpac-minibar > span { background: var(--seg-accepted); }
.dpac-packages .dpac-pkg { font-weight: 650; }
.dpac-packages tr.dpac-row-open > * { background: var(--accent-soft); }
.dpac-msg { max-width: 460px; overflow-wrap: anywhere; }
.dpac-panel { border-color: var(--accent); }
/* headings the page scrolls to stay clear of the sticky top bar */
#dc-search, #dc-panel, #fasi { scroll-margin-top: 132px; }
/* the cantiere stays in view while the wide table scrolls sideways (phones) */
.dpac-table tbody th.cell-dpac-name, .dpac-table tfoot th { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.dpac-table tfoot th { background: var(--surface-2); }
.dpac-panel h2 .code { font-weight: 500; overflow-wrap: anywhere; }

.dpac-hc { position: relative; margin-top: 4px; }
.dpac-hc svg { display: block; max-width: 100%; overflow: visible; touch-action: pan-y; }
.dpac-hc svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.dpac-hc .grid line { stroke: var(--grid); stroke-width: 1; }
.dpac-hc .grid text, .dpac-hc text.axis-x { fill: var(--muted); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.dpac-hc rect.hit { fill: transparent; cursor: crosshair; }
.dpac-hc rect.hc-band { fill: var(--surface-3); }
.dpac-hc .dgf-accepted { fill: var(--seg-accepted); }
.dpac-hc .dgf-validated { fill: var(--dpac-validated); }
.dpac-hc .dgf-received { fill: var(--dpac-received); }
.dpac-hc .dgf-notTransferred { fill: var(--seg-missing); }
.dpac-hc .dgf-unknown { fill: var(--hatch-a); }
.dpac-hc .pat-a { fill: var(--dpac-rejected); }
.dpac-hc .pat-b { fill: var(--dpac-rejected-2); }
.chart-tip-row.strong { font-weight: 700; border-top: 1px solid var(--border); margin-top: 2px; padding-top: 2px; }

/* One more main-menu item (DPaC): the wrap range of T13d starts a little higher. */
@media (min-width: 861px) and (max-width: 1320px) {
  .nav-list { flex-wrap: wrap; row-gap: 2px; padding: 4px 0; }
  .user-menu .user-name { display: none; }
}
@media (max-width: 600px) {
  .dpac-table .cell-dpac-bar { min-width: 200px; width: auto; }
  .dpac-check { padding: 10px 10px 8px 14px; }
  .dpac-check-count { margin-left: 0; }
}
@media (forced-colors: active) {
  .dg-accepted, .dg-validated, .dg-received, .dg-rejected, .dg-notTransferred, .dg-unknown, .dpac-check::before { forced-color-adjust: none; }
}

/* ------------------------------------------------------------ T6-D: Proiezione (PROJECTION.md 11) */

/* States are chips with a glyph and the word (colour is never alone): completato and in tempo green (✓, ●), a rischio
   amber (▲), in ritardo and fermo red (▼, ■), sconosciuto grey hatched (?), mancato red (✕); the badge tokens of the
   page, light and dark. The chart reuses the fixed series colours (consegnato light green, accettato dark green): the
   pair passes the dataviz validator's colour-vision and normal-vision separation on both surfaces; the light green sits
   under 3:1 on white and outside the dark band by design (UI.md 6.2), so the lines are labelled at their ends, the
   legend names them and the data are in a table. */
.pj-chip { gap: 5px; }
.pj-icon { font-size: 10px; line-height: 1; }
.pj-chip.pj-sconosciuto { background: repeating-linear-gradient(135deg, var(--muted-bg) 0 4px, var(--surface-2) 4px 8px); }
.pj-legend { margin: 10px 0 0; gap: 6px 10px; }

.pj-cell { display: inline-grid; gap: 1px; }
td.num .pj-cell { justify-items: end; }
.pj-main { font-weight: 650; font-variant-numeric: tabular-nums; }
.pj-sub { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; white-space: nowrap; }
.pj-neg { color: var(--bad-fg); font-weight: 650; }
.pj-pos { font-weight: 600; }
.pj-behind { color: var(--warn-fg); }
.pj-td { white-space: nowrap; }
.pj-table td.pj-group-start, .pj-table th.pj-group-start { border-left: 1px solid var(--border-strong); }
.pj-table thead th.pj-group-head { text-align: center; vertical-align: bottom; border-bottom-color: var(--border); }
.pj-table .pj-deadline .badge { white-space: normal; }
.pj-excluded { font-style: italic; }
.pj-table tr.pj-roll-row > th { font-weight: 650; }
.pj-table tfoot tr.pj-line-row > th, .pj-table tfoot tr.pj-line-row > td { font-weight: 600; }
.pj-table tfoot tr.pj-line-row + tr.pj-line-row > th, .pj-table tfoot tr.pj-line-row + tr.pj-line-row > td { border-top-width: 1px; }
.pj-ms-disclosure { margin-top: 4px; font-weight: 400; }
.pj-ms-disclosure summary { cursor: pointer; font-size: 12px; color: var(--accent); width: max-content; max-width: 100%; }
.pj-ms-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.pj-ms-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.pj-intro { margin: 0 0 8px; }
.pj-viewswitch label { padding: 3px 10px; font-size: 13px; }

.pj-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 2px; padding-top: 6px;
  border-top: 1px dashed var(--border); font-size: 12.5px;
}
.pj-strip-label { font-weight: 650; color: var(--text-2); }
.pj-strip-part { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.pj-strip-part .pj-cell { display: inline-flex; align-items: baseline; gap: 6px; }
.pj-strip-part .pj-sub { display: inline; }
.pj-strip-margin { font-variant-numeric: tabular-nums; color: var(--text-2); }
.pj-strip-margin.pj-neg { color: var(--bad-fg); }

/* T19: a cantiere the hub projects "in ritardo": a red stripe and a soft tint on its row, in both column sets. The tint
   also replaces the sticky name cell's own background. Colour is never alone: Misure writes the state and the end under
   the name, Proiezione has the state chips; the chip gets an outline because its fill is close to the tint. */
.progress-table tbody tr.pj-late-row > * { background: color-mix(in srgb, var(--bad-bg) 55%, var(--surface)); }
.progress-table tbody tr.pj-late-row > th { box-shadow: inset 4px 0 0 var(--bad-fg); }
table.data.progress-table tbody tr.pj-late-row:hover > * { background: var(--bad-bg); }
.pj-late-row .pj-chip.pj-inRitardo { box-shadow: inset 0 0 0 1px currentColor; }
.pj-late { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--bad-fg); }
.pj-late-part { font-variant-numeric: tabular-nums; }

/* the cantiere page */
.pj-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 14px; }
.pj-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; min-width: 0; background: var(--surface); }
.pj-box-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.card .pj-box-head h3 { margin: 0; }
.pj-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; }
.pj-facts > div { display: contents; }
.pj-facts dt { color: var(--muted); font-size: 12.5px; }
.pj-facts dd { margin: 0; min-width: 0; font-variant-numeric: tabular-nums; }
.pj-facts .pj-sub { white-space: normal; }
.pj-big { font-size: 15px; font-weight: 700; }
.pj-why { display: block; font-size: 12px; color: var(--text-2); white-space: normal; }
.pj-box .notes { margin: 8px 0 0; }
.pj-stages tr.pj-bottleneck > * { background: var(--warn-bg); }
.pj-stages tr.pj-bottleneck > th { box-shadow: inset 4px 0 0 var(--warn-fg); }
.pj-bn { margin-left: 4px; box-shadow: inset 0 0 0 1px currentColor; }
.pj-stage-notes { margin: 3px 0 0; padding-left: 16px; font-size: 11.5px; font-weight: 400; color: var(--text-2); max-width: 340px; white-space: normal; }
.pj-stages td { white-space: nowrap; }
.pj-weeks tr.pj-window > * { background: var(--accent-soft); }
.pj-weeks .pj-sub { display: inline; margin-left: 6px; }
.pj-points { max-height: 360px; overflow-y: auto; }

.pj-chart { position: relative; margin: 6px 0 4px; }
.pj-chart-legend { margin-bottom: 6px; }
.pj-chart svg { display: block; max-width: 100%; overflow: visible; touch-action: pan-y; }
.pj-chart svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.pj-chart .grid line { stroke: var(--grid); stroke-width: 1; }
.pj-chart .grid text { fill: var(--muted); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.pj-chart rect.pj-future { fill: var(--surface-2); }
.pj-chart path.series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pj-chart .l-accepted { stroke: var(--line-accepted); }
.pj-chart .l-delivered { stroke: var(--line-delivered); }
.pj-chart circle.l-accepted { fill: var(--line-accepted); stroke: var(--surface); stroke-width: 2; }
.pj-chart circle.l-delivered { fill: var(--line-delivered); stroke: var(--surface); stroke-width: 2; }
.pj-chart line.pj-proj { stroke-width: 2; stroke-dasharray: 6 4; stroke-linecap: round; }
.pj-chart line.pj-stopped { stroke-dasharray: 2 4; }
.pj-chart .pj-band { stroke: none; }
.pj-chart .band-delivered { fill: var(--line-delivered); fill-opacity: 0.22; }
.pj-chart .band-accepted { fill: var(--line-accepted); fill-opacity: 0.18; }
.pj-chart .total-line { stroke: var(--line-total); stroke-width: 1; stroke-dasharray: 5 4; }
.pj-chart line.pj-mark { stroke-width: 1.5; stroke-dasharray: 4 3; }
.pj-chart .pj-mark.mk-internal { stroke: var(--warn-fg); }
.pj-chart .pj-mark.mk-deadline { stroke: var(--bad-fg); }
.pj-chart .pj-mark.mk-expired { stroke: var(--muted); }
.pj-chart text.pj-mark-label { font-size: 11px; font-family: var(--font); font-weight: 600; fill: var(--text-2); }
.pj-chart line.pj-today { stroke: var(--accent); stroke-width: 1; }
.pj-chart text.pj-today-label { font-size: 11px; font-family: var(--font); fill: var(--accent); }
.pj-chart text.pj-end-label {
  font-size: 11px; font-family: var(--font); font-weight: 650; fill: var(--text);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
}
.pj-chart .crosshair { stroke: var(--border-strong); stroke-width: 1; }
.pj-key-band {
  display: inline-block; width: 18px; height: 9px; margin-right: 6px; border-radius: 2px; flex: none; forced-color-adjust: none;
  background: color-mix(in srgb, var(--line-delivered) 30%, transparent); border-top: 2px dashed var(--line-delivered);
}
.pj-tip { min-width: 240px; max-width: 320px; }
.pj-tip .chart-tip-row .pj-tip-text { white-space: normal; font-weight: 500; text-align: right; }

/* admin, contract milestones */
.ms-table td { vertical-align: middle; }
.ms-table .input { min-width: 0; }
.ms-pct { width: 6.5rem; }
.ms-note { min-width: 14rem; width: 100%; }

@media (max-width: 1100px) {
  .pj-summary { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pj-strip { gap: 4px 12px; }
  .pj-tip { min-width: 0; max-width: calc(100% - 8px); }
  .pj-stage-notes { max-width: 220px; }
}
@media (forced-colors: active) {
  .pj-chip, .pj-key-band { border: 1px solid CanvasText; }
}

/* ------------------------------------------------------------ T7: Allarmi (ALERTS.md 10) */

/* Levels: critico in the critical colour (bad), attenzione in amber (warn); colour is never alone: the level is
   always written. Silenced and resolved alerts are quieter. */

/* header count: [critici][aperti]; red when something is critico */
.al-count {
  display: inline-flex; align-items: stretch; margin-left: 6px; border-radius: 999px; overflow: hidden;
  font-size: 11.5px; font-weight: 700; line-height: 18px; font-variant-numeric: tabular-nums; vertical-align: 1px;
  background: var(--muted-bg); color: var(--muted-fg);
}
.al-count > span { padding: 0 7px; }
.al-count-c { background: var(--bad-fg); color: var(--surface); }
.al-count-crit .al-count-n { background: var(--bad-bg); color: var(--bad-fg); }
.al-count-warn { background: var(--warn-bg); color: var(--warn-fg); }
.al-count-link { margin-left: auto; text-decoration: none; display: inline-flex; align-items: center; }
.al-count-link .al-count { margin-left: 0; font-size: 12px; line-height: 22px; white-space: nowrap; }
.al-count-link + .menu-toggle { margin-left: 0; }

/* sub-navigation of the three pages */
.al-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 16px; border-bottom: 1px solid var(--border); }
.al-tabs a {
  padding: 7px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-2);
  font-weight: 600; text-decoration: none;
}
.al-tabs a:hover { color: var(--text); background: var(--surface-3); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.al-tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

.al-tiles .al-tile-crit { border-top: 3px solid var(--bad-fg); }
.al-tiles .al-tile-warn { border-top: 3px solid var(--warn-fg); }

/* the list */
.al-table td, .al-table th { vertical-align: top; }
.al-table .al-cell-title { min-width: 260px; max-width: 460px; font-weight: 500; }
.al-table .al-cell-rule { white-space: nowrap; }
.al-table .al-key { word-break: break-all; max-width: 240px; }
.al-row-quiet > * { color: var(--text-2); }
.al-state, .al-diag { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.al-state-sub { white-space: nowrap; }

/* chips on Stato */
.al-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.al-chip {
  display: inline-flex; align-items: center; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 650;
  line-height: 18px; white-space: nowrap; text-decoration: none; border: 1px solid transparent;
}
.al-chip-crit { background: var(--bad-bg); color: var(--bad-fg); border-color: color-mix(in srgb, var(--bad-fg) 35%, transparent); }
.al-chip-warn { background: var(--warn-bg); color: var(--warn-fg); }
.al-chip-muted { background: var(--muted-bg); color: var(--muted-fg); }
.al-chip:hover { text-decoration: underline; }
.vm > .al-chips { margin: 0 0 6px; }

/* "Allarmi aperti" on the other pages */
.al-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.al-item {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  padding: 8px 12px 8px 16px; min-width: 0;
}
.al-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--muted-fg); forced-color-adjust: none;
}
.al-item-critico::before { background: var(--bad-fg); }
.al-item-attenzione::before { background: var(--warn-fg); }
.al-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.al-item-title { font-weight: 600; }
.al-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 4px; }

/* the detail */
.al-head-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 6px; }
.al-detail-title { max-width: 980px; }
.al-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.al-silence-note { justify-content: flex-start; }
.al-ack-note { margin: -8px 0 12px; }
.al-hypothesis { border-left: 4px solid var(--accent); }
.al-diag-lines { display: grid; gap: 8px; margin: 4px 0 10px; }
.al-diag-lines > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 2px 14px; }
.al-diag-lines > div.al-diag-free { grid-template-columns: minmax(0, 1fr); }
.al-diag-lines dt { font-weight: 700; color: var(--text-2); }
.al-diag-lines dd { margin: 0; max-width: 78ch; }
.al-diag-lines-sm { font-size: 13px; gap: 4px; }
.al-diag-lines-sm > div { grid-template-columns: 140px minmax(0, 1fr); }
.al-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 22px; margin: 8px 0 4px; }
.al-kv > div { display: grid; gap: 1px; min-width: 0; }
.al-kv dt { font-size: 12px; color: var(--muted); }
.al-kv dt.code { font-size: 11.5px; }
.al-kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.al-kv dd.unknown { font-weight: 500; }
.al-evidence { padding: 10px 0 6px; border-top: 1px solid var(--border); }
.al-evidence:first-of-type { border-top: 0; padding-top: 0; }
.al-evidence > h3 { margin: 4px 0 2px; }
.al-ev-table { font-size: 12.5px; }
.al-more-rows { margin: 6px 0 2px; }
.al-related { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.al-related li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.al-hash { margin-top: 10px; }

.al-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); display: grid; gap: 10px; }
.al-timeline > li { position: relative; }
.al-timeline > li::before {
  content: ""; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong); forced-color-adjust: none;
}
.al-timeline > li.al-ev-opened::before, .al-timeline > li.al-ev-reopened::before, .al-timeline > li.al-ev-level::before { border-color: var(--bad-fg); }
.al-timeline > li.al-ev-resolved::before { border-color: var(--ok-fg); background: var(--ok-bg); }
.al-timeline > li.al-ev-acknowledged::before, .al-timeline > li.al-ev-silenced::before, .al-timeline > li.al-ev-unsilenced::before { border-color: var(--accent); }
.al-timeline > li.al-ev-text::before { border-color: var(--accent); background: var(--accent-soft); }
.al-timeline > li.al-ev-updated::before { width: 8px; height: 8px; left: -19px; top: 7px; }
.al-ev-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.al-ev-note, .al-ev-figs { margin: 2px 0 0; }
.al-ev-updates { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }

.al-text { padding: 10px 0; border-top: 1px solid var(--border); }
.al-text:first-of-type { border-top: 0; padding-top: 2px; }
.al-text-old .al-diag-lines { color: var(--text-2); }
.al-text-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; }

/* reports */
.al-reports { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.al-days { padding: 12px 10px; }
.al-days-title { margin: 0 6px 6px; font-weight: 600; }
.al-days ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.al-days li { display: flex; align-items: center; gap: 6px; }
.al-days a { flex: 1; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.al-days a:hover { background: var(--surface-3); }
.al-days a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.al-report-body { max-width: 80ch; }
.al-report-body h3 { margin: 14px 0 4px; font-size: 14.5px; }
.al-report-body h3:first-child { margin-top: 2px; }
.al-report-body ul { margin: 2px 0 8px; padding-left: 20px; }
.al-bundle { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 4px; }
.al-bundle h3 { margin: 14px 0 6px; }
.al-bundle h4 { margin: 6px 0 2px; }
.al-bundle-alerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 20px; }
.al-bundle-table { margin-bottom: 8px; }
.al-bundle-table caption { text-align: left; padding: 4px 0; }

/* rules */
.al-rules .al-rule-name { white-space: nowrap; }
.al-rules td { vertical-align: top; }
.al-params { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 12.5px; }

@media (max-width: 860px) {
  .al-reports { grid-template-columns: minmax(0, 1fr); }
  .al-days ul { display: flex; flex-wrap: wrap; gap: 4px; }
}
@media (max-width: 600px) {
  .al-diag-lines > div, .al-diag-lines-sm > div { grid-template-columns: minmax(0, 1fr); }
  .al-table .al-cell-title { min-width: 200px; }
  .al-actions { width: 100%; }
}
@media (forced-colors: active) {
  .al-count, .al-chip { border: 1px solid CanvasText; }
}

/* ------------------------------------------------------------ Lavorazione (T40, UI.md 13) */

.work-machines { min-width: 1040px; }
.work-group th { background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 650; padding: 5px 10px; }
.work-machines tbody th[scope="row"] { white-space: nowrap; }
.work-batch { display: block; font-size: 11.5px; overflow-wrap: anywhere; min-width: 200px; max-width: 300px; }
.work-lots-header .field { max-width: 100%; }
.work-lots-header .select { width: 100%; max-width: 100%; }
.work-steps { display: flex; gap: 2px; margin-top: 5px; width: 168px; max-width: 100%; }
.work-step { flex: 1; height: 6px; border-radius: 2px; background: var(--surface-3); forced-color-adjust: none; }
.work-step.done { background: var(--seg-pending); }
.work-step.now { background: var(--seg-progress); }
.work-step.stop { background: var(--warn-fg); }
.work-bar { display: flex; height: 8px; width: 150px; max-width: 100%; border-radius: 4px; overflow: hidden; background: var(--surface-3); margin-top: 5px; forced-color-adjust: none; }
.work-bar span { display: block; height: 100%; background: var(--seg-progress); }
.work-more { margin-top: 4px; }
.work-more summary { cursor: pointer; font-size: 12px; color: var(--accent); width: max-content; }
.work-more p { margin: 3px 0 0; font-size: 12px; color: var(--text-2); max-width: 300px; white-space: normal; }
.work-err { display: block; color: var(--bad-fg); font-size: 12px; white-space: normal; }
.work-sub-left { display: block; font-size: 12px; color: var(--muted); }
.work-note { margin: 10px 0 0; }
.work-intro { color: var(--text-2); margin-bottom: 10px; }
.work-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--text-2); margin-bottom: 10px; }
.work-swatch-look { background: var(--warn-fg); }
.work-phases { min-width: 1180px; }
.work-phases thead th { border-top: 3px solid var(--border); }
.work-phases thead th span { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; white-space: normal; }
.work-phases thead th.work-g-work { border-top-color: var(--seg-progress); }
.work-phases thead th.work-g-del { border-top-color: var(--seg-pending); }
.work-phases thead th.work-g-acc { border-top-color: var(--seg-accepted); }
.work-phases thead th.work-g-look { border-top-color: var(--warn-fg); }
.work-phases .work-lot { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 148px; }
.work-phases thead .work-lot, .work-phases tfoot .work-lot { background: var(--surface-2); }
.work-phases td.num { white-space: normal; }
.work-none { color: var(--muted); }
td.work-active { background: var(--accent-soft); }
td.work-stopped { background: var(--warn-bg); color: var(--warn-fg); }
td.work-look { background: var(--bad-bg); color: var(--bad-fg); }
table.data tbody tr:hover > td.work-active { background: var(--accent-soft); }
table.data tbody tr:hover > td.work-stopped { background: var(--warn-bg); }
table.data tbody tr:hover > td.work-look { background: var(--bad-bg); }
.work-tag { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.3; margin-top: 2px; }
.work-sub { display: block; font-size: 11.5px; line-height: 1.3; margin-top: 2px; font-weight: 400; color: var(--muted); }
td.work-stopped .work-sub { color: inherit; }
.work-dpac-lots { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.work-foot { margin-top: 10px; font-size: 12.5px; color: var(--text-2); display: grid; gap: 3px; }
.work-foot p { margin: 0; }