:root {
  /* NMG identity: RAL 1007 (daffodil yellow) + the logo's dark red */
  --ral: #e58100; --ral-dark: #c26d00; --logo-red: #a71222;
  --bg: #f7f4ef; --card: #fff; --line: #e6ddd0; --text: #241d15; --muted: #77694f;
  --brand: var(--ral); --brand-2: var(--ral-dark); --accent: var(--logo-red); --ok: #1f8f4e; --warn: #c9791b; --bad: #b83232;
  --man: #2b5f9e; --falkom: #b8541c; --radius: 8px; --shadow: 0 1px 3px rgba(0,0,0,.08);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--ral-dark); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 6px 12px; }
button.primary { background: var(--ral); color: #fff; border-color: var(--ral); }
button.primary:hover { background: var(--ral-dark); }
button.danger { color: var(--bad); border-color: var(--bad); }
button:disabled { opacity: .5; cursor: default; filter: grayscale(.8); }
input, select, textarea { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: #fff; width: 100%; }
input:read-only, textarea:read-only, select:disabled { background: #f0f2f4; color: #444; }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.hint { font-size: 11px; color: var(--muted); margin-top: 2px; }
.muted { color: var(--muted); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* layout */
header.top { background: var(--ral); color: #fff; display: flex; align-items: center; gap: 18px; padding: 0 20px; height: 52px; }
header.top .logo { font-weight: 700; letter-spacing: .3px; font-size: 17px; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
header.top .logo img { height: 40px; display: block; }
header.top .logo .expand { font-weight: 400; font-size: 13px; color: #fff3e2; letter-spacing: .2px; }
header.top .logo .expand b { font-weight: 700; color: #fff; }
header.top .logo .ver { font-weight: 400; font-size: 10px; color: #fff3e2; opacity: .85; align-self: flex-end; margin-bottom: 3px; }
.lockbanner { background: #fff3e2; border: 1px solid var(--ral, #e58100); border-left: 5px solid var(--ral, #e58100);
  color: #6b3a00; padding: 10px 14px; border-radius: 6px; margin: 0 0 12px; font-size: 14px; }
.lockbanner button { margin-left: 10px; }

header.top nav a { color: #ffe6c4; text-decoration: none; padding: 16px 10px; display: inline-block; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; transition: background .15s, color .15s; }
header.top nav a:hover { color: #fff; background: rgba(255,255,255,.16); border-bottom-color: rgba(255,255,255,.5); }
header.top nav a.active { color: #fff; border-bottom-color: var(--logo-red); }
header.top .spacer { flex: 1; }
header.top .bell { position: relative; color: #ffe6c4; text-decoration: none; font-size: 18px; padding: 6px 8px; border-radius: 6px; }
header.top .bell.active { background: rgba(255,255,255,.12); }
header.top .bell:hover { color: #fff; background: rgba(255,255,255,.16); }
header.top .user a { transition: background .15s; border-radius: 5px; padding: 3px 5px; }
header.top .user a:hover { background: rgba(255,255,255,.18); text-decoration: none; }
header.top .logo { transition: filter .15s; }
.bellcount { position: absolute; top: 0; right: -2px; background: var(--logo-red); color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 1px 5px; }
.notif { padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.notif:hover { background: #f1f6fa; } .notif.unread { border-left: 4px solid var(--ral); background: #fff8ec; }
.notif .nb { white-space: pre-line; font-size: 13px; color: var(--muted); margin-top: 3px; }
h2.district { color: var(--ok); } th.g-District { border-top: 3px solid var(--ok); }
header.top .user { font-size: 13px; color: #ffe6c4; }
header.top .user b { color: #fff; }
main { padding: 18px 20px; max-width: 1700px; margin: 0 auto; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 0 0 auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 15px; margin: 18px 0 8px; color: var(--ral-dark); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
h2.man { color: var(--man); } h2.falkom { color: var(--falkom); }

/* login */
.login { max-width: 380px; margin: 80px auto; }
.login h1 { text-align: center; }
.login .field { margin-bottom: 12px; }
.error { color: var(--bad); font-size: 13px; margin: 6px 0; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; cursor: pointer; }
.tile.active { outline: 2px solid var(--ral); }
.tile .n { font-size: 24px; font-weight: 700; }
.tile .l { font-size: 12px; color: var(--muted); }

/* table */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #f7f9fb; position: sticky; top: 0; z-index: 3; font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none; box-shadow: 0 1px 0 var(--line); }
th.sorted::after { content: " ▲"; font-size: 10px; } th.sorted.desc::after { content: " ▼"; }
th.g-MAN { border-top: 3px solid var(--man); } th.g-Falkom { border-top: 3px solid var(--falkom); } th.g-General { border-top: 3px solid var(--ral-dark); }
tbody tr:hover { background: #f1f6fa; cursor: pointer; }
tr.late td { background: #fff4f2; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.chip.ok { background: #e2f3e8; color: var(--ok); } .chip.warn { background: #fbeedd; color: var(--warn); }
.chip.bad { background: #fbe3e3; color: var(--bad); } .chip.info { background: #e3edf7; color: var(--man); }
.chip.grey { background: #eceff2; color: var(--muted); } .chip.falkom { background: #f9e5da; color: var(--falkom); }

/* drawer */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(900px, 96vw); background: var(--card); z-index: 21; box-shadow: -4px 0 20px rgba(0,0,0,.2); display: flex; flex-direction: column; }
.drawer .head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.drawer .head h1 { margin: 0; font-size: 17px; flex: 1; }
.drawer .body { padding: 6px 18px 18px; overflow-y: auto; flex: 1; }
.drawer .foot { padding: 10px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.tabs button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 12px; }
.tabs button.active { border-bottom-color: var(--brand); font-weight: 600; }
.history td { font-size: 12px; }

/* permissions matrix */
.perm td select { width: auto; }
.perm .ov { background: #fff8e1; }
.badge { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: #eceff2; }
.pw { font-family: ui-monospace, Menlo, monospace; background: #fff8e1; padding: 8px 10px; border: 1px dashed var(--accent); border-radius: 6px; display: inline-block; }

#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 50; }
#toast div { background: #1d2430; color: #fff; padding: 10px 16px; border-radius: 6px; margin-top: 6px; box-shadow: var(--shadow); }
#toast div.bad { background: var(--bad); }
@media (max-width: 700px) { main { padding: 10px; } header.top { padding: 0 10px; gap: 8px; } }

/* v3 workflow */
.chip.wait { background: #fff1cc; color: #8a5a00; }
th.g-Workflow { border-top: 3px solid var(--accent); }
.wf { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; background: #fafbfc; }
.wf.cancelled { opacity: .7; }
.steps { display: flex; flex-wrap: wrap; gap: 4px; }
.step { font-size: 11px; color: var(--muted); padding: 3px 8px; border-radius: 12px; background: #eceff2; white-space: nowrap; }
.step span { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 8px; background: #d5dae0; color: #fff; font-weight: 700; margin-right: 4px; font-size: 10px; }
.step.done { background: #e2f3e8; color: var(--ok); } .step.done span { background: var(--ok); }
.step.cur { background: var(--ral); color: #fff; } .step.cur span { background: var(--logo-red); color: #fff; }
.wfnote { margin-top: 6px; font-size: 13px; white-space: pre-line; background: #fff; border-left: 3px solid var(--ral); padding: 6px 8px; }

/* v4 claims */
table.claims tbody tr { cursor: pointer; }
.claim .log { border-top: 1px solid var(--line); }
.claim .entry { padding: 8px 0; border-bottom: 1px solid var(--line); }
.claim .entry.status { background: #f7f9fb; padding: 6px 8px; font-size: 12px; color: var(--muted); }
.claim .et { white-space: pre-line; margin-top: 3px; }
.claim .att { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.claim .att img { height: 110px; border: 1px solid var(--line); border-radius: 6px; object-fit: cover; }

/* v6 configurations */
.cfgs { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cfg.inactive { opacity: .6; }
.cfghead { display: flex; gap: 14px; align-items: center; }
.thumb { width: 96px; height: 72px; flex: 0 0 96px; border: 1px solid var(--line); border-radius: 6px; background: #f4f6f8; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 11px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.cfg .desc { font-size: 14px; }
.cfgbody { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.cfgbody h3 { font-size: 13px; margin: 14px 0 6px; color: var(--brand); }
.details { white-space: pre-line; margin: 6px 0 4px; }
.cfgimgs { display: flex; flex-wrap: wrap; gap: 10px; }
.cfgimg { margin: 0; width: 220px; }
.cfgimg img { width: 220px; height: 160px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; }
.cfgimg figcaption { font-size: 12px; color: var(--muted); margin-top: 3px; }
ul.docs { padding-left: 18px; margin: 4px 0; } ul.docs li { margin: 3px 0; }
button.mini { padding: 1px 6px; font-size: 11px; }
.cfgedit, .cfgupload { background: #fffdf5; border: 1px dashed var(--line); border-radius: 6px; padding: 8px 10px; margin: 8px 0; }

/* fat, always-visible ruler above the orders table (drag to scroll sideways) */
.ruler { position: sticky; top: 0; z-index: 5; height: 26px; margin-bottom: 8px; border-radius: 13px; background: #dfe6ee; border: 1px solid #c9d3de; user-select: none; cursor: pointer; }
.ruler-handle { position: absolute; top: 2px; bottom: 2px; left: 0; width: 120px; border-radius: 11px; background: var(--ral); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; font-size: 11px; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,.25); touch-action: none; }
.ruler-handle:active { cursor: grabbing; background: var(--ral-dark); }
/* the orders table scrolls inside its own frame, so the header row and the ruler stay visible
   while the rows scroll (tiles and filters scroll away with the page as before) */
#tbl.tablewrap { overflow: auto; max-height: calc(100vh - 132px); }
.tablewrap { overflow-x: auto; }
.tablewrap::-webkit-scrollbar { height: 14px; width: 14px; }
.tablewrap::-webkit-scrollbar-thumb:vertical { background: #b8c4d0; border-radius: 6px; }
.tablewrap::-webkit-scrollbar-thumb { background: #b8c4d0; border-radius: 6px; }

/* Test environment (APP_ENV=test): banner across the top, header in a clearly different colour */
.testbanner { position: sticky; top: 0; z-index: 1000; background: #6a1b9a; color: #fff; text-align: center; font-weight: 700; letter-spacing: .3px; padding: 7px 12px; font-size: 13px; border-bottom: 3px solid #ffd600; }
body.testenv header.top { background: #8e24aa; }
body.testenv header.top nav a.active { border-bottom-color: #ffd600; }