/*
 * Backups tab (Settings) — presentation only. Renders inside .main (light
 * tokens). Layout = hero (title + Create + retention note) over a registry
 * card holding a kit .data-table. Reuses kit .card / .badge / .btn /
 * .data-table / .empty-state; this file adds the hero band, the row/status
 * chrome, and the creating spinner.
 */

.main .backups-tab,
.main [data-section="backups"] { min-width: 0; }

/* The shared `.settings-form` is capped at 720px (right for form-line length,
 * wrong for a wide registry table). The Backups tab is full-width with no live
 * preview, so lift the cap only here, scoped to its active-tab state. (0,3,0)
 * beats `.settings-form` (0,1,0). Mirrors the Updates tab. */
.settings-page__layout[data-active-tab="backups"] .settings-form {
    max-width: none;
}

/* ── Hero — title + Create + retention note ───────────────────────────── */
.main .backups-hero {
    position: relative;
    overflow: hidden;
    margin: 0 0 var(--space-lg);
    padding: var(--space-xl, 32px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)) 0%,
            var(--color-surface) 60%);
    box-shadow: var(--shadow-sm);
}
.main .backups-hero__glow {
    position: absolute;
    top: -40%; right: -10%;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--color-accent) 30%, transparent) 0%,
        transparent 70%);
    pointer-events: none;
}
.main .backups-hero__body {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.main .backups-hero__text { min-width: 0; }
.main .backups-hero__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-warning);
}
.main .backups-hero__title {
    margin: 6px 0 0;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-text);
}
.main .backups-hero__summary {
    margin: 8px 0 0;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    max-width: 60ch;
}
.main .backups-hero__actions { flex-shrink: 0; }
.main .backups-hero__note {
    position: relative;
    margin: var(--space-md) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── Registry card ─────────────────────────────────────────────────────── */
.main .backups-card__headline {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}
.main .backups-card__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: var(--surface-sunken);
    border: 1px solid var(--color-border);
}
.main .backups-card__icon svg { width: 20px; height: 20px; }

.main .backups-live {
    font-size: var(--text-xs, 12px);
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
}
.main .backups-live[hidden] { display: none; }

/* Compact buttons used inside the card (the kit's global has no `--sm`). */
.main .backups-card .btn--sm {
    padding: 7px 12px;
    font-size: var(--text-xs, 12px);
}

/* ── Table ─────────────────────────────────────────────────────────────── */
.main .backups-table-wrap { width: 100%; overflow-x: auto; }
.main .backups-table { width: 100%; border-collapse: collapse; }
.main .backups-table thead th {
    text-align: left;
    text-transform: uppercase;
    font-weight: 700;
}
.main .backups-table thead th.actions-cell { text-align: right; }
.main .backups-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.main .backups-size { font-variant-numeric: tabular-nums; white-space: nowrap; }
.main .backups-version { font-variant-numeric: tabular-nums; }
.main .backups-row--progress { background: color-mix(in srgb, var(--color-info, #175CD3) 5%, transparent); }

/* Status badge: align the spinner + label on one line. */
.main .backups-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Row actions cluster. */
.main .backups-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    justify-content: flex-end;
}
.main .backups-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    padding: 7px 12px;
    font-size: var(--text-xs, 12px);
}
.main .backups-download svg { width: 15px; height: 15px; }
.main a.backups-download:hover { text-decoration: none; }
/* Disabled <button> download (in_progress / failed) reads as inert. */
.main .backups-download:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Creating spinner ──────────────────────────────────────────────────── */
.main .backups-spinner {
    display: inline-block;
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
    border-top-color: currentColor;
    flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .main .backups-spinner { animation: backups-spin 0.7s linear infinite; }
}
@keyframes backups-spin { to { transform: rotate(360deg); } }

/* ── Empty / loading state ─────────────────────────────────────────────── */
.main .backups-empty {
    text-align: center;
    padding: var(--space-xl, 32px) var(--space-lg);
}
.main .backups-empty__title {
    margin: 0;
    font-weight: 700;
    color: var(--color-text);
}
.main .backups-empty__hint {
    margin: 4px 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* ── Responsive — stack rows into cards on narrow viewports ─────────────── */
@media (max-width: 720px) {
    .main .backups-hero__body { align-items: flex-start; }
    .main .backups-hero__actions { width: 100%; }
    .main .backups-hero__actions .btn { width: 100%; }

    /* Let the registry header stack so the title isn't squeezed by the
     * Refresh / auto-refresh controls. */
    .main .backups-card .card__header { flex-wrap: wrap; gap: var(--space-sm); }
    .main .backups-card .card__head-actions { width: 100%; justify-content: flex-end; }

    .main .backups-table-wrap { overflow-x: visible; }
    .main .backups-table thead { display: none; }
    /* The kit `.data-table` carries `min-width: 640px`; reset it so the table
     * can collapse into the stacked card layout below the viewport width. */
    .main .backups-table,
    .main .backups-table tbody,
    .main .backups-table tr,
    .main .backups-table td { display: block; width: 100%; min-width: 0; }
    .main .backups-table tr {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-md);
        padding: var(--space-sm) var(--space-base);
        background: var(--color-surface);
    }
    .main .backups-table tbody tr:hover { background: var(--color-surface); }
    .main .backups-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        border-bottom: 0;
        padding: 6px 0;
    }
    .main .backups-table tbody td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
    }
    .main .backups-table td.actions-cell { justify-content: flex-end; }
    .main .backups-table td.actions-cell::before { content: none; }
    .main .backups-actions { width: 100%; justify-content: flex-end; }
    .main .backups-download { flex: 1; justify-content: center; }
    .main .backups-restore-btn { flex: 1; justify-content: center; }
}

/* ── Restore action button (discreet danger) ───────────────────────────── */
.main .backups-restore-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: var(--text-xs, 12px);
    color: var(--color-danger, #d92d20);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--color-danger, #d92d20) 38%, var(--color-border));
}
.main .backups-restore-btn svg { width: 15px; height: 15px; }
.main .backups-restore-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-danger, #d92d20) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-danger, #d92d20) 60%, var(--color-border));
}
.main .backups-restore-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Restore confirmation modal (mounts in #modal-root, outside .main) ──── */
.backups-restore-modal { width: min(520px, 92vw); }
.backups-restore-modal .modal__body { display: grid; gap: var(--space-md); }
.backups-restore__warning {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid color-mix(in srgb, var(--color-danger, #d92d20) 45%, var(--color-border));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-danger, #d92d20) 9%, var(--color-surface));
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: 1.55;
}
.backups-restore__meta {
    margin: 0;
    display: grid;
    gap: 6px;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}
.backups-restore__meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    font-size: var(--text-sm);
}
.backups-restore__meta-row dt { margin: 0; color: var(--color-text-muted); }
.backups-restore__meta-row dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.backups-restore__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500;
    word-break: break-all;
}
.backups-restore__skew {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid color-mix(in srgb, var(--color-warning, #d98b2b) 45%, var(--color-border));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-warning, #d98b2b) 10%, var(--color-surface));
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.backups-restore__skew[hidden] { display: none; }
.backups-restore__skew-title {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    color: var(--color-warning, #d98b2b);
}
.backups-restore__skew-text { margin: 0; }
.backups-restore__skew-line {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.backups-restore__skew-arrow { color: var(--color-text-muted); }
.backups-restore__skew-line--danger {
    margin: 0;
    font-weight: 600;
    color: var(--color-danger, #d92d20);
}
.backups-restore__error {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid color-mix(in srgb, var(--color-danger, #d92d20) 50%, var(--color-border));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-danger, #d92d20) 12%, var(--color-surface));
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.backups-restore__error[hidden] { display: none; }
.backups-restore__field { display: grid; gap: 6px; }
.backups-restore__field-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}
.backups-restore__input { letter-spacing: 0.04em; }
.backups-restore__ack {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: 1.45;
}
.backups-restore__ack[hidden] { display: none; }
.backups-restore__ack-input { margin-top: 2px; flex-shrink: 0; }
.backups-restore__confirm { display: inline-flex; align-items: center; gap: 6px; }
.backups-restore__confirm-icon { display: inline-flex; }
.backups-restore__confirm-icon svg { width: 15px; height: 15px; }

/* ── "Restore in progress" full-screen overlay (mounts on <body>) ──────── */
.backups-restore-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: color-mix(in srgb, #0b1220 78%, transparent);
    backdrop-filter: blur(2px);
}
.backups-restore-overlay__card {
    /* The overlay mounts on <body>, outside the `.main` light-token scope, so
     * (like `.modal--light`) it re-scopes the admin light palette onto itself
     * to match the charter regardless of the root theme. */
    --color-surface: #FFFFFF;
    --color-border: #E4E7EC;
    --color-text: #101828;
    --color-text-secondary: #475467;
    --color-text-muted: #667085;
    --color-accent: #F5C842;
    --color-success: #12B76A;
    --surface-sunken: #F4F5F7;

    width: min(440px, 92vw);
    text-align: center;
    padding: var(--space-xl, 32px);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.4));
}
.backups-restore-overlay__spinner {
    width: 44px; height: 44px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    border-top-color: var(--color-accent);
}
@media (prefers-reduced-motion: no-preference) {
    .backups-restore-overlay__spinner { animation: backups-spin 0.8s linear infinite; }
}
.backups-restore-overlay__spinner--done {
    animation: none;
    border-color: var(--color-success, #12b76a);
    position: relative;
}
.backups-restore-overlay__spinner--done::after {
    content: "";
    position: absolute;
    left: 50%; top: 46%;
    width: 12px; height: 22px;
    border: solid var(--color-success, #12b76a);
    border-width: 0 3px 3px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}
/* Stalled — the wait was capped; neutral amber, no spin (no success/fail claim). */
.backups-restore-overlay__spinner--stalled {
    animation: none;
    border-color: var(--color-warning, #d98b2b);
    position: relative;
}
.backups-restore-overlay__spinner--stalled::after {
    content: "!";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-warning, #d98b2b);
}
.backups-restore-overlay__title {
    margin: 0 0 8px;
    font-size: var(--text-lg, 18px);
    font-weight: 800;
    color: var(--color-text);
}
.backups-restore-overlay__text {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.55;
}
.backups-restore-overlay__elapsed {
    margin: var(--space-md) 0 0;
    font-size: var(--text-xs, 12px);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}
.backups-restore-overlay__actions {
    margin-top: var(--space-lg);
    display: flex;
    justify-content: center;
}
.backups-restore-overlay__actions:empty { display: none; }