/* Self-contained: the nginx CSP allows only 'self', so no CDN, no web fonts. */
:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --ink: #1b1f24;
  --muted: #6a737d;
  --line: #d8dee4;
  --ok: #1a7f37;
  --bad: #b42318;
  --accent: #0b5fff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.wrap { max-width: 1000px; margin: 0 auto; padding: 20px 16px 60px; }

/* Nav ------------------------------------------------------------------- */
.nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 10px 16px;
}
.nav a {
  color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 6px;
}
.nav a:hover { background: var(--bg); }
.nav .brand { font-weight: 700; color: var(--accent); }
.nav .logout { margin-left: auto; }
.nav .logout button {
  background: none; border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 12px; cursor: pointer; color: var(--muted); font-size: 14px;
}
.nav .logout button:hover { color: var(--bad); border-color: var(--bad); }

/* Typography ------------------------------------------------------------ */
h1 { font-size: 24px; margin: 20px 0 14px; }
h2 { font-size: 16px; margin: 26px 0 10px; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.nowrap { white-space: nowrap; }
.ok { color: var(--ok); font-weight: 600; }
.bad { color: var(--bad); font-weight: 600; }
.big { font-size: 26px; font-weight: 700; margin: 4px 0; }
.error {
  background: #fdecea; color: var(--bad); border: 1px solid #f5c2bd;
  padding: 10px 12px; border-radius: 6px;
}

/* Cards ----------------------------------------------------------------- */
.grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 14px;
}
.card h2 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase;
           letter-spacing: .04em; color: var(--muted); }
.card p { margin: 4px 0; }

/* Tables ---------------------------------------------------------------- */
table {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line);
         vertical-align: top; }
th { background: #fafbfc; font-size: 13px; color: var(--muted); font-weight: 600; }
tr:last-child td { border-bottom: none; }

/* Message text: dir="auto" in the template makes Arabic render RTL and
   English LTR per row; this just keeps long text readable. */
.msgtext { max-width: 520px; word-wrap: break-word; }

.pager { display: flex; gap: 14px; align-items: center; margin: 14px 0; }
.pager a { color: var(--accent); text-decoration: none; }

/* Login ----------------------------------------------------------------- */
.login-card {
  max-width: 360px; margin: 12vh auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 26px;
}
.login-card h1 { margin: 0; color: var(--accent); }
.login-card label { display: block; margin: 14px 0 4px; font-size: 13px; color: var(--muted); }
.login-card input {
  width: 100%; padding: 10px; border: 1px solid var(--line);
  border-radius: 6px; font-size: 15px;
}
.login-card button {
  width: 100%; margin-top: 18px; padding: 11px; border: none; border-radius: 6px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.login-card button:hover { filter: brightness(1.08); }

/* Footer ---------------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--line); padding: 14px 16px; color: var(--muted);
  font-size: 13px; text-align: center;
}
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; margin-right: 6px;
}
.badge.readonly { background: #e6f4ea; color: var(--ok); }

/* Mobile ----------------------------------------------------------------
   Boundary is 767/768 so there is exactly one breakpoint pair in this file;
   an eight-column priority table genuinely needs 768px. */
@media (max-width: 767px) {
  .wrap { padding: 14px 10px 50px; }
  .nav { gap: 2px; padding: 8px; }
  .nav a { padding: 7px 9px; font-size: 14px; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .msgtext { white-space: normal; min-width: 220px; }
  .login-card { margin: 6vh auto; }
}

/* ---------------------------------------------------------------------------
   Components added with the full dashboard (v0.2). Still entirely self-contained:
   the nginx CSP allows only 'self', so no CDN and no web fonts.
   --------------------------------------------------------------------------- */

/* Secondary nav ---------------------------------------------------------- */
.subnav {
  display: flex; flex-wrap: wrap; gap: 2px;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 6px 16px;
}
.subnav a {
  color: var(--muted); text-decoration: none; font-size: 13px;
  padding: 5px 10px; border-radius: 5px;
}
.subnav a:hover { background: var(--bg); color: var(--ink); }

/* Count badge in the nav ------------------------------------------------- */
.pill {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  background: var(--bad); color: #fff; border-radius: 10px;
  font-size: 12px; font-weight: 700;
}

/* Alerts ----------------------------------------------------------------- */
.alert {
  border: 1px solid var(--line); border-left-width: 4px;
  background: var(--card); border-radius: 6px;
  padding: 10px 12px; margin: 8px 0;
}
.alert-critical { border-left-color: var(--bad); }
.alert-warning  { border-left-color: #b58105; }
.alert-info     { border-left-color: var(--accent); }
.alert .action { margin-top: 6px; color: var(--muted); font-size: 12px; }

/* Search / filter bar ---------------------------------------------------- */
.searchbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
.searchbar input[type="search"], .searchbar input[type="date"] {
  flex: 1 1 240px; min-width: 0;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; background: var(--card); color: var(--ink);
}
.searchbar button {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); cursor: pointer; font-size: 14px; color: var(--ink);
}
.searchbar button:hover { border-color: var(--accent); color: var(--accent); }

/* Tabs ------------------------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0; }
.tabs a {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px;
  text-decoration: none; color: var(--muted); background: var(--card); font-size: 14px;
}
.tabs a.on { color: var(--accent); border-color: var(--accent); font-weight: 600; }

/* Pager ------------------------------------------------------------------ */
.pager { display: flex; gap: 14px; align-items: center; margin: 16px 0; }

/* Tag ------------------------------------------------------------------- */
.tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border: 1px solid var(--line); border-radius: 4px;
  font-size: 11px; color: var(--muted); text-transform: uppercase;
}

/* Message body ---------------------------------------------------------- */
.msgbody { font-size: 16px; margin: 0; white-space: pre-wrap; word-break: break-word; }

/* Small print for JSONB breakdowns. Wide content must scroll inside its own
   container so the page body never scrolls horizontally on a phone. */
.small { font-size: 11px; color: var(--muted); word-break: break-word; }
td.small, td.mono { max-width: 380px; overflow-wrap: anywhere; }

/* Review decision choices ----------------------------------------------- */
.choice {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); padding: 10px 12px; margin: 8px 0; cursor: pointer;
}
.choice:hover { border-color: var(--accent); }
.choice input { margin-top: 3px; }
.choice > span { display: block; }

textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; background: var(--card); color: var(--ink);
  resize: vertical;
}
input.short { width: 120px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; }

button.primary {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 6px; padding: 9px 16px; cursor: pointer; font-size: 14px; font-weight: 600;
}
button.primary:hover { filter: brightness(0.92); }
form button[value="reject"] {
  background: var(--card); color: var(--bad); border: 1px solid var(--line);
  border-radius: 6px; padding: 9px 16px; cursor: pointer; font-size: 14px;
}
form button[value="reject"]:hover { border-color: var(--bad); }

ul.inline { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* Tables must scroll inside themselves, never widen the page ------------- */
table { display: block; overflow-x: auto; max-width: 100%; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a; --card: #1c2024; --ink: #e6e8ea; --muted: #9aa3ab;
    --line: #2e343a; --ok: #4ac26b; --bad: #ff7b72; --accent: #6ea8ff;
  }
}

/* ===========================================================================
   Two layouts (v0.3)

   Below 768px the interface is cards, one decision per screen. At and above it
   is a sidebar plus dense sortable tables. These are different markup, not the
   same markup restyled: a table that merely survives on a phone is not a phone
   layout.

   Both markups are emitted on every page and CSS shows one. The alternatives
   were server-side device detection (unreliable behind a proxy) and a
   CSS-only transformation of a single markup (the "responsive copy" this
   design rejects). The cost is a doubled DOM, bounded by paginating at 50
   rows -- roughly 40KB on the largest page, which is cheaper than shipping a
   layout nobody designed.
   =========================================================================== */

:root { --accent-soft: #e8effe; }
@media (prefers-color-scheme: dark) { :root { --accent-soft: #1e2a3f; } }

.only-wide { display: none; }
.only-narrow { display: block; }

.shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
.main { min-width: 0; }

/* Mobile navigation: a checkbox-toggled drawer, so it needs no JavaScript.
   The checkbox and the drawer must stay siblings for the ~ selector to work. */
.drawer-toggle { position: absolute; opacity: 0; width: 0; height: 0; }
.topbar {
  display: flex; align-items: center; gap: .75rem;
  background: var(--card); border-bottom: 1px solid var(--line); padding: .6rem .75rem;
}
.drawer-open {
  display: inline-block; padding: .55rem .85rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; color: var(--muted);
}
.drawer { display: none; background: var(--card); border-bottom: 1px solid var(--line); }
.drawer-toggle:checked ~ .drawer { display: block; }
.drawer a {
  display: block; padding: .85rem 1rem; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.drawer form { padding: .85rem 1rem; }

/* Mobile records are cards: person and reason first, technical detail behind
   a disclosure, actions at thumb size. */
.pcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: .9rem 1rem; margin: 0 0 .75rem;
}
.pcard-head { display: flex; align-items: baseline; gap: .5rem; }
.pcard-rank { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 2.4rem; }
.pcard-name { font-weight: 600; font-size: 1.05rem; }
.pcard-name a { color: var(--ink); }
.pcard-why { margin: .45rem 0 .6rem; line-height: 1.5; }
.pcard-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.pcard details { margin-top: .6rem; }
.pcard .actions { display: flex; gap: .5rem; margin-top: .8rem; }
.pcard .actions button, .pcard .actions a {
  flex: 1; padding: .7rem; text-align: center; border-radius: 8px;
  border: 1px solid var(--line); background: none; color: var(--ink);
  cursor: pointer; text-decoration: none;
}

@media (min-width: 768px) {
  .only-wide { display: revert; }
  .only-narrow { display: none; }

  .shell { grid-template-columns: 15rem minmax(0, 1fr); }
  .sidebar {
    background: var(--card); border-right: 1px solid var(--line);
    padding: 1rem .7rem; display: block;
  }
  .sidebar .brand {
    display: block; font-weight: 700; color: var(--accent);
    padding: .4rem .6rem 1rem; text-decoration: none;
  }
  .sidebar a {
    display: block; padding: .5rem .6rem; border-radius: 8px;
    color: var(--ink); text-decoration: none; margin-bottom: 2px;
  }
  .sidebar a:hover { background: var(--bg); }
  .sidebar a.active { background: var(--accent-soft); font-weight: 600; }
  .sidebar form { margin-top: 1rem; padding: 0 .6rem; }
  .sidebar form button {
    width: 100%; background: none; border: 1px solid var(--line); border-radius: 8px;
    padding: .5rem; cursor: pointer; color: var(--muted);
  }

  .toolbar { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; margin: 0 0 .9rem; }
  .toolbar .grow { flex: 1; min-width: 12rem; }
  .toolbar input, .toolbar select {
    padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); color: var(--ink);
  }

  .tablewrap { overflow-x: auto; max-width: 100%; }
  table.dense { display: table; width: 100%; border-collapse: collapse; white-space: normal; }
  table.dense th {
    text-align: left; font-weight: 600; white-space: nowrap; color: var(--muted);
    font-size: .85rem; text-transform: uppercase; letter-spacing: .03em;
  }
  table.dense th a { color: var(--muted); text-decoration: none; }
  table.dense td, table.dense th {
    padding: .5rem .55rem; border-bottom: 1px solid var(--line); vertical-align: top;
  }
  table.dense td.num { font-variant-numeric: tabular-nums; text-align: right; }
  table.dense tr:hover td { background: var(--bg); }
}

/* Status badges. An unrecognised status renders neutral rather than borrowing
   a colour it has not earned -- see view.badge_for_status. */
.b {
  display: inline-block; padding: .12rem .55rem; border-radius: 999px;
  font-size: .8rem; line-height: 1.55; white-space: nowrap;
}
.b-ok { background: #e6f4ea; color: #14622c; }
.b-warn { background: #fdf0d5; color: #7a4b00; }
.b-bad { background: #fce8e6; color: #8c1d18; }
.b-neutral { background: var(--accent-soft); color: var(--muted); }

.flash {
  padding: .7rem .9rem; border-radius: 10px; margin: 0 0 1rem;
  border: 1px solid transparent;
}
.flash-ok { background: #e6f4ea; border-color: #a8d5b5; color: #14622c; }
.flash-warn { background: #fdf0d5; border-color: #e5c67a; color: #7a4b00; }
.flash-bad { background: #fce8e6; border-color: #e8a49e; color: #8c1d18; }

.pager { display: flex; gap: .35rem; flex-wrap: wrap; margin: 1rem 0; }
.pager a, .pager span {
  padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 8px;
  text-decoration: none; color: var(--ink);
}
.pager .current { font-weight: 700; background: var(--accent-soft); }

.tabs {
  display: flex; gap: .2rem; flex-wrap: wrap; margin: 0 0 1rem;
  border-bottom: 1px solid var(--line);
}
.tabs a {
  padding: .55rem .9rem; text-decoration: none; color: var(--muted);
  border-bottom: 2px solid transparent;
}
.tabs a.active { border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }

/* Destructive actions get a real page, not a JS dialog: it works without
   scripting, it is linkable, and a test can assert on it. */
.confirm-box {
  border: 1px solid #e8a49e; background: #fce8e6; border-radius: 12px; padding: 1rem 1.1rem;
}
.confirm-box .diff {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .9rem; margin: .8rem 0;
}
.confirm-box .actions { display: flex; gap: .6rem; align-items: center; margin-top: .9rem; }

button[disabled] { opacity: .5; cursor: not-allowed; }

/* Editable settings. Every field carries its own explanation and bounds, because a weight
   with no explanation is a number nobody dares change. */
.fieldgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; margin: 0 0 1.2rem; }
@media (min-width: 768px) {
  .fieldgrid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem 1.4rem; }
}
.field {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem;
}
.field.field-bad { border-color: #b42318; }
.field label { display: block; margin-bottom: .2rem; }
.field p { margin: .2rem 0 .45rem; }
.field input, .field select {
  width: 100%; padding: .5rem .55rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font: inherit;
}
.field input[type="checkbox"] { width: auto; }
.field .error { color: #b42318; font-weight: 600; }
form .actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
form .actions button {
  padding: .6rem 1.1rem; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; cursor: pointer; font: inherit;
}
form .actions a { color: var(--muted); }

@media (prefers-color-scheme: dark) {
  .b-ok, .flash-ok { background: #12321d; color: #a7e0b8; border-color: #245c33; }
  .b-warn, .flash-warn { background: #3a2c0c; color: #f0d191; border-color: #6b5216; }
  .b-bad, .flash-bad { background: #3a1614; color: #f3b2ac; border-color: #6e2b26; }
  .confirm-box { background: #3a1614; border-color: #6e2b26; }
}

/* --- action controls -------------------------------------------------------------
   Every action is a small form posting to /do/<command>. They sit inline in tables on
   desktop and stack into thumb-sized buttons on a phone. */
.actionform { display: inline-flex; gap: .35rem; align-items: center; margin: 0; }
.actionform input[name="reason"] {
  width: 9rem; padding: .35rem .45rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; font-size: .9rem;
}
.actionform button {
  padding: .35rem .7rem; border-radius: 6px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer; font: inherit; font-size: .9rem;
}
.actionform button:hover:not([disabled]) { border-color: var(--accent); }
.actionform-danger button:not([disabled]) { border-color: #b42318; color: #b42318; }

.actionrow { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.actioncell { display: flex; gap: .4rem; flex-wrap: wrap; }

.inlineform {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 0 0 1rem;
}
.inlineform select, .inlineform input {
  padding: .5rem .55rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font: inherit;
}
.inlineform button {
  padding: .5rem 1rem; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; cursor: pointer; font: inherit;
}

/* Wide tables scroll inside their own box so the page body never scrolls sideways. */
.tablewrap { overflow-x: auto; margin: 0 0 1rem; }

.summarycards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1.5rem; }
@media (min-width: 768px) { .summarycards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.scard { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .85rem; }
.scard-label { display: block; font-size: .8rem; color: var(--muted); }
.scard-value { display: block; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 767px) {
  .actionform { display: flex; width: 100%; }
  .actionform button { flex: 1; padding: .65rem; }
  .actionform input[name="reason"] { flex: 1; width: auto; }
  .inlineform { flex-direction: column; align-items: stretch; }
}

/* --- right-to-left ---------------------------------------------------------------
   Only the things that are genuinely directional are mirrored. Logical properties do
   most of the work; these rules cover what still uses physical sides, and the places
   where a value must NOT flip -- numbers, hashes and timestamps read left-to-right in
   Arabic too, and mirroring them would make them wrong rather than translated. */
[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid var(--line); }
[dir="rtl"] .nav .logout { margin-left: 0; margin-right: auto; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
[dir="rtl"] .pcard-rank { margin-left: .4rem; margin-right: 0; }
[dir="rtl"] .alert { border-left-width: 1px; border-right-width: 4px; }
[dir="rtl"] .tabs a.active { border-bottom-color: currentColor; }
[dir="rtl"] .pill { margin-left: 0; margin-right: 6px; }

/* Latin-script and numeric values keep their own direction inside an RTL page. */
[dir="rtl"] .mono,
[dir="rtl"] .num,
[dir="rtl"] td.num,
[dir="rtl"] .scard-value { direction: ltr; text-align: right; unicode-bidi: isolate; }
[dir="rtl"] .nowrap { unicode-bidi: isolate; }

.langswitch { display: flex; gap: .35rem; margin: .5rem 0; flex-wrap: wrap; }
.langswitch button {
  padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--muted); cursor: pointer; font: inherit; font-size: .85rem;
}
.langswitch button.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.langswitch form { margin: 0; }