/* Noble Line app — design system.
   Brand Guidelines v1 (June 2026): Noble Navy dominant, Paper ground, Bronze only as the seal / one rule / one word.
   Straight architectural edges (2–4px radii). Built for a site engineer: one hand, sun glare, cheap Android phone —
   so every tap target is ≥ 48px and contrast stays well above WCAG AA. */
:root {
  --navy: #172036; --navy-2: #1f2a45; --navy-3: #2b3a5f; --ink: #171f36; --paper: #faf6ee; --paper-2: #f3ede1;
  --stone: #6e6a60; --stone-2: #8d887c; --line: #e8e0d8; --line-2: #d9cfc3; --bronze: #845027; --bronze-l: #c98a4e;
  --white: #fff; --brand: #172036; --brand-2: #1f2a45; --on-brand: #faf6ee; --card: #fff;
  /* Paper type on the navy field at two strengths (secondary, tertiary): tints of the brand, never another hue */
  --on-brand-2: rgba(250, 246, 238, .74); --on-brand-3: rgba(250, 246, 238, .56);
  --ok: #245a41; --ok-bg: #e5f0ea; --warn: #8a5a00; --warn-bg: #fbf0d9; --bad: #8f3324; --bad-bg: #f8e3df;
  --info: #24507a; --info-bg: #e3edf6; --mute-bg: #eeeae2;
  --r: 3px; --r2: 4px; --tap: 48px;
  --shadow: 0 1px 2px rgba(23, 32, 54, .08), 0 4px 14px rgba(23, 32, 54, .07);
  --shadow-up: 0 -1px 2px rgba(23, 32, 54, .06), 0 -6px 18px rgba(23, 32, 54, .08);
  --font-ar: 'Montserrat', 'DIN Next LT Arabic', 'Tajawal', system-ui, sans-serif;   /* Montserrat carries only Latin (unicode-range): English words and figures inside Arabic follow the brand (29 Oct 2026) */
  --font-en: 'Montserrat', 'Tajawal', system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper); color: var(--ink); font: 500 16px/1.55 var(--font-ar);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior-y: contain;
}
html[lang='en'] body { font-family: var(--font-en); }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: var(--navy); }
.num, .ltr { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.num { font-family: var(--font-en); font-weight: 600; }
.muted { color: var(--stone); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.b { font-weight: 700; }
.hide { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--bronze-l); outline-offset: 2px; }

/* ------------------------------------------------------------------ shell */
#app { min-height: 100%; display: flex; flex-direction: column; }
.appbar {
  position: sticky; top: 0; z-index: 30; background: var(--brand); color: var(--on-brand);
  padding: calc(var(--safe-t) + 10px) 16px 10px; display: flex; align-items: center; gap: 12px; min-height: 60px;
}
.appbar .brand { height: 30px; width: auto; flex: none; }
.appbar .mono { height: 30px; width: auto; flex: none; }
.appbar h1 { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.25; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar .sub { font-size: 12px; color: var(--on-brand-2); font-weight: 500; }
.appbar .icon-btn { color: var(--on-brand); }
.appbar .icon-btn:active { background: rgba(255, 255, 255, .1); }
/* the finishing line under the bar, closed by the bronze seal at its end (left in Arabic, where reading ends) */
.finish { position: relative; height: 1px; background: rgba(250, 246, 238, .28); margin: 0; }
.finish::after { content: ''; position: absolute; top: -3px; inset-inline-end: 0; width: 7px; height: 7px; background: var(--bronze); }
.page { flex: 1; padding: 16px 16px calc(96px + var(--safe-b)); max-width: 760px; width: 100%; margin: 0 auto; }
.page.has-bar { padding-bottom: calc(164px + var(--safe-b)); }

.tabs {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 40; background: var(--white); border-top: 1px solid var(--line);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding-bottom: var(--safe-b); box-shadow: var(--shadow-up);
}
.tabs a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 62px;
  text-decoration: none; color: var(--stone); font-size: 12px; font-weight: 700; position: relative;
}
.tabs a svg { width: 24px; height: 24px; }
.tabs a.on { color: var(--navy); }
.tabs a.on::before { content: ''; position: absolute; top: 0; inset-inline: 22%; height: 3px; background: var(--bronze); }
.tabs .badge { position: absolute; top: 7px; inset-inline-start: calc(50% + 6px); }

/* ------------------------------------------------------------------ type and blocks */
h2 { font-size: 20px; margin: 4px 0 12px; font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 15px; margin: 22px 0 10px; font-weight: 800; color: var(--navy); display: flex; align-items: center; gap: 8px; }
h3 .count { font-weight: 600; color: var(--stone); font-size: 13px; }
.section-rule { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; }
.section-rule h3 { margin: 0; }
.section-rule::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: var(--shadow); }
.card.pad { padding: 14px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.between { justify-content: space-between; }
.stack > * + * { margin-top: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }

/* hero band (home): navy, the brand pattern at low contrast */
.hero {
  background: var(--brand) url('../brand/pattern_mark.svg') no-repeat; background-size: 220px; background-position: -40px 120%;
  color: var(--on-brand); margin: -16px -16px 16px; padding: 18px 16px 20px; position: relative; overflow: hidden;
}
html[dir='rtl'] .hero { background-position: calc(100% + 40px) 120%; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,32,54,.92), rgba(23,32,54,.78)); }
.hero > * { position: relative; }
.hero .greet { font-size: 22px; font-weight: 800; margin: 0; }
.hero .date { color: var(--on-brand-2); font-size: 14px; margin-top: 2px; }
.hero .light { color: var(--bronze-l); font-weight: 300; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(250,246,238,.16); margin-top: 16px; border-radius: var(--r); overflow: hidden; }
.kpis > div { background: var(--brand-2); padding: 10px 10px 9px; }
.kpis b { display: block; font: 700 22px/1.1 var(--font-en); color: var(--on-brand); }
.kpis span { font-size: 12px; color: var(--on-brand-2); }

/* ------------------------------------------------------------------ controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 18px;
  border-radius: var(--r); border: 1px solid var(--brand); background: var(--brand); color: var(--on-brand); font-weight: 700;
  cursor: pointer; text-decoration: none; user-select: none; transition: transform .08s ease, background .15s ease;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.block { display: flex; width: 100%; }
.btn.big { min-height: 56px; font-size: 17px; }
.btn.ghost { background: transparent; color: var(--navy); border-color: var(--line-2); }
.btn.light { background: var(--white); color: var(--navy); border-color: var(--line-2); }
.btn.ok { background: var(--ok); border-color: var(--ok); }
.btn.bad { background: var(--white); color: var(--bad); border-color: #e3b9b1; }
.btn.warn { background: var(--white); color: var(--warn); border-color: #e7cf9a; }
.btn.sm { min-height: 38px; padding: 0 12px; font-size: 14px; }
.btn svg { width: 20px; height: 20px; flex: none; }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: var(--r); cursor: pointer; color: var(--navy); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:active { background: var(--mute-bg); }
.link { background: none; border: 0; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; cursor: pointer; font-weight: 700; }

label.f { display: block; margin-bottom: 12px; }
label.f > span { display: block; font-size: 13px; font-weight: 700; color: var(--stone); margin-bottom: 5px; }
.inp, select.inp, textarea.inp {
  width: 100%; min-height: var(--tap); padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--white); font-size: 17px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.inp:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(23, 32, 54, .12); }
.inp.pin { letter-spacing: .5em; text-align: center; font-family: var(--font-en); font-weight: 700; font-size: 22px; }
textarea.inp { min-height: 80px; resize: vertical; }
.search { position: relative; }
.search .inp { padding-inline-start: 42px; }
.search svg { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--stone); }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--white); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--navy); flex: none; }

/* segmented choice / chips */
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); background: var(--white); border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--ink);
}
.chip.on { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.chip.sq { border-radius: var(--r); }
.chip small { font-weight: 600; opacity: .75; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.pill.submitted { background: var(--warn-bg); color: var(--warn); }
.pill.returned { background: var(--bad-bg); color: var(--bad); }
.pill.approved { background: var(--ok-bg); color: var(--ok); }
.pill.rejected { background: var(--mute-bg); color: var(--stone); }
.pill.queued, .pill.sending { background: var(--info-bg); color: var(--info); }
.pill.failed { background: var(--bad-bg); color: var(--bad); border-color: #e3b9b1; }
.pill.pending { background: var(--warn-bg); color: var(--warn); }
.pill.paid { background: var(--ok-bg); color: var(--ok); }
.pill.partial { background: var(--warn-bg); color: var(--warn); }
.pill.open { background: var(--info-bg); color: var(--info); }
.pill.closed { background: var(--mute-bg); color: var(--stone); }
.badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: var(--on-brand); font: 700 11px/19px var(--font-en); text-align: center; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--stone-2); flex: none; }
.dot.on { background: #2f9e6a; }
.dot.off { background: #c4572f; }

/* notices */
.note { padding: 12px 14px; border-radius: var(--r); border: 1px solid; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.note svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.note.info { background: var(--info-bg); border-color: #c4d6e8; color: var(--info); }
.note.warn { background: var(--warn-bg); border-color: #ecd7a9; color: var(--warn); }
.note.bad { background: var(--bad-bg); border-color: #e9c3bb; color: var(--bad); }
.note.ok { background: var(--ok-bg); border-color: #bcd8c9; color: var(--ok); }
.note ul { margin: 4px 0 0; padding-inline-start: 18px; }

/* ------------------------------------------------------------------ list items */
.item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r2); text-decoration: none; color: inherit; cursor: pointer; min-height: 64px;
}
.item:active { background: var(--paper-2); }
.item .t { font-weight: 800; }
.item .s { font-size: 13px; color: var(--stone); }
.item .chev { width: 18px; height: 18px; color: var(--stone-2); flex: none; }
html[dir='rtl'] .item .chev { transform: scaleX(-1); }
.avatar {
  width: 42px; height: 42px; border-radius: var(--r); background: var(--brand); color: var(--on-brand); flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
}
.avatar.new { background: var(--bronze); }
.avatar.off { background: var(--line-2); color: var(--stone); }
/* a person's photo inside the avatar square (team.js); the initials stay underneath until it loads (24 Oct 2026) */
.avatar.has-photo { position: relative; overflow: hidden; }
.avatar .av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-box .avatar.xl { width: 128px; height: 128px; font-size: 40px; }
.person-title { font-size: 12px; color: var(--stone); }
/* the phone's «Sections» screen: one titled list per section (24 Oct 2026) */
.more-sec .sec-t { font-size: 13px; font-weight: 800; color: var(--stone); margin: 4px 2px 8px; letter-spacing: .02em; }

/* ------------------------------------------------------------------ the day: crew rows */
.toolbar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.toolbar::-webkit-scrollbar { display: none; }
.toolbar .btn { flex: none; }
.crew-group { margin-top: 14px; }
.crew-group > .gh { font-size: 13px; font-weight: 800; color: var(--stone); display: flex; justify-content: space-between; padding: 0 2px 6px; }
.w { background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); margin-bottom: 8px; overflow: hidden; transition: border-color .15s, opacity .15s; }
.w.present { border-color: #9fb7a9; box-shadow: inset 4px 0 0 #2f7d58; }
html[dir='rtl'] .w.present { box-shadow: inset -4px 0 0 #2f7d58; }
.w.absent { opacity: .62; }
.w .top { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 64px; cursor: pointer; }
.w .nm { font-weight: 800; font-size: 16px; line-height: 1.3; }
.w .meta { font-size: 12.5px; color: var(--stone); }
.toggle {
  width: 54px; height: 54px; border-radius: var(--r); border: 2px solid var(--line-2); background: var(--white); display: grid;
  place-items: center; flex: none; cursor: pointer; color: var(--stone-2);
}
.toggle svg { width: 28px; height: 28px; }
.w.present .toggle { background: #2f7d58; border-color: #2f7d58; color: var(--on-brand); }
.w .more { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.w .line-l { font-size: 12px; font-weight: 800; color: var(--stone); margin-bottom: 4px; }
.item-btn {
  width: 100%; min-height: var(--tap); border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--paper);
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; text-align: start; font-weight: 700;
}
.item-btn.set { border-style: solid; background: var(--white); }
.item-btn .parts { display: flex; flex-wrap: wrap; gap: 6px; }
.item-btn .part { background: var(--paper-2); border-radius: var(--r); padding: 2px 8px; font-size: 13px; }

/* sticky summary at the bottom of the day */
.sumbar {
  position: fixed; inset-inline: 0; bottom: calc(62px + var(--safe-b)); z-index: 35; background: var(--brand); color: var(--on-brand);
  padding: 10px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-up);
}
.sumbar.no-tabs { bottom: 0; padding-bottom: calc(10px + var(--safe-b)); }
.sumbar .figs { display: flex; gap: 14px; flex: 1; min-width: 0; }
.sumbar .figs div { line-height: 1.15; }
.sumbar .figs b { display: block; font: 700 19px var(--font-en); }
.sumbar .figs span { font-size: 11.5px; color: var(--on-brand-2); }
.sumbar .btn { background: var(--on-brand); color: var(--brand); border-color: var(--on-brand); }

/* ------------------------------------------------------------------ bottom sheet / dialogs / toast */
.scrim { position: fixed; inset: 0; background: rgba(13, 18, 31, .5); z-index: 60; opacity: 0; transition: opacity .2s; }
.scrim.in { opacity: 1; }
.sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 61; background: var(--paper); border-radius: 10px 10px 0 0;
  max-height: 88vh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1);
  padding-bottom: var(--safe-b); max-width: 760px; margin: 0 auto;
}
.sheet.in { transform: none; }
.sheet .hd { padding: 10px 16px 8px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.sheet .hd::before { content: ''; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); transform: translateX(-50%); }
.sheet .hd h4 { margin: 8px 0 0; font-size: 17px; font-weight: 800; flex: 1; }
.sheet .bd { padding: 14px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet .ft { padding: 10px 16px 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; background: var(--paper); }
.sheet .ft .btn { flex: 1; }
.toast {
  position: fixed; inset-inline: 16px; bottom: calc(80px + var(--safe-b)); z-index: 80; background: var(--ink); color: var(--paper);
  padding: 12px 16px; border-radius: var(--r2); box-shadow: var(--shadow); font-weight: 700; display: flex; gap: 10px; align-items: center;
  transform: translateY(20px); opacity: 0; transition: all .2s; max-width: 560px; margin: 0 auto;
}
.toast.in { transform: none; opacity: 1; }
.toast.bad { background: var(--bad); }
.toast.ok { background: var(--ok); }

/* ------------------------------------------------------------------ auth screens */
.auth { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
.auth .band {
  background: var(--brand) url('../brand/pattern_mark.svg') no-repeat; background-size: 280px; background-position: calc(100% + 60px) 140%;
  color: var(--on-brand); padding: calc(var(--safe-t) + 36px) 24px 30px; position: relative;
}
.auth .band::before { content: ''; position: absolute; inset: 0; background: rgba(23, 32, 54, .86); }
.auth .band > * { position: relative; }
.auth .band img { height: 44px; width: auto; }
.auth .band h1 { font-size: 26px; margin: 26px 0 0; font-weight: 800; line-height: 1.2; }
.auth .band h1 .light { color: var(--bronze-l); font-weight: 300; }
.auth .band p { margin: 6px 0 18px; color: var(--on-brand-2); }
.auth form { padding: 24px; max-width: 460px; width: 100%; margin: 0 auto; flex: 1; }
.auth .foot { text-align: center; padding: 18px; color: var(--stone); font-size: 12px; }
.auth .foot img { height: 34px; margin: 0 auto 6px; opacity: .9; }

/* ------------------------------------------------------------------ tables (admin, statements) */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--white); }
.tbl th, .tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.tbl th { font-size: 12px; color: var(--stone); font-weight: 800; background: var(--paper-2); position: sticky; top: 0; }
.tbl td.n, .tbl th.n { text-align: end; direction: ltr; font-family: var(--font-en); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tfoot td { font-weight: 800; border-top: 2px solid var(--navy); border-bottom: 0; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r2); }
.figure { font: 700 26px/1.1 var(--font-en); color: var(--navy); direction: ltr; unicode-bidi: isolate; }
.stat { padding: 12px; }
.stat span { display: block; font-size: 12px; color: var(--stone); font-weight: 700; }
.stat b { font: 700 20px/1.2 var(--font-en); direction: ltr; unicode-bidi: isolate; display: block; margin-top: 3px; }

.photo { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--r2); border: 1px solid var(--line); background: var(--paper-2); }
.photo-slot {
  border: 2px dashed var(--line-2); border-radius: var(--r2); min-height: 150px; display: grid; place-items: center; text-align: center;
  color: var(--stone); cursor: pointer; background: var(--white); padding: 18px; gap: 6px;
}
.photo-slot svg { width: 40px; height: 40px; margin: 0 auto; color: var(--navy); }
.empty { text-align: center; padding: 36px 20px; color: var(--stone); }
.empty svg { width: 52px; height: 52px; margin: 0 auto 10px; color: var(--line-2); }
.skel { background: linear-gradient(90deg, var(--paper-2), #ebe4d6, var(--paper-2)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: var(--r2); height: 64px; }
@keyframes sk { to { background-position: -200% 0; } }
.spin { width: 20px; height: 20px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.fade-in { animation: fi .22s ease both; }
/* movement only, never transparency: a hidden window freezes animations at their first frame, and a page frozen at
   opacity 0 would read as blank (the hub's lesson) */
@keyframes fi { from { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (min-width: 760px) { .page { padding-inline: 24px; } .sumbar, .tabs { max-width: 760px; margin: 0 auto; } }
@media print { .appbar, .tabs, .sumbar, .no-print { display: none !important; } .page { padding: 0; } body { background: #fff; } }

/* =================================================================== design pass 2 (6 Oct 2026)
   A clearer hierarchy: one strong header per screen, quieter secondary text, tactile lists, and a profile layout for
   people. Still the brand: navy dominant, paper ground, bronze only as seal / rule / one word. */
.tabs a { transition: color .15s; }
.tabs a.on svg { background: rgba(23, 32, 54, .08); border-radius: 999px; padding: 3px 14px; width: 52px; height: 30px; box-sizing: border-box; }
.item { transition: background .12s, transform .08s, border-color .12s; }
.item:active { transform: scale(.995); }
a.item:hover, button.item:hover { border-color: var(--line-2); }
.item .t { font-size: 15.5px; }
.avatar.gold { background: var(--bronze); }
.avatar.xl { width: 64px; height: 64px; font-size: 22px; border-radius: 4px; background: var(--paper); color: var(--navy); box-shadow: 0 0 0 2px rgba(250, 246, 238, .25); }

/* profile header (a person) */
.profile { background: var(--brand); color: var(--on-brand); margin: -16px -16px 0; padding: 18px 16px 0; position: relative; overflow: hidden; }
.profile::before { content: ''; position: absolute; inset: auto -40px -60px auto; width: 220px; height: 190px; background: url('../brand/pattern_mark.svg') no-repeat center / contain; opacity: .07; }
html[dir='rtl'] .profile::before { inset: auto auto -60px -40px; }
.profile > * { position: relative; }
.p-name { font-size: 21px; font-weight: 800; line-height: 1.25; }
.p-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--on-brand-2); }
.p-meta > span { background: rgba(250, 246, 238, .1); padding: 2px 8px; border-radius: 3px; }
.p-meta .code { font-family: var(--font-en); font-weight: 700; color: var(--on-brand); direction: ltr; }
.p-status { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--on-brand); }
.p-rate { margin-inline-start: auto; color: var(--on-brand-2); }
.p-rate b { color: var(--bronze-l); font-size: 15px; }
.profile .finish { margin: 16px 0 0; }
.kpi4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(250, 246, 238, .14); margin: 0 -16px; }
.kpi4 > div { background: var(--brand-2); padding: 12px 16px; }
.kpi4 b { display: block; font: 700 19px/1.15 var(--font-en); color: var(--on-brand); direction: ltr; unicode-bidi: isolate; text-align: start; }
html[dir='rtl'] .kpi4 b { text-align: right; }
.kpi4 span { display: block; font-size: 12px; color: var(--on-brand-2); margin-top: 3px; }
.kpi4 small { display: block; font-size: 11px; color: var(--on-brand-3); }
@media (min-width: 560px) { .kpi4 { grid-template-columns: repeat(4, 1fr); } }

/* segmented tabs under a header */
.seg-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; background: var(--white); border-bottom: 1px solid var(--line);
  margin: 0 -16px 14px; padding: 0 12px; position: sticky; top: calc(60px + var(--safe-t)); z-index: 20; }
.seg-tabs::-webkit-scrollbar { display: none; }
.seg-tabs button { flex: none; border: 0; background: none; padding: 14px 10px 12px; font-weight: 800; font-size: 14px; color: var(--stone); position: relative; cursor: pointer; }
.seg-tabs button small { font: 700 11px var(--font-en); background: var(--mute-bg); color: var(--stone); border-radius: 999px; padding: 1px 6px; margin-inline-start: 5px; }
.seg-tabs button.on { color: var(--navy); }
.seg-tabs button.on::after { content: ''; position: absolute; inset-inline: 8px; bottom: 0; height: 3px; background: var(--bronze); }

/* a month of days */
.month { margin-bottom: 18px; }
.month-h { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px 8px; border-bottom: 1px solid var(--line-2); margin-bottom: 8px; }
.month-h b { font-size: 15px; color: var(--navy); }
.month-h > span { font-size: 12.5px; color: var(--stone); }
.timeline { display: flex; flex-direction: column; gap: 6px; }
.tl { display: flex; gap: 12px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); padding: 10px 12px; text-decoration: none; color: inherit; }
.tl:active { background: var(--paper-2); }
.tl.pending { border-style: dashed; }
.tl.bonus { background: #fbf6ee; border-color: #ead9c2; }
.tl-date { width: 44px; flex: none; text-align: center; border-inline-end: 1px solid var(--line); padding-inline-end: 10px; }
.tl-date b { display: block; font: 800 20px/1 var(--font-en); color: var(--navy); }
.tl-date span { font-size: 11px; color: var(--stone); }
.tl-parts { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; background: var(--info-bg); color: var(--info); border-radius: 3px; padding: 2px 7px; }
.tag.gold { background: #f6ead9; color: var(--bronze); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag-item { font-weight: 600; color: var(--ink); }
.tag-item::before { content: '·'; margin-inline-end: 5px; color: var(--stone-2); }
.tag-h { font: 600 11px var(--font-en); color: var(--stone); }
.tl-sub { font-size: 12px; color: var(--stone); margin-top: 4px; }
.tl-amt { font-size: 14px; color: var(--navy); flex: none; }

/* horizontal bars */
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-l { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.bar-t { height: 8px; background: var(--paper-2); border-radius: 999px; overflow: hidden; }
.bar-t i { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .4s ease; }
.bar-row:first-child .bar-t i { background: linear-gradient(90deg, var(--navy), var(--navy-3)); }
.bar-s { font-size: 12px; color: var(--stone); margin-top: 3px; }
.card.stat b { font-size: 22px; }

/* =================================================================== printed reports (print.js) */
#print-root { display: none; }
@media print {
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing { background: #fff; }
  body.printing #print-root { display: block; color: #171f36; font: 10.5px/1.5 'Tajawal', 'Montserrat', sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
#print-root .pr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
#print-root .pr-kicker { font: 600 8.5px var(--font-en); letter-spacing: .14em; text-transform: uppercase; color: #845027; }
#print-root h1 { font-size: 19px; font-weight: 800; margin: 2px 0 0; color: #172036; }
#print-root .pr-sub { font-size: 11.5px; color: #6e6a60; margin-top: 2px; }
#print-root .pr-logo { height: 60px; width: auto; flex: none; } /* the stacked navy lockup on every printed document (17 Oct 2026) */
#print-root .pr-finish { position: relative; height: 1.4px; background: #172036; margin: 10px 0 12px; }
#print-root .pr-finish::after { content: ''; position: absolute; top: -2.8px; inset-inline-end: 0; width: 7px; height: 7px; background: #845027; }
#print-root .pr-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 14px; margin-bottom: 10px; }
#print-root .pr-meta span { display: block; font-size: 8.5px; color: #6e6a60; }
#print-root .pr-meta b { font-size: 11px; }
#print-root .pr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); border: 1px solid #172036; margin-bottom: 12px; }
#print-root .pr-kpis > div { padding: 6px 9px; border-inline-start: 1px solid #e8e0d8; }
#print-root .pr-kpis > div:first-child { border-inline-start: 0; }
#print-root .pr-kpis span { display: block; font-size: 8.5px; color: #6e6a60; }
#print-root .pr-kpis b { font: 700 14px 'Montserrat', sans-serif; direction: ltr; unicode-bidi: isolate; }
#print-root .pr-kpis small { display: block; font-size: 8px; color: #6e6a60; }
#print-root .pr-block { margin: 0 0 12px; break-inside: auto; }
#print-root h2 { font-size: 12px; font-weight: 800; color: #172036; margin: 0 0 5px; padding-bottom: 3px; border-bottom: 1px solid #e8e0d8; }
#print-root .pr-bnote { margin: 0 0 4px; color: #6e6a60; font-size: 9.5px; }
#print-root table { width: 100%; border-collapse: collapse; }
#print-root th { background: #172036; color: #faf6ee; font-weight: 700; font-size: 9px; padding: 4px 5px; text-align: start; }
#print-root td { padding: 3.5px 5px; border-bottom: .6px solid #e8e0d8; vertical-align: top; }
#print-root tbody tr:nth-child(even) td { background: #faf8f3; }
#print-root tr.sub td { background: #f3ede1 !important; font-weight: 700; }
#print-root .n { text-align: end; direction: ltr; unicode-bidi: isolate; font-family: 'Montserrat', sans-serif; white-space: nowrap; }
#print-root tfoot td { font-weight: 800; border-top: 1.4px solid #172036; border-bottom: 0; background: #fff; }
#print-root .pr-block.small td, #print-root .pr-block.small th { font-size: 8.5px; padding: 2.5px 3px; }
#print-root .pr-notes { border: 1px solid #e8e0d8; padding: 6px 9px; margin-bottom: 12px; color: #4a4740; }
#print-root .pr-notes p { margin: 2px 0; }
#print-root .pr-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 26px; break-inside: avoid; }
#print-root .pr-sign i { display: block; border-bottom: 1px solid #6e6a60; height: 26px; }
#print-root .pr-sign span { display: block; text-align: center; color: #6e6a60; font-size: 9.5px; margin-top: 3px; }
#print-root .pr-foot { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 6px; border-top: .6px solid #e8e0d8; color: #6e6a60; font-size: 8.5px; }
#print-root .chk { font-family: 'Montserrat', sans-serif; text-align: center; }

/* =================================================================== dashboard (design pass 3) */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.chart .col { fill: var(--navy); opacity: .85; }
.chart .col.hi { fill: var(--bronze); opacity: 1; }
.chart .val { font: 700 10px var(--font-en); fill: var(--navy); }
.chart .lab { font: 600 9.5px var(--font-en); fill: var(--stone); }
.ring .ring-bg { fill: none; stroke: var(--paper-2); stroke-width: 10; }
.ring .ring-fg { fill: none; stroke: var(--ok); stroke-width: 10; stroke-linecap: butt; transition: stroke-dasharray .6s ease; }
.ring .ring-t { font: 800 17px var(--font-en); fill: var(--navy); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); padding: 12px 13px; text-decoration: none; color: inherit; display: block; position: relative; }
.tile .tl-k { font-size: 12px; color: var(--stone); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.tile .tl-k svg { width: 16px; height: 16px; color: var(--navy); }
.tile .tl-v { font: 800 24px/1.15 var(--font-en); color: var(--navy); margin-top: 6px; direction: ltr; unicode-bidi: isolate; display: block; text-align: start; }
html[dir='rtl'] .tile .tl-v { text-align: right; }
.tile .tl-s { font-size: 11.5px; color: var(--stone); margin-top: 2px; }
.tile.alert { border-color: #e9c3bb; background: #fffaf8; }
.tile.alert .tl-v { color: var(--bad); }
.tile.good .tl-v { color: var(--ok); }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); padding: 14px; margin-top: 12px; }
.panel-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.panel-h b { font-size: 15px; color: var(--navy); }
.panel-h span, .panel-h a { font-size: 12px; color: var(--stone); }
.batch { display: flex; gap: 14px; align-items: center; }
.batch .bl { flex: 1; min-width: 0; }
.batch dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
.batch dt { color: var(--stone); }
.batch dd { margin: 0; text-align: end; font: 700 13.5px var(--font-en); direction: ltr; }
.eng { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.eng:first-child { border-top: 0; }
.eng .grow .t { font-weight: 800; font-size: 14px; }
.state { font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.state.ok { background: var(--ok-bg); color: var(--ok); }
.state.no { background: var(--mute-bg); color: var(--stone); }
.state.warn { background: var(--warn-bg); color: var(--warn); }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.quick a { background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); padding: 12px 6px; text-align: center; text-decoration: none; color: var(--navy); font-size: 12.5px; font-weight: 800; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.quick a svg { width: 22px; height: 22px; }
.range { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.range input[type=date] { min-height: 40px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 8px; background: var(--white); font: 600 13px var(--font-en); }
.grid-days { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r2); background: var(--white); }
.grid-days table { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.grid-days th, .grid-days td { border-bottom: 1px solid var(--line); padding: 7px 6px; text-align: center; white-space: nowrap; }
.grid-days th { background: var(--paper-2); font-size: 11px; color: var(--stone); position: sticky; top: 0; }
.grid-days td.nm { text-align: start; font-weight: 700; position: sticky; inset-inline-start: 0; background: var(--white); min-width: 120px; }
.grid-days td.on { color: var(--ok); font-weight: 800; }
.grid-days td.part { color: var(--warn); font-weight: 800; }
.grid-days tfoot td { font-weight: 800; border-top: 2px solid var(--navy); }
.act { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.act:first-child { border-top: 0; }
.act .tm { font: 700 13px var(--font-en); color: var(--navy); direction: ltr; text-align: center; }
.act .tm small { display: block; font-size: 11px; color: var(--stone); }
.act .kd { font-weight: 800; font-size: 14px; }
.act .pj { font-size: 12px; color: var(--info); }

/* =================================================================== design pass 4 — the tracker, people, reports (mobile first)
   One thumb, one screen: a sticky filter strip of chips, a money hero, figures that swipe sideways, panels that
   stack, details in bottom sheets. Nothing needs a wide screen; tables that must be wide scroll inside themselves. */
.tabs a { font-size: 11px; line-height: 1.15; text-align: center; padding: 0 2px; }
.fstrip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -4px -16px 12px; padding: 4px 16px 6px;
  position: sticky; top: calc(61px + var(--safe-t)); z-index: 22; background: linear-gradient(var(--paper) 82%, rgba(250, 246, 238, 0)); }
.fstrip::-webkit-scrollbar { display: none; }
.fchip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--white); color: var(--navy); font-weight: 800; font-size: 13px; cursor: pointer; white-space: nowrap; max-width: 220px; }
.fchip > span { overflow: hidden; text-overflow: ellipsis; }
.fchip svg { width: 16px; height: 16px; flex: none; }
.fchip.on { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.fchip.reset { border-style: dashed; color: var(--stone); }
.fchip select { border: 0; background: transparent; font: inherit; color: inherit; max-width: 150px; }
.fchip.on select option { color: var(--ink); }
.caret { width: 0; height: 0; border-inline: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; }
.item.sel { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--bronze); }
html[dir='rtl'] .item.sel { box-shadow: inset -3px 0 0 var(--bronze); }

/* money hero */
.thero { background: var(--brand) url('../brand/pattern_mark.svg') no-repeat; background-size: 200px; background-position: -50px 130%; color: var(--on-brand);
  border-radius: var(--r2); padding: 16px 16px 0; position: relative; overflow: hidden; box-shadow: var(--shadow); }
html[dir='rtl'] .thero { background-position: calc(100% + 50px) 130%; }
.thero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,32,54,.94), rgba(23,32,54,.82)); }
.thero > * { position: relative; }
.thero-top { display: flex; gap: 12px; align-items: center; }
.thero-k { font-size: 13px; color: var(--on-brand-2); font-weight: 700; }
.thero-v { font: 800 30px/1.1 var(--font-en); color: var(--on-brand); margin-top: 4px; direction: ltr; unicode-bidi: isolate; text-align: start; }
html[dir='rtl'] .thero-v { text-align: right; }
.thero-v small { font-size: 13px; color: var(--bronze-l); font-weight: 600; }
.thero-s { font-size: 12px; color: var(--on-brand-3); margin-top: 4px; }
.thero-ring { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.thero-ring span { font-size: 11px; color: var(--on-brand-2); }
.thero .ring .ring-bg { stroke: rgba(250,246,238,.14); }
.thero .ring .ring-fg { stroke: #6fcf97; }
.thero .ring .ring-t { fill: var(--on-brand); }
.thero-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(250,246,238,.14); margin: 14px -16px 0; }
.thero-split > div { background: var(--brand-2); padding: 10px 12px; }
.thero-split span { display: block; font-size: 11.5px; color: var(--on-brand-2); }
.thero-split b { font: 700 15px var(--font-en); color: var(--on-brand); direction: ltr; unicode-bidi: isolate; display: block; text-align: start; }
html[dir='rtl'] .thero-split b { text-align: right; }
.thero-split b.ok { color: #8fe0b0; }
.thero-split b.due { color: #f4b4a5; }
.thero .finish { margin: 0 -16px; }

/* swipeable figures */
.kscroll { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 12px -16px 4px; padding: 2px 16px 8px; }
.kscroll::-webkit-scrollbar { display: none; }
.kcard { flex: 0 0 42%; scroll-snap-align: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); padding: 12px; box-shadow: var(--shadow); min-width: 140px; }
.kcard .kc-i { width: 30px; height: 30px; border-radius: 3px; background: var(--paper-2); display: grid; place-items: center; color: var(--navy); margin-bottom: 8px; }
.kcard .kc-i svg { width: 17px; height: 17px; }
.kcard b { display: block; font: 800 20px/1.15 var(--font-en); color: var(--navy); direction: ltr; unicode-bidi: isolate; text-align: start; }
html[dir='rtl'] .kcard b { text-align: right; }
.kcard span { display: block; font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 3px; }
.kcard small { display: block; font-size: 11px; color: var(--stone); }
@media (min-width: 560px) { .kcard { flex-basis: 30%; } }

.trk .seg-tabs { margin-top: 4px; }
.seg-tabs button small.hot { background: var(--bad); color: var(--on-brand); }
.abanner { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid #e9c3bb; background: var(--bad-bg); color: var(--bad);
  border-radius: var(--r2); font-weight: 800; cursor: pointer; text-align: start; font-family: inherit; }
.abanner svg { width: 20px; height: 20px; flex: none; }
.hscroll { overflow-x: auto; scrollbar-width: thin; margin: 0 -4px; padding: 0 4px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--stone); margin-bottom: 6px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 5px; vertical-align: -1px; }
.lg-navy { background: var(--brand); }
.lg-ok { background: var(--ok); }
.lg-warn { background: var(--bad); border-radius: 50% !important; }
.chart .col.paid { fill: var(--ok); opacity: .9; }
.chart .warn-dot { fill: var(--bad); }

/* waffle: each square = 1% */
.wfl { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: center; }
.waffle { width: 132px; height: 132px; }
.waffle rect { fill: var(--line); }
.waffle .w1 { fill: var(--navy); } .wfl-row .w1 { background: var(--brand); }
.waffle .w2 { fill: var(--bronze); } .wfl-row .w2 { background: var(--bronze); }
.waffle .w3 { fill: var(--navy-3); } .wfl-row .w3 { background: var(--navy-3); }
.waffle .w4 { fill: #c98a4e; } .wfl-row .w4 { background: #c98a4e; }
.waffle .w5 { fill: #245a41; } .wfl-row .w5 { background: #245a41; }
.waffle .w6 { fill: #8d887c; } .wfl-row .w6 { background: #8d887c; }
.wfl-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wfl-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-decoration: none; color: inherit; min-height: 32px; }
.wfl-row i { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.wfl-row em { font-style: normal; color: var(--stone); font-weight: 600; }
@media (max-width: 360px) { .wfl { grid-template-columns: 1fr; justify-items: center; } .wfl-l { width: 100%; } }

.mini { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; font-size: 14px;
  background: none; width: 100%; cursor: pointer; font-family: inherit; }
.mini:last-child { border-bottom: 0; }
.mini b { color: var(--navy); }
.list .mini { border-bottom: 1px solid var(--line); }
.mini-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.mini-k > div { background: var(--paper-2); border-radius: var(--r); padding: 8px 10px; }
.mini-k b { display: block; font-size: 18px; color: var(--navy); }
.mini-k span { font-size: 11.5px; color: var(--stone); }

/* people rows with money */
.wrow .wamt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.wrow .wamt b { font-size: 14.5px; color: var(--navy); }
.pstate { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pstate.paid { background: var(--ok-bg); color: var(--ok); }
.pstate.partial { background: var(--warn-bg); color: var(--warn); }
.pstate.open { background: var(--mute-bg); color: var(--stone); }
.pstate.late { background: var(--bad-bg); color: var(--bad); }
.pdfrow { display: grid; gap: 8px; margin-top: 14px; }
.sumbar.pdfbar { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.sumbar.pdfbar .btn { min-height: 50px; padding: 0 10px; font-size: 14px; }

/* payslip sheet */
.slip-h { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.slip-k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 12px; }
.slip-k > div { background: var(--white); padding: 8px 4px; text-align: center; }
.slip-k span { display: block; font-size: 11px; color: var(--stone); }
.slip-k b { font-size: 14px; color: var(--navy); }
.slip-days { display: flex; flex-direction: column; }
.sd { display: flex; gap: 8px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.sd-d { width: 92px; flex: none; font-size: 12.5px; font-weight: 700; }
.sd.admin { background: #fbf6ee; }
.sd.dup { background: var(--warn-bg); }
.sd.pending { opacity: .75; border-bottom-style: dashed; }

/* contractor cards and page */
.ccard { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); padding: 12px; text-decoration: none; color: inherit; box-shadow: var(--shadow); }
.ccard:active { background: var(--paper-2); }
.ccard .t { font-size: 15.5px; }
.ccard-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 10px; }
.ccard-k span { display: block; font-size: 11px; color: var(--stone); }
.ccard-k b { font-size: 15px; color: var(--navy); }
.ccard-k b.ok { color: var(--ok); }
.ccard-k b.due { color: var(--bad); }
.ccard .bar-t { height: 6px; }
.halves { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--paper-2); padding: 4px; border-radius: var(--r2); margin-bottom: 14px; }
.halves a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 3px; text-decoration: none; color: var(--stone); font-weight: 800; }
.halves a svg { width: 20px; height: 20px; }
.halves a.on { background: var(--white); color: var(--navy); box-shadow: var(--shadow); }
.pchip { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 14px; padding: 0 12px; border: 1px solid rgba(250,246,238,.25);
  background: rgba(250,246,238,.08); color: var(--on-brand); border-radius: var(--r); font-weight: 700; font-size: 13.5px; cursor: pointer; text-align: start; font-family: inherit; }
.pchip svg { width: 18px; height: 18px; flex: none; }
.profile .pchip + .finish { margin-top: 14px; }
.grid-days th.fri { color: var(--bronze); }
.grid-days td.nm a { color: inherit; text-decoration: none; }
.dbox { width: 46px; height: 46px; flex: none; border-radius: var(--r); background: var(--paper-2); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dbox b { font: 800 18px/1 var(--font-en); color: var(--navy); }
.dbox span { font: 600 10px var(--font-en); color: var(--stone); }

/* alerts */
.alert-row { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--white); text-decoration: none; color: inherit; font-size: 14px; font-weight: 600; }
.alert-row .al-i { width: 34px; height: 34px; border-radius: 3px; display: grid; place-items: center; flex: none; }
.alert-row .al-i svg { width: 18px; height: 18px; }
.alert-row.bad { border-color: #e9c3bb; }
.alert-row.bad .al-i { background: var(--bad-bg); color: var(--bad); }
.alert-row.warn .al-i { background: var(--warn-bg); color: var(--warn); }
.alert-row.info .al-i { background: var(--info-bg); color: var(--info); }
.rules-list { margin: 0; padding-inline-start: 18px; font-size: 13.5px; color: var(--stone); }
.rules-list li { margin-bottom: 6px; }

/* home */
.item.todo { border-color: #ecd7a9; background: #fffcf4; }
.batchp { display: block; text-decoration: none; color: inherit; }
.batchp.late { border-color: #e9c3bb; }
.rstate { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r2); text-decoration: none; margin-top: 12px; border: 1px solid; }
.rstate .rs-i { width: 40px; height: 40px; border-radius: 3px; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.6); }
.rstate .rs-i svg { width: 22px; height: 22px; }
.rstate.todo { background: var(--warn-bg); border-color: #ecd7a9; color: var(--warn); }
.rstate.sent { background: var(--info-bg); border-color: #c4d6e8; color: var(--info); }
.rstate.ok { background: var(--ok-bg); border-color: #bcd8c9; color: var(--ok); }

/* engineer reports */
.rcard { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); padding: 12px; text-decoration: none; color: inherit; box-shadow: var(--shadow); }
.rc-top { display: flex; gap: 10px; align-items: center; }
.rc-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.rc-txt { margin-top: 8px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-com { margin-top: 8px; color: var(--ok); display: flex; gap: 4px; align-items: center; }
.rc-com svg { width: 15px; height: 15px; }
.actcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow); }
.actcard .act-n { width: 28px; height: 28px; border-radius: 3px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font: 800 13px var(--font-en); }
.actcard .act-dur { font-size: 14px; color: var(--bronze); }
.actcard .f { margin-bottom: 10px; }
.actcard input[type=time] { font-family: var(--font-en); font-weight: 700; }
.rphotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rph { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
.rph img { width: 100%; height: 100%; object-fit: cover; }
.rph .icon-btn { position: absolute; top: 2px; inset-inline-end: 2px; width: 30px; height: 30px; background: rgba(23,32,54,.7); color: var(--on-brand); }
.rph.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-style: dashed; color: var(--navy); cursor: pointer; font-weight: 700; font-size: 12px; font-family: inherit; }
.rph.add svg { width: 24px; height: 24px; }
.pre { white-space: pre-wrap; font-size: 14.5px; }
.rsec.issues { border-inline-start: 3px solid var(--bad); }
.rsec.needs { border-inline-start: 3px solid var(--warn); }
.rsec.tomorrow { border-inline-start: 3px solid var(--info); }

/* the day screen's date chip with the phone's own calendar inside */
.datechip { position: relative; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; }
.datechip svg { width: 16px; height: 16px; }
.datechip input[type=date] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.ghostchip { border-style: dashed !important; color: var(--stone) !important; }

/* the worker's period bar */
.wrange { background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); padding: 10px 12px; margin-bottom: 14px; box-shadow: var(--shadow); }
.wrange .fstrip { position: static; background: none; margin: 0 -12px; padding: 0 12px 8px; }
.wr-sum { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; }

/* printing: long cells keep their line breaks; a page break between payslips */
#print-root td { white-space: pre-line; }
#print-root .pr-break { break-before: page; height: 0; }
#print-root .pr-sign.mini { grid-template-columns: 1fr 2fr; margin: 4px 0 18px; }


/* =================================================================== night mode (الوضع الليلي)
   <html data-theme="dark"> — set by ui.js from the choice in Settings (auto follows the phone). The brand stays:
   navy surfaces, paper type, bronze seal; only the ground and the cards go dark, and every pair stays above WCAG AA.
   Printed reports never follow it — paper is paper. */
:root[data-theme='dark'] {
  /* Brand Guidelines v1, «on dark / reversed» (17 Oct 2026, Loaai: the same colours in both themes, to the millimetre).
     Every surface — cards, the bar, the tabs, the side menu — is Noble Navy #172036, on a deeper ground of the same
     navy; type is Paper #FAF6EE; secondary type, rules and fills are Paper at lower strength over the navy (tints of
     the six brand colours, no other hue); bronze stays the seal and the rule (the reversed artwork's own bronze), and
     reads as bronze-light where it is a word. Status colours (ok / warn / bad / info) stay functional, raised for
     contrast on navy. */
  --ground: #10182b;
  --paper: var(--ground); --paper-2: #1f2a45; --white: #172036; --card: #172036; --ink: #faf6ee;
  --navy: #faf6ee; --navy-2: #1f2a45; --navy-3: #e8e0d8;
  --stone: color-mix(in srgb, #faf6ee 70%, #172036); --stone-2: color-mix(in srgb, #faf6ee 52%, #172036);
  --line: color-mix(in srgb, #faf6ee 13%, #172036); --line-2: color-mix(in srgb, #faf6ee 22%, #172036);
  --mute-bg: color-mix(in srgb, #faf6ee 8%, #172036); --bronze: #c98a4e; --bronze-l: #c98a4e;
  --brand: #172036; --brand-2: #1f2a45; --on-brand: #faf6ee;
  --ok: #7fd1a3; --ok-bg: #12291f; --warn: #f0c46a; --warn-bg: #2e2510; --bad: #f19a88; --bad-bg: #331713; --info: #a9c6e6; --info-bg: #16263d;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.28); --shadow-up: 0 -1px 2px rgba(0,0,0,.3), 0 -6px 18px rgba(0,0,0,.35);
  color-scheme: dark;
}
:root[data-theme='dark'] .appbar { background: #172036; border-bottom: 1px solid var(--line); }
:root[data-theme='dark'] .finish { background: rgba(250, 246, 238, .16); }
:root[data-theme='dark'] .tabs { background: #172036; border-top-color: var(--line); }
:root[data-theme='dark'] .tabs a.on svg { background: rgba(250, 246, 238, .12); }
:root[data-theme='dark'] .fstrip { background: linear-gradient(var(--paper) 82%, rgba(16, 24, 43, 0)); }
:root[data-theme='dark'] .note.info { border-color: #24476b; }
:root[data-theme='dark'] .note.warn, :root[data-theme='dark'] .rstate.todo, :root[data-theme='dark'] .item.todo { border-color: #5a4718; }
:root[data-theme='dark'] .note.bad, :root[data-theme='dark'] .abanner, :root[data-theme='dark'] .alert-row.bad, :root[data-theme='dark'] .tile.alert,
:root[data-theme='dark'] .batchp.late, :root[data-theme='dark'] .btn.bad { border-color: #5e2a22; }
:root[data-theme='dark'] .note.ok, :root[data-theme='dark'] .rstate.ok { border-color: #234a36; }
:root[data-theme='dark'] .rstate.sent { border-color: #24476b; }
:root[data-theme='dark'] .item.todo { background: #1d1a10; }
:root[data-theme='dark'] .tile.alert { background: #24130f; }
:root[data-theme='dark'] .tl.bonus, :root[data-theme='dark'] .sd.admin { background: #241d12; border-color: #4a3a22; }
:root[data-theme='dark'] .tag.gold { background: #2c2214; }
:root[data-theme='dark'] .rstate .rs-i { background: rgba(255, 255, 255, .06); }
:root[data-theme='dark'] .btn { border-color: var(--line-2); }
:root[data-theme='dark'] .btn.light, :root[data-theme='dark'] .btn.ghost { border-color: var(--line-2); }
:root[data-theme='dark'] .btn.ok { color: #0d1a13; }
:root[data-theme='dark'] .btn.warn { border-color: #5a4718; }
:root[data-theme='dark'] .chip.on, :root[data-theme='dark'] .fchip.on { background: var(--navy); color: #172036; border-color: var(--navy); }
:root[data-theme='dark'] .halves a.on { background: var(--paper-2); }
:root[data-theme='dark'] .inp:focus { box-shadow: 0 0 0 3px rgba(250, 246, 238, .18); }
:root[data-theme='dark'] .avatar:not(.new):not(.off):not(.gold):not(.xl) { background: #1f2a45; color: var(--on-brand); }
:root[data-theme='dark'] .avatar.new, :root[data-theme='dark'] .avatar.gold { color: #1a1206; }
:root[data-theme='dark'] .chart .col { fill: #e8e0d8; opacity: 1; }
:root[data-theme='dark'] .waffle .w1, :root[data-theme='dark'] .wfl-row .w1, :root[data-theme='dark'] .lg-navy { fill: #e8e0d8; background: #e8e0d8; }
:root[data-theme='dark'] .bar-t i, :root[data-theme='dark'] .bar-row:first-child .bar-t i { background: #e8e0d8; }
:root[data-theme='dark'] .grid-days td.nm { background: var(--card); }
:root[data-theme='dark'] img.photo, :root[data-theme='dark'] .rph img { filter: brightness(.92); }
:root[data-theme='dark'] .sheet-panel, :root[data-theme='dark'] .sheet { color: var(--ink); }
@media print { :root[data-theme='dark'] body.printing { background: #fff; } }

/* the theme picker in Settings */
.theme-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-pick button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border: 1px solid var(--line-2); border-radius: var(--r2);
  background: var(--white); color: var(--ink); font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.theme-pick button.on { border-color: var(--bronze); box-shadow: inset 0 0 0 1px var(--bronze); }
.theme-pick .sw { width: 54px; height: 36px; border-radius: 3px; border: 1px solid var(--line-2); overflow: hidden; display: grid; grid-template-rows: 10px 1fr; }
.theme-pick .sw i { background: #172036; }
.theme-pick .sw.light b { background: #faf6ee; }
.theme-pick .sw.dark b { background: #172036; }
.theme-pick .sw.auto b { background: linear-gradient(135deg, #faf6ee 50%, #172036 50%); }

/* icons: the soft tint inside each line icon; stronger on the active tab, gone on solid buttons */
svg.ic .duo { fill: currentColor; stroke: none; opacity: .13; }
.tabs a svg.ic .duo { opacity: 0; transition: opacity .15s; }
.tabs a.on svg.ic .duo { opacity: .22; }
.tabs a.on svg.ic { stroke-width: 2; }
.btn:not(.light):not(.ghost) svg.ic .duo, .appbar svg.ic .duo, .chip.on svg.ic .duo, .fchip.on svg.ic .duo { opacity: .22; }
.avatar svg.ic .duo { opacity: .25; }
:root[data-theme='dark'] .badge, :root[data-theme='dark'] .seg-tabs button small.hot { color: #2a0d08; }
button.item { width: 100%; font-family: inherit; text-align: start; }

/* =================================================================== pass 5 — calendar, voice, Zoho close, WhatsApp, shared page */
.datefield { position: relative; }
.df-face { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--white); color: var(--ink); font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; text-align: start; }
.df-face svg { width: 22px; height: 22px; color: var(--navy); flex: none; }
.df-face.fixed { cursor: default; opacity: .85; }
/* the real date input stays in the page (so the phone's own calendar opens), invisible under the face */
.datefield .datein { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.micwrap { position: relative; }
.micwrap .inp { padding-inline-end: 52px; }
.mic { position: absolute; inset-inline-end: 6px; top: 6px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white);
  color: var(--navy); display: grid; place-items: center; cursor: pointer; }
.mic svg { width: 20px; height: 20px; }
.mic.on { background: var(--bad); border-color: var(--bad); color: var(--on-brand); animation: micpulse 1.2s ease-in-out infinite; }
@keyframes micpulse { 50% { box-shadow: 0 0 0 7px rgba(143, 51, 36, .18); } }
/* recording: the seconds ride on the button; writing it down: the button turns */
.mic.on[data-sec]::after { content: attr(data-sec) 's'; position: absolute; top: -9px; inset-inline-start: -6px; font-size: 10.5px; font-weight: 700;
  background: var(--bad); color: var(--on-brand); border-radius: 999px; padding: 1px 5px; line-height: 1.4; }
.mic.busy { pointer-events: none; opacity: .65; }
.mic.busy svg { animation: micspin 1s linear infinite; }
@keyframes micspin { to { transform: rotate(360deg); } }
.pickbtn { display: flex; align-items: center; gap: 8px; text-align: start; cursor: pointer; font-size: 14.5px; line-height: 1.35; min-height: 52px; }
.pickbtn > span { flex: 1; min-width: 0; }
.pickbtn .chev { width: 18px; height: 18px; color: var(--stone-2); flex: none; }
html[dir='rtl'] .pickbtn .chev { transform: scaleX(-1); }

/* WhatsApp: its own recognisable green, used only on the WhatsApp buttons */
.btn.wa { background: #1f8f4e; border-color: #1f8f4e; color: var(--on-brand); }
.btn.wa svg.ic .duo { opacity: .25; }
.wa-mini { color: #1f8f4e; width: 38px; height: 38px; }
.sumbar.pdfbar.three { grid-template-columns: .9fr 1fr 1.4fr; }

/* the Thursday close */
.zpanel { border-color: var(--line-2); }
.zsteps { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.zsteps li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--stone); }
.zsteps li svg { width: 18px; height: 18px; padding: 2px; border-radius: 999px; background: var(--mute-bg); color: var(--stone); flex: none; }
.zsteps li.ok { color: var(--ink); font-weight: 700; }
.zsteps li.ok svg { background: var(--ok-bg); color: var(--ok); }
.zpanel .note { margin-top: 8px; }
.zpost.draft b:first-child { color: var(--info); }
.zpost.failed b:first-child { color: var(--bad); }
.jprev + .jprev { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.tbl.small { font-size: 12.5px; }

/* the page a contractor opens from WhatsApp */
.shared { min-height: 100%; background: var(--paper); }
.sh-band { background: var(--brand) url('../brand/pattern_mark.svg') no-repeat; background-size: 220px; background-position: calc(100% + 50px) 140%;
  color: var(--on-brand); padding: calc(var(--safe-t) + 20px) 18px 0; }
.sh-band img { height: 30px; width: auto; }
.sh-band h1 { margin: 16px 0 2px; font-size: 22px; }
.sh-band p { margin: 0 0 16px; color: var(--on-brand-2); font-size: 13.5px; }
.sh-band .finish { margin: 0 -18px; }
.shared .page { padding-bottom: 40px; }

/* =================================================================== design pass 6 — motion and a modern shell (7 Oct 2026)
   Field-app patterns (Raken, Fieldwire, Busybusy): one big primary action, cards with large figures, sheets that drag,
   pull to refresh, and motion that explains where you went. Spring easing; transform only; off under reduced motion. */
:root { --spring: cubic-bezier(.22, 1.2, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* the floating tab bar: a lifted dock, the primary action raised in the middle */
.tabs { inset-inline: 10px; bottom: calc(10px + var(--safe-b)); border: 1px solid var(--line); border-radius: 14px; padding-bottom: 0;
  background: color-mix(in srgb, var(--white) 88%, transparent); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 10px 30px rgba(23, 32, 54, .16), 0 2px 6px rgba(23, 32, 54, .08); }
.tabs a { min-height: 60px; transition: color .2s, transform .25s var(--spring); }
.tabs a:active { transform: scale(.92); }
.tabs a.on::before { inset-inline: 30%; height: 3px; border-radius: 0 0 3px 3px; animation: tabline .35s var(--spring); }
@keyframes tabline { from { transform: scaleX(0); } }
.tabs a.on svg.ic { animation: tabpop .4s var(--spring); }
@keyframes tabpop { 40% { transform: translateY(-3px) scale(1.12); } }
.tabs a.fab { color: var(--navy); }
.tabs a.fab .fab-b { width: 52px; height: 52px; margin-top: -26px; border-radius: 14px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(23, 32, 54, .35); position: relative; transition: transform .25s var(--spring); }
.tabs a.fab .fab-b::after { content: ''; position: absolute; bottom: 6px; inset-inline-end: 6px; width: 6px; height: 6px; background: var(--bronze-l); }
.tabs a.fab .fab-b svg { width: 26px; height: 26px; }
.tabs a.fab.on::before { display: none; }
.tabs a.fab:active .fab-b { transform: scale(.9) rotate(-4deg); }
.page { padding-bottom: calc(110px + var(--safe-b)); }
.page.has-bar { padding-bottom: calc(180px + var(--safe-b)); }
.sumbar { bottom: calc(82px + var(--safe-b)); inset-inline: 10px; border-radius: 12px; box-shadow: 0 10px 28px rgba(23, 32, 54, .3); }
.sumbar.no-tabs { bottom: calc(10px + var(--safe-b)); }

/* the app bar turns to glass when the page scrolls under it */
.appbar { transition: background .25s, box-shadow .25s; }
.appbar.scrolled { background: color-mix(in srgb, var(--brand) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 6px 18px rgba(23, 32, 54, .22); }

/* screen transitions (View Transitions API): forward slides in from the reading end, back reverses, tabs cross-fade */
.appbar { view-transition-name: appbar; }
.tabs { view-transition-name: tabs; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; animation-timing-function: var(--ease-out); }
html[data-nav='fwd']::view-transition-old(root) { animation-name: vt-out-fwd; }
html[data-nav='fwd']::view-transition-new(root) { animation-name: vt-in-fwd; }
html[data-nav='back']::view-transition-old(root) { animation-name: vt-out-back; }
html[data-nav='back']::view-transition-new(root) { animation-name: vt-in-back; }
html[data-nav='tab']::view-transition-new(root) { animation-name: vt-tab; }
html[data-nav='same']::view-transition-old(root), html[data-nav='same']::view-transition-new(root) { animation-duration: .18s; }
@keyframes vt-in-fwd { from { transform: translateX(var(--vt-dx, 28%)); } }
@keyframes vt-out-fwd { to { transform: translateX(calc(var(--vt-dx, 28%) * -.25)); opacity: .4; } }
@keyframes vt-in-back { from { transform: translateX(calc(var(--vt-dx, 28%) * -1)); } }
@keyframes vt-out-back { to { transform: translateX(calc(var(--vt-dx, 28%) * .25)); opacity: .4; } }
@keyframes vt-tab { from { transform: translateY(10px) scale(.985); } }
html[dir='rtl'] { --vt-dx: -28%; }

/* skeleton while a screen loads */
.skel { display: grid; gap: 12px; }
.sk { border-radius: var(--r2); background: linear-gradient(90deg, var(--paper-2) 25%, var(--line) 37%, var(--paper-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; }
.sk-hero { height: 150px; margin: -16px -16px 0; border-radius: 0; }
.sk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sk-tile { height: 86px; }
.sk-card { height: 74px; }
.sk-card.short { width: 70%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* entrance: rise, staggered — transform only, so a hidden tab can never leave anything invisible */
.rise { animation: rise .55s var(--spring) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes rise { from { transform: translateY(14px) scale(.985); } }

/* touch: everything pressable gives under the finger */
.item, .tile, .kcard, .ccard, .rcard, .quick a, .mini, .tl, .wfl-row, .abanner, .alert-row, .fchip, .chip, .btn, .df-face, .pickbtn {
  transition: transform .22s var(--spring), background .15s, border-color .15s, box-shadow .2s; }
.item:active, .tile:active, .kcard:active, .ccard:active, .rcard:active, .quick a:active, .tl:active, .alert-row:active, .df-face:active, .pickbtn:active { transform: scale(.975); }
.btn:active, .fchip:active, .chip:active { transform: scale(.95); }
.card, .panel, .tile, .kcard, .ccard, .rcard { box-shadow: 0 1px 2px rgba(23, 32, 54, .05), 0 6px 18px rgba(23, 32, 54, .06); }
.quick a:hover, .item:hover, .ccard:hover, .rcard:hover { box-shadow: 0 2px 4px rgba(23, 32, 54, .06), 0 10px 26px rgba(23, 32, 54, .1); }

/* bottom sheets: a spring in, a real handle, drag to close */
.sheet { transition: transform .38s var(--spring) !important; border-radius: 16px 16px 0 0; }
.sheet.drag { transition: none !important; }
.sheet .hd { cursor: grab; touch-action: none; }
.sheet .hd::before { width: 44px; height: 5px; top: 7px; background: var(--line-2); }
.scrim { backdrop-filter: none; -webkit-backdrop-filter: none; }
.toast { transition: transform .35s var(--spring), opacity .2s !important; border-radius: 12px; }

/* pull to refresh */
.ptr { position: fixed; top: calc(64px + var(--safe-t)); inset-inline: 0; margin: 0 auto; width: 34px; height: 34px; border-radius: 999px; background: var(--white);
  box-shadow: var(--shadow); display: grid; place-items: center; color: var(--stone); transform: translateY(-80px); z-index: 25; pointer-events: none; transition: color .15s, opacity .15s; opacity: 0; visibility: hidden; }
.ptr.pulling, .ptr.spin { opacity: 1; visibility: visible; }
.ptr svg { width: 18px; height: 18px; }
.ptr.ready { color: var(--navy); }
.ptr.spin { transition: transform .2s; transform: translateY(30px); animation: ptrspin .7s linear infinite; }
@keyframes ptrspin { to { rotate: 360deg; } }
main.page { position: relative; }

/* hero: a slow living light across the navy, the brand pattern drifting */
.hero::after, .thero::after { content: ''; position: absolute; inset: -40% -60%; background: radial-gradient(40% 50% at 30% 30%, rgba(201, 138, 78, .09), transparent 70%);
  animation: glow 9s ease-in-out 2 alternate both; pointer-events: none; }
@keyframes glow { to { transform: translateX(30%); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .sk { animation: none; }
}
:root[data-theme='dark'] .tabs { background: color-mix(in srgb, #172036 92%, transparent); }

.guide { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; font-weight: 600; }
.guide li::marker { color: var(--bronze); font-weight: 800; }

/* the report-state card: the chevron is a small mark, never the whole card */
.rstate > svg.chev { width: 18px; height: 18px; flex: none; opacity: .7; }
html[dir='rtl'] .rstate > svg.chev { transform: scaleX(-1); }
.rstate .grow { min-width: 0; }
.rstate .grow b { display: block; }
svg.ic { flex: none; }

/* drafts: a delete button on the row, a bar in the day screen */
.item .del-draft { width: 38px; height: 38px; color: var(--bad); flex: none; }
.item .del-draft svg { width: 19px; height: 19px; }
.draftbar { background: var(--warn-bg); color: var(--warn); border-radius: var(--r); padding: 6px 10px; }
.draftbar .small { display: inline-flex; align-items: center; gap: 6px; }
.draftbar svg { width: 16px; height: 16px; }
.draftbar .link { color: var(--bad); display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; }

/* =================================================================== FINANCE */
.fgrid { display: grid; gap: 10px; }
.fcard { display: flex; gap: 14px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); padding: 14px; text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(23, 32, 54, .05), 0 6px 18px rgba(23, 32, 54, .06); transition: transform .22s var(--spring), box-shadow .2s; }
.fcard:active { transform: scale(.98); }
.fcard .fc-i { width: 46px; height: 46px; border-radius: 4px; background: var(--paper-2); color: var(--navy); display: grid; place-items: center; flex: none; }
.fcard .fc-i svg { width: 24px; height: 24px; }
.fcard b { display: block; font-size: 16px; color: var(--navy); }
.fcard span { display: block; font-size: 12.5px; color: var(--stone); margin-top: 2px; line-height: 1.5; }
.fcard > svg.chev { width: 18px; height: 18px; color: var(--stone-2); flex: none; }
html[dir='rtl'] .fcard > svg.chev { transform: scaleX(-1); }
.fcard.big { background: var(--brand) url('../brand/pattern_mark.svg') no-repeat; background-size: 180px; background-position: -40px 130%; border-color: var(--brand); padding: 20px 16px; }
html[dir='rtl'] .fcard.big { background-position: calc(100% + 40px) 130%; }
.fcard.big b { color: var(--on-brand); font-size: 19px; }
.fcard.big span { color: var(--on-brand-2); }
.fcard.big .fc-i { background: rgba(250, 246, 238, .1); color: var(--bronze-l); }
.fcard.big > svg.chev { color: var(--on-brand-2); }
@media (min-width: 760px) { .fgrid { grid-template-columns: 1fr 1fr; } .fcard.big { grid-column: 1 / -1; } }
/* the Hub fills the screen under the app bar */
main.page.full { max-width: none; padding: 0; }
.hubwrap { position: relative; height: calc(100dvh - 61px - var(--safe-t)); }
.hubwrap .skel { padding: 16px; }
.hubwrap.ready .skel { display: none; }
.hubframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--paper); }

/* =================================================================== design pass 7 — the Finance Hub's layout on tablet and laptop
   (Loaai, 7 Oct 2026: «بنفس شكل الهب»). Phones keep the app bar and the floating dock. From 900px: a fixed navy side
   navigation in two halves (OPERATIONS · FINANCE), a light glass command bar with the breadcrumb, wide content, and
   dashboards in two columns. Same tokens, same type, same finishing line and seal. */
.side, .crumb, .wide-only { display: none; }
.langb { font: 800 13px var(--font-en); }
.section-rule { position: relative; }
.section-rule::before { content: ''; position: absolute; inset-inline-end: 0; top: 50%; width: 7px; height: 7px; margin-top: -3px; background: var(--bronze); }
html[lang='en'] .section-rule h3, html[lang='en'] .panel-h b { text-transform: uppercase; letter-spacing: .04em; font-family: var(--font-en); }
html[lang='en'] .hero .greet, html[lang='en'] .thero-k, html[lang='en'] .p-name { font-family: var(--font-en); }

/* the side navigation itself (24 Oct 2026: also the phone's drawer — design pass 9 below places it) */
.side { display: flex; flex-direction: column; position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50;
  background: var(--brand); color: var(--on-brand); padding: 18px 0 12px; overflow-y: auto; scrollbar-width: thin; }
.side::after { content: ''; position: absolute; inset: auto 0 0 0; height: 220px; background: url('../brand/pattern_mark.svg') no-repeat center bottom / 240px; opacity: .05; pointer-events: none; }
.sn-brand { display: block; padding: 0 20px; }
.sn-brand img { height: 34px; width: auto; }
.sn-tag { font: 600 10.5px var(--font-en); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-l); padding: 8px 20px 14px; border-bottom: 1px solid rgba(250, 246, 238, .1); }
html[lang='ar'] .sn-tag { font-family: var(--font-ar); letter-spacing: 0; font-size: 12px; }
.sn-list { display: flex; flex-direction: column; padding: 6px 10px; gap: 2px; flex: 1; }
.sn-g { font: 700 10.5px var(--font-en); letter-spacing: .16em; color: var(--on-brand-3); padding: 16px 12px 6px; }
html[lang='ar'] .sn-g { font-family: var(--font-ar); letter-spacing: 0; font-size: 12px; }
.sn-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 4px; color: var(--on-brand-2); text-decoration: none; font-weight: 700; font-size: 14px;
  position: relative; transition: background .15s, color .15s, transform .2s var(--spring); }
.sn-i svg { width: 20px; height: 20px; flex: none; opacity: .85; }
.sn-i:hover { background: rgba(250, 246, 238, .06); color: var(--on-brand); }
.sn-i:active { transform: scale(.98); }
.sn-i.on { background: rgba(250, 246, 238, .1); color: var(--on-brand); }
.sn-i.on::before { content: ''; position: absolute; inset-block: 8px; inset-inline-start: 0; width: 3px; background: var(--bronze-l); border-radius: 2px; animation: tabline .35s var(--spring); }
.sn-i.on svg { opacity: 1; color: var(--bronze-l); }
.sn-user { display: flex; gap: 10px; align-items: center; margin: 8px 12px 0; padding: 12px 10px 4px; border-top: 1px solid rgba(250, 246, 238, .1); position: relative; z-index: 1; }
.sn-user .avatar { width: 36px; height: 36px; font-size: 13px; background: rgba(250, 246, 238, .12) !important; color: var(--on-brand) !important; }
a.sn-user { text-decoration: none; }
a.sn-user:hover b { text-decoration: underline; }
.sn-user b { display: block; font-size: 13px; color: var(--on-brand); line-height: 1.3; }
.sn-user span { display: block; font-size: 11.5px; color: var(--on-brand-3); }

@media (min-width: 900px) {
  :root { --sidew: 256px; }
  body { background: var(--paper); }
  #app { display: block; }
  .side { width: var(--sidew); }

  /* the command bar: light glass, breadcrumb, the page title */
  .appbar { margin-inline-start: var(--sidew); background: color-mix(in srgb, var(--paper) 88%, transparent); color: var(--ink); min-height: 64px;
    border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); padding-inline: 28px; }
  .appbar.scrolled { background: color-mix(in srgb, var(--paper) 92%, transparent); box-shadow: 0 6px 18px rgba(23, 32, 54, .08); }
  .appbar .mono { display: none; }
  .appbar h1 { color: var(--navy); font-size: 18px; font-weight: 800; }
  html[lang='en'] .appbar h1 { font-family: var(--font-en); text-transform: uppercase; letter-spacing: .03em; font-size: 16px; }
  .appbar .sub { color: var(--stone); }
  .appbar .icon-btn { color: var(--navy); }
  .appbar .icon-btn:active { background: var(--mute-bg); }
  .crumb { display: flex; gap: 8px; align-items: center; font: 700 10.5px var(--font-en); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
  html[lang='ar'] .crumb { font-family: var(--font-ar); letter-spacing: 0; font-size: 12px; }
  .crumb i { font-style: normal; opacity: .5; }
  .wide-only { display: inline-grid; }
  .finish { margin-inline-start: var(--sidew); background: var(--line); }
  .tabs, .ptr { display: none !important; }
  .page { margin-inline-start: var(--sidew); max-width: 1220px; padding: 26px 32px 60px; width: auto; margin-inline-end: auto; }
  main.page.full { max-width: none; padding: 0; }
  .hubwrap { height: calc(100dvh - 65px); }
  .sumbar { inset-inline-start: calc(var(--sidew) + 24px); inset-inline-end: 24px; bottom: 18px; max-width: 980px; margin: 0; }
  .sumbar.no-tabs { bottom: 18px; }
  .page.has-bar { padding-bottom: 120px; }
  .seg-tabs, .trk .seg-tabs { top: 64px; margin-inline: 0; border-radius: 4px; }
  .fstrip { top: 64px; margin-inline: 0; padding-inline: 0; }

  /* the hero and the profile become cards in the content, as in the Hub */
  .hero, .profile { margin: 0 0 18px; border-radius: 6px; padding: 24px 26px 24px; }
  .profile { padding-bottom: 0; }
  .kpi4 { margin: 0 0 18px; border-radius: 0 0 6px 6px; overflow: hidden; }
  .hero .greet { font-size: 30px; letter-spacing: -.01em; }
  .hero .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero .kpis b { font-size: 28px; }
  .kscroll { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .kcard { min-width: 0; }

  /* dashboards: two columns of panels under a full-width hero */
  .dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
  .dash > .hero, .dash > .list, .dash > .quick, .dash > .mini-k, .dash > .note, .dash > .section-rule, .dash > a.btn, .dash > .rstate, .dash > p, .dash > .stack { grid-column: 1 / -1; }
  .quick { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .trk .stack-0 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
  .trk .stack-0 > .abanner { grid-column: 1 / -1; margin-top: 12px; }
  .list { gap: 10px; }
  .item { padding: 14px 16px; }
  .grid-days td.nm { min-width: 160px; }
  .rphotos { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1400px) {
  .page { max-width: 1320px; }
  .dash { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
:root[data-theme='dark'] .appbar { color: var(--ink); }
@media (min-width: 900px) {
  :root[data-theme='dark'] .appbar { background: color-mix(in srgb, #172036 94%, transparent); border-bottom-color: var(--line); }
  :root[data-theme='dark'] .appbar h1 { color: var(--on-brand); }
  :root[data-theme='dark'] .appbar .icon-btn { color: var(--on-brand); }
  :root[data-theme='dark'] .side { background: #172036; border-inline-end: 1px solid var(--line); }
}
@media print { .side { display: none !important; } .page { margin: 0 !important; } }
/* every chevron: one size, and pointing the way you read (it was unsized on the contractor cards and filled the page) */
svg.ic.chev { width: 18px; height: 18px; flex: none; color: var(--stone-2); }
html[dir='rtl'] svg.ic.chev { transform: scaleX(-1); }

/* the finance refresh (Loaai, 7 Oct 2026): the watchman's last check, and «refresh now» that follows its run */
.fin-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--on-brand-2); line-height: 1.5; }
.fin-check i { width: 8px; height: 8px; border-radius: 50%; background: var(--on-brand-3); flex: none; }
.fin-check.quiet i { background: #6fcf97; }
.fin-check.dispatched i, .fin-check.wait i { background: var(--bronze-l); animation: finpulse 1.4s ease-in-out infinite; }
.fin-check.error i, .fin-check.stuck i { background: #e8907f; }
@keyframes finpulse { 50% { opacity: .35; } }
.finref { margin-top: 14px; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; min-height: 44px; border-radius: 4px; cursor: pointer;
  border: 1px solid rgba(250, 246, 238, .28); background: rgba(23, 32, 54, .82); color: var(--on-brand); font: 700 14px var(--font-ar);
  transition: background .2s, border-color .2s, transform .2s var(--spring); }
html[lang='en'] .finref { font-family: var(--font-en); font-size: 13px; letter-spacing: .02em; }
.finref svg { width: 18px; height: 18px; color: var(--bronze-l); }
.finref:hover { background: rgba(38, 50, 80, .9); }
.finref:active { transform: scale(.97); }
.finref[data-state='busy'] { cursor: progress; }
.finref[data-state='busy'] svg { animation: rot 1s linear infinite; }
.finref[data-state='done'] { border-color: #6fcf97; }
.finref[data-state='done'] svg { color: #6fcf97; }
.finref[data-state='err'] { border-color: #e8907f; }
@media (prefers-reduced-motion: reduce) { .finref[data-state='busy'] svg, .fin-check i { animation: none !important; } }

/* bonus from finance · money held until handover · delay days · the contractor's account (Loaai, 7 Oct 2026) */
.pill.held { background: var(--warn-bg); color: var(--warn); }
.holdnote { display: flex; gap: 10px; align-items: flex-start; margin: 0 14px 12px; padding: 10px 12px; border-radius: var(--r); background: var(--warn-bg); color: var(--warn); font-size: 13px; }
.holdnote svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.holdnote b { color: var(--ink); }
.holdbox { margin: 4px 0 12px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--mute-bg, #f6f1e8); }
.holdbox .inp { margin-top: 8px; }
.chkline { display: flex; gap: 8px; align-items: center; font-size: 13.5px; cursor: pointer; }
.chkline input { width: 20px; height: 20px; accent-color: var(--navy); flex: none; }
.bonus-calc { margin: 6px 0 12px; padding: 10px 12px; border-radius: var(--r); background: var(--mute-bg, #f6f1e8); font-size: 14px; }
.bonus-calc b { font: 800 16px var(--font-en); color: var(--bronze); }
.standby-box { border-color: var(--warn); background: var(--warn-bg); }
.standby-box .b svg { width: 18px; height: 18px; color: var(--warn); }
.item.held { border-color: var(--warn); }
.kpi4.acc { margin-bottom: 14px; border-radius: 6px; overflow: hidden; }
.tbl tr.paid td { color: var(--ok); }
.tbl td.nowrap { white-space: nowrap; }
@media (min-width: 900px) { .kpi4.acc { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: 0; } }

/* every icon has a size of its own (Loaai, 7 Oct 2026: the item button's tag filled the whole card). Zero specificity, so
   any rule that sizes an icon in its place still wins; an icon nobody sized can never stretch again. */
:where(svg.ic) { width: 20px; height: 20px; flex: none; }
.item-btn svg.ic { width: 20px; height: 20px; color: var(--stone); }

/* the one-sheet item chooser: tick up to three items, hours split by themselves; then copy them to other workers */
.ichosen { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper-2); min-height: 48px; justify-content: center; }
.ichip { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line-2); font-weight: 700; }
.ichip .hrs { display: inline-flex; align-items: center; gap: 4px; }
.ichip .hrs .chip { min-height: 32px; padding: 0 10px; }
.ichip .hrs b { min-width: 46px; text-align: center; }
.ilist { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: min(52vh, 480px); overflow-y: auto; overscroll-behavior: contain; }
.irow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white);
  color: inherit; font: inherit; font-weight: 700; text-align: start; cursor: pointer; transition: background .15s, border-color .15s, transform .15s var(--spring); }
.irow:active { transform: scale(.99); }
.irow small { display: block; font-weight: 500; font-size: 12px; color: var(--stone); margin-top: 2px; }
.irow .box { width: 24px; height: 24px; flex: none; border: 2px solid var(--line-2); border-radius: 6px; display: grid; place-items: center; color: var(--on-brand); }
.irow .box svg.ic { width: 16px; height: 16px; stroke-width: 3; }
.irow.on { border-color: var(--navy); background: color-mix(in srgb, var(--navy) 6%, var(--white)); }
.irow.on .box { background: var(--navy); border-color: var(--navy); }
.irow.new .box { border-style: dashed; color: var(--stone); }
.irow.standby { border-inline-start: 3px solid var(--warn); }
.copyitems { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--navy); font-weight: 700; }
.copyitems svg.ic { width: 16px; height: 16px; }
:root[data-theme='dark'] .irow.on { background: color-mix(in srgb, #faf6ee 10%, var(--white)); border-color: var(--line-2); }
:root[data-theme='dark'] .irow.on .box { background: #faf6ee; border-color: #faf6ee; color: #172036; }
:root[data-theme='dark'] .copyitems { color: var(--on-brand-2); }

/* ------------------------------------------------------------------ invoice maker (13 Oct 2026, screens/invoices.js) */
.inv-line { padding: 12px 14px; display: grid; gap: 8px; }
.inv-line + .inv-line, .inv-sec + .inv-line { border-top: 1px solid var(--line); }
.inv-top { display: flex; gap: 10px; align-items: flex-start; }
.inv-code { display: inline-block; font: 700 12px/1.7 var(--font-en); letter-spacing: .04em; padding: 0 6px; border: 1px solid var(--line-2);
  border-radius: var(--r); color: var(--navy); white-space: nowrap; direction: ltr; unicode-bidi: isolate; flex: none; }
.inv-code.new { border-style: dashed; }
.inv-name { flex: 1; min-width: 0; font-weight: 800; color: var(--navy); }
.inv-meta { font-size: 13px; color: var(--stone); }
.inv-meta .link { padding: 0; font-size: 13px; }
.inv-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.inv-calc label.f { margin: 0; }
.inv-amt { font: 700 17px var(--font-en); color: var(--navy); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.inv-fixed { min-height: var(--tap); display: flex; align-items: center; gap: 6px; font-family: var(--font-en); font-weight: 700; color: var(--navy); }
.inv-fixed svg.ic { width: 16px; height: 16px; color: var(--stone); }
.inv-req { border: 1px dashed var(--info); background: var(--info-bg); border-radius: var(--r); padding: 10px; display: grid; gap: 8px; color: var(--ink); }
.inv-more { background: var(--paper-2); border-radius: var(--r); padding: 10px; }
.inv-sec { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; background: var(--paper-2); font-weight: 800; color: var(--navy); }
.inv-sec:not(:first-child) { border-top: 1px solid var(--line); }
.inv-msg { display: flex; gap: 7px; align-items: baseline; font-size: 13px; line-height: 1.45; }
.inv-msg i { width: 8px; height: 8px; flex: none; border-radius: 1px; background: currentColor; }
.inv-msg.error { color: var(--bad); } .inv-msg.warn { color: var(--warn); } .inv-msg.wait { color: var(--info); } .inv-msg.ok { color: var(--ok); }
.inv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 16px; }
.inv-facts > div { min-width: 0; overflow-wrap: anywhere; }
.inv-facts span { display: block; font-size: 12px; font-weight: 700; color: var(--stone); }
.inv-facts b { font-weight: 700; color: var(--navy); }
.inv-tbl td { vertical-align: top; }
.inv-tbl tr.inv-tsec td { background: var(--paper-2); font-weight: 800; color: var(--navy); }
.inv-tbl tr.inv-tchg td { border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .inv-calc { grid-template-columns: minmax(0, 180px) minmax(0, 220px); } }
.sumbar .btn.light { background: transparent; color: var(--on-brand); border-color: rgba(250, 246, 238, .45); }
@media (max-width: 420px) { .sumbar .figs div:nth-child(3) { display: none; } .sumbar .btn { padding: 0 12px; } }
/* invoice maker v2 (13 Oct 2026): project picker, headers with items, last-price hints, description button */
.inv-proj { display: flex; align-items: center; gap: 8px; text-align: start; height: auto; min-height: var(--tap); }
.inv-proj b { display: block; color: var(--navy); }
.inv-proj small { display: block; color: var(--stone); font-size: 12.5px; }
.inv-block { margin-top: 12px; overflow: hidden; }
.inv-calc3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; align-items: end; }
.inv-calc3 label.f { margin: 0; }
.inv-hint { font-size: 12.5px; color: var(--stone); }
.inv-hint .link { padding: 0; font-size: 12.5px; }
.inv-desc { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: start; border: 1px dashed var(--line-2); border-radius: var(--r);
  background: var(--paper); padding: 8px 10px; cursor: pointer; font-size: 13.5px; color: var(--ink); }
.inv-desc span { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.inv-desc.empty { color: var(--warn); border-color: var(--warn); }
.inv-desc svg.ic { width: 16px; height: 16px; flex: none; color: var(--stone); }
.inv-acts { display: flex; gap: 2px; justify-content: flex-end; }
.inv-acts .icon-btn { width: 38px; height: 38px; }
.inv-acts .icon-btn svg.ic { width: 18px; height: 18px; }
.inv-add { padding: 8px 14px 12px; border-top: 1px solid var(--line); }
.inv-unit { display: inline-block; min-width: 42px; text-align: center; font: 700 12px/1.8 var(--font-en); padding: 0 6px; border: 1px solid var(--line-2); border-radius: var(--r); color: var(--navy); flex: none; }
.inv-opt { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.inv-opt input { margin-top: 4px; }
.inv-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.inv-pastdesc .small { white-space: normal; }
.inv-tbl tr.chg-up td { background: var(--warn-bg); }
.inv-tbl tr.chg-down td { background: var(--info-bg); }
.inv-tbl .up { color: var(--warn); font-weight: 700; } .inv-tbl .down { color: var(--info); font-weight: 700; }
.fstrip.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
@media (max-width: 420px) { .inv-calc3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .inv-calc3 label.f:last-child { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ invoice maker: where each rate came from (13 Oct 2026) */
.inv-src { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; line-height: 1.6; }
.inv-src.src-ok { background: var(--ok-bg); color: var(--ok); }
.inv-src.src-hint { background: var(--info-bg); color: var(--info); }
.inv-src.src-ref { background: var(--warn-bg); color: var(--warn); }
.inv-src.src-new { background: var(--mute-bg); color: var(--stone); }
.inv-tbl tr.chg-ref td { background: var(--warn-bg); }
.inv-tbl .ref { color: var(--warn); font-weight: 700; font-size: 11px; }
.tag.muted { opacity: .7; }

/* ------------------------------------------------------------------ petty cash (العهدة) — 13 Oct 2026 */
.pc-hero { padding: 16px; background: var(--brand); color: var(--on-brand); border: 0; }
.pc-hero .small { opacity: .8; }
.pc-hero.low { background: linear-gradient(135deg, var(--brand), #5a4314); }
.pc-hero.neg { background: linear-gradient(135deg, var(--brand), #5a2219); }
.pc-bal { font: 800 30px/1.15 var(--font-en); letter-spacing: -.5px; margin: 4px 0 8px; }
.pc-bal small { font: 600 13px var(--font-ar); opacity: .75; }
.pc-hero .pc-bar { height: 6px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.pc-hero .pc-bar i { display: block; height: 100%; background: var(--bronze-l); border-radius: 999px; }
.pc-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pc-figs > div { min-width: 0; }
.pc-figs b { display: block; font: 700 15px/1.3 var(--font-en); overflow: hidden; text-overflow: ellipsis; }
.pc-figs span { display: block; font-size: 11.5px; opacity: .8; }
.pc-costs .pc-figs b { font-size: 16px; }
.pc-row .avatar.in { background: var(--ok-bg); color: var(--ok); }
.pc-row.void { opacity: .55; }
.pc-row.returned { border-inline-start: 3px solid var(--bad); }
.pc-amt { white-space: nowrap; font-weight: 700; }
.pc-amt.in { color: var(--ok); }
.pill.pc-pending { background: var(--warn-bg); color: var(--warn); }
.pill.pc-returned { background: var(--bad-bg); color: var(--bad); }
.pill.pc-approved { background: var(--info-bg); color: var(--info); }
.pill.pc-posted { background: var(--ok-bg); color: var(--ok); }
.pill.pc-void { background: var(--mute-bg); color: var(--stone); }
.pc-amountw { position: relative; }
.pc-amount { font: 800 26px/1.2 var(--font-en); height: 58px; padding-inline-end: 64px; }
.pc-amountw .cur { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); color: var(--stone); font-size: 13px; }
.pc-cats, .pc-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-cats .chip.on { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.pc-sugg { margin-top: 6px; }
.pc-sugg .chip { font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.pc-thumbw { position: relative; }
.pc-thumb { display: block; width: 100%; aspect-ratio: 1; border: 1px solid var(--line-2); border-radius: var(--r2); overflow: hidden; background: var(--paper-2); padding: 0; cursor: pointer; }
.pc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-thumb .pdf { height: 100%; display: grid; place-items: center; align-content: center; gap: 4px; font: 700 12px var(--font-en); color: var(--bad); }
.pc-thumbw .x { position: absolute; top: -6px; inset-inline-end: -6px; width: 26px; height: 26px; border-radius: 999px; border: 0; background: var(--bad); color: var(--on-brand); display: grid; place-items: center; cursor: pointer; }
.pc-thumbw .x svg { width: 14px; height: 14px; }
.pc-thumbw .pc-z { position: absolute; bottom: 4px; inset-inline-start: 4px; font: 700 10px var(--font-en); background: var(--ok); color: var(--on-brand); padding: 1px 5px; border-radius: 3px; }
.pc-add { aspect-ratio: 1; border: 1.5px dashed var(--line-2); border-radius: var(--r2); background: transparent; color: var(--navy); display: grid; place-items: center; align-content: center; gap: 4px; font-size: 12.5px; cursor: pointer; }
.pc-add svg { width: 24px; height: 24px; }
.pc-full { width: 100%; height: auto; display: block; border-radius: var(--r2); }
.pc-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; }
.pc-dl dt { color: var(--stone); }
.pc-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pc-check { gap: 10px; align-items: center; font-size: 14px; cursor: pointer; }
.pc-check input { width: 20px; height: 20px; flex: none; }
.pc-cust.off { opacity: .6; }
.pc-bal-s { font: 800 18px var(--font-en); white-space: nowrap; }
.pc-bal-s.bad { color: var(--bad); } .pc-bal-s.warn { color: var(--warn); }
.pc-costbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
@media (max-width: 520px) { .pc-costbar { grid-template-columns: minmax(0, 1fr); } }
.pc-costs .tbl tr.tot td { font-weight: 800; background: var(--paper-2); }
.pc-costs details summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.rstate.pc { background: var(--info-bg); border-color: #c4d6e8; color: var(--info); }
.item.on { outline: 2px solid var(--navy); outline-offset: -2px; }
.pc-red { color: var(--bad); }
.btn.ghost.bad { color: var(--bad); border-color: var(--bad); }
@media print { .pc-costs .btn { display: none; } }
.ic.xs { width: 13px; height: 13px; vertical-align: -2px; }
/* Cost-Plus billing run (screens/costplus.js) */
.pc-bill { margin-top: 14px; }
.pc-bill .tbl td.ck { width: 30px; }
.pc-bill .tbl td.ck input { width: 18px; height: 18px; }
.pc-bill .tbl tr.grp td { font-weight: 800; font-size: 12px; color: var(--stone); background: var(--paper-2); }
.pc-bill .tbl tr.off td { opacity: .45; }
.pc-bill .tbl tr.off td .b { text-decoration: line-through; }
.pc-tag { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: 1px; background: var(--paper-2); color: var(--stone); }
.pc-tag.warn { background: var(--warn-bg); color: var(--warn); }
.pc-run a { color: inherit; font-weight: 800; }
@media print { .pc-bill { display: none; } }

/* =================================================================== CLIENT PORTAL — staff side (screens/portal_admin.js, 14 Oct 2026)
   Finance › Client portal: the engine's statements pack, the customers that may be switched on, the checks against Zoho,
   the client logins and their one-time codes, the event log. Brand surfaces (.thero, .profile) stay navy in dark mode
   through --brand; every other colour is a token, so night mode follows by itself. Figures are LTR, right-aligned in
   Arabic. Phones get cards; from 900px the customer list is a table. */
.pa-dark { margin-bottom: 12px; }
.pa-hero { margin-bottom: 14px; }
.pa-hero .thero-v small { font-family: var(--font-ar); }
html[lang='en'] .pa-hero .thero-v small { font-family: var(--font-en); }
.pa-hero .pa-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--on-brand-2); }
.pa-hero .pa-meta b { color: var(--on-brand); font-weight: 700; }
.pa-hero .pa-none { margin: 8px 0 16px; font-size: 14px; color: var(--on-brand); line-height: 1.6; }
.pa-stale { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; background: rgba(232, 144, 127, .16); color: #f4b4a5; font-weight: 700; }
.pa-stale svg.ic { width: 14px; height: 14px; }
.pa-hero .thero-split.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pa-hero .thero-split.four + .thero-split.four { margin-top: 1px; }
.pa-hero .thero-split > div { min-width: 0; }
.pa-hero .thero-split b { overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 560px) { .pa-hero .thero-split.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pa .seg-tabs { position: static; }   /* the filter chips under it are the sticky strip here; two sticky bars would stack */
.pa-strip .fchip small { font: 700 11px var(--font-en); opacity: .72; }
.pa-search { margin-bottom: 12px; }
.pa-mt { margin-top: 12px; }
.pa-p { margin: 0 0 10px; line-height: 1.6; }
.pa-legal { margin-top: 14px; line-height: 1.6; }
.pa-dt { font-weight: 600; white-space: nowrap; }
.pa-red { color: var(--bad); font-weight: 700; }
.pa-mail { overflow-wrap: anywhere; }
html[dir='rtl'] .pa-acc .pa-mail, html[dir='rtl'] .pa-fixed .pa-mail { text-align: right; }

/* one state per customer; on the navy header a coloured dot carries the meaning */
.pa-st { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--mute-bg); color: var(--stone); flex: none; }
.pa-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pa-st.ok { background: var(--ok-bg); color: var(--ok); }
.pa-st.info { background: var(--info-bg); color: var(--info); }
.pa-st.warn { background: var(--warn-bg); color: var(--warn); }
.pa-st.bad { background: var(--bad-bg); color: var(--bad); }
.profile .p-meta > .pa-st { background: rgba(250, 246, 238, .1); color: var(--on-brand); border-radius: 999px; }
.profile .pa-st.ok i { background: #6fcf97; }
.profile .pa-st.info i { background: #8fbbe8; }
.profile .pa-st.warn i { background: #f0c46a; }
.profile .pa-st.bad i { background: #e8907f; }
.profile .pa-st.mute i { background: var(--on-brand-3); }

/* the customer list: cards on a phone, a table from 900px */
.pa-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }   /* minmax: a long name never widens the page */
.pa-table { display: none; }
.pa-card { position: relative; }
.pa-card .row { align-items: flex-start; }
.pa-card .pa-name { overflow-wrap: anywhere; line-height: 1.35; }
.pa-card .pa-id { margin-top: 1px; overflow-wrap: anywhere; }
.pa-card > .row > svg.chev { margin-top: 4px; }
.pa-card.st-gone { opacity: .78; }
.pa-netv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: var(--r); background: var(--paper-2); }
.pa-netv span { font-size: 12.5px; font-weight: 700; color: var(--stone); }
.pa-netv b { font: 800 19px/1.15 var(--font-en); color: var(--navy); white-space: nowrap; }
.pa-netv.hold b { color: var(--info); }
.pa-netv.zero b { color: var(--ok); }
.pa-card .ccard-k { margin-bottom: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pa-netv { flex-wrap: wrap; }
.pa-card .ccard-k > div { min-width: 0; }
.pa-card .ccard-k b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-why { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--warn); overflow-wrap: anywhere; }
.pa-why svg.ic { width: 16px; height: 16px; margin-top: 2px; }
.pa-why.bad { color: var(--bad); }
.pa-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pa-flag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 3px; font-size: 11.5px; font-weight: 700; cursor: help;
  background: var(--paper-2); color: var(--stone); border: 1px solid var(--line); }
.pa-flag.owe_and_hold { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.pa-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.pa-foot svg.ic { width: 15px; height: 15px; }
.pa-foot .pa-rev { text-align: end; }
.pa-tbl td { vertical-align: middle; }
.pa-tbl tbody tr { cursor: pointer; }
.pa-tbl tbody tr:hover td { background: var(--paper-2); }
.pa-tbl .pa-nm { min-width: 170px; }
.pa-tbl .pa-nm a { color: var(--navy); font-weight: 800; text-decoration: none; }
.pa-tbl .pa-nm a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pa-tbl td.why { min-width: 220px; max-width: 360px; }
.pa-tbl td.why .pa-why { margin-top: 0; font-size: 12.5px; }
.pa-tbl td.why .pa-flags { margin-top: 6px; }
.pa-tbl .pa-sg { font-weight: 800; color: var(--navy); }
.pa-tbl .pa-sg.hold { color: var(--info); }
.pa-tbl .pa-sg.zero { color: var(--ok); }
.pa-tbl .pa-sgl { font-family: var(--font-ar); }
html[lang='en'] .pa-tbl .pa-sgl { font-family: var(--font-en); }
@media (min-width: 900px) { .pa-cards { display: none; } .pa-table { display: block; } }

/* one customer */
.pa-prof .p-name { overflow-wrap: anywhere; }
.pa-cust .kpi4 b { overflow: hidden; text-overflow: ellipsis; }
.pa-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.pa-acts .btn { flex: 1 1 170px; }
.pa-cols { display: grid; gap: 0 18px; }
.pa-cols > div { min-width: 0; }
.pa-ready { margin-top: 12px; }
@media (min-width: 900px) { .pa-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .pa-cust .kpi4 { margin-bottom: 0; } }
.pa-chk { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.panel-h + .pa-chk { border-top: 0; }
.pa-chk .ok-i { width: 26px; height: 26px; border-radius: 3px; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); }
.pa-chk .ok-i svg.ic { width: 16px; height: 16px; stroke-width: 2.4; }
.pa-chk.no .ok-i { background: var(--bad-bg); color: var(--bad); }
.pa-chk > div > b { color: var(--navy); font-size: 14px; }
.pa-eq { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--stone); }
.pa-eq b { font: 700 13px var(--font-en); color: var(--ink); direction: ltr; unicode-bidi: isolate; }
.pa-eq-foot { padding-top: 10px; border-top: 1px dashed var(--line-2); align-items: baseline; }
/* the label column keeps a floor: with `max-content` (or `auto`) the long «Ledger» count took 286 of 314px on a phone
   and squeezed every label to 14px. The value column may be narrower than its text and wraps instead. */
.pa-dl { display: grid; grid-template-columns: minmax(min(40%, 11em), 1fr) minmax(0, max-content); gap: 6px 14px; margin: 0 0 12px; font-size: 14px; }
.pa-dl dt { color: var(--stone); min-width: 0; }
.pa-dl dd { margin: 0; text-align: end; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.pa-cust .panel > .note { margin-bottom: 12px; }
.btn.wa .pa-wanum { font-weight: 700; }
.pa-dl dd .num { color: var(--navy); }
.pa-inv { max-height: 420px; overflow: auto; }
.pa-inv .tbl th { z-index: 1; }
.pa-inv td.pa-pj { min-width: 140px; font-size: 12px; color: var(--stone); }
.pa-date { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pa-date .inp { width: auto; flex: 1 1 170px; min-width: 0; }
.pa-lab { padding: 10px 0; border-top: 1px solid var(--line); }
.pa-p + .pa-lab { border-top: 0; padding-top: 0; }
.pa-labk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow-wrap: anywhere; }
.pa-labr { margin-top: 6px; }
.pa-labr .inp { min-height: 42px; font-size: 15px; }
.pa-acc .grow { min-width: 0; }
.pa-acc .t .pa-en { margin-inline-start: 8px; font-weight: 600; }
.pa-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 3px; }
.pa-chips .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-k { margin: 0 0 4px; }
.pa-k b { font-family: var(--font-en); }

/* the login sheet and the one-time code */
.pa-fixed { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.pa-fixed > span:first-child { flex-basis: 100%; }
.pa-fixed .pa-mail { flex: 1; min-width: 0; }
.pa-flab { display: block; font-size: 13px; font-weight: 700; color: var(--stone); margin-bottom: 5px; }
.pa-picker .ilist { max-height: min(40vh, 360px); }
.pa-cnt { margin-top: 6px; }
.pa-extra { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pa-codebox { text-align: center; padding: 16px 12px; border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--white); position: relative; }
.pa-codebox::after { content: ''; position: absolute; bottom: -4px; inset-inline-end: 12px; width: 7px; height: 7px; background: var(--bronze); }
.pa-codev { font: 800 32px/1.25 var(--font-en); letter-spacing: .16em; color: var(--navy); direction: ltr; unicode-bidi: isolate; margin: 6px 0 4px; overflow-wrap: anywhere; user-select: all; }
.pa-det summary { cursor: pointer; padding: 6px 0; }
.pa-msg { margin: 6px 0 0; padding: 10px 12px; max-height: 40vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 13px/1.65 var(--font-ar);
  background: var(--paper-2); color: var(--ink); border-radius: var(--r); }

/* the event log */
.pa-log { margin-top: 0; }
.pa-ev { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.pa-ev:first-child, .panel-h + div > .pa-ev:first-child { border-top: 0; }
.pa-ev .ev-i { width: 32px; height: 32px; border-radius: 3px; display: grid; place-items: center; background: var(--paper-2); color: var(--navy); }
.pa-ev .ev-i svg.ic { width: 17px; height: 17px; }
.pa-ev.client .ev-i { background: var(--info-bg); color: var(--info); }
.pa-ev.on .ev-i { background: var(--ok-bg); color: var(--ok); }
.pa-ev.fail .ev-i { background: var(--bad-bg); color: var(--bad); }
.pa-ev.sys .ev-i { background: var(--mute-bg); color: var(--stone); }
.pa-ev .ev-t { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.pa-ev .ev-t b { font-size: 14px; color: var(--navy); }
.pa-ev .ev-t .pa-dt { font-size: 12px; color: var(--stone); }
.pa-ev .ev-s { font-size: 12.5px; color: var(--stone); margin-top: 1px; overflow-wrap: anywhere; }
.pa-ev .ev-s a { color: var(--navy); font-weight: 700; }
@media print { .pa-acts, .pa-strip, .pa-search { display: none !important; } }

/* =================================================================== CLIENT PORTAL — project progress, staff side
   (screens/portal_progress.js, 14 Oct 2026). Finance › Client portal › «تقدم المشاريع»: one switch per project, the last
   8 work weeks as a strip of boxes, then one week — the engineers' reports (staff only) beside the summary editor the
   client reads. Every colour is a token (night mode follows); the bronze appears once, as the seal on the current week.
   Motion is transform / box-shadow only — never opacity from 0. 375px: every grid is minmax(0, 1fr), nothing widens. */
.pp .note a { color: inherit; font-weight: 800; text-underline-offset: 3px; }
.pp-k { margin: 12px 0; }
.pp-k b { font-family: var(--font-en); }
.pp-legend { margin: 0 0 4px; line-height: 1.6; }
.pp-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 1100px) { .pp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* one project card */
.pp-card, .pp-wpanel { container-type: inline-size; }
.pp-card.on { border-inline-start: 3px solid var(--ok); }
.pp-card .pp-name { display: block; color: var(--navy); text-decoration: none; line-height: 1.35; overflow-wrap: anywhere; }
.pp-card .pp-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-cust { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--stone); min-width: 0; overflow-wrap: anywhere; }
.pp-cust svg.ic { width: 15px; height: 15px; flex: none; }
.pp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.pp-tags:empty { display: none; }
.pp-clink { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: auto; color: var(--navy); font-weight: 700; text-decoration: none; }
.tag.pp-ok { background: var(--ok-bg); color: var(--ok); }

/* «يظهر للعميل في البوابة» — a real switch: the knob slides (transform), the track changes colour */
.pp-swrow { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); }
.pp-swrow > .grow { cursor: pointer; }
.pp-swrow b { display: block; font-size: 14px; color: var(--navy); }
.pp-swrow small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--stone); }
.pp-swrow.on { background: var(--ok-bg); border-color: #bcd8c9; }
:root[data-theme='dark'] .pp-swrow.on { border-color: #234a36; }
.pp-sw { position: relative; flex: none; width: 52px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: var(--line-2); cursor: pointer; transition: background .2s; }
.pp-sw i { position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--spring); }
.pp-sw.on { background: var(--ok); }
.pp-sw.on i { transform: translateX(22px); }
html[dir='rtl'] .pp-sw.on i { transform: translateX(-22px); }
.pp-sw:disabled { cursor: not-allowed; opacity: .45; }
.pp-sw.busy { cursor: progress; }
.pp-sw:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* the 8-week strip: 4 + 4 on a phone, one row of 8 once its own box is wide enough */
.pp-weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
@container (min-width: 560px) { .pp-weeks { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.pp-wk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 7px 3px 8px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--white); color: var(--ink); font: inherit; cursor: pointer; }
.pp-wk:hover { border-color: var(--line-2); }
.pp-wk.nil { background: var(--paper-2); }
.pp-wk.todo { border-color: var(--info); box-shadow: inset 0 0 0 1px var(--info); }
.pp-wk.sel { border-color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.pp-wk.now::after { content: ''; position: absolute; top: -1px; inset-inline-end: -1px; width: 7px; height: 7px; background: var(--bronze); }
.pp-wd { font-size: 11.5px; font-weight: 700; color: var(--stone); }
.pp-wn b { font-size: 15px; color: var(--navy); }
.pp-wn.nil { font: 600 13px var(--font-en); color: var(--stone-2); }
.pp-wk .pa-st { max-width: 100%; overflow: hidden; gap: 4px; padding: 1px 6px; font-size: 10.5px; }
.pp-wk .pa-st i { width: 6px; height: 6px; }
.pp-nod { font-size: 12px; line-height: 18px; color: var(--stone-2); }

/* one week */
.pp-prof { margin-top: 0; }   /* under the tabs here, not under the app bar: no pull-up */
.pp-prof .p-name { overflow-wrap: anywhere; }
.pp-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pp-back { display: grid; }
html[dir='rtl'] .pp-back { transform: scaleX(-1); }
.pp-swpanel .pp-swrow { margin-top: 0; }
.pp-swpanel .pp-tags { margin-top: 8px; }
.pp-swpanel.pp-flash { animation: ppflash 1.5s ease; }
@keyframes ppflash { 25%, 60% { box-shadow: 0 0 0 4px rgba(143, 51, 36, .3); } }
.pp-cols { display: grid; gap: 0 18px; }
.pp-cols > div { min-width: 0; }
@media (min-width: 1100px) { .pp-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } .pp-tosum { display: none; } }

/* the reports (staff only) */
.pp-staff { display: flex; align-items: center; gap: 6px; }   /* svg is display:block app-wide: the icon needs a flex line */
.pp-staff svg.ic { width: 15px; height: 15px; }
.pp-replist { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pp-rep { padding: 10px 12px; border: 1px solid var(--line); border-inline-start: 3px solid var(--ok); border-radius: var(--r2); background: var(--white); }
.pp-rep.unseen { border-inline-start-color: var(--warn); }
.pp-rep-h { display: flex; align-items: center; gap: 8px; }
.pp-rep-h b { font-size: 14px; color: var(--navy); }
.pp-rep-h .small { overflow-wrap: anywhere; }
.pp-open { flex: none; width: 36px; height: 36px; }
.pp-lines { margin: 8px 0 0; padding-inline-start: 18px; font-size: 14px; line-height: 1.55; }
.pp-lines li { overflow-wrap: anywhere; }
.pp-sub { margin-top: 8px; }
.pp-sub > span { display: block; font-size: 12px; font-weight: 700; color: var(--stone); }
.pp-sub .pre { font-size: 14px; overflow-wrap: anywhere; }
.pp-multi { display: flex; align-items: flex-start; gap: 4px; margin-top: 8px; line-height: 1.5; }
.pp-multi svg.ic { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.pp-rph { margin-top: 10px; }
.pp-rph .rph { display: block; }
.pp-img { display: grid; place-items: center; width: 100%; height: 100%; background: var(--paper-2); color: var(--stone-2); }
.pp-img svg.ic { width: 22px; height: 22px; }
.pp-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-img.miss { color: var(--bad); }

/* the summary editor — what the client will read */
.pp-sum .panel-h { align-items: center; gap: 8px; }
.pp-facts { margin-bottom: 10px; }
.pp-facts:empty { display: none; }
.pp-warn { margin: 0 0 12px; }
.pp-warn b { display: block; margin-bottom: 2px; }
.pp-warn .pp-ack { margin-top: 8px; }
.pp-rule { padding-top: 10px; border-top: 1px dashed var(--line-2); }
.pp-ed textarea.inp { font-size: 16px; line-height: 1.6; }
.pp-field { margin-bottom: 14px; }
.pp-flab { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--stone); }
.pp-field > small { display: block; margin: 2px 0 6px; line-height: 1.5; }
.pp-list { display: flex; flex-direction: column; gap: 8px; }
.pp-li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 40px; gap: 8px; align-items: start; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); }
.pp-li-n { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 9px; border-radius: 3px; background: var(--brand); color: var(--on-brand); font-size: 12px; }
.pp-li-in { display: grid; gap: 6px; min-width: 0; }
.pp-li-in .inp, .pp-cap .inp { min-height: 42px; padding: 8px 10px; font-size: 15px; }
.pp-li .icon-btn, .pp-cap .icon-btn { width: 40px; height: 40px; }
.pp-add { align-self: flex-start; }

/* photos: tick up to six, the order number is the order the client sees */
.pp-phs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
@media (min-width: 560px) { .pp-phs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pp-ph { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--r); background: var(--paper-2); cursor: pointer; }
.pp-ph.on { border-color: var(--navy); }
.pp-ph:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.pp-ph .pp-ord { position: absolute; top: 4px; inset-inline-start: 4px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px;
  border: 2px solid #fff; border-radius: 999px; background: rgba(23, 32, 54, .3); color: var(--on-brand); font-size: 12px; }
.pp-ph.on .pp-ord { background: var(--brand); }
.pp-phd { position: absolute; inset-inline: 0; bottom: 0; padding: 2px 6px; background: linear-gradient(transparent, rgba(13, 18, 31, .72)); color: var(--on-brand); font-size: 11px; text-align: end; }
.pp-caps { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pp-caps:empty { display: none; }
.pp-cap { display: grid; grid-template-columns: 24px 48px minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.pp-cap .pp-ord { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 12px; }
.pp-cap .pp-img { width: 48px; height: 48px; overflow: hidden; border-radius: var(--r); }
.pp-cap.gone .pp-img { box-shadow: 0 0 0 2px var(--bad); }

/* save · publish · withdraw · re-draft · preview */
.pp-actbar { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.pp-dirty { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--warn); }
.pp-dirty[hidden] { display: none; }
.pp-dirty svg.ic { width: 16px; height: 16px; }
.pp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-acts .btn { flex: 1 1 auto; white-space: nowrap; }   /* each button as wide as its words; rows break between buttons */
@media print { .pp-acts, .pp-nav, .pp-sw, .pp-add { display: none !important; } }

/* invoice maker v3 (17 Oct 2026): the engineer's line has no price; his comment; the reviewer's «see it as the engineer» */
.inv-calc2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.inv-note textarea { min-height: 44px; resize: vertical; }
.inv-note.rv textarea { background: var(--warn-bg); border-color: #ecd7a9; }
.inv-note-ro { margin-top: 4px; font-size: 12.5px; color: var(--warn); background: var(--warn-bg); border-radius: var(--r); padding: 4px 8px; }
.inv-eye { gap: 8px; align-items: center; font-size: 13.5px; margin-top: 10px; cursor: pointer; }
.inv-eye input { width: 18px; height: 18px; }
.inv-work .t { font-weight: 700; }

/* the works library (17 Oct 2026): Arabic header names, «a work not in the list», the similar-works warning */
.inv-ar { font-weight: 500; color: var(--stone); font-size: 13px; }
.inv-newwork { border-style: dashed; }
.inv-raw summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--stone); padding: 6px 0; }
.inv-like .item { background: var(--white); }
/* Petty cash v2 (17 Oct 2026): the engineer's analysis, the classification, the summary */
.pc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (min-width: 700px) { .pc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pc-tile { background: var(--paper-2); border-radius: var(--r2); padding: 10px 12px; min-width: 0; }
.pc-tile b { display: block; font: 700 17px/1.25 var(--font-en); color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-tile span { display: block; font-size: 11.5px; color: var(--stone); margin-top: 2px; }
.pc-tile.warn { background: var(--warn-bg); } .pc-tile.warn b { color: var(--warn); }
.pc-ana-h { font-size: 12.5px; font-weight: 800; color: var(--stone); margin: 14px 0 8px; }
.pc-need { border-color: var(--warn) !important; }
.pc-sumrow.neg .pc-bal-s { color: var(--bad); } .pc-sumrow.off { opacity: .55; }
.pc-sumrow .avatar { font: 800 11px/1 var(--font-en); }

/* timesheet kinds of work (17 Oct 2026): several per activity, and a new one for everyone */
.kindchips { display: flex; flex-wrap: wrap; gap: 8px; }
.kindchips .chip { min-height: 40px; }
.kindchips .chip.on { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.kindchips .chip.add { border-style: dashed; color: var(--ok); border-color: var(--ok); }
.kindpick { min-height: 48px; }
.kindtags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ===================================================================== the site and motion 2 (21 Oct 2026, Loaai)
   «في الخلفية مباني — حاجة تدل على مجال نوبل لاين؛ والحركة بين التابات زي فهيم، من غير ما البراند يتغير».
   Behind every screen: a faint blueprint grid and, on the ground line, one site drawn in line work — solar field,
   fit-out showroom, office block, a tower going up under its crane, a villa (brand/skyline.svg, used as a MASK so each
   theme colours it: navy ink on paper by day, paper ink on navy by night). It drifts slower than the page. */
/* one fixed layer behind everything, painted once and then only moved on the compositor: the blueprint grid on it,
   the skyline on its child (motion.js glassBar slides the child). Never background-attachment: fixed (a phone
   repaints the whole screen on every scroll frame) and never a document-root variable (22 Oct 2026). */
.site-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; contain: strict;
  background-image: linear-gradient(color-mix(in srgb, var(--ink) 2.6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 2.6%, transparent) 1px, transparent 1px); background-size: 36px 36px; }
.site-bg > i { position: absolute; inset-inline: -120px; bottom: 0; height: clamp(120px, 22vw, 250px); display: block;
  background: url('../brand/skyline_ink.svg') repeat-x left bottom / auto 100%; will-change: transform; }
:root[data-theme='dark'] .site-bg > i { background-image: url('../brand/skyline_paper.svg'); }
@media print { .site-bg { display: none; } }

/* the sliding pill (motion.js syncPills): one indicator glides between the choices */
/* never `position` on the container here: the bottom tabs are position: fixed, and overriding it lifts them into the page */
.fx-has-pill { isolation: isolate; }
/* .seg-tabs is left out (27 Oct 2026): it is position: sticky (already a containing block for the pill), and «relative» here kept
   its top: 64px — every worker tab slid 64px down over the first lines of its own content */
.sn-list, .halves { position: relative; }
.fx-pill { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; display: block;
  transition: transform .44s var(--spring), width .3s var(--ease-out); }
.fx-pill.sn { background: rgba(250, 246, 238, .1); border-radius: 4px; }
.fx-pill.sn::before { content: ''; position: absolute; inset-block: 8px; inset-inline-start: 0; width: 3px; background: var(--bronze-l); border-radius: 2px; }
.sn-list.fx-has-pill .sn-i.on { background: transparent; }
.sn-list.fx-has-pill .sn-i.on::before { display: none; }
.fx-pill.tab::before { content: ''; position: absolute; top: 0; inset-inline: 22%; height: 3px; background: var(--bronze); }
.tabs.fx-has-pill a.on::before { display: none; }
.fx-pill.line { border-bottom: 3px solid var(--bronze); box-sizing: border-box; clip-path: inset(0 8px); }
.seg-tabs.fx-has-pill button.on::after { display: none; }
.fx-pill.half { background: var(--white); border-radius: 3px; box-shadow: var(--shadow); }
:root[data-theme='dark'] .fx-pill.half { background: var(--paper-2); }
.halves.fx-has-pill a.on { background: transparent; box-shadow: none; }
.sn-i, .tabs a, .seg-tabs button, .halves a { transition: color .25s; }

/* side navigation stays still while the screen beside it changes (only the page slides) */
@media (min-width: 900px) { .side { view-transition-name: side; } }
::view-transition { pointer-events: none; }
::view-transition-group(appbar), ::view-transition-group(tabs), ::view-transition-group(side),
::view-transition-new(appbar), ::view-transition-new(tabs), ::view-transition-new(side) { animation: none; }
::view-transition-old(appbar), ::view-transition-old(tabs), ::view-transition-old(side) { display: none; }
html[data-nav='theme']::view-transition-old(root), html[data-nav='theme']::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html[data-nav='theme']::view-transition-group(*) { animation: none; }

@media (prefers-reduced-motion: no-preference) {
  /* screens rise in, block after block — transform only (22 Oct 2026: a blur keyframe cannot run on the compositor, so
     21 Oct's blurred entrance and tab change repainted the whole screen every frame on a phone) */
  html[data-nav='tab']::view-transition-new(root) { animation-duration: .26s; }
  /* cards lift under the mouse; sheets and toasts pop */
  @media (hover: hover) {
    .ccard:hover, .rcard:hover, .tile:hover, .kcard:hover, .quick a:hover, .fcard:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(23, 32, 54, .06), 0 16px 32px -12px rgba(23, 32, 54, .22); }
    .btn:hover:not(:disabled) { box-shadow: 0 8px 20px -12px rgba(23, 32, 54, .45); }
  }
  .toast { animation: fx-pop .38s var(--spring); }
  @keyframes fx-pop { from { transform: translateY(14px) scale(.96); } }
}
@media (prefers-reduced-motion: reduce) { .fx-pill { transition: none; } }
/* the site along the bottom of the navy welcome band, bronze line work; the crane's load swings gently */
.hero > .hero-site { position: absolute; inset: auto 0 0 0; height: 62%; color: var(--bronze-l); opacity: .22; pointer-events: none; overflow: hidden; }
.hero-site svg { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 100%; stroke-width: 1.3; }
@media (min-width: 900px) { .hero > .hero-site { height: 78%; opacity: .2; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-site .hook { transform-box: view-box; transform-origin: 1110px 36px; animation: hook-swing 2.6s ease-in-out 4 alternate both; }
  @keyframes hook-swing { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
}
/* phones: the dock and the scrolled app bar are solid, not glass — same colours, no per-frame backdrop blur (22 Oct 2026) */
@media (max-width: 899px) {
  .tabs { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--white) 97%, transparent); }
  :root[data-theme='dark'] .tabs { background: #172036; }
  .appbar.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--brand); }
}

/* the loading skeleton's container is a frame, not one shimmering 64 px bar (it matched the old single-bar rule) */
.skel[aria-busy] { height: auto; background: none; animation: none; }

/* =================================================================== design pass 9 — the Faheem shell in Noble Line's identity
   (24 Oct 2026, Loaai: «الأيقونات تحت مثبتة ومعطلة الشاشة … فهيم عنده من فوق … التلات شرط … الطابع فخم»). No bottom dock:
   the page is the screen's. ☰ opens the side navigation as a drawer on the phone (fixed on a laptop); the bar holds search
   (Ctrl K), the bell and «العرض واللغة». A conversation in the chat takes the whole phone screen. Same navy / paper /
   bronze tokens; the monogram lattice (brand/pattern_tile.svg) is the texture of every navy surface. */
.tabs { display: none !important; }
.page { padding-bottom: calc(32px + var(--safe-b)); }
.page.has-bar { padding-bottom: calc(112px + var(--safe-b)); }
.page.full { padding-bottom: 0; }
.sumbar, .sumbar.no-tabs { bottom: calc(10px + var(--safe-b)); }

/* the navy surfaces carry the lattice; the bar keeps its seal line */
.appbar, .side, .auth .band { background-image: url('../brand/pattern_tile.svg'); background-size: 132px 116px; }
.appbar { gap: 4px; padding-inline: 8px 10px; }
.appbar .icon-btn { width: 40px; height: 40px; position: relative; flex: none; }
.appbar .icon-btn svg { width: 22px; height: 22px; }
.appbar .tb-title { min-width: 0; padding-inline-start: 4px; }
.appbar .mono { height: 26px; margin-inline: 2px 4px; }
.net { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--on-brand-2); white-space: nowrap; margin-inline: 2px; }
.tb-dot { position: absolute; top: 8px; inset-inline-end: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--bronze-l);
  box-shadow: 0 0 0 2px var(--brand); }
.tb-dot[hidden] { display: none; }
.tb-menu svg path { stroke-width: 2; }
.langb { font: 800 14px/1 var(--font-en); letter-spacing: -.01em; }
html[lang='en'] .tb-prefs .langb { font-family: var(--font-ar); font-size: 15px; }

/* search: an icon on the phone, a field on the laptop */
.tb-search { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: var(--r); background: transparent; color: var(--on-brand); cursor: pointer; }
.tb-search svg { width: 22px; height: 22px; }
.tb-search:active { background: rgba(255, 255, 255, .1); }
.tb-s-t, .tb-s-k { display: none; }

/* popovers under the bar: the bell, «العرض واللغة» */
.tb-wrap { position: relative; flex: none; }
.tb-pop { position: absolute; top: calc(100% + 10px); inset-inline-end: -4px; z-index: 90; width: 330px; max-height: min(70vh, 520px); overflow: auto;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 48px rgba(13, 18, 31, .22), 0 2px 6px rgba(13, 18, 31, .08);
  animation: pop-in .2s var(--ease-out) both; transform-origin: top; }
.tb-pop[hidden] { display: none; }
.tb-pop::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, var(--bronze), var(--bronze-l), transparent); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.pop-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.pop-h b { font-size: 14px; color: var(--navy); }
html[lang='en'] .pop-h b { font: 800 12px var(--font-en); letter-spacing: .12em; text-transform: uppercase; }
.pop-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 12px; display: inline-grid; place-items: center; }
.pop-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--ink); position: relative; border-bottom: 1px solid var(--line); }
.pop-row:last-child { border-bottom: 0; }
.pop-row::before { content: ''; position: absolute; inset-block: 10px; inset-inline-start: 0; width: 3px; border-radius: 0 2px 2px 0; background: var(--line-2); }
.pop-row.bad::before { background: var(--bad); }
.pop-row.warn::before { background: var(--bronze-l); }
.pop-row.ok::before { background: var(--ok); }
.pop-row.info::before { background: var(--info); }
.pop-row:hover, .pop-row:focus-visible { background: var(--paper-2); }
.pop-row .grow { display: flex; flex-direction: column; min-width: 0; }
.pop-row b { font-size: 14px; line-height: 1.35; }
.pop-row small { font-size: 12px; color: var(--stone); }
.pop-row .chev { width: 18px; height: 18px; color: var(--stone-2); flex: none; }
html[dir='rtl'] .pop-row .chev { transform: scaleX(-1); }
.pop-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 4px; background: var(--paper-2); color: var(--navy); }
.pop-ic svg { width: 20px; height: 20px; }
.pop-row.bad .pop-ic { background: var(--bad-bg); color: var(--bad); }
.pop-row.warn .pop-ic { background: var(--warn-bg); color: var(--warn); }
.pop-row.ok .pop-ic { background: var(--ok-bg); color: var(--ok); }
.pop-row.info .pop-ic { background: var(--info-bg); color: var(--info); }
.pop-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px 30px; color: var(--stone); font-size: 14px; text-align: center; }
.pop-empty svg { width: 34px; height: 34px; color: var(--ok); }
.prefs-pop { width: 290px; }
.prefs-b { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; }
.prefs-l { font-size: 12px; font-weight: 700; color: var(--stone); margin-top: 4px; }
html[lang='en'] .prefs-l { font: 700 10.5px var(--font-en); letter-spacing: .14em; text-transform: uppercase; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 5px; background: var(--paper-2); border: 1px solid var(--line); }
.seg-opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 3px;
  background: transparent; color: var(--stone); font-weight: 700; font-size: 13.5px; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.seg-opt svg { width: 18px; height: 18px; }
.seg-opt:hover { color: var(--ink); }
.seg-opt.on { background: var(--card); color: var(--navy); box-shadow: 0 1px 2px rgba(23, 32, 54, .14), inset 0 -2px 0 var(--bronze-l); }
.seg-opt[lang='en'] { font-family: var(--font-en); }
.seg-opt[lang='ar'] { font-family: var(--font-ar); }

/* the side navigation: navy, the lattice, a bronze hairline on its outer edge */
.side { background-color: var(--brand); }
.side::before { content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(201, 138, 78, .45) 30%, rgba(201, 138, 78, .2) 80%, transparent); }
.sn-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline-end: 10px; }
.sn-close { display: none; color: var(--on-brand-2); }
.sn-close:active { background: rgba(250, 246, 238, .1); }
.sn-i .badge { margin-inline-start: auto; background: var(--bronze-l); color: #1a1206; }
.sn-i[data-count='my_returned'] .badge { background: var(--bad); color: var(--on-brand); }
.sn-user .sn-cog { width: 18px; height: 18px; color: var(--on-brand-3); flex: none; }
.sn-prefs { display: none; }
.side .sn-prefs .pop-h { display: none; }
.side .prefs-b { padding: 4px 12px 10px; gap: 6px; }
.side .prefs-l { color: var(--on-brand-3); }
.side .seg { background: rgba(250, 246, 238, .06); border-color: rgba(250, 246, 238, .1); }
.side .seg-opt { color: var(--on-brand-2); min-height: 38px; }
.side .seg-opt.on { background: rgba(250, 246, 238, .14); color: var(--on-brand); box-shadow: inset 0 -2px 0 var(--bronze-l); }
.nav-scrim { display: none; }

@media (max-width: 899px) {
  /* the drawer: slides in from the reading start, over a dimmed page */
  .side { width: min(86vw, 330px); z-index: 70; visibility: hidden; transform: translateX(var(--off, 100%)); padding-top: calc(var(--safe-t) + 12px); padding-bottom: calc(var(--safe-b) + 10px);
    transition: transform .26s var(--ease-out), visibility 0s linear .26s; overscroll-behavior: contain; box-shadow: 0 0 60px rgba(0, 0, 0, .35); }
  html[dir='ltr'] .side { --off: -100%; }
  html.nav-open .side { visibility: visible; transform: none; transition: transform .32s var(--ease-out); }
  .side::after { content: ''; position: absolute; inset: auto 0 0 0; height: 220px; background: url('../brand/pattern_mark.svg') no-repeat center bottom / 240px; opacity: .05; pointer-events: none; }
  .sn-brand { display: block; padding: 0 20px; }
  .sn-brand img { height: 32px; width: auto; }
  .sn-close { display: inline-grid; }
  .sn-i { padding: 12px; font-size: 15px; }
  .sn-prefs { display: block; border-top: 1px solid rgba(250, 246, 238, .1); margin: 6px 10px 0; padding-top: 6px; position: relative; z-index: 1; }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(10, 14, 26, .55); opacity: 0; pointer-events: none; transition: opacity .26s; }
  html.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  html.nav-open body { overflow: hidden; }
  /* the bell / display menus open as a sheet under the bar, the phone's full width */
  .tb-wrap { position: static; }
  .tb-pop { position: fixed; top: calc(var(--safe-t) + 62px); inset-inline: 8px; width: auto; }
  .appbar h1 { font-size: 16.5px; }
  /* a conversation takes the whole screen: the bar steps aside (the chat has its own head with «back») */
  html.chat-full .appbar, html.chat-full .finish { display: none; }
  html.chat-full .page.full { padding-top: var(--safe-t); }
  html.chat-full body { overflow: hidden; }
}
@media (max-width: 380px) { .appbar { padding-inline: 4px 6px; gap: 2px; } .appbar .mono { display: none; } }

@media (min-width: 900px) {
  .tb-menu, .nav-scrim { display: none !important; }
  .appbar { background-image: none; gap: 8px; padding-inline: 28px; }
  .appbar .icon-btn { width: 42px; height: 42px; }
  .tb-dot { box-shadow: 0 0 0 2px var(--paper); top: 9px; inset-inline-end: 9px; }
  .net { color: var(--stone); }
  .tb-search { display: inline-flex; align-items: center; gap: 10px; width: 300px; height: 42px; padding: 0 10px 0 12px; margin-inline-end: 4px;
    background: var(--card); color: var(--stone); border: 1px solid var(--line); border-radius: 5px; font-size: 14px; text-align: start; transition: border-color .2s, box-shadow .2s; }
  .tb-search:hover { border-color: var(--line-2); box-shadow: 0 2px 8px rgba(23, 32, 54, .06); }
  .tb-search:active { background: var(--card); }
  .tb-search svg { width: 18px; height: 18px; color: var(--navy); }
  .tb-s-t { display: block; flex: 1; }
  .tb-s-k { display: block; font: 700 11px var(--font-en); color: var(--stone); background: var(--paper-2); border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; direction: ltr; }
  .side .sn-prefs { display: none; }
}

/* the command palette (Ctrl K): a card on the laptop, the whole screen on the phone */
.cmdk { position: fixed; inset: 0; z-index: 120; background: rgba(10, 14, 26, .5); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px;
  animation: fade-in .16s ease-out both; }
.cmdk.out { opacity: 0; transition: opacity .14s; }
@keyframes fade-in { from { opacity: 0; } }
.cmdk-card { width: min(640px, 100%); max-height: 76vh; display: flex; flex-direction: column; background: var(--card); color: var(--ink); border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(10, 14, 26, .4); animation: pop-in .22s var(--ease-out) both; position: relative; }
.cmdk-card::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, var(--bronze), var(--bronze-l) 40%, transparent); }
.cmdk-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cmdk-top > svg { width: 22px; height: 22px; color: var(--navy); flex: none; }
.cmdk-in { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 17px; font-weight: 600; padding: 8px 0; color: var(--ink); }
.cmdk-in::-webkit-search-cancel-button { display: none; }
.cmdk-x { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--stone); font-weight: 700; font-size: 14px; cursor: pointer; padding: 8px 4px; }
.cmdk-x kbd { font: 700 11px var(--font-en); border: 1px solid var(--line); background: var(--paper-2); border-radius: 3px; padding: 2px 6px; }
.cmdk-x span { display: none; }
.cmdk-list { overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 10px; }
.cmdk-g + .cmdk-g { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.cmdk-gl { font-size: 12px; font-weight: 700; color: var(--stone); padding: 10px 18px 6px; }
html[lang='en'] .cmdk-gl { font: 700 10.5px var(--font-en); letter-spacing: .14em; text-transform: uppercase; }
.cmdk-row { display: flex; align-items: center; gap: 12px; padding: 9px 18px; text-decoration: none; color: var(--ink); position: relative; min-height: 52px; }
.cmdk-row.on { background: var(--paper-2); }
.cmdk-row.on::before { content: ''; position: absolute; inset-block: 8px; inset-inline-start: 0; width: 3px; background: var(--bronze-l); border-radius: 0 2px 2px 0; }
.cmdk-row .grow { display: flex; flex-direction: column; min-width: 0; }
.cmdk-row b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-row small { font-size: 12px; color: var(--stone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-row .tag { flex: none; font-size: 11.5px; color: var(--stone); background: var(--paper-2); border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px; }
.cmdk-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 4px; background: var(--paper-2); color: var(--navy); }
.cmdk-ic svg { width: 19px; height: 19px; }
.cmdk-row .avatar { width: 34px; height: 34px; font-size: 12px; flex: none; }
.cmdk-note { margin: 0; padding: 14px 18px 6px; color: var(--stone); font-size: 13px; }
@media (max-width: 899px) {
  .cmdk { padding: 0; background: var(--card); }
  .cmdk-card { width: 100%; max-height: none; height: 100%; border: 0; border-radius: 0; box-shadow: none; padding-top: var(--safe-t); }
  .cmdk-card::before { top: var(--safe-t); }
  .cmdk-top { padding: 8px 10px 8px 14px; }
  .cmdk-x kbd { display: none; }
  .cmdk-x span { display: inline; color: var(--navy); }
  .cmdk-list { flex: 1; padding-bottom: calc(16px + var(--safe-b)); }
}

/* dark */
:root[data-theme='dark'] .tb-pop, :root[data-theme='dark'] .cmdk-card { background: #141d33; border-color: var(--line); box-shadow: 0 18px 48px rgba(0, 0, 0, .5); }
:root[data-theme='dark'] .pop-row:hover, :root[data-theme='dark'] .cmdk-row.on { background: rgba(250, 246, 238, .06); }
:root[data-theme='dark'] .pop-h b, :root[data-theme='dark'] .cmdk-x span { color: var(--ink); }
:root[data-theme='dark'] .pop-ic, :root[data-theme='dark'] .cmdk-ic, :root[data-theme='dark'] .seg { background: rgba(250, 246, 238, .06); color: var(--ink); }
:root[data-theme='dark'] .seg-opt.on { background: rgba(250, 246, 238, .14); color: var(--ink); }
:root[data-theme='dark'] .pop-n { background: var(--bronze-l); color: #1a1206; }
:root[data-theme='dark'] .tb-dot { box-shadow: 0 0 0 2px #172036; }
:root[data-theme='dark'] .cmdk-top > svg { color: var(--ink); }
@media (max-width: 899px) { :root[data-theme='dark'] .cmdk { background: #141d33; } }
@media (min-width: 900px) {
  :root[data-theme='dark'] .tb-search { background: rgba(250, 246, 238, .05); border-color: var(--line); }
  :root[data-theme='dark'] .tb-search svg { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .side, .nav-scrim { transition: none !important; } .tb-pop, .cmdk, .cmdk-card { animation: none; } }
@media print { .side, .nav-scrim, .tb-pop, .cmdk { display: none !important; } }

/* ---- the bar's buttons exactly as faheem-lite's (Loaai, 24 Oct 2026: «حجم الزراير … الجرس … العدسة … العرض واللغة زي فهيم،
   مع اختلاف الألوان والبراندنج بس»): 44px squares with a 1px rule, 18px line icons, the search a ruled field with Ctrl K on the
   laptop and a square on the phone, the display button a sun (light) or a moon (dark). Noble Line's colours and edges. */
.fi { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.fi.sm { width: 15px; height: 15px; }
.on-dark { display: none !important; }
:root[data-theme='dark'] .on-light { display: none !important; }
:root[data-theme='dark'] .on-dark { display: block !important; }
.appbar { gap: 8px; padding-inline: 12px; }
.tb-btn, .tb-search { width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; position: relative; cursor: pointer;
  border-radius: 4px; border: 1px solid rgba(250, 246, 238, .2); background: rgba(250, 246, 238, .06); color: var(--on-brand-2);
  transition: color .15s, border-color .15s, background .15s, transform .15s; }
.tb-btn:hover, .tb-search:hover { color: var(--on-brand); border-color: rgba(250, 246, 238, .45); }
.tb-btn:active, .tb-search:active { transform: scale(.96); background: rgba(250, 246, 238, .1); }
.tb-btn[aria-expanded='true'] { color: var(--on-brand); border-color: var(--bronze-l); }
.tb-btn svg.ic { width: 20px; height: 20px; }
.tb-menu svg path { stroke-width: 1.75; }
.tb-dot { top: 8px; inset-inline-end: 8px; width: 8px; height: 8px; background: var(--bronze-l); border: 2px solid var(--brand); box-shadow: none; box-sizing: content-box; }
.tb-search .tb-s-t, .tb-search .tb-s-k { display: none; }
/* the popovers: faheem's (320px, a plain icon per row) with the bronze rule on top */
.tb-pop { width: 320px; border-radius: 6px; }
.pop-h { padding: 12px 14px; font-size: 13px; }
.pop-h b { font-size: 13px; }
.pop-row { gap: 10px; padding: 10px 14px; font-size: 13px; }
.pop-row::before { display: none; }
.pop-row b { font-size: 13px; font-weight: 600; }
.pop-ic, .pop-row.bad .pop-ic, .pop-row.warn .pop-ic, .pop-row.ok .pop-ic, .pop-row.info .pop-ic { width: 24px; height: 24px; background: none; border-radius: 0; }
.pop-ic svg { width: 18px; height: 18px; }
.pop-row.warn .pop-ic { color: var(--bronze); }
.pop-row .chev { width: 15px; height: 15px; }
.pop-empty { padding: 18px 14px; font-size: 13px; }
.pop-empty svg { width: 26px; height: 26px; }
.prefs-pop { width: 280px; }
.seg-opt { min-height: 36px; font-size: 13px; }
.seg-opt .fi { width: 15px; height: 15px; }
@media (max-width: 899px) {
  .tb-pop { width: auto; max-width: none; }
}
@media (max-width: 380px) { .appbar { gap: 6px; padding-inline: 8px; } }
@media (min-width: 900px) {
  .appbar { gap: 14px; padding-inline: 24px; }
  .tb-btn { border-color: var(--line); background: var(--card); color: var(--stone); }
  .tb-btn:hover { color: var(--navy); border-color: var(--navy); }
  .tb-btn:active { background: var(--card); }
  .tb-btn[aria-expanded='true'] { color: var(--navy); border-color: var(--navy); }
  .tb-dot { border-color: var(--card); }
  .tb-search { display: flex; place-items: initial; align-items: center; gap: 8px; width: auto; min-width: 300px; padding: 0 12px; margin: 0;
    border-color: var(--line); background: var(--paper-2); color: var(--stone); font-size: 13px; text-align: start; }
  .tb-search:hover { color: var(--stone); border-color: var(--stone-2); box-shadow: none; }
  .tb-search:active { transform: none; background: var(--paper-2); }
  .tb-search svg { width: 15px; height: 15px; color: var(--stone); }
  .tb-search .tb-s-t { display: block; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .tb-search .tb-s-k { display: block; font: 500 11px/1 var(--font-en); border: 1px solid var(--line); background: var(--card); border-radius: 4px; padding: 3px 5px; color: var(--stone); direction: ltr; }
  :root[data-theme='dark'] .tb-btn { background: rgba(250, 246, 238, .04); border-color: var(--line); color: var(--stone-2); }
  :root[data-theme='dark'] .tb-btn:hover, :root[data-theme='dark'] .tb-btn[aria-expanded='true'] { color: var(--ink); border-color: var(--ink); }
  :root[data-theme='dark'] .tb-dot { border-color: #141d33; }
  :root[data-theme='dark'] .tb-search { background: rgba(250, 246, 238, .04); border-color: var(--line); }
  :root[data-theme='dark'] .tb-search .tb-s-k { background: rgba(250, 246, 238, .06); border-color: var(--line); }
}
@media (min-width: 900px) and (max-width: 1180px) { .tb-search { min-width: 220px; } }
@media (min-width: 900px) and (max-width: 1000px) { .tb-search { min-width: 0; width: 44px; padding: 0; justify-content: center; } .tb-search .tb-s-t, .tb-search .tb-s-k { display: none; } }

/* =================================================================== settings (24 Oct 2026 — js/screens/settings.js, js/prefs.js)
   One screen with its own menu: side by side on a laptop, the menu then one part on the phone. Cards with rows, a
   switch for every on/off, the same segmented control as «العرض واللغة». */
.set-wrap { display: grid; gap: 18px; align-items: start; }
.set-nav { display: flex; flex-direction: column; gap: 2px; }
.set-me { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 8px; text-decoration: none; color: var(--on-brand); border-radius: 6px;
  background: var(--brand) url('../brand/pattern_tile.svg'); background-size: 132px 116px; position: relative; overflow: hidden; }
.set-me::after { content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; width: 3px; background: var(--bronze-l); }
.set-me b { display: block; font-size: 15px; }
.set-me span { display: block; font-size: 12.5px; color: var(--on-brand-2); }
.set-me .avatar { width: 48px; height: 48px; font-size: 16px; background: rgba(250, 246, 238, .12) !important; color: var(--on-brand) !important; flex: none; }
.set-g { font-size: 12px; font-weight: 700; color: var(--stone); padding: 14px 6px 6px; }
html[lang='en'] .set-g { font: 700 10.5px var(--font-en); letter-spacing: .14em; text-transform: uppercase; }
.set-i { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 5px; text-decoration: none; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); min-height: 60px; position: relative; text-align: start; font: inherit; cursor: pointer; width: 100%; }
.set-i + .set-i { margin-top: 6px; }
.set-i .grow { display: flex; flex-direction: column; min-width: 0; }
.set-i b { font-size: 14.5px; }
.set-i small { font-size: 12px; color: var(--stone); }
.set-i .chev { width: 16px; height: 16px; color: var(--stone-2); flex: none; }
html[dir='rtl'] .set-i .chev { transform: scaleX(-1); }
.set-i.on { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--bronze-l); }
html[dir='rtl'] .set-i.on { box-shadow: inset -3px 0 0 var(--bronze-l); }
.set-i.out { margin-top: 14px; color: var(--bad); }
.set-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 4px; background: var(--paper-2); color: var(--navy); }
.set-ic svg { width: 20px; height: 20px; }
.set-i.out .set-ic { background: var(--bad-bg); color: var(--bad); }
.set-h { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.set-hic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 5px; background: var(--brand); color: var(--bronze-l); }
.set-hic svg { width: 22px; height: 22px; }
.set-h h2 { margin: 0; font-size: 19px; color: var(--navy); }
.set-h p { margin: 2px 0 0; font-size: 13px; color: var(--stone); }
.set-stack { display: flex; flex-direction: column; gap: 14px; }
.set-card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 6px 16px 12px; box-shadow: var(--shadow); }
.set-ct { font-size: 13px; font-weight: 800; color: var(--navy); padding: 12px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
html[lang='en'] .set-ct { font: 800 11px var(--font-en); letter-spacing: .12em; text-transform: uppercase; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); min-height: 56px; }
.set-row:last-child { border-bottom: 0; }
.set-row .grow { display: flex; flex-direction: column; min-width: 0; }
.set-row b { font-size: 14px; font-weight: 700; }
.set-row small { font-size: 12px; color: var(--stone); line-height: 1.4; }
.set-val { font-size: 14px; color: var(--ink); font-weight: 600; flex: none; }
.set-val.warn { color: var(--warn); }
.set-num { width: 84px; text-align: center; flex: none; }
.set-block { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.set-block:last-child { border-bottom: 0; }
.set-block b { font-size: 14px; }
.set-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 8px; }
.set-time { text-align: center; }
.set-prof { display: flex; align-items: center; gap: 16px; padding: 12px 0 6px; }
.set-name { font-size: 18px; font-weight: 800; color: var(--navy); }
.set-on { display: inline-block; margin-inline-start: 8px; font-size: 11px; font-weight: 700; color: var(--ok); background: var(--ok-bg); border-radius: 999px; padding: 1px 8px; vertical-align: 1px; }
.set-dev .set-ic { width: 34px; height: 34px; }
.set-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); }
.set-dot.ok { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); }
.set-dot.bad { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-bg); }
.set-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin: 10px 0 4px; }
.set-kpis > div { background: var(--card); padding: 12px 10px; }
.set-kpis b { display: block; font: 700 20px/1.1 var(--font-en); color: var(--navy); }
.set-kpis span { font-size: 12px; color: var(--stone); }
.set-table { display: flex; flex-direction: column; padding: 6px 0; }
.set-tr { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 14px; }
.set-tr:last-child { border-bottom: 0; }
.set-tr.head { font-size: 12px; font-weight: 700; color: var(--stone); }
.set-foot { text-align: center; font-size: 12px; color: var(--stone); display: flex; flex-direction: column; gap: 4px; padding: 18px 0 6px; }
.set-wrap.only-body .set-h { display: none; }
/* the switch */
.nl-switch { width: 50px; height: 30px; flex: none; border-radius: 999px; border: 1px solid var(--line-2); background: var(--mute-bg); position: relative; cursor: pointer; padding: 0;
  transition: background .2s, border-color .2s; }
.nl-switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white);
  box-shadow: 0 1px 3px rgba(23, 32, 54, .3); transition: transform .2s var(--ease-out); }
.nl-switch.on { background: var(--navy); border-color: var(--navy); }
.nl-switch.on::after { transform: translateX(20px); background: var(--bronze-l); }
html[dir='rtl'] .nl-switch.on::after { transform: translateX(-20px); }
@media (min-width: 900px) {
  .set-wrap { grid-template-columns: 320px minmax(0, 1fr); gap: 26px; }
  .set-nav { position: sticky; top: 90px; }
  .set-body { max-width: 760px; }
}
:root[data-theme='dark'] .set-i, :root[data-theme='dark'] .set-card, :root[data-theme='dark'] .set-kpis > div { background: #141d33; }
:root[data-theme='dark'] .set-ic { background: rgba(250, 246, 238, .06); color: var(--ink); }
:root[data-theme='dark'] .set-h h2, :root[data-theme='dark'] .set-ct, :root[data-theme='dark'] .set-name, :root[data-theme='dark'] .set-kpis b { color: var(--ink); }
:root[data-theme='dark'] .set-i.on { border-color: var(--ink); }
:root[data-theme='dark'] .nl-switch.on { background: var(--bronze); border-color: var(--bronze); }
:root[data-theme='dark'] .nl-switch.on::after { background: var(--paper); }

/* this device's display choices (js/prefs.js): text size scales the page and the sheets; «less motion» stops movement */
html.fs-sm main.page, html.fs-sm .sheet { zoom: .92; }
html.fs-lg main.page, html.fs-lg .sheet { zoom: 1.1; }
html.fs-xl main.page, html.fs-xl .sheet { zoom: 1.22; }
html.rm *, html.rm *::before, html.rm *::after { animation: none !important; transition: none !important; }

/* =================================================================== the Zoho Books page (24 Oct 2026, js/screens/zoho.js zohoScreen) */
.zh-tabs { margin: -16px -16px 16px; padding: 0 12px; position: sticky; top: calc(60px + var(--safe-t)); z-index: 20; }
.zh-hero { background: var(--brand) url('../brand/pattern_tile.svg'); background-size: 132px 116px; color: var(--on-brand); border-radius: 6px; padding: 18px;
  display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.zh-hero::after { content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; width: 3px; background: var(--bronze-l); }
.zh-hero-top { display: flex; align-items: center; gap: 12px; }
.zh-hero-top b { display: block; font-size: 17px; }
.zh-hero-top span:not(.set-dot) { display: block; font-size: 12.5px; color: var(--on-brand-2); }
.zh-hero .set-kpis { background: rgba(250, 246, 238, .14); border-color: rgba(250, 246, 238, .14); margin: 0; }
.zh-hero .set-kpis > div { background: var(--brand-2); }
.zh-hero .set-kpis b { color: var(--on-brand); }
.zh-hero .set-kpis span { color: var(--on-brand-2); }
.zh-hero .btn.light { background: rgba(250, 246, 238, .08); color: var(--on-brand); border-color: rgba(250, 246, 238, .25); }
.zh-row { margin: 0 -16px; padding-inline: 16px; }
.zh-row small { font-size: 12px; color: var(--stone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-line { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.zh-line:last-child { border-bottom: 0; }
.zh-line .grow { display: flex; flex-direction: column; min-width: 0; }
.zh-line b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-line small { font-size: 12px; color: var(--stone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.zh-line:hover b { text-decoration: underline; }
.zh-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.zh-right .num { font-size: 14px; }
@media (min-width: 900px) {
  .zh-tabs { top: 64px; margin-inline: 0; border-radius: 4px; }
  .zh-stack { max-width: 980px; }
  .zh-hero .set-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
:root[data-theme='dark'] .zh-hero { background-color: #141d33; border: 1px solid var(--line); }

/* =================================================================== daily rate cards (24 Oct 2026, js/screens/ratecards.js) */
.rc-row { gap: 14px; }
.rc-row.def { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--bronze-l); }
html[dir='rtl'] .rc-row.def { box-shadow: inset -3px 0 0 var(--bronze-l); }
.rc-row.off { opacity: .7; }
.rc-fig { display: flex; flex-direction: column; align-items: center; min-width: 64px; flex: none; }
.rc-fig span { font-size: 11.5px; color: var(--stone); }
.rc-fig b { font-size: 17px; color: var(--navy); }
.rc-split { display: grid; gap: 14px; margin-bottom: 12px; }
.rc-li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.rc-li small { color: var(--stone); }
.rc-li .neg { color: var(--bad); }
.rc-pend { border-color: var(--warn); }
.rc-g { gap: 10px; }
.rc-seg { min-width: 150px; flex: none; }
@media (min-width: 760px) { .rc-split { grid-template-columns: 1fr 1fr; } }
:root[data-theme='dark'] .rc-fig b { color: var(--ink); }

/* ---- petty cash v3 (26 Oct 2026): the statement period, the flow, filters, days, running balance ---- */
.pc-period { margin: 2px 0 12px; }
.pc-pmain { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); padding: 4px; }
.pc-pnav { font: 800 24px/1 var(--font-en); color: var(--navy); }
.pc-pnav[disabled] { opacity: .25; cursor: default; }
.pc-plabel { text-align: center; min-width: 0; }
.pc-plabel b { display: block; font-size: 16px; color: var(--navy); }
.pc-plabel span { display: block; font-size: 11.5px; color: var(--stone); }
.pc-pchips { margin: 8px -16px 0; align-items: center; }
select.inp.pc-msel { flex: none; width: auto; max-width: 170px; min-height: 38px; height: 38px; padding: 0 10px; border-radius: 999px; font-weight: 800; font-size: 13px; }
.pc-stmt .pc-bal { margin: 2px 0 0; }
.pc-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0 10px; }
.pc-fc { min-width: 0; background: rgba(255, 255, 255, .07); border-radius: var(--r); padding: 8px 8px 7px; }
.pc-fc span { display: flex; align-items: center; gap: 4px; font-size: 11.5px; opacity: .8; white-space: nowrap; }
.pc-fc span i { font: 800 13px var(--font-en); font-style: normal; opacity: .9; }
.pc-fc b { display: block; font: 800 14.5px/1.35 var(--font-en); overflow: hidden; text-overflow: ellipsis; unicode-bidi: isolate; }
.pc-fc small { display: block; font-size: 10.5px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .pc-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pc-filters { margin-top: 8px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); }
.pc-filters > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 11px 12px; font-weight: 800; color: var(--navy); }
.pc-filters > summary::-webkit-details-marker { display: none; }
.pc-filters > summary svg { width: 18px; height: 18px; }
.pc-filters[open] > summary { border-bottom: 1px solid var(--line); }
.pc-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pc-filters .pc-fgrid { padding: 12px; }
.pc-fgrid .f.wide { grid-column: 1 / -1; }
@media (min-width: 760px) { .pc-filters .pc-fgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pc-day { margin-bottom: 10px; }
.pc-day-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 2px 6px; }
.pc-day-h b { font-size: 13px; color: var(--navy); }
.pc-day-h span { font-size: 12px; color: var(--stone); direction: ltr; unicode-bidi: isolate; }
.pc-t2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; text-align: start; overflow-wrap: anywhere; }
.pc-amtw { flex: none; text-align: end; }
.pc-meta { white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.pc-after { font-size: 11.5px; color: var(--stone); margin-top: 3px; direction: ltr; }
.pc-amt.out { color: var(--ink); }
.pill.pc-nore { background: var(--warn-bg); color: var(--warn); }
.pc-anaw { margin-top: 16px; }
.pc-anaw > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px; font-weight: 800; color: var(--navy);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); }
.pc-anaw > summary::-webkit-details-marker { display: none; }
.pc-anaw > summary svg { width: 18px; height: 18px; }
.pc-anaw[open] > summary { margin-bottom: 10px; }
.pc-only-wide { display: none; }
@media (min-width: 760px) { .pc-only-wide { display: block; } .pc-only-narrow { display: none; } }
.pc-stbl td a { color: var(--navy); text-decoration: none; }
.pc-stbl tr.off td { opacity: .55; }
.pc-stbl tr.neg td.b { color: var(--bad); }
.pc-warnc { color: var(--warn); font-weight: 800; }
.pc-mini { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 2px; font-size: 12px; color: var(--stone); }
.pc-mini b { margin-inline-start: 4px; color: var(--ink); font-size: 12.5px; direction: ltr; unicode-bidi: isolate; }

/* ---- the export menu (27 Oct 2026): PDF / Excel × عربي / English ---- */
.xrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.xbtn { min-height: 60px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.xbtn svg { width: 22px; height: 22px; flex: none; }
.xbtn span { display: flex; flex-direction: column; line-height: 1.25; text-align: start; }
.xbtn small { font-size: 12px; opacity: .8; font-weight: 600; }

/* ---------- advanced filters (js/facets.js, 27 Oct 2026) — «زي أودو»: search, filters with counts, group by, chips ---------- */
.fp-bar { display: flex; gap: 8px; align-items: center; }
.fp-bar .grow { min-width: 0; }
.fp-bar .btn { flex: none; white-space: nowrap; }
.fp-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--bronze); color: #fff; font-size: 12px; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fp-chips:empty { display: none; }
.fp-chips .fchip { max-width: 100%; }
.fp-quick { margin: 8px -16px 0; }
.fp-count { margin: 8px 2px; }
.fp-group { margin-bottom: 10px; }
.fp-group > summary { display: flex; align-items: center; gap: 8px; padding: 10px 4px; cursor: pointer; list-style: none; border-bottom: 1px solid var(--line-2); margin-bottom: 8px; }
.fp-group > summary::-webkit-details-marker { display: none; }
.fp-group > summary::before { content: '▾'; color: var(--stone); transition: transform .15s; }
.fp-group:not([open]) > summary::before { transform: rotate(-90deg); }
[dir='rtl'] .fp-group:not([open]) > summary::before { transform: rotate(90deg); }
.fp-sec { padding: 10px 0 14px; border-bottom: 1px solid var(--line); }
.fp-sec:last-child { border-bottom: 0; }
.fp-sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fp-sec-h svg { width: 18px; height: 18px; color: var(--stone); }
.fp-sec-h .link { margin-inline-start: auto; }
.fp-sheet .chip[disabled] { opacity: .45; }
.code-z { display: inline-block; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--bronze); direction: ltr; unicode-bidi: isolate; }
.flags { display: inline-flex; gap: 4px; }
.flags i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); display: inline-block; }
.flags i.on { background: var(--ok, #245a41); }

/* ---------- a worker's identity card and files (js/screens/crew.js) ---------- */
.idc { display: grid; gap: 12px; }
.idc-head { display: flex; gap: 14px; align-items: center; }
.idc-photo { width: 96px; height: 96px; border-radius: 16px; overflow: hidden; background: var(--paper); border: 1px solid var(--line-2); display: grid; place-items: center; flex: none; font-size: 30px; font-weight: 800; color: var(--stone); cursor: pointer; }
.idc-photo img { width: 100%; height: 100%; object-fit: cover; }
.idc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.idc-file { border: 1px solid var(--line); border-radius: var(--r2); background: var(--white); overflow: hidden; display: flex; flex-direction: column; }
.idc-file .th { aspect-ratio: 4 / 3; background: var(--paper); display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.idc-file .th img { width: 100%; height: 100%; object-fit: cover; }
.idc-file .th svg { width: 34px; height: 34px; color: var(--stone); }
.idc-file .meta { padding: 8px 10px; font-size: 12px; display: flex; gap: 6px; align-items: center; }
.idc-file .meta .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idc-slot { border: 1px dashed var(--line-2); border-radius: var(--r2); background: var(--paper); min-height: 120px; display: grid; place-items: center; gap: 4px; text-align: center; color: var(--stone); cursor: pointer; padding: 10px; }
.idc-slot svg { width: 26px; height: 26px; }
.idc-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 14px; }
.idc-kv .k { color: var(--stone); font-size: 12px; }
.idc-kv .v { font-weight: 700; }
.idc-view img { max-width: 100%; border-radius: var(--r); display: block; margin: 0 auto; }
/* a phone: the search takes its own row, «فلاتر» and «تجميع حسب» share the next one */
@media (max-width: 560px) {
  .fp-bar { flex-wrap: wrap; }
  .fp-bar .search { flex: 1 1 100%; }
  .fp-bar .btn { flex: 1 1 0; justify-content: center; }
}

/* petty cash like Zoho Expense (27 Oct 2026): the receipt read by AI, budget bars outside the hero */
.pc-scan { padding: 8px 10px; border-radius: var(--r); background: var(--ok-bg); color: var(--ok); }
.pc-scan.busy { background: var(--paper); color: var(--stone); }
.card .pc-bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.card .pc-bar i { display: block; height: 100%; background: var(--navy); border-radius: 999px; }
.card .pc-bar.over i { background: var(--bad); }
:root[data-theme='dark'] .card .pc-bar i { background: var(--bronze-l); }

/* the worker ID card on screen (28 Oct 2026) — the card itself is styled by js/workercard.js */
.nlc-prev { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 4px 0; }
.nlc-fit { zoom: 1; }
.nlc-fit .nlc { box-shadow: 0 1px 2px rgba(23, 32, 54, .18), 0 8px 22px rgba(23, 32, 54, .16); }
.lvl-pick { display: grid; gap: 6px; }
.lvl-pick h4 { margin: 10px 0 2px; font-size: 13px; color: var(--muted, #6e6a60); }
.lvl-pick button { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: start; }
.lvl-pick button small { font-family: Montserrat, sans-serif; opacity: .75; }
.idc-tl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.trade-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.trade-chips .chip small { margin-inline-start: 5px; opacity: .7; font-family: Montserrat, sans-serif; font-size: 11px; }

/* users & permissions (29 Oct 2026) */
.perm { display: grid; gap: 14px; }
.perm-mod h4 { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--navy); }
.perm-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r, 4px); background: var(--white); margin-bottom: 6px; }
.perm-t { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.perm-ic { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 3px; font-style: normal; font-size: 12px; font-weight: 800; flex: none; background: var(--mute-bg); color: var(--stone); }
.perm-row.y .perm-ic { background: #e3efe8; color: #245a41; }
.perm-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; flex: none; }
.perm-o { border: 0; background: transparent; padding: 7px 10px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--stone); cursor: pointer; min-height: 34px; }
.perm-o + .perm-o { border-inline-start: 1px solid var(--line-2); }
.perm-o.on { background: var(--navy); color: var(--paper); }
:root[data-theme="dark"] .perm-o.on { color: #172036; }
@media (max-width: 560px) { .perm-row { flex-wrap: wrap; } .perm-seg { width: 100%; } .perm-o { flex: 1; } }
.pm-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--white); -webkit-overflow-scrolling: touch; }
.pm { border-collapse: collapse; width: 100%; font-size: 13px; }
.pm th, .pm td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: center; white-space: nowrap; }
.pm th { background: #172036; color: #FAF6EE; font-weight: 700; font-size: 12px; }
.pm th.pm-mod { border-inline-start: 1px solid rgba(250, 246, 238, .18); }
.pm th.pm-cap { background: #222d48; font-weight: 600; font-size: 11.5px; }
.pm .pm-who { text-align: start; position: sticky; inset-inline-start: 0; background: inherit; min-width: 150px; }
.pm td.pm-who { background: var(--white); }
.pm th.pm-who { background: #172036; }
.pm td.pm-who b { display: block; font-size: 13px; }
.pm td.pm-who span { display: block; font-size: 11.5px; color: var(--stone); white-space: normal; }
.pm tbody tr { cursor: pointer; }
.pm tbody tr:hover td { background: var(--mute-bg); }
.pm-c { font-weight: 800; }
.pm-c.y { color: #245a41; }
.pm-c.n { color: #c4bdb0; }
.pm-c.add { background: #f6ead9 !important; color: var(--bronze); }
.pm-c.del { background: #f7e3df !important; color: #8f3324; text-decoration: line-through; }
.pm-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.pm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pm-dot { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.pm-dot.y { background: #245a41; } .pm-dot.n { background: #c4bdb0; } .pm-dot.add { background: #e9c99c; } .pm-dot.del { background: #e2a99e; }
:root[data-theme='dark'] .pm-c.add { background: #2c2214 !important; } :root[data-theme='dark'] .pm-c.del { background: #3a1f1a !important; }
:root[data-theme='dark'] .perm-row.y .perm-ic { background: #1d3a2c; color: #7fc7a2; }

/* the side navigation as five modules that open and close (29 Oct 2026, Loaai: «هيدرز أقدر أعمل لها كولابس وإكسباند») */
.sn-i { font-weight: 500; font-size: 14px; }
.sn-i.on { font-weight: 700; }
.sn-m { display: flex; flex-direction: column; margin-top: 4px; }
.sn-mh { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 12px; border: 0; border-radius: 4px; background: transparent;
  color: var(--on-brand); font: 800 13.5px var(--font-ar); text-align: start; cursor: pointer; letter-spacing: 0; }
html[lang='en'] .sn-mh { font-family: var(--font-en); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.sn-mh:hover { background: rgba(250, 246, 238, .06); }
.sn-mh .sn-mic { width: 18px; height: 18px; flex: none; color: var(--bronze-l); }
.sn-mh .sn-mn { font: 700 10.5px var(--font-en); color: var(--on-brand-3); background: rgba(250, 246, 238, .08); border-radius: 999px; padding: 1px 7px; }
.sn-mh .sn-chev { width: 16px; height: 16px; flex: none; color: var(--on-brand-3); transform: rotate(90deg); transition: transform .22s var(--ease-out, ease); }
.sn-m.open .sn-mh .sn-chev { transform: rotate(-90deg); }
.sn-m.here > .sn-mh { color: var(--bronze-l); }
.sn-mb { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s var(--ease-out, ease); }
.sn-m.open > .sn-mb { grid-template-rows: 1fr; }
.sn-mi { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 1px; padding-inline-start: 12px; }
.sn-mi .sn-i { padding-block: 8px; }
.sn-m + .sn-m { border-top: 1px solid rgba(250, 246, 238, .07); padding-top: 4px; }
@media (prefers-reduced-motion: reduce) { .sn-mb, .sn-mh .sn-chev { transition: none; } }

/* People & Culture (29 Oct 2026) */
.pc-n { min-width: 42px; height: 42px; border-radius: 4px; display: grid; place-items: center; background: var(--mute-bg); color: var(--navy); font-weight: 800; font-size: 16px; flex: none; }
.pc-comp { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pc-c { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; background: var(--white); }
.pc-ch { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; }
.pc-ch b { font-size: 18px; }
.pc-cb { height: 6px; background: var(--mute-bg); border-radius: 3px; margin: 8px 0 4px; overflow: hidden; }
.pc-cb i { display: block; height: 100%; background: var(--navy); border-radius: 3px; }
.pc-c.ok .pc-cb i { background: #245a41; } .pc-c.low .pc-cb i { background: #8f3324; } .pc-c.mid .pc-cb i { background: var(--bronze); }
.pc-c small { color: var(--stone); font-size: 11.5px; }
.pc-bars { display: grid; gap: 6px; }
.pc-bar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) 34px; align-items: center; gap: 8px; font-size: 13px; }
.pc-bl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-bt { height: 10px; background: var(--mute-bg); border-radius: 2px; overflow: hidden; }
.pc-bt i { display: block; height: 100%; background: var(--navy); border-radius: 2px; }
.pc-bar b { text-align: end; }
.pc-ladder { display: grid; gap: 10px; }
.pc-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pc-2 { align-items: start; }
@media (max-width: 760px) { .pc-2 { grid-template-columns: 1fr; } }
:root[data-theme='dark'] .pc-cb i, :root[data-theme='dark'] .pc-bt i { background: #c9a27a; }

/* purchase orders (29 Oct 2026) */
.po-row .po-no { min-width: 92px; display: flex; flex-direction: column; gap: 2px; }
.po-row .po-no b { font: 700 13px var(--font-en); color: var(--navy); }
.po-row .po-no span { font-size: 11.5px; color: var(--stone); }
.po-amt { text-align: end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.po-st { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 3px; background: var(--mute-bg); color: var(--stone); white-space: nowrap; }
.po-st.pending { background: #f6ead9; color: var(--bronze); } .po-st.pending.final { background: #172036; color: #FAF6EE; }
.po-st.returned, .po-st.rejected { background: #f7e3df; color: #8f3324; }
.po-st.approved, .po-st.ordered, .po-st.partial { background: #e4ebf5; color: #1f3d6b; }
.po-st.received, .po-st.billed { background: #e3efe8; color: #245a41; }
.po-big { font: 800 20px var(--font-en); color: var(--navy); }
.po-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 12px 0 0; font-size: 14px; }
.po-dl dt { color: var(--stone); } .po-dl dd { margin: 0; font-weight: 600; }
.po-track { list-style: none; display: flex; gap: 0; padding: 0; margin: 0; counter-reset: s; }
.po-track li { flex: 1; text-align: center; font-size: 12px; font-weight: 700; color: var(--stone); position: relative; padding-top: 22px; }
.po-track li::before { counter-increment: s; content: counter(s); position: absolute; top: 0; inset-inline-start: calc(50% - 10px); width: 20px; height: 20px; border-radius: 50%; background: var(--mute-bg); color: var(--stone); font: 700 11px/20px var(--font-en); z-index: 1; }
.po-track li::after { content: ''; position: absolute; top: 9px; inset-inline-start: 50%; width: 100%; height: 2px; background: var(--line); }
.po-track li:last-child::after { display: none; }
.po-track li.done { color: #245a41; } .po-track li.done::before { background: #245a41; color: #fff; content: '✓'; } .po-track li.done::after { background: #245a41; }
.po-track li.now { color: var(--bronze); } .po-track li.now::before { background: var(--bronze); color: #fff; }
.po-lines { display: grid; gap: 8px; }
.po-line { display: grid; grid-template-columns: 22px minmax(0, 3fr) minmax(64px, 1fr) minmax(60px, .9fr) minmax(84px, 1.2fr) 36px; gap: 6px; align-items: center; }
.po-ln { color: var(--stone); font-size: 12px; text-align: center; }
@media (max-width: 640px) { .po-line { grid-template-columns: 22px repeat(3, minmax(0, 1fr)) 36px; row-gap: 6px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
  .po-line .po-item { grid-column: 2 / 6; } .po-line > :nth-child(3) { grid-column: 2; } }
.po-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 10px; font-weight: 700; }
.po-total b { font-size: 18px; color: var(--navy); }
.po-pl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.po-pl .po-price, .po-pl > input { width: 130px; flex: none; }
.po-cls { display: grid; gap: 6px; width: 100%; }
.po-approve { border: 1px solid var(--bronze); }
.tbl td.ok { color: #245a41; font-weight: 700; }
.pc-needs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pc-needs .item { min-height: 0; padding: 10px 12px; }
.pc-needs .item .t { font-size: 13.5px; }
.pc-box { border: 1px solid var(--line); border-radius: 4px; background: var(--white); padding: 10px 12px; }
.pc-bh { font-size: 13px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }

/* the light motion on phones (29 Oct 2026, js/motion.js LIGHT): the new screen fades in — one element, opacity only */
html.lite main.page { animation: lite-in .16s ease-out both; }
@keyframes lite-in { from { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { html.lite main.page { animation: none; } }
/* People & Culture v2 (29 Oct 2026): tabs, the team, records */
.pc-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.pc-tabs button { white-space: nowrap; }
.pc-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.pc-person { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 4px; background: var(--white); padding: 12px; }
.pc-person.invited { border-style: dashed; } .pc-person.disabled { opacity: .55; }
.pc-person .t { font-weight: 700; font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.pc-person .s { font-size: 12.5px; color: var(--stone); margin-top: 2px; }
.pc-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; font-size: 12px; }
.pc-meta a { color: var(--navy); text-decoration: none; } .pc-meta a:hover { text-decoration: underline; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-chip { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--white); text-decoration: none; color: var(--ink); font-size: 13px; }
.pc-chip b { font-family: var(--font-en); color: var(--bronze); } .pc-chip small { color: var(--stone); }
.pc-tt td.ok { color: #245a41; font-weight: 700; } .pc-tt td.bad { color: #8f3324; font-weight: 700; }
.pc-rec tbody tr { cursor: pointer; } .pc-rec tbody tr:hover td { background: var(--mute-bg); }
.pc-miss { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-needs .item { width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.notice ul { margin: 6px 0 0; padding-inline-start: 18px; }
.pc-meta a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-person .grow { min-width: 0; }
.pc-warn { border-inline-start: 3px solid var(--warn); }
.pc-warn ul { margin: 6px 0 0; padding-inline-start: 18px; font-size: 13.5px; line-height: 1.8; }

/* the in-app viewer (29 Oct 2026, js/viewer.js): photos, PDFs, video — never the browser */
html.vw-on { overflow: hidden; }
.vw { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-rows: auto 1fr; background: rgba(10, 14, 25, .94); color: #faf6ee;
  opacity: 0; transition: opacity .22s ease; padding-top: var(--safe-t); }
html:not(.lite) .vw { background: rgba(10, 14, 25, .82); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
.vw.in { opacity: 1; } .vw.out { opacity: 0; }
.vw-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid rgba(250, 246, 238, .1); }
.vw-head { flex: 1; min-width: 0; }
.vw-t { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-s { font-size: 12px; color: rgba(250, 246, 238, .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-n { font: 600 12px var(--font-en); color: rgba(250, 246, 238, .7); padding: 0 6px; }
.vw-b { width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(250, 246, 238, .08); color: #faf6ee; display: grid; place-items: center; cursor: pointer; flex: none; }
.vw-b:hover { background: rgba(250, 246, 238, .16); } .vw-b svg { width: 20px; height: 20px; }
.vw-b:disabled { opacity: .25; cursor: default; }
.vw-stage { position: relative; overflow: auto; display: grid; place-items: center; touch-action: pan-y; overscroll-behavior: contain; }
.vw-zoom { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; touch-action: none; }
.vw-img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform; user-select: none; -webkit-user-drag: none; }
.vw-media { max-width: 100%; max-height: 100%; background: #000; }
.vw-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 28px; max-width: 420px; }
.vw-card svg { width: 54px; height: 54px; opacity: .8; } .vw-card.bad svg { color: #f19a88; }
.vw-text { white-space: pre-wrap; background: rgba(250, 246, 238, .06); padding: 16px; border-radius: 6px; max-width: min(900px, 94vw); align-self: start; margin: 12px; font-size: 14px; }
.vw-load { display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(250, 246, 238, .7); }
.vw-load i { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(250, 246, 238, .2); border-top-color: #c98a4e; animation: rot 0.8s linear infinite; }
.vw-pdf { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0 40px; align-self: start; width: 100%; }
.vw-page { position: relative; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); width: min(900px, calc(100vw - 24px)); }
.vw-page canvas { display: block; }
.vw-pn { position: absolute; top: 6px; inset-inline-end: 8px; font: 600 11px var(--font-en); color: #6e6a60; background: rgba(255, 255, 255, .85); padding: 1px 6px; border-radius: 3px; z-index: 1; }
.vw-prev, .vw-next { position: absolute; top: 50%; z-index: 2; background: rgba(23, 32, 54, .6); }
.vw-prev { inset-inline-start: 10px; transform: scaleX(-1); } .vw-next { inset-inline-end: 10px; }
html[dir='rtl'] .vw-prev { transform: none; } html[dir='rtl'] .vw-next { transform: scaleX(-1); }
@media (max-width: 899px) { .vw-prev, .vw-next { display: none; } }
.vw-info { position: absolute; inset-block: 58px 0; inset-inline-end: 0; width: min(340px, 92vw); background: rgba(23, 32, 54, .96); border-inline-start: 1px solid rgba(250, 246, 238, .12); padding: 16px; overflow: auto; z-index: 3; }
.vw-info h4 { margin: 0 0 12px; font-size: 15px; }
.vw-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(250, 246, 238, .08); font-size: 13px; }
.vw-row span { color: rgba(250, 246, 238, .6); } .vw-row b { text-align: end; word-break: break-word; }
.vw-arch { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px; border-radius: 6px; background: rgba(250, 246, 238, .06); font-size: 13px; }
.vw-arch svg { width: 20px; height: 20px; flex: none; } .vw-arch.ok svg { color: #7fd1a3; } .vw-arch.wait svg { color: #f0c46a; }
.vw-path { font: 600 12px var(--font-en); color: #e8c48e; margin: 4px 0; word-break: break-all; }

/* the Drive archive screen (29 Oct 2026) */
.ar-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ar-root { font: 700 15px var(--font-en); color: var(--navy); }
.ar-pct { font-size: 28px; color: var(--navy); }
.ar-bar { height: 8px; background: var(--mute-bg); border-radius: 4px; overflow: hidden; margin: 12px 0 8px; }
.ar-bar i { display: block; height: 100%; background: var(--foil, var(--bronze)); border-radius: 4px; transition: width .4s ease; }
.ar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ar-sh { display: flex; align-items: center; gap: 8px; } .ar-sh svg { width: 20px; height: 20px; color: var(--bronze); }
.ar-folder { font: 600 11.5px var(--font-en); color: var(--stone); margin: 6px 0; word-break: break-word; }

/* ------------------------------------------------------------------ «نوبل» — the AI assistant (29 Oct 2026, js/assistant.js)
   It follows the language (Loaai, 29 Oct 2026: «العربي تروح الناحية الشمال، الإنجليزي تروح الناحية اليمين»): the inline END
   corner — bottom-left in Arabic, bottom-right in English — always the side away from the menu. Navy with the bronze seal. */
.ai-fab { position: fixed; inset-inline-end: 16px; bottom: calc(18px + var(--safe-b)); z-index: 55; width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid #c98a4e; background: #172036; color: #faf6ee; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 18px rgba(13, 18, 32, .28); transition: transform .2s, bottom .25s; }
.ai-fab[hidden] { display: none; }
.ai-fab svg { width: 26px; height: 26px; }
.ai-fab:active { transform: scale(.94); }
.ai-fab.lifted { bottom: calc(92px + var(--safe-b)); }
.ai-fab.on { background: #845027; border-color: #faf6ee; }
.ai-panel { position: fixed; inset-inline: 0; bottom: 0; z-index: 57; height: min(78vh, 680px); background: var(--card); color: var(--ink);
  border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgba(13, 18, 32, .22); display: flex; flex-direction: column; padding-bottom: var(--safe-b);
  border: 1px solid var(--line); }
.ai-panel[hidden] { display: none; }
.ai-h { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: #172036; color: #faf6ee; border-radius: 14px 14px 0 0;
  border-bottom: 2px solid #845027; }
.ai-h b { display: block; font-size: 16px; }
.ai-h span { display: block; font-size: 11.5px; opacity: .75; }
.ai-h .icon-btn { color: #faf6ee; }
.ai-badge { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #845027; color: #faf6ee; flex: none; }
.ai-badge svg { width: 20px; height: 20px; }
.ai-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.ai-m { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.ai-m p { margin: 0 0 6px; } .ai-m p:last-child { margin: 0; }
.ai-m ul { margin: 2px 0 6px; padding-inline-start: 18px; }
.ai-m.me { margin-inline-start: auto; background: #172036; color: #faf6ee; border-end-end-radius: 4px; white-space: pre-wrap; }
.ai-m.it { margin-inline-end: auto; background: var(--paper-2); border-end-start-radius: 4px; }
.ai-m.err { background: var(--bad-bg); color: var(--bad); }
.ai-m.typing { display: flex; gap: 5px; padding: 12px 14px; }
.ai-m.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--stone); animation: finpulse 1s ease-in-out infinite; }
.ai-m.typing i:nth-child(2) { animation-delay: .15s; } .ai-m.typing i:nth-child(3) { animation-delay: .3s; }
.ai-hello { margin: auto 0; text-align: center; padding: 10px; }
.ai-hi { font-size: 20px; font-weight: 800; }
.ai-hello p { color: var(--stone); font-size: 14px; }
.ai-sugg { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin-top: 10px; }
.ai-sugg .chip { justify-content: center; white-space: normal; text-align: center; min-height: 40px; }
.ai-foot { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.ai-in { flex: 1; resize: none; border: 1px solid var(--line-2); border-radius: 20px; padding: 10px 14px; font: inherit; font-size: 15px; background: var(--white); color: var(--ink); max-height: 120px; }
.ai-send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #172036; color: #faf6ee; display: grid; place-items: center; cursor: pointer; flex: none; }
.ai-send:disabled { opacity: .45; }
.ai-foot .mic { position: relative; inset: auto; flex: none; width: 44px; height: 44px; }   /* .mic sits inside an input elsewhere (absolute) */
@media (min-width: 900px) {
  .ai-fab { inset-inline-end: 24px; bottom: 24px; }
  .ai-fab.lifted { bottom: 96px; }
  .ai-panel { inset-inline: auto 24px; bottom: 90px; width: 400px; height: min(620px, calc(100vh - 130px)); border-radius: 14px; }
}
@media print { .ai-fab, .ai-panel { display: none !important; } }

/* ------------------------------------------------------------------ the morning brief (js/screens/briefs.js) */
.br-card { padding: 0 !important; overflow: hidden; }
.br-stage { position: relative; background: #0d1220; aspect-ratio: 3 / 4; max-height: 62vh; width: 100%; margin: 0 auto; }
.br-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0d1220; }
.br-player .br-video { height: auto; max-height: 72vh; object-fit: contain; border-radius: 6px; }
.br-clock { position: absolute; top: 10px; inset-inline-start: 10px; background: rgba(13, 18, 32, .72); color: #faf6ee; padding: 4px 12px; border-radius: 20px; font-size: 14px;
  display: flex; align-items: center; gap: 6px; }
.br-stage.rec .br-clock::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #e0533f; animation: micpulse 1.2s ease-in-out infinite; }
.br-clock.late { background: #8f3324; }
.br-tip { position: absolute; bottom: 0; inset-inline: 0; background: linear-gradient(transparent, rgba(13, 18, 32, .88)); color: #faf6ee; padding: 34px 14px 12px; font-size: 13px; }
.br-guide { margin: 4px 0 0; padding-inline-start: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.br-stage.rec .br-tip { opacity: .8; }
.br-rec { min-height: 54px; font-size: 16px; }
.br-where { display: flex; gap: 6px; align-items: center; color: var(--stone); }
.br-where svg { width: 18px; height: 18px; flex: none; }
.br-where.ok { color: var(--ok); } .br-where.bad { color: var(--bad); }
.br-prog { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.br-prog i { display: block; height: 100%; width: 0; background: var(--bronze); transition: width .3s; }
.br-day { align-items: center; gap: 8px; }
.br-att { display: flex; flex-direction: column; gap: 8px; }
.br-att-n { display: flex; align-items: baseline; gap: 8px; }
.br-att-n b { font-size: 30px; }
.br-finger { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.br-finger > div { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.br-finger svg { width: 18px; height: 18px; flex: none; color: var(--bronze); }
.br-frames { display: flex; gap: 8px; }
.br-frame { flex: 1; aspect-ratio: 4 / 3; background: var(--paper-2) center / cover no-repeat; border: 1px solid var(--line); border-radius: 6px; padding: 0; cursor: zoom-in; }
.br-said { white-space: pre-wrap; margin: 0; color: var(--stone); }
.br-ul { margin: 0; padding-inline-start: 20px; }
.br-pin { width: 16px; height: 16px; color: var(--stone); flex: none; }
.br-miss { opacity: .78; }

/* ------------------------------------------------------------------ the AI daily report (js/screens/aidaily.js) */
.ad-k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ad-k > div { display: flex; flex-direction: column; }
.ad-k b { font-size: 22px; }
.ad-k span { font-size: 11.5px; color: var(--stone); }
.ad-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.ad-ph { position: relative; aspect-ratio: 1; border: 2px solid var(--line); border-radius: 6px; padding: 0; overflow: hidden; background: var(--paper-2); cursor: pointer; }
.ad-ph.on { border-color: var(--bronze); }
.ad-ph.static { cursor: default; }
.ad-ph i { position: absolute; top: 4px; inset-inline-end: 4px; background: #845027; color: #fff; border-radius: 50%; width: 22px; height: 22px; display: none; place-items: center; }
.ad-ph i svg { width: 14px; height: 14px; }
.ad-ph.on i { display: grid; } .ad-ph.static i { display: none; }
.ad-th { display: block; width: 100%; height: 100%; background: center / cover no-repeat; }
.ad-frame { width: 100%; height: 70vh; border: 0; background: #fff; }
@media (max-width: 480px) { .ad-k { grid-template-columns: repeat(2, 1fr); } .br-finger { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ AI settings (js/screens/aisettings.js) */
.ai-engs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.ai-eng { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ai-eng.ok { border-color: var(--ok); }
.ai-eng.ok .small { color: var(--ok); font-weight: 700; }

/* ------------------------------------------------------------------ writing help in the messages (js/chatkit.js) */
.ai-wbtn { flex: none; }

/* ------------------------------------------------------------------ leave (js/screens/leaves.js, 29 Oct 2026) */
.lv-bal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lv-bal > div { display: flex; flex-direction: column; }
.lv-bal b { font-size: 24px; }
.lv-bal span { font-size: 12px; color: var(--stone); }
.lv-row { flex-wrap: wrap; }
.seg-tabs small.hot { margin-inline-start: 6px; background: var(--bad); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; }
a.kcard { text-decoration: none; color: inherit; }

/* ------------------------------------------------------------------ a batch by payee (29 Oct 2026, js/screens/money.js batchScreen)
   Loaai: «ألاقي ملخص: المقاول كل الدفعة بتاعته كذا، على المشروع ده كذا والمواصلات كذا — تحت نفس المقاول». One card per
   payee: what he gets in large figures, his projects as rows, «pay all», and the per-project cards folded inside. */
.pay-top .pay-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px;
  border-top: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.pay-payee { margin-bottom: 14px; overflow: hidden; }
.pay-payee::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--bad); }
.pay-payee.partial::before { background: var(--warn); }
.pay-payee.paid::before { background: var(--ok); }
.pay-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; }
.pay-head .b { font-size: 16px; }
.pay-due { text-align: end; flex: none; }
.pay-due span { display: block; font-size: 11.5px; font-weight: 700; color: var(--stone); }
.pay-due b { display: block; font: 800 22px/1.15 var(--font-en); direction: ltr; unicode-bidi: isolate; color: var(--bad); }
.pay-payee.paid .pay-due b { color: var(--ok); }
.pay-due small { display: block; font-size: 11.5px; color: var(--stone); }
.pay-tbl { border-inline: 0; border-radius: 0; margin: 0; }
.pay-tbl .tbl { font-size: 13.5px; }
.pay-tbl .tbl td.b { font-weight: 800; }
.pay-tbl .tbl td.bad { color: var(--bad); }
.pay-acts { gap: 8px; padding: 12px 16px; }
.pay-more { border-top: 1px solid var(--line); }
.pay-more > summary { padding: 11px 16px; cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--stone); list-style: none; display: flex; align-items: center; gap: 8px; }
.pay-more > summary::-webkit-details-marker { display: none; }
.pay-more > summary::before { content: '›'; font-size: 18px; line-height: 1; transition: transform .2s; display: inline-block; }
html[dir='rtl'] .pay-more > summary::before { content: '‹'; }
.pay-more[open] > summary::before { transform: rotate(-90deg); }
.pay-more[open] { padding-bottom: 4px; background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
.pay-more > .card { margin: 0 12px 12px !important; }
.pay-proj .avatar.sq { border-radius: 8px; background: var(--paper-2); color: var(--navy); }
.pay-proj .avatar.sq svg { width: 20px; height: 20px; }
@media (max-width: 559px) { .pay-due b { font-size: 19px; } .pay-head { padding: 12px 14px 10px; } }
.pay-index { margin-bottom: 14px; }
.pay-index tbody tr { cursor: pointer; }
@media (hover: hover) { .pay-index tbody tr:hover td { background: color-mix(in srgb, var(--bronze-l) 8%, transparent); } }
.pay-index tr.paid td.b { color: var(--stone); }
.pay-payee { scroll-margin-top: 80px; }
@media (max-width: 559px) {
  .pay-index th:nth-child(2), .pay-index td:nth-child(2), .pay-index th:nth-child(3), .pay-index td:nth-child(3),
  .pay-index th:nth-child(5), .pay-index td:nth-child(5) { display: none; }
  .pay-tbl { overflow: visible; }
  .pay-tbl thead { display: none; }
  .pay-tbl .tbl, .pay-tbl tbody, .pay-tbl tfoot { display: block; }
  .pay-tbl tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .pay-tbl tfoot tr { background: var(--paper-2); }
  .pay-tbl .tbl td { display: block; border: 0; padding: 0; text-align: start; direction: inherit; white-space: normal; }
  .pay-tbl .tbl td:first-child { grid-column: 1 / -1; font-weight: 800; }
  .pay-tbl .tbl td:not(:first-child)::before { content: attr(data-l); display: block; font-size: 11px; font-weight: 700; color: var(--stone); }
  .pay-tbl .tbl tfoot td { border-top: 0; }
}