/* ============================================================
   ThatFrame admin portal — app shell

   Loaded after thatwebsite.css, which supplies the fonts, tokens,
   and every component the portal uses (buttons, cards, fields,
   badges, toasts). This file only adds what the kit deliberately
   leaves out: the top bar, data tables, and the one-time device
   token readout. Everything here is built from the kit's tokens —
   no literal colours, so a design system update carries through.
   ============================================================ */

/* ---------- Top bar ---------- */
header.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-6);
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
}

header.topbar .brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font: var(--text-h3);
    letter-spacing: var(--tracking-caption);
    color: var(--brand-primary);
}

header.topbar .brand:hover {
    text-decoration: none;
}

/* The logo art rounds its own corners; no radius needed here. */
header.topbar .brand img {
    display: block;
}

header.topbar nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

header.topbar nav a {
    font: var(--text-body-sm);
    color: var(--text-secondary);
}

header.topbar nav a:hover {
    color: var(--text-primary);
    text-decoration: none;
}

header.topbar nav a.active {
    color: var(--text-primary);
    font-weight: 600;
}

main {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

/* ---------- Tables ---------- */
table {
    width: 100%;
    border-collapse: collapse;
}

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

th {
    font: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caption);
    color: var(--text-secondary);
}

/* A data source URL is one long unbroken token, so it has no wrap
   opportunity of its own: left alone, a single row forces the whole table
   into a horizontal scroll. Cap the cell and let it break mid-token. */
td {
    font: var(--text-body-sm);
    max-width: 320px;
    overflow-wrap: anywhere;
}

tr:last-child td {
    border-bottom: 0;
}

/* Tables are the portal's one guaranteed-wide element; let them
   scroll inside their card rather than stretching the page. */
.tw-table-wrap {
    overflow-x: auto;
}

/* The kit sizes inputs intrinsically and lets .tw-field stretch them.
   An editable cell has no .tw-field wrapper, so fill it explicitly. */
td > input[type="text"] {
    width: 100%;
}

/* ---------- Controls ---------- */
/* A link wearing .tw-btn has to opt out of the kit's prose-link hover, which
   sets both an underline and a link colour. The underline cuts across the
   button face; the colour is worse than cosmetic, because `a:hover` (0,1,1)
   outweighs `.tw-btn--primary` (0,1,0) and repaints the label link-teal on
   the button's teal hover fill — teal on teal, unreadable exactly when the
   pointer is on it. The kit can't fix this at source: it styles
   `button, .tw-btn`, and <button> never had a link hover to begin with.
   So restate the variants' own colours at a weight that outranks a:hover. */
a.tw-btn:hover {
    text-decoration: none;
    color: var(--text-primary);
}

/* Same specificity as the rule above (0,2,1), so this must stay after it to
   win for the filled variants. Both paint their label on a brand fill. */
a.tw-btn--primary:hover,
a.tw-btn--danger:hover {
    color: var(--text-on-brand);
}

/* A native <select> is 39px next to a 44.8px <input>, so any .tw-row holding
   both sits crooked. The cause is line-height: a select with native
   appearance hard-ignores it (computed stays `normal` however it is set) and
   sizes itself, while the kit's inputs inherit a 24.8px line box.
   `appearance: none` is what lets the select take the line-height, which
   lands it on exactly the input's height — but it also strips the drop-down
   arrow, so we draw one back with two gradients. currentColor keeps the
   arrow on --text-primary rather than pinning a literal hex here. */
select {
    appearance: none;
    padding-right: var(--space-8);
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        right calc(var(--space-4) + 5px) center,
        right var(--space-4) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* ---------- Inline code hints ---------- */
/* Several labels name the token they configure (?screen=, .Params). The
   kit's <code> is sized for prose — at 14px with padding and a border it
   makes a label's line box taller than a plain one, so fields sitting
   side by side in a .tw-row stop aligning. Strip it back to a tint. */
label {
    line-height: 1.4;
}

label code,
.tw-field > span code {
    font-size: 12px;
    font-weight: 400;
    padding: 0 4px;
    border: 0;
}

/* A line box is as tall as its tallest inline box, so the hint's own
   line-height has to stay under the label's or it grows the label back. */
label code {
    line-height: 1;
}

/* ---------- Device list ---------- */
/* Each card is one device: who it is on top, what you can change in the
   middle, what you can do to it along the bottom. The head keeps the name
   readable while scanning a stack of cards — the name input alone gave the
   card no identity. */
.device__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.device__name {
    margin: 0;
}

.device__seen {
    font: var(--text-body-sm);
}

/* One action row, ruled off from the fields above it. The switch takes the
   auto margin, which parks both buttons at the right edge together —
   previously Save sat here and Delete sat in a second row below, so the two
   things you can do to a device were never in the same place. */
.device__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.device__actions .tw-switch {
    margin-right: auto;
}

/* ---------- Device token ---------- */
/* Shown exactly once, at creation, and never recoverable — so it is
   deliberately the loudest thing on the page. */
.token {
    font: var(--text-mono);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    word-break: break-all;
}

/* ---------- Screen editor ---------- */
/* HTML and JSON are code: mono, and tall enough to work in. */
textarea[name="html"],
textarea[name="params"] {
    font: var(--text-mono);
}

textarea[name="html"] {
    min-height: 320px;
}

textarea[name="params"] {
    min-height: 120px;
}

/* ---------- Helpers ---------- */
.right {
    text-align: right;
}

.inline {
    display: inline;
}