/* ops: one stylesheet, dark only.
   An operator's tool that is read at night beside a terminal, so there is no
   theme switch and no brand: the portal is the thing customers see, this is
   the thing behind it. Nothing here is shared with the portal's CSS on
   purpose, so a change to one never moves the other. */

:root {
    --bg: #0b1220;
    --panel: #111a2b;
    --panel-2: #16223a;
    --line: #22304d;
    --ink: #e2e8f0;
    --ink-2: #94a3b8;
    --ink-3: #64748b;
    --blue: #3b82f6;
    --red: #f87171;
    --amber: #fbbf24;
    --green: #4ade80;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

a { color: #93c5fd; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; color: var(--ink-2); }

.ops-shell { min-height: 100vh; display: flex; flex-direction: column; }

.ops-bar {
    display: flex; align-items: center; gap: 18px;
    padding: 10px 20px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 10;
}
.ops-brand { font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; color: var(--ink); text-decoration: none; }
.ops-nav { display: flex; gap: 14px; }
.ops-link { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .85rem; }
.ops-link:hover, .ops-link.active { color: var(--ink); }
.ops-spacer { flex: 1 1 auto; }
.ops-who { color: var(--ink-3); font-size: .82rem; }

.ops-main { padding: 18px 20px 60px; }
.ops-empty { min-height: 100vh; display: grid; place-items: center; padding: 20px; }

.ops-h1 { font-size: 1.3rem; margin: 0 0 4px; font-weight: 700; }
.ops-muted { color: var(--ink-3); }
.small { font-size: .8rem; }

/* ── The filter row ──────────────────────────────────────────────── */
.ops-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 14px 0 10px; }
.ops-sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }
.ops-chip {
    border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
    border-radius: 999px; padding: 3px 11px; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.ops-chip:hover { border-color: #3b4d72; color: var(--ink); }
.ops-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.ops-chip.bad { border-color: #7f1d1d; color: var(--red); }

.ops-btn {
    border: 1px solid var(--blue); background: var(--blue); color: #fff;
    border-radius: 6px; padding: 5px 13px; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.ops-btn:disabled { opacity: .55; cursor: default; }
.ops-btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.ops-link-btn { background: none; border: 0; color: #93c5fd; cursor: pointer; font-size: .82rem; padding: 0; }

.ops-note { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 7px 11px; margin: 8px 0; font-size: .82rem; color: var(--ink-2); }
.ops-note.bad { border-color: #7f1d1d; color: #fecaca; background: #2a1215; }

/* ── The table ───────────────────────────────────────────────────── */
.ops-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.ops-table th {
    text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-3); padding: 7px 9px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.ops-table td { padding: 6px 9px; border-bottom: 1px solid #172236; vertical-align: middle; }
.ops-table tbody tr:hover > td { background: #131e33; }
.ops-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ops-table .nowrap { white-space: nowrap; color: var(--ink-2); }
.ops-title { max-width: 46rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr.is-new > td:first-child { border-left: 3px solid var(--red); }
tr.is-open > td { background: #131e33; }

.ops-detail-row > td { background: #0e1729 !important; }
.ops-detail { padding: 8px 4px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.ops-quote {
    background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--blue);
    border-radius: 4px; padding: 8px 11px; white-space: pre-wrap; font-size: .87rem;
}
.ops-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; }
.ops-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }

.ops-select, .ops-input, .ops-textarea {
    background: var(--panel); border: 1px solid var(--line); color: var(--ink);
    border-radius: 5px; padding: 4px 8px; font: inherit; font-size: .82rem;
}
.ops-select { min-width: 8.5rem; }
.ops-input { width: 8.5rem; }
.ops-input.wide, .ops-textarea { width: 100%; }
.ops-textarea { resize: vertical; }
.ops-select:focus, .ops-input:focus, .ops-textarea:focus { outline: 2px solid #1d4ed8; outline-offset: -1px; }

/* ── Pills ───────────────────────────────────────────────────────── */
.ops-pill {
    display: inline-block; border-radius: 999px; padding: 1px 9px;
    font-size: .74rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.ops-pill.site { background: #172554; border-color: #1e40af; color: #93c5fd; }
.k-error, .k-pullfailed, .k-pushfailed, .k-replyfailed { background: #3f1d1d; border-color: #7f1d1d; color: #fca5a5; }
.k-job { background: #3f1d1d; border-color: #7f1d1d; color: #fca5a5; }
.k-sync { background: #3a2a10; border-color: #854d0e; color: #fcd34d; }
.k-ratelock { background: #1e1b4b; border-color: #3730a3; color: #c7d2fe; }
.k-feedback, .k-problem, .k-idea, .k-question { background: #0b3b3f; border-color: #0e7490; color: #a5f3fc; }
.k-pull, .k-status, .k-owner, .k-note, .k-reply, .k-close { background: #1e293b; border-color: #334155; color: #cbd5e1; }

.s-new { background: #3f1d1d; border-color: #7f1d1d; color: #fca5a5; }
.s-investigating { background: #172554; border-color: #1e40af; color: #93c5fd; }
.s-waiting { background: #3a2a10; border-color: #854d0e; color: #fcd34d; }
.s-fixed { background: #052e16; border-color: #15803d; color: #86efac; }
.s-closed { background: #1e293b; border-color: #334155; color: #94a3b8; }
/* Feedback has a vocabulary of its own: New, Answered, Closed. Answered is
   the one a ticket never has, and it means done, so it reads like Fixed. */
.s-answered { background: #052e16; border-color: #15803d; color: #86efac; }

/* ── Sign in ─────────────────────────────────────────────────────── */
.ops-signin {
    width: min(380px, 100%);
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px 26px;
}
.ops-signin form { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.ops-signin .ops-btn { margin-top: 14px; }