/* Rafræni riddarinn — the house style.
 *
 * A cool grey-blue ground with a serif display face and one red accent, against which
 * everything else is deliberately quiet. The tokens are named for their ROLE rather
 * than their colour, so the whole application follows a palette change without a
 * single component needing to know what colour it is wearing.
 */
:root {
  color-scheme: light;

  /* Surfaces */
  --paper: #F1F3F1;
  --paper-raised: #FFFFFF;
  --paper-sunken: #F7F8F8;

  /* Ink, in three weights: primary, secondary, and the quiet one used for labels. */
  --ink: #14202B;
  --ink-muted: #4C5B67;
  --ink-faint: #82909B;

  /* Rules. The soft one separates rows; the plain one separates sections. */
  --line: #D3D9DC;
  --line-soft: #E5E9EA;

  /* Navy carries structure and emphasis; red is the brand and is used sparingly. */
  --navy: #1A3A57;
  --navy-deep: #102A42;
  --navy-soft: #E2E9EF;
  --accent: #1A3A57;
  --accent-strong: #102A42;
  --accent-soft: #E2E9EF;
  --brand: #D0102F;

  /* States, each with a tint for backgrounds. */
  --ok: #14654A;
  --ok-soft: #E1EDE7;
  --warn: #B4501E;
  --warn-soft: #F8E9E1;
  --danger: #9A2B22;
  --danger-soft: #F5E3E1;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --radius: 5px;
  --radius-lg: 6px;
}
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Headings carry the serif. It is the one place the display face appears, which is
   what keeps it feeling like a voice rather than decoration. */
h1, h2, h3, .section-title, .doc-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
h1 { font-size: 22px; font-weight: 700; margin: 0; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }

/* The quiet label: small, uppercase, widely tracked. Used for column headings and
   field labels, where it reads as structure rather than as content. */
th, .field-label, label, .tab-count, .rounding-hint > span:first-child {
  font-feature-settings: "tnum" 0;
}
thead th, table th {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-faint);
}

/* Figures line up and never jitter as they change. */
.num, td.num, th.num, .money, .tab-count {
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); }

header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Half again as tall as it was, so larger logos have room. */
  padding: 21px 28px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 18px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper-raised);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
header.topbar h1 { font-size: 1.15rem; margin: 0; font-weight: 700; }
header.topbar .tagline { color: var(--ink-muted); font-size: 0.85rem; display: flex; align-items: center; gap: 8px; }
header.topbar a.back { font-size: 0.85rem; text-decoration: none; }
header.topbar a.back-btn {
  font-size: 0.82rem;
  text-decoration: none;
  padding: 5px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: white;
}
header.topbar a.back-btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

.unsaved-badge {
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.75rem;
  font-weight: 600;
}
#save-btn-sticky { padding: 5px 12px; font-size: 0.82rem; }

.nav-arrow-btn {
  padding: 2px 10px;
  font-size: 1rem;
  line-height: 1.4;
}
.nav-arrow-btn:disabled { opacity: 0.3; }

nav.mainnav { display: flex; gap: 4px; }
nav.mainnav a {
  text-decoration: none;
  color: var(--ink-muted);
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: var(--radius-lg);
}
nav.mainnav a:hover { background: var(--accent-soft); color: var(--accent-strong); }
nav.mainnav a.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }

.header-menu { position: relative; display: flex; align-items: center; }
.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink-muted);
  cursor: pointer;
  flex: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.header-icon-btn svg { width: 17px; height: 17px; display: block; }
.header-icon-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.header-icon-btn-open { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.header-icon-btn-locked { cursor: default; }
.header-icon-btn-locked:hover { background: var(--paper-raised); border-color: var(--line); color: var(--ink-muted); }

.header-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 8px;
  z-index: 40;
}
.header-dropdown-right { left: auto; right: 0; }
.header-dropdown-title {
  padding: 6px 10px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.header-dropdown-title:first-line { color: var(--ink); }
.header-dropdown-subtitle { font-size: 0.72rem; font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--ink-muted); }
.header-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-lg);
  background: none;
  color: var(--ink);
  font-size: 0.87rem;
  font-family: inherit;
  cursor: pointer;
}
.header-dropdown-item:hover { background: var(--accent-soft); color: var(--accent-strong); }
.header-dropdown-item.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.header-dropdown-item.header-dropdown-danger { color: var(--danger); }
.header-dropdown-item.header-dropdown-danger:hover { background: var(--danger-soft); }
.header-dropdown-divider { height: 1px; background: var(--line); margin: 6px 4px; }
.header-dropdown-form { padding: 4px 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.header-dropdown-form label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-muted); }
.header-dropdown-form input { font-size: 0.87rem; padding: 6px 8px; }
.header-dropdown-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.header-dropdown-status { font-size: 0.8rem; color: var(--danger); margin-top: 2px; }

.access-tree { padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); margin: 6px 0; }
.access-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.access-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  background: var(--paper-raised);
  transition: border-color 0.15s, background 0.15s;
}
.access-card:has(.access-entity:checked) { border-color: var(--accent); background: var(--accent-soft); }
.access-entity-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.access-entity-toggle input { width: auto; flex: none; }
.access-entity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 2px 7px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.access-entity-name { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.access-dept-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.access-dept-empty { margin-top: 9px; font-size: 0.78rem; color: var(--ink-muted); font-style: italic; }
.access-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.78rem;
  color: var(--ink-muted);
  cursor: pointer;
  user-select: none;
}
.access-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.access-chip:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); font-weight: 600; }
.access-chip:hover { border-color: var(--accent); }
.access-save-status { color: var(--ink-muted); font-size: 0.85rem; align-self: center; }

select.unassigned { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); font-weight: 600; }

main { max-width: none; margin: 0; padding: 24px 28px 80px; }
@media (max-width: 600px) {
  main { padding: 14px 12px 48px; }
}

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  overflow-x: auto;
}

.upload-card { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.upload-card input[type="file"] { flex: 1; min-width: 220px; }

.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  color: var(--ink-muted);
  margin-bottom: 24px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.dropzone .dz-hint { font-size: 0.82rem; margin-top: 6px; }
.dropzone .browse-link { color: var(--accent); text-decoration: underline; cursor: pointer; }

.upload-progress { margin-top: 14px; text-align: left; font-size: 0.85rem; }
.upload-progress li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.upload-progress .u-status { font-family: var(--font-mono); font-size: 0.78rem; white-space: nowrap; }
.upload-progress .u-ok { color: var(--accent-strong); }
.upload-progress .u-error { color: var(--danger); }
.upload-progress .u-pending { color: var(--ink-muted); }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar input[type="search"], .toolbar select { max-width: 260px; }
.inline-save { display: inline-flex; gap: 4px; }
td.editable-cell input, td.editable-cell select { padding: 4px 6px; font-size: 0.85rem; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

tr.dirty-row { background: var(--warn-soft); }
tr.dirty-row:hover { background: var(--warn-soft); }
tr.history-row td { background: var(--paper); padding: 10px 16px; }
tr.history-row table { font-size: 0.85rem; }

button {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 8px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: white;
  cursor: pointer;
}
button:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
button.secondary:hover { background: var(--accent-soft); border-color: var(--accent); }
button.danger { background: var(--danger); border-color: var(--danger); }
button.danger:hover { filter: brightness(0.9); }

.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs button {
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--line);
}
.tabs button.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); font-weight: 600; }

.bulk-assign { display: flex; gap: 6px; align-items: center; }
.bulk-assign select { width: auto; min-width: 130px; padding: 6px 8px; font-size: 0.85rem; }

th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--accent-strong); }
.sort-arrow { font-size: 0.75em; color: var(--accent-strong); }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }
tbody tr:hover { background: var(--accent-soft); }
tbody tr td:first-child a { text-decoration: none; font-weight: 600; }

.pill {
  display: inline-block;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  padding: 2px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pill.needs_review { background: var(--warn-soft); color: var(--warn); }
.pill.ready { background: var(--accent-soft); color: var(--accent-strong); }
.pill.pending_approval { background: var(--accent-soft); color: var(--accent-strong); }
.pill.approved { background: var(--accent-soft); color: var(--accent-strong); }
.pill.rejected { background: var(--danger-soft); color: var(--danger); }
.pill.credit-note { background: var(--warn-soft); color: var(--warn); margin-left: 6px; }

.empty { color: var(--ink-muted); padding: 32px 0; text-align: center; }

/* Invoice review page */
.review-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .review-layout { grid-template-columns: 1fr; } }

.preview-frame {
  width: 100%;
  height: 78vh;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
}
.preview-image { width: 100%; max-height: 78vh; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-raised); }

.field-group { display: grid; gap: 4px; margin-bottom: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) {
  .field-row { grid-template-columns: 1fr; }
}
label { font-size: 0.75rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; }
input, select, textarea {
  font-family: inherit;
  font-size: 0.92rem;
  padding: 7px 9px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
/* Checkboxes and radios are not text fields. Stretching them to 100% made them absorb
   all the free space in any flex row, pushing everything else to the far edge — which
   is what made the account list look right-aligned. */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  padding: 0;
  border: none;
  background: none;
  flex: none;
  accent-color: var(--accent);
}

/* A checkbox in a table row is a target, not a decoration. The default 13px box asks
   for a precise click on every row of a list somebody is working down, and a row
   selector is the control on the screen that gets used most. Scoped to tables so
   settings checkboxes sitting inside sentences keep their text-sized proportions.
   The two selection columns get room to match. */
table input[type="checkbox"] {
  width: 17px;
  height: 17px;
  cursor: pointer;
}
table th:first-child input[type="checkbox"],
table td:first-child input[type="checkbox"] {
  margin: 0;
  vertical-align: middle;
}
/* The whole cell is clickable, so a slightly-off click still lands. */
table td:first-child:has(> input[type="checkbox"]) {
  cursor: pointer;
}

/* --- The calendar behind every date field ------------------------------------
   Typing stays the fast path; this is for the times the question is "which day was
   that?" rather than "write this date down". */
.dp-panel {
  position: fixed;
  z-index: 1200;
  width: 244px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  font-size: 0.85rem;
}
.dp-head {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
}
.dp-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  text-transform: capitalize;
}
.dp-nav {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  line-height: 1;
}
.dp-nav:hover { background: var(--paper-sunken); color: var(--ink); }
.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dp-weekday {
  text-align: center;
  font-size: 0.7rem;
  color: var(--ink-muted);
  padding-bottom: 2px;
}
.dp-day {
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.dp-day:hover { background: var(--paper-sunken); }
.dp-day.is-today { border-color: var(--line); font-weight: 600; }
.dp-day.is-selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.dp-blank { height: 28px; }
.dp-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}
.dp-foot button {
  padding: 3px 9px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.8rem;
}
.dp-foot button:hover { background: var(--paper-sunken); }

/* --- The creditor's card ------------------------------------------------------
   Opened from the supplier's name, wherever it is shown. Editing is the ordinary
   reason for opening it, so the fields get the room; changing which creditor an
   invoice belongs to is the rare reason and sits quietly at the foot. */
.sc-window { max-width: 640px; min-height: 0; }
.sc-body { padding: 14px 16px 16px; }
.sc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.sc-field { display: flex; flex-direction: column; gap: 3px; }
.sc-field.is-wide { grid-column: 1 / -1; }
.sc-label {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted);
}
.sc-active { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: .88rem; }
.sc-badge {
  display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 6px;
  font-size: .8rem; color: var(--accent-strong); background: var(--accent-soft);
}
.sc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line);
}
.sc-more { font-size: .82rem; color: var(--ink-muted); }
/* Deliberately understated: a link, not a button. Swapping the creditor is a real
   thing to want and a rare one, and a primary button here would invite it. */
.sc-switch {
  background: none; border: none; padding: 2px 0;
  font-size: .82rem; color: var(--ink-muted); text-decoration: underline;
  cursor: pointer; white-space: nowrap;
}
.sc-switch:hover { color: var(--accent-strong); }
.sc-status { font-size: .78rem; color: var(--ink-muted); min-width: 52px; text-align: right; }
.sc-status.is-ok { color: var(--ok); }
.sc-status.is-bad { color: var(--danger); }

@media (max-width: 560px) {
  .sc-grid { grid-template-columns: 1fr; }
}
textarea { resize: vertical; }

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.88rem;
}
.notice-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin-left: 8px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
}
.notice-icon svg { width: 15px; height: 15px; display: block; }
.notice-icon:hover { filter: brightness(0.95); }
.notice-icon-failed { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
.notice-icon-skipped { color: var(--ink-muted); background: var(--line); border-color: var(--line); }
.notice-icon-flagged { color: var(--warn); background: var(--warn-soft); border-color: var(--warn); }
.notice-icon-ok { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent); }

.checks-list { list-style: none; margin: 0; padding: 0; }
.checks-list li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.checks-list li:last-child { border-bottom: none; }
.check-icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.check-icon svg { width: 100%; height: 100%; display: block; }
.check-pass .check-icon { color: var(--accent-strong); }
.check-fail .check-icon { color: var(--danger); }
.check-detail { display: block; color: var(--ink-muted); font-size: 0.85em; margin-top: 2px; }
.check-ack-btn, .check-reextract-btn {
  display: block;
  margin-top: 3px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.8em;
  text-decoration: underline;
  cursor: pointer;
  width: auto;
}
.check-ack-btn:hover, .check-reextract-btn:hover { color: var(--accent-strong); }
.check-reextract-btn:disabled { color: var(--ink-muted); cursor: default; text-decoration: none; }

.sibling-invoices { font-size: 0.82rem; color: var(--ink-muted); margin: -4px 0 14px; }
.sibling-invoices a { margin-right: 8px; }

.review-status-card #review-status-pct { font-size: 0.85rem; font-weight: 600; }

.approval-bar { align-items: center; }
.approval-bar-spacer { flex: 1; }
.approval-bar input#action-note { width: 220px; }
.actor-display {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  white-space: nowrap;
}
.eligibility-note { color: var(--warn); font-size: 0.82rem; margin: 6px 0 0; }
.assign-approver-wrap { display: flex; align-items: center; gap: 6px; }
.assign-approver-wrap label { font-size: 0.75rem; color: var(--ink-muted); white-space: nowrap; }
.assign-approver-wrap select { width: auto; min-width: 140px; padding: 6px 8px; font-size: 0.85rem; }
@media (max-width: 700px) {
  .approval-bar-spacer { display: none; }
  .approval-bar input#action-note { width: 100%; }
}

.payment-method-options { display: flex; flex-direction: column; gap: 6px; }
.payment-method-options label { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; text-transform: none; letter-spacing: normal; color: var(--ink); cursor: pointer; }
.payment-method-options input { width: auto; }

.reconciliation-line {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  padding: 10px 12px;
  margin-top: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.recon-good { color: var(--accent-strong); }
.recon-bad { color: var(--danger); }

tr.line-note-row td { background: var(--paper); padding: 10px 8px; }
tr.line-note-row .field-row { margin: 0; }

/* Fixed layout so the columns hold still. Without it the browser re-measures every
   column the moment a group opens and its input row appears — wider than the summary
   row above it — and the whole table lurches sideways on every open/close. */
.line-items-table { table-layout: fixed; width: 100%; }
.line-items-table th:nth-child(1) { width: 30px; }
.line-items-table th:nth-child(3) { width: 88px; }   /* SKU */
.line-items-table th:nth-child(4) { width: 66px; }   /* Qty */
.line-items-table th:nth-child(5) { width: 66px; }   /* Unit */
.line-items-table th:nth-child(6) { width: 90px; }   /* Qty / pack */
.line-items-table th:nth-child(7) { width: 96px; }   /* Unit price */
.line-items-table th:nth-child(8) { width: 74px; }   /* Verðþróun */
.line-items-table th:nth-child(9) { width: 64px; }   /* VAT % */
.line-items-table th:nth-child(10) { width: 104px; } /* Line total */
.line-items-table th:nth-child(11) { width: 104px; } /* Incl. VAT */
.line-items-table th:nth-child(12) { width: 118px; } /* GL account */
.line-items-table th:nth-child(13) { width: 168px; } /* row actions */
.line-items-table input, .line-items-table select { font-size: 0.85rem; padding: 5px 6px; }
.line-items-table td { padding: 6px 8px; vertical-align: top; }
.line-items-table th { padding: 6px 8px; }
.line-items-table .num { text-align: right; }
.line-items-table input.num { text-align: right; }
/* qty, unit, qty-per-pack, VAT% — all short values, kept narrow so description and
   the money columns get the width. */
.line-items-table td:nth-child(3) input,
.line-items-table td:nth-child(4) input,
.line-items-table td:nth-child(5) input,
.line-items-table td:nth-child(7) input {
  max-width: 60px;
}

.actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.history { margin-top: 20px; font-size: 0.85rem; }
.history li { margin-bottom: 6px; }
.history .actor { font-weight: 600; }
.history .action-approved { color: var(--accent-strong); }
.history .action-rejected { color: var(--danger); }
/* Reopening an approved invoice is an exceptional correction — make it stand out
   in the audit trail rather than blending in with routine steps. */
.history .action-unapproved { color: var(--danger); font-weight: 600; }

.section-title { font-size: 0.95rem; font-weight: 700; margin: 20px 0 8px; }

/* Certificate */
.certificate { max-width: 720px; margin: 0 auto; }
.certificate h1 { font-size: 1.3rem; }
.certificate table { margin-top: 12px; }
.certificate .totals { text-align: right; margin-top: 10px; font-size: 0.95rem; }
.certificate .stamp { margin-top: 28px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: 0.85rem; color: var(--ink-muted); }
@media print {
  header.topbar, .no-print { display: none; }
}

/* E-invoice network bar — the inbound channel that doesn't involve a scanner. */
.netbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin-bottom: 12px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-size: 0.85rem;
}
.netbar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-muted);
  flex: none;
}
.netbar-dot.live { background: var(--accent); }
.netbar-dot.waiting { background: var(--warn); }
.netbar-dot.down { background: var(--danger); }
.netbar-label { font-weight: 600; }
.netbar-env {
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.netbar-detail, .netbar-status { color: var(--ink-muted); }
.netbar-status { font-size: 0.82rem; }

/* Rendered view of a structured e-invoice — there is no scan to show, so the
   document is drawn from the source record instead. */
.edoc {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  font-size: 0.85rem;
  overflow-x: auto;
}
.edoc-loading { color: var(--ink-muted); padding: 20px; font-size: 0.85rem; }
.edoc-banner {
  font-size: 0.76rem;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 7px 10px;
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.edoc-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.edoc-type { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-muted); }
.edoc-number { font-size: 1.35rem; font-weight: 600; }
.edoc-dates { text-align: right; color: var(--ink-muted); font-size: 0.8rem; line-height: 1.7; }
.edoc-dates span { display: inline-block; min-width: 62px; text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.06em; }
.edoc-parties { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 18px; }
.edoc-party { flex: 1; min-width: 190px; line-height: 1.6; color: var(--ink-muted); font-size: 0.8rem; }
.edoc-party-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 3px; }
.edoc-party-name { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.edoc-notes {
  font-size: 0.8rem; color: var(--ink-muted); font-style: italic;
  padding: 9px 11px; border-left: 3px solid var(--line); margin-bottom: 16px;
}
.edoc-lines, .edoc-vat, .edoc-totals { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 0.8rem; }
.edoc-lines th, .edoc-vat th {
  text-align: left; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-muted); border-bottom: 1px solid var(--line); padding: 6px 8px; font-weight: 600;
}
.edoc-lines td, .edoc-vat td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.edoc-num { text-align: right; white-space: nowrap; }
.edoc-lines th.edoc-num, .edoc-vat th.edoc-num { text-align: right; }
.edoc-linenote { font-size: 0.74rem; color: var(--ink-muted); font-style: italic; margin-top: 2px; }
.edoc-vat { max-width: 380px; margin-left: auto; }
.edoc-totals { max-width: 300px; margin-left: auto; }
.edoc-totals td { padding: 5px 8px; }
.edoc-totals td:last-child { text-align: right; white-space: nowrap; }
.edoc-total-strong td { font-weight: 700; font-size: 0.92rem; border-top: 2px solid var(--line); padding-top: 8px; }
.edoc-payment { font-size: 0.78rem; color: var(--ink-muted); border-top: 1px solid var(--line); padding-top: 12px; line-height: 1.7; }

/* Unimaze's standard document view, embedded. */
.edoc-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 0.78rem; color: var(--ink-muted);
  padding: 7px 11px; margin-bottom: 8px;
  background: var(--accent-soft); border-radius: var(--radius);
}
.edoc-toolbar a { color: var(--accent-strong); font-weight: 600; }
.edoc-frame {
  width: 100%; height: 78vh; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff;
}

/* Division suggestion — always states its evidence, never applies itself. */
.dept-suggestion {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 6px; padding: 7px 10px;
  background: var(--accent-soft); border-radius: var(--radius);
  font-size: 0.78rem; color: var(--ink-muted);
}
.dept-suggestion-text { flex: 1; min-width: 180px; }
.dept-suggestion button { padding: 3px 10px; font-size: 0.76rem; }

/* Supplier merge controls. */
.merge-hint { font-size: 0.8rem; color: var(--ink-muted); }
.merge-hint-bad { color: var(--danger); }

/* Inbox: invoice id and readiness. */
.inv-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.ready-cell { display: flex; flex-direction: column; gap: 4px; min-width: 78px; }
.ready-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.ready-pct { font-size: 0.86rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ready-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem; color: var(--ink-muted);
}
.ready-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.ready-bar span { display: block; height: 100%; border-radius: 2px; }
.ready-full .ready-pct { color: var(--accent-strong); }
.ready-full .ready-bar span { background: var(--accent); }
.ready-near .ready-pct { color: var(--warn); }
.ready-near .ready-bar span { background: var(--warn); }
.ready-low .ready-pct { color: var(--danger); }
.ready-low .ready-bar span { background: var(--danger); }

/* Unit conversion panel on the products page. */
.units-panel { padding: 12px 4px; display: flex; flex-direction: column; gap: 12px; font-size: 0.86rem; }
.units-base { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.units-base label { font-weight: 600; }
.units-base select { max-width: 200px; }
.units-hint { color: var(--ink-muted); font-size: 0.8rem; }
.units-observed { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--ink-muted); font-size: 0.82rem; }
.unit-chip {
  display: inline-block; padding: 2px 9px; border-radius: 11px; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.76rem;
  border: 1px solid var(--line);
}
.unit-chip.known { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-soft); }
.unit-chip.unknown { background: transparent; color: var(--ink-muted); border-style: dashed; }
.unit-chip:hover { border-color: var(--accent); }
.units-table { width: auto; min-width: 420px; }
.units-table th { font-size: 0.72rem; }
.units-table td { padding: 6px 12px 6px 0; }
.units-note { color: var(--ink-muted); font-style: italic; }
.units-add { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.units-add input { max-width: 130px; }
.units-add .u-base-label { color: var(--ink-muted); min-width: 60px; }
td.comparable { font-weight: 600; color: var(--accent-strong); }

/* "Apply to history or only from now on?" — the one choice that can't be inferred. */
.scope-overlay {
  position: fixed; inset: 0; background: rgba(20, 26, 22, 0.5);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
}
.scope-dialog {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 24px; max-width: 540px; width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  display: flex; flex-direction: column; gap: 14px;
}
.scope-dialog h3 { margin: 0; font-size: 1.1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.scope-dialog > p { margin: 0; color: var(--ink-muted); font-size: 0.88rem; }
.scope-option { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.scope-option:hover { border-color: var(--accent); }
.scope-option span { display: flex; flex-direction: column; gap: 5px; }
.scope-option strong { font-size: 0.9rem; }
.scope-option em { font-style: normal; color: var(--ink-muted); font-size: 0.81rem; line-height: 1.5; }
.scope-option input[type="date"] { max-width: 170px; margin-top: 3px; }
.scope-actions { display: flex; justify-content: flex-end; gap: 9px; }

/* Autosave status beside the Undo button. */
.save-status { color: var(--ink-muted); font-size: 0.8rem; transition: color 0.2s; }
.save-status.is-saving { color: var(--ink-muted); font-style: italic; }
.save-status.is-error { color: var(--danger); font-weight: 600; font-style: normal; }

/* --- Invoice header: queue nav, id, title --- */
.invoice-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.queue-nav {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--paper-raised);
}
.queue-nav button {
  border: none; border-radius: 0; background: transparent;
  color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0;
}
.queue-nav button + button { border-left: 1px solid var(--line); }
.queue-nav button:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-strong); }
.queue-nav button:disabled { opacity: 0.32; cursor: default; }
.nav-arrow-btn { width: 30px; height: 30px; font-size: 1.15rem; line-height: 1; }
.nav-inbox-btn { width: 34px; height: 30px; }
.nav-inbox-btn svg { width: 16px; height: 16px; }

/* Zero-padded so the filename starts at the same place on every invoice — stepping
   through the queue shouldn't make the title jump sideways. */
.invoice-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem; color: var(--ink-muted); font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Icon buttons (undo, redo, distribute). */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper-raised); color: var(--ink-muted); cursor: pointer;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.icon-btn:disabled { opacity: 0.3; cursor: default; }
.line-distribute-btn svg { width: 19px; height: 19px; }

/* Reconciliation, inside the amounts panel — it is a statement about those amounts,
   so it reads under them rather than beside the chip. The difference is not repeated
   here in badge form: the chip outside carries it, and once is enough. What this adds
   is the working behind it, and the one action anybody takes about it. */
.reconciliation-line {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
/* Nothing but the working now — the difference is on the chip and the button beside
   it, so this is the part you open the panel to read rather than to use. */
.recon-rows { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--ink-muted); }
.recon-rows span { display: flex; justify-content: space-between; gap: 18px; }
.recon-rows b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
/* The line the others add up to. */
.recon-rows .recon-sum { margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--line-soft); color: var(--ink); }
/* The action sits in the header row beside the chip, not in the panel. */
.recon-act { display: inline-flex; align-items: center; gap: 8px; }
.recon-act:empty { display: none; }
.recon-fix-btn { padding: 3px 11px; font-size: 0.8rem; }
.recon-note { color: var(--danger); font-size: 0.82rem; }

/* Per-company aurar rounding preference. */
.rounding-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 0.85rem; }
.rounding-row label { color: var(--ink-muted); font-weight: 600; }
.rounding-row select { max-width: 220px; }
.rounding-hint { color: var(--ink-muted); font-size: 0.79rem; }

/* Line items header carries the add action, so it sits with the thing it adds to. */
.lineitems-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lineitems-title .icon-btn { width: 30px; height: 30px; }
.lineitems-title .icon-btn svg { width: 18px; height: 18px; }

/* Where an invoice is headed, in place of a submit button. */
.route-status { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 0.88rem; }
.route-to { color: var(--ink); }
.route-to strong { color: var(--accent-strong); }
.route-hint { color: var(--ink-muted); font-size: 0.82rem; }
.approve-gate-note { color: var(--ink-muted); font-size: 0.82rem; align-self: center; }

/* --- Display density -------------------------------------------------------
   One preference, applied everywhere, via a data attribute on <html>. Driving it
   from a root font-size plus a row-padding variable means every page inherits it
   without each one needing its own compact/large rules. */
:root { --row-pad-y: 8px; --row-pad-x: 10px; }
html[data-density="compact"] { font-size: 14px; --row-pad-y: 4px; --row-pad-x: 8px; }
html[data-density="normal"]  { font-size: 16px; --row-pad-y: 8px; --row-pad-x: 10px; }
html[data-density="large"]   { font-size: 18px; --row-pad-y: 13px; --row-pad-x: 13px; }

table td, table th { padding-top: var(--row-pad-y); padding-bottom: var(--row-pad-y); }
html[data-density="compact"] input,
html[data-density="compact"] select { padding-top: 3px; padding-bottom: 3px; }
html[data-density="large"] input,
html[data-density="large"] select { padding-top: 9px; padding-bottom: 9px; }

/* Company abbreviation beside the factory icon. */
.header-entity-btn { width: auto; padding: 0 10px 0 8px; gap: 7px; }
.header-entity-label {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Company logo, pinned to the top-right of the header. Height is capped at 100px as
   specified; the width cap stops a very wide logo from pushing the nav onto a second
   line, and the title block yields space first so the logo never wraps away. */
.entity-logo-slot {
  display: flex; align-items: center;
  /* Last in the row and small enough to stay on the line: at 100px tall it wrapped
     onto a second row and ended up on the LEFT, the opposite of where it belongs.
     The gap that pushes it right is opened by the icon cluster, not by this. */
  flex: 0 0 auto; order: 99;
}
.entity-logo-slot img { max-height: 60px; max-width: 225px; width: auto; height: auto; display: block; }
/* The title block yields space before anything else, so the logo and nav stay on one
   line. min-width:0 is required — a flex item won't shrink below its content width
   without it, which is why the header wrapped even with flex-shrink set. */
/* The page title is gone from the bar — the navigation already says where you are,
   and a heading that repeats the highlighted link is a line of furniture. It stays in
   the document for screen readers and for the browser tab.
   Selected by what it CONTAINS, not by its position: the brand mark is inserted as the
   first child at runtime, so ":first-child" stopped meaning the title some time ago. */
header.topbar > div:has(> h1) {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Links left, straight after the mark. */
header.topbar .mainnav { order: -1; margin-right: auto; }

/* Then the icons, together, at the right — the settings cog, the company switcher and
   the account menu, in that order and separated from the navigation by the whole
   width of the bar. */
header.topbar .header-cog { order: 1; }
header.topbar .entity-switcher { order: 2; }
header.topbar .header-menu { order: 3; }

/* On a desktop the bar is one line, always. The customer's logo belongs at the far
   right of the TOP row; letting the header wrap put it on a second row, which reads as
   a stray image floating under the navigation. The title block is the one that gives
   way — it truncates, having already said what it needs to say. */
@media (min-width: 1000px) {
  header.topbar { flex-wrap: nowrap; }
}

/* Logo control in settings. */
.logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 0.85rem; }
.logo-row label { color: var(--ink-muted); font-weight: 600; }
.logo-preview {
  display: flex; align-items: center; justify-content: center;
  min-width: 72px; height: 44px; padding: 4px 8px;
  border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--paper);
}
.logo-preview img { max-height: 36px; max-width: 120px; }
.logo-empty { color: var(--ink-faint); font-size: 0.76rem; }
.logo-hint { color: var(--ink-muted); font-size: 0.79rem; }

/* Intake bar: network on the left, files on the right, whole row is the drop target. */
.netbar-net { display: flex; align-items: center; gap: 10px; }
.netbar-drop {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 5px 9px; border-radius: var(--radius-lg); border: 1px dashed transparent;
}
.netbar-drop:hover { border-color: var(--line); }
.netbar-drop.dragover { border-color: var(--accent); background: var(--accent-soft); }
.netbar-drop-text { color: var(--ink-muted); font-size: 0.82rem; }

.netbar-sep { width: 1px; align-self: stretch; background: var(--line); }

/* Certificate: verification record and audit trail. Built to survive printing —
   this is the document that travels with the invoice to the ERP. */
.cert-note { color: var(--ink-muted); font-size: 0.84rem; margin: -4px 0 10px; }
.certificate .cert-checks td,
.certificate .cert-log td { vertical-align: top; font-size: 0.85rem; }
.chk-mark { text-align: center; font-weight: 700; }
.chk-pass .chk-mark { color: var(--accent-strong); }
.chk-fail .chk-mark { color: var(--danger); }
.chk-ack .chk-mark { color: var(--warn); }
.chk-detail { color: var(--ink-muted); font-size: 0.82rem; }
.cert-when { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media print {
  /* Keep the evidence tables intact across a page break rather than orphaning rows. */
  .cert-checks tr, .cert-log tr { break-inside: avoid; }
  .certificate .section-title { break-after: avoid; }
}

/* Settings applies to one company at a time — say which, so nobody edits the wrong one. */
.settings-scope-bar {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 9px 14px; margin-bottom: 14px;
  background: var(--accent-soft); border-radius: var(--radius-lg);
  font-size: 0.88rem; color: var(--accent-strong);
}
.settings-scope-hint { color: var(--ink-muted); font-size: 0.8rem; }

/* Icelandic bank account, in its three quoted parts. Fixed widths so the columns
   line up and the zero-padding is visible as part of the number. */
.bank-part {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  text-align: center;
  max-width: 72px;
}
.bank-part-sm { max-width: 52px; }
.bank-part-lg { max-width: 92px; }

/* DK credential row. The key is write-only: the field starts empty every time and
   only a masked hint of what's stored is ever shown. */
.dk-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 8px; font-size: 0.85rem; }
.dk-row label { color: var(--ink-muted); font-weight: 600; }
.dk-key-input { max-width: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dk-state {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem; padding: 2px 8px; border-radius: var(--radius);
}
.dk-state-set { background: var(--accent-soft); color: var(--accent-strong); }
.dk-state-none { color: var(--ink-faint); }
.dk-state-bad { background: var(--danger-soft); color: var(--danger); }
.dk-status { color: var(--ink-muted); font-size: 0.8rem; }

/* Line-item defaults: what every line inherits unless split out. */
.line-defaults {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  font-size: 0.85rem;
}
.line-defaults label { color: var(--ink-muted); font-weight: 600; }
.line-defaults select, .line-defaults input { max-width: 190px; }

/* Selection bar, same idea as the inbox's. */
/* The display:flex below would beat the hidden attribute, so hidden is restated —
   the bar must not exist on screen until a line is actually selected. */
.line-selection-bar[hidden] { display: none; }
.line-selection-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 10px;
  background: var(--accent-soft); border-radius: var(--radius-lg); font-size: 0.85rem;
}
/* Every pixel spent on padding here is a pixel the widest row on the screen does not
   have. Trimmed rather than pulled outside the card, which has overflow-x: auto and
   would answer a negative margin with a scrollbar. */
.line-selection-bar { padding-left: 8px; padding-right: 8px; }
/* The count reads as the group's label, in the same small caps as the others, but
   carrying the weight — it is the one part of the bar that changes as you work. */
.line-selection-bar #line-selection-count { font-weight: 700; color: var(--accent-strong); }
.line-selection-hint { color: var(--ink-muted); }
.line-selection-bar select, .line-selection-bar input { max-width: 170px; }

/* Group rows. Closed by default — the summary is usually the whole answer. */
.group-row { background: var(--paper); cursor: pointer; }
.group-row:hover { background: var(--accent-soft); }
.group-row td { padding-top: 7px; padding-bottom: 7px; font-size: 0.86rem; }
.group-select { cursor: default; }
.group-caret { display: inline-block; width: 14px; color: var(--ink-muted); }
.group-division { font-weight: 600; }
.group-label { white-space: nowrap; }
.group-gl {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 1px 7px; border-radius: 3px;
  background: var(--accent-soft); color: var(--accent-strong); font-size: 0.78rem;
}
.group-count { margin-left: 9px; color: var(--ink-muted); font-size: 0.79rem; }
/* The figures a closed group carries, aligned under the columns they belong to. */
.group-qty, .group-avg, .group-vat, .group-sum { font-variant-numeric: tabular-nums; }
.group-sum { font-weight: 600; }
.group-avg, .group-vat, .group-unit { color: var(--ink-muted); font-size: 0.82rem; }
.group-toggle-all { padding: 3px 11px; font-size: 0.78rem; }

/* GL account picker — keyboard-first, shared by invoice lines and supplier settings. */
.glp-overlay {
  position: fixed; inset: 0; background: rgba(20,26,22,.5); z-index: 200;
  display: flex; align-items: flex-start; justify-content: center; padding: 8vh 20px 20px;
}
.glp-dialog {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  width: 100%; max-width: 780px; max-height: 74vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 30px rgba(16, 42, 66, .13);
}
.glp-head { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.glp-search { flex: 1; font-size: 0.95rem; }
.glp-filter {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .7rem; color: var(--accent-strong); background: var(--accent-soft);
  padding: 3px 8px; border-radius: var(--radius); white-space: nowrap;
}
/* Two panes: the chart's headings as navigation, the accounts beside them. */
.glp-body { display: flex; flex: 1; min-height: 0; }
.glp-groups {
  width: 214px; flex: none; overflow-y: auto;
  border-right: 1px solid var(--line); background: var(--paper);
}
.glp-group {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  padding: 7px 12px; background: transparent; border: none; border-bottom: 1px solid var(--line);
  cursor: pointer; font-size: .8rem; color: var(--ink-muted);
}
.glp-group:hover { background: var(--accent-soft); }
.glp-group.is-active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.glp-group-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glp-group-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .7rem; color: var(--ink-faint);
}
/* Sub-headers keep a bare account number from appearing without the heading that
   explains it, when every group is in view. */
.glp-subhead {
  position: sticky; top: 0; z-index: 1;
  padding: 5px 15px; background: var(--paper);
  font-size: .72rem; font-weight: 600; color: var(--ink-muted);
  border-bottom: 1px solid var(--line); letter-spacing: .02em;
}
.glp-rows { overflow-y: auto; flex: 1; min-width: 0; }
.glp-row {
  display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
  padding: 8px 15px; background: transparent; border: none; border-bottom: 1px solid var(--line);
  cursor: pointer; font-size: .87rem; color: var(--ink);
}
.glp-row:hover { background: var(--paper); }
.glp-row.is-cursor { background: var(--accent-soft); }
.glp-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600; min-width: 62px; font-variant-numeric: tabular-nums;
}
.glp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glp-vat {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .74rem; color: var(--ink-muted); white-space: nowrap;
}
.glp-empty { padding: 26px 16px; text-align: center; color: var(--ink-muted); font-size: .87rem; }
.glp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 15px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-muted);
}
.glp-all { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.glp-hint { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; }

/* Chart of accounts in settings. */
.gl-tree { margin-top: 10px; font-size: .85rem; max-height: 460px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.gl-heading {
  display: flex; align-items: baseline; gap: 9px; padding: 9px 14px;
  background: var(--paper-raised); border-bottom: 1px solid var(--line);
  font-weight: 600; cursor: pointer;
  position: sticky; top: 0; z-index: 1;
}
.gl-heading:hover { background: var(--accent-soft); }
.gl-heading-caret { width: 14px; color: var(--ink-muted); }
.gl-heading-label { flex: 0 1 auto; }
.gl-heading-range {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem; color: var(--ink-muted);
}
/* Lines the group's checkbox up with the per-account ones below it, so the column of
   ticks reads as one column. */
.gl-enable-group { margin-right: 2px; }
.gl-heading-count { margin-left: auto; color: var(--ink-muted); font-size: .78rem; font-weight: 400; }
/* A grid, so account numbers and VAT rates line up down the whole list instead of each
   row negotiating its own widths. The name column takes the slack, so nothing is
   stranded against the right edge. */
.gl-acct {
  display: grid;
  grid-template-columns: 22px 78px minmax(0, 1fr) 74px;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 26px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.gl-acct:last-child { border-bottom: none; }
/* A hairline rather than deep indentation — shows the nesting without pushing content
   halfway across the card. */
.gl-acct::before {
  content: ""; position: absolute; left: 14px; top: 0; bottom: 0;
  border-left: 2px solid var(--line);
}
.gl-acct:hover { background: var(--paper); }
.gl-acct-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.gl-acct-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* An account already in use should read as chosen, not as just another row. */
.gl-acct:has(.gl-enable:checked) { background: var(--accent-soft); }
.gl-acct:has(.gl-enable:checked) .gl-acct-number { color: var(--accent-strong); }
.gl-acct-vat { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .74rem; color: var(--ink-muted); min-width: 56px; text-align: right; }
.gl-sync-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: .85rem; }
.gl-sync-status { color: var(--ink-muted); font-size: .8rem; }

@media (max-width: 640px) {
  .glp-groups { display: none; }
}

/* Collapsible settings sections. */
.section-title-clickable { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.section-title-clickable .feedback-wrap { font-weight: 400; }
.section-title-clickable:hover { color: var(--accent-strong); }
.section-caret { color: var(--ink-muted); font-size: 0.82rem; width: 12px; }
.card.is-collapsed { padding-bottom: 14px; }
.card.is-collapsed .section-title { margin-bottom: 0; }

/* Report-a-problem, per settings section. */
.feedback-wrap { position: relative; margin-left: auto; display: inline-flex; }
.feedback-btn { width: 26px; height: 26px; }
.feedback-btn svg { width: 15px; height: 15px; }
/* A section that already has open reports says so, so the same thing isn't reported
   twice by two people. */
.feedback-btn.has-reports { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.feedback-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: min(400px, 80vw); padding: 14px;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 10px 32px rgba(0,0,0,.18);
  display: flex; flex-direction: column; gap: 9px;
  cursor: default; font-weight: 400;
}
.feedback-title { font-size: .88rem; font-weight: 600; }
.feedback-text { font-size: .87rem; }
.feedback-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.feedback-actions .feedback-status { margin-right: auto; color: var(--ink-muted); font-size: .8rem; }
.feedback-existing { border-top: 1px solid var(--line); padding-top: 9px; }
.feedback-existing-title {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-muted); margin-bottom: 6px;
}
.feedback-item { font-size: .8rem; color: var(--ink-muted); margin-bottom: 7px; display: flex; flex-direction: column; gap: 2px; }
.feedback-item span { font-size: .71rem; color: var(--ink-faint); }

/* The line banner's fields sit side by side; the supplier is a chip whose details
   open in a small anchored card rather than occupying the page. */
.line-def-field { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.supplier-chip {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 7px 12px; font-size: 0.88rem; cursor: pointer; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.supplier-chip:hover { border-color: var(--accent); }
.supplier-chip.is-empty { color: var(--ink-muted); font-style: italic; }
.supplier-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(0,0,0,0.14); padding: 12px; width: 300px;
  display: flex; flex-direction: column; gap: 8px;
}
.supplier-pop[hidden] { display: none; }

.supplier-pop input { max-width: none; }

/* Suppliers register: sortable headers, inline edits, VSK standing. */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--accent-strong); }
th.sortable .sort-arrow { font-size: 0.7em; }
.cell-name { display: flex; align-items: center; gap: 6px; }
.cell-name .open-link { flex: none; text-decoration: none; font-size: 0.9rem; }
.cell-vat { white-space: nowrap; }
.cell-vat .edit-vat { max-width: 110px; display: inline-block; }
.vat-badge { display: inline-block; width: 1.4em; text-align: center; font-weight: 700; }
.vat-ok { color: var(--ok); }
.vat-bad { color: var(--danger); }
.vat-unknown { color: var(--ink-muted); }
#supplier-rows input, #supplier-rows select { font-size: 0.85rem; padding: 5px 6px; }

/* Spreadsheet-style cells: visible grid, a selection ring on the focused cell, and
   plain text content so a dragged selection copies into Excel as a real table. */
#supplier-rows td.sheet-cell {
  border: 1px solid var(--line); cursor: cell; position: relative;
  padding: 7px 9px; min-width: 60px;
}
#supplier-rows td.sheet-cell:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); }
#supplier-rows td.sheet-cell.is-editing { padding: 0; }
#supplier-rows td.sheet-cell.is-editing input, #supplier-rows td.sheet-cell.is-editing select {
  width: 100%; border: none; padding: 7px 9px; font-size: 0.85rem; background: var(--paper-raised);
}
#supplier-rows td.sheet-cell .open-link { margin-left: 6px; opacity: 0.5; }
#supplier-rows td.sheet-cell:hover .open-link { opacity: 1; }
#supplier-rows td.cell-readonly { border: 1px solid var(--line); padding: 7px 9px; color: var(--ink-muted); background: var(--paper); }
#supplier-rows td.cell-muted { color: var(--ink-muted); font-style: italic; }
.mass-edit-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 10px;
  background: var(--accent-soft); border-radius: var(--radius-lg); font-size: 0.85rem;
}
.mass-edit-bar[hidden] { display: none; }
.mass-edit-bar #mass-edit-count { font-weight: 600; color: var(--accent-strong); }
.mass-edit-bar select, .mass-edit-bar input { max-width: 170px; }
/* The picker's suggested account: pinned on top, unmistakably the default. */
.glp-suggest {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 12px; margin-bottom: 6px; cursor: pointer;
  background: var(--accent-soft); border: 1.5px solid var(--accent); border-radius: var(--radius-lg);
  font-size: 0.88rem;
}
.glp-suggest.is-cursor, .glp-suggest:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.glp-suggest-tag {
  flex: none; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent-strong); background: var(--paper-raised); border-radius: var(--radius); padding: 2px 7px;
}
.glp-suggest .glp-number { font-weight: 700; }
.glp-suggest-reason { color: var(--ink-muted); font-size: 0.8rem; flex: 1; }
.glp-novat-head {
  margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px;
  font-weight: 700; color: var(--ink-muted); letter-spacing: 0.04em;
}
.send-to-dk-wrap { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.dk-sent-badge { color: var(--accent-strong); background: var(--accent-soft); border-radius: var(--radius-lg); padding: 5px 10px; font-weight: 600; }
/* Percentage split dialog */
.split-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; z-index: 60; }
.split-dialog { background: var(--paper-raised); border-radius: var(--radius-lg); padding: 20px 22px; width: min(560px, 92vw); box-shadow: 0 18px 48px rgba(0,0,0,0.22); }
.split-dialog h3 { margin: 0 0 4px; font-size: 1.05rem; }
.split-line-name { color: var(--ink-muted); font-size: 0.85rem; margin: 0 0 10px; }
.split-suggestion { background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 7px 7px 0; padding: 8px 12px; font-size: 0.83rem; margin-bottom: 10px; }
.split-rows { display: flex; flex-direction: column; gap: 8px; }
.split-row { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.split-row .split-pct { max-width: 84px; text-align: right; }
.split-row .split-dept { max-width: 170px; }
.split-row .split-ref { max-width: 120px; }
.split-row .split-amount { color: var(--ink-muted); font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }
.split-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.split-sum { font-weight: 600; font-size: 0.88rem; }
.split-sum.is-ok { color: var(--accent-strong); }
.split-sum.is-bad { color: var(--danger); }
.line-split-btn { font-weight: 700; }
/* Price movement against this product's own history with this supplier. */
.li-trend { font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: help; }
.trend-up { color: var(--danger); font-weight: 600; }
.trend-down { color: var(--ok); font-weight: 600; }
.trend-minor { color: var(--ink-muted); }
.trend-flat { color: var(--ink-muted); }
/* Product register and collective products */
#product-rows td.cell-readonly { padding: 7px 9px; }
.group-badge { background: var(--accent-soft); color: var(--accent-strong); border-radius: var(--radius); padding: 2px 8px; font-size: 0.8rem; font-weight: 600; }
.group-spread { margin-left: 10px; font-size: 0.78rem; font-weight: 600; color: var(--ink-muted); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 8px; }
.group-spread.is-wide { color: var(--danger); border-color: var(--danger); }
#product-tabs { margin-bottom: 12px; }
/* The description no longer stretches the table past the viewport; long names are
   clipped in the cell and readable in full on hover or focus. */
.line-items-table th:nth-child(2) { width: 34%; }
.line-items-table td:nth-child(2) input { text-overflow: ellipsis; }

/* Totals and notes live in chips now, so the review column stays short. */
.totals-chip-wrap, .notes-chip-wrap { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.notes-pop { width: 340px; left: auto; right: 0; }
/* The chip sits at the right-hand end of the header row, so a panel anchored to its
   left edge runs off the screen and gets shoved somewhere unrelated. Anchored right,
   it hangs directly under the chip where it was opened from. */
.totals-chip-wrap .supplier-pop { width: 340px; }
#totals-chip { font-variant-numeric: tabular-nums; }
#notes-chip.has-note { color: var(--accent-strong); background: var(--accent-soft); }
.group-gross { color: var(--ink-muted); }
.chip-diff { color: var(--danger); font-weight: 700; margin-left: 4px; }
.chip-ok { color: var(--accent-strong); margin-left: 4px; }
/* The chip inherited the disabled-input look — white on white, readable only on
   hover. It is a button, so it is styled as one. */
#totals-chip, #supplier-chip {
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  font-weight: 500;
}
#totals-chip:hover, #supplier-chip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
#totals-chip:focus-visible, #supplier-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.header-inv-field label { white-space: nowrap; }

/* Queue counters beside the tab names. */
.tab-count {
  display: inline-block; margin-left: 7px; min-width: 20px; padding: 1px 6px;
  border-radius: var(--radius-lg); font-size: 0.74rem; font-weight: 700; text-align: center;
  background: var(--line-soft); color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.tab-count.count-pending { background: var(--warn-soft); color: var(--warn); }
.tab-count.count-ok { background: var(--ok-soft); color: var(--ok); }
.tab-count.count-bad { background: var(--danger-soft); color: var(--danger); }
.tabs button.active .tab-count { filter: none; }
/* Chip popovers, styled to match the GL picker so every overlay in the app behaves
   the same way: a dimmed backdrop, a solid panel, a clear edge. */
.supplier-pop {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: center;
  background: rgba(0, 0, 0, 0.32);
  padding: 12vh 16px 16px;
  width: auto; left: 0; top: 0; right: 0; bottom: 0;
  border: none; border-radius: 0; box-shadow: none;
}
.supplier-pop[hidden] { display: none; }
.supplier-pop > .pop-panel {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.24);
  padding: 16px 18px; width: min(420px, 94vw);
  display: flex; flex-direction: column; gap: 10px;
}
.pop-title { font-weight: 600; font-size: 0.95rem; margin: 0 0 2px; }
/* display:inline-flex on these fields beats the hidden attribute, so hidden is
   restated — the same trap the selection bar fell into. */
.line-def-field[hidden], .supplier-chip-wrap[hidden], .notes-chip-wrap[hidden] { display: none !important; }


/* The settings dialog and toast. Both exist because the browser's own confirm() and
   alert() are suppressed in some of the shells this app runs in — a button wired to
   them looked broken, and a failure message never reached anyone. */
.settings-overlay {
  position: fixed; inset: 0; background: rgba(20,26,22,.5); z-index: 240;
  display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px;
}
.settings-dialog {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  width: 100%; max-width: 460px; padding: 18px 20px 16px;
  box-shadow: 0 8px 30px rgba(16, 42, 66, .13);
}
.settings-dialog h3 { margin: 0 0 8px; font-size: 1rem; }
.settings-dialog p { margin: 0 0 12px; color: var(--ink-muted); font-size: .9rem; line-height: 1.45; }
.settings-dialog-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; font-size: .85rem; }
.settings-dialog-field select { width: 100%; }
.settings-dialog-warn { color: var(--danger); }
.settings-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.settings-dialog-actions .danger { background: var(--danger); border-color: var(--danger); color: #fff; }

.settings-toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 260; max-width: min(560px, calc(100vw - 32px));
  background: var(--paper-raised); border: 1px solid var(--line); border-left: 3px solid var(--ink-muted);
  border-radius: var(--radius-lg); padding: 10px 14px; font-size: .88rem; line-height: 1.4;
  box-shadow: 0 6px 22px rgba(16, 42, 66, .11);
}
.settings-toast.is-error { border-left-color: var(--danger); }
.settings-toast.is-ok { border-left-color: var(--accent, var(--ink-muted)); }

/* The send report. A list of per-invoice outcomes, so it has to be readable at length:
   scrollable, resizable, and selectable — the browser's own alert() truncated it. */
.report-overlay {
  position: fixed; inset: 0; background: rgba(20,26,22,.5); z-index: 250;
  display: flex; align-items: flex-start; justify-content: center; padding: 8vh 20px 20px;
}
.report-dialog {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  width: 100%; max-width: 640px; min-width: 320px; max-height: 78vh; min-height: 180px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 30px rgba(16, 42, 66, .13);
  resize: both;
}
.report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.report-head h3 { margin: 0; font-size: .98rem; }
.report-close { background: none; border: none; font-size: 1.3rem; line-height: 1; color: var(--ink-muted); cursor: pointer; padding: 0 4px; }
.report-body { overflow: auto; padding: 14px 16px; font-size: .88rem; }
.report-summary { margin: 0 0 12px; }
.report-section { margin-bottom: 14px; }
.report-section h4 { margin: 0 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
.report-section h4.is-error { color: var(--danger); }
.report-section ul { margin: 0; padding-left: 18px; }
.report-section li { margin-bottom: 5px; line-height: 1.45; }
.report-link { font-variant-numeric: tabular-nums; font-weight: 600; }
.report-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); }

.report-fix {
  font-size: .78rem; padding: 2px 8px; margin-left: 6px; vertical-align: baseline;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); cursor: pointer;
}
.report-fix:hover { background: var(--accent-soft); }
.report-note { font-size: .8rem; color: var(--ink-muted); margin-left: 6px; }
.report-note.is-error { color: var(--danger); }
.settings-dialog-note { font-size: .78rem; color: var(--ink-muted); margin: -6px 0 12px; }

/* The real shop behind an outlay's stand-in creditor. Quiet: it is context, not a
   field anyone edits here. */
.supplier-real {
  font-size: .78rem; color: var(--ink-muted); margin-left: 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 200px; display: inline-block; vertical-align: bottom;
}
.supplier-real::before { content: "↳ "; opacity: .7; }

/* The house mark, top-left on every screen. It sits before the page title, and never
   grows past a header's worth of height however large the uploaded file is. */
.brand-logo-slot {
  display: flex; align-items: center; flex: 0 0 auto;
  margin-right: 16px; order: -2;
}
.brand-logo-slot img { max-height: 69px; max-width: 255px; width: auto; height: auto; display: block; }
@media (max-width: 720px) {
  .brand-logo-slot img { max-height: 51px; max-width: 180px; }
  .entity-logo-slot img { max-height: 44px; max-width: 150px; }
}

/* What the current selection comes to, beside the tabs. Tabular figures so the number
   does not jitter as rows are ticked and unticked. */
.selection-total {
  font-size: .82rem; color: var(--ink-muted); align-self: center; margin-left: 10px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
th.sortable.num, th.num { text-align: right; }
th.sortable.num .sort-arrow { margin-left: 4px; }

/* The row the lookup landed on, briefly — so the eye finds it without hunting. */
tr.row-found > td { background: var(--accent-soft); transition: background .4s ease; }

/* A suggestion you can act on: the whole row is the button, and it says what pressing
   it will do rather than leaving the reader to guess. */
.candidate-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 4px; background: none; border: none; border-bottom: 1px solid var(--line);
  cursor: pointer; font: inherit; color: var(--ink);
}
.candidate-row:hover { background: var(--paper); }
.candidate-main { flex: 1; min-width: 0; }
.candidate-examples { display: block; color: var(--ink-muted); font-size: .85rem; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.candidate-go { flex: 0 0 auto; font-size: .82rem; color: var(--accent, var(--ink-muted)); opacity: 0; transition: opacity .15s; }
.candidate-row:hover .candidate-go, .candidate-row:focus-visible .candidate-go { opacity: 1; }

/* A proposed merge: what would be kept, what would be folded in, and the two answers
   that both teach the system something. */
.merge-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.merge-head { margin-bottom: 4px; }
.merge-keep { font-size: .88rem; }
.merge-fold { font-size: .85rem; color: var(--ink-muted); padding-left: 14px; }
.merge-actions { display: flex; gap: 8px; margin-top: 8px; }
.merge-actions button { font-size: .8rem; padding: 3px 10px; }

/* A company with no fetched history. Said plainly, because it is the one thing that
   has to happen before anything else in the system can help. */
.dk-history-empty { color: var(--ink); background: var(--accent-soft); padding: 8px 10px; border-radius: var(--radius-lg); }

/* The purchase-history window. A working surface, not a dialog: it fills most of the
   screen, scrolls its own body, and keeps its header and footer in view while you pick
   rows. */
.sheet-overlay {
  position: fixed; inset: 0; background: rgba(20,26,22,.5); z-index: 260;
  display: flex; align-items: center; justify-content: center; padding: 4vh 20px;
}
.sheet-window {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  width: 100%; max-width: 1100px; max-height: 92vh; min-height: 260px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 30px rgba(16, 42, 66, .13); resize: both;
}
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sheet-head h3 { margin: 0; font-size: 1rem; }
.sheet-sub { color: var(--ink-muted); font-size: .82rem; }
.sheet-close { background: none; border: none; font-size: 1.35rem; line-height: 1; color: var(--ink-muted); cursor: pointer; padding: 0 4px; }
.sheet-body { overflow: auto; flex: 1; }
.sheet-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.sheet-table thead th {
  position: sticky; top: 0; background: var(--paper-raised); z-index: 1;
  text-align: left; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.sheet-table th.num, .sheet-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sheet-table tbody tr { cursor: default; }
.sheet-table tbody tr:hover { background: var(--paper); }
.sheet-table tbody tr.is-selected { background: var(--accent-soft); }
.sheet-pick { width: 30px; }
.sheet-empty { padding: 24px 16px; text-align: center; color: var(--ink-muted); }
.sheet-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); }
.sheet-count { font-size: .82rem; color: var(--ink-muted); }

/* The way into a product's purchase history: the name itself, which is what someone is
   already looking at when they wonder where a price came from. */
.open-purchases, .open-group-purchases {
  background: none; border: none; padding: 0; font: inherit; color: inherit; text-align: left;
  cursor: pointer; border-bottom: 1px dotted var(--ink-muted);
}
.open-purchases:hover, .open-group-purchases:hover { color: var(--accent, var(--ink)); border-bottom-style: solid; }
.open-group-purchases { font: inherit; font-weight: inherit; }

/* Present for screen readers, absent on screen — used for the company prefix, which the
   company's own logo already says. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.header-cog { display: inline-flex; align-items: center; justify-content: center; }
.header-cog svg { width: 20px; height: 20px; }
.header-cog.is-active { color: var(--accent, var(--ink)); }

/* How much of the queue the search is hiding. Without it a filtered list and an empty
   queue look identical, which is how people conclude their invoices have vanished. */
.search-hint { font-size: .8rem; color: var(--ink-faint); align-self: center; font-variant-numeric: tabular-nums; }

/* Purchase-unit editing. The triangle is einingaverð x fjöldi = línusamtala, and the
   total is booked money — so it is styled as a locked cell, visibly not a field. */
.sheet-title { font-weight: 600; font-size: 1rem; }
.sheet-loading { padding: 28px 18px; color: var(--ink-muted); }
.sheet-note { color: var(--ink-muted); font-size: .82rem; }
.sheet-scroll { overflow: auto; }
.unit-window { max-width: 980px; }

/* --- Tillögur um innkaupaeiningu ------------------------------------------------
   Nine columns wide, three of them free text. The shared ceiling of 980px meant the
   corner grip could not actually make it any wider — you could drag and nothing moved
   — so this one opens near the width of the screen and can still be dragged.
   The columns are trimmed to match: tighter cells, and the three text columns given
   room to give room, ellipsis rather than a line that pushes the table sideways. */
.sug-window { max-width: 96vw; width: 1500px; }
.sug-window .sheet-table td,
.sug-window .sheet-table th { padding: 5px 7px; }
.sug-window .unit-table td.name {
  min-width: 0; max-width: 34ch; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sug-window .unit-table td.dim { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
.sug-window .unit-table td.mono { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.sug-window .chip-ev { max-width: 16ch; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* Sortable headers, the same affordance as the product list's. */
.sug-window .sug-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.sug-window .sug-sort:hover { color: var(--accent-strong); }
.sug-window .sug-sort .sort-arrow { font-size: 0.7rem; color: var(--ink-muted); }

.unit-default { padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.unit-default-head { font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.unit-default-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.unit-default-row label { color: var(--ink-muted); font-size: .88rem; }
.unit-default-row input { max-width: 90px; }
.unit-default-row select { max-width: 90px; }
.unit-default-hint { color: var(--ink-muted); font-size: .8rem; margin-top: 6px; max-width: 80ch; }


.unit-table td.locked { color: var(--ink-muted); background: var(--paper); font-variant-numeric: tabular-nums; }
.unit-table input.cell {
  width: 92px; text-align: right; padding: 3px 6px; font: inherit; font-size: .85rem;
  font-variant-numeric: tabular-nums; border: 1px solid transparent; background: transparent;
  border-radius: 3px; color: var(--ink);
}
.unit-table input.cell:hover { border-color: var(--line); }
.unit-table input.cell:focus { border-color: var(--navy, #1A3A57); background: var(--paper-raised); outline: none; }
.unit-table td.dim, .unit-table td .dim { color: var(--ink-muted); }
.unit-table td.name { white-space: normal; min-width: 200px; }
.unit-table td.strong { font-weight: 600; }
.unit-table .mono { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: .8rem; }

.basis { font-size: .68rem; padding: 1px 6px; border-radius: 2px; margin-left: 4px; }
.b-manual { background: var(--attn-wash, #F6E6DC); color: var(--attn, #B4501E); }
.b-default { background: var(--ok-wash, #DDEDE6); color: var(--ok, #14654A); }
.chip-ev { background: var(--line-soft, #E5E9EA); padding: 1px 6px; border-radius: 2px; }

.sug-intro { padding: 12px 16px; color: var(--ink-muted); font-size: .88rem; border-bottom: 1px solid var(--line); max-width: 90ch; }
.linkish { background: none; border: none; padding: 0; color: var(--ink-muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .8rem; }
.linkish:hover { color: var(--ink); }

.unit-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper-raised); padding: 10px 16px; border-radius: 4px;
  font-size: .88rem; z-index: 400; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 80vw;
}
.unit-toast.bad { background: var(--bad, #9A2B22); color: #fff; }
.unit-toast.ok { background: var(--ok, #14654A); color: #fff; }

/* Suspicious units. The badge is a claim about measurement, not about money, so it is
   attn-coloured rather than red — nothing is wrong with the invoice. */
.flag-dot {
  display: inline-block; margin-left: 8px; font-size: .68rem; letter-spacing: .02em;
  padding: 1px 7px; border-radius: 2px; cursor: help;
  background: var(--attn-wash, #F6E6DC); color: var(--attn, #B4501E);
}
.unit-table tr.row-flagged { background: var(--attn-wash, #F6E6DC); }
.unit-table tr.row-flagged td { border-bottom-color: var(--attn, #B4501E); }
.unit-table .row-fix { color: var(--attn, #B4501E); font-weight: 600; text-decoration: none; }
.unit-table .row-fix:hover { text-decoration: underline; }

/* Where a line's GL account came from. Neutral means settled — the register already
   holds this product's account. The other two are claims of different strength, and
   the border carries it rather than the text, so the number itself stays readable. */
.line-items-table input.li-gl.gl-from-register {
  border-color: var(--line);
  background: var(--paper-raised);
}
.line-items-table input.li-gl.gl-from-history {
  border-left: 3px solid var(--navy, #1A3A57);
  background: color-mix(in srgb, var(--navy, #1A3A57) 7%, var(--paper-raised));
}
.line-items-table input.li-gl.gl-from-text {
  border-left: 3px solid var(--attn, #B4501E);
  background: color-mix(in srgb, var(--attn, #B4501E) 10%, var(--paper-raised));
}
/* Read-only, but still a control: it opens the picker, so it must not read as a
   disabled box. The cursor is the whole difference — a caret would promise typing that
   goes nowhere. */
.line-items-table input.li-gl { cursor: pointer; }
/* Once a person picks an account it is theirs, so it stops carrying a claim about
   where it came from. */
.line-items-table input.li-gl.gl-chosen {
  border-left-width: 1px;
  border-color: var(--line);
  background: var(--paper-raised);
}
.gl-flag { margin-left: 4px; color: var(--bad, #9A2B22); cursor: help; font-size: .95rem; }

/* The key, shown once above the lines rather than repeated per row. */
.gl-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: .8rem; color: var(--ink-muted); margin: 6px 0 2px; }
.gl-legend span { display: flex; align-items: center; gap: 5px; }
.gl-legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; border: 1px solid var(--line); font-style: normal; }
.gl-legend .k-register { background: var(--paper-raised); }
.gl-legend .k-history { background: var(--navy, #1A3A57); border-color: var(--navy, #1A3A57); }
.gl-legend .k-text { background: var(--attn, #B4501E); border-color: var(--attn, #B4501E); }

/* Quantity is derived now, so it reads as a result rather than a field, with the sum
   behind it shown small underneath. */
.li-qty[readonly] { background: transparent; border-color: transparent; color: var(--ink); cursor: default; }
.li-qty-cell { white-space: nowrap; }

/* A pack size with the document's own unit still on the line: the quantity has been
   multiplied but kept the name of the thing it was multiplied out of. */
.li-unit.unit-needed {
  border-color: var(--bad, #9A2B22);
  background: color-mix(in srgb, var(--bad, #9A2B22) 8%, var(--paper-raised));
}

/* The unit combobox. Positioned on the body rather than inside the cell, so it is not
   clipped by the line table's own overflow. */
.unit-combo {
  position: absolute; z-index: 320; max-height: 280px; overflow-y: auto;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-sm, 4px);
  box-shadow: 0 6px 22px rgba(16, 42, 66, .16); padding: 4px;
  display: flex; flex-direction: column; gap: 1px;
}
.unit-combo-item {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
  background: none; border: 0; text-align: left; cursor: pointer;
  padding: 5px 8px; border-radius: 3px; font: inherit; font-size: .85rem; color: var(--ink);
}
.unit-combo-item:hover, .unit-combo-item.active { background: var(--navy-wash, var(--ground)); }
.unit-combo-item .u { font-weight: 600; }
.unit-combo-item .l { color: var(--ink-muted); font-size: .8rem; }
.unit-combo-item .n { color: var(--ink-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.unit-combo-new { padding: 8px 10px; color: var(--ink-muted); font-size: .82rem; }


/* The item number left the table and lives on the description now: shown on hover and
   on keyboard focus, so it is reachable without a mouse. The description gets the
   space back — it is what people actually read down the column.

   Both of these are also the phone answer: one wide column and a bar of actions
   survive a narrow screen, thirteen rows of four buttons do not. */
.line-items-table td.li-desc-cell { position: relative; min-width: 220px; width: 32%; }
.line-items-table td.li-desc-cell .li-description { width: 100%; }
.li-sku-peek {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: ui-monospace, "JetBrains Mono", monospace; font-size: .72rem;
  color: var(--ink-muted); background: var(--paper-raised); padding: 1px 5px;
  border-radius: 2px; border: 1px solid var(--line);
  opacity: 0; transition: opacity .12s ease; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .li-sku-peek { transition: none; } }
.li-desc-cell:hover .li-sku-peek,
.li-desc-cell:focus-within .li-sku-peek { opacity: 1; }

/* The selection bar carries the row actions now, so it needs to breathe and to wrap
   rather than scroll off a narrow screen. */
.line-selection-bar { flex-wrap: wrap; row-gap: 8px; }
.line-selection-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 2px; }
.danger-ghost { color: var(--bad, #9A2B22); }
.danger-ghost:hover { background: var(--bad-wash, #F5E1DF); border-color: var(--bad, #9A2B22); }

/* The purchase unit reads as a figure like the prices beside it, not as a control. It
   is still the way into the product's movements, so it says so on hover. */
td.open-unit { cursor: pointer; font-variant-numeric: tabular-nums; }
td.open-unit:hover { background: var(--ground); }

/* Actions live beside the close control, so the card's own header carries them rather
   than the list of movements. */
.sheet-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.sheet-head-btn { font-size: .82rem; padding: 4px 10px; white-space: nowrap; }

/* Filtering the suggestion run. Sticky, because the list is a hundred rows and the
   controls have to stay reachable while working down it. */
.sug-filter {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--paper-raised);
}
.sug-filter input[type="search"] { flex: 1 1 220px; min-width: 170px; }
.sug-filter select { max-width: 220px; }
.sug-only-food { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink-muted); white-space: nowrap; }
.sug-count { font-size: .82rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-left: auto; }

/* A line whose quantity is no longer the document's carries a mark, not a button. The
   act of putting it back belongs to the banner with everything else that is only
   occasionally needed — a control per row is a control thirteen times over. */
.line-restated { margin-left: 6px; color: var(--attn, #B4501E); cursor: help; font-size: .9rem; }

/* The account on a collapsed group, right after the division. Five rows reading
   "Kitchen" tell you nothing; "Kitchen · 2111 Kjötvörur" tells you what is inside
   without opening it.

   Same three colours as the line fields, so the meaning carries between them: no tint
   means the register already held this product's account and there is nothing to
   check, and the two tinted states are claims of different strength. */
.group-gl-inline {
  font-size: .78rem; padding: 1px 8px; border-radius: 2px; white-space: nowrap;
  color: var(--ink-muted); background: var(--ground); border: 1px solid var(--line-soft, var(--line));
}
.group-gl-inline.gl-from-register { color: var(--ink); background: transparent; border-color: var(--line); }
.group-gl-inline.gl-from-history {
  color: var(--navy-deep, #102A42); border-color: var(--navy, #1A3A57);
  background: color-mix(in srgb, var(--navy, #1A3A57) 8%, transparent);
}
.group-gl-inline.gl-from-text {
  color: var(--attn, #B4501E); border-color: var(--attn, #B4501E);
  background: color-mix(in srgb, var(--attn, #B4501E) 10%, transparent);
}
/* Mixed: the lines inside got there by different routes, so the group makes no claim
   and the dashed edge says the answer is one level down. */
.group-gl-inline.gl-mixed { border-style: dashed; }

/* A derived quantity marks itself by the colour of the figure alone. A border under
   the cell reads as an extra row — which is the very thing the caption was moved into
   a tooltip to avoid — so nothing here adds a pixel of height. */
.li-qty-cell.is-derived { cursor: help; }
.li-qty-cell.is-derived .li-qty { color: var(--attn, #B4501E); font-weight: 500; }

/* The arithmetic warning: an orange triangle on the line, and on the collapsed group
   above it when anything inside is off. Inline and vertically centred, so it never
   changes a row's height. */
.math-warn {
  display: inline-flex; width: 15px; height: 15px; vertical-align: -3px;
  margin-right: 5px; color: var(--attn, #B4501E); cursor: help; flex: none;
}
.math-warn svg { width: 100%; height: 100%; }
.math-warn[hidden] { display: none !important; }

/* The action bar in three groups: say what these lines are, fix what is wrong, take
   them away. Each group is visually one thing, so eleven controls read as three
   decisions — and wrap as three blocks on a narrow screen instead of one long row. */
/* A group never breaks inside itself. The wrapping unit is the group, not the
   controls in it: when the bar ran out of room it was Staðfesta that dropped to a line
   of its own, leaving a button with no visible connection to the fields it applies.
   Now a group that cannot fit squeezes its fields, and if the bar is narrower still it
   is the whole group that moves down — which reads as one decision moving, not as a
   control coming loose. */
.sel-group {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  padding: 4px 10px 4px 8px; border-radius: var(--radius-sm, 4px);
  background: var(--paper-raised); border: 1px solid var(--line);
  max-width: 100%;
}
/* Inputs default to min-width:auto in flex, which is what makes a row overflow instead
   of compressing. These may shrink — down to a point where the placeholder still reads. */
.sel-group select, .sel-group input { min-width: 0; }
.sel-group button { flex: none; }
.sel-group .sel-label { flex: none; }
.sel-label {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); margin-right: 2px; white-space: nowrap;
}
.line-selection-bar { gap: 10px; }

/* --- Vöruvíddir ------------------------------------------------------------
   Three provenances, three colours — the same idea as the ledger accounts, and
   deliberately the same visual language so the meaning carries between screens:
   neutral is settled, tinted is a claim, and the strength of the claim is the hue. */
.dim-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.dim-table th, .dim-table td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft, var(--line)); text-align: left; }
.dim-table thead th {
  position: sticky; top: 0; background: var(--paper-raised); z-index: 1;
  font-family: ui-monospace, "JetBrains Mono", monospace; font-size: .66rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500;
}
.dim-table td.num, .dim-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dim-table td.dim-name { min-width: 220px; }
.dim-sku { font-family: ui-monospace, monospace; font-size: .72rem; color: var(--ink-muted); margin-left: 6px; }
.dim-muted { color: var(--ink-muted); }

/* The row carries a left rail in its provenance colour: readable down the column
   without reading a word of it. */
.dim-table tr.prov-ai td:first-child { box-shadow: inset 3px 0 0 var(--attn, #B4501E); }
.dim-table tr.prov-manual td:first-child { box-shadow: inset 3px 0 0 var(--navy, #1A3A57); }
.dim-table tr.prov-verified td:first-child { box-shadow: inset 3px 0 0 var(--ok, #14654A); }
.dim-table tr.prov-none td:first-child { box-shadow: inset 3px 0 0 var(--line); }

.prov-tag { font-size: .7rem; padding: 1px 8px; border-radius: 2px; white-space: nowrap; }
.prov-tag.prov-ai { background: var(--attn-wash, #F6E6DC); color: var(--attn, #B4501E); }
.prov-tag.prov-manual { background: var(--navy-wash, #E2E9EF); color: var(--navy-deep, #102A42); }
.prov-tag.prov-verified { background: var(--ok-wash, #DDEDE6); color: var(--ok, #14654A); }

.gl-legend i.k-ai { background: var(--attn, #B4501E); border-color: var(--attn, #B4501E); }
.gl-legend i.k-manual { background: var(--navy, #1A3A57); border-color: var(--navy, #1A3A57); }
.gl-legend i.k-verified { background: var(--ok, #14654A); border-color: var(--ok, #14654A); }
.gl-legend i.k-none { background: transparent; }
.gl-legend em { font-style: normal; color: var(--ink-muted); font-size: .92em; }

.allergen {
  display: inline-block; font-size: .7rem; padding: 1px 6px; margin: 0 3px 2px 0;
  border-radius: 2px; background: var(--bad-wash, #F5E1DF); color: var(--bad, #9A2B22);
}
.allergen.may { background: var(--line-soft); color: var(--ink-muted); }

/* The editor */
.dim-window { max-width: 720px; }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 14px 16px; }
.fx-field { display: flex; flex-direction: column; gap: 3px; font-size: .84rem; color: var(--ink-muted); }
.fx-field input { font-size: .9rem; }
.fx-note { padding: 0 16px 12px; margin: 0; color: var(--ink-muted); font-size: .8rem; }
.fx-section { border-top: 1px solid var(--line); padding-top: 10px; }
.fx-section-head { padding: 0 16px 6px; font-weight: 600; font-size: .9rem; }
.fx-allergens { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 16px 8px; }
.fx-allergen { display: flex; align-items: center; gap: 5px; font-size: .85rem; white-space: nowrap; }
.fx-prov { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 14px; }
.fx-prov-opt { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.fx-prov-opt i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; border: 1px solid var(--line); }
.fx-prov-opt.is-disabled { color: var(--ink-muted); }
.fx-prov-opt em { font-style: normal; font-size: .78rem; color: var(--ink-muted); }

.fx-lookup { margin: 14px 16px 0; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; background: var(--ground); }
.fx-lookup.bad { color: var(--bad, #9A2B22); }
.fx-lookup-head { font-size: .85rem; color: var(--ink-muted); margin-bottom: 8px; }
.fx-candidate {
  display: block; width: 100%; text-align: left; background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; margin-bottom: 6px;
  cursor: pointer; font: inherit;
}
.fx-candidate:hover { border-color: var(--attn, #B4501E); }
.fx-cand-name { display: block; font-size: .88rem; }
.fx-cand-nums { display: block; font-size: .76rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* Recipes */
.recipe-card { border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; margin-bottom: 10px; background: var(--paper-raised); }
.recipe-card.prov-ai { border-left: 3px solid var(--attn, #B4501E); }
.recipe-card.prov-manual { border-left: 3px solid var(--navy, #1A3A57); }
.recipe-card.prov-verified { border-left: 3px solid var(--ok, #14654A); }
.recipe-card.prov-none { border-left: 3px solid var(--line); }
.recipe-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.recipe-figures { display: flex; flex-wrap: wrap; gap: 16px; font-size: .88rem; color: var(--ink-muted); }
.recipe-figures b { color: var(--ink); font-variant-numeric: tabular-nums; }
.recipe-allergens { margin-top: 8px; }
.recipe-warn { margin-top: 8px; font-size: .82rem; color: var(--attn, #B4501E); }

/* The ingredient picker: search the register, click a product. Free text is not an
   option here on purpose — an ingredient without a product has no price and no
   nutrition, and a recipe built from those computes nothing. */
.rc-add { position: relative; padding: 0 16px 8px; }
.rc-add input[type="search"] { width: 100%; }
.rc-results {
  position: absolute; left: 16px; right: 16px; z-index: 10; max-height: 260px; overflow-y: auto;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 6px 20px rgba(16,42,66,.15); padding: 4px;
}
.rc-result {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 6px 9px; border-radius: 3px; cursor: pointer; font: inherit;
}
.rc-result:hover { background: var(--navy-wash, var(--ground)); }
.rc-result-name { display: block; font-size: .88rem; color: var(--ink); }
.rc-result-meta { display: block; font-size: .76rem; color: var(--ink-muted); }
.rc-table { margin: 0 0 4px; }
.rc-table input.rc-grams { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.recipe-open { font-size: 1rem; text-decoration: none; }
.recipe-open:hover strong { text-decoration: underline; }

/* --- Amounts: read on hover, act in the header --------------------------------
   The panel is read, not operated — currency, total, ex VAT, VAT — so it opens on
   hover and on keyboard focus, and needs no click. The check and its rounding fix are
   the parts people act on, so they live in the header beside the chip where they are
   visible without opening anything. */
.totals-chip-wrap .supplier-pop.hover-pop {
  /* .supplier-pop is a full-screen modal: fixed, inset 0, with a dimming backdrop.
     That is right for a panel you click open and wrong for one you hover — the
     backdrop covered the whole page the moment the pointer arrived, and swallowed
     the click meant for the button beside the chip. Here it is a popover instead, so
     every one of those modal properties has to be undone by name.
     
     Fixed, not absolute: the line-items card scrolls (overflow: auto for the wide
     table), and an absolutely positioned panel inside it is clipped by that card and
     counted into its scroll area. The panel grew a scrollbar on the lines that could
     not be used — reaching for it moved the pointer off the chip and the panel closed.
     Fixed takes it out of the card's box entirely; where it goes is set in JS, since
     a fixed element cannot be anchored to its parent in CSS alone. */
  display: none;
  position: fixed;
  inset: auto;
  top: 0; right: auto; bottom: auto; left: 0;
  z-index: 240;
  width: 360px; padding: 0;
  background: none;
  align-items: stretch; justify-content: flex-start;
}
.totals-chip-wrap .supplier-pop.hover-pop > .pop-panel { width: 100%; }
/* Only the amount itself opens the panel. The label beside it and the check next to
   it are their own things; hovering them used to open a panel nobody had asked for. */
/* :focus, not :focus-visible — a phone has no hover, so a tap on the amount is the
   only way in, and a tap gives focus without ever being "keyboard" focus. */
#totals-chip:hover ~ .supplier-pop.hover-pop,
#totals-chip:focus ~ .supplier-pop.hover-pop,
.totals-chip-wrap .supplier-pop.hover-pop:hover,
.totals-chip-wrap .supplier-pop.hover-pop:focus-within {
  display: flex;
}
/* A gap between chip and panel would close the panel as the pointer crossed it. */
.totals-chip-wrap .supplier-pop.hover-pop::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}

/* The reconciliation lives inside the panel now, so the header rule that laid it out
   as an inline row beside the chip no longer applies to it. */
.totals-chip-wrap .reconciliation-line:empty { display: none; }
.totals-chip-wrap .recon-fix-btn { padding: 3px 10px; font-size: .8rem; white-space: nowrap; }
.recon-fix-btn[disabled] { opacity: .45; cursor: default; }

/* A credit note reduces what is owed. It is stored positive — DK tells the two apart
   by InvoiceType, not by sign — so the minus and the colour are put on at display
   time, where the question is what the company owes. */
.amount-credit { color: var(--ok); font-variant-numeric: tabular-nums; }

/* --- Record, not work ----------------------------------------------------------
   Documents read back out of DK or Unimaze after the fact. They are already booked
   and are held only to be analysed, so the row says so on its face rather than
   looking like something waiting for a person. Quiet on purpose: this is a label,
   not a warning. */
.retro-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: 1px;
  border: 1px solid transparent;
}
.retro-tag.from-dk { background: var(--paper-sunken); color: var(--ink-muted); border-color: var(--line); }
.retro-tag.from-unimaze { background: var(--accent-soft); color: var(--accent); border-color: var(--navy-soft); }
.retro-row td { opacity: 0.86; }

.inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--ink-muted);
  white-space: nowrap;
  cursor: pointer;
}
.inline-toggle input { margin: 0; }

/* --- Whether one definition speaks for every movement --------------------------
   Shown under the purchase-unit row while it is being edited. It is a caveat, not a
   refusal: the change still goes through, but the person making it should be able to
   see what it will not reach before pressing the button. */
.unit-default-warn {
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--warn);
  background: var(--warn-soft);
  font-size: 0.82rem;
  line-height: 1.45;
}
.unit-default-warn .warn-head { font-weight: 600; margin-bottom: 4px; }
.unit-default-warn ul { margin: 0; padding-left: 18px; }
.unit-default-warn li + li { margin-top: 3px; }
.unit-default-warn .warn-reach { margin-top: 6px; color: var(--ink-muted); }
.unit-default-warn .warn-override {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  cursor: pointer;
}
.unit-default-warn.is-clear {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ink-muted);
}
.unit-default-row .unit-field { width: 90px; }

/* --- Duplicate products, and the rule that found them --------------------------
   The rule lives beside the findings on purpose: when a duplicate someone expected is
   missing, the rule is nearly always the reason, and it should be one click away
   rather than in a settings screen somewhere else. */
.merge-note {
  margin: 4px 0 0 14px;
  font-size: 0.82rem;
  color: var(--warn);
}
/* --- Tvískráðar vörur, í sínum eigin glugga ------------------------------------
   One block per candidate, and inside it the wordings laid out as a table so the
   decision can be read rather than reasoned out: same item, spelling changed, price
   moved. The row that would survive is marked, and it is a radio because which
   wording to keep is a judgement — usually the one with the longest history, often
   the newest spelling. */
.dupe-window { max-width: 1080px; }
.dupe-window .sheet-body { padding: 4px 16px 16px; }
.dupe-block {
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--line-soft);
}
.dupe-block:last-of-type { border-bottom: none; }
.dupe-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.dupe-why { color: var(--ink-muted); font-size: .82rem; }
.dupe-table { margin-bottom: 4px; }
.dupe-table th { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.dupe-table td { padding: 6px 9px; }
.dupe-table th.dupe-pick, .dupe-table td.dupe-pick { width: 46px; text-align: center; }
.dupe-table td.dupe-name { white-space: normal; min-width: 260px; }
.dupe-table td.dupe-date { color: var(--ink-muted); font-size: .8rem; }
.dupe-table td.dim { color: var(--ink-muted); }
/* The row that would survive, marked in the ground rather than in the type — the
   names beside each other are what the eye should be comparing. */
.dupe-table tr.is-keep td { background: var(--accent-soft); }
.dupe-table tr.is-keep td.dupe-name { font-weight: 600; }
.dupe-empty { color: var(--ink-muted); padding: 14px 0; }
.dupe-block .merge-actions { display: flex; gap: 8px; margin-top: 8px; }

.dupe-methods { margin-top: 14px; }
.dupe-methods > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink-muted);
  padding: 4px 0;
}
.dupe-method-table { width: 100%; margin-top: 8px; font-size: 0.85rem; }
.dupe-method-table th { text-align: left; font-weight: 600; color: var(--ink-muted); }
.dupe-method-table td { padding: 3px 6px 3px 0; vertical-align: middle; }
.dupe-method-table select { width: 100%; }

/* --- Line four, and the panels that moved -------------------------------------
   The nav, the id and the state read as one line now, so the check mark carries its
   own number instead of sending you to a panel to find it. */
/* The mark and its number read as one badge, so the ring around them has to be big
   enough to hold both without squeezing — at the old size the percentage touched it. */
.notice-pct { font-size: 0.8rem; font-weight: 600; margin-left: 5px; font-variant-numeric: tabular-nums; }
.notice-icon {
  display: inline-flex; align-items: center; gap: 0;
  min-height: 30px; padding: 3px 12px; border-radius: 999px;
}
.notice-icon svg { width: 17px; height: 17px; }

/* The heading now leads the action bar, so it needs its own breathing room and a rule
   separating it from the buttons that act on what it says. */
.approval-bar .invoice-heading {
  display: inline-flex; align-items: center; gap: 10px;
  padding-right: 14px; margin-right: 4px; border-right: 1px solid var(--line);
}

/* The description column owns the control that opens it. */
.line-items-table th.desc-head { display: table-cell; }
.line-items-table th.desc-head .group-toggle-all { margin-left: 10px; vertical-align: middle; }

/* Narrower fields in the selection bar, so the button that applies them fits beside
   them rather than wrapping onto a line of its own. Both hold short values — a
   reference and an account number — and a box sized for prose only advertised space
   nobody was going to use. */
.line-selection-bar .sel-narrow { flex: 0 1 104px; width: 104px; min-width: 68px; }
.line-selection-bar #selection-division { flex: 0 1 170px; width: 170px; min-width: 96px; }
.sel-mini { padding: 2px 8px; font-size: 0.78rem; }

/* Amounts and the payment dates now sit among the footnotes. */
.approval-bar .footer-field { display: inline-flex; align-items: center; gap: 6px; }
.approval-bar .footer-field label { white-space: nowrap; color: var(--ink-muted); font-size: 0.82rem; }

/* --- Recipe arithmetic, shown ---------------------------------------------------
   A kitchen prices its menu from the cost per portion, so the way it was reached has
   to be readable — not a number to be taken on faith. */
.recipe-missing { margin: 4px 0 0; padding-left: 18px; }
.recipe-missing li { margin: 2px 0; }
.recipe-calc { margin-top: 8px; }
.recipe-calc > summary { cursor: pointer; color: var(--ink-muted); font-size: 0.85rem; }
.recipe-calc-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.82rem; }
.recipe-calc-table th { text-align: left; color: var(--ink-muted); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.recipe-calc-table td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.recipe-calc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.recipe-calc-table .calc-steps { color: var(--ink-muted); font-size: 0.78rem; line-height: 1.5; }
.recipe-calc-total { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-muted); }
.recipe-warn-inline { color: var(--warn); font-size: 0.78rem; }

/* Provenance is shown, never chosen: it records what happened rather than what somebody
   would like it to say. */
.fx-prov-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-prov-note { color: var(--ink-muted); font-size: 0.82rem; }

/* --- Vöruvíddir as a sheet -------------------------------------------------------
   Typed into where it is read, the way the product register is. Every row is exactly
   one line high whatever it holds: a long allergen list or a long product name must
   not push its row taller than its neighbours, because a grid whose rows jump around
   cannot be read across. */
.sheet-grid tbody tr { height: 34px; }
.sheet-grid td {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0;
}
.sheet-grid td.dim-name { max-width: 320px; }
.sheet-grid td.dim-supplier { max-width: 220px; }
.sheet-grid td.dim-allergens { max-width: 190px; }
.sheet-grid td.sheet-cell {
  border: 1px solid var(--line); cursor: cell; position: relative; padding: 5px 8px;
}
.sheet-grid td.sheet-cell:focus {
  outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft);
}
.sheet-grid td.sheet-cell.is-editing { padding: 0; }
.sheet-grid td.sheet-cell.is-editing input {
  width: 100%; border: none; padding: 5px 8px; font-size: inherit; text-align: right;
  background: var(--paper-raised);
}

/* --- Display density and text size ----------------------------------------------
   Per person, per browser, and nothing to do with the data — so it lives on <html> as
   an attribute and every measurement that should respond to it is written in terms of
   these two variables rather than in fixed pixels. */
:root { --density-pad: 6px; --density-row: 34px; --text-scale: 1; }
:root[data-density="comfortable"] { --density-pad: 11px; --density-row: 46px; }
:root[data-density="cosy"]        { --density-pad: 7px;  --density-row: 36px; }
:root[data-density="compact"]     { --density-pad: 3px;  --density-row: 27px; }
:root[data-text-size="sm"] { --text-scale: 0.92; }
:root[data-text-size="md"] { --text-scale: 1; }
:root[data-text-size="lg"] { --text-scale: 1.12; }

body { font-size: calc(1rem * var(--text-scale)); }

.sheet-grid tbody tr, .sheet-table tbody tr, .line-items-table tbody tr, .dim-table tbody tr {
  height: var(--density-row);
}
.sheet-grid td, .sheet-table td, .dim-table td { padding-top: var(--density-pad); padding-bottom: var(--density-pad); }
.line-items-table td { padding-top: calc(var(--density-pad) - 2px); padding-bottom: calc(var(--density-pad) - 2px); }

.header-display { position: relative; display: inline-flex; }
.display-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 172px;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(0,0,0,0.14); padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.display-pop[hidden] { display: none; }
.display-pop-title {
  margin: 6px 6px 2px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-muted);
}
.display-pop-title:first-child { margin-top: 0; }
.display-opt {
  background: none; border: none; text-align: left; padding: 6px 10px; border-radius: var(--radius);
  font: inherit; color: var(--ink); cursor: pointer;
}
.display-opt:hover { background: var(--paper); }
.display-opt.is-on { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }

/* Sortable headers in the nutrition table. Sorting runs on the server over the whole
   list, so the arrow describes the list and not the page that happens to be loaded. */
#dim-table th.dim-sortable { cursor: pointer; user-select: none; }
#dim-table th.dim-sortable:hover { color: var(--accent-strong); }
#dim-table th.dim-sortable.is-sorted { color: var(--accent-strong); }
#dim-table th .sort-arrow { font-size: 0.7em; margin-left: 4px; }

/* Settings notes: who a stored credential belongs to, said plainly. A screen that shows
   an account without naming whose it is, is how one company's settings get edited from
   another company's page. */
.settings-note { margin: 0 0 10px; font-size: 0.85rem; }
.settings-note.is-ok { color: var(--ok); }
.settings-note.is-warn { color: var(--warn); }

/* --- Booking history card ---------------------------------------------------------
   An import that says what it would do before it does it, and a report that says what
   it found and what to do about it. Both are read before they are acted on, so they are
   laid out to be read rather than to be compact. */
.booking-result { margin-top: 12px; }
.booking-tally { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.86rem; margin-bottom: 10px; }
.booking-tally .is-warn { color: var(--warn); }
.booking-samples { margin: 0; padding-left: 18px; font-size: 0.82rem; color: var(--ink-muted); }
.booking-samples li { margin: 2px 0; }
.booking-samples code, .booking-table code { font-size: 0.95em; }
.booking-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin: 10px 0; }
.booking-table th { text-align: left; color: var(--ink-muted); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.booking-table td { padding: 4px 8px; border-bottom: 1px solid var(--line-soft); }
.booking-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.booking-findings { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.booking-finding { padding: 10px 12px; border-radius: var(--radius); border-left: 3px solid var(--line); background: var(--paper); }
.booking-finding.sev-high { border-left-color: var(--danger); }
.booking-finding.sev-medium { border-left-color: var(--warn); }
.booking-finding.sev-low { border-left-color: var(--line); }
.bf-title { font-weight: 600; }
.bf-detail { font-size: 0.84rem; color: var(--ink-muted); margin-top: 3px; }
.bf-suggestion { font-size: 0.84rem; margin-top: 5px; }
.checkbox-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.dk-state.is-ok { color: var(--ok); }
.dk-state.is-warn { color: var(--warn); }

/* A field the server will refuse, marked where it can be fixed. */
.field-bad { border-color: var(--danger); background: var(--danger-soft); }
#user-rows input.user-field { font-size: 0.85rem; padding: 4px 6px; }
#user-rows td { vertical-align: middle; }

/* Something is happening and it is not finished. A synchronous request with no feedback
   is indistinguishable from a page that has stopped working. */
.dk-state.is-working { color: var(--ink-muted); }
.dk-state.is-working::after {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 7px;
  border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
  vertical-align: -1px; animation: dk-spin 0.7s linear infinite;
}
@keyframes dk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dk-state.is-working::after { animation: none; } }

/* The dimensions: a mode, what DK holds, and a mark where the two disagree. */
.dim-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.dim-row {
  display: grid; grid-template-columns: 110px 190px 1fr; gap: 12px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius);
}
.dim-row.is-mismatch { border-color: var(--warn); background: var(--warn-soft); }
.dim-name { font-weight: 600; }
.dim-note { font-size: 0.84rem; color: var(--ink-muted); }
.dim-note.is-warn { color: var(--warn); }
.dim-examples { grid-column: 3; font-size: 0.78rem; color: var(--ink-muted); }
@media (max-width: 820px) { .dim-row { grid-template-columns: 1fr; } .dim-examples { grid-column: 1; } }

/* --- Which installation this is ------------------------------------------------
   Loud on purpose. The development copy is identical to the one clients use, down to
   the credentials it holds, and the cost of confusing them is an invoice booked twice.
   A stripe you cannot miss is cheaper than that. */
.dev-banner {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 6px 16px;
  background: repeating-linear-gradient(135deg, #B4501E, #B4501E 12px, #9A4318 12px, #9A4318 24px);
  color: #fff; font-size: 0.8rem; letter-spacing: 0.02em;
}
.dev-banner strong { letter-spacing: 0.08em; }
.dev-banner span { opacity: 0.92; }

/* --- Innskráning ----------------------------------------------------------------
   The first screen anybody sees of the product, and until now a bare card with a
   heading. It gets the lockup at the size it was drawn for and room to breathe.

   The card is deliberately NOT .card: that class carries `overflow-x: auto` for the
   wide tables it usually holds, and a login form has nothing to scroll — the scrollbar
   it produced was the class doing its job in the wrong place. */
.login-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  /* A soft rise from the paper, so the card sits on something rather than floating on
     a flat field. Two stops only; the brand is carried by the lockup, not the ground. */
  background:
    radial-gradient(90rem 40rem at 50% -10rem, var(--navy-soft) 0%, transparent 65%),
    var(--paper);
}
.login-shell {
  margin: auto;
  padding: 40px 20px 64px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.login-logo {
  width: 100%;
  max-width: 340px;
  height: auto;
  /* The lockup is drawn with its own margins; nothing else is needed around it. */
  display: block;
}
.login-card {
  width: 100%;
  padding: 26px 26px 22px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(16, 42, 66, 0.07);
}
.login-card .field-group + .field-group { margin-top: 14px; }
.login-card label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.login-card input { width: 100%; }
.login-submit {
  width: 100%;
  margin-top: 20px;
  padding: 11px;
  font-size: 0.95rem;
}
/* Reserves its own line whether or not there is anything to say, so the button does
   not jump down the page the moment a password is mistyped. */
.login-status {
  min-height: 1.25rem;
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--danger);
}

@media (max-width: 420px) {
  .login-shell { padding: 24px 16px 40px; gap: 22px; }
  .login-logo { max-width: 260px; }
}