/* ═══════════════════════════════════════════════════════════════════
   Mario Express Finance — design system
   Light workspace · navy navigation · restrained orange accent.
   Layout uses logical properties throughout, so one stylesheet serves
   both LTR (en, tr) and RTL (ar) without a mirrored copy.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* surface */
  --bg:#F6F8FA;
  --panel:#FFFFFF;
  --panel-2:#FAFBFD;
  --line:#E4EAF1;
  --line-soft:#EEF2F7;

  /* ink */
  --ink:#15202C;
  --ink-2:#3D4E61;
  --muted:#6B7C90;

  /* navy navigation */
  --navy:#0F2439;
  --navy-2:#16324C;
  --navy-3:#1E4463;
  --navy-hover:rgba(255,255,255,.07);
  --navy-active:rgba(255,255,255,.13);
  --navy-ink:#E8EFF6;
  --navy-muted:#93A7BC;

  /* accent — used sparingly */
  --accent:#E8620C;
  --accent-soft:#FDF0E6;
  --accent-ink:#8A3B05;

  /* financial semantics — reserved, never decorative */
  --pos:#12805C;   --pos-bg:#E6F5EF;
  --neg:#C0392B;   --neg-bg:#FCEDEB;
  --warn:#B7791F;  --warn-bg:#FDF4E3;
  --info:#1D6FB8;  --info-bg:#EAF3FB;
  --neutral-bg:#EFF3F7;

  --radius:10px;
  --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(15,36,57,.05);
  --shadow:0 1px 2px rgba(15,36,57,.04), 0 8px 24px rgba(15,36,57,.06);

  --sidebar-w:236px;
  --header-h:60px;

  --font:"IBM Plex Sans Arabic","IBM Plex Sans",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:14.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--info); text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--info); outline-offset:2px; border-radius:6px}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.01em; text-wrap:balance}
h1{font-size:20px}
h2{font-size:16px}
h3{font-size:14.5px}
p{margin:0 0 10px}
hr{border:0; border-top:1px solid var(--line); margin:18px 0}

/* numerals line up in every language */
.num,.money,td.num,th.num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.mono{font-family:var(--mono)}
/* dates and latin identifiers stay LTR inside RTL prose */
.ltr{direction:ltr; unicode-bidi:isolate; display:inline-block}

.muted{color:var(--muted)}
.small{font-size:12.5px}
.xs{font-size:11.5px}
.strong{font-weight:600}
.nowrap{white-space:nowrap}
.text-end{text-align:end}
.text-center{text-align:center}
.pos{color:var(--pos)} .neg{color:var(--neg)} .warn-text{color:var(--warn)}
.stack{display:flex; flex-direction:column; gap:16px}
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.row-tight{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.spread{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.grow{flex:1; min-width:0}

/* ── demo banner ─────────────────────────────────────────────────── */
.demo-banner{
  background:var(--accent-soft); color:var(--accent-ink);
  border-bottom:1px solid #F6D9C2;
  font-size:12px; font-weight:600; letter-spacing:.01em;
  padding:6px 18px; text-align:center;
}
.demo-banner b{
  background:var(--accent); color:#fff; border-radius:4px;
  padding:1px 6px; margin-inline-end:8px; font-size:10.5px; letter-spacing:.06em;
}

/* ═══ AUTH ════════════════════════════════════════════════════════ */
.auth-wrap{
  min-height:100vh; display:grid; grid-template-columns:1fr;
  place-items:center; padding:28px; background:var(--navy);
  background-image:
    radial-gradient(1100px 520px at 12% -10%, #1B3F5F 0%, transparent 62%),
    radial-gradient(760px 460px at 100% 110%, #14314C 0%, transparent 58%);
}
.auth-card{
  width:100%; max-width:404px; background:var(--panel);
  border-radius:16px; padding:34px 34px 28px;
  box-shadow:0 24px 64px rgba(4,15,26,.34);
}
.auth-brand{display:flex; align-items:center; gap:11px; margin-bottom:26px}
.brand-mark{
  width:38px; height:38px; border-radius:9px; flex:0 0 auto;
  background:var(--navy); color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:13px; letter-spacing:.02em;
  box-shadow:inset 0 0 0 2px var(--accent);
}
.brand-text .n{font-size:14.5px; font-weight:700; letter-spacing:.02em; line-height:1.15}
.brand-text .s{font-size:12px; color:var(--accent); font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.auth-card h1{font-size:18px; margin-bottom:3px}
.auth-lead{color:var(--muted); font-size:13.5px; margin-bottom:22px}
.auth-foot{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.auth-note{color:var(--muted); font-size:12px; max-width:22ch; line-height:1.5}

/* language selector */
.lang-switch{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.lang-switch a{
  padding:5px 11px; font-size:12px; font-weight:600; color:var(--muted);
  background:var(--panel); border-inline-end:1px solid var(--line); text-decoration:none;
}
.lang-switch a:last-child{border-inline-end:0}
.lang-switch a:hover{background:var(--panel-2); text-decoration:none}
.lang-switch a[aria-current="true"]{background:var(--navy); color:#fff}
.lang-switch.on-dark a{background:transparent; color:var(--navy-muted); border-color:rgba(255,255,255,.18)}
.lang-switch.on-dark{border-color:rgba(255,255,255,.18)}
.lang-switch.on-dark a:hover{background:var(--navy-hover)}
.lang-switch.on-dark a[aria-current="true"]{background:rgba(255,255,255,.16); color:#fff}

/* ═══ APP SHELL ═══════════════════════════════════════════════════ */
.shell{display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); min-height:100vh}

.sidebar{
  background:var(--navy); color:var(--navy-ink);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-brand{
  display:flex; align-items:center; gap:11px; padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.08); color:#fff; text-decoration:none;
}
.sidebar-brand:hover{text-decoration:none}
.sidebar-brand .brand-mark{background:rgba(255,255,255,.10); box-shadow:inset 0 0 0 2px var(--accent)}
.sidebar-brand .n{color:#fff}
.sidebar-nav{padding:12px 10px; flex:1}
.nav-group + .nav-group{margin-top:6px; padding-top:10px; border-top:1px solid rgba(255,255,255,.07)}
.nav-group-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:none; border:0; cursor:pointer; padding:7px 10px; border-radius:8px;
  color:var(--navy-muted); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.nav-group-head:hover{background:var(--navy-hover); color:var(--navy-ink)}
.nav-group-head .chev{transition:transform .15s ease}
.nav-group[data-open="false"] .chev{transform:rotate(-90deg)}
[dir="rtl"] .nav-group[data-open="false"] .chev{transform:rotate(90deg)}
.nav-group[data-open="false"] .nav-items{display:none}
.nav-items{display:flex; flex-direction:column; gap:2px}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  color:#C6D5E4; font-size:13.5px; text-decoration:none; position:relative;
}
.nav-item:hover{background:var(--navy-hover); color:#fff; text-decoration:none}
.nav-item[aria-current="page"]{background:var(--navy-active); color:#fff; font-weight:600}
.nav-item[aria-current="page"]::before{
  content:""; position:absolute; inset-inline-start:0; top:8px; bottom:8px;
  width:3px; border-radius:0 3px 3px 0; background:var(--accent);
}
[dir="rtl"] .nav-item[aria-current="page"]::before{border-radius:3px 0 0 3px}
.nav-item .ico{width:17px; height:17px; flex:0 0 auto; opacity:.9}
.nav-item .soon{
  margin-inline-start:auto; font-size:9.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy-muted); border:1px solid rgba(255,255,255,.16); border-radius:4px; padding:0 5px;
}
.sidebar-foot{padding:12px 14px; border-top:1px solid rgba(255,255,255,.08); font-size:11.5px; color:var(--navy-muted)}

/* header */
.topbar{
  height:var(--header-h); background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 22px; position:sticky; top:0; z-index:20;
}
.topbar h1{font-size:16.5px}
.topbar .crumb{color:var(--muted); font-size:12.5px}
.user-chip{
  display:flex; align-items:center; gap:9px; padding:5px 9px; border-radius:9px;
  background:var(--panel-2); border:1px solid var(--line);
}
.avatar{
  width:28px; height:28px; border-radius:50%; flex:0 0 auto; background:var(--navy); color:#fff;
  display:grid; place-items:center; font-size:11.5px; font-weight:700;
}
.user-chip .who{line-height:1.2}
.user-chip .who b{display:block; font-size:12.5px; font-weight:600}
.user-chip .who span{display:block; font-size:11px; color:var(--muted)}

.content{padding:22px; max-width:1360px}
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.page-head .sub{color:var(--muted); font-size:13px; margin-top:2px}

/* ═══ CARDS ═══════════════════════════════════════════════════════ */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm)}
.card-head{padding:14px 16px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; gap:12px}
.card-body{padding:16px}
.card-body.tight{padding:12px 16px}
.card-foot{padding:11px 16px; border-top:1px solid var(--line-soft); background:var(--panel-2); border-radius:0 0 var(--radius-lg) var(--radius-lg)}

.grid{display:grid; gap:14px}
.g-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
/* wide panels: two per row on a desktop, one on anything narrower */
.g-panels{grid-template-columns:repeat(auto-fit,minmax(520px,1fr))}
.g-6{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}

/* stat tile */
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px 15px; box-shadow:var(--shadow-sm)}
.stat .label{font-size:11.5px; color:var(--muted); font-weight:500; margin-bottom:5px; letter-spacing:.01em}
.stat .value{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.2}
.stat .value .cur{font-size:12px; color:var(--muted); font-weight:500; margin-inline-start:3px}
.stat .foot{margin-top:6px; font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:5px}
.stat.is-pos .value{color:var(--pos)}
.stat.is-neg .value{color:var(--neg)}
.stat.is-accent{border-color:#F3D9C4; background:linear-gradient(0deg,var(--accent-soft),var(--accent-soft))}
.stat.is-accent .label{color:var(--accent-ink)}

/* ═══ BUTTONS ═════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 14px; border-radius:9px; border:1px solid transparent;
  background:var(--navy); color:#fff; font-size:13.5px; font-weight:600;
  cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .13s ease,border-color .13s ease;
}
.btn:hover{background:var(--navy-2); color:#fff; text-decoration:none}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed}
.btn-ghost{background:var(--panel); color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:var(--panel-2); color:var(--ink)}
.btn-accent{background:var(--accent); color:#fff}
.btn-accent:hover{background:#D25709; color:#fff}
.btn-danger{background:var(--neg); color:#fff}
.btn-danger:hover{background:#A82F23; color:#fff}
.btn-quiet{background:transparent; color:var(--muted); border-color:transparent; padding:6px 8px}
.btn-quiet:hover{background:var(--neutral-bg); color:var(--ink)}
.btn-sm{padding:5px 10px; font-size:12.5px; border-radius:7px}
.btn-lg{padding:11px 18px; font-size:14.5px; width:100%}
.btn .ico{width:16px; height:16px}
.btn-group{display:inline-flex; gap:7px; flex-wrap:wrap}

/* ═══ FORMS ═══════════════════════════════════════════════════════ */
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.field > label{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.field .req{color:var(--neg); margin-inline-start:2px}
.field .hint{font-size:11.5px; color:var(--muted)}
.input,select.input,textarea.input{
  width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:9px;
  background:var(--panel); font-size:14px; transition:border-color .13s ease, box-shadow .13s ease;
}
.input:hover{border-color:#CFD9E4}
.input:focus{outline:0; border-color:var(--info); box-shadow:0 0 0 3px rgba(29,111,184,.13)}
.input::placeholder{color:#9AA9B9}
textarea.input{min-height:74px; resize:vertical}
select.input{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7C90' stroke-width='1.6'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:15px;
  background-position:right 10px center; padding-inline-end:32px;
}
[dir="rtl"] select.input{background-position:left 10px center; padding-inline-end:11px; padding-inline-start:32px}
.input.has-error{border-color:var(--neg); background:#FFFCFC}
.field-error{font-size:11.5px; color:var(--neg); font-weight:500}
.form-grid{display:grid; gap:0 14px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.form-grid.two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.form-actions{display:flex; gap:9px; align-items:center; flex-wrap:wrap; padding-top:4px}

.check{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); cursor:pointer}
.check input{width:16px; height:16px; accent-color:var(--navy); cursor:pointer}

/* amount input with currency */
.amount-input{display:flex; align-items:stretch}
.amount-input .input{border-start-end-radius:0; border-end-end-radius:0; font-family:var(--mono); text-align:end}
.amount-input select{
  border:1px solid var(--line); border-inline-start:0; border-start-start-radius:0; border-end-start-radius:0;
  border-start-end-radius:9px; border-end-end-radius:9px;
  background:var(--panel-2); padding:8px 10px; font-size:13px; font-weight:600; color:var(--ink-2);
}

/* searchable select */
.search-select{position:relative}
.search-select .results{
  position:absolute; inset-inline:0; top:calc(100% + 4px); z-index:30; max-height:250px; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:5px;
}
.search-select .results button{
  display:block; width:100%; text-align:start; background:none; border:0; padding:8px 10px;
  border-radius:7px; cursor:pointer; font-size:13.5px;
}
.search-select .results button:hover,.search-select .results button.active{background:var(--neutral-bg)}
.search-select .results .meta{display:block; font-size:11.5px; color:var(--muted)}
.search-select[data-open="false"] .results{display:none}

/* filter bar */
.filters{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.filters .field{margin-bottom:0; min-width:150px}
.filters .field.search{flex:1; min-width:230px}
.search-input{position:relative}
.search-input .ico{position:absolute; inset-inline-start:11px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.search-input .input{padding-inline-start:34px}

/* ═══ TABLES ══════════════════════════════════════════════════════ */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.data{width:100%; border-collapse:collapse; font-size:13.5px}
table.data th{
  background:var(--panel-2); color:var(--muted); text-align:start; white-space:nowrap;
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:10px 14px; border-bottom:1px solid var(--line); position:sticky; top:0;
}
table.data td{padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--panel-2)}
table.data tbody tr.clickable{cursor:pointer}
table.data .primary{font-weight:600; color:var(--ink)}
table.data .sub{font-size:11.5px; color:var(--muted); margin-top:1px}
table.data th.num,table.data td.num{text-align:end}
table.data td.actions{text-align:end; white-space:nowrap}
table.data tfoot td{
  background:var(--panel-2); border-top:1px solid var(--line); border-bottom:0;
  font-size:13px; padding:11px 14px;
}
table.data tfoot .sub{font-size:11px; color:var(--muted); font-weight:500}

/* file slot — the place an attachment will go once uploads are live */
.upload-slot{
  display:flex; align-items:center; gap:11px; padding:13px 15px;
  border:1px dashed var(--line); border-radius:var(--radius-lg);
  background:var(--panel-2); color:var(--muted); font-size:13px;
}

.pagination{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--muted)}
.pagination .pages{display:flex; gap:4px}
.pagination .pages a,.pagination .pages span{
  min-width:30px; height:30px; display:grid; place-items:center; border-radius:7px;
  border:1px solid var(--line); background:var(--panel); font-size:12.5px; color:var(--ink-2); text-decoration:none;
}
.pagination .pages a:hover{background:var(--panel-2); text-decoration:none}
.pagination .pages [aria-current="page"]{background:var(--navy); color:#fff; border-color:var(--navy)}

/* ═══ BADGES / INDICATORS ═════════════════════════════════════════ */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:20px;
  font-size:11.5px; font-weight:600; white-space:nowrap; background:var(--neutral-bg); color:var(--ink-2);
}
.badge-pos{background:var(--pos-bg); color:var(--pos)}
.badge-neg{background:var(--neg-bg); color:var(--neg)}
.badge-warn{background:var(--warn-bg); color:var(--warn)}
.badge-info{background:var(--info-bg); color:var(--info)}
.badge-demo{background:var(--accent-soft); color:var(--accent-ink); font-size:10px; letter-spacing:.06em}

.dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto; display:inline-block}
.dot-pos{background:var(--pos)} .dot-warn{background:var(--warn)} .dot-neg{background:var(--neg)} .dot-none{background:#C3CEDA}

.flag{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600}
.flag-ok{color:var(--pos)} .flag-review{color:var(--warn)} .flag-bad{color:var(--neg)} .flag-none{color:var(--muted)}

/* ═══ MESSAGES ════════════════════════════════════════════════════ */
.alert{display:flex; gap:10px; padding:11px 14px; border-radius:10px; font-size:13.5px; border:1px solid transparent; margin-bottom:14px}
.alert .ico{flex:0 0 auto; margin-top:1px}
.alert-info{background:var(--info-bg); border-color:#CFE3F5; color:#15537F}
.alert-pos{background:var(--pos-bg); border-color:#C4E7D8; color:#0C5F45}
.alert-warn{background:var(--warn-bg); border-color:#F2E0BB; color:#8A5B12}
.alert-neg{background:var(--neg-bg); border-color:#F5CFCA; color:#98291D}
.alert-note{background:var(--panel-2); border-color:var(--line); color:var(--muted); font-size:12.5px}

.toast-stack{position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:80; display:flex; flex-direction:column; gap:9px}
.toast{
  background:var(--navy); color:#fff; padding:11px 15px; border-radius:10px; font-size:13.5px;
  box-shadow:0 10px 30px rgba(15,36,57,.28); display:flex; align-items:center; gap:9px;
  animation:toast-in .18s ease-out;
}
.toast.is-pos{background:var(--pos)} .toast.is-neg{background:var(--neg)}
@keyframes toast-in{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

.empty{padding:44px 20px; text-align:center; color:var(--muted)}
.empty .ico{color:#C3CEDA; margin-bottom:10px}
.empty h3{font-size:14.5px; color:var(--ink-2); margin-bottom:4px}
.empty p{font-size:13px; max-width:40ch; margin:0 auto}

.skeleton{background:linear-gradient(90deg,var(--line-soft) 25%,#F5F8FB 37%,var(--line-soft) 63%); background-size:400% 100%; animation:sk 1.3s ease infinite; border-radius:6px; height:14px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(15,36,57,.42); z-index:70; display:grid; place-items:center; padding:22px}
.modal{background:var(--panel); border-radius:var(--radius-lg); width:100%; max-width:440px; box-shadow:0 24px 60px rgba(4,15,26,.3)}
.modal-head{padding:16px 18px 0}
.modal-body{padding:12px 18px 18px; font-size:13.5px; color:var(--ink-2)}
.modal-foot{padding:12px 18px; border-top:1px solid var(--line-soft); display:flex; justify-content:flex-end; gap:9px}
.modal-backdrop[hidden]{display:none}

/* tabs */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px; overflow-x:auto}
.tabs a{
  padding:9px 14px; font-size:13.5px; font-weight:500; color:var(--muted);
  border-bottom:2px solid transparent; text-decoration:none; white-space:nowrap;
}
.tabs a:hover{color:var(--ink); text-decoration:none}
.tabs a[aria-current="page"]{color:var(--navy); border-bottom-color:var(--accent); font-weight:600}

/* definition rows */
.dl{display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:13.5px}
.dl dt{color:var(--muted); font-size:12.5px}
.dl dd{margin:0; font-weight:500}

/* section heading inside a card */
.section-label{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:9px;
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════ */
@media (max-width:1080px){
  :root{--sidebar-w:200px}
  .content{padding:18px}
}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .sidebar{
    position:fixed; inset-inline-start:0; top:0; bottom:0; width:250px; z-index:60;
    transform:translateX(-100%); transition:transform .2s ease;
  }
  [dir="rtl"] .sidebar{transform:translateX(100%)}
  body.nav-open .sidebar{transform:none}
  body.nav-open::after{content:""; position:fixed; inset:0; background:rgba(15,36,57,.4); z-index:50}
  .nav-toggle{display:inline-flex !important}
  .topbar{padding:0 16px}
  .content{padding:16px}
  .page-head h1{font-size:18px}
}
@media (min-width:861px){ .nav-toggle{display:none !important} }
@media (max-width:560px){
  .stat .value{font-size:18px}
  .card-body{padding:14px}
  .filters .field{min-width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
@media print{
  .sidebar,.topbar,.demo-banner,.no-print{display:none !important}
  .shell{grid-template-columns:1fr}
  body{background:#fff}
  .card{box-shadow:none; border-color:#D8E0E9}
}

/* ═══ PHASE 2 ═════════════════════════════════════════════════════ */

/* a reversed row stays visible — struck through, not deleted */
table.data tr.is-void td{color:var(--muted)}
table.data tr.is-void .num,table.data tr.is-void .primary{text-decoration:line-through}

/* the live credit check under the shipment amount */
.credit-live{
  margin:6px 0 14px; padding:11px 14px; border-radius:var(--radius);
  border:1px solid var(--warn); background:var(--warn-bg); color:var(--accent-ink);
  font-size:13px; display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap;
}
.credit-live.is-ok{border-color:var(--line); background:var(--panel-2); color:var(--muted)}
.credit-live.is-over{border-color:var(--neg); background:var(--neg-bg); color:var(--neg)}
.credit-live b{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* the exchange-rate panel, shown only when the currencies differ */
.fx-panel{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel-2);
  padding:14px 16px 2px; margin-bottom:16px;
}
.fx-result{
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:15px; font-weight:600;
  padding:9px 0; color:var(--ink);
}
.ico.neg{color:var(--neg)}

/* package rows on the shipment form */
#packages input{min-width:78px}
#packages td{padding:7px 10px}

/* ── Phase 3: the reconciliation workbench ──────────────────────── */
.head-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.head-actions form{display:inline}

.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--line);
      border-radius:999px; font-size:12px; color:var(--muted); background:var(--panel-2);
      text-decoration:none; white-space:nowrap}
.chip:hover{border-color:var(--ink-2); color:var(--ink)}
.chip.is-on{background:var(--accent-soft); border-color:#F3D9C4; color:var(--accent-ink); font-weight:500}
.chip .count{font-family:var(--mono); font-size:11px; opacity:.75}

/* a reason is asked for in place, without a dialog and without script */
.inline-form{display:inline-block; vertical-align:middle}
.inline-form > summary{list-style:none; cursor:pointer}
.inline-form > summary::-webkit-details-marker{display:none}
.inline-form form{display:flex; gap:6px; margin-top:6px; align-items:center}
.inline-form form .input{min-width:210px; font-size:12.5px; padding:5px 8px}

.kv{display:grid; gap:9px; font-size:13.5px}
.kv .label{color:var(--muted); font-size:12.5px; display:inline-block; min-width:170px}

/* why a figure is what it is, listed under it */
.notes{margin:12px 0 0; padding-inline-start:18px; list-style:disc}
.notes li{font-size:12.5px; color:var(--muted); margin-bottom:4px}

/* ── permissions grid ───────────────────────────────────────────── */
.perm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px}
.perm-group h3{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
               margin:0 0 8px;font-weight:600}
.perm{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 0;cursor:pointer}
.perm input{accent-color:var(--accent);width:15px;height:15px;flex:0 0 auto}

/* ── Phase 4: security, approvals ────────────────────────────────── */
.qr{display:inline-block;padding:10px;background:#FFF;border:1px solid var(--line);border-radius:12px}
.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:12px}
.codes span{font-size:14px;letter-spacing:.04em;background:var(--panel-2);border:1px solid var(--line);
            border-radius:8px;padding:8px 10px;text-align:center}

.flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px}
.flow .step{padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.flow .step.is-done{background:var(--pos-bg);border-color:transparent;color:var(--pos);font-weight:500}
.flow .step.is-now{background:var(--accent-soft);border-color:#F3D9C4;color:var(--accent-ink);font-weight:600}
.flow .step.is-dead{background:var(--neg-bg);border-color:transparent;color:var(--neg);font-weight:500}
.flow .arrow{color:var(--muted);opacity:.5}

.basis{font-size:11.5px;color:var(--muted);font-family:var(--mono)}