/*
 * Settings → Licence panel.
 *
 * Design-only surface (markup + CSS): the activation / re-verify / deactivate
 * logic and the masked-code data live in settings-license.js and are
 * unchanged. Built on the shared admin tokens (--color-*, --space-*,
 * --radius-*, --text-*) and the .badge--ok / .badge--warn pills so it stays
 * consistent with the rest of the console.
 */

/* The Licence tab carries no live-preview pane, so reclaim the full content
   width the shared .settings-form caps at 720px. Scoped strictly to this tab
   via the existing data-active-tab hook. */
.settings-page__layout[data-active-tab="licence"] .settings-form {
    max-width: none;
}

.license-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* ── Shared key/value rows (panel + cards). Values truncate with an ellipsis
   and expose the full text on hover (title=) so a long domain / item / masked
   code can never widen its container. ─────────────────────────────────────── */
.license-kv {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px var(--space-lg);
    margin: 0;
}
.license-kv__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    min-width: 0;
    padding: 4px 0;
    border-bottom: 1px solid var(--hairline);
}
.license-kv__row:last-child {
    border-bottom: 0;
}
.license-kv__k {
    flex: 0 0 auto;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}
.license-kv__v {
    min-width: 0;
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-sm);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Platform licence ─────────────────────────────────────────────────────── */
.license-platform {
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.license-platform__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}
.license-platform__heading {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
}
.license-platform__badge {
    font-size: var(--text-xs);
    padding: 5px 12px;
}
/* Two readable columns of key/value on wide; collapses to one on narrow. */
.license-platform__kv {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 var(--space-xl);
}
.license-platform__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
    padding-top: var(--space-base);
    border-top: 1px solid var(--color-border);
}
.license-platform__code {
    margin: 0;
    max-width: 460px;
}
.license-platform__domain {
    max-width: 460px;
}
.license-platform__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.license-panel__hint {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

/* ── Warnings (shared) ────────────────────────────────────────────────────── */
.license-panel__warning {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid rgba(181, 71, 8, 0.24);
    border-radius: var(--radius-sm);
    background: rgba(181, 71, 8, 0.08);
    color: var(--color-warning);
    font-size: var(--text-sm);
    line-height: 1.45;
}

/* Belt-and-suspenders: .btn / .field set an explicit display that beats the UA
   [hidden] rule, so pair it here for the state-driven control swap. */
.license-panel [hidden] {
    display: none !important;
}

@media (max-width: 640px) {
    .license-platform__actions .btn {
        width: 100%;
    }
}