/* Sadan Al-Haramain - stage 1 UI */
:root {
  --bg: #f5f4ef;
  --surface: #ffffff;
  --surface-2: #faf9f5;
  --ink: #1b2421;
  --ink-2: #3d4844;
  --muted: #6b7570;
  --line: #e4e1d8;
  --line-2: #efede6;
  --brand: #0b5d4b;
  --brand-ink: #ffffff;
  --brand-soft: #e3f0eb;
  --brand-dark: #0c3b31;
  --gold: #b7862f;
  --gold-soft: #f6ecd6;
  --danger: #b4372f;
  --danger-soft: #fbe9e7;
  --warn: #9a6a00;
  --warn-soft: #fdf3d8;
  --ok: #18794e;
  --ok-soft: #e1f3ea;
  --info: #2d5f9a;
  --info-soft: #e5eef9;
  --shadow: 0 1px 2px rgba(20, 30, 26, .06), 0 4px 16px rgba(20, 30, 26, .05);
  --shadow-lg: 0 10px 40px rgba(12, 30, 24, .18);
  --radius: 12px;
  --side: 256px;
  --font: 'Noto Sans Arabic', 'Inter', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}
html[lang="en"] { --font: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
.num, .mono { font-family: 'Inter', var(--font); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.mono { letter-spacing: .02em; }
[hidden] { display: none !important; }

/* boot */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 50; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-art { background: var(--brand-dark); color: #f3ead6; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-art::before { content: ''; position: absolute; inset: 0; opacity: .09; background-image:
  radial-gradient(circle at 0 0, transparent 22px, #d4a64a 23px, #d4a64a 24px, transparent 25px),
  radial-gradient(circle at 48px 48px, transparent 22px, #d4a64a 23px, #d4a64a 24px, transparent 25px);
  background-size: 48px 48px; }
.login-art > * { position: relative; }
.login-art .brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; }
.login-art .brand img { width: 44px; height: 44px; }
.login-art h1 { font-size: 34px; line-height: 1.3; margin: 0 0 12px; font-weight: 700; color: #fff; }
.login-art p { margin: 0; opacity: .82; max-width: 460px; }
.login-art .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.login-art .tags span { border: 1px solid rgba(212, 166, 74, .45); color: #f0dcae; padding: 4px 12px; border-radius: 99px; font-size: 13px; }
.login-art .foot { font-size: 12.5px; opacity: .6; }
.login-box { display: grid; place-items: center; padding: 32px 20px; }
.login-card { width: 100%; max-width: 380px; }
.login-card h2 { margin: 0 0 4px; font-size: 24px; }
.login-card .sub { color: var(--muted); margin: 0 0 28px; }
.login-card .lang-row { display: flex; justify-content: flex-end; margin-bottom: 40px; }
.login-card .btn { width: 100%; justify-content: center; height: 44px; font-size: 15px; }
.login-err { background: var(--danger-soft); color: var(--danger); padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 13.5px; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.side { background: var(--brand-dark); color: #d9e4df; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.side .brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.side .brand img { width: 38px; height: 38px; flex: none; }
.side .brand b { display: block; color: #fff; font-size: 14.5px; line-height: 1.3; }
.side .brand small { color: #d4a64a; font-size: 11.5px; }
.side nav { padding: 10px 10px 20px; flex: 1; }
.side .grp { font-size: 11.5px; letter-spacing: .04em; color: rgba(217, 228, 223, .5); padding: 16px 10px 6px; }
.side a.item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #d9e4df; font-size: 14px; margin-bottom: 1px; }
.side a.item svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.side a.item:hover { background: rgba(255,255,255,.06); color: #fff; }
.side a.item.on { background: rgba(212,166,74,.16); color: #fff; box-shadow: inset 3px 0 0 #d4a64a; }
html[dir="rtl"] .side a.item.on { box-shadow: inset -3px 0 0 #d4a64a; }
.side a.item.soon { opacity: .45; cursor: default; }
.side a.item.soon:hover { background: none; color: #d9e4df; }
.side a.item .badge { margin-inline-start: auto; font-size: 10.5px; background: rgba(255,255,255,.1); color: #cfd9d4; padding: 1px 7px; border-radius: 99px; }
.side .me { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #d4a64a; color: var(--brand-dark); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.side .me b { color: #fff; display: block; font-weight: 600; }
.side .me small { color: rgba(217,228,223,.65); }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 28px; background: rgba(245,244,239,.85); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--line-2); }
.top .burger { display: none; }
.top .crumb { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.top .spacer { flex: 1; }
.view { padding: 24px 28px 48px; max-width: 1280px; width: 100%; }

.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 22px; font-weight: 700; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.page-head .actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 500; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--surface-2); border-color: #d6d2c6; }
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { background: #094e3f; }
.btn.danger { color: var(--danger); }
.btn.danger.solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: rgba(0,0,0,.04); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 7px; }
.btn.icon { width: 32px; padding: 0; justify-content: center; height: 32px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 5px; font-weight: 500; }
.field .hint { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.input, select.input, textarea.input { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); padding: 0 12px; outline: none; transition: border-color .12s, box-shadow .12s; }
textarea.input { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11,93,75,.12); }
.input:disabled { background: var(--surface-2); color: var(--muted); }
.input.ltr { direction: ltr; text-align: start; }
html[dir="rtl"] .input.ltr { text-align: right; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; margin-inline-end: 18px; }
.check input { width: 17px; height: 17px; accent-color: var(--brand); margin: 0; }

.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--muted); }
.seg button.on { background: var(--brand); color: #fff; }

/* ---------- cards / tables ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.card-h h3 { margin: 0; font-size: 15px; font-weight: 600; }
.card-h .more { margin-inline-start: auto; }
.card-b { padding: 18px; }

.toolbar { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.toolbar .search { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
.toolbar .search svg { position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%); width: 16px; color: var(--muted); }
.toolbar .search .input { padding-inline-start: 36px; height: 36px; }
.toolbar select.input, .toolbar input.input { height: 36px; width: auto; }

.tw { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: start; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.t td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover td { background: #fcfbf8; }
table.t td.acts { white-space: nowrap; text-align: end; width: 1%; }
table.t td.acts .btn + .btn { margin-inline-start: 4px; }
table.t tr.off td { color: var(--muted); }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 9px; border-radius: 99px; font-weight: 500; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.off { background: #eeede8; color: var(--muted); }
.pill.gold { background: var(--gold-soft); color: #7d5a17; }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.brand { background: var(--brand-soft); color: var(--brand); }
.pill.t-asset { background: #e5eef9; color: #2d5f9a; }
.pill.t-liability { background: #fbe9e7; color: #a13a31; }
.pill.t-equity { background: #efe8f8; color: #6a46a0; }
.pill.t-revenue { background: #e1f3ea; color: #18794e; }
.pill.t-expense { background: #fdf3d8; color: #8a5d00; }

/* ---------- dashboard ---------- */
.hello { background: var(--brand-dark); color: #f3ead6; border-radius: 16px; padding: 24px 26px; margin-bottom: 18px; display: flex; gap: 20px; align-items: center; position: relative; overflow: hidden; }
.hello::after { content: ''; position: absolute; inset-inline-end: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; border: 28px solid rgba(212,166,74,.12); }
.hello h1 { margin: 0 0 4px; font-size: 22px; color: #fff; }
.hello p { margin: 0; opacity: .8; }
.hello .date { margin-inline-start: auto; text-align: end; font-size: 13px; opacity: .85; position: relative; z-index: 1; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi { padding: 16px 18px; }
.kpi .l { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.kpi .l svg { width: 16px; height: 16px; color: var(--gold); }
.kpi .v { font-size: 28px; font-weight: 700; margin-top: 6px; line-height: 1.1; }
.kpi .s { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.dash-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.stages { list-style: none; margin: 0; padding: 0; }
.stages li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); align-items: flex-start; }
.stages li:last-child { border-bottom: 0; }
.stages .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 700; background: #eeede8; color: var(--muted); }
.stages .done .dot { background: var(--brand); color: #fff; }
.stages .now .dot { background: var(--gold); color: #fff; box-shadow: 0 0 0 4px var(--gold-soft); }
.stages b { display: block; font-weight: 600; font-size: 14px; }
.stages small { color: var(--muted); font-size: 12.5px; }
.stages .pill { margin-inline-start: auto; }
.rates { display: grid; gap: 8px; }
.rate { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); }
.rate .code { font-weight: 700; width: 42px; }
.rate .val { margin-inline-start: auto; font-weight: 600; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.feed li:last-child { border-bottom: 0; }
.feed .when { color: var(--muted); font-size: 12px; margin-inline-start: auto; white-space: nowrap; }

/* ---------- accounts tree ---------- */
.tree td.name { white-space: nowrap; }
.tree .tg { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; background: none; cursor: pointer; border-radius: 5px; color: var(--muted); vertical-align: middle; padding: 0; }
.tree .tg:hover { background: var(--line-2); }
.tree .tg svg { width: 14px; height: 14px; transition: transform .12s; }
.tree .tg.closed svg { transform: rotate(90deg); }
html[dir="rtl"] .tree .tg.closed svg { transform: rotate(-90deg); }
.tree .sp { display: inline-block; width: 22px; }
.tree tr.g td.name { font-weight: 600; }
.tree tr.g.d0 td { background: var(--surface-2); }
.tree .code { font-weight: 600; color: var(--ink-2); }
.tree .lock { width: 13px; height: 13px; color: var(--gold); vertical-align: -2px; margin-inline-start: 6px; }
.legend { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- roles matrix ---------- */
.matrix th.r { text-align: center; min-width: 108px; }
.matrix td.c { text-align: center; }
.matrix td.c input { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.matrix td.c input:disabled { cursor: not-allowed; }
.matrix tr.mod td { background: var(--surface-2); font-weight: 600; font-size: 13px; color: var(--ink-2); }
.matrix .rdesc { display: block; font-weight: 400; color: var(--muted); font-size: 11px; white-space: normal; }
.matrix td.p small { display: block; color: var(--muted); font-size: 11.5px; font-family: 'Inter', monospace; direction: ltr; text-align: start; }
html[dir="rtl"] .matrix td.p small { text-align: right; }
.savebar { position: sticky; bottom: 16px; margin-top: 14px; display: flex; gap: 10px; align-items: center; background: var(--brand-dark); color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow-lg); }
.savebar span { flex: 1; }

/* ---------- audit ---------- */
.chg { font-size: 12.5px; color: var(--ink-2); }
.chg div { margin: 1px 0; }
.chg .k { color: var(--muted); }
.chg del { color: var(--danger); text-decoration: line-through; }
.chg ins { color: var(--ok); text-decoration: none; }
.pager { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 13px; }
.pager .sp { flex: 1; }

/* ---------- modal & toast ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(12, 24, 20, .42); display: grid; place-items: center; padding: 20px; z-index: 40; animation: fade .12s ease-out; }
.modal { background: var(--surface); border-radius: 14px; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: pop .14s ease-out; }
.modal.sm { max-width: 420px; }
.modal.lg { max-width: 720px; }
.modal-h { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.modal-h h3 { margin: 0; font-size: 16px; }
.modal-h .x { margin-inline-start: auto; }
.modal-b { padding: 20px; overflow-y: auto; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line-2); background: var(--surface-2); border-radius: 0 0 14px 14px; }
.modal .err { background: var(--danger-soft); color: var(--danger); padding: 9px 12px; border-radius: 9px; margin-bottom: 14px; font-size: 13.5px; }
.secret { display: flex; align-items: center; gap: 10px; background: var(--gold-soft); border: 1px dashed #d8b46b; border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.secret .mono { font-size: 19px; font-weight: 700; flex: 1; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.99); } }
.toasts { position: fixed; bottom: 20px; inset-inline-start: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; pointer-events: none; }
html[dir="rtl"] .toasts { transform: translateX(50%); }
.toast { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 14px; animation: pop .15s ease-out; }
.toast.err { background: var(--danger); }
.toast.ok { background: var(--brand); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login-art { padding: 28px 24px; }
  .login-art h1 { font-size: 24px; }
  .login-art .foot, .login-art .tags { display: none; }
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--side); z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  html[dir="rtl"] .side { transform: translateX(100%); }
  body.nav-open .side { transform: none; }
  body.nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 25; }
  .top { padding: 0 16px; }
  .top .burger { display: inline-flex; }
  .view { padding: 18px 16px 40px; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .hello { flex-direction: column; align-items: flex-start; }
  .hello .date { margin-inline-start: 0; text-align: start; }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi .v { font-size: 22px; }
  .page-head .actions { margin-inline-start: 0; }
  .top .who { display: none; }
}

/* =================== stages 2-7 =================== */
.muted { color: var(--muted); }
.sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.pos { color: var(--ok); }
.neg { color: var(--danger); }
.cur { color: var(--muted); font-size: 11px; font-weight: 500; }
.flip { transform: scaleX(-1); }
html[dir="ltr"] .flip { transform: none; }
td.n, th.n { text-align: end; white-space: nowrap; }
th.c { text-align: center; }
td.cb { width: 32px; }
td.cb input { width: 16px; height: 16px; accent-color: var(--brand); }
tr.click { cursor: pointer; }
li.click { cursor: pointer; }
a.kpi { color: inherit; display: block; transition: transform .12s, box-shadow .12s; }
a.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.kpi .v small { font-size: 15px; color: var(--muted); font-weight: 500; }

.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.span2 { grid-column: 1 / -1; }
.fhead { grid-column: 1 / -1; font-weight: 600; font-size: 13px; color: var(--brand); border-bottom: 1px solid var(--line-2); padding-bottom: 6px; margin: 4px 0 12px; }
.req { color: var(--danger); font-weight: 400; }
.modal.xl { max-width: 1040px; }
.inl { display: inline-flex; gap: 6px; align-items: center; }
.inl > span { color: var(--muted); font-size: 13px; white-space: nowrap; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 20px 0 14px; }
.tabs.scroll { overflow-x: auto; scrollbar-width: none; margin-top: 0; }
.tabs button, .tabs a { border: 0; background: none; padding: 9px 14px; cursor: pointer; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs .on { color: var(--brand); border-bottom-color: var(--brand); }

.dgrid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; align-content: start; }
.kv > span { display: block; font-size: 12px; color: var(--muted); }
.kv b { font-weight: 600; }
.kvs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; margin: 12px 0; }
.note { grid-column: 1 / -1; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 10px 12px; white-space: pre-wrap; font-size: 13.5px; }
.lbl { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.bigbal > div { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.bigbal small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.pend { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); color: inherit; font-size: 13px; }
.bal { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--surface-2); margin: 1px 0; white-space: nowrap; }
.bal.pos { background: var(--ok-soft); color: var(--ok); }
.bal.neg { background: var(--danger-soft); color: var(--danger); }
.stmt-sum { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--surface-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.stmt-sum > span:first-child { color: var(--muted); font-size: 13px; min-width: 90px; }

.season-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 14px; }
.season { min-width: 230px; padding: 12px 14px; cursor: pointer; border: 1px solid var(--line); }
.season.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11,93,75,.12); }
.season .sh { display: flex; align-items: center; gap: 6px; }
.season .sh .btn { margin-inline-start: auto; }
.sstats { display: flex; gap: 14px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.sstats b { color: var(--ink); }
.bar { height: 6px; background: var(--line-2); border-radius: 99px; overflow: hidden; min-width: 70px; margin-bottom: 3px; }
.bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.bar.full i { background: var(--gold); }
.profit-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.profit-strip > div > span { display: block; font-size: 12px; color: var(--muted); }
.profit-strip b { font-size: 16px; }
.profit-strip small { margin-inline-start: 6px; color: var(--muted); }
.bulk { display: flex; gap: 8px; align-items: center; padding: 10px 14px; background: var(--brand-soft); border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.bulk select { height: 32px; width: auto; }
.bulk [data-n] { font-weight: 600; color: var(--brand); }

table.items td { padding: 5px 6px; }
table.items .input { height: 34px; }
table.jl select.input { min-width: 200px; }
table.jl select.input.sm { height: 30px; margin-top: 4px; font-size: 12.5px; }
.inv-tot { display: flex; justify-content: flex-end; gap: 22px; align-items: center; padding: 10px 0 4px; flex-wrap: wrap; }
.inv-tot b { font-size: 20px; margin-inline-start: 8px; }
.trail { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.jhead { margin-bottom: 6px; }

.cash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 14px; }
.cashbox { padding: 16px; cursor: pointer; }
.cashbox .ch { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.cashbox .ch svg { width: 26px; height: 26px; color: var(--gold); flex: none; }
.cashbox .ch small { display: block; color: var(--muted); }
.cashbox .cb { font-size: 21px; font-weight: 700; }
.cashbox .cbase { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.total-line { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.total-line b { font-size: 22px; }

table.rep tr.g td { background: var(--surface-2); }
table.rep tr.tot td, table.t tr.tot td { background: #f3f1ea; font-weight: 600; border-top: 1px solid var(--line); }
table.rep tr.hl td { background: var(--brand-soft); color: var(--brand); }
table.rep tr.hl.neg td { background: var(--danger-soft); color: var(--danger); }
table.tb td.n { font-size: 13px; }
.bs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.bs-grid > .tw + .tw { border-inline-start: 1px solid var(--line); }
.hintbox { margin: 0; padding: 10px 14px; background: var(--warn-soft); color: var(--warn); font-size: 13px; display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--line-2); }
.hintbox svg { width: 16px; height: 16px; flex: none; }
.hintbox.okbox { background: var(--ok-soft); color: var(--ok); }

/* status colours */
.pill.jst-draft, .pill.bs-requested { background: var(--warn-soft); color: var(--warn); }
.pill.jst-approved, .pill.vs-submitted, .pill.tk-booked, .pill.ts-open, .pill.bs-modified { background: var(--info-soft); color: var(--info); }
.pill.jst-posted, .pill.vs-issued, .pill.tk-issued, .pill.ts-returned, .pill.bs-confirmed, .pill.ks-active { background: var(--ok-soft); color: var(--ok); }
.pill.jst-void, .pill.vs-none, .pill.tk-none, .pill.ts-planned, .pill.ts-closed, .pill.ks-draft, .pill.ks-closed { background: #eeede8; color: var(--muted); }
.pill.vs-rejected, .pill.ts-cancelled, .pill.bs-cancelled, .pill.ks-cancelled { background: var(--danger-soft); color: var(--danger); }
.pill.ts-full, .pill.kind-hajj, .pill[class*="sk-"] { background: var(--gold-soft); color: #7d5a17; }
.pill.ts-departed, .pill.kind-umrah, .pill[class*="jk-"], .pill[class*="bk-"] { background: var(--brand-soft); color: var(--brand); }

/* ---------------- print ---------------- */
#print { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  body.printing > *:not(#print) { display: none !important; }
  body.printing #print { display: block; }
  body { background: #fff; font-size: 12px; }
  .p-sheet { color: #000; }
  .p-head { display: flex; gap: 14px; align-items: center; border-bottom: 2px solid #0c3b31; padding-bottom: 10px; margin-bottom: 14px; }
  .p-head img { width: 54px; height: 54px; }
  .p-co b { font-size: 16px; display: block; }
  .p-co div { font-size: 11px; color: #444; }
  .p-contact { margin-inline-start: auto; text-align: end; font-size: 11px; color: #333; }
  .p-title { text-align: center; font-size: 18px; margin: 6px 0 14px; letter-spacing: .02em; }
  .p-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 20px; margin-bottom: 12px; }
  .p-meta > div > span { display: block; font-size: 10.5px; color: #555; }
  .p-meta b { font-size: 13px; }
  .p-amount { text-align: center; font-size: 26px; font-weight: 700; border: 2px solid #0c3b31; border-radius: 8px; padding: 12px; margin: 14px auto; max-width: 340px; }
  .p-totals { margin: 10px 0; display: grid; justify-content: end; gap: 4px; }
  .p-totals div { display: flex; gap: 30px; justify-content: space-between; }
  .p-totals .grand { font-size: 16px; font-weight: 700; border-top: 2px solid #000; padding-top: 4px; }
  .p-sign { display: flex; gap: 20px; margin-top: 50px; }
  .p-sign div { flex: 1; border-top: 1px solid #000; padding-top: 6px; text-align: center; font-size: 11px; }
  .p-stamp { float: inline-end; border: 2px solid #b4372f; color: #b4372f; padding: 2px 10px; font-weight: 700; transform: rotate(-4deg); }
  .p-foot { margin-top: 24px; font-size: 10px; color: #777; border-top: 1px solid #ddd; padding-top: 6px; }
  #print .tw { overflow: visible; }
  #print table.t th { background: #eee !important; color: #000; font-size: 10.5px; padding: 5px 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print table.t td { padding: 5px 6px; font-size: 11px; border-bottom: 1px solid #ddd; }
  #print a { color: #000; }
  #print .pill { border: 1px solid #999; background: none !important; color: #000 !important; }
  #print .stmt-sum, #print .hintbox { background: #f4f4f4; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print .bs-grid { grid-template-columns: 1fr 1fr; }
  #print .note { white-space: pre-wrap; font-size: 11px; margin-top: 8px; }
}
@media print { @page land { size: A4 landscape; margin: 10mm; } .p-sheet.land { page: land; } }

@media (max-width: 1100px) {
  .profit-strip { grid-template-columns: repeat(3, 1fr); }
  .kvs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .dgrid, .bs-grid, .fgrid, .info { grid-template-columns: 1fr; }
  .bs-grid > .tw + .tw { border-inline-start: 0; border-top: 1px solid var(--line); }
  .profit-strip { grid-template-columns: 1fr 1fr; }
  .toolbar .inl { width: 100%; }
  .toolbar select.input { flex: 1; min-width: 140px; }
}

table.t td .num, table.t td.num { white-space: nowrap; }

/* =================== v2.1 =================== */
.att { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.att-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.att-h b { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.att-h svg { width: 15px; height: 15px; color: var(--gold); }
.att-up { margin-inline-start: auto; cursor: pointer; }
.att-list { list-style: none; margin: 0; padding: 0; }
.att-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); flex-wrap: wrap; }
.att-list li > a:first-child { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; min-width: 0; }
.att-list li > a:first-child svg { width: 15px; height: 15px; flex: none; }
.att-list li small { flex: 1; }
.att-empty { color: var(--muted); font-size: 13px; padding: 4px 0; }
.att-prog { font-size: 12.5px; color: var(--brand); }
.hist { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; font-size: 13px; }
.hist li { padding: 6px 0; border-top: 1px dashed var(--line); }
.hist .when { color: var(--muted); font-size: 12px; }
.clip { display: inline-flex; align-items: center; gap: 2px; color: var(--gold); font-size: 11.5px; vertical-align: 1px; }
.clip svg { width: 13px; height: 13px; }
.flipv { transform: scaleY(-1); }
.imp-sum { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
table.t tr.bad td { background: #fdf3f2; }
.tf-rate { font-size: 13px; margin-top: -4px; }

.bell { position: relative; }
.bell .btn { position: relative; }
.bell-n { position: absolute; top: -2px; inset-inline-end: -4px; background: var(--danger); color: #fff; border-radius: 99px; font-size: 10.5px; padding: 0 5px; line-height: 16px; min-width: 16px; text-align: center; }
.bell-panel { position: absolute; top: 44px; inset-inline-end: 0; width: min(420px, 92vw); max-height: 70vh; overflow-y: auto; z-index: 20; box-shadow: var(--shadow-lg); }
.bell-body { padding: 6px 14px 12px; }
.al-item { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.al-item:last-child { border-bottom: 0; }
.al-item .al-h { display: flex; align-items: center; gap: 8px; justify-content: space-between; color: var(--ink); }
.al-item .al-h b { font-weight: 600; font-size: 13.5px; }
.al-item ul { margin: 6px 0 0; padding-inline-start: 18px; font-size: 12.5px; }
.al-item li { margin: 2px 0; }
.al-danger .al-h b { color: var(--danger); }
.alerts-card { margin-bottom: 18px; border-color: #f0d9b0; }
.alerts-card .card-h svg { width: 16px; height: 16px; color: var(--danger); }
.alerts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 22px; padding: 4px 18px 10px; }
.logo-row { display: flex; gap: 18px; align-items: center; }
.logo-prev { width: 88px; height: 88px; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 6px; flex: none; }
@media print {
  .p-words { text-align: center; font-size: 12.5px; margin: -6px 0 14px; font-weight: 600; }
  .p-sheet .p-words { text-align: start; }
  .p-amount + .p-words { text-align: center; }
  .p-head img { object-fit: contain; }
}
.linkbtn { background: none; border: 0; padding: 0; color: var(--brand); cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 5px; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn svg { width: 15px; height: 15px; }