/* ============================================================================
   keyidentity-tenant-dashboard.css
   Shell + corpo della dashboard tenant — design "4a":
   rail di aree (96px) + colonna contestuale (244px) + foglio chiaro.

   Da mettere in KeyInteractiveTenantsSite/wwwroot/css/ e linkare in App.razor
   DOPO keyidentity-theme.css e keyidentity-tenant-home.css (riusa .ki-t-table,
   .ki-t-meter, .ki-t-badge e le variabili --ki-sheet* definite lì).
   ============================================================================ */

/* ---------- Griglia dello shell ---------- */
.ki-ts {
    display: grid;
    grid-template-columns: 96px 244px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--ki-bg);
    color: var(--ki-text);
}

/* Sulla Home/Dashboard .ki-ts__col non e' nel DOM (vedi KiTenantShell.razor): senza questo
   la traccia da 244px definita sopra resterebbe comunque riservata e vuota, schiacciando il
   contenuto principale in una griglia a 3 colonne con la 3a mai occupata. */
.ki-ts--collapsed { grid-template-columns: 96px minmax(0, 1fr); }

/* ---------- Rail delle aree ---------- */
.ki-ts__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.1rem .5rem;
    border-right: 1px solid var(--ki-border);
}

.ki-ts__orgmark {
    width: 30px;
    height: 30px;
    margin-bottom: .9rem;
    border-radius: 10px;
    background: var(--ki-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 800;
}

.ki-ts__railbtn {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .75rem .25rem;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--ki-text-muted);
    font-size: .6rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.ki-ts__railbtn:hover { color: var(--ki-text); }

.ki-ts__railbtn.is-active {
    background: rgba(44, 160, 255, .14);
    color: #7CC4FF;
}

.ki-ts__railspacer { flex: 1; }

.ki-ts__avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 600;
}

/* ---------- Colonna contestuale ---------- */
.ki-ts__col {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--ki-border);
    background: #1B1B1B;
}

.ki-ts__colhead {
    padding: 1.25rem 1.1rem .9rem;
    border-bottom: 1px solid var(--ki-border-soft);
}

.ki-ts__logo { display: block; margin-bottom: .9rem; }

.ki-ts__orgswitch {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .55rem .7rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: var(--ki-surface-soft-2);
}

.ki-ts__orgname {
    font-size: .78rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ki-ts__orgslug {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: .62rem;
    color: var(--ki-text-faint);
}

.ki-ts__search {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .6rem;
    padding: .55rem .7rem;
    border: 1px solid var(--ki-border);
    border-radius: 12px;
    color: var(--ki-text-faint);
    font-size: .75rem;
}

.ki-ts__search > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ki-ts__search kbd {
    flex: none;
    padding: .1rem .35rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .07);
    font-family: ui-monospace, Menlo, monospace;
    font-size: .62rem;
}

.ki-ts__nav {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 1.1rem .75rem;
}

.ki-ts__grp {
    padding: 0 .6rem .6rem;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ki-text-faint);
}

.ki-ts__navlink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem;
    border-radius: 11px;
    color: var(--ki-text-soft);
    font-size: .82rem;
    text-decoration: none;
}

a.ki-ts__navlink:hover { background: var(--ki-surface-soft); color: var(--ki-text); }

.ki-ts__navlink.is-active {
    background: rgba(44, 160, 255, .14);
    color: var(--ki-text);
    font-weight: 600;
}

.ki-ts__navlink.is-soon { color: var(--ki-text-faint); cursor: default; }

.ki-ts__count {
    font-family: ui-monospace, Menlo, monospace;
    font-size: .7rem;
    color: var(--ki-text-faint);
}

.ki-ts__soon,
.ki-td__soon {
    padding: .1rem .4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    font-size: .55rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ki-text-muted);
}

.ki-ts__hint {
    margin: 0;
    padding: .85rem 1rem;
    border-top: 1px solid var(--ki-border-soft);
    font-size: .68rem;
    line-height: 1.5;
    color: var(--ki-text-faint);
}

/* ---------- Colonna contenuto ---------- */
.ki-ts__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ki-ts__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    padding: 0 2rem;
    border-bottom: 1px solid var(--ki-border-soft);
}

.ki-ts__title {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.ki-ts__title h1 {
    margin: 0;
    font-size: 1.04rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.ki-t-badge--ok {
    padding: .25rem .55rem;
    border-radius: 999px;
    background: rgba(52, 211, 153, .12);
    color: var(--ki-success);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ki-ts__actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.ki-ts__usermenu { position: relative; }

.ki-ts__userbtn {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .65rem .35rem .4rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: transparent;
    color: var(--ki-text-soft);
    font-size: .78rem;
    cursor: pointer;
}

.ki-ts__userbtn:hover { background: var(--ki-surface-soft); }
.ki-ts__caret { font-size: .6rem; color: var(--ki-text-faint); }

.ki-ts__dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 50;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    padding: .3rem;
    border: 1px solid var(--ki-border);
    border-radius: 14px;
    background: var(--ki-surface);
    box-shadow: var(--ki-shadow);
}

.ki-ts__dropdown a,
.ki-ts__dropdown button {
    padding: .6rem .7rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ki-text-soft);
    font-size: .82rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ki-ts__dropdown a:hover,
.ki-ts__dropdown button:hover { background: var(--ki-surface-soft); color: var(--ki-text); }

/* ---------- Foglio chiaro del contenuto ---------- */
.ki-ts__sheet {
    flex: 1;
    padding: 1.9rem 2rem 2.5rem;
    background: var(--ki-sheet);
    color: var(--ki-sheet-ink);
}

/* Spaziatura verticale di base tra i blocchi diretti del foglio (head, kpi,
   card, grid...). Specificita' azzerata con :where() cosi' i margin-top piu'
   specifici gia' definiti altrove (es. .ki-td__kpis, .ki-td__activity) vincono
   sempre, indipendentemente dall'ordine nel file. */
:where(.ki-ts__sheet) > * + * {
    margin-top: 1rem;
}

/* .ki-field/.ki-input/.ki-select sono pensati per lo sfondo scuro delle pagine
   di auth (testo bianco su bordo quasi trasparente): dentro il foglio chiaro
   del tenant risultano illeggibili. Rimappati sulle variabili --ki-sheet*. */
.ki-ts__sheet .ki-field label { color: var(--ki-sheet-ink-soft); }

.ki-ts__sheet .ki-input,
.ki-ts__sheet input.ki-input,
.ki-ts__sheet .ki-select {
    background: var(--ki-sheet-card);
    border-color: var(--ki-sheet-border);
    color: var(--ki-sheet-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ki-ts__sheet .ki-input::placeholder,
.ki-ts__sheet .ki-select::placeholder {
    color: var(--ki-sheet-ink-muted);
}

.ki-ts__sheet .ki-select:hover {
    border-color: rgba(44, 160, 255, .4);
}

.ki-ts__sheet .ki-input:focus,
.ki-ts__sheet .ki-select:focus {
    border-color: rgba(44, 160, 255, .55);
    background: var(--ki-sheet-card);
    box-shadow: 0 0 0 3px rgba(44, 160, 255, .12);
}

.ki-ts__sheet .ki-select option {
    background: var(--ki-sheet-card);
    color: var(--ki-sheet-ink);
    padding: .5rem;
}

.ki-ts__sheet .ki-select option:disabled {
    color: var(--ki-sheet-ink-muted);
}

.ki-ts__sheet .ki-select option:checked {
    background: var(--ki-primary);
    color: #fff;
}

.ki-ts__sheet .ki-select-arrow {
    color: var(--ki-sheet-ink-muted);
}

.ki-ts__sheet .ki-select:hover ~ .ki-select-arrow,
.ki-ts__sheet .ki-select:focus ~ .ki-select-arrow {
    color: var(--ki-primary);
}

/* .ki-input-action (show/hide password) e' pensato per lo sfondo scuro delle pagine di auth,
   sul foglio chiaro serve lo stesso rimappo delle altre variabili --ki-sheet*. */
.ki-ts__sheet .ki-input-action {
    color: var(--ki-sheet-ink-muted);
}

.ki-ts__sheet .ki-input-action:hover {
    color: var(--ki-sheet-ink-soft);
}

/* .ki-strength (indicatore robustezza password, gia' usato in registrazione) sul foglio
   chiaro: le barre inattive e la label sono pensate per sfondo scuro, altrimenti quasi
   invisibili qui. I colori attivi (primary/danger/warning/success) restano invariati. */
.ki-ts__sheet .ki-strength__bar {
    background: rgba(23, 23, 23, .08);
}

.ki-ts__sheet .ki-strength__label {
    color: var(--ki-sheet-ink-muted);
}

/* ---------- Corpo dashboard ---------- */
.ki-td__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.ki-td__greet {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.ki-td__sub {
    margin: .45rem 0 0;
    font-size: .88rem;
    color: var(--ki-sheet-ink-soft);
}

.ki-td__headactions { display: flex; gap: .6rem; }

/* Selettore periodo condiviso (Utilizzo API): riga propria sotto l'header (non dentro
   .ki-td__head) cosi' quando compaiono gli input data custom non spostano mai il titolo -
   crescono/wrappano solo al proprio interno. Input data + bottone applica PRIMA del select
   (a sinistra, allineati con esso) quando il periodo custom e' selezionato. */
.ki-td__usageperiod {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: nowrap;
    margin-top: .75rem;
}

/* Max-width su tutti e 3 i controlli (select periodo + due date) cosi' restano allineati
   sulla stessa riga invece di stirarsi a riempire lo spazio disponibile. */
.ki-td__usageperiod .ki-select-wrapper { min-width: 10rem; max-width: 12rem; }

.ki-td__usageperiod-date {
    width: auto;
    max-width: 10rem;
    padding: .55rem .7rem;
}

@media (max-width: 720px) {
    .ki-td__usageperiod { flex-wrap: wrap; justify-content: flex-start; }
}

.ki-td__usageperiod-sep { color: var(--ki-sheet-ink-muted); }

.ki-btn--light {
    background: var(--ki-sheet-card);
    border-color: rgba(23, 23, 23, .14);
    color: var(--ki-sheet-ink);
}

.ki-btn--light:hover { border-color: rgba(23, 23, 23, .35); }
.ki-btn--small { padding: .5rem .85rem; font-size: .75rem; border-radius: 11px; }

/* auto-fit invece di un conteggio fisso di colonne: le pagine che riusano questa classe hanno
   un numero diverso di KPI (2 in Utilizzo API, 5 nella Dashboard) e con repeat(N,1fr) le card
   in meno di un pagine piu' strette lasciavano colonne vuote invece di riempire la riga. */
.ki-td__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .9rem;
    margin-top: 1.6rem;
}

.ki-td__kpi {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.2rem;
    border: 1px solid var(--ki-sheet-border);
    border-radius: 18px;
    background: var(--ki-sheet-card);
}

.ki-td__kpi.is-soon .ki-td__kpivalue { color: var(--ki-sheet-ink-muted); }

.ki-td__kpilabel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .75rem;
    color: var(--ki-sheet-ink-soft);
}

.ki-td__kpi.is-soon .ki-td__soon {
    background: rgba(23, 23, 23, .07);
    color: var(--ki-sheet-ink-soft);
}

.ki-td__kpivalue {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.ki-td__kpimeta {
    font-size: .72rem;
    color: var(--ki-sheet-ink-muted);
}

.ki-td__mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; }

.ki-t-badge--ok-ink {
    padding: .2rem .5rem;
    border-radius: 999px;
    background: rgba(15, 157, 110, .12);
    color: var(--ki-success-ink);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ki-t-badge--muted {
    padding: .2rem .5rem;
    border-radius: 999px;
    background: rgba(23, 23, 23, .07);
    color: var(--ki-sheet-ink-muted);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ki-t-badge--danger {
    padding: .2rem .5rem;
    border-radius: 999px;
    background: rgba(229, 72, 77, .12);
    color: #e5484d;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Picker "assegna a" inline dentro una cella di tabella (Pacchetti di utilizzo): select +
   bottone affiancati invece che impilati come nei form a tutta larghezza. */
.ki-td__inlinepicker {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ki-td__inlinepicker .ki-select-wrapper {
    min-width: 10rem;
}

.ki-td__grid {
    display: grid;
    grid-template-columns: 1.5fr .85fr;
    gap: 1rem;
    margin-top: 1rem;
}

.ki-td__card {
    border: 1px solid var(--ki-sheet-border);
    border-radius: 18px;
    background: var(--ki-sheet-card);
    overflow: hidden;
}

.ki-td__card--pad {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.ki-td__card h3,
.ki-td__cardhead h3 {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.ki-td__cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid rgba(23, 23, 23, .08);
}

.ki-td__cardhead a,
.ki-td__panelhead a {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ki-primary-ink);
    text-decoration: none;
}

.ki-td__card .ki-t-table {
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* Grafico andamento giornaliero: barre CSS con asse Y (chiamate) e asse X (giorni), nessuna
   libreria esterna. Colonne allineate 1:1 tra .ki-td__chart-bars e .ki-td__chart-xaxis cosi'
   che ogni barra abbia la sua etichetta data sotto (diradata da XAxisLabelStride). */
.ki-td__chart {
    display: flex;
    gap: .75rem;
    margin-top: 1rem;
}

.ki-td__chart-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 140px;
    flex-shrink: 0;
    font-size: .68rem;
    color: var(--ki-sheet-ink-muted);
    text-align: right;
}

.ki-td__chart-plot {
    flex: 1;
    min-width: 0;
    /* Barre a larghezza fissa (sotto): con pochi giorni il contenuto e' piu' stretto del
       riquadro e non deve "stirarsi" a riempirlo; con tanti giorni (es. trimestre) scrolla
       in orizzontale invece di schiacciare ogni barra. */
    overflow-x: auto;
}

.ki-td__chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 140px;
    padding: 0 2px;
    width: max-content;
    min-width: 100%;
    border-left: 1px solid var(--ki-sheet-border);
    border-bottom: 1px solid var(--ki-sheet-border);
}

.ki-td__chart-bar-col {
    flex: 0 0 22px;
    width: 22px;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.ki-td__chart-bar {
    width: 100%;
    min-height: 1px;
    background: var(--ki-primary);
    border-radius: 3px 3px 0 0;
}

.ki-td__chart-xaxis {
    display: flex;
    gap: 6px;
    padding: 0 2px;
    margin-top: .35rem;
    width: max-content;
    min-width: 100%;
}

.ki-td__chart-xaxis-col {
    flex: 0 0 22px;
    width: 22px;
    font-size: .62rem;
    color: var(--ki-sheet-ink-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.ki-td__chart-axislabel {
    margin: .5rem 0 0;
    font-size: .68rem;
    color: var(--ki-sheet-ink-muted);
    text-align: center;
}

/* Scroll interno per "Chiamate recenti": la card resta di altezza fissa e scrolla solo la
   tabella al suo interno, senza trascinare tutta la pagina. */
.ki-td__scrollbox {
    max-height: 420px;
    overflow-y: auto;
}

.ki-td__empty {
    margin: 0;
    padding: 1.25rem;
    font-size: .85rem;
    color: var(--ki-sheet-ink-soft);
}

.ki-td__side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ki-td__panelhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.ki-td__ok {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ki-success-ink);
}

.ki-td__code {
    padding: .65rem .8rem;
    border-radius: 12px;
    background: rgba(23, 23, 23, .04);
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: .78rem;
}

.ki-td__panelfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.ki-td__panelbig {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.ki-td__rows {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.ki-td__rows > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(23, 23, 23, .07);
    font-size: .8rem;
}

.ki-td__rows > div:last-child { border-bottom: 0; }
.ki-td__rows dt { color: var(--ki-sheet-ink-soft); }
.ki-td__rows dd { margin: 0; font-weight: 600; }

.ki-td__checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ki-td__checklist li {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(23, 23, 23, .07);
    font-size: .8rem;
}

.ki-td__checklist li:last-child { border-bottom: 0; }

.ki-td__checklist li::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(23, 23, 23, .22);
    border-radius: 50%;
}

.ki-td__activity { margin-top: 1rem; }

.ki-td__acts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
}

.ki-td__acts > div + div {
    padding-left: 1.1rem;
    border-left: 1px solid rgba(23, 23, 23, .08);
}

.ki-td__acts p {
    margin: 0;
    font-size: .8rem;
    line-height: 1.45;
}

.ki-td__acts span {
    display: block;
    margin-top: .4rem;
    font-size: .7rem;
    color: var(--ki-sheet-ink-muted);
}

/* ---------- Fatturazione: form carta (Stripe Elements) + sotto-griglia fatture ---------- */
.ki-td__cardform {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-width: 26rem;
}

/* Contenitore dell'iframe Stripe (Card Element): stile a imitazione di .ki-input cosi' il
   campo carta si integra visivamente col resto del form pur essendo montato via JS. */
.ki-td__cardelement {
    padding: .7rem .85rem;
    border: 1px solid var(--ki-sheet-border);
    border-radius: 10px;
    background: var(--ki-sheet-card);
}

.ki-td__cardform-actions { display: flex; gap: .5rem; }

.ki-td__expandtoggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    background: var(--ki-sheet-card);
    border: 1px solid var(--ki-sheet-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--ki-sheet-ink-soft);
    transition: background-color .15s, border-color .15s;
}

.ki-td__expandtoggle svg {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform .15s;
}

.ki-td__expandtoggle:hover {
    background: rgba(23, 23, 23, .05);
    border-color: rgba(23, 23, 23, .25);
}

.ki-td__expandtoggle--open svg { transform: rotate(90deg); }

.ki-td__rowactions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Banner informativo leggero riusabile su qualunque pagina ki-td__ (accento a sinistra,
   stesso trattamento gia' usato da .ki-docs__note ma con prefisso coerente col resto). */
.ki-td__note {
    background: var(--ki-primary-soft);
    border-left: 3px solid var(--ki-primary);
    border-radius: 0 8px 8px 0;
    padding: .7rem .9rem;
    margin: 0 0 1.1rem;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--ki-sheet-ink-soft);
}

.ki-td__note strong { color: var(--ki-sheet-ink); }

/* Riquadro bordato per un checkbox seguito dalla sua spiegazione (es. "Richiede profilo
   completo"): evidenzia l'opzione invece di lasciarla come una riga anonima nel form. */
.ki-td__checkbox-box {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .8rem .9rem;
    border: 1px solid var(--ki-sheet-border);
    border-radius: 10px;
    margin: 0 0 1rem;
}

.ki-td__checkbox-box .ki-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--ki-sheet-ink);
}

.ki-td__hint {
    margin: 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--ki-sheet-ink-muted);
}

.ki-td__invoicerow > td { padding: 0; }

/* Tonalita' distinta dal resto della tabella cosi' la sotto-griglia fatture si riconosce
   subito come pannello annidato invece di sembrare altre righe della stessa tabella. */
.ki-td__invoicepanel {
    padding: 1rem 1.25rem 1.25rem;
    background: var(--ki-primary-soft, rgba(37, 99, 235, .06));
    border-left: 3px solid var(--ki-primary);
    border-bottom: 1px solid rgba(23, 23, 23, .08);
}

.ki-td__invoicepanel .ki-t-table {
    background: var(--ki-sheet-card);
    border: 1px solid var(--ki-sheet-border);
    border-radius: 10px;
    overflow: hidden;
}

.ki-td__invoicefilters {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}

.ki-td__invoicefilters .ki-input,
.ki-td__invoicefilters .ki-select { width: auto; }

.ki-td__invoicepaging {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .75rem;
}

/* ---------- Responsive ---------- */
/* ---------- KiConfirmDialog: message box di conferma condiviso ---------- */
.ki-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(23, 23, 23, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 110;
    padding: 1rem;
}

.ki-confirm-box {
    width: 100%;
    max-width: 26rem;
    background: var(--ki-sheet-card);
    border: 1px solid var(--ki-sheet-border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 24px 48px rgba(23, 23, 23, .25);
}

.ki-confirm-title {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ki-sheet-ink);
}

.ki-confirm-message {
    margin: 0;
    font-size: .9rem;
    color: var(--ki-sheet-ink-soft);
    line-height: 1.5;
}

.ki-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.5rem;
}

@media (max-width: 1280px) {
    .ki-td__kpis { grid-template-columns: repeat(2, 1fr); }
    .ki-td__grid { grid-template-columns: 1fr; }
    .ki-td__acts { grid-template-columns: repeat(2, 1fr); }
    .ki-td__acts > div:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 900px) {
    /* Sotto i 900px il rail resta, la colonna contestuale passa sopra il contenuto */
    .ki-ts { grid-template-columns: 96px minmax(0, 1fr); }
    .ki-ts__col { grid-column: 2; border-right: 0; border-bottom: 1px solid var(--ki-border); }
    .ki-ts__main { grid-column: 2; }
    .ki-td__kpis { grid-template-columns: 1fr; }
    .ki-td__acts { grid-template-columns: 1fr; }
    .ki-td__acts > div + div { padding-left: 0; border-left: 0; }
}

/* ============================================================================
   Pagina "Documentazione API" (TenantApiDocsCore.razor) — prefisso ki-docs__
   per non entrare in conflitto con ki-td__/ki-t- esistenti. Le tabelle riusano
   .ki-t-table (già definita in keyidentity-tenant-home.css).
   ============================================================================ */

.ki-docs__tabs {
    display: flex;
    gap: .4rem;
    border-bottom: 1px solid var(--ki-sheet-border);
    margin-bottom: 1.25rem;
}

.ki-docs__tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: .7rem .9rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ki-sheet-ink-soft);
    cursor: pointer;
}

.ki-docs__tab:hover { color: var(--ki-sheet-ink); }

.ki-docs__tab--active {
    color: var(--ki-sheet-ink);
    border-bottom-color: var(--ki-primary);
}

.ki-docs__card {
    border: 1px solid var(--ki-sheet-border);
    border-radius: 18px;
    background: var(--ki-sheet-card);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.ki-docs__card h3 {
    margin: 0 0 .6rem;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.ki-docs__card h4 {
    margin: 1.1rem 0 .4rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ki-sheet-ink-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ki-docs__card p {
    margin: 0 0 .9rem;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--ki-sheet-ink-soft);
}

.ki-docs__method-title {
    margin: 3rem 0 .8rem;
    padding: .3rem 0 .3rem .8rem;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ki-sheet-ink);
    border-left: 4px solid var(--ki-primary);
}

.ki-docs__card > .ki-docs__method-title:first-of-type {
    margin-top: .5rem;
}

/* Firma del metodo colorata come la evidenzierebbe Visual Studio (tema chiaro):
   tipi in teal, parole chiave in blu, nome del metodo in ambra. */
.ki-docs__sig {
    font-family: "SF Mono", ui-monospace, Consolas, monospace;
    font-size: .84rem;
    background: #fbfbfa;
    border: 1px solid var(--ki-sheet-border);
    border-radius: 8px;
    padding: .7rem .9rem;
    margin: 0 0 1rem;
    overflow-x: auto;
    white-space: pre;
    color: #1e1e1e;
}

.ki-docs__tok-kw { color: #0000ff; }
.ki-docs__tok-type { color: #2b91af; }
.ki-docs__tok-method { color: #795e26; font-weight: 600; }
.ki-docs__tok-param { color: #1e1e1e; }

.ki-docs__hint {
    font-size: .8rem;
    font-style: italic;
    color: var(--ki-sheet-ink-muted);
    margin: .4rem 0 1rem;
}

.ki-docs__example-label {
    margin: .9rem 0 .3rem;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ki-sheet-ink-muted);
}

.ki-docs__pre {
    background: var(--ki-sheet-ink);
    color: #f2f2f2;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin: .6rem 0 1.4rem;
    overflow-x: auto;
}

.ki-docs__code {
    font-family: "SF Mono", ui-monospace, Consolas, monospace;
    font-size: .8rem;
    line-height: 1.6;
    white-space: pre;
}

.ki-docs__note {
    background: var(--ki-primary-soft);
    border-left: 3px solid var(--ki-primary);
    border-radius: 0 8px 8px 0;
    padding: .7rem .9rem;
    margin: .6rem 0;
    font-size: .84rem;
    color: var(--ki-sheet-ink-soft);
}

.ki-docs__note a { color: var(--ki-primary-ink); font-weight: 600; }

.ki-docs__lang-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .75rem 0 1rem;
}

.ki-docs__lang-tab {
    appearance: none;
    border: 1px solid var(--ki-sheet-border);
    border-radius: 999px;
    background: var(--ki-sheet);
    padding: .3rem .8rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ki-sheet-ink-soft);
    cursor: pointer;
}

.ki-docs__lang-tab:hover {
    color: var(--ki-sheet-ink);
    border-color: var(--ki-primary);
}

.ki-docs__lang-tab--active {
    background: var(--ki-primary);
    border-color: var(--ki-primary);
    color: #fff;
}

.ki-docs__actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

/* Tabella "Campi della risposta" dopo ogni esempio di metodo. */
.ki-docs__fields {
    width: 100%;
    border-collapse: collapse;
    margin: .4rem 0 1.8rem;
    font-size: .82rem;
}

.ki-docs__fields th {
    text-align: left;
    padding: .5rem .7rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ki-sheet-ink-muted);
    border-bottom: 1px solid var(--ki-sheet-border);
}

.ki-docs__fields td {
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--ki-sheet-border);
    color: var(--ki-sheet-ink-soft);
    vertical-align: top;
    line-height: 1.5;
}

.ki-docs__fields tr:last-child td {
    border-bottom: none;
}

.ki-docs__fields code {
    font-family: "SF Mono", ui-monospace, Consolas, monospace;
    font-size: .78rem;
    color: var(--ki-sheet-ink);
}

.ki-docs__fields-type {
    font-family: "SF Mono", ui-monospace, Consolas, monospace;
    font-size: .78rem;
    color: #2b91af;
    white-space: nowrap;
}