/*
 * Components - Antenore Energia visual identity (V-04 / V-14)
 *
 * Cards, buttons, forms, tables, badges, alerts, pagination, KPIs and the
 * dashboard metric tiles. Every value is sourced from tokens.css; keeping
 * this file hex-free is enforced by the V-16 token sweep.
 */

/* ===================================================================== *
 * Cards
 * ===================================================================== */

.card {
    background-color: var(--bg-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    padding: var(--space-5) var(--space-6);
    /* `overflow: hidden` was clipping wide tables and the focus ring; the
     * border-radius is now preserved by `clip` (which still allows scroll
     * containers inside the card to overflow as needed). */
    overflow: clip;
    width: 100%;
    transition: transform var(--duration-fast) var(--easing-default),
                box-shadow var(--duration-medium) var(--easing-default);
}

.card + .card { margin-top: var(--space-5); }
.card > * + * { margin-top: var(--space-3); }
.card > :first-child { margin-top: 0; }
.card > h1, .card > h2, .card > h3 { margin-top: 0; margin-bottom: var(--space-3); }
.card > h2 + * { margin-top: 0; }
.card-pad > :first-child { margin-top: 0; }
.card-pad > :last-child { margin-bottom: 0; }

.card:focus-within { box-shadow: var(--shadow-2), var(--shadow-focus); }

/* `card-flush` lets a card host a full-bleed element (typically a wide
 * data table) without inheriting the lateral padding that would otherwise
 * eat ~80px of horizontal real estate. Header/footer of the card can be
 * wrapped in `.card-pad` to restore breathing room. */
.card.card-flush { padding: 0; }
.card.card-flush > .card-pad { padding: var(--space-5) var(--space-7); }
.card.card-flush > .card-pad + .table-responsive { margin-top: 0; }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.dashboard-ops-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .dashboard-kpi-grid { grid-template-columns: 1fr; }
    .dashboard-ops-grid { grid-template-columns: 1fr; }
}

/* ===================================================================== *
 * Attribute list (customer detail, custom fields detail)
 *
 * Semantic <dl> with each <dt>/<dd> pair wrapped in a <div class="attr">
 * (valid in HTML5 dl since 2014). The whole list is laid out as a
 * responsive CSS grid so labels and values line up on desktop and stack
 * cleanly on mobile.
 * ===================================================================== */

.attr-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
}

.attr-list .attr {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-accent);
    min-width: 0;
}

.attr-list .attr dt {
    font-size: var(--font-size-label);
    line-height: var(--line-height-label);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--fg-muted);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.attr-list .attr dd {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--fg-default);
    font-weight: var(--font-weight-medium);
    margin: 0;
    overflow-wrap: anywhere;
}

.attr-list .attr dd.mono,
.attr-list .attr dd .mono {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-regular);
}

.attr-list .attr dd a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--border-subtle);
    transition: border-color var(--duration-fast) var(--easing-default);
}

.attr-list .attr dd a:hover,
.attr-list .attr dd a:focus-visible {
    border-bottom-color: var(--border-focus);
}

.attr-list .attr .attr-key {
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    letter-spacing: 0;
    text-transform: none;
    color: var(--fg-muted);
    background-color: var(--bg-muted);
    padding: 0 var(--space-1);
    font-weight: var(--font-weight-regular);
}

.attr-list .attr.attr-archived {
    border-left-color: var(--accent-slate);
    background-color: var(--bg-muted);
}

.attr-list .attr.attr-archived dd {
    color: var(--fg-muted);
}

@media (max-width: 600px) {
    .attr-list { grid-template-columns: 1fr; }
}

/* ===================================================================== *
 * Integration cards (custom-fields detail page)
 *
 * Each remote platform (Brevo, future HubSpot, ...) is rendered as a
 * bordered panel whose left edge colour maps to the sync status, giving
 * operators an at-a-glance read. Panels reuse `.attr-list` for the inner
 * facts grid so there is a single source of truth for key/value tiles.
 * ===================================================================== */

.integration-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.integration {
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--border-subtle);
    padding: var(--space-4) var(--space-5);
    background-color: var(--bg-default);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.integration--synced   { border-left-color: var(--color-state-success); }
.integration--pending  { border-left-color: var(--accent-slate); }
.integration--error    { border-left-color: var(--color-state-error); }
.integration--conflict { border-left-color: var(--accent-gold); }

.integration-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.integration-title {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.integration-title h3 {
    margin: 0;
    font-family: var(--font-display);
}

.integration-facts {
    /* Tighter than the customer detail grid because each integration
     * panel is itself nested inside a card. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.integration .alert {
    margin: 0;
}

/* Two/three column layout for compact breakdown cards in statistics.
 * Tighter `minmax(280px, 1fr)` + `.card` inner padding reduction keep
 * the three stats blocks on one row at ≥1280px while staying readable
 * when they collapse to two columns on tablet-portrait. */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

/* ---------- KPI / metric tile ---------- */

.metric .label,
.kpi-label {
    color: var(--fg-muted);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    line-height: var(--line-height-label);
    display: block;
}

.metric .value,
.kpi-value {
    font-family: var(--font-body);
    /* Shrink KPI numerals so 5 tiles fit on a 1440px row without the
     * values dwarfing their labels. The clamp keeps them readable on
     * mobile (22px min) while capping the upper bound at 30px so the
     * 34,550 / 65,931 counters no longer overflow the tile. */
    font-size: clamp(22px, calc(16px + 0.6vw), 30px);
    font-weight: var(--font-weight-bold);
    color: var(--fg-default);
    margin-top: var(--space-1);
    display: block;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.metric .hint {
    color: var(--fg-muted);
    font-size: var(--font-size-caption);
    margin-top: var(--space-1);
}

.metric .value a { color: inherit; }
.metric .value a:hover { color: var(--accent-primary); }

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}

.kpi {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    background-color: var(--bg-default);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
}

/* When kpi tiles already live inside a `.card` shell (e.g. import detail
 * KPI strip), strip the inner chrome so the row reads as one unified band
 * instead of nested boxes. */
.card.kpi-grid > .kpi,
.card .kpi-grid > .kpi {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.kpi-value.error { color: var(--color-state-danger); }

/* ===================================================================== *
 * Buttons
 * ===================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-7);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background-color: var(--fg-default);
    color: var(--fg-on-accent);
    font-family: var(--font-body);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-button);
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color var(--duration-medium) var(--easing-default),
                border-color var(--duration-medium) var(--easing-default),
                transform var(--duration-fast) var(--easing-default);
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        90deg,
        var(--accent-eco-start) 0%,
        var(--accent-eco-end) 100%
    );
    transform: translateX(-101%);
    transition: transform var(--duration-medium) var(--easing-smooth);
}

.btn:hover::before { transform: translateX(0); }

.btn:hover {
    color: var(--fg-on-accent);
    text-decoration: none;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.btn:active { transform: scale(0.98); }

.btn[disabled],
.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary / secondary / danger variants -------- */

.btn.btn-primary,
.btn-primary {
    background-color: var(--accent-primary);
    color: var(--fg-on-accent);
}

.btn.secondary,
.btn.btn-secondary,
.btn-secondary {
    background-color: transparent;
    color: var(--fg-default);
    border-color: currentColor;
}

.btn.secondary::before,
.btn.btn-secondary::before,
.btn-secondary::before {
    background: transparent;
}

.btn.secondary:hover,
.btn.btn-secondary:hover,
.btn-secondary:hover {
    color: var(--accent-primary);
    box-shadow: var(--shadow-1);
}

.btn.danger,
.btn.btn-danger,
.btn-danger {
    background-color: var(--color-state-danger);
    color: var(--fg-on-accent);
}

.btn.small {
    padding: var(--space-1) var(--space-4);
    font-size: var(--font-size-label);
}

/* ===================================================================== *
 * Forms
 * ===================================================================== */

form.inline,
.form-inline {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    flex-wrap: wrap;
}

/* Per-utility start_date inline editor (S-046): the utilities table
 * carries one <form> per row so operators can fix each fornitura's
 * activation date independently. We want the control to read "one
 * compound field" rather than three separate inputs — hence the
 * `flex` layout, the pill save button and the reason input collapsing
 * to a half-width on narrow viewports. `min-width: 0` on the text
 * input is needed because flex children default to their content's
 * min-width, which would push the cell past the column boundary. */
.utility-start-date-cell {
    min-width: 280px;
    vertical-align: middle;
}

.utility-start-date-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: 0;
}

.utility-start-date-form input[type="date"] {
    flex: 0 0 auto;
}

.utility-start-date-form input[type="text"] {
    flex: 1 1 140px;
    min-width: 0;
}

.utility-start-date-form .btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-caption);
    letter-spacing: var(--letter-spacing-button);
    text-transform: uppercase;
}

/* The customer-list toolbar mixes a wide search box, three dropdowns and
 * two action buttons. CSS grid with `auto-fit` wasn't a good fit here
 * because the action buttons must hug the right edge while the filters
 * fill the remaining space; flex with tuned `flex-basis` gives the same
 * effect, wraps cleanly on narrower shells, and aligns every control on
 * a shared baseline. */
.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    align-items: flex-end;
    width: 100%;
}

.filter-form > * { margin: 0; }

.filter-form input[type="search"] {
    flex: 1 1 320px;
    min-width: 0;
}

.filter-form select {
    flex: 1 1 180px;
    min-width: 0;
}

.filter-form .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    align-self: flex-end;
}

@media (max-width: 720px) {
    .filter-form input[type="search"] { flex-basis: 100%; }
    .filter-form select { flex-basis: calc(50% - var(--space-2)); }
    .filter-form .btn { flex: 1 1 auto; }
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
    /* `align-items: end` creates dead space above shorter fields when the
     * row mixes an `<input type="file">` (with chrome) and a bottom-border
     * `<select>` — stretching keeps every column top-anchored to its label. */
    align-items: stretch;
}

.form-grid .form-field { justify-content: flex-start; }
.form-grid .form-field input[type="file"] { padding: var(--space-2) 0; }

.form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--space-3);
}

form label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: var(--space-1);
}

form input[type="text"],
form input[type="search"],
form input[type="email"],
form input[type="password"],
form input[type="date"],
form input[type="number"],
form input[type="file"],
form select,
form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-1) var(--space-1);
    margin-top: var(--space-1);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    color: var(--fg-default);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-default);
    border-radius: 0;
    transition: border-color var(--duration-medium) var(--easing-default);
}

form input:focus,
form select:focus,
form textarea:focus {
    outline: none;
    border-bottom-color: var(--border-focus);
    box-shadow: 0 1px 0 0 var(--border-focus);
}

form input:focus-visible,
form select:focus-visible,
form textarea:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

form input[aria-invalid="true"],
form select[aria-invalid="true"],
form textarea[aria-invalid="true"] {
    border-bottom-color: var(--color-state-error);
    box-shadow: 0 1px 0 0 var(--color-state-error);
}

form .field-error {
    color: var(--color-state-error);
    font-size: var(--font-size-caption);
    margin-top: var(--space-1);
}

form input::placeholder {
    color: var(--fg-muted);
    font-size: var(--font-size-label);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
}

form .full { flex: 1; min-width: 240px; }

/* ===================================================================== *
 * Tables
 *
 * Tables live inside cards that sit inside a 1480px-max-width main shell.
 * On wide datasets (customer list, utilities, import rows) we still need
 * a horizontal scroll fallback so dense rows never get clipped — that is
 * the role of `.table-responsive`. Always wrap `<table class="data">` in
 * a `.table-responsive` div.
 * ===================================================================== */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Subtle scrollbar styling so the affordance is visible but not loud */
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
    /* Reserve a stable scrollbar lane on browsers that support it,
     * preventing layout shift when the table grows past one screen. */
    scrollbar-gutter: stable;
}

.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-thumb {
    background-color: var(--border-default);
    border-radius: var(--radius-pill);
}

table.data {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-default);
    font-size: var(--font-size-body);
    table-layout: auto;
}

/* When the data table is the sole child of a non-flush card, the inherited
 * border-radius/box-shadow of the card already provides the frame; don't
 * double up with a second border on the table itself. */
.card .table-responsive > table.data { border: 0; }

table.data th,
table.data td {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

table.data th:first-child,
table.data td:first-child { padding-inline-start: var(--space-5); }

table.data th:last-child,
table.data td:last-child { padding-inline-end: var(--space-5); }

table.data th {
    background-color: var(--bg-muted);
    color: var(--fg-muted);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-label);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

table.data td.right,
table.data th.right { text-align: end; font-variant-numeric: tabular-nums; }

table.data td.nowrap,
table.data th.nowrap { white-space: nowrap; }

table.data tbody tr:nth-child(even) { background-color: var(--bg-subtle); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background-color: var(--bg-muted); }

/* Row-level alert highlighting for list pages. Used by the custom-fields
 * list to draw operators' eyes toward entries that are in a sync error
 * or conflict state (S-039). Uses a left-border accent instead of a
 * full background wash to avoid clashing with the zebra striping. */
table.data tbody tr.row-error td:first-child {
    box-shadow: inset 3px 0 0 var(--color-state-error);
}
table.data tbody tr.row-conflict td:first-child {
    box-shadow: inset 3px 0 0 var(--accent-gold);
}

/* Compact density variant for very wide reference tables (statistics
 * breakdowns, audit trail) — keeps everything scannable at a glance. */
table.data.data-compact th,
table.data.data-compact td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-caption);
}

/* ===================================================================== *
 * Badges
 *
 * Templates use two conventions: ".badge.<status>" (dashboard) and
 * ".badge.badge-<status>" (customers/syncs/imports). Both are supported.
 * ===================================================================== */

.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.2;
    background-color: var(--bg-muted);
    color: var(--fg-muted);
}

/* Customer types */
.badge.gas,
.badge.badge-gas { background-color: var(--color-neutral-200); color: var(--color-accent-orange); border-color: var(--color-accent-orange); }
.badge.luce,
.badge.badge-luce { background-color: var(--color-neutral-200); color: var(--color-red-700); border-color: var(--color-red-700); }
.badge.gas_e_luce,
.badge.badge-gas_e_luce { background-color: var(--color-neutral-200); color: var(--accent-eco-end); border-color: var(--accent-eco-end); }
.badge.cessato,
.badge.badge-cessato { background-color: var(--bg-muted); color: var(--fg-muted); border-color: var(--border-subtle); }

/* Import / sync status */
.badge.pending,
.badge.badge-pending { background-color: var(--bg-muted); color: var(--fg-muted); }
.badge.synced,
.badge.badge-synced { background-color: var(--color-neutral-200); color: var(--color-state-success); border-color: var(--color-state-success); }
.badge.conflict,
.badge.badge-conflict { background-color: var(--color-neutral-200); color: var(--accent-gold); border-color: var(--accent-gold); }
.badge.processing,
.badge.badge-processing { background-color: var(--color-neutral-200); color: var(--accent-gold); border-color: var(--accent-gold); }
.badge.completed,
.badge.badge-completed,
.badge.success,
.badge.badge-success { background-color: var(--color-neutral-200); color: var(--color-state-success); border-color: var(--color-state-success); }
.badge.failed,
.badge.badge-failed,
.badge.error,
.badge.badge-error { background-color: var(--color-neutral-200); color: var(--color-state-error); border-color: var(--color-state-error); }
.badge.running,
.badge.badge-running { background-color: var(--color-neutral-200); color: var(--color-navy-900); border-color: var(--color-navy-900); }

/* Utility lifecycle */
.badge.active,
.badge.badge-active { background-color: var(--color-neutral-200); color: var(--color-state-success); border-color: var(--color-state-success); }
.badge.ceased,
.badge.badge-ceased { background-color: var(--bg-muted); color: var(--fg-muted); border-color: var(--border-subtle); }
.badge.transferred,
.badge.badge-transferred { background-color: var(--color-neutral-200); color: var(--accent-gold); border-color: var(--accent-gold); }

/* Row actions */
.badge.create,
.badge.badge-create { background-color: var(--color-neutral-200); color: var(--color-state-success); border-color: var(--color-state-success); }
.badge.update,
.badge.badge-update { background-color: var(--color-neutral-200); color: var(--color-navy-900); border-color: var(--color-navy-900); }
.badge.skip,
.badge.badge-skip { background-color: var(--bg-muted); color: var(--fg-muted); }

.badge.badge-queued { background-color: var(--bg-muted); color: var(--fg-muted); border-color: var(--border-subtle); }
.badge.badge-cancelling { background-color: var(--color-neutral-200); color: var(--accent-gold); border-color: var(--accent-gold); }
.badge.badge-cancelled { background-color: var(--bg-muted); color: var(--fg-muted); border-color: var(--border-subtle); }

/* ===================================================================== *
 * Alerts
 * ===================================================================== */

.alert {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-5);
    font-size: var(--font-size-body);
    border-left: 4px solid var(--border-subtle);
    background-color: var(--bg-subtle);
    color: var(--fg-default);
}

.alert strong { font-weight: var(--font-weight-bold); }

.alert.error,
.alert.alert-error {
    background-color: var(--color-neutral-200);
    color: var(--color-state-error);
    border-left-color: var(--color-state-error);
}

.alert.success,
.alert.alert-success {
    background-color: var(--color-neutral-200);
    color: var(--color-state-success);
    border-left-color: var(--color-state-success);
}

.alert.info,
.alert.alert-info {
    background-color: var(--color-neutral-200);
    color: var(--color-state-info);
    border-left-color: var(--color-state-info);
}

.alert.warning,
.alert.alert-warning {
    background-color: var(--color-neutral-200);
    color: var(--accent-gold);
    border-left-color: var(--accent-gold);
}

/* ===================================================================== *
 * Pagination / pager
 * ===================================================================== */

.pager,
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
    margin-top: var(--space-5);
}

.pager a,
.pager span,
.pagination a,
.pagination strong {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    color: var(--fg-default);
    background-color: var(--bg-default);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.pagination strong {
    background-color: var(--fg-default);
    color: var(--fg-on-accent);
    border-color: var(--fg-default);
}

.pager a:hover,
.pagination a:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    text-decoration: none;
}

.pager a.disabled {
    pointer-events: none;
    color: var(--fg-muted);
    background-color: var(--bg-muted);
}

/* ===================================================================== *
 * Misc
 * ===================================================================== */

.auth-card {
    max-width: 420px;
    margin: var(--space-fluid-lg) auto;
    padding: var(--space-7) var(--space-7) var(--space-8);
}

.auth-card h1 {
    text-align: center;
    margin-bottom: var(--space-6);
}

.auth-card .btn { width: 100%; }

.auth-card .form-field { margin-bottom: var(--space-5); }
.auth-card .form-field:last-of-type { margin-bottom: var(--space-7); }

.form-field { display: flex; flex-direction: column; gap: var(--space-1); }

.error-page {
    text-align: center;
    padding: var(--space-fluid-lg) 0;
}

.error-page h1 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--font-weight-regular);
    font-size: calc(var(--font-size-h1) * 1.3);
    margin-bottom: var(--space-4);
}

.error-page .btn { margin-top: var(--space-6); }

/* ===================================================================== *
 * Tabs (dashboard / statistics)
 * ===================================================================== */

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0 0 var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-bottom: 0;
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    color: var(--fg-muted);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-caption);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-nav);
    transition: color var(--duration-medium) var(--easing-default),
                background-color var(--duration-medium) var(--easing-default);
}

.tab:hover {
    color: var(--fg-default);
    text-decoration: none;
    background-color: var(--bg-default);
}

.tab.tab-active {
    color: var(--fg-default);
    background-color: var(--bg-default);
    border-color: var(--border-subtle);
    margin-bottom: -1px;
}

.tab:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.tab-count {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--bg-muted);
    color: var(--fg-muted);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
    line-height: 1;
}

.tab.tab-active .tab-count {
    background-color: var(--accent-primary);
    color: var(--fg-on-accent);
}

/* ===================================================================== *
 * Page-link pagination (numeric)
 * ===================================================================== */

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    color: var(--fg-default);
    background-color: var(--bg-default);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-caption);
    text-decoration: none;
    transition: color var(--duration-medium) var(--easing-default),
                border-color var(--duration-medium) var(--easing-default);
}

.page-link:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    text-decoration: none;
}

.page-link:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.page-current {
    background-color: var(--accent-primary);
    color: var(--fg-on-accent);
    border-color: var(--accent-primary);
}

.page-current:hover { color: var(--fg-on-accent); }

.page-disabled {
    color: var(--fg-muted);
    background-color: var(--bg-muted);
    pointer-events: none;
    cursor: not-allowed;
}

.page-ellipsis {
    padding: var(--space-1) var(--space-2);
    color: var(--fg-muted);
    font-weight: var(--font-weight-semibold);
}

/* ===================================================================== *
 * Value colouring utilities (KPIs, table cells)
 * ===================================================================== */

.value-positive { color: var(--color-state-success); }
.value-negative { color: var(--color-state-error); }
.value-warn     { color: var(--accent-gold); }
.value-muted    { color: var(--fg-muted); }
.value-small    { font-size: var(--font-size-h5); font-weight: var(--font-weight-semibold); }

/* ===================================================================== *
 * Shortcut tiles (dashboard quick-links)
 * ===================================================================== */

.shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
}

.shortcut {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--bg-default);
    color: var(--fg-default);
    text-decoration: none;
    transition: border-color var(--duration-medium) var(--easing-default),
                box-shadow var(--duration-medium) var(--easing-default),
                transform var(--duration-fast) var(--easing-default);
}

.shortcut:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-2);
    text-decoration: none;
    transform: translateY(-2px);
}

.shortcut:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.shortcut-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-caption);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--fg-default);
}

.shortcut-desc {
    color: var(--fg-muted);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
}

/* ===================================================================== *
 * Bar chart (acquisitions by month)
 * ===================================================================== */

.bar-track {
    background-color: var(--bg-muted);
    border-radius: var(--radius-sm);
    height: 8px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--accent-eco-start) 0%,
        var(--accent-eco-end) 100%
    );
    transition: width var(--duration-long) var(--easing-smooth);
}

/* ===================================================================== *
 * Inline SVG charts (Charts.php — /statistics)
 * ===================================================================== */

.chart {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.chart-svg {
    width: 100%;
    height: auto;
    display: block;
    font-family: var(--font-body);
}

/* `chart-stacked-bar` is a full-width percentage bar; force the SVG to
 * fill its parent horizontally so the segments stretch edge-to-edge. */
.chart-stacked-bar svg {
    width: 100%;
    height: 14px;
    display: block;
}

.chart-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    font-size: var(--font-size-caption);
    color: var(--fg-default);
}

.chart-legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    line-height: 1.3;
}

/* Small squared swatch matches the squared visual identity — no radius,
 * no dots, aligned with the SVG rects it represents. */
.chart-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid var(--border-subtle);
}

.chart-empty {
    padding: var(--space-4) 0;
}

/* Hover highlight on SVG rects gives operators a touch of affordance
 * (colour intensifies) without requiring any JS tooltip library — the
 * `<title>` inside each rect already triggers the native tooltip. */
.chart-svg rect,
.chart-svg circle {
    transition: opacity var(--duration-fast) var(--easing-default);
}
.chart-svg rect:hover,
.chart-svg circle:hover {
    opacity: 0.82;
}

/* Data-quality "health" tile (zero-value-is-good indicator). */
.chart-health {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.chart-health-label {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-bold);
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
}

.chart-health-value {
    font-size: clamp(22px, calc(16px + 0.6vw), 30px);
    font-weight: var(--font-weight-bold);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.chart-health-track {
    height: 6px;
    background-color: var(--bg-muted);
    overflow: hidden;
}

.chart-health-fill {
    height: 100%;
    transition: width var(--duration-long) var(--easing-smooth);
}

.chart-health-status {
    font-size: var(--font-size-caption);
    color: var(--fg-muted);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
}

/* ===================================================================== *
 * Statistics page — period selector, KPI deltas, flow chart, heatmap,
 * cohort, mini-bars, quality tiles. Every colour is routed through the
 * design tokens so check-css-no-raw-hex stays green.
 * ===================================================================== */

.page-header-with-controls {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.period-selector {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.period-chip {
    font-family: var(--font-body);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-subtle);
    background: var(--bg-default);
    color: var(--fg-default);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-default),
                color var(--duration-fast) var(--easing-default),
                border-color var(--duration-fast) var(--easing-default);
}

.period-chip:hover {
    border-color: var(--border-focus);
}

.period-chip.is-active {
    background: var(--bg-inverse);
    color: var(--fg-on-inverse);
    border-color: var(--bg-inverse);
}

.stats-kpi {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.stats-reconcile-banner {
    border: 1px solid var(--color-gold-500);
    border-left-width: 4px;
    background: var(--bg-muted);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

.stats-reconcile-banner-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
}

.stats-reconcile-banner-body {
    margin: 0 0 var(--space-2) 0;
    color: var(--fg-muted);
    font-size: var(--font-size-body);
}

.stats-reconcile-banner-list {
    margin: 0;
    padding-left: var(--space-4);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-caption);
}

.stats-reconcile-banner-list li + li {
    margin-top: 2px;
}

.stats-kpi .metric .value {
    font-size: clamp(22px, calc(17px + 0.6vw), 30px);
    line-height: 1.05;
    margin-top: var(--space-1);
}

.kpi-delta {
    margin-top: var(--space-1);
    font-size: var(--font-size-caption);
    font-variant-numeric: tabular-nums;
}

.kpi-delta-positive {
    color: var(--accent-eco-end);
    font-weight: var(--font-weight-semibold);
}

.kpi-delta-negative {
    color: var(--color-red-700);
    font-weight: var(--font-weight-semibold);
}

.chart-flow .chart-svg {
    /* Flow chart has explicit horizontal and vertical grid; keep the
     * viewBox from stretching too tall on narrow screens. */
    max-height: 320px;
}

.chart-heatmap {
    /* Horizontal scroll on narrow viewports so the last few month
     * columns don't get squeezed into unreadable slivers. */
    min-width: 640px;
}

.chart-legend-scale {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.chart-scale {
    display: inline-flex;
    gap: 2px;
}

.chart-scale-step {
    display: inline-block;
    width: 18px;
    height: 14px;
}

.chart-minibars {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.chart-minibars li {
    display: grid;
    grid-template-columns: minmax(100px, 30%) 1fr auto;
    gap: var(--space-3);
    align-items: center;
    font-size: var(--font-size-caption);
}

.chart-minibars-label {
    color: var(--fg-default);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-minibars-track {
    display: block;
    background-color: var(--bg-muted);
    height: 10px;
    position: relative;
}

.chart-minibars-fill {
    display: block;
    height: 100%;
    transition: width var(--duration-long) var(--easing-smooth);
}

.chart-minibars-value {
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-semibold);
    color: var(--fg-default);
}

.chart-quality-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.chart-quality {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    background-color: var(--bg-subtle);
    transition: border-color var(--duration-fast) var(--easing-default),
                background-color var(--duration-fast) var(--easing-default);
}

.chart-quality.chart-quality-attention {
    border-left: 4px solid var(--color-red-700);
}

.chart-quality.chart-quality-ok {
    border-left: 4px solid var(--accent-eco-end);
}

.chart-quality-label {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-bold);
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    line-height: var(--line-height-label);
}

.chart-quality-value {
    font-size: clamp(24px, calc(18px + 0.7vw), 32px);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--fg-default);
}

.chart-quality-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: auto;
}

.chart-quality-link {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    color: var(--fg-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chart-quality-link:hover {
    text-decoration-thickness: 2px;
}

.chart-quality-secondary {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--font-size-caption);
}

.chart-quality-mini {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
}

.chart-quality-mini strong {
    font-variant-numeric: tabular-nums;
    color: var(--fg-default);
}

/* ===================================================================== *
 * S-041 Identity history (subentro)
 * ===================================================================== */

.succession-banner {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.succession-banner .small {
    font-size: var(--font-size-caption);
}

.identity-history tr.identity-current {
    background-color: rgba(0, 0, 0, 0.02);
}

.identity-history tr.identity-archived {
    color: var(--fg-muted);
}

.identity-history td.mono {
    font-family: var(--font-family-mono, monospace);
    font-size: var(--font-size-caption);
}