/* ============================================================
   DESIGN SYSTEM 3.0 — stili dei primi componenti (ds3.js)
   SOLO token del DS (design-system.css): nessun colore nuovo,
   light/dark gratis. Superfici continue, bordi sottili, una
   azione primaria per contesto (V5 §7.1).
   ============================================================ */

/* ---- pagina prototipo: #app è FLEX (riga) → serve un wrapper colonna ---- */
.ds3-page { flex: 1 1 auto; min-width: 0; width: 100%; display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); }

/* ---- toolbar del modulo ---- */
.ds3-toolbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); background: var(--card-bg); position: sticky; top: 0; z-index: 30; }
.ds3-tb-id h1 { margin: 0; font-size: 17px; letter-spacing: -.2px; }
.ds3-tb-sub { color: var(--muted); font-size: 12px; }
.ds3-tb-spazio { flex: 1 1 auto; }
.ds3-btn { border: 1px solid var(--border); background: var(--card-bg); color: var(--text); border-radius: var(--ds-r-sm); padding: 6px 13px; font-size: 12.5px; font-weight: 600; }
.ds3-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ds3-btn.ghost { color: var(--muted); }
.ds3-btn:hover { border-color: var(--accent); }
.ds3-badge { font-size: 11px; font-weight: 700; border-radius: 10px; padding: 3px 10px; }
.ds3-badge.ok { color: #065F46; background: color-mix(in srgb, var(--ds-ok) 14%, transparent); }
.ds3-badge.warn { color: #92400E; background: color-mix(in srgb, var(--ds-warn) 16%, transparent); }
.ds3-badge.err { color: #991B1B; background: color-mix(in srgb, var(--ds-err) 13%, transparent); }
.ds3-badge.off { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }

/* ---- workspace 3 pannelli ---- */
.ds3-ws { display: grid; grid-template-columns: 250px 1fr 290px; grid-template-rows: 1fr auto; min-height: calc(100vh - 108px); }
.ds3-ws-sx { grid-row: 1; min-width: 0; border-right: 1px solid var(--border); padding: var(--sp-3); overflow-y: auto; background: var(--card-bg); }
.ds3-ws-centro { grid-row: 1; min-width: 0; padding: var(--sp-4) var(--sp-5); overflow-y: auto; background: var(--bg); }
.ds3-ws-dx { grid-row: 1; min-width: 0; border-left: 1px solid var(--border); padding: var(--sp-3); overflow-y: auto; background: var(--card-bg); }
.ds3-ws-status { grid-column: 1 / -1; display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-2) var(--sp-5); border-top: 1px solid var(--border); background: var(--card-bg); font-size: 12px; color: var(--muted); }
@media (max-width: 1000px) { .ds3-ws { grid-template-columns: 1fr; } .ds3-ws-sx, .ds3-ws-dx { border: none; border-bottom: 1px solid var(--border); } }
.ds3-st b { color: var(--text); }
.ds3-st.warn b { color: #B45309; }
.ds3-st.err b { color: #B91C1C; }
.ds3-st.ok b { color: #047857; }

/* ---- albero ---- */
.ds3-tree { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ds3-tree .ds3-tree-riga { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--ds-r-sm); cursor: default; }
.ds3-tree .ds3-tree-riga:hover { background: var(--accent-soft); }
.ds3-tree .ds3-tree-riga.sel { background: var(--accent-soft); color: var(--accent-dark); font-weight: 650; }
.ds3-tree.lv1 { padding-left: 14px; } .ds3-tree.lv2 { padding-left: 14px; }
.ds3-tree-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds3-tree-x { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.ds3-tree-x.ok { color: #047857; } .ds3-tree-x.warn { color: #B45309; } .ds3-tree-x.err { color: #B91C1C; }
.ds3-sx-tit { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: var(--sp-3) 0 var(--sp-1); }
.ds3-sx-tit:first-child { margin-top: 0; }

/* ---- inspector ---- */
.ds3-insp-sez { border-bottom: 1px solid var(--border); }
.ds3-insp-sez > summary { list-style: none; cursor: pointer; padding: 9px 4px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.ds3-insp-sez > summary::-webkit-details-marker { display: none; }
.ds3-insp-sez > summary::before { content: "›"; display: inline-block; margin-right: 6px; color: var(--muted); transition: transform .12s; }
.ds3-insp-sez[open] > summary::before { transform: rotate(90deg); }
.ds3-insp-corpo { padding: 0 4px var(--sp-3); font-size: 12.5px; color: var(--muted); }
.ds3-fonte { display: block; padding: 4px 0; border-bottom: 1px dashed var(--border); font-size: 12px; }
.ds3-fonte b { color: var(--text); }

/* ---- tabella ---- */
.ds3-tab-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--ds-r-sm); background: var(--card-bg); }
.ds3-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.ds3-tab th { text-align: left; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 5%, transparent); }
.ds3-tab td { padding: 8px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.ds3-tab tbody tr:hover { background: var(--accent-soft); }
.ds3-tab th.num, .ds3-tab td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- KPI ---- */
.ds3-kpis { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-4); }
.ds3-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--ds-r-sm); background: var(--card-bg); min-width: 130px; }
.ds3-kpi b { font-size: 19px; letter-spacing: -.3px; }
.ds3-kpi span { font-size: 11.5px; color: var(--muted); }
.ds3-kpi.warn b { color: #B45309; } .ds3-kpi.err b { color: #B91C1C; } .ds3-kpi.ok b { color: #047857; }

/* ---- kv ---- */
.ds3-kv-r { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.ds3-kv-r span { color: var(--muted); }

/* ---- pannelli centro ---- */
.ds3-pann { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--ds-r-sm); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); }
.ds3-pann h2 { margin: 0 0 var(--sp-3); font-size: 14px; letter-spacing: -.1px; }
.ds3-pann .hint { font-size: 12px; }

/* ---- banner prototipo ---- */
.ds3-proto-banner { display: flex; align-items: center; gap: var(--sp-3); padding: 6px var(--sp-5); background: color-mix(in srgb, var(--ds-warn) 14%, var(--bg)); border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text); }

/* monogramma ME (Mediterranea Engineering) — stesso brand del logo
   della societa' che usa il programma. NIENTE colore scritto qui dentro: il rosso
   fisso con dentro «ME» era il marchio di UN cliente, e su un prodotto venduto ad
   altri metteva in cima alla pagina il marchio di un concorrente. Il colore arriva
   dal tenant come --marchio-colore. */
.marchio-mini { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px; margin-right: 8px; vertical-align: -8px; object-fit: contain; }
.marchio-mini-testo { background: var(--marchio-colore, #334155); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .5px; }