/* ============================================================
   shell.css - struttura, navigazione, controlli, dialoghi, toast
   ============================================================ */

#gs-app *, #gs-app *::before, #gs-app *::after { box-sizing: border-box; }
#gs-app { margin: 0; }
#gs-app h1, #gs-app h2, #gs-app h3, #gs-app h4, #gs-app p, #gs-app figure { margin: 0; }
#gs-app h1 { font-size: 27px; font-weight: 600; letter-spacing: -.8px; line-height: 1.22; }
#gs-app h2 { font-size: 17px; font-weight: var(--gs-head-weight); letter-spacing: -.2px; }
#gs-app h3 { font-size: 14px; font-weight: var(--gs-head-weight); }
#gs-app small { font-size: 12px; }
#gs-app p { line-height: 1.55; }
/* Il reset non tocca il colore: "#gs-app button" e' piu' specifico delle classi dei
   componenti e, ereditando quello della barra laterale scura, rendeva illeggibili i
   pulsanti chiari (Compatta / Voci separate). Il colore lo dichiara ogni componente. */
#gs-app button { font: inherit; }
#gs-app a { color: var(--gs-accent); text-underline-offset: 2px; }
#gs-app svg.lucide { width: 17px; height: 17px; flex: none; stroke-width: 1.7; }
#gs-app .gs-muted { color: var(--gs-muted); }
#gs-app .gs-mono { font-family: var(--gs-mono); font-size: 12.5px; }
#gs-app .gs-nowrap { white-space: nowrap; }
#gs-app .gs-hide { display: none !important; }
#gs-app .gs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#gs-app .gs-skip { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--gs-paper); padding: 10px 14px; border-radius: var(--gs-radius-sm); border: 1px solid var(--gs-border); }
#gs-app .gs-skip:focus { left: 12px; }
#gs-app :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; border-radius: var(--gs-radius-xs); }

/* ---------- layout ---------- */
#gs-app { display: grid; grid-template-columns: var(--gs-side-w) minmax(0, 1fr); min-height: 860px; }
.gs-side { background: var(--gs-side); color: var(--gs-side-text); border-right: 1px solid var(--gs-border); display: flex; flex-direction: column; gap: 0; padding: 20px 12px 16px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.gs-main { min-width: 0; display: flex; flex-direction: column; background: var(--gs-bg); }
#gs-content { flex: 1; padding: 26px 30px 34px; min-width: 0; }
.gs-foot { display: flex; gap: 14px; justify-content: space-between; padding: 16px 30px 26px; color: var(--gs-muted); font-size: 11.5px; border-top: 1px solid var(--gs-border); }

.gs-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 20px; }
.gs-brand img { height: 26px; display: block; }
.gs-brand strong { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.2px; }
.gs-brand span { display: block; font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase; color: var(--gs-side-muted); }
.gs-picker { border: 1px solid var(--gs-border); background: transparent; border-radius: var(--gs-radius-sm); padding: 9px; display: grid; gap: 3px; margin-bottom: 20px; }
.gs-picker label { font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--gs-side-muted); }
.gs-picker select { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 500; padding: 2px 0; }
.gs-picker select option { color: #233139; background: #fff; }
input::placeholder, textarea::placeholder { color: var(--gs-placeholder); opacity: 1; }
.gs-nav-label { font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gs-side-muted); padding: 0 10px 8px; font-weight: 600; }
.gs-nav { display: grid; gap: 4px; }
.gs-nav button { border: 0; background: transparent; display: flex; align-items: center; gap: 10px; border-radius: var(--gs-radius-sm); text-align: left; padding: 10px; min-height: 42px; font-size: 13px; color: var(--gs-side-muted); cursor: pointer; }
.gs-nav button:hover { background: var(--gs-side-hover); color: var(--gs-side-text); }
.gs-nav button[aria-current="page"] { background: var(--gs-side-active); color: var(--gs-side-text); font-weight: 600; box-shadow: inset 3px 0 var(--gs-accent); }
.gs-nav .gs-count { margin-left: auto; min-width: 20px; text-align: center; border-radius: 5px; background: rgba(127, 127, 127, .18); padding: 1px 5px; font-size: 11px; font-variant-numeric: tabular-nums; }
.gs-nav .gs-count[data-tone="red"] { background: var(--gs-red); color: var(--gs-on-red); }
.gs-navgroup + .gs-navgroup { margin-top: 16px; }
.gs-side-foot { margin-top: auto; padding: 18px 6px 0; display: grid; gap: 10px; }
.gs-side-foot .gs-picker { margin: 0; }
.gs-side-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; color: var(--gs-side-muted); padding: 10px 4px 0; line-height: 1.45; }

.gs-top { height: 66px; display: flex; align-items: center; gap: 12px; padding: 0 26px; border-bottom: 1px solid var(--gs-border); background: var(--gs-paper); position: sticky; top: 0; z-index: 20; }
.gs-crumb { font-size: 11.5px; color: var(--gs-muted); display: flex; align-items: center; gap: 6px; min-width: 0; }
.gs-crumb b { color: var(--gs-text); }
.gs-crumb button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.gs-top-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.gs-search { display: flex; align-items: center; gap: 7px; border: 1px solid var(--gs-border); background: var(--gs-soft); border-radius: var(--gs-radius-sm); padding: 0 9px; min-width: 210px; height: 36px; }
.gs-search input { border: 0; background: transparent; font: inherit; width: 100%; outline: none; color: inherit; }
.gs-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--gs-tint); color: var(--gs-accent); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }

/* ---------- pagehead, pannelli, griglie ---------- */
.gs-pagehead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.gs-pagehead .gs-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.gs-pagehead p { color: var(--gs-muted); font-size: 13px; margin-top: 5px; max-width: 68ch; }
.gs-panel { background: var(--gs-paper); border: 1px solid var(--gs-border); border-radius: var(--gs-radius); overflow: hidden; margin-bottom: 16px; }
.gs-panel-head { display: flex; align-items: center; gap: 12px; padding: 15px var(--gs-panel-pad); border-bottom: 1px solid var(--gs-border); flex-wrap: wrap; }
.gs-panel-head .gs-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.gs-panel-body { padding: var(--gs-panel-pad); }
.gs-panel-body + .gs-panel-body { border-top: 1px solid var(--gs-border); }
.gs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 13px; }
.gs-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.gs-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.gs-stack { display: grid; gap: 12px; }
.gs-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gs-callout { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: var(--gs-radius-sm); background: var(--gs-blue-bg); border: 1px solid transparent; font-size: 12.8px; line-height: 1.5; margin-bottom: 14px; }
.gs-callout[data-tone="warn"] { background: var(--gs-amber-bg); }
.gs-callout[data-tone="bad"] { background: var(--gs-red-bg); }
.gs-callout[data-tone="good"] { background: var(--gs-green-bg); }
.gs-callout svg { margin-top: 1px; }
.gs-callout b { display: block; margin-bottom: 2px; }
.gs-empty { padding: 34px 22px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.gs-empty svg.lucide { width: 26px; height: 26px; color: var(--gs-muted); }
.gs-empty p { color: var(--gs-muted); font-size: 13px; max-width: 52ch; }
.gs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); gap: 12px; margin-bottom: 16px; }
.gs-stat { background: var(--gs-paper); border: 1px solid var(--gs-border); border-radius: var(--gs-radius); padding: 15px; display: grid; gap: 3px; }
.gs-stat span { font-size: 11.5px; color: var(--gs-muted); }
.gs-stat strong { font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gs-stat[data-tone="red"] strong { color: var(--gs-red); }
.gs-stat[data-tone="amber"] strong { color: var(--gs-amber); }
.gs-stat[data-tone="good"] strong { color: var(--gs-green); }
.gs-stat button { justify-self: start; margin-top: 4px; }

/* ---------- pulsanti e controlli ---------- */
.gs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 13px; border-radius: var(--gs-radius-sm); border: 1px solid var(--gs-border); background: var(--gs-paper); color: var(--gs-text); cursor: pointer; font-size: 13px; white-space: nowrap; text-decoration: none; }
.gs-btn:hover { background: var(--gs-soft); }
.gs-btn[data-variant="primary"] { background: var(--gs-accent); border-color: transparent; color: var(--gs-on-accent); font-weight: 500; }
.gs-btn[data-variant="primary"]:hover { filter: brightness(1.06); background: var(--gs-accent); }
.gs-btn[data-variant="ghost"] { background: transparent; border-color: transparent; color: var(--gs-muted); }
.gs-btn[data-variant="ghost"]:hover { background: var(--gs-soft); color: var(--gs-text); }
.gs-btn[data-variant="danger"] { color: var(--gs-red); border-color: var(--gs-red-bg); background: var(--gs-red-bg); }
.gs-btn[data-variant="sm"], .gs-btn[data-size="sm"] { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.gs-btn[aria-pressed="true"] { border-color: var(--gs-accent); color: var(--gs-accent); background: var(--gs-tint); font-weight: 600; }
/* alias usati dalle viste */
.gs-btn-sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.gs-btn-sm svg.lucide { width: 14px; height: 14px; }
.gs-btn-primary { background: var(--gs-accent); border-color: transparent; color: var(--gs-on-accent); font-weight: 500; }
.gs-btn-primary:hover { background: var(--gs-accent); filter: brightness(1.06); }
.gs-btn:disabled { opacity: .45; cursor: not-allowed; }
.gs-link { border: 0; background: none; color: var(--gs-accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.gs-seg { display: inline-flex; border: 1px solid var(--gs-border); border-radius: var(--gs-radius-sm); overflow: hidden; background: var(--gs-paper); flex-wrap: wrap; }
.gs-seg button { border: 0; background: transparent; padding: 8px 13px; font-size: 12.5px; cursor: pointer; color: var(--gs-muted); min-height: 36px; }
.gs-seg button + button { border-left: 1px solid var(--gs-border); }
.gs-seg button[aria-pressed="true"] { background: var(--gs-tint); color: var(--gs-accent); font-weight: 600; }
.gs-tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--gs-border); padding: 0 var(--gs-panel-pad); overflow-x: auto; }
.gs-tabs button { border: 0; background: transparent; padding: 13px 12px; font-size: 13px; color: var(--gs-muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.gs-tabs button[aria-selected="true"] { color: var(--gs-accent); border-bottom-color: var(--gs-accent); font-weight: 600; }
.gs-tabs .gs-count { font-size: 11px; color: var(--gs-muted); }

/* align-content: start altrimenti la riga dell'etichetta si allarga e
   l'etichetta resta lontana dal suo campo quando una colonna e' piu' alta */
.gs-field { display: grid; gap: 5px; align-content: start; font-size: 12.5px; min-width: 0; }
.gs-field > span { font-weight: 500; }
.gs-field small { color: var(--gs-muted); font-size: 11.5px; line-height: 1.45; }
.gs-field :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) { font: inherit; color: inherit; background: var(--gs-paper); border: 1px solid var(--gs-border); border-radius: var(--gs-radius-sm); padding: 9px 10px; width: 100%; min-height: 38px; }
/* caselle di spunta e scelte rapide: dimensioni proprie */
.gs-field input[type="checkbox"], .gs-field input[type="radio"] { width: 16px; height: 16px; padding: 0; accent-color: var(--gs-accent); flex: none; }
.gs-field textarea { min-height: 78px; resize: vertical; line-height: 1.5; }
.gs-field input[readonly], .gs-field textarea[readonly] { background: var(--gs-soft); color: var(--gs-muted); }
.gs-field[data-invalid="true"] input, .gs-field[data-invalid="true"] select, .gs-field[data-invalid="true"] textarea { border-color: var(--gs-red); background: var(--gs-red-bg); }
.gs-field .gs-err { color: var(--gs-red); font-size: 11.5px; }
.gs-check { display: flex; gap: 9px; align-items: flex-start; font-size: 12.8px; line-height: 1.45; min-height: 30px; }
.gs-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--gs-accent); flex: none; }
.gs-chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.gs-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--gs-border); background: var(--gs-paper); border-radius: 999px; padding: 5px 11px; font-size: 12px; cursor: pointer; min-height: 32px;  color: var(--gs-text); }
.gs-chip[aria-pressed="true"] { background: var(--gs-tint); border-color: var(--gs-accent); color: var(--gs-accent); font-weight: 600; }
.gs-tool { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; padding: 12px var(--gs-panel-pad); border-bottom: 1px solid var(--gs-border); background: var(--gs-soft); }
.gs-error { color: var(--gs-red); font-size: 12.5px; }
.gs-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--gs-soft); color: var(--gs-muted); }
.gs-badge[data-tone="red"] { background: var(--gs-red-bg); color: var(--gs-red); }
.gs-badge[data-tone="amber"] { background: var(--gs-amber-bg); color: var(--gs-amber); }
.gs-badge[data-tone="blue"] { background: var(--gs-blue-bg); color: var(--gs-blue); }
.gs-badge[data-tone="good"] { background: var(--gs-green-bg); color: var(--gs-green); }
.gs-badge[data-tone="accent"] { background: var(--gs-tint); color: var(--gs-accent); }
.gs-badge[data-tone="purple"] { background: var(--gs-purple-bg); color: var(--gs-purple); }
.gs-tag { display: inline-flex; align-items: center; gap: 4px; border-radius: 5px; padding: 2px 7px; font-size: 11px; background: var(--gs-soft); color: var(--gs-muted); border: 1px solid var(--gs-border); }

/* ---------- tabelle ---------- */
.gs-tablewrap { width: 100%; overflow-x: auto; }
#gs-app table { width: 100%; border-collapse: collapse; font-size: 13px; }
#gs-app th { text-align: left; font-size: 11px; letter-spacing: .7px; text-transform: uppercase; color: var(--gs-muted); font-weight: 600; padding: 11px var(--gs-row-pad); border-bottom: 1px solid var(--gs-border); background: var(--gs-paper); position: sticky; top: 0; z-index: 2; }
#gs-app td { padding: var(--gs-row-pad); border-bottom: 1px solid var(--gs-border); vertical-align: top; }
#gs-app tbody tr:last-child td { border-bottom: 0; }
#gs-app tbody tr:hover { background: var(--gs-soft); }
#gs-app td b, #gs-app td strong { font-weight: 600; }
#gs-app td small { display: block; color: var(--gs-muted); font-size: 11.5px; margin-top: 2px; line-height: 1.45; }
#gs-app td .gs-row-actions, #gs-app th .gs-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.gs-paginate { display: flex; align-items: center; gap: 10px; padding: 12px var(--gs-panel-pad); border-top: 1px solid var(--gs-border); color: var(--gs-muted); font-size: 12px; flex-wrap: wrap; }

/* ---------- dialoghi ---------- */
#gs-modal { border: 0; padding: 0; background: transparent; max-width: min(940px, calc(100vw - 24px)); max-height: calc(100vh - 32px); width: 100%; }
#gs-modal::backdrop { background: rgba(18, 22, 25, .55); backdrop-filter: blur(2px); }
.gs-dialog { background: var(--gs-paper); color: var(--gs-text); border: 1px solid var(--gs-border); border-radius: var(--gs-radius); box-shadow: var(--gs-shadow-pop); display: grid; max-height: calc(100vh - 32px); }
.gs-dialog-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--gs-border); }
.gs-dialog-head p { color: var(--gs-muted); font-size: 12.5px; margin-top: 4px; }
.gs-dialog-body { padding: 18px 20px; overflow: auto; display: grid; gap: 14px; }
.gs-dialog-foot { display: flex; gap: 9px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--gs-border); flex-wrap: wrap; align-items: center; }
.gs-dialog-foot .gs-left { margin-right: auto; }
/* Il <form> e il pannello vero: se diventa display:contents spariscono fondo,
   bordo e ombra e i campi restano sospesi sulla pagina. */
#gs-modal > form.gs-dialog { width: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }

/* ---------- toast e drawer ---------- */
#gs-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px); z-index: 90; background: #23241f; color: #f6f3ea; border-radius: var(--gs-radius-sm); padding: 12px 15px; display: flex; gap: 12px; align-items: center; box-shadow: 0 18px 42px rgba(0, 0, 0, .35); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; max-width: min(620px, calc(100vw - 24px)); }
#gs-toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#gs-toast button { border: 1px solid rgba(255, 255, 255, .28); background: transparent; color: inherit; border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
#gs-toast[data-tone="bad"] { background: #6d2b25; }
#gs-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100vw); background: var(--gs-paper); color: var(--gs-text); border-left: 1px solid var(--gs-border); box-shadow: var(--gs-shadow-pop); z-index: 80; transform: translateX(102%); transition: transform .22s ease; display: flex; flex-direction: column; }
#gs-drawer[data-open="true"] { transform: none; }
#gs-drawer .gs-dialog-head, #gs-drawer .gs-dialog-body { border-color: var(--gs-border); }
#gs-drawer .gs-dialog-body { overflow: auto; }

/* ---------- stampa ---------- */
@media print {
  #gs-app .gs-side, #gs-app .gs-top, #gs-app .gs-foot, #gs-app .gs-pagehead .gs-actions, #gs-toast, #gs-drawer { display: none !important; }
  #gs-app { display: block; min-height: 0; background: #fff; }
  #gs-content { padding: 0; }
}