/* RNC VAT Portal — internal operations tool.
   Clean, compact, industrial. Steel-blue accent. Bilingual LTR/RTL. */

:root {
  --bg: #eef1f4;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --ink: #171c22;
  --ink-2: #3d4753;
  --muted: #6b7683;
  --line: #dde3e9;
  --line-strong: #c7d0d9;
  --accent: #17456b;      /* RNC steel blue */
  --accent-2: #1f6fb2;    /* brighter steel */
  --accent-ink: #ffffff;
  --focus: #2f80c4;
  --pos: #1f7a4d;
  --pos-bg: #e7f4ec;
  --warn: #9a6a12;
  --warn-bg: #fbf1dc;
  --danger: #a83232;
  --danger-bg: #fbe9e9;
  --radius: 8px;
  --radius-sm: 6px;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans Hebrew", "Segoe UI Hebrew", sans-serif;
  --shadow: 0 1px 2px rgba(16, 27, 38, 0.06), 0 1px 1px rgba(16, 27, 38, 0.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- App shell ---------- */
.app-header {
  background: var(--accent);
  color: var(--accent-ink);
  border-bottom: 3px solid var(--accent-2);
}
.app-header .bar {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.wordmark {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
  white-space: nowrap;
}
.wordmark .rnc {
  font-weight: 800;
  background: #fff;
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.wordmark:hover { text-decoration: none; }
.nav { display: flex; gap: 4px; align-items: center; }
.nav a {
  color: #d6e4f0;
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 13.5px;
}
.nav a:hover { background: rgba(255, 255, 255, 0.12); text-decoration: none; color: #fff; }
.nav a.active { background: rgba(255, 255, 255, 0.18); color: #fff; }
.header-right { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }
.lang-toggle { display: flex; gap: 2px; align-items: center; font-size: 13px; }
.lang-toggle a { color: #cfe0ef; padding: 3px 7px; border-radius: 5px; }
.lang-toggle a.on { background: #fff; color: var(--accent); font-weight: 700; }
.lang-toggle .sep { color: rgba(255,255,255,0.4); }
.user-chip { font-size: 12.5px; color: #cfe0ef; display: flex; align-items: center; gap: 8px; }
.user-chip form { margin: 0; }
.btn-signout {
  background: rgba(255,255,255,0.14);
  color: #fff; border: 0; cursor: pointer;
  padding: 5px 10px; border-radius: 5px; font-size: 12.5px; font-family: inherit;
}
.btn-signout:hover { background: rgba(255,255,255,0.26); }

.main {
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px 20px 60px;
}

/* ---------- Summary cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 3px; background: var(--line-strong);
}
.card.accent::before { background: var(--accent-2); }
.card.total::before { background: var(--accent); }
.card.warn::before { background: var(--warn); }
.card .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted); font-weight: 600; margin-bottom: 6px;
}
.card .value {
  font-family: var(--mono);
  font-size: 19px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.3px;
}
.card .value.sm { font-size: 17px; }
.card.total .value { color: var(--accent); }
.card.warn .value { color: var(--warn); }
a.card-link { text-decoration: none; color: inherit; display: block; transition: border-color .12s, box-shadow .12s; }
a.card-link:hover { border-color: var(--accent-2); box-shadow: 0 3px 12px rgba(16, 27, 38, 0.12); }
a.card-link::after { content: "↗"; position: absolute; top: 9px; inset-inline-end: 11px; font-size: 12px; color: var(--warn); opacity: 0.6; }

/* ---------- Info icon + tooltip ---------- */
.info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-strong);
  color: var(--muted); font-size: 9px; font-weight: 700; font-style: normal;
  cursor: help; position: relative; margin-inline-start: 5px; vertical-align: middle;
  font-family: var(--sans); line-height: 1; user-select: none;
}
.info:hover { border-color: var(--accent-2); color: var(--accent); }
.info::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 7px); inset-inline-start: 50%; transform: translateX(-50%);
  background: #1f2937; color: #fff; padding: 8px 11px; border-radius: 7px;
  font-size: 11.5px; font-weight: 400; line-height: 1.45; letter-spacing: 0;
  white-space: normal; width: 230px; text-align: start;
  box-shadow: 0 6px 20px rgba(16, 27, 38, 0.25);
  opacity: 0; visibility: hidden; transition: opacity 0.12s ease; z-index: 40; pointer-events: none;
}
.info::before {
  content: ""; position: absolute; top: calc(100% + 2px); inset-inline-start: 50%;
  transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: #1f2937;
  opacity: 0; visibility: hidden; transition: opacity 0.12s ease; z-index: 41;
}
.info:hover::after, .info:hover::before { opacity: 1; visibility: visible; }
.card .info { color: var(--line-strong); border-color: var(--line); }
.card .info:hover { color: var(--accent); border-color: var(--accent-2); }

/* ---------- Filters ---------- */
.filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.filters form {
  display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end;
}
.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); font-weight: 600;
}
.field select, .field input[type="text"], .field input[type="search"] {
  font-family: var(--sans); font-size: 13.5px; color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 7px 9px; min-width: 120px; height: 34px;
}
.field input[type="search"] { min-width: 220px; }
.field select:focus, .field input:focus {
  outline: none; border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(47, 128, 196, 0.15);
}
.field.check { flex-direction: row; align-items: center; gap: 7px; height: 34px; }
.field.check label { text-transform: none; font-size: 13px; letter-spacing: 0; color: var(--ink-2); font-weight: 500; }
.filter-actions { display: flex; gap: 8px; align-items: flex-end; margin-inline-start: auto; }

.btn {
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  border-radius: var(--radius-sm); padding: 8px 14px; height: 34px;
  cursor: pointer; border: 1px solid transparent; display: inline-flex;
  align-items: center; gap: 6px; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #103a5a; text-decoration: none; }
.btn-ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); text-decoration: none; }
.btn-sm { height: 30px; padding: 5px 11px; font-size: 12.5px; }

/* ---------- Table ---------- */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}
.table-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--muted);
  font-size: 12.5px;
}
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td {
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  text-align: start; vertical-align: middle; white-space: nowrap;
}
table.grid thead th {
  position: sticky; top: 0; background: var(--surface-2);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); font-weight: 700; z-index: 1;
  border-bottom: 1px solid var(--line-strong);
}
table.grid tbody tr:hover { background: #f2f7fb; }
table.grid tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: end; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.rowid a { font-family: var(--mono); font-weight: 600; }
.muted { color: var(--muted); }
.dash { color: var(--line-strong); }
/* Multi-value id cells (AWB / invoice / declaration lists) wrap within a capped
   width instead of stretching the row and pushing other columns off-screen. */
table.grid td.wrap-ids { white-space: normal; overflow-wrap: anywhere; max-width: 190px; }

/* Bucket tag */
.bucket { font-size: 11px; padding: 2px 7px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.bucket.import { background: #e8eef6; color: #244b74; }
.bucket.service { background: #eef1f4; color: #55636f; }

/* Status badges */
.status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 12px;
  border: 1px solid transparent; white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-review { color: #9a6a12; background: var(--warn-bg); }
.st-missing_invoice { color: var(--danger); background: var(--danger-bg); }
.st-missing_declaration { color: #b45309; background: #fbecdd; }
.st-processed { color: var(--pos); background: var(--pos-bg); }
/* used for the copy_status badge on the data-quality page */
.st-missing_document { color: var(--danger); background: var(--danger-bg); }

/* Inline status editor (dashboard) */
.status-quick { margin: 0; display: flex; align-items: center; gap: 7px; }
.status-select {
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: 20px; background: var(--surface);
  padding: 4px 24px 4px 11px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%236b7683' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; max-width: 180px;
}
[dir="rtl"] .status-select { padding: 4px 11px 4px 24px; background-position: left 9px center; }
.status-select:hover { border-color: var(--accent-2); }
.status-select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(47,128,196,0.15); }
.sdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.sdot.st-review { background: var(--warn); }
.sdot.st-missing_invoice { background: var(--danger); }
.sdot.st-missing_declaration { background: #b45309; }
.sdot.st-processed { background: var(--pos); }

/* Document buttons */
.docbtns { display: flex; gap: 5px; flex-wrap: wrap; }
.docbtn {
  font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
}
.docbtn:hover { background: var(--surface-2); border-color: var(--accent-2); color: var(--accent); text-decoration: none; }
.docbtn.disabled { opacity: 0.4; pointer-events: none; }
.docbtn svg.ic, .bundle-note svg.ic { width: 13px; height: 13px; flex: 0 0 auto; vertical-align: -2px; }
.bundle-note svg.ic, .support-note svg.ic, .weak-note svg.ic { width: 15px; height: 15px; }
.docbtn.bundle { border-color: #d8b062; color: #8a5a12; background: #fdf6e8; }
/* Declaration attached to a service-VAT row for reference only. The weak
   variant is deliberately louder: its match is not corroborated by AWB. */
.docbtn.support { border-color: #b9cbe0; color: #35597f; background: #f2f7fc; }
.docbtn.weak { border-color: #d8b062; color: #7d5210; background: #fdf3e2; }

/* Pagination */
.pager { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 14px; }
.pager a, .pager span {
  padding: 6px 11px; border-radius: 6px; border: 1px solid var(--line-strong);
  font-size: 13px; background: var(--surface); color: var(--ink-2);
}
.pager span.current { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.pager span.disabled { opacity: 0.4; }

/* ---------- Detail page ---------- */
.detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.detail-head h1 { font-size: 20px; margin: 0; font-family: var(--mono); letter-spacing: -0.3px; }
.crumb { font-size: 13px; color: var(--muted); }
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px;
}
.panel > h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted);
  margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 700;
}
.panel .body { padding: 14px 16px; }
.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: start; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
dl.kv dt { color: var(--muted); font-size: 12.5px; }
dl.kv dd { margin: 0; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
dl.kv dd.txt { font-family: var(--sans); }

.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
}
.doc-row .did { font-family: var(--mono); font-weight: 600; font-size: 12.5px; }
.doc-row .hint { color: var(--muted); font-size: 12px; }
.doc-row .rel { margin-inline-start: auto; display: flex; gap: 6px; align-items: center; }
.tag { font-size: 10.5px; padding: 2px 7px; border-radius: 10px; background: #e8eef6; color: #244b74; font-weight: 600; }
.tag.bundle { background: #fdf6e8; color: #8a5a12; }
.bundle-note {
  font-size: 12.5px; color: #8a5a12; background: #fdf6e8; border: 1px solid #ead9b0;
  border-radius: var(--radius-sm); padding: 9px 12px; margin-top: 10px;
}
.tag.support { background: #f2f7fc; color: #35597f; }
.tag.weak { background: #fdf3e2; color: #7d5210; }
.support-note {
  font-size: 12.5px; color: #35597f; background: #f4f8fc; border: 1px solid #cfdded;
  border-radius: var(--radius-sm); padding: 9px 12px; margin-top: 10px;
}
.weak-note {
  font-size: 12.5px; color: #7d5210; background: #fdf3e2; border: 1px solid #ead9b0;
  border-radius: var(--radius-sm); padding: 9px 12px; margin-top: 10px; font-weight: 600;
}
/* Why an expected declaration is absent, so the row does not read as an
   unexplained omission. */
.gap-note {
  font-size: 12.5px; color: #5b5f66; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 9px 12px; margin-top: 10px;
}
.gap-note svg.ic { width: 15px; height: 15px; }
/* Figures that belong to the linked declarations, not to this row's claim.
   Visually separated so they can never be read as claimed on this row. */
.related-block {
  margin-top: 14px; padding: 12px 13px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.related-head {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.related-block .kv { margin: 0; }
.related-block .kv dd { color: var(--ink-2); }
.related-note { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin-top: 9px; }
.kv dd.claimed { font-weight: 700; }

/* ---------- Row detail: status context ---------- */
.status-with-label { display: inline-flex; align-items: center; gap: 6px; }
.status-with-label .sl { font-size: 11.5px; color: var(--muted); }
/* Says why a flagged status is understandable, without touching the status. */
.context-banner {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px;
  padding: 11px 14px; font-size: 13px; line-height: 1.5;
  color: #35597f; background: #f4f8fc; border: 1px solid #cfdded;
  border-inline-start: 3px solid var(--accent-2); border-radius: var(--radius-sm);
}
.context-banner svg.ic { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
.context-banner .cb-line { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; font-weight: 600; }
.context-banner .cb-sub { margin-top: 3px; color: var(--ink-2); font-weight: 400; }
.context-banner .inv { font-size: 12px; color: var(--muted); }

/* Packet document checklist */
.panel.checklist .body { padding-bottom: 12px; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.check-list li {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 12.5px;
}
.check-list .kind {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: #244b74; min-width: 11ch;
}
.check-list .kind svg.ic { width: 14px; height: 14px; }
.check-list .kind.invoice { color: #6b4d12; }
.check-list .num { font-family: var(--mono); font-weight: 600; min-width: 16ch; }
.check-list .where { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; color: var(--ink-2); }
.check-list .where.soft { color: var(--muted); font-size: 11.5px; }
.ev-status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.ev-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* A support declaration is reference material, not a task: quieter than a
   document the row actually claims. */
.doc-row.secondary { background: var(--surface); border-style: dashed; opacity: 0.92; }
.doc-row.secondary .did, .doc-row.secondary .hint { color: var(--muted); }
.tag.claimed { background: #eef2f6; color: #55636f; font-weight: 600; }

/* ---------- View switch: shipment packets vs VAT ledger rows ---------- */
.view-switch { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.seg a + a { border-inline-start: 1px solid var(--line); }
.seg a:hover { background: var(--surface-2); color: var(--accent); text-decoration: none; }
.seg a.on { background: var(--accent); color: #fff; }
.seg svg.ic { width: 14px; height: 14px; }
.view-hint { font-size: 12px; color: var(--muted); max-width: 70ch; }

/* ---------- Processing queue ----------
   The daily surface. One line per claim row, one readiness word, one action.
   No packet arithmetic here by design: that lives behind the audit toggle. */
.view-switch.sub { margin-top: -4px; }
.seg.small a { padding: 5px 11px; font-size: 12px; font-weight: 600; }
.rd {
  display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 9px;
  border-radius: 12px; border: 1px solid transparent; white-space: nowrap;
}
.rd-ready { color: var(--pos); background: var(--pos-bg); border-color: #bfe0cd; }
.rd-processed { color: #55636f; background: #eef1f4; border-color: var(--line-strong); }
.rd-missing_document { color: var(--danger); background: var(--danger-bg); border-color: #edc9c9; }
.rd-needs_review { color: var(--warn); background: var(--warn-bg); border-color: #ead9b0; }
.rd-not_claimable { color: var(--muted); background: var(--surface-2); border-color: var(--line-strong); }
/* Fixed layout: the evidence sentence is long and would otherwise push the
   action button off the edge of the table. */
table.queue { table-layout: fixed; width: 100%; }
/* .grid sets white-space: nowrap for the ledger table; the queue's evidence
   sentence has to wrap or it runs straight through the next columns. */
table.queue th, table.queue td {
  vertical-align: top; overflow-wrap: anywhere; white-space: normal;
}
table.queue th:nth-child(1), table.queue td:nth-child(1) { width: 7%; }
table.queue th:nth-child(2), table.queue td:nth-child(2) { width: 7%; }
table.queue th:nth-child(3), table.queue td:nth-child(3) { width: 7.5%; }
table.queue th:nth-child(4), table.queue td:nth-child(4) { width: 11.5%; }
table.queue th:nth-child(5), table.queue td:nth-child(5) { width: 7%; }
table.queue th:nth-child(6), table.queue td:nth-child(6) { width: 7.5%; }
table.queue th:nth-child(7), table.queue td:nth-child(7) { width: 9.5%; }
table.queue th:nth-child(8), table.queue td:nth-child(8) { width: 18%; }
table.queue th:nth-child(9), table.queue td:nth-child(9) { width: 13%; }
table.queue th:nth-child(10), table.queue td:nth-child(10) { width: 12%; }
/* Chips wrap rather than clip when a label is long in either language. */
table.queue .status, table.queue .bucket { white-space: normal; }
.ev-note { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin-top: 4px; }
/* Isolate so a Latin invoice number never reorders the Hebrew around it. */
.ev-note .mono { font-family: var(--mono); color: var(--ink-2); unicode-bidi: isolate; }
.ev-note.related { color: var(--accent-2); }
.ev-note.resolved { color: var(--pos); font-weight: 600; }
table.queue td.action .btn { white-space: nowrap; padding-inline: 9px; }
.btn-sm { font-size: 12px; padding: 5px 11px; }

/* ---------- Shipment packet cards ----------
   The accountant's work surface: one card per real shipment, carrying every
   claim row built on the same paperwork. The money still belongs to the rows. */
.packet-list { display: flex; flex-direction: column; gap: 12px; }
.table-meta.plain { padding: 0 2px 2px; }
.packet-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  border-inline-start: 3px solid var(--line-strong);
}
.packet-card.flagged { border-inline-start-color: var(--danger); }
.packet-card.done { border-inline-start-color: var(--pos); }
.pc-head {
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
  padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.pc-id h3 { margin: 0; font-size: 14px; font-weight: 700; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.pc-id h3 .pt { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.pc-id h3 .pt.carrier { font-family: var(--sans); font-size: 14px; font-weight: 700; }
.pc-id h3 .pt .lb { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pc-id h3 .sep { color: var(--line-strong); }
.pc-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
/* Money hierarchy: the matched total leads, the whole packet is context. */
.pc-money { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.pc-money .pm-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.pc-money .pm-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent); margin-bottom: 3px; text-align: end;
}
.pc-money .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; display: block; }
.pc-money .val { font-family: var(--mono); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-money .total .val { color: var(--accent); }
.pc-money .total .lbl { color: var(--accent-2); }
/* Full-width strip under the header: the wider packet total, clearly ranked
   below the filtered figure the accountant actually searched for. */
.pc-secondary {
  font-size: 11.5px; line-height: 1.55; color: var(--muted);
  padding: 8px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.pc-secondary .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
[dir="rtl"] .pc-money { text-align: start; }
.ctx-line { font-size: 10.5px; color: var(--muted); font-family: var(--sans); font-weight: 400; margin-top: 2px; }
table.pc-rows td.num .ctx-line { text-align: end; }
.pc-evidence { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ev { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 12px; border: 1px solid transparent; }
.ev.ok { color: var(--pos); background: var(--pos-bg); border-color: #bfe0cd; }
.ev.no { color: var(--danger); background: var(--danger-bg); border-color: #edc9c9; }
.ev.soft { color: var(--muted); background: var(--surface); border-color: var(--line-strong); }
.pc-flag {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 9px 16px; font-size: 12.5px; color: #7d5210; background: #fdf3e2;
  border-bottom: 1px solid #ead9b0;
}
.pc-flag .status { margin-inline-start: 4px; }
table.pc-rows { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.pc-rows th, table.pc-rows td { padding: 8px 16px; text-align: start; border-top: 1px solid var(--line); }
table.pc-rows thead th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  border-top: 0; white-space: nowrap;
}
table.pc-rows td.num, table.pc-rows th.num { text-align: end; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.pc-rows .mono { font-family: var(--mono); }
table.pc-rows .via { color: var(--muted); font-size: 11.5px; display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: baseline; }
/* Packet members that fall outside the current filter: shown so the packet is
   whole, greyed so they are never mistaken for search results. */
table.pc-rows tr.unmatched { background: var(--surface-2); }
table.pc-rows tr.unmatched td { color: var(--muted); }
.pc-foot {
  font-size: 11.5px; line-height: 1.5; color: var(--muted);
  padding: 9px 16px; border-top: 1px solid var(--line); background: var(--surface-2);
}
table.pc-rows .ctx {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 9px; padding: 1px 6px; margin-inline-start: 6px;
}

/* ---------- Related shipment / document packet ----------
   The workflow grain: other claim rows built on the same shipment evidence.
   Deliberately quieter than the claim panels above it, because nothing here
   is a claim - it is orientation, so a document is not chased on the wrong
   row and a declaration is not processed twice. */
.rowlink {
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  color: var(--accent-2); white-space: nowrap;
}
.rowlink.current { color: var(--ink-2); text-decoration: none; }
.doc-claimed {
  font-size: 12px; color: #35597f; padding: 2px 11px 0;
  margin-top: -4px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap;
}
/* A blank invoice on an import row is normal, not a gap: the carrier invoice
   is claimed on its own service row. */
.invoice-note {
  display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5;
  color: #35597f; background: #f4f8fc; border: 1px solid #cfdded;
  border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 10px;
}
.invoice-note.none { color: #7d5210; background: #fdf3e2; border-color: #ead9b0; }
.invoice-note svg.ic { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }
.invoice-note .line-2, .packet-warn .line-2 { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }

.panel.packet .body { padding-bottom: 4px; }
.packet-intro { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0 0 10px; max-width: 96ch; }
.packet-warn {
  display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5;
  color: #7d5210; background: #fdf3e2; border: 1px solid #ead9b0;
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px;
}
.packet-warn svg.ic { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }
.packet-warn .mono { font-family: var(--mono); font-size: 12.5px; }
.decl-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.decl-list li {
  display: flex; gap: 4px 12px; align-items: baseline; flex-wrap: wrap;
  padding-top: 5px; border-top: 1px solid rgba(154, 106, 18, 0.18);
}
.decl-list li:first-child { border-top: 0; padding-top: 0; }
.decl-list .mono { min-width: 15ch; }
.decl-list .on { display: flex; gap: 3px; align-items: baseline; flex-wrap: wrap; }
.decl-list .claimed-on { color: #6f5a2f; font-size: 11.5px; display: flex; gap: 5px; align-items: baseline; flex-wrap: wrap; }
.packet-processed { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; font-size: 12.5px; }

table.packet-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.packet-table th, table.packet-table td {
  padding: 8px 12px; border-top: 1px solid var(--line); text-align: start; vertical-align: top;
}
table.packet-table thead th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted);
  border-top: 1px solid var(--line); background: var(--surface-2); white-space: nowrap;
}
table.packet-table td.mono, table.packet-table .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.packet-table td.num { text-align: end; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.packet-table th.num { text-align: end; }
/* A freight invoice can carry twenty AWBs. Showing them all makes one row
   taller than the rest of the table, so the cell shows the first few and the
   full list stays available on hover and on the row's own page. */
table.packet-table td.awb {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); white-space: nowrap;
}
table.packet-table td.awb span { display: block; }
table.packet-table td.awb .more { font-family: var(--sans); color: var(--muted); font-size: 11px; }
table.packet-table td.why { display: table-cell; }
table.packet-table td.why .tag { margin-inline-end: 4px; white-space: nowrap; }
table.packet-table tr.is-current { background: #f4f8fc; }
table.packet-table tr.is-current td { color: var(--ink-2); }
table.packet-table .here { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.packet-foot { font-size: 11.5px; line-height: 1.5; color: var(--muted); padding: 10px 16px 12px; border-top: 1px solid var(--line); }

/* Status editor */
.status-form { display: flex; flex-direction: column; gap: 10px; }
.status-form select, .status-form textarea {
  font-family: var(--sans); font-size: 13.5px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 8px 9px; background: var(--surface-2); color: var(--ink);
}
.status-form textarea { min-height: 62px; resize: vertical; }
.status-form select:focus, .status-form textarea:focus {
  outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(47,128,196,0.15);
}

table.history { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.history th, table.history td { padding: 7px 12px; border-bottom: 1px solid var(--line); text-align: start; }
table.history thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
table.history td.when { font-family: var(--mono); color: var(--muted); white-space: nowrap; }

/* ---------- Data quality ---------- */
.dq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.dq-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px;
}
.dq-card .n { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--accent); }
.dq-card.warn .n { color: var(--warn); }
.dq-card.danger .n { color: var(--danger); }
.dq-card .l { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
/* Clarifier under a count whose plain label would otherwise be read as an
   alarm — e.g. a blank field is not the same as a missing document. */
.dq-card .sub { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin-top: 6px; }
.section-title { font-size: 15px; font-weight: 700; margin: 20px 0 10px; color: var(--ink); }
.intro { color: var(--muted); font-size: 13px; margin: 2px 0 16px; }
.risk { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.risk.HIGH { background: var(--danger-bg); color: var(--danger); }
.risk.MEDIUM { background: var(--warn-bg); color: var(--warn); }
.risk.LOW { background: var(--pos-bg); color: var(--pos); }

.empty { padding: 26px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--accent); background: linear-gradient(160deg, #10314c 0%, #17456b 60%, #1f6fb2 160%); }
.login-card { background: var(--surface); border-radius: 12px; padding: 32px 30px; width: 340px; box-shadow: 0 18px 50px rgba(0,0,0,0.28); }
.login-card .brand { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; }
.login-card .brand .rnc { font-weight: 800; background: var(--accent); color: #fff; padding: 3px 8px; border-radius: 5px; font-size: 15px; }
.login-card .brand .t { font-weight: 700; font-size: 17px; color: var(--ink); }
.login-card .sub { color: var(--muted); font-size: 12.5px; margin-bottom: 20px; }
.login-card .field { margin-bottom: 14px; }
.login-card .field label { margin-bottom: 5px; }
.login-card input { width: 100%; padding: 10px 11px; font-size: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); }
.login-card input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(47,128,196,0.15); }
.login-card .btn-primary { width: 100%; justify-content: center; height: 40px; margin-top: 4px; }
.login-err { background: var(--danger-bg); color: var(--danger); border: 1px solid #eecaca; border-radius: var(--radius-sm); padding: 9px 11px; font-size: 12.5px; margin-bottom: 14px; }

.flash { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }
.flash.success { background: var(--pos-bg); color: var(--pos); border: 1px solid #bfe2cd; }

/* ---------- RTL ---------- */
[dir="rtl"] body, [dir="rtl"] { font-family: var(--sans); }
[dir="rtl"] .header-right { margin-inline-start: auto; }
[dir="rtl"] table.grid th, [dir="rtl"] table.grid td { text-align: start; }
[dir="rtl"] td.num, [dir="rtl"] th.num { text-align: end; }
[dir="rtl"] .card .value { direction: ltr; text-align: end; }
[dir="rtl"] dl.kv dd { direction: ltr; text-align: start; }
[dir="rtl"] .mono, [dir="rtl"] .rowid a, [dir="rtl"] .doc-row .did { direction: ltr; unicode-bidi: embed; }
/* Reference numbers stay LTR in Hebrew: an AWB list rendered RTL moves its
   pipe separators to the wrong end and reads as a different number. */
[dir="rtl"] .rowlink,
[dir="rtl"] table.packet-table td.awb { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] table.packet-table td.awb { text-align: end; }

/* Responsive */
@media (max-width: 1200px) { .cards { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } .nav { display: none; } }

/* Empty search result that is actually an answer: the invoice exists but is
   deliberately not claimed. Without this the accountant sees a blank table. */
.unclaimed-hint {
  font-size: 12.5px; color: #35597f; background: #f4f8fc; border: 1px solid #cfdded;
  border-radius: var(--radius-sm); padding: 12px 14px; text-align: start;
}
.unclaimed-hint ul { margin: 8px 0 0; padding-inline-start: 18px; }
.unclaimed-hint li { margin: 5px 0; line-height: 1.6; }
.unclaimed-hint .docbtn { margin-inline-start: 6px; }
td.reason { font-size: 12px; color: var(--ink-2); max-width: 380px; white-space: normal; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   Operations panel and header badge.
   State is carried by a text label as well as colour, so the meaning survives
   a greyscale screen or a colour-blind reader.
   --------------------------------------------------------------------------- */
.ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 18px; }
.ops-card { border: 1px solid #d9dee5; border-left-width: 4px; border-radius: 8px; padding: 16px 18px; background: #fff; }
.ops-card h2 { margin: 0 0 4px; font-size: 15px; }
.ops-card h3 { margin: 14px 0 6px; font-size: 13px; color: #444; }
.ops-state { font-size: 12px; font-weight: 600; margin-bottom: 10px; color: #333; }
.ops-note { font-size: 12px; color: #555; margin: 8px 0 0; }
.ops-reason { font-size: 12px; color: #6b4f00; margin: 6px 0 0; word-break: break-word; }
.ops-list { margin: 6px 0 0 18px; font-size: 12px; }
.ops-total strong { font-size: 15px; }
.ops-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.ops-table th, .ops-table td { text-align: start; padding: 4px 6px; border-bottom: 1px solid #eef1f4; vertical-align: top; }
.ops-card .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; word-break: break-all; }

.ops-ok, .ops-available, .ops-completed { border-left-color: #2e7d4f; }
.ops-reported { border-left-color: #4a6fa5; }
.ops-not_run, .ops-not_activated, .ops-deferred_by_owner, .ops-not_performed { border-left-color: #8a8f96; }
.ops-attention, .ops-failed, .ops-blocked { border-left-color: #b3261e; }
.ops-unavailable { border-left-color: #8a8f96; background: #fbfbfc; }
.ops-running { border-left-color: #b26a00; }

.ops-badge { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; margin-inline-end: 10px; flex-wrap: wrap; }
.ops-badge .ob { font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: 10px; border: 1px solid #c9d0d8; color: #2b2f35; background: #f4f6f8; white-space: nowrap; }
.ops-badge .ob-ok, .ops-badge .ob-available, .ops-badge .ob-completed { border-color: #2e7d4f; color: #1e5a38; background: #eaf5ee; }
.ops-badge .ob-attention, .ops-badge .ob-failed, .ops-badge .ob-blocked { border-color: #b3261e; color: #8c1d18; background: #fdeceb; }
.ops-badge .ob-running { border-color: #b26a00; color: #7a4900; background: #fdf3e6; }

/* Shipment queue: state at a glance. A partly-done shipment is amber rather
   than green, because calling it finished while a row is still open is the
   confusion this view exists to remove. */
.status.st-todo   { background:#f3f4f6; color:#4b5563; }
.status.st-partly { background:#fef3c7; color:#92400e; }
.status.st-done   { background:#dcfce7; color:#166534; }
tr.ship-done td   { opacity:.62; }
tr.ship-partly td { background:#fffdf5; }
.chip { display:inline-block; padding:4px 10px; margin:0 6px 6px 0; border-radius:14px;
        background:#f3f4f6; color:#374151; font-size:13px; text-decoration:none; }
.chip.on   { background:#1f2937; color:#fff; }
.chip.warn { background:#fee2e2; color:#991b1b; }
.chip.soft { background:#fef3c7; color:#92400e; }
.chip b { margin-left:5px; }
.tag.warn { background:#fee2e2; color:#991b1b; }
.context-banner.warn { border-color:#fecaca; background:#fef2f2; }

/* Shipment filters. The summary line matters as much as the controls: after
   narrowing to a month she needs the value of what is on screen, not of the
   whole ledger. */
.ship-filters { margin:0; }
.filter-row { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:10px 0 6px; }
.filter-row label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:#666; }
.filter-row label.grow { flex:1 1 220px; }
.filter-row select, .filter-row input[type=search] {
  padding:6px 8px; border:1px solid #d4d4d4; border-radius:5px; font-size:14px; min-width:110px; }
.filter-row input[type=search] { width:100%; }
.filter-summary { font-size:13px; color:#444; padding:8px 0 2px; border-top:1px solid #eee; }