/* Logistics Master sign-in and administration pages. Arc Reactor tokens from the app (site/css/style.css);
   text sizes 12–16 px (owner rule); light and dark follow the system; Arabic is right-to-left. */
:root {
  --bg: #02070d; --bg-2: #06111b; --tile: rgba(3,14,25,.72); --line: rgba(61,194,255,.12); --line-2: rgba(61,194,255,.24);
  --text: #e4f5ff; --text-2: #a9cbe0; --muted: #6890ab; --pri: #3dc2ff; --pri-soft: rgba(22,172,251,.11); --pri-line: rgba(61,194,255,.5);
  --ok: #2bff5e; --ok-soft: rgba(0,255,65,.09); --red: #ff4d5e; --red-soft: rgba(255,77,94,.1); --on-pri: #001421;
  --brand-blue: #16acfb; --brand-green: #00ff41;
  --f-display: 'Oxanium', 'Arial Narrow', sans-serif; --f-body: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #e9f2f8; --bg-2: #f4f9fc; --tile: rgba(255,255,255,.8); --line: rgba(8,90,140,.12); --line-2: rgba(8,90,140,.24);
    --text: #04223a; --text-2: #2d5470; --muted: #587a92; --pri: #0877b8; --pri-soft: rgba(10,143,214,.09); --pri-line: rgba(8,119,184,.5);
    --ok: #00862c; --ok-soft: rgba(0,150,50,.08); --red: #c42a3a; --red-soft: rgba(196,42,58,.08); --on-pri: #fff; color-scheme: light; }
}
html[lang="ar"] { --f-body: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: radial-gradient(1200px 600px at 70% -10%, var(--pri-soft), transparent 60%), var(--bg); color: var(--text); font: 400 15px/1.5 var(--f-body); }
a { color: var(--pri); }
code, .mono { font-family: var(--f-mono); font-size: 13px; }
h1 { font: 500 16px var(--f-display); letter-spacing: .14em; text-transform: uppercase; margin: 8px 0 16px; }
h2 { font: 500 14px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin: 0 0 12px; }
html[lang="ar"] h1, html[lang="ar"] h2 { letter-spacing: 0; font-family: var(--f-body); }

.bar { display: flex; align-items: center; gap: 16px; padding: 0 20px; min-height: 56px; border-bottom: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.amark { width: 30px; height: 26px; } .a-b { fill: var(--brand-blue); } .a-g { fill: var(--brand-green); }
.sys { font: 600 14px var(--f-mono); color: var(--pri); letter-spacing: .1em; }
.spacer { flex: 1; }
.nav, .langs { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a, .langs a { padding: 6px 10px; border: 1px solid transparent; color: var(--text-2); text-decoration: none; font-size: 14px; }
.langs a { font-size: 13px; }
.nav a:hover, .langs a:hover { border-color: var(--line-2); color: var(--text); }
.nav a[aria-current], .langs a[aria-current] { border-color: var(--pri-line); color: var(--pri); background: var(--pri-soft); }
.me { color: var(--text-2); font: 13px var(--f-mono); text-decoration: none; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar form { margin: 0; }

main { padding: 24px 20px 48px; margin: 0 auto; }
main.narrow { max-width: 480px; padding-top: 8vh; }
main.wide { max-width: 1500px; }
.card { background: var(--tile); border: 1px solid var(--line); padding: 20px; margin-bottom: 16px; }
.lead { color: var(--text-2); margin: 0 0 16px; }
.hint { color: var(--muted); font-size: 13px; }
.cols { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cols .grow { flex: 1 1 560px; min-width: 0; overflow-x: auto; }
.cols .side { flex: 0 1 380px; }
.crumbs { margin: 0; font-size: 14px; }

.form { display: grid; gap: 12px; margin-bottom: 16px; }
.form.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
label { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
label.opt { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--text); }
input:not([type=radio]):not([type=checkbox]), select { height: 38px; padding: 0 10px; background: var(--bg); color: var(--text); border: 1px solid var(--line-2); font: 15px var(--f-body); border-radius: 0; width: 100%; }
input:focus, select:focus, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
fieldset.units, fieldset.why { border: 1px solid var(--line); padding: 10px 12px; margin: 0; display: grid; gap: 6px; }
fieldset.units legend, fieldset.why legend { font-size: 13px; color: var(--text-2); padding: 0 4px; }
fieldset.units .boxes { padding-inline-start: 24px; display: grid; gap: 4px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font: 500 14px var(--f-body); cursor: pointer; text-decoration: none; }
.btn:hover:not(:disabled) { border-color: var(--pri); color: var(--pri); }
.btn.pri { background: var(--pri); border-color: var(--pri); color: var(--on-pri); }
.btn.pri:hover { filter: brightness(1.1); color: var(--on-pri); }
.btn.ghost { min-height: 32px; padding: 0 10px; font-size: 13px; }
.btn.warn { border-color: var(--red); color: var(--red); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.actions { display: grid; gap: 12px; }
.actions form { display: grid; gap: 6px; margin: 0; }
.danger { border-top: 1px solid var(--line); padding-top: 12px; }

.msg { padding: 10px 14px; border: 1px solid; margin: 0 0 16px; }
.msg p { margin: 4px 0; }
.msg.err { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.msg.ok { border-color: var(--ok); background: var(--ok-soft); color: var(--text); }
.msg.once code.pw { font-size: 16px; padding: 4px 8px; background: var(--bg); border: 1px solid var(--line-2); user-select: all; }
.tag { font: 500 12px var(--f-mono); padding: 2px 8px; border: 1px solid var(--ok); color: var(--ok); vertical-align: middle; letter-spacing: .06em; }
.tag.off { border-color: var(--red); color: var(--red); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: start; font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: end; }
tr.off td { color: var(--muted); }
.audit td { font-size: 13px; }
.audit td.detail { max-width: 420px; word-break: break-word; color: var(--text-2); }
.scroll { overflow-x: auto; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.filters label { min-width: 150px; flex: 1 1 150px; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 14px; }
dl.facts dt { color: var(--muted); } dl.facts dd { margin: 0; }
.qr { width: 220px; height: 220px; margin: 8px auto 12px; }
.qr svg { width: 100%; height: 100%; }
.key { text-align: center; } .key code { font-size: 15px; letter-spacing: .08em; }
.codes { columns: 2; font-size: 15px; padding-inline-start: 24px; }
.codes li { margin: 4px 0; }
.badge { display: inline-block; min-width: 20px; padding: 0 6px; margin-inline-start: 4px; font: 600 12px/20px var(--f-mono); text-align: center; background: var(--pri); color: var(--on-pri); }
.tag.wait { border-color: var(--pri); color: var(--pri); }
textarea { padding: 8px 10px; background: var(--bg); color: var(--text); border: 1px solid var(--line-2); font: 15px/1.5 var(--f-body); border-radius: 0; width: 100%; resize: vertical; }
dd.plan { white-space: pre-wrap; max-width: 70ch; }
.narrowcard { max-width: 560px; }