/* TailCMS owner dashboard — static stylesheet, no build step, no CDN. */

:root {
    --ink: #1f1a17;
    --ink-muted: #79706a;
    --border: #ece4de;
    --border-strong: #ddd0c6;
    --surface: #ffffff;
    --bg: #faf7f4;

    /* Orange and white.
       ------------------------------------------------------------------
       TWO oranges, because one cannot do both jobs. `--brand` (#EA580C) is
       the colour you SEE — active tab underlines, focus rings, the accent
       rule on a panel heading. Against white it lands at 3.6:1, which is
       the bar for a UI component but NOT for text.

       `--brand-strong` (#C2410C) is the colour you READ — every filled
       button, every link. White on it measures 5.2:1, comfortably past AA
       for body text, and it still reads as the same orange because it is
       the same hue two steps darker.

       Using #EA580C for button fills was the obvious first move and it is
       exactly the trap: white label text on it fails AA at normal size, on
       a screen an operator uses all day. */
    --brand: #ea580c;
    --brand-strong: #c2410c;
    --brand-dark: #9a3412;
    --brand-tint: #fff7ed;
    --brand-tint-strong: #ffedd5;

    /* Danger has to be legible AS danger next to an orange brand, and a
       plain red is not: #c8322c against #c2410c is a hue shift of about ten
       degrees, so "Remove theme" and "Save details" read as the same button
       at a glance. Pulling danger toward crimson opens a gap wide enough to
       tell them apart while still measuring 6.3:1 against white. */
    --danger: #be123c;
    --danger-dark: #9f1239;
    --success-bg: #e8f6ec;
    --success-ink: #17703a;
    --error-bg: #fdf2f4;
    --error-ink: #9f1239;
    --radius: 10px;

    /* One spacing scale for the gaps BETWEEN controls. Buttons sat 6-8px
       apart everywhere, which read as one smudged block of chrome rather
       than as separate actions — see the Revoke / Reset domain pair on the
       licenses table. These are the values the whole dashboard now uses. */
    --gap-tight: 10px;
    --gap: 14px;
    --gap-loose: 20px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
}

a {
    color: var(--brand-strong);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.85em;
}

h1 {
    font-size: 22px;
    margin: 0 0 16px;
}

h2 {
    font-size: 15px;
    margin: 0 0 12px;
    color: var(--ink);
}

/* ---- Topbar ---- */

.dashboard-topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    height: 56px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.dashboard-brand {
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.dashboard-brand span {
    font-weight: 400;
    color: var(--ink-muted);
}

.dashboard-nav {
    display: flex;
    gap: 2px;
    flex: 1;
}

.dashboard-nav a {
    color: var(--ink-muted);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-weight: 500;
}

.dashboard-nav a:hover {
    background: var(--brand-tint);
    color: var(--brand-dark);
    text-decoration: none;
}

.dashboard-nav a.is-active {
    background: var(--brand-strong);
    color: #fff;
}

.dashboard-logout-form {
    margin: 0;
}

/* ---- Layout ---- */

.dashboard-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

.dashboard-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

/* ---- Panels ---- */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}

.text-muted {
    color: var(--ink-muted);
}

.empty-cell {
    color: var(--ink-muted);
    text-align: center;
    padding: 20px 0 !important;
}

/* ---- Stat cards ---- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value {
    font-size: 26px;
    font-weight: 700;
}

.stat-label {
    color: var(--ink-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ---- Tables ---- */

.table-scroll {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-muted);
    font-weight: 600;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* NOT display:flex.
   ------------------------------------------------------------------
   A <td> set to `display: flex` stops being a table cell: it is pulled
   out of the row's layout, so its height is its own content's rather
   than the row's, and its border-bottom draws at a different y than
   every other cell in the row. On the product table that showed as the
   row separator breaking and stepping down under the "Manage" button.

   Keeping the cell a real table-cell and spacing its children with a
   margin gets the same row of buttons with the borders still aligned. */
.actions-cell {
    white-space: nowrap;
    vertical-align: middle;
}

.actions-cell > form,
.actions-cell > a,
.actions-cell > button {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.actions-cell > * + * {
    margin-left: var(--gap-tight);
}

/* Bulk-delete toolbar above the licenses table + its checkbox column. */
.bulk-delete-form {
    display: flex;
    align-items: center;
    gap: var(--gap);
    margin-bottom: 16px;
}

.select-col {
    width: 1%;
    text-align: center;
    white-space: nowrap;
}

/* ---- Badges ---- */

.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    background: var(--bg);
    color: var(--ink-muted);
    border: 1px solid var(--border);
}

.badge-active,
.badge-published,
.badge-answered {
    background: var(--success-bg);
    color: var(--success-ink);
    border-color: transparent;
}

.badge-revoked,
.badge-closed {
    background: #f1f2f4;
    color: var(--ink-muted);
    border-color: transparent;
}

/* Draft/open/pending used an orange tint, which now collides with the
   brand colour — a draft badge read as "primary action". Moved to a
   neutral slate so status and brand stay distinguishable. */
.badge-draft,
.badge-open,
.badge-pending {
    background: #eef1f5;
    color: #4a5567;
    border-color: transparent;
}

.badge-verified {
    background: var(--success-bg);
    color: var(--success-ink);
    border-color: transparent;
}

.badge-author-staff {
    background: var(--brand-strong);
    color: #fff;
    border-color: transparent;
}

.badge-author-customer {
    background: var(--brand-tint-strong);
    color: var(--brand-dark);
    border-color: transparent;
}

/* ---- Forms ---- */

label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-muted);
    margin: 12px 0 4px;
}

label:first-of-type {
    margin-top: 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
}

input[type="file"] {
    width: 100%;
    padding: 8px 0;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
}

textarea {
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--brand);
    outline-offset: -1px;
}

/* Give a stacked form's submit button room to breathe. It used to butt
   straight up against the last field. */
.stacked-form > .btn-primary,
.stacked-form > .btn-danger,
.stacked-form > .btn-secondary,
.stacked-form > button[type="submit"] {
    margin-top: var(--gap-loose);
}

/* ---- Status radio group (release upload draft/publish) ---- */

.status-choice {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px 14px;
    margin: 12px 0 0;
}

.status-choice legend {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-muted);
    padding: 0 4px;
}

.radio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink);
    margin: 4px 16px 0 0;
}

.radio-label input[type="radio"] {
    width: auto;
}

/* ---- Verification token display (purchases) ---- */

.token-panel {
    border-color: var(--brand);
    background: var(--brand-tint);
}

.token-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.token-row code {
    font-size: 13px;
}

.stacked-form {
    max-width: 480px;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: center;
}

.filter-form input,
.filter-form select {
    width: auto;
    flex: 1 1 160px;
}

.inline-form {
    display: inline-flex;
    gap: var(--gap-tight);
    align-items: center;
    margin: 0;
}

.inline-form textarea {
    width: 220px;
}

/* ---- Buttons ---- */

button {
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

/* `button[type="submit"]` must NOT match a button that already declares its
   own variant.
   ------------------------------------------------------------------
   An attribute selector plus an element (0,1,1) outranks a bare class
   (0,1,0), so this rule was quietly beating `.btn-danger` on every
   `<button type="submit" class="btn-danger">` — which is every destructive
   button in the dashboard. Revoke, Remove theme, Delete selected and Remove
   release were all painted in the PRIMARY colour, i.e. the most dangerous
   controls here looked exactly like the safe ones. (Pre-existing: under the
   old blue palette they rendered blue rather than red.)

   The `:not([class*="btn-"])` narrows this to unclassed submit buttons, so
   an explicit variant class always wins. */
.btn-primary,
button[type="submit"]:not([class*="btn-"]) {
    background: var(--brand-strong);
    color: #fff;
    border: 1px solid var(--brand-strong);
    border-radius: var(--radius);
    padding: 9px 18px;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease;
}

.btn-primary:hover,
button[type="submit"]:not([class*="btn-"]):hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

/* A quieter button for the action that is not the point of the form —
   "Cancel", "Reset domain", "Reinstate". Previously these only existed as
   an :not() clause scoped to .actions-cell, so the same visual weight was
   unavailable anywhere else. */
.btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 9px 18px;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease;
}

.btn-secondary:hover {
    background: var(--brand-tint);
    border-color: var(--brand);
    color: var(--brand-dark);
    text-decoration: none;
}

/* Every interactive element gets the same visible ring. Keyboard focus was
   previously invisible on buttons — only inputs declared an outline. */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-link:focus-visible,
button[type="submit"]:not([class*="btn-"]):focus-visible,
.dashboard-nav a:focus-visible,
.tabs a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    padding: 9px 18px;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease;
}

.btn-danger:hover {
    background: var(--danger-dark);
    border-color: var(--danger-dark);
}

.actions-cell button:not(.btn-primary):not(.btn-danger):not(.btn-link):not(.btn-secondary) {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 9px 18px;
    font-weight: 600;
}

.actions-cell button:not(.btn-primary):not(.btn-danger):not(.btn-link):not(.btn-secondary):hover {
    background: var(--brand-tint);
    border-color: var(--brand);
    color: var(--brand-dark);
}

.btn-link {
    background: none;
    border: none;
    color: var(--brand-strong);
    padding: 0;
    font-weight: 500;
}

.btn-link:hover {
    text-decoration: underline;
}

/* ---- Alerts ---- */

.alert {
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 18px;
    font-size: 13px;
}

.alert-success {
    background: var(--success-bg);
    color: var(--success-ink);
}

.alert-error ul {
    margin: 0;
    padding-left: 18px;
}

.alert-error {
    background: var(--error-bg);
    color: var(--error-ink);
}

.alert-info {
    background: var(--brand-tint);
    color: var(--brand-dark);
}

.alert-info a {
    color: var(--brand-dark);
    font-weight: 600;
}

.customer-name {
    font-weight: 600;
    color: var(--ink);
}

/* ---- Tabs ---- */

.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.tabs a {
    padding: 8px 14px;
    color: var(--ink-muted);
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.tabs a:hover {
    text-decoration: none;
    color: var(--ink);
}

.tabs a.is-active {
    color: var(--brand-strong);
    border-bottom-color: var(--brand);
}

/* ---- Code hint ---- */

.code-hint {
    background: #0f172a;
    color: #e2e8f0;
    padding: 14px 16px;
    border-radius: var(--radius);
    overflow-x: auto;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.6;
}

/* ---- Tickets thread ---- */

.ticket-actions {
    margin-bottom: 16px;
}

.ticket-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.ticket-message {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--bg);
}

.ticket-message-customer {
    background: var(--surface);
}

.ticket-message-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
}

.ticket-message p {
    margin: 0;
    white-space: pre-wrap;
}

/* ---- Login page ---- */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg);
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    width: 320px;
}

.login-card h1 {
    font-size: 18px;
    margin-bottom: 20px;
}

.login-card h1 span {
    font-weight: 400;
    color: var(--ink-muted);
}

.login-card .btn-primary {
    width: 100%;
    margin-top: 16px;
}

/* ============================================================
   Page header — title on the left, primary action on the right
   ------------------------------------------------------------
   The "+" that opens the registration page lives here, so every
   list page gets its create action in the same spot.
   ============================================================ */

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-loose);
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.page-head h1 {
    margin: 0;
}

.page-head__actions {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.page-lede {
    color: var(--ink-muted);
    max-width: 70ch;
    margin: -8px 0 20px;
}

/* The circular "+" that opens the register page. Carries a text label at
   wider widths — an icon-only control here would be a guess, and this one
   creates a record. */
.btn-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-strong);
    color: #fff;
    border: 1px solid var(--brand-strong);
    border-radius: var(--radius);
    padding: 9px 16px 9px 13px;
    font-weight: 600;
    font-size: 14px;
    transition: background .15s ease, border-color .15s ease;
}

.btn-add:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    text-decoration: none;
}

.btn-add__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    /* The glyph's own bearing sits it low in the circle. */
    padding-bottom: 2px;
}

/* ============================================================
   Section header inside a panel — heading + its own action
   ============================================================ */

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.panel-head h2 {
    margin: 0;
}

.panel-head__note {
    color: var(--ink-muted);
    font-size: 13px;
}

/* ============================================================
   Product tabs — Themes / Plugins / Core on one page
   ------------------------------------------------------------
   Each tab keeps its own URL (/dashboard/themes, /plugins, /core)
   so a tab is linkable and the back button works. The tab bar is
   the same .tabs component the ticket views already use, with a
   count chip added.
   ============================================================ */

.tabs {
    gap: 2px;
    border-bottom: 1px solid var(--border);
}

.tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 700;
}

.tabs a.is-active .tab-count {
    background: var(--brand-tint-strong);
    border-color: transparent;
    color: var(--brand-dark);
}

/* ============================================================
   Product rows — theme/plugin list with its cover thumbnail
   ============================================================ */

.product-row {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.product-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--border);
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product-name {
    font-weight: 600;
}

.product-slug {
    color: var(--ink-muted);
    font-size: 12px;
}

/* ============================================================
   Cover image panel (theme / plugin detail)
   ============================================================ */

.cover-editor {
    display: flex;
    gap: var(--gap-loose);
    align-items: flex-start;
    flex-wrap: wrap;
}

.cover-preview {
    flex: 0 0 auto;
    width: 260px;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
}

.cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cover-preview--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    font-size: 13px;
    border-style: dashed;
    border-color: var(--border-strong);
}

.cover-editor__form {
    flex: 1 1 280px;
    min-width: 260px;
}

.cover-editor__form .btn-primary {
    margin-top: var(--gap);
}

/* Replace / Remove sit on one row under the field rather than stacking. */
.cover-actions {
    display: flex;
    gap: var(--gap);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--gap);
}

.cover-actions form {
    margin: 0;
}

.cover-actions .btn-primary,
.cover-actions .btn-danger,
.cover-actions button[type="submit"] {
    margin-top: 0;
}

/* ============================================================
   Danger zone — visually separated, and last on the page
   ============================================================ */

.panel--danger {
    border-color: #f0c9c7;
    background: #fffafa;
    margin-top: 32px;
}

.panel--danger h2 {
    color: var(--danger-dark);
}

/* ============================================================
   Licenses
   ============================================================ */

/* The licenses table used to overflow its panel and put a horizontal
   scrollbar under every row: nine columns, an untruncated 40-character
   key and two full-size buttons could not fit 1100px, so the last action
   was simply cut off at the right edge.

   `table-layout: fixed` + per-column widths is what removes the scroll —
   without it the browser sizes columns from content, and one long key
   pushes the whole table wide no matter what min-widths the cells carry.
   The key cell then wraps inside its own column instead. */
.licenses-table {
    table-layout: fixed;
    width: 100%;
}

.licenses-table .col-select { width: 36px; }
.licenses-table .col-key { width: 24%; }
.licenses-table .col-product { width: 20%; }
.licenses-table .col-customer { width: 20%; }
.licenses-table .col-status { width: 10%; }
.licenses-table .col-domain { width: 12%; }
.licenses-table .col-actions { width: 14%; }

.licenses-table td,
.licenses-table th {
    padding: 12px;
}

.license-key {
    display: block;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    line-height: 1.45;
    /* A license key has no spaces, so it needs explicit permission to break
       or it defeats the fixed layout above. */
    word-break: break-all;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 7px;
}

.license-sub {
    display: block;
    color: var(--ink-muted);
    font-size: 12px;
    margin-top: 3px;
}

/* Actions stack in this narrow column rather than being clipped — but as
   block children of a normal table cell, not as a flex td (see the note on
   .actions-cell above for why that matters to the row borders). */
.licenses-table .actions-cell {
    white-space: normal;
    vertical-align: middle;
}

.licenses-table .actions-cell > form,
.licenses-table .actions-cell > a,
.licenses-table .actions-cell > button {
    display: block;
    width: 100%;
}

.licenses-table .actions-cell > * + * {
    margin-left: 0;
    margin-top: var(--gap-tight);
}

.licenses-table .actions-cell button {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
}

/* Search: one wide free-text field leading a row of narrower filters.

   Uniform auto-fit tracks with the query box spanning two of them, rather
   than a leading `minmax(220px, 2fr)` track — `repeat(auto-fit, …)` after an
   explicit track distributes the remaining space among ITS tracks, so the 2fr
   never actually won and the search box came out the same width as a
   dropdown. Spanning is the part that survives the auto-fit. */
.search-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--gap);
    align-items: center;
}

.search-form input[type="search"] {
    grid-column: span 2;
}

.search-form input,
.search-form select {
    width: 100%;
}

.search-form__actions {
    display: flex;
    gap: var(--gap);
    align-items: center;
    grid-column: 1 / -1;
}

.search-summary {
    color: var(--ink-muted);
    font-size: 13px;
    margin: 14px 0 0;
}

/* Create-license form: the two product pickers occupy the same slot, one
   visible at a time (see dashboard.js — selecting a theme disables the
   plugin picker and vice versa). */
.license-create {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap);
    align-items: end;
}

.license-create .status-choice {
    margin: 0;
    grid-column: span 1;
}

.license-create__field label {
    margin-top: 0;
}

.license-create__actions {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--gap);
    align-items: center;
}

.license-create__actions .btn-primary {
    margin-top: 0;
}

/* A picker the other product type has switched off. Kept in the DOM (and
   in the tab order as a disabled control) so the row does not reflow when
   the type changes — a dropdown that vanishes takes the layout with it. */
.is-disabled-picker {
    opacity: 0.45;
    pointer-events: none;
}

/* ============================================================
   Security — small blocks side by side
   ============================================================ */

.security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--gap-loose);
    align-items: start;
}

.security-grid .panel {
    margin-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Pins each panel's action to the bottom so two side-by-side cards with
   different amounts of copy still line their buttons up. */
.security-grid .panel > form:last-child,
.panel__foot {
    margin-top: auto;
    padding-top: var(--gap-loose);
}

.security-status {
    display: flex;
    align-items: center;
    gap: var(--gap-tight);
    flex-wrap: wrap;
    margin: 0 0 var(--gap);
}

.status-dot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.status-dot::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.status-dot--on {
    background: var(--success-bg);
    color: var(--success-ink);
}

.status-dot--off {
    background: #f1f2f4;
    color: var(--ink-muted);
}

.panel-inset {
    background: var(--brand-tint);
    border: 1px solid var(--brand-tint-strong);
    border-radius: var(--radius);
    padding: 18px;
    margin: var(--gap) 0;
}

.panel-inset h3 {
    margin: 0 0 8px;
    font-size: 14px;
}

.panel-inset img {
    display: block;
    background: #fff;
    padding: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin: var(--gap) 0;
}

.otp-code {
    display: inline-block;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 17px;
    letter-spacing: 0.12em;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 8px 14px;
}

.provisioning-uri {
    display: block;
    word-break: break-all;
    font-size: 11.5px;
    color: var(--ink-muted);
    margin-top: var(--gap-tight);
}

/* The six-digit test field should not stretch to the panel width. */
.code-input {
    max-width: 190px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 17px;
    letter-spacing: 0.18em;
    text-align: center;
}

/* ============================================================
   Login page — brand mark above the card
   ============================================================ */

.login-page {
    flex-direction: column;
    gap: var(--gap-loose);
    background:
        radial-gradient(circle at 50% 0%, var(--brand-tint) 0%, var(--bg) 55%);
}

.login-brand {
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
}

.login-brand span {
    font-weight: 400;
    color: var(--brand-strong);
}

.login-card {
    width: 340px;
    padding: 30px 32px 32px;
    box-shadow: 0 12px 32px -18px rgba(31, 26, 23, 0.35);
}

.login-card .btn-primary {
    margin-top: var(--gap-loose);
}

.login-foot {
    color: var(--ink-muted);
    font-size: 12.5px;
}

/* ============================================================
   Narrow screens
   ============================================================ */

@media (max-width: 760px) {
    .dashboard-topbar {
        height: auto;
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: var(--gap);
    }

    .dashboard-nav {
        order: 3;
        flex-basis: 100%;
        overflow-x: auto;
    }

    .licenses-table,
    .licenses-table thead,
    .licenses-table tbody,
    .licenses-table tr,
    .licenses-table td {
        display: block;
        width: 100%;
    }

    .licenses-table thead {
        display: none;
    }

    .licenses-table tr {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px;
        margin-bottom: var(--gap);
    }

    .licenses-table td {
        border: none;
        padding: 4px 0;
    }

    /* Restores the column labels the hidden <thead> was carrying. */
    .licenses-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--ink-muted);
        font-weight: 600;
        margin-bottom: 2px;
    }
}