/* ============================================================================
   Theme tokens.

   Light is the default. Dark is applied by setting data-theme="dark" on <html>,
   which an inline script in _Layout does before first paint so the page never
   flashes the wrong theme.

   Every colour below is a token. Nothing else in this file, or in
   css-additions.css / css-badge.css, should hardcode a hex value — that is what
   makes a second theme cheap rather than a rewrite.
   ============================================================================ */

:root {
    /* ---- light (default) ---- */
    --ink: #f6f7f9;          /* page background */
    --panel: #ffffff;        /* cards, rows, top bar */
    --panel-hi: #f0f2f5;     /* hover */
    --line: #dfe3e8;
    --line-soft: #eaedf1;
    --text: #171a1d;
    --dim: #5c636c;
    --dimmer: #8b929b;
    --field-bg: #ffffff;

    /* Royex red, sampled from the logo. Hover goes darker on light, lighter on dark. */
    --brand: #ba2228;
    --brand-lift: #97181e;
    --on-brand: #ffffff;

    /* Status. "Down" stays in the brand's red family so the page never shows two
       competing reds — red anywhere on this UI means look here. */
    --ok: #1f7a55;
    --warn: #9a6a12;
    --down: #c0272d;

    /* Chips carry their own surface so they read on either theme. */
    --chip-info-fg: #4a5259;
    --chip-info-bg: #eef1f4;
    --chip-info-line: #dde2e7;
    --chip-warn-fg: #7d5510;
    --chip-warn-bg: #fdf4e3;
    --chip-warn-line: #f0dfbc;
    --chip-danger-fg: #a81f25;
    --chip-danger-bg: #fdeded;
    --chip-danger-line: #f5d2d3;

    --focus: #4b6ea9;
    --shadow: rgba(18, 22, 28, 0.12);
    --overlay: rgba(18, 22, 28, 0.16);

    --sans: 'Archivo', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme="dark"] {
    --ink: #101216;
    --panel: #171a1f;
    --panel-hi: #1d2127;
    --line: #272b33;
    --line-soft: #202429;
    --text: #e9eaec;
    --dim: #868d97;
    --dimmer: #5f666f;
    --field-bg: #101216;

    --brand: #ba2228;
    --brand-lift: #d6373d;
    --on-brand: #ffffff;

    --ok: #3fa97f;
    --warn: #d9a03a;
    --down: #d6373d;

    --chip-info-fg: #b6bdc6;
    --chip-info-bg: #1c2026;
    --chip-info-line: #2b3038;
    --chip-warn-fg: #d9a03a;
    --chip-warn-bg: #221c12;
    --chip-warn-line: #3a3021;
    --chip-danger-fg: #d6373d;
    --chip-danger-bg: #241616;
    --chip-danger-line: #3f2727;

    --focus: #9aa3af;
    --shadow: rgba(0, 0, 0, 0.45);
    --overlay: rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -0.01em; }

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---- top bar ---- */

.bar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}

.mark {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.mark img { height: 22px; width: auto; }

/* Two logo files: white wordmark for dark, near-black for light. Selectors are
   scoped to img so they outrank ".mark img" — a bare ".logo-dark" loses to it on
   specificity and both logos end up visible. */
img.logo-light { display: block; }
img.logo-dark { display: none; }
[data-theme="dark"] img.logo-light { display: none; }
[data-theme="dark"] img.logo-dark { display: block; }

.mark span {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dimmer);
    border-left: 1px solid var(--line);
    padding-left: 10px;
}

.bar-nav { display: flex; gap: 18px; font-size: 14px; }
.bar-nav a { color: var(--dim); text-decoration: none; }
.bar-nav a:hover { color: var(--text); }
.bar-owner { margin-left: auto; color: var(--dimmer); }

/* ---- theme toggle ---- */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--dim);
    cursor: pointer;
    flex-shrink: 0;
}

.theme-toggle:hover { color: var(--text); border-color: var(--dimmer); background: var(--panel-hi); }
.theme-toggle svg { width: 15px; height: 15px; display: block; }

.icon-sun { display: none; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* ---- shell ---- */

.shell { max-width: 940px; margin: 0 auto; padding: 32px 24px 64px; }

h1 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
}

.lede { color: var(--dim); font-size: 14px; margin: 0 0 24px; }

/* ---- site rows ---- */

.rows { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }

.row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 18px 15px 15px;
    background: var(--panel);
    border-bottom: 1px solid var(--line-soft);
    border-left: 3px solid var(--dimmer);
}

.row:last-child { border-bottom: 0; }
.row:hover { background: var(--panel-hi); }
.row.is-ok { border-left-color: var(--ok); }
.row.is-warn { border-left-color: var(--warn); }
.row.is-down { border-left-color: var(--down); }
.row.is-idle { border-left-color: var(--line); }
.row.is-paused { opacity: 0.5; }

.row-main { flex: 1; min-width: 0; }

.row-name {
    font-weight: 500;
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.row-env {
    font-family: var(--mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dimmer);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 1px 5px;
}

.row-meta {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--dim);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-meta .sep { color: var(--dimmer); padding: 0 6px; }
.row-meta .stale { color: var(--warn); }

.chip {
    font-family: var(--mono);
    font-size: 11.5px;
    padding: 4px 9px;
    border-radius: 4px;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
}

.chip-info { color: var(--chip-info-fg); border-color: var(--chip-info-line); background: var(--chip-info-bg); }
.chip-warning { color: var(--chip-warn-fg); border-color: var(--chip-warn-line); background: var(--chip-warn-bg); }
.chip-danger { color: var(--chip-danger-fg); border-color: var(--chip-danger-line); background: var(--chip-danger-bg); }

.row-actions { display: flex; align-items: center; gap: 8px; }

/* ---- controls ---- */

button, .btn {
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 7px 13px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 120ms, background 120ms;
}

button:hover, .btn:hover { border-color: var(--dimmer); background: var(--panel-hi); }
button:active, .btn:active { transform: translateY(0.5px); }

button.ghost { border-color: transparent; color: var(--dim); padding: 7px 10px; }
button.ghost:hover { color: var(--text); background: transparent; }

.icon-btn {
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 7px 9px;
    color: var(--dim);
    font-family: var(--mono);
    font-size: 12px;
    text-decoration: none;
}

.icon-btn:hover { color: var(--text); border-color: var(--dimmer); }

/* ---- forms ---- */

.form { max-width: 420px; }
.form.wide { max-width: 640px; }

.field { margin-bottom: 16px; }

.field label {
    display: block;
    font-size: 13px;
    color: var(--dim);
    margin-bottom: 5px;
}

.field input, .field select {
    width: 100%;
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--text);
    background: var(--field-bg);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 9px 11px;
}

.field input:focus, .field select:focus { border-color: var(--dimmer); }
.field .hint { font-size: 12px; color: var(--dimmer); margin-top: 5px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.actions { display: flex; gap: 10px; align-items: center; margin-top: 24px; }
.actions .spacer { flex: 1; }

.notice {
    border: 1px solid var(--line);
    border-left: 3px solid var(--warn);
    border-radius: 0 5px 5px 0;
    padding: 11px 14px;
    font-size: 13.5px;
    color: var(--dim);
    margin-bottom: 20px;
    background: var(--panel);
}

.notice.bad { border-left-color: var(--down); color: var(--chip-danger-fg); }
.notice code { font-family: var(--mono); color: var(--text); }

.empty {
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 40px 24px;
    text-align: center;
    color: var(--dim);
}

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
}

.secret {
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    word-break: break-all;
    background: var(--field-bg);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 12px;
    margin: 12px 0;
}

@media (max-width: 620px) {
    .row { flex-wrap: wrap; }
    .row-main { flex-basis: 100%; }
    .grid-2 { grid-template-columns: 1fr; }
    .bar-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

.validation-summary-valid { display: none; }
.field-validation-valid { display: none; }
.field-validation-error { color: var(--down); font-size: 12px; display: block; margin-top: 5px; }
.input-validation-error { border-color: var(--down) !important; }

/* ---- brand accents ----
   Filled red appears only where there is a single dominant action and no status to
   compete with. Never on the site rows: a column of red buttons would drown the rails. */

button.primary, .btn.primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    font-weight: 500;
}

button.primary:hover, .btn.primary:hover {
    background: var(--brand-lift);
    border-color: var(--brand-lift);
}

/* ---- auth screen ---- */

.auth {
    max-width: 380px;
    margin: 56px auto 0;
}

.auth-mark { margin-bottom: 28px; }
.auth-mark img { height: 34px; width: auto; }

/* ---- footer ---- */

.foot {
    max-width: 940px;
    margin: 0 auto;
    padding: 22px 24px 40px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--dimmer);
}

.foot a { color: var(--dim); text-decoration: none; }
.foot a:hover { color: var(--brand-lift); }
.foot .dot { color: var(--brand); }
.foot .right { margin-left: auto; }

@media (max-width: 620px) {
    .foot { flex-wrap: wrap; }
    .foot .right { margin-left: 0; flex-basis: 100%; }
}