/* Clienti e fatturazione (pacchetto B): console del creatore. Usa i token della piattaforma (chiaro e scuro). */
#tab-console-clienti { display: grid; gap: 1.1rem; align-content: start; grid-auto-rows: max-content; }
#tab-console-clienti > * { min-width: 0; }
#tab-console-clienti.hidden { display: none; }
.cc-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.cc-alert { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--radius-sm);
  background: var(--t-amber); color: var(--t-amber-ink); font-size: var(--fs-base); line-height: 1.45; }
.cc-alert svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; margin-top: .1rem; }
.cc-alert button { margin-left: auto; flex: none; }
.cc-alert ul { margin: .25rem 0 0; padding-left: 1.1rem; }

/* numeri in alto */
.cc-kpis { display: grid; grid-template-columns: repeat(var(--cc-n, 5), minmax(0, 1fr)); gap: .8rem; }
.cc-kpi { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .95rem 1.05rem 1rem; box-shadow: var(--shadow); display: grid; gap: .2rem; min-width: 0; text-align: left; color: var(--ink);
  justify-content: stretch; justify-items: start; align-content: start; }
button.cc-kpi { cursor: pointer; font: inherit; }
button.cc-kpi:hover { box-shadow: var(--shadow-lift); }
.cc-kpi::after { content: ""; position: absolute; right: -2.2rem; top: -2.2rem; width: 6rem; height: 6rem; border-radius: 50%;
  background: color-mix(in srgb, var(--cc-c, var(--accent)) 10%, transparent); }
.cc-kpi .l { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.cc-kpi .v { font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 500; letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cc-kpi .s { font-size: var(--fs-sm); color: var(--muted); }
.cc-kpi.warn { --cc-c: var(--warn); } .cc-kpi.bad { --cc-c: var(--danger); } .cc-kpi.ok { --cc-c: var(--ok); }
.cc-kpi.bad .v { color: var(--danger); }

/* schede interne */
.cc-tabs { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.cc-tabs::-webkit-scrollbar { display: none; }
.cc-tabs button { border: 0; background: transparent; border-radius: var(--radius) var(--radius) 0 0; padding: .55rem .9rem; min-height: 2.6rem;
  color: var(--muted); font-weight: 500; white-space: nowrap; position: relative; display: inline-flex; gap: .4rem; align-items: center; }
.cc-tabs button:hover { color: var(--ink); background: var(--surface-2); }
.cc-tabs button.on { color: var(--accent); }
.cc-tabs button.on::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 2px; border-radius: var(--radius); background: var(--accent); }
.cc-tabs .n { font-size: var(--fs-2xs); min-width: 1.3rem; padding: .02rem .38rem; border-radius: var(--radius); background: var(--surface-3); color: var(--ink-2); }
.cc-tabs .n.bad { background: var(--danger); color: #fff; }

/* barre e tabelle */
.cc-bar { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.cc-bar input[type=search] { flex: 1 1 14rem; min-width: 0; }
.cc-bar select { width: auto; flex: 0 1 11rem; }
.cc-bar .grow { flex: 1; }
.cc-panel { display: grid; gap: .85rem; }
.cc-table td { vertical-align: middle; }
.cc-table tbody tr[data-open] { cursor: pointer; }
.cc-table tbody tr[data-open]:hover td { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.cc-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.cc-sub { display: block; font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.cc-code { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
.cc-acts { display: flex; gap: .35rem; justify-content: flex-end; flex-wrap: wrap; }
.cc-acts button { white-space: nowrap; }
.cc-empty { padding: 2.2rem 1rem; text-align: center; color: var(--muted); display: grid; gap: .5rem; justify-items: center; }
.cc-empty svg { width: var(--ic-2xl); height: var(--ic-2xl); color: var(--accent); opacity: .7; }

/* etichette di stato */
.cc-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-xs); font-weight: 600; padding: .14rem .55rem; border-radius: var(--radius);
  white-space: nowrap; background: var(--surface-3); color: var(--ink-2); }
.cc-chip::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; opacity: .85; }
.cc-chip.plain::before { display: none; }
.cc-chip.ok { background: var(--t-green); color: var(--t-green-ink); }
.cc-chip.warn { background: var(--t-amber); color: var(--t-amber-ink); }
.cc-chip.bad { background: var(--t-red); color: var(--t-red-ink); }
.cc-chip.info { background: var(--t-blue); color: var(--t-blue-ink); }
.cc-chip.lav { background: var(--t-lav); color: var(--t-lav-ink); }
.cc-chip.off { background: var(--surface-3); color: var(--muted); }

/* catalogo */
/* il catalogo è un elenco sul foglio (regola del capo): niente schede con fondo, bordo e ombra, solo la riga sottile */
.cc-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 1.6rem; }
.cc-product { border-top: 1px solid var(--line); padding: .95rem 0 1.05rem; display: grid; gap: .45rem; align-content: start; }
.cc-product.off { opacity: .62; }
.cc-product h4 { margin: 0; font-size: var(--fs-md); line-height: 1.3; }
.cc-product .price { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 500; letter-spacing: -.02em; }
.cc-product .price.tbd { font-size: var(--fs-md); color: var(--warn); font-family: var(--font); font-weight: 600; }
.cc-product p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.cc-product .row { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.cc-product .row button { margin-left: auto; }
.cc-h3 { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.cc-h3 h3 { font-size: var(--fs-lg); margin: 0; }

/* finestre (scheda cliente, moduli) */
.cc-sheet .sheet-card { width: min(48rem, 100%); }
.cc-sheet.wide .sheet-card { width: min(68rem, 100%); }
.cc-sheet.small .sheet-card { width: min(30rem, 100%); }
.cc-sheet .sheet-head { align-items: flex-start; }
.cc-sheet .sheet-head h3 { overflow-wrap: anywhere; }
.cc-sheet .sheet-head .cc-sub { margin-top: .2rem; }
.cc-sheet .sheet-foot { justify-content: flex-end; }
.cc-sheet .sheet-foot .grow { flex: 1; }
.cc-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem .8rem; }
.cc-form .f { display: grid; gap: .3rem; grid-column: span 6; min-width: 0; }
.cc-form .f.h { grid-column: span 3; } .cc-form .f.t { grid-column: span 2; } .cc-form .f.q { grid-column: span 4; }
.cc-form .f label { font-size: var(--fs-sm); }
.cc-form .f .err { font-size: var(--fs-xs); color: var(--danger); }
.cc-form .f.bad input, .cc-form .f.bad select, .cc-form .f.bad textarea { border-color: var(--danger); }
.cc-form .sep { grid-column: span 6; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); padding-top: .55rem; margin-top: .2rem;
  border-top: 1px solid var(--line); display: flex; gap: .5rem; align-items: center; }
.cc-form .sep:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.cc-form .hint { grid-column: span 6; font-size: var(--fs-sm); color: var(--muted); margin: -.2rem 0 0; }
.cc-form textarea { min-height: 5rem; }
.cc-form label.check { grid-column: span 6; }
.cc-secret { display: flex; gap: .4rem; align-items: center; }
.cc-secret input { flex: 1; min-width: 0; }

/* scheda cliente */
.cc-detail { display: grid; gap: 1rem; }
.cc-dhead { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.cc-journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.cc-journey div { padding: .6rem .7rem; font-size: var(--fs-xs); color: var(--muted); display: grid; gap: .1rem; position: relative; background: var(--surface-2); }
.cc-journey div + div { border-left: 1px solid var(--line); }
.cc-journey div b { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
.cc-journey div.done { background: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
.cc-journey div.done b { color: var(--ok); }
.cc-journey div.now { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.cc-journey div.now b { color: var(--accent); }
.cc-journey div.err b { color: var(--danger); }
.cc-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .55rem 1.2rem; margin: 0; }
.cc-dl div { min-width: 0; }
.cc-dl dt { font-size: var(--fs-2xs); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.cc-dl dd { margin: .1rem 0 0; overflow-wrap: anywhere; }
.cc-dtabs { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; }
.cc-dtabs::-webkit-scrollbar { display: none; }
.cc-dtabs button { min-height: 2.1rem; padding: .3rem .75rem; border-radius: var(--radius); font-size: var(--fs-sm); white-space: nowrap; background: var(--surface-2); border-color: transparent; }
.cc-dtabs button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.cc-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cc-events li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-base); }
.cc-events li:last-child { border-bottom: 0; }
.cc-events time { color: var(--muted); font-size: var(--fs-sm); }
.cc-events b { font-weight: 600; }
.cc-events span { display: block; color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.cc-quick { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ticket */
.cc-thread { display: grid; gap: .6rem; }
.cc-msg { max-width: 85%; padding: .6rem .8rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-md); white-space: pre-wrap; overflow-wrap: anywhere; }
.cc-msg.staff, .cc-msg.agent { justify-self: end; background: var(--accent-soft); border-color: transparent; }
.cc-msg.internal { background: var(--t-amber); color: var(--t-amber-ink); border-color: transparent; justify-self: end; }
.cc-msg.system { justify-self: center; background: transparent; border-style: dashed; font-size: var(--fs-sm); color: var(--muted); }
.cc-msg .who { display: block; font-size: var(--fs-2xs); color: var(--muted); margin-bottom: .15rem; }
.cc-reply { display: grid; gap: .5rem; }
.cc-reply textarea { min-height: 5rem; }

@media (max-width: 1100px) { .cc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .cc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .cc-kpi { padding: .8rem .85rem; }
  .cc-kpi .v { font-size: var(--fs-2xl); }
  .cc-bar select { flex: 1 1 8rem; }
  .cc-form .f.h, .cc-form .f.t, .cc-form .f.q { grid-column: span 6; }
  .cc-form .f.t.pair { grid-column: span 3; }
  .cc-journey div { padding: .5rem .5rem; font-size: var(--fs-2xs); }
  .cc-journey div b { font-size: var(--fs-xs); }
  .cc-kpi:last-child:nth-child(odd) { grid-column: span 2; }
  .cc-bar input[type=search] { flex-basis: 100%; }
  .cc-form .f.m4 { grid-column: span 4; } .cc-form .f.m2 { grid-column: span 2; }
  .cc-events li { grid-template-columns: 1fr; gap: .1rem; }
  /* tabelle → schede impilate sul telefono */
  .cc-table thead { display: none; }
  .cc-table, .cc-table tbody, .cc-table tr, .cc-table td { display: block; width: 100%; }
  .cc-table tr { padding: .75rem .9rem; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: .3rem .6rem; }
  .cc-table tr:last-child { border-bottom: 0; }
  .cc-table td { padding: 0; border: 0; }
  .cc-table td.m-full { grid-column: 1 / -1; }
  .cc-table td.m-hide { display: none; }
  .cc-table td.num { text-align: right; }
  .cc-table td[data-l]::before { content: attr(data-l) " "; color: var(--muted); font-size: var(--fs-xs); }
  .cc-acts { justify-content: flex-start; }
  .cc-sheet .sheet-foot button { flex: 1 1 auto; }
  .cc-msg { max-width: 95%; }
}
@media (max-width: 860px) { .cc-sheet { padding: 0; place-items: end stretch; }
  .cc-sheet .sheet-card, .cc-sheet.wide .sheet-card, .cc-sheet.small .sheet-card { width: 100%; max-height: 94dvh; border-radius: var(--radius) var(--radius) 0 0; } }

/* canone di manutenzione e uscite in loco (chi non paga si vede subito, in rosso) */
.cc-alert.bad { background: var(--t-red); color: var(--t-red-ink); }
.cc-alert > div { display: grid; gap: .15rem; min-width: 0; }
.cc-maint { display: grid; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cc-maint .cc-events li { grid-template-columns: 6.5rem 1fr; }

/* il canone di manutenzione per piano (Abbonamenti e piani): sulla pagina, una riga sottile tra un piano e l'altro,
   niente riquadri; caselle e pulsanti della stessa riga alla stessa altezza (polish.css) */
.cc-fees { display: grid; gap: .55rem; }
.cc-fees-lead { margin: -.2rem 0 0; max-width: 62rem; }
.cc-fee-grid { display: grid; gap: 0; }
.cc-fee-row { display: grid; grid-template-columns: minmax(12rem, 1.5fr) minmax(10rem, 1fr) minmax(8rem, .8fr) minmax(9rem, .9fr) minmax(10rem, 1fr);
  gap: .55rem .8rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--line); }
.cc-fee-row.head { padding: 0 0 .35rem; border-top: 0; font-size: var(--fs-2xs); letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; }
.cc-fee-row.all .cc-fee-name { grid-column: span 2; }
.cc-fee-row.all .cc-fee-name b { color: var(--accent); }
.cc-fee-row.off .cc-fee-cell:not(.mode) { opacity: .45; }
.cc-fee-name { display: grid; gap: .15rem; min-width: 0; }
.cc-fee-name b { font-weight: 600; overflow-wrap: anywhere; }
.cc-fee-name .cc-sub { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.cc-fee-cell { display: grid; gap: .2rem; min-width: 0; margin: 0; }
.cc-fee-cell input, .cc-fee-cell select { width: 100%; min-width: 0; box-sizing: border-box; }
/* «Come tutti i piani» e «Nessun canone»: i valori si vedono, spenti (si scrivono solo con «Importo proprio») */
.cc-fee-cell :is(input, select):disabled { background: var(--surface-2); color: var(--muted); border-color: var(--line) !important;
  box-shadow: none; opacity: 1; cursor: default; -webkit-text-fill-color: var(--muted); }
.cc-fee-cell .l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cc-fee-cell .err { font-size: var(--fs-xs); color: var(--danger); }
.cc-fee-cell .err:empty { display: none; }
.cc-fee-cell.bad input, .cc-fee-cell.bad select { border-color: var(--danger); }
.cc-fee-foot { display: flex; gap: .8rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding-top: .8rem; border-top: 1px solid var(--line); }
.cc-fee-foot .meta { margin: 0; flex: 1 1 18rem; }
.cc-fee-foot button { flex: none; }
.cc-maint-chips { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.cc-maint-src { margin: -.35rem 0 0; }
@media (max-width: 860px) {
  .cc-fee-row.head { display: none; }
  .cc-fee-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem .6rem; padding: .85rem 0; }
  .cc-fee-row .cc-fee-name, .cc-fee-row.all .cc-fee-name { grid-column: 1 / -1; }
  .cc-fee-row.all .method { grid-column: 1 / -1; }
  .cc-fee-cell .l { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    font-size: var(--fs-xs); color: var(--muted); }
  .cc-fee-foot button { flex: 1 1 100%; }
}