/* RMA 2.0 base styles — hand-written, no framework. Light + dark. */

:root {
  --bg: #f5f7f9;
  --surface: #ffffff;
  --text: #1c2430;
  --muted: #5b6673;
  --border: #e2e6ea;
  --accent: #0097d7;        /* Seasonic blue */
  --accent-ink: #ffffff;
  --chip-bg: #eef2f5;
  --chip-ink: #3a4652;
  --radius: 8px;
  --maxw: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161b;
    --surface: #1a2027;
    --text: #e6eaee;
    --muted: #97a3af;
    --border: #2a323b;
    --chip-bg: #232b34;
    --chip-ink: #c3ced8;
  }
}

* { 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(--text);
  line-height: 1.5;
  font-size: 15px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }

/* Header */
.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .65rem 1.2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topbar .brand { font-weight: 700; color: var(--text); font-size: 1.05rem; }
.topbar nav { display: flex; gap: 1.1rem; align-items: center; margin-left: auto; }
.topbar .user { color: var(--muted); font-size: .88rem; }

/* Layout */
.container { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.2rem 3rem; }
h1 { font-size: 1.55rem; margin: .1rem 0 1rem; }
h1 .badge { vertical-align: middle; }
h2 {
  font-size: 1.05rem; margin: 1.7rem 0 .6rem;
  padding-bottom: .3rem; border-bottom: 1px solid var(--border);
}

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1rem;
}

/* Key/value grid */
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem 1.4rem; }
.kv > div { display: flex; flex-direction: column; gap: .1rem; }
.kv .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.kv .v { font-weight: 500; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
th {
  background: var(--chip-bg); color: var(--muted); font-weight: 600;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .02em;
}
tbody tr:last-child td { border-bottom: none; }

/* Bits */
.badge {
  display: inline-block; padding: .12rem .5rem; border-radius: 100px;
  background: var(--chip-bg); color: var(--chip-ink); font-size: .74rem; font-weight: 600;
}
.badge.type { text-transform: capitalize; }
.mono, .rma-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.attachment-thumb { display: block; max-width: 120px; max-height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.muted { color: var(--muted); }
.empty { color: var(--muted); font-style: italic; padding: .4rem 0; }

/* Forms */
input[type=text], input[type=number], input[type=search], input[type=date], select {
  padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: .95rem;
}
button, .btn {
  display: inline-block; padding: .45rem .95rem; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); border-radius: 6px;
  font-size: .9rem; cursor: pointer; font-family: inherit;
}
button:hover { filter: brightness(1.05); }
button.secondary { background: transparent; color: var(--accent); }
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Status phases — colour by LIFECYCLE PHASE, not per status (~16 statuses would
   be noise). Unknown statuses stay visibly unknown; never silently meaningful.
   --------------------------------------------------------------------------- */
.badge.phase-pending { background: #e8ecef; color: #45505c; }  /* waiting on us   */
.badge.phase-active  { background: #d9edfa; color: #0b5f86; }  /* in progress     */
.badge.phase-warn    { background: #fdeecd; color: #8a5a00; }  /* needs attention */
.badge.phase-good    { background: #d8f0df; color: #1d6b39; }  /* resolved well   */
.badge.phase-bad     { background: #fbdedb; color: #9d2f26; }  /* resolved badly  */
.badge.phase-admin   { background: #e7e0f7; color: #58399c; }  /* administrative  */
.badge.phase-unknown { background: #e8ecef; color: #45505c; border: 1px dashed #9aa6b2; }
.badge.phase-none    { background: transparent; color: var(--muted); }

@media (prefers-color-scheme: dark) {
  .badge.phase-pending { background: #262e37; color: #b6c2ce; }
  .badge.phase-active  { background: #123243; color: #8dcdf0; }
  .badge.phase-warn    { background: #3b2f14; color: #f0c675; }
  .badge.phase-good    { background: #17361f; color: #8fd7a5; }
  .badge.phase-bad     { background: #3a1f1c; color: #f0a59d; }
  .badge.phase-admin   { background: #2b2440; color: #c3aef5; }
  .badge.phase-unknown { background: #262e37; color: #b6c2ce; border-color: #5a6672; }
}

/* Units table */
table.units th.sel, table.units td.sel { width: 1%; padding-right: 0; }
table.units td.rowtoggle { text-align: right; }
/* The checkbox's own hit target is tiny; move the cell's padding onto a <label> wrapping it
   so the whole cell — not just the checkbox itself — toggles selection. Native <label>
   behavior, no JS needed, and it leaves every other cell (serial numbers, etc.) free for
   normal text selection. */
td.cell-select { padding: 0; }
td.cell-select label { display: block; padding: .5rem .7rem; cursor: pointer; }
.unit-row.selected > td { background: rgba(0, 151, 215, .06); }
.detail-row > td { background: var(--chip-bg); }
.detail-row .kv { margin-bottom: .6rem; }
.blocked-list ul { margin: .25rem 0 0; padding-left: 1.1rem; font-size: .82rem; }
.blocked-list .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
button.linkish {
  background: none; border: none; padding: 0; font: inherit; font-size: .8rem;
  color: var(--accent); cursor: pointer; text-decoration: underline;
}

/* Action bar (selection-driven) */
.action-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-top: .5rem; padding: .6rem .9rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 -2px 10px rgba(0,0,0,.06);
}
/* Must beat the UA's [hidden]{display:none} — `display:flex` above would win otherwise. */
.action-bar[hidden] { display: none; }
.action-bar .count { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.bar-actions { display: flex; gap: .4rem; flex-wrap: wrap; flex: 1; }

/* Action buttons — tone by CONSEQUENCE */
.bar-actions .action {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; font-size: .85rem; border-radius: 6px;
  font-family: inherit; cursor: pointer;
}
/* Every button is rendered up front and hidden; these must beat `display: inline-flex`
   above, exactly as .action-bar[hidden] has to beat `display: flex`. */
.bar-actions .action[hidden],
.bar-actions .none[hidden],
.bar-actions .partial[hidden] { display: none; }

.bar-actions .action[disabled] { cursor: not-allowed; opacity: .75; }
.bar-actions .tone-primary  { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.bar-actions .tone-negative { background: transparent; border: 1px solid #c0392b; color: #c0392b; }
.bar-actions .tone-neutral  { background: transparent; border: 1px solid var(--border); color: var(--text); }

/* Emoji, not the ✉ text glyph: that one renders as a hairline outline in the UI font and
   is illegible at button size. Sized up a little and nudged onto the text baseline. */
.bar-actions .mail-marker,
.confirm-actions .mail-marker,
.mail-marker {
  font-size: 1.05em; line-height: 1; position: relative; top: .04em;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.bar-actions .partial {
  font-size: .7rem; padding: .05rem .3rem; border-radius: 100px;
  background: rgba(0,0,0,.14);
}

/* ---------------------------------------------------------------------------
   Data problems. Deliberately loud: 1.0 hides colliding rows entirely, so the
   screen looks fine while a unit is invisible and uneditable.
   --------------------------------------------------------------------------- */
.problems {
  background: #fff8e6; border: 1px solid #f0d9a0; border-left: 4px solid #e0a800;
  border-radius: var(--radius); padding: .9rem 1.1rem; margin: 0 0 1.2rem;
}
.problems h3 { margin: 0 0 .4rem; font-size: .95rem; color: #8a5a00; }
.problems ul { margin: 0 0 .5rem; padding-left: 1.2rem; font-size: .88rem; }
.problems li { margin: .25rem 0; }
.problems p { margin: 0; font-size: .8rem; }
@media (prefers-color-scheme: dark) {
  .problems { background: #332a14; border-color: #5a4a20; }
  .problems h3 { color: #f0c675; }
}

/* Layout A — indented paired rows */
table.units.paired td { border-bottom: 0; }
table.units.paired tr.in-row > td { border-top: 1px solid var(--border); padding-top: .55rem; }
table.units.paired tbody tr:first-child > td { border-top: 0; }
.out-row > td { padding-top: .2rem; padding-bottom: .45rem; }
.out-row .mono, .out-row .badge { opacity: .95; }
.connector { color: var(--muted); padding-left: .5rem; font-size: 1rem; }
.empty-outcome td { font-size: .85rem; padding-bottom: .5rem; }
.unit-row.flagged > td { background: rgba(224, 168, 0, .09); }
.unattached-head td {
  background: #fff8e6; color: #8a5a00; font-size: .85rem; font-weight: 600;
  padding: .5rem .8rem; border-top: 2px solid #e0a800;
}
@media (prefers-color-scheme: dark) {
  .unattached-head td { background: #332a14; color: #f0c675; }
}

/* Layout B — journey cards */
.journeys { display: flex; flex-direction: column; gap: .8rem; }
.journey {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .85rem 1rem;
}
.journey.flagged { border-color: #e0a800; box-shadow: inset 3px 0 0 #e0a800; }
.journey.orphans { border-color: #e0a800; background: #fff8e6; }
@media (prefers-color-scheme: dark) { .journey.orphans { background: #332a14; } }
.journey-head {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding-bottom: .5rem; margin-bottom: .6rem; border-bottom: 1px solid var(--border);
  font-size: .85rem;
}
.journey-head .n { font-weight: 600; }
.pick { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.leg { padding: .25rem 0 .35rem; }
.leg-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.leg-main { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .15rem 0; }
.leg-main .big { font-size: 1rem; font-weight: 600; }
.leg-main .model { color: var(--muted); }
.leg-meta { font-size: .78rem; }
.leg .arrow { color: var(--muted); font-size: 1rem; margin: .3rem 0 .1rem; }
.leg.pending .leg-main { font-style: italic; }

/* Admin forms */
.field { display: block; }
.field > .k {
  display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); margin-bottom: .2rem;
}
textarea {
  width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; line-height: 1.5; padding: .6rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); resize: vertical;
}
.inline-form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
button.ph {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem;
  padding: .2rem .5rem; border-radius: 4px;
  border: 1px solid var(--border); background: var(--chip-bg); color: var(--text);
  cursor: pointer;
}
button.ph:hover { border-color: var(--accent); color: var(--accent); }

.setting { padding: .7rem 0; border-bottom: 1px solid var(--border); }
.setting:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-meta { margin: .3rem 0 0; font-size: .74rem; }

/* Trix (vendored, optional — falls back to the textarea when absent) */
trix-editor {
  min-height: 22rem; padding: .7rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
trix-toolbar .trix-button-group { border-color: var(--border); }
trix-editor:empty::before { color: var(--muted); }

/* Email preview */
.mail-preview { width: 100%; height: 70vh; border: 0; background: #fff; display: block; }
pre.source {
  white-space: pre-wrap; word-break: break-word; font-size: .75rem;
  background: var(--chip-bg); padding: .8rem; border-radius: var(--radius);
  max-height: 24rem; overflow: auto;
}
.preview-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.preview-links a {
  font-size: .82rem; padding: .25rem .6rem; border-radius: 5px;
  border: 1px solid var(--border); text-decoration: none;
}
.preview-links a:hover { border-color: var(--accent); }

/* Notices */
.notice { padding: .6rem .9rem; border-radius: 6px; background: var(--chip-bg); margin-bottom: 1rem; }
.notice.error { background: #fdecea; color: #a12b21; }
@media (prefers-color-scheme: dark) { .notice.error { background: #3a211f; color: #f0a59d; } }

/* Flash messages — one hop only (Session::takeFlash) */
.flash {
  padding: .6rem .9rem; border-radius: 6px; margin-bottom: 1rem;
  font-size: .9rem; border: 1px solid transparent;
}
.flash-ok    { background: #d8f0df; color: #1d6b39; border-color: #b6e0c3; }
.flash-warn  { background: #fdeecd; color: #8a5a00; border-color: #ecd7a2; }
.flash-error { background: #fdecea; color: #a12b21; border-color: #f3c6c1; }
@media (prefers-color-scheme: dark) {
  .flash-ok    { background: #14301d; color: #8fd6a5; border-color: #2c5a3a; }
  .flash-warn  { background: #332a14; color: #e2bc6a; border-color: #5a4a20; }
  .flash-error { background: #3a211f; color: #f0a59d; border-color: #5e2f2a; }
}

/* Action confirm screen */
.confirm-form .action-fields { white-space: normal; min-width: 20rem; }
.confirm-form .field { display: flex; flex-direction: column; gap: .15rem; margin: .2rem 0; }
.confirm-form .field-label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
}
.confirm-form .field select,
.confirm-form .field input[type="text"],
.confirm-form .field input[type="date"],
.confirm-form .field input[type="number"] { width: 100%; max-width: 32rem; }
.confirm-form .field-missing select,
.confirm-form .field-missing input { border-color: #c0392b; }
.confirm-form .field-missing .field-label { color: #c0392b; }

/* Yes/no facts about the parcel — a row of checkboxes, not a column of text boxes. */
.confirm-form .field-check {
  flex-direction: row; align-items: center; gap: .45rem;
  margin: .1rem 0; font-size: .85rem; cursor: pointer;
}
.confirm-form .field-check input { margin: 0; }

.confirm-actions {
  display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0 0;
  position: sticky; bottom: 0; padding: .8rem 0;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.confirm-actions .action {
  font-size: .95rem; padding: .55rem 1.1rem; border-radius: 6px; cursor: pointer;
}
.confirm-actions .action[disabled] { cursor: not-allowed; opacity: .55; }
.confirm-actions .tone-primary  { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.confirm-actions .tone-negative { background: #c0392b; border: 1px solid #c0392b; color: #fff; }
.confirm-actions .tone-neutral  { background: transparent; border: 1px solid var(--border); color: var(--text); }
.confirm-actions .partial { margin-left: .4rem; opacity: .8; font-size: .85em; }

/* ---------------------------------------------------------------------------
   Dashboard — the staff hub. Replaces 1.0's dashboard.php.
   --------------------------------------------------------------------------- */
.search { display: flex; gap: .5rem; align-items: center; margin: 0 0 1.4rem; }
.search input[type="search"] {
  flex: 1; max-width: 46rem; padding: .55rem .8rem; font-size: .95rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
}
.search input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Counts first, list second: the question is "what needs doing", not "what exists". */
.buckets { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.8rem; }
.bucket {
  position: relative; flex: 1 1 8rem; min-width: 8rem; text-decoration: none;
  display: flex; flex-direction: column; gap: .1rem;
  padding: .7rem .9rem .8rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  overflow: hidden;
}
.bucket:hover { border-color: var(--accent); }
.bucket.is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bucket-n { font-size: 1.5rem; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bucket-l { font-size: .78rem; color: var(--muted); }
/* A thin state stripe, so the buckets read as a sequence rather than six identical tiles. */
.bucket-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.bucket-bar.phase-pending { background: #9aa6b2; }
.bucket-bar.phase-active  { background: var(--accent); }
.bucket-bar.phase-warn    { background: #e0a800; }
.bucket-bar.phase-good    { background: #2f9e5a; }
.bucket-bar.phase-bad     { background: #c0392b; }
.bucket-bar.phase-unknown { background: var(--border); }

.small { font-size: .78rem; }

/* ---------------------------------------------------------------------------
   Editing — correcting data, as opposed to moving a case through the process.
   --------------------------------------------------------------------------- */
h2 .section-edit { float: right; font-size: .78rem; font-weight: 400; }
.detail-edit { margin: .6rem 0 0; font-size: .8rem; }

.edit-form .edit-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .8rem 1.2rem; margin-bottom: 1.4rem;
}
.edit-form .field { display: flex; flex-direction: column; gap: .2rem; }
/* Free text gets the full width — a defect description in a 15rem box invites one-word
   answers, which is most of why 1.0's defect column is so thin. */
.edit-form .field-wide { grid-column: 1 / -1; }
.edit-form .field-label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
}
.edit-form input[type="text"],
.edit-form input[type="date"],
.edit-form select,
.edit-form textarea {
  width: 100%; padding: .45rem .6rem; font: inherit; font-size: .92rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
}
.edit-form textarea { resize: vertical; line-height: 1.45; }
.lede { font-size: .95rem; max-width: 46rem; margin-bottom: 1.2rem; }

/* Internal comment — a scratchpad, so it should feel like one: no ceremony, saves itself. */
.comment-box {
  display: flex; flex-direction: column; gap: .3rem;
  margin: 0 0 1.2rem; padding: .8rem 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.comment-head { display: flex; align-items: baseline; gap: .6rem; }
.comment-head .k {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
}
.comment-box textarea {
  width: 100%; resize: vertical; min-height: 2.6rem;
  padding: .45rem .6rem; font: inherit; font-size: .9rem; line-height: 1.45;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text);
}
.comment-box textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface); }


/* The status word is the only thing telling you whether your note survived, so the failure
   state has to be as visible as the success one. */
.comment-status { font-size: .72rem; color: var(--muted); }
.comment-status.is-pending { color: var(--muted); font-style: italic; }
.comment-status.is-ok      { color: #1d6b39; }
.comment-status.is-error   { color: #c0392b; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .comment-status.is-ok    { color: #8fd7a5; }
  .comment-status.is-error { color: #f0a59d; }
}

.dashboard-note { margin: -.8rem 0 1.4rem; }
.pager {
  display: flex; align-items: center; gap: 1.2rem;
  margin: .9rem 0 0; font-size: .85rem;
}
/* Archived rows stay legible but visibly secondary — they are findable, not current. */
.unit-row.is-archived td { opacity: .62; }

.filters { margin: 0 0 1.4rem; align-items: flex-end; }
.filters .field > .k { margin-bottom: .3rem; }