/* ============================================================================
   keyidentity-tenant-home.css
   Home del sito TENANT — design "2b": chrome scuro + foglio chiaro.
   Da mettere in KeyInteractiveTenantsSite/wwwroot/css/ e linkare in App.razor
   DOPO keyidentity-theme.css (usa i suoi token e le sue classi .ki-*).
   ============================================================================ */

:root {
    /* superficie chiara del "foglio": unico colore nuovo introdotto */
    --ki-sheet: #F6F5F2;
    --ki-sheet-card: #ffffff;
    --ki-sheet-ink: #171717;
    --ki-sheet-ink-soft: rgba(23, 23, 23, .55);
    --ki-sheet-ink-muted: rgba(23, 23, 23, .45);
    --ki-sheet-border: rgba(23, 23, 23, .09);
    --ki-primary-ink: #0A6DB8; /* blu leggibile su chiaro */
    --ki-success-ink: #0F9D6E;
}

/* ---------- Hero centrata ---------- */
.ki-t-hero {
    position: relative;
    padding: 5.5rem 0 0;
    background: radial-gradient(760px 380px at 50% 0%, rgba(44, 160, 255, .16), transparent 72%);
}

.ki-t-hero__inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ki-t-hero__title {
    margin: 1.4rem 0 0;
    max-width: 22ch;
    font-size: clamp(2.4rem, 4.4vw, 3.75rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.035em;
    text-wrap: pretty;
}

.ki-t-hero__copy {
    margin: 1.25rem auto 0;
    max-width: 40rem;
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--ki-text-soft);
}

.ki-t-hero__actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1.9rem;
}

/* ---------- Foglio chiaro (anteprima console) ---------- */
.ki-t-sheet-wrap {
    padding: 3.5rem 0 4rem;
}

.ki-t-sheet {
    border-radius: var(--ki-radius);
    background: var(--ki-sheet);
    color: var(--ki-sheet-ink);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
    overflow: hidden;
}

.ki-t-sheet__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--ki-sheet-border);
}

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

.ki-t-avatar {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: var(--ki-sheet-ink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
}

.ki-t-sheet__orgname {
    font-size: .88rem;
    font-weight: 600;
}

.ki-t-badge {
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ki-t-badge--info {
    background: rgba(44, 160, 255, .12);
    color: var(--ki-primary-ink);
}

.ki-t-sheet__note {
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ki-sheet-ink-muted);
}

.ki-t-sheet__body {
    display: grid;
    grid-template-columns: 1.35fr .95fr;
}

.ki-t-sheet__main {
    padding: 1.6rem;
    border-right: 1px solid var(--ki-sheet-border);
}

.ki-t-sheet__side {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    background: rgba(23, 23, 23, .02);
}

/* stat cards */
.ki-t-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}

.ki-t-stat {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1rem;
    border: 1px solid rgba(23, 23, 23, .1);
    border-radius: var(--ki-radius-sm);
    background: var(--ki-sheet-card);
}

.ki-t-stat--accent {
    border-color: rgba(44, 160, 255, .3);
    background: rgba(44, 160, 255, .07);
}

.ki-t-stat__label {
    font-size: .72rem;
    color: var(--ki-sheet-ink-soft);
}

.ki-t-stat--accent .ki-t-stat__label,
.ki-t-stat--accent .ki-t-stat__value {
    color: var(--ki-primary-ink);
}

.ki-t-stat__value {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* tabella utenti finali */
.ki-t-table {
    width: 100%;
    margin-top: 1rem;
    border: 1px solid rgba(23, 23, 23, .1);
    border-radius: var(--ki-radius-sm);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ki-sheet-card);
    overflow: hidden;
}

.ki-t-table th {
    padding: .7rem 1rem;
    background: rgba(23, 23, 23, .035);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ki-sheet-ink-muted);
    text-align: left;
}

.ki-t-table td {
    padding: .85rem 1rem;
    border-top: 1px solid rgba(23, 23, 23, .07);
    font-size: .82rem;
}

.ki-t-table__muted { color: var(--ki-sheet-ink-soft); }
.ki-t-table__ok { color: var(--ki-success-ink); }

/* pannelli laterali */
.ki-t-panel {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.1rem;
    border: 1px solid rgba(23, 23, 23, .1);
    border-radius: var(--ki-radius-sm);
    background: var(--ki-sheet-card);
}

.ki-t-panel--dashed {
    border-style: dashed;
    border-color: rgba(23, 23, 23, .2);
    background: transparent;
}

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

.ki-t-panel__title {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ki-sheet-ink-soft);
}

.ki-t-panel__ok {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ki-success-ink);
}

.ki-t-panel__big {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.ki-t-panel__meta,
.ki-t-panel__step {
    font-size: .72rem;
    color: var(--ki-sheet-ink-muted);
}

.ki-t-panel__step {
    font-weight: 600;
    color: var(--ki-sheet-ink);
}

.ki-t-code {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: .78rem;
    color: var(--ki-sheet-ink);
}

.ki-t-meter {
    height: 6px;
    border-radius: 999px;
    background: rgba(23, 23, 23, .08);
    overflow: hidden;
}

.ki-t-meter > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ki-primary);
}

.ki-t-steps {
    display: flex;
    gap: .35rem;
}

.ki-t-steps > span {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: rgba(23, 23, 23, .12);
}

.ki-t-steps > span.is-done { background: var(--ki-primary); }

/* bottone scuro su foglio chiaro */
.ki-btn--dark {
    background: var(--ki-sheet-ink);
    color: #fff;
}

.ki-btn--dark:hover { background: #000; }

/* ---------- Feature cards (torna sul fondo scuro) ---------- */
.ki-t-features {
    padding: 0 0 4.5rem;
}

.ki-t-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.ki-t-feature {
    padding: 1.6rem;
    border: 1px solid var(--ki-border);
    border-radius: var(--ki-radius);
    background: var(--ki-surface-soft);
}

.ki-t-feature h3 {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.ki-t-feature p {
    margin: .6rem 0 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--ki-text-soft);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .ki-t-sheet__body { grid-template-columns: 1fr; }
    .ki-t-sheet__main { border-right: 0; border-bottom: 1px solid var(--ki-sheet-border); }
    .ki-t-features__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .ki-t-stats { grid-template-columns: 1fr; }
    .ki-t-table th:nth-child(3),
    .ki-t-table td:nth-child(3) { display: none; }
}