/* ============================================================================
   components.css: pezzi riusabili in ogni vista (bottoni, form, filtri, etichette,
   pannelli, tabelle, liste, schede, barre, avvisi, stati vuoti).
   Solo token. Testo mai sotto --fs-0, niente maiuscolo spaziato, niente monospace.
   Transizioni solo su transform e opacity.
   ============================================================================ */

/* ── bottoni ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--fb); font-weight: 600; font-size: var(--fs-0); line-height: 1.2;
  min-height: var(--hit); padding: var(--s2) var(--s4); border-radius: var(--r);
  border: 1px solid var(--cable); background: var(--amp-2); color: var(--ink);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn svg { width: 16px; height: 16px; }
.btn.go { background: var(--cue); border-color: var(--cue); color: var(--cue-ink); }
.btn.success { background: var(--ok); border-color: var(--ok); color: var(--stage); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--amp-2); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
/* stelle di valutazione: piene solo fino al voto dato (.on) */
.btn.star { color: var(--ink-soft); }
.btn.star.on { color: var(--cue); }
.btn.sm { min-height: 36px; padding: var(--s1) var(--s3); }
.btn.block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }
.iconbtn { width: var(--hit); height: var(--hit); min-height: var(--hit); padding: 0; }
.iconbtn-xs {
  width: 36px; height: 36px; min-height: 36px; padding: 0; display: inline-grid; place-items: center;
  border-radius: var(--r); border: 1px solid var(--cable); background: var(--amp); color: var(--ink-soft); cursor: pointer;
}
.iconbtn-xs:hover { color: var(--ink); background: var(--amp-2); }
.iconbtn-xs svg { width: 14px; height: 14px; }

/* ── form ────────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: var(--s5); max-width: 760px; }
.form-section { border: 1px solid var(--cable); border-radius: var(--r); background: var(--amp); overflow: hidden; }
.form-section > h3 { font-size: var(--fs-1); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--cable); }
.form-body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s5); }
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 680px) {
  .form-row.two { grid-template-columns: 1fr 1fr; }
  .form-row.three { grid-template-columns: 1fr 1fr 1fr; }
}
.field-group { display: flex; flex-direction: column; gap: var(--s2); }
.field-group > label { font-size: var(--fs-0); font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: var(--s2); }
.field-group .req { color: var(--cue); }
.field-group .hint { font-size: var(--fs-0); color: var(--ink-soft); }

.input, .textarea, .select-el {
  width: 100%; min-height: var(--hit); border: 1px solid var(--cable); background: var(--amp-2); color: var(--ink);
  border-radius: var(--r); padding: var(--s2) var(--s3); font-size: var(--fs-0);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-soft); }
/* Autocompilazione: Firefox e Chrome impongono il loro sfondo con !important (oliva sul tema scuro).
   Non si sovrascrive, ma un'ombra interna del colore del campo ci dipinge sopra; resta un bordo d'accento. */
.input:is(:autofill, :-webkit-autofill), .textarea:is(:autofill, :-webkit-autofill) {
  box-shadow: inset 0 0 0 100vmax var(--amp-2); -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  border-color: color-mix(in srgb, var(--cue) 50%, var(--cable));
}
.input:focus, .textarea:focus, .select-el:focus { border-color: var(--cue); outline: none; }
.textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
/* editor testo/accordi: larghezza fissa perché gli accordi si allineano con gli spazi */
.textarea.code { font-family: var(--fm); font-size: var(--fs-0); }
/* freccia del select disegnata con due triangoli: niente immagine, niente colore letterale */
.select-el {
  appearance: none; padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.input-affix { display: flex; align-items: center; border: 1px solid var(--cable); background: var(--amp-2); border-radius: var(--r); overflow: hidden; }
.input-affix .pre {
  padding: 0 var(--s3); color: var(--ink-soft); font-size: var(--fs-0); background: var(--amp);
  align-self: stretch; display: flex; align-items: center; border-right: 1px solid var(--cable);
}
.input-affix .input { border: none; background: transparent; }
.checkline {
  display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3); min-height: var(--hit);
  border: 1px solid var(--cable); border-radius: var(--r); background: var(--amp-2); cursor: pointer;
}
.checkline input { margin-top: 2px; width: 20px; height: 20px; accent-color: var(--cue); flex: none; }
.checkline .t { font-size: var(--fs-0); font-weight: 600; }
.checkline .t small { display: block; font-size: var(--fs-0); font-weight: 400; color: var(--ink-soft); margin-top: 2px; }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s2); }
.form-actions { display: flex; gap: var(--s2); flex-wrap: wrap; padding-top: var(--s1); }

/* ── barra filtri e chip ─────────────────────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.toolbar .spacer { flex: 1; }
.toolbar .select-el { width: auto; min-width: 150px; }
.toolbar .field.search-field { min-width: 200px; max-width: 360px; }
.chip {
  font-size: var(--fs-0); font-weight: 600; color: var(--ink-soft); border: 1px solid var(--cable); background: var(--amp);
  border-radius: var(--r); padding: var(--s1) var(--s3); min-height: var(--hit);
  display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; text-decoration: none;
}
.chip:hover { color: var(--ink); }
.chip.on { background: color-mix(in srgb, var(--cue) 16%, var(--amp)); border-color: var(--cue); color: var(--ink); }
.chip .ct { font-size: var(--fs-0); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.field {
  display: flex; align-items: center; gap: var(--s2); min-height: var(--hit); border: 1px solid var(--cable);
  background: var(--amp); border-radius: var(--r); padding: 0 var(--s3); color: var(--ink); font-size: var(--fs-0);
  cursor: pointer; white-space: nowrap;
}
.field svg { width: 16px; height: 16px; color: var(--ink-soft); }
.field.search-field { flex: 1; min-width: 160px; background: var(--amp-2); color: var(--ink-soft); cursor: text; }
.field.search-field input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--ink); font-size: var(--fs-0); outline: none; }
.field.search-field input::placeholder { color: var(--ink-soft); }
.segmented { display: inline-flex; border: 1px solid var(--cable); border-radius: var(--r); padding: 0; background: var(--amp-2); }
.segmented b, .segmented a, .segmented span {
  font-size: var(--fs-0); font-weight: 600; color: var(--ink-soft); padding: 0 var(--s3); border-radius: var(--r);
  min-height: var(--hit); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s2);
}
.segmented a:hover { color: var(--ink); }
.segmented b.on, .segmented a.on, .segmented span.on { background: var(--amp); color: var(--ink); cursor: default; }
.segmented svg { width: 14px; height: 14px; }
.count { font-size: var(--fs-0); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* select/input in una riga flessibile (es. registrazione veloce): non a tutta larghezza */
.row > .select-el { width: auto; flex: 1 1 150px; }
.row > .input { width: auto; flex: 1 1 130px; }

/* ── etichette di stato ──────────────────────────────────────────────────── */
.tag, .pill, .cat-chip, .lbl {
  display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--fs-0); font-weight: 600; line-height: 1.25;
  padding: 2px var(--s2); border-radius: var(--r); white-space: nowrap;
}
.tag { background: var(--amp-2); color: var(--ink-soft); }
.tag.ready { background: color-mix(in srgb, var(--ok) 10%, var(--amp)); color: var(--ok); }
.tag.todo { background: color-mix(in srgb, var(--warn) 10%, var(--amp)); color: var(--warn); }
.tag.missing { background: color-mix(in srgb, var(--danger) 10%, var(--amp)); color: var(--danger); }
.tag.new, .tag.purple { background: color-mix(in srgb, var(--cue) 10%, var(--amp)); color: var(--cue); }
.tag.draft { background: var(--amp-2); color: var(--ink-soft); }
.lbl { color: var(--ink); background: var(--amp-2); border: 1px solid var(--cable); }
.pill.ok { background: color-mix(in srgb, var(--ok) 10%, var(--amp)); color: var(--ok); }
.pill.no { background: color-mix(in srgb, var(--danger) 10%, var(--amp)); color: var(--danger); }
.pill.wait { background: var(--amp-2); color: var(--ink-soft); }
.dot-st { width: 8px; height: 8px; border-radius: var(--r); display: inline-block; flex: none; }
.dot-st.on { background: var(--ok); }
.dot-st.off { background: var(--ink-soft); }
.dot-st.wait { background: var(--warn); }
/* colore categoria: --c arriva da data-c via app.js (dato utente) */
.dot { width: 10px; height: 10px; border-radius: var(--r); background: var(--c, var(--ink-soft)); display: inline-block; flex: none; }
.cat-chip { color: var(--ink); background: color-mix(in srgb, var(--c, var(--ink-soft)) 18%, var(--amp)); }
/* colore categoria come quadratino davanti al testo, non come bordo */
.cat-chip::before, .tbl .tr[data-c] .tname::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c, var(--ink-soft)); flex: none; }
.tbl .tr[data-c] .tname::before { margin-right: var(--s1); }

/* ── pannelli, schede, KPI ───────────────────────────────────────────────── */
.panel, .card, .kpi, .tbl, .list { border: 1px solid var(--cable); border-radius: var(--r); background: var(--amp); overflow: hidden; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--cable); }
.panel-h h3 { font-size: var(--fs-2); }
.panel-h a { font-size: var(--fs-0); color: var(--cue); font-weight: 600; display: inline-flex; align-items: center; gap: var(--s1); text-decoration: none; }
.panel-h a svg { width: 14px; height: 14px; }
.panel-b { padding: var(--s4); }
.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { border-color: var(--ink-soft); }

.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (min-width: 760px) { .kpis.four { grid-template-columns: repeat(4, 1fr); } }
.kpi { padding: var(--s4); position: relative; }
.kpi.amber { border-color: var(--cue); }
.kpi .l { font-size: var(--fs-0); font-weight: 600; color: var(--ink-soft); margin-bottom: var(--s2); }
.kpi .v { font-family: var(--fh); font-weight: var(--fh-weight); font-stretch: var(--fh-stretch); font-size: var(--fs-3); line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .v small { font-family: var(--fb); font-size: var(--fs-0); color: var(--ink-soft); font-weight: 600; }
.kpi .v[data-small] { font-family: var(--fb); font-size: var(--fs-1); font-weight: 600; font-stretch: normal; }
.kpi .x { font-size: var(--fs-0); color: var(--ink-soft); margin-top: var(--s2); }
.kpi .ic { position: absolute; top: var(--s3); right: var(--s3); color: var(--ink-soft); }
.kpi .ic svg { width: 18px; height: 18px; }

/* ── tabelle: griglia ≥760px, schede impilate sotto (ogni .td ha data-h) ──── */
.tbl .thead { display: none; }
.tbl .tr {
  display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--cable);
  align-items: center; text-decoration: none; color: inherit;
}
.tbl .tr:last-child { border-bottom: none; }
.tbl a.tr:hover, .tbl .tr.hoverable:hover { background: var(--amp-2); }
.tbl .td { min-width: 0; }
.tbl .td[data-h]::before { content: attr(data-h); display: block; font-size: var(--fs-0); color: var(--ink-soft); margin-bottom: 2px; }
.tbl .tname { font-weight: 600; font-size: var(--fs-0); }
.tbl .tsub { font-size: var(--fs-0); color: var(--ink-soft); margin-top: 2px; font-variant-numeric: tabular-nums; }
.tbl .t-tags { display: flex; gap: var(--s1); flex-wrap: wrap; }
.tbl .t-art { color: var(--ink-soft); font-size: var(--fs-0); }
.tr.unread .tname { font-weight: 800; }
.dotnew { display: inline-block; width: 8px; height: 8px; border-radius: var(--r); background: var(--cue); margin-right: var(--s2); vertical-align: middle; }
@media (min-width: 760px) {
  .tbl .thead {
    display: grid; gap: var(--s2); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--cable);
    background: var(--amp-2); font-size: var(--fs-0); font-weight: 600; color: var(--ink-soft);
  }
  .tbl .td[data-h]::before { display: none; }
}

/* righe semplici */
.list-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); min-height: var(--hit); border-bottom: 1px solid var(--cable); text-decoration: none; color: inherit; }
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--amp-2); }
.list-row .ic { width: 36px; height: 36px; border-radius: var(--r); background: var(--amp-2); display: grid; place-items: center; color: var(--ink-soft); flex: none; }
.list-row .ic svg { width: 17px; height: 17px; }
.list-row .nm { flex: 1; min-width: 0; }
.list-row .nm b { font-weight: 600; font-size: var(--fs-0); display: block; }
.list-row .nm small { font-size: var(--fs-0); color: var(--ink-soft); }
.list-row .ar { color: var(--ink-soft); }
.list-row .ar svg { width: 15px; height: 15px; }
.list-add { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); color: var(--ink-soft); font-size: var(--fs-0); font-weight: 600; cursor: pointer; border-top: 1px solid var(--cable); }
.list-add:hover { color: var(--ink); background: var(--amp-2); }
.list-add svg { width: 15px; height: 15px; }

/* ── schede (app.js: .tab[href="#id"] + .tabpanel, .is-active, body.js) ──── */
.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--cable); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-weight: 600; font-size: var(--fs-0); color: var(--ink-soft); padding: var(--s3) var(--s4); min-height: var(--hit);
  cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s2);
}
.tab:hover { color: var(--ink); }
.tab.on, .tabs .tab.is-active { color: var(--ink); border-bottom-color: var(--cue); }
.tab .ct { font-size: var(--fs-0); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tabpanel { padding-top: var(--s5); }
/* senza JS tutti i pannelli restano visibili */
body.js .tabpanel { display: none; }
body.js .tabpanel.is-active { display: block; }

/* ── barre (report, senza librerie: larghezza da data-* via app.js) ──────── */
.bars { display: flex; flex-direction: column; gap: var(--s2); }
.bar { display: flex; align-items: center; gap: var(--s3); }
.bar .bl { font-size: var(--fs-0); font-weight: 600; min-width: 90px; flex: none; }
.bar .track { flex: 1; height: 10px; border-radius: var(--r); background: var(--cable); overflow: hidden; }
.bar .track i { display: block; height: 100%; border-radius: var(--r); background: var(--cue); }
.bar .track i.amber { background: var(--warn); }
.bar .track i.green { background: var(--ok); }
.bar .bv { font-size: var(--fs-0); color: var(--ink-soft); min-width: 64px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.progress { height: 8px; border-radius: var(--r); background: var(--cable); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--ok); }

/* importi */
.money { font-weight: 700; font-variant-numeric: tabular-nums; }
.money-pos { color: var(--ok); }
.money-neg { color: var(--danger); }

/* ── avvisi e stati vuoti ────────────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r);
  font-size: var(--fs-0); color: var(--ink); border: 1px solid var(--cable); background: var(--amp);
}
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.alert.success { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--amp)); }
.alert.success svg { color: var(--ok); }
.alert.error { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--amp)); }
.alert.error svg { color: var(--danger); }
.alert.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--amp)); }
.alert.warn svg { color: var(--warn); }
.alert.info { border-color: var(--cue); background: color-mix(in srgb, var(--cue) 10%, var(--amp)); }
.alert.info svg { color: var(--cue); }
.invite-box { flex: 1; min-width: 0; }
.invite-box .input { flex: 1 1 14rem; min-width: 0; }
.empty { text-align: center; padding: var(--s7) var(--s5); border: 1px dashed var(--cable); border-radius: var(--r); background: var(--amp); }
.empty .ic { width: 56px; height: 56px; border-radius: var(--r); background: var(--amp-2); display: grid; place-items: center; margin: 0 auto var(--s3); color: var(--ink-soft); }
.empty .ic svg { width: 25px; height: 25px; }
.empty h4 { font-size: var(--fs-2); margin-bottom: var(--s2); }
.empty p { font-size: var(--fs-0); color: var(--ink-soft); max-width: 360px; margin: 0 auto var(--s4); }

/* ── dettagli: coppie chiave/valore, testi lunghi ────────────────────────── */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s4); margin: 0; font-size: var(--fs-0); }
.kv dt { color: var(--ink-soft); font-weight: 600; align-self: center; }
.kv dd { margin: 0; }
.lyrics, .code-block { white-space: pre-wrap; font-size: var(--fs-0); line-height: 1.7; margin: 0; color: var(--ink); }
.chords { color: var(--cue); }
/* accordi in testo semplice (sopra le parole, allineati con gli spazi): stack mono di sistema, system.md */
pre.lyrics.chords { font-family: var(--fm); white-space: pre; overflow-x: auto; }

@media print {
  .panel, .tbl, .card, .kpi, .list { border-color: var(--paper-line); background: var(--paper); color: var(--paper-ink); }
}

/* ── foglio Crea (<dialog>, nav.js): dal basso sotto 900px, al centro da 900px ── */
.create-sheet {
  padding: 0; border: 1px solid var(--cable); border-radius: var(--r) var(--r) 0 0; background: var(--amp); color: var(--ink);
  width: 100%; max-width: 100%; margin: auto 0 0; max-height: 85dvh; box-shadow: var(--lift);
  transform: translateY(100%); transition: transform var(--dur) var(--ease);
}
.create-sheet.is-open { transform: none; }
.create-sheet::backdrop { background: var(--shade); opacity: 0; transition: opacity var(--dur) var(--ease); }
.create-sheet.is-open::backdrop { opacity: 1; }
.sheet-in { padding: var(--s2) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); }
.sheet-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; }
.sheet-h h2 { font-size: var(--fs-2); }
.sheet-list > li + li { border-top: 1px solid var(--cable); }
.sheet-i {
  display: flex; align-items: center; gap: var(--s3); min-height: var(--hit); padding: var(--s2) var(--s1);
  border-radius: var(--r); color: var(--ink); font-weight: 600; text-decoration: none;
}
.sheet-i:hover { background: var(--amp-2); }
.sheet-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r); background: var(--amp-2); color: var(--cue); }
.sheet-ico svg { width: 18px; height: 18px; }
@media (min-width: 900px) {
  .create-sheet {
    width: min(440px, calc(100vw - 2 * var(--s6))); margin: auto; border-radius: var(--r); max-height: 80vh;
    opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .create-sheet.is-open { opacity: 1; transform: none; }
  .sheet-in { padding: var(--s3) var(--s5) var(--s5); }
}
@media (prefers-reduced-motion: reduce) {
  .create-sheet, .create-sheet.is-open { transform: none; }
}

/* ── dialog di conferma (<dialog>, confirm.js): sempre al centro, stessa entrata del foglio Crea ── */
.confirm-dialog {
  padding: 0; border: 1px solid var(--cable); border-radius: var(--r); background: var(--amp); color: var(--ink);
  width: min(420px, calc(100vw - 2 * var(--s4))); max-height: 85dvh; margin: auto; box-shadow: var(--lift);
  opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.confirm-dialog.is-open { opacity: 1; transform: none; }
.confirm-dialog::backdrop { background: var(--shade); opacity: 0; transition: opacity var(--dur) var(--ease); }
.confirm-dialog.is-open::backdrop { opacity: 1; }
.confirm-in { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s5); }
.confirm-text { font-size: var(--fs-1); line-height: 1.4; overflow-wrap: anywhere; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s3); }
.confirm-actions .btn { flex: 1 1 140px; white-space: normal; }
@media (prefers-reduced-motion: reduce) {
  .confirm-dialog, .confirm-dialog::backdrop { transition: none; transform: none; }
}