/* Smartops — operations UI.
   Dense, fast, keyboard-friendly. Reads like a control room, not a ledger. */

:root{
  /* The program's own default look. Every one of these may be replaced by
     what a company saves in Settings > Identity & colours — the screen writes
     over them at run time, so nothing here is anybody's identity. */
  --brand:#006c0d;
  --brand-dk:#00530a;
  --brand-lt:#e8f2e6;
  --accent:#fdc007;
  --bg:#f4f5f2;
  --panel:#ffffff;
  --panel-2:#fafbf8;
  --ink:#16201b;
  --ink-2:#41504a;
  --muted:#6d7a73;
  --line:#dfe3da;
  --line-2:#c9cfc2;
  --pos:#1f7a3d;
  --neg:#b3352c;
  --warn:#9a7508;
  --radius:6px;
  --shadow:0 1px 2px rgba(22,32,27,.05), 0 6px 18px -12px rgba(22,32,27,.3);
  --font:"Inter","Segoe UI",system-ui,sans-serif;
  --font-ar:"Cairo","Segoe UI",Tahoma,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
[data-theme="dark"]{
  --brand:#3ea34c; --brand-dk:#2f8a3c; --brand-lt:#16271a;
  --bg:#0e1311; --panel:#151c19; --panel-2:#1b2320;
  --ink:#e9ece7; --ink-2:#c2cbc5; --muted:#8d9a93;
  --line:#26302b; --line-2:#37423c;
  --pos:#5fc07c; --neg:#e0837a; --warn:#d4ad3f;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -12px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body[dir="rtl"]{font-family:var(--font-ar)}
button,input,select{font:inherit;color:inherit}
a{color:var(--brand);text-decoration:none}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:13px}
.hidden{display:none !important}

/* ── login ─────────────────────────────────────── */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(160deg,var(--brand-lt),var(--bg) 55%)}
.login-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:32px;box-shadow:var(--shadow)}
.login-card h1{margin:0 0 4px;font-size:22px;letter-spacing:-.01em}
.login-card .sub{color:var(--muted);font-size:13px;margin:0 0 24px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;font-weight:600;color:var(--ink-2)}
.field input,.field select{padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--panel);width:100%}
.field input:focus,.field select:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}

/* A button given `hidden` must actually be hidden. The rule below sets
   `display`, and any display beats the browser's own [hidden] rule — which is
   why a row's Save button appeared before anything on that row had changed. */
.btn[hidden]{display:none}

/* The company picker: one row per company, the group marked apart because it
   is not a company you work in — it is all of them at once. */
.pick-list{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.pick-co{display:flex;align-items:center;gap:12px;width:100%;text-align:start;
  padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--panel);cursor:pointer;font:inherit;color:var(--ink);transition:.15s ease}
.pick-co:hover{border-color:var(--brand);background:var(--panel-2)}
.pick-co:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pick-co .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--panel-2);font-size:17px;flex:0 0 auto}
.pick-co b{display:block;font-size:15px}
.pick-co small{color:var(--muted);font-size:11.5px}
.pick-co.group{border-style:dashed}
.co-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:99px;border:1px solid var(--line-2);background:var(--panel);
  color:var(--ink-2);cursor:pointer;white-space:nowrap}
.co-chip:hover{border-color:var(--brand);color:var(--brand)}
/* the governance strip: whose answer is being edited, the group's or one company's */
.co-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 16px;border-bottom:1px solid var(--line)}
.co-strip-l{color:var(--muted);font-size:12px;font-weight:600}
.co-diff{display:inline-block;margin-inline-start:6px;padding:1px 7px;border-radius:999px;
  background:var(--brand);color:#fff;font-size:10.5px;font-weight:700;vertical-align:middle}
tr.row-off td{opacity:.5}
tr.row-off td.name b,tr.row-off td.name{text-decoration:none}
.btn{padding:9px 16px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--panel);cursor:pointer;font-weight:500;display:inline-flex;
  align-items:center;gap:7px;white-space:nowrap;transition:background .12s,border-color .12s}
.btn:hover{background:var(--panel-2);border-color:var(--muted)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dk);border-color:var(--brand-dk)}
.btn-block{width:100%;justify-content:center;padding:11px}
.btn-sm{padding:5px 10px;font-size:12.5px}
.msg{padding:9px 12px;border-radius:var(--radius);font-size:13px;margin-bottom:14px}
.msg-err{background:#fdeceb;color:var(--neg);border:1px solid #f3c5c1}
[data-theme="dark"] .msg-err{background:#2b1614;border-color:#4a2320}

/* ── shell ─────────────────────────────────────── */
.topbar{
  height:56px;background:var(--panel);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 18px;position:sticky;top:0;z-index:50;
  flex:0 0 56px;
}
/* The top bar is furniture, like the side nav: it is laid out left-to-right in
   both languages so the brand, the pickers, the language button and Sign out
   never move when the language changes — only the page content flips. */
.topbar{direction:ltr}
.topbar .who{text-align:right}
body[dir="rtl"] .topbar .brand,body[dir="rtl"] .topbar .who,
body[dir="rtl"] .topbar .ctl label{direction:rtl}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.brand .dot{width:22px;height:22px;border-radius:5px;background:var(--brand);
  display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800}
/* the company's own word, when it has set one in Settings */
.brand .cotag{font-size:11px;font-weight:700;color:var(--muted);
  border-inline-start:1px solid var(--line-2);padding-inline-start:9px}
.topbar .spacer{flex:1}
.ctl{display:flex;align-items:center;gap:6px}
.ctl select{padding:6px 9px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--panel);max-width:200px}
.ctl label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.who{display:flex;flex-direction:column;line-height:1.25;text-align:end}
.who b{font-size:13px}.who span{font-size:11px;color:var(--muted)}

/* The frame is fixed: the top bar and the side nav stay put, and only the
   page scrolls. The nav sits on the LEFT in both languages — it is furniture,
   not text, so it should not jump when the language changes. */
.layout{display:grid;grid-template-columns:206px 1fr;height:calc(100vh - 56px);
  direction:ltr}
/* ═══════════════════════════════════════════════════════════════════════════
   THE LAYOUT DOES NOT MOVE WHEN THE LANGUAGE DOES

   Switching to Arabic used to mirror the whole page: the first column jumped
   from the left edge to the right, every table reversed, and a person who had
   learned where things are had to learn again. The owner asked for the
   opposite — the frame stays put and only the words change.

   So structure is pinned to LTR: the sidebar, the tables, the panels, the
   dialogs. Text is left to sort itself out with unicode-bidi: plaintext,
   which reads the first strong letter of each paragraph and lays THAT
   paragraph out accordingly. An Arabic sentence reads right to left inside
   its own box; the box does not move.
   ═══════════════════════════════════════════════════════════════════════════ */
.layout > main{direction:ltr}
body[dir="rtl"] .layout > main,body[dir="ltr"] .layout > main{direction:ltr}
/* every sentence picks its own direction, without dragging the layout with it */
td,th,.lbl,.name,.panel-note,.dim,label,legend,option,
.tile .k,.tile .d,.chip,small,.sub,h2,h3,h4{unicode-bidi:plaintext}
/* …except where a number or a code must stay in Latin order */
td.n,th.n,td.num,.mono,td.mono,code,.op,input[type="number"],input[type="date"]
{unicode-bidi:isolate;direction:ltr}
/* a dialog is frame, not prose: its fields keep their places in both languages */
#modalRoot,#modalRoot .modal,#modalRoot .modal-body,#modalRoot footer,
#modalRoot .modal-tabs,.topbar,.page-head{direction:ltr}
#modalRoot .modal-body p,#modalRoot .modal-body span,#modalRoot .modal-body div
{unicode-bidi:plaintext}
.side{background:var(--panel);border-right:1px solid var(--line);padding:14px 10px;
  display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden;
  height:100%;direction:ltr;scrollbar-width:thin}
body[dir="rtl"] .side{direction:ltr;text-align:start}
.side .nav > span,.side .grp > span{unicode-bidi:plaintext}
/* When the program was last changed. Quiet on purpose: it is there to be
   glanced at, not read — and it must never compete with a screen name. */
.stamp{color:var(--muted);font-size:10.5px;letter-spacing:.02em;text-align:center;
  unicode-bidi:plaintext;line-height:1.6}
.side-stamp{margin-top:auto;padding:12px 4px 2px;border-top:1px solid var(--line)}
.login-card .stamp{margin-top:14px}
.side::-webkit-scrollbar{width:7px}
.side::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
/* A group header is now a button: it folds its screens away so forty of them
   still fit down the side of a laptop without the sidebar scrolling. */
.side .grp{display:flex;align-items:center;gap:7px;width:100%;background:none;border:0;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  font-weight:700;padding:11px 10px 6px;cursor:pointer;text-align:start}
.side .grp:hover{color:var(--ink-2)}
.side .grp.here{color:var(--brand-dk)}
[data-theme="dark"] .side .grp.here{color:var(--brand)}
.side .grp .caret{display:inline-block;transition:transform .14s;font-size:13px;line-height:1}
.side .grp.open .caret{transform:rotate(90deg)}
[dir="rtl"] .side .grp .caret{transform:scaleX(-1)}
[dir="rtl"] .side .grp.open .caret{transform:rotate(90deg)}
.side .grp .gcount{margin-inline-start:auto;font-size:9.5px;opacity:.6;letter-spacing:0}
.side .grp + .nav{margin-top:1px}
.side .nav.folded{display:none}
.nav{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:var(--radius);
  cursor:pointer;color:var(--ink-2);font-size:13.5px;border:1px solid transparent;text-align:start}
.nav:hover{background:var(--panel-2)}
.nav.on{background:var(--brand-lt);color:var(--brand-dk);font-weight:600;border-color:transparent}
[data-theme="dark"] .nav.on{color:var(--brand)}
.nav .ic{width:16px;text-align:center;opacity:.8}
main{padding:0 22px 18px;overflow-y:auto;overflow-x:auto;min-width:0;height:100%}

/* the page title and its buttons stay in view while the table scrolls under it */
.page-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap;
  position:sticky;top:0;z-index:20;background:var(--bg);padding:20px 0 12px;
  box-shadow:0 6px 10px -10px rgba(0,0,0,.35)}
.page-head h2{margin:0;font-size:20px;letter-spacing:-.01em}
.page-head .sub{color:var(--muted);font-size:13px;margin:2px 0 0}
.page-head .spacer{flex:1}

/* ── tiles ─────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:20px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 15px;box-shadow:var(--shadow)}
.tile .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.tile .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:5px;letter-spacing:-.02em}
.tile .d{font-size:11.5px;margin-top:3px;color:var(--muted)}
.tile.good .v{color:var(--pos)} .tile.bad .v{color:var(--neg)} .tile.warn .v{color:var(--warn)}

/* ── panels & tables ───────────────────────────── */
/* clip, not hidden: hidden makes the panel a scroll container, and a sticky
   column heading then belongs to IT instead of to the page — so the heading
   scrolled away on every long sheet. clip keeps the rounded corner and is not
   a scroll container. */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:18px;overflow:clip}
.panel > header{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:12px;background:var(--panel-2)}
.panel > header h3{margin:0;font-size:14px;font-weight:600}
.panel > header .spacer{flex:1}
.panel > header .note{font-size:12px;color:var(--muted)}
/* The data table scrolls inside itself, the way a sheet scrolls inside its
   window — the page behind it stays put. max-height only bites when the table
   is taller than the room it has, so short tables are untouched. */
/* ═══════════ قاعدة عامة: الجدول يُفرد، والصفحة وحدها هي التي تنزل ═══════════

   Every table used to carry its own scroller, so reading a long sheet meant
   scrolling a box inside a page that itself scrolled — two movements for one
   act, and the page jumping under the hand. The owner's rule: spread the table
   on the page and let the page be the only thing that moves.

   Sideways is kept, because a sheet of thirty columns has to go somewhere; but
   it is only ever reached when the table genuinely cannot fit. */
.scroll{max-height:none;overflow:visible}
/* only a table that genuinely cannot fit gets a sideways scroll, and it is
   marked as such by the code that measured it — never by default */
.scroll.wide{overflow-x:auto;overflow-y:visible}
.scroll.capped{overflow:auto;max-height:calc(100vh - var(--tbl-top,250px))}

/* Borders on all four sides of every cell — horizontal AND vertical rules that
   stay put while the sheet scrolls, exactly like Excel gridlines. */
table{border-collapse:collapse;width:100%;font-size:13px}
thead th{position:sticky;top:var(--sticky-top,0);background:var(--panel-2);text-align:center;vertical-align:middle;
  padding:4px 8px;font-size:11.5px;font-weight:600;color:var(--ink-2);
  border:1px solid var(--line-2);white-space:nowrap;z-index:1}
tbody td{padding:3px 8px;border:1px solid var(--line);white-space:nowrap;
  text-align:center;vertical-align:middle}
tbody tr:hover{background:var(--panel-2)}
td.n,th.n{text-align:center;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12.5px}
tr.total{background:var(--panel-2);font-weight:700}
tr.total td{border-top:2px solid var(--line-2)}
tfoot td,tfoot th{border:1px solid var(--line-2)}
td.name{font-weight:500;max-width:260px;overflow:hidden;text-overflow:ellipsis;text-align:start}
td.name small{display:block;color:var(--muted);font-family:var(--mono);font-size:11px;font-weight:400}
.pos{color:var(--pos)} .neg{color:var(--neg)} .dim{color:var(--muted)}

.chip{display:inline-block;font-size:10.5px;padding:2px 7px;border-radius:99px;
  border:1px solid var(--line-2);color:var(--muted);background:var(--bg);white-space:nowrap}
.chip.count{border-color:var(--brand);color:var(--brand-dk);background:var(--brand-lt)}
.chip.ratio{border-color:var(--warn);color:var(--warn);background:transparent}
[data-theme="dark"] .chip.count{color:var(--brand)}

/* ── the cost ladder (Dashboard N5:Q13) ────────── */
.ladder{width:100%;font-size:13.5px}
.ladder td{padding:8px 16px;border-bottom:1px solid var(--line)}
.ladder .op{font-family:var(--mono);font-size:12px;color:var(--muted);width:38px}
.ladder .lbl{color:var(--ink-2)}
.ladder td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:center}
.ladder tr.sum{background:var(--panel-2);font-weight:700}
.ladder tr.sum td{border-top:1px solid var(--line-2);color:var(--ink)}
.ladder tr.grand{background:var(--brand-lt)}
[data-theme="dark"] .ladder tr.grand{background:#16271a}
.ladder tr.grand td{font-weight:700;font-size:14.5px}

/* ── misc ──────────────────────────────────────── */
.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty h4{margin:0 0 6px;font-size:15px;color:var(--ink-2)}
.empty p{margin:0 0 14px;font-size:13px}
.bar{height:5px;background:var(--line);border-radius:3px;overflow:hidden;min-width:60px}
.bar > i{display:block;height:100%;background:var(--brand)}
.bar > i.over{background:var(--neg)}
.toast{position:fixed;inset-block-end:20px;inset-inline-end:20px;background:var(--ink);color:var(--bg);
  padding:11px 16px;border-radius:var(--radius);font-size:13px;box-shadow:var(--shadow);z-index:200}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line-2);
  border-top-color:var(--brand);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .side{flex-direction:row;overflow-x:auto;border-inline-end:0;border-bottom:1px solid var(--line);padding:8px}
  /* no group headers to tap on a strip, so nothing is folded away here */
  .side .grp{display:none}
  .side .nav.folded{display:flex}
  .side .nav{white-space:nowrap;flex:0 0 auto}
  .topbar{flex-wrap:wrap;height:auto;padding:10px 14px;gap:10px}
  main{padding:0 12px 14px}
  .page-head{padding:12px 0 10px}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px}
  .tile .v{font-size:19px}
  /* the statement stays readable when the screen is narrower than the sheet */
  .ladder.pl td{padding:6px 9px;font-size:12.5px}
  .ladder.pl .op{width:30px;font-size:11px}
  .ladder.pl tr.plmemo td.lbl{padding-inline-start:16px}
  .orgnode{max-width:none}
  .orgtree ul{padding-inline-start:14px;margin-inline-start:8px}
  .two-col{grid-template-columns:1fr}
  table.rota th.stick,table.rota td.stick{min-width:120px}
}

/* ── branch picker ─────────────────────────────── */
.branch-picker{position:relative}
.branch-picker #btnBranches{min-width:150px;justify-content:space-between}
.dropdown{
  position:absolute;inset-block-start:calc(100% + 6px);inset-inline-start:0;z-index:80;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:8px;min-width:240px;max-height:340px;overflow:auto;
}
.dropdown .opt{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:4px;cursor:pointer;font-size:13.5px}
.dropdown .opt:hover{background:var(--panel-2)}
.dropdown .opt input{margin:0;accent-color:var(--brand)}
.dropdown .sep{height:1px;background:var(--line);margin:6px 2px}
.dropdown .region{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;padding:8px 9px 3px}

/* ── entry form ────────────────────────────────── */
.entry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:end}
.entry-grid .field{margin-bottom:0}
.suggest{position:relative}
.suggest-list{position:absolute;inset-block-start:calc(100% + 3px);inset-inline-start:0;right:0;z-index:70;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:var(--shadow);max-height:240px;overflow:auto}
.suggest-list div{padding:7px 11px;cursor:pointer;font-size:13px}
.suggest-list div:hover,.suggest-list div.on{background:var(--brand-lt)}
.suggest-list small{color:var(--muted);font-family:var(--mono);font-size:11px}

/* ── database browser ──────────────────────────── */
.db-layout{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:start}
.db-list{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);max-height:70vh;overflow-y:auto}
.db-list button{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;
  padding:8px 13px;border:0;border-bottom:1px solid var(--line);background:transparent;
  cursor:pointer;text-align:start;font-size:13px;font-family:var(--mono)}
.db-list button:hover{background:var(--panel-2)}
.db-list button.on{background:var(--brand-lt);color:var(--brand-dk);font-weight:600}
.db-list button b{font-weight:600}
.db-list button span{color:var(--muted);font-size:11.5px}
@media (max-width:860px){.db-layout{grid-template-columns:1fr}}

/* ── filter bar ────────────────────────────────── */
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 14px;box-shadow:var(--shadow)}
.filterbar .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;margin-inline-end:4px}
.filterbar input,.filterbar select{padding:6px 10px;border:1px solid var(--line-2);
  border-radius:var(--radius);background:var(--panel);font-size:13px}
.filterbar input:focus,.filterbar select:focus{outline:2px solid var(--brand);outline-offset:-1px}

/* invalid number input */
input.bad{border-color:var(--neg) !important;background:color-mix(in srgb,var(--neg) 7%,transparent)}

/* invoice line editor */
#pLines td{padding:5px 8px;vertical-align:middle}
#pLines input{padding:5px 8px;border:1px solid var(--line-2);border-radius:4px;background:var(--panel)}
#pLines input:focus{outline:2px solid var(--brand);outline-offset:-1px}
#pLines tfoot td{border-top:2px solid var(--line-2);font-weight:700;padding:9px 8px}
td.suggest{position:relative;overflow:visible}
td.suggest input.lItem{width:100%}

/* ── sub-tabs ──────────────────────────────────── */
.subtabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:5px;box-shadow:var(--shadow)}
.subtab{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border:0;
  background:transparent;border-radius:5px;cursor:pointer;font-size:13.5px;
  color:var(--ink-2);font-weight:500}
.subtab:hover{background:var(--panel-2)}
.subtab.on{background:var(--brand);color:#fff}
[data-theme="dark"] .subtab.on{color:#0e1311}
.nav-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;
  height:19px;padding:0 6px;border-radius:99px;font-size:11px;font-weight:700;
  background:var(--line);color:var(--ink-2);font-variant-numeric:tabular-nums}
.subtab.on .nav-count{background:rgba(255,255,255,.25);color:#fff}
[data-theme="dark"] .subtab.on .nav-count{background:rgba(0,0,0,.25);color:#0e1311}
.nav-count.amber{background:#f5e6c0;color:#7a5a08}
.nav-count.blue{background:#d9e5fb;color:#1c4a99}
.nav-count.green{background:var(--brand-lt);color:var(--brand-dk)}
[data-theme="dark"] .nav-count.amber{background:#3a2f12;color:var(--warn)}
[data-theme="dark"] .nav-count.blue{background:#16243a;color:#7aa9f0}
[data-theme="dark"] .nav-count.green{background:#16271a;color:var(--brand)}
.nav .nav-count{margin-inline-start:auto}

/* ── badges ────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:99px;white-space:nowrap;border:1px solid transparent}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-pending{background:#fdf3dc;color:#8a6a12;border-color:#ecd9a4}
.badge-approved{background:var(--brand-lt);color:var(--brand-dk);border-color:#bcd9b6}
.badge-rejected{background:#fbe6e4;color:var(--neg);border-color:#f0c6c1}
.badge-late{background:#fbe6e4;color:var(--neg);border-color:#f0c6c1}
.badge-out{background:#e6edfb;color:#1c4a99;border-color:#c8d8f5}
.badge-in{background:var(--brand-lt);color:var(--brand-dk);border-color:#bcd9b6}
.badge-neutral{background:var(--panel-2);color:var(--muted);border-color:var(--line-2)}
[data-theme="dark"] .badge-pending{background:#332a10;border-color:#4d3f18;color:var(--warn)}
[data-theme="dark"] .badge-approved,[data-theme="dark"] .badge-in{background:#16271a;border-color:#254a2c;color:var(--brand)}
[data-theme="dark"] .badge-rejected,[data-theme="dark"] .badge-late{background:#2b1614;border-color:#4a2320;color:var(--neg)}
[data-theme="dark"] .badge-out{background:#16243a;border-color:#25406b;color:#7aa9f0}

/* ── sync badge ────────────────────────────────── */
.sync-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:5px 11px;border-radius:99px;border:1px solid var(--line-2);color:var(--muted)}
.sync-badge.ok{color:var(--pos);border-color:#bcd9b6;background:var(--brand-lt)}
.sync-badge.error{color:var(--neg);border-color:#f0c6c1;background:#fbe6e4}
[data-theme="dark"] .sync-badge.ok{background:#16271a;border-color:#254a2c}
[data-theme="dark"] .sync-badge.error{background:#2b1614;border-color:#4a2320}

.expander{border:0;background:transparent;cursor:pointer;color:var(--muted);
  font-size:13px;padding:2px 5px;border-radius:4px}
.expander:hover{background:var(--line);color:var(--ink)}
.detail-row > td > table thead th{background:var(--bg)}

/* ── modal ─────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(10,16,13,.55);z-index:300;
  display:none;align-items:flex-start;justify-content:center;padding:40px 18px;overflow:auto}
.overlay.show{display:flex}
[data-theme="dark"] .overlay{background:rgba(0,0,0,.7)}
.modal{background:var(--panel);border:1px solid var(--line-2);border-radius:9px;
  width:100%;max-width:860px;box-shadow:0 24px 60px -20px rgba(0,0,0,.4);overflow:hidden}
.modal > header{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--line);background:var(--panel-2)}
.modal > header h3{margin:0;font-size:15px;display:flex;align-items:center;gap:9px;flex:1}
.modal-body{padding:18px;max-height:66vh;overflow:auto}
.modal > footer{display:flex;justify-content:flex-end;gap:9px;padding:13px 18px;
  border-top:1px solid var(--line);background:var(--panel-2)}
.btn-danger{background:var(--neg);border-color:var(--neg);color:#fff}
.btn-danger:hover{filter:brightness(.92);background:var(--neg);border-color:var(--neg)}

.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kv-grid > div{display:flex;flex-direction:column;gap:2px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:5px;padding:9px 12px}
.kv-grid span{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.kv-grid b{font-size:13.5px}
.note-line{margin:12px 0 0;font-size:13px;color:var(--ink-2)}
.note-line span{color:var(--muted);font-weight:600}
.decision-box{margin-top:16px;padding:14px;border:1px solid var(--brand);
  border-radius:var(--radius);background:var(--brand-lt)}
[data-theme="dark"] .decision-box{background:#16271a}
#tLines input{padding:5px 8px;border:1px solid var(--line-2);border-radius:4px;background:var(--panel)}
#tLines td{padding:5px 8px;vertical-align:middle}
#tLines tfoot td{border-top:2px solid var(--line-2);font-weight:700;padding:9px 8px}
.chips-pick{display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--line-2);
  border-radius:var(--radius);padding:9px;background:var(--panel-2)}
.chips-pick .opt{display:flex;align-items:center;gap:6px;font-size:12.5px;
  padding:4px 9px;border-radius:4px;cursor:pointer;background:var(--panel);
  border:1px solid var(--line)}
.chips-pick .opt:hover{border-color:var(--brand)}

/* ── governance matrix ─────────────────────────── */
.panel-note{margin:0;padding:10px 16px;font-size:12.5px;color:var(--muted);
  border-bottom:1px solid var(--line);background:var(--panel-2)}
/* ═══ المصفوفة: جدول واحد بمجموعات، ورأس مقروء بلا دوران ═══ */
.matrix table{min-width:0;width:100%;border-collapse:separate;border-spacing:0}

/* الرأس: كلام معدول يلتفّ على سطرين إن طال، بلون مميّز */
.matrix th.mxh{writing-mode:horizontal-tb;transform:none;height:auto;padding:7px 4px;
  white-space:normal;line-height:1.3;vertical-align:bottom;text-align:center;
  font-size:11px;font-weight:700;color:var(--brand-dk);
  background:var(--brand-lt);border-bottom:2px solid var(--brand)}
[data-theme=dark] .matrix th.mxh{color:var(--brand)}
.matrix th.mxh small{display:block;color:var(--muted);font-weight:400;font-size:9.5px}
.matrix th.mxh-off{color:var(--muted);background:var(--panel-2);border-bottom-color:var(--line-2)}
.matrix th.mxh-x{display:block;font-size:11px;color:var(--muted)}

/* شريط المجموعة: فاصل واضح بين كل قسم والذي يليه */
.matrix tr.mxband td{background:var(--panel-2);border-top:2px solid var(--brand);
  padding:7px 12px;text-align:start;position:sticky;
  inset-inline-start:0;z-index:1}
.matrix tr.mxband .mxb-t{font-weight:800;font-size:12.5px;color:var(--ink)}
.matrix tr.mxband .mxb-h{font-size:11px;color:var(--muted);margin-inline-start:10px}
.matrix tbody tr.mxband:first-child td{border-top:0}

.matrix .sticky-col{position:sticky;inset-inline-start:0;background:var(--brand-lt);z-index:2;
  min-width:210px;width:210px;color:var(--brand-dk);font-weight:700;
  border-bottom:2px solid var(--brand)}
.matrix tbody td.name{position:sticky;inset-inline-start:0;background:var(--panel);z-index:1}
.matrix tbody tr:hover td.name{background:var(--brand-lt)}
.matrix tbody tr:hover td.cell{background:color-mix(in srgb,var(--brand) 5%,transparent)}
.matrix td.cell{text-align:center;padding:0;border-inline-end:1px solid var(--line)}
.matrix input[type=checkbox]{accent-color:var(--brand);width:14px;height:14px;cursor:pointer;
  margin:3px}
.matrix tr.bulk th{padding:2px;text-align:center;background:var(--panel-2)}
.mini{border:1px solid var(--line-2);background:var(--panel);border-radius:3px;
  cursor:pointer;font-size:10px;padding:1px 5px;color:var(--muted)}
.mini:hover{border-color:var(--brand);color:var(--brand)}
tr.mod-row td{background:var(--brand-lt);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--brand-dk);padding:7px 12px}
[data-theme="dark"] tr.mod-row td{background:#16271a;color:var(--brand)}
/* a module's own row carries its name and its one switch, so it reads as a
   heading with a control rather than a label with a stray checkbox beside it */
tr.mod-row td b{font-size:13px;text-transform:none;letter-spacing:0}
tr.mod-row td small{font-weight:500;text-transform:none;letter-spacing:0;
  margin-inline-start:8px;font-size:11px}
tr.mod-row td.dim{text-transform:none;letter-spacing:0;font-weight:500}
tr.mod-row input[type=checkbox]{width:17px;height:17px;accent-color:var(--brand)}

/* ── attendance grid ───────────────────────────── */
.att-wrap{max-height:70vh}
table.att th,table.att td{padding:3px 4px;border:1px solid var(--line)}
table.att .sticky-col{position:sticky;inset-inline-start:0;background:var(--panel);z-index:2;min-width:190px}
table.att thead .sticky-col{background:var(--panel-2)}
table.att tbody tr:hover .sticky-col{background:var(--panel-2)}
td.day{text-align:center;min-width:46px;font-size:13px}
td.day select{border:0;background:transparent;width:30px;text-align:center;padding:0;cursor:pointer}
td.day input{border:0;background:transparent;width:32px;text-align:center;font-size:10.5px;
  padding:0;color:var(--muted);font-family:var(--mono)}
td.day i{display:block;font-size:9.5px;color:var(--muted);font-style:normal;font-family:var(--mono)}
td.d-w{background:#e7f6ec} td.d-r{background:#e8f0fe} td.d-a{background:#fde8e8}
td.d-s{background:#fef3c7} td.d-h{background:#f3e8ff} td.d-x{background:#ccfbf1}
[data-theme="dark"] td.d-w{background:#12291a} [data-theme="dark"] td.d-r{background:#141f33}
[data-theme="dark"] td.d-a{background:#2b1414} [data-theme="dark"] td.d-s{background:#2e2510}
[data-theme="dark"] td.d-h{background:#241a30} [data-theme="dark"] td.d-x{background:#102b28}

/* ── task cards ────────────────────────────────── */
.task-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.task-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 17px;box-shadow:var(--shadow)}
.task-card.done{opacity:.62}
.task-head{display:flex;align-items:center;gap:8px;font-size:11.5px;margin-bottom:9px;flex-wrap:wrap}
.task-head .spacer{flex:1}
.task-card h4{margin:0 0 6px;font-size:14.5px;font-family:var(--font)}
body[dir="rtl"] .task-card h4{font-family:var(--font-ar)}
.task-card p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.6}

/* the strip that appears above a form while one row is being edited, so it is
   never a surprise that Save will overwrite a record instead of adding one */
.editing-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:8px 12px;
  border:1px solid var(--line-2);border-inline-start:3px solid var(--warn);
  border-radius:var(--radius);background:var(--panel-2);font-size:13px;color:var(--ink-2)}
.editing-bar b{color:var(--ink);font-weight:600}
.editing-bar .btn{margin-inline-start:auto}

/* ═══ Payroll — the platform's own table, rebuilt ═══════════════════
   Group bands with their tints, a two-row head that folds, dense
   tabular numbers, and a totals row that reads as a rule, not a row. */
.payflt{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 10px;font-size:12px}
.payflt select,.payflt input{padding:6px 9px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--panel);color:var(--ink);font-size:11.5px}
.payflt input{width:130px}
.segbtns{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.segbtns button{border:0;padding:6px 13px;cursor:pointer;font-weight:700;font-size:11.5px;
  background:var(--panel);color:var(--ink);font-family:inherit}
.segbtns button+button{border-inline-start:1px solid var(--line-2)}
.segbtns button.on{background:var(--brand);color:#fff}
.payStatus{display:inline-flex;gap:6px}
.payStatus .chip{font-size:10.5px;padding:3px 9px;border-radius:20px;font-weight:700}
.payStatus .chip.closed{background:#fdeede;color:#9a3412;border:1px solid #f0c9a8}
.payStatus .chip.partial{background:#fff8e1;color:#8a6d1a;border:1px solid #e8d59a}

.paywrap .scroll{max-height:none}
table.paytbl{border-collapse:separate;border-spacing:0;font-size:11.5px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.paytbl th,table.paytbl td{padding:5px 8px;border-bottom:1px solid var(--line);
  text-align:center;vertical-align:middle;background:var(--panel)}
table.paytbl thead th{position:sticky;background:var(--panel-2);font-weight:700;
  font-size:10.5px;color:var(--ink-2);border-bottom:1px solid var(--line-2);cursor:help}
table.paytbl thead tr th{top:var(--sticky-top,0);z-index:3}
/* the group band, only when there really is one above the column names */
table.paytbl thead tr:first-child:not(:last-child) th{top:var(--sticky-top,0);z-index:4;text-align:center;
  padding:3px 6px;border-inline-end:2px solid var(--line-2);font-size:10.5px}
table.paytbl thead tr:last-child:not(:first-child) th{top:var(--head2,25px);z-index:3}
table.paytbl th[data-tint],table.paytbl td[data-tint]{background:var(--tint)}
table.paytbl .grpTog{cursor:pointer;user-select:none}
table.paytbl .grpTog:hover{filter:brightness(.96)}
.paytbl .fold{display:inline-flex;align-items:center;gap:4px;opacity:.85}
.paytbl td.name-cell{white-space:nowrap}
.paytbl .pyNm{cursor:pointer;color:var(--brand);font-weight:800}
.paytbl .pyNm:hover{text-decoration:underline}
.paytbl tbody tr:hover td{filter:brightness(.98)}
.paytbl tr.payTotal td{background:var(--panel-2);font-weight:900;color:var(--pos);
  border-top:2px solid var(--line-2);position:sticky;bottom:0;z-index:1}
.paytbl tr.payTotal td[data-tint]{background:var(--panel-2)}

/* the tints are chosen for a light ground — dampen them in dark mode
   so the bands still read as bands without glowing */
:root[data-theme="dark"] table.paytbl th[data-tint],
:root[data-theme="dark"] table.paytbl td[data-tint]{
  background:color-mix(in srgb,var(--tint) 14%,var(--panel))}

.btn.accent-blue{color:#1a56db;border-color:#1a56db}
.btn.accent-teal{color:#0f766e;border-color:#0f766e;font-weight:800}
.btn.accent-warn{color:var(--warn);border-color:var(--warn)}

/* column chooser */
.pcRow{display:flex;gap:8px;align-items:center;padding:5px 0;border-bottom:1px dashed var(--line)}
.pcRow span{flex:1;font-size:12px}
.pcRow small{color:var(--ink-2);font-size:10px;margin-inline-start:6px}

/* ── dialogs ────────────────────────────────────────────────────
   Every button that needs more room opens a real dialog, the way the
   platform does — centred, fixed, and living in its own root outside
   <main> so a page re-render can never wipe it out from under you. */
#modalRoot{position:relative;z-index:320}
#modalRoot .overlay{align-items:center}
#modalRoot .modal{display:flex;flex-direction:column;max-height:88vh}
#modalRoot .modal > header{flex:0 0 auto}
#modalRoot .modal > footer{flex:0 0 auto}
#modalRoot .modal-body{flex:1 1 auto;max-height:none;min-height:0}
.modal.modal-sm{max-width:460px}
.modal.modal-md{max-width:760px}
.modal.modal-lg{max-width:1080px}
.modal.modal-xl{max-width:min(1480px,96vw)}
.modal > header .sub{font-size:11.5px;color:var(--muted);font-weight:400}
.modal-body > .scroll{overflow:auto}
/* ── the live-demo bar ──────────────────────────────────────────────────────
   Loud on purpose. Somebody looking at invented numbers must never be able to
   mistake them for real ones, so this sits above everything, in a colour the
   program uses nowhere else, and it does not scroll away.

   The picker is the exception to the loudness: it is a control people READ, so
   it is plain dark text on white. It inherited the bar's pale colour at first
   and every name in it was a ghost. */
#demoBar{position:sticky;top:0;z-index:120;display:flex;align-items:center;gap:14px;
  padding:9px 18px;background:#4a2a6b;color:#fff;font-size:13px;
  box-shadow:0 2px 0 rgba(0,0,0,.28)}
#demoBar .dmTag{font-weight:800;letter-spacing:.4px;background:#ffd84d;color:#3a1f56;
  padding:3px 11px;border-radius:999px;font-size:12px;white-space:nowrap}
#demoBar .dmSay{opacity:.95;font-size:12.5px}
#demoBar .dmPick{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  white-space:nowrap}

/* the control itself — readable first, decorative never */
#demoBar select{
  min-width:430px;max-width:min(46vw,620px);
  padding:8px 12px;border-radius:9px;border:2px solid #ffd84d;
  background:#fff;color:#1c1230;
  font-size:13.5px;font-weight:600;font-family:inherit;
  cursor:pointer}
#demoBar select:focus{outline:3px solid #ffd84d;outline-offset:2px}
/* two controls now: the company narrows the list, the second picks the eyes,
   so the first is deliberately the smaller of the two */
#demoBar .dmCoSel{min-width:250px;max-width:min(24vw,340px)}
#demoBar select optgroup{color:#4a2a6b;font-weight:800;font-size:12.5px;
  background:#f4eefb}
#demoBar select option{color:#1c1230;background:#fff;font-weight:500;padding:4px 0}

#demoBar .btn{background:rgba(255,255,255,.18);color:#fff;
  border:1px solid rgba(255,255,255,.45);font-weight:600;white-space:nowrap}
#demoBar .btn:hover{background:rgba(255,255,255,.32)}

@media (max-width:1100px){
  #demoBar .dmSay{display:none}
  #demoBar select{min-width:260px}
}
@media print{#demoBar{display:none}}

/* ── an approval rule ──────────────────────────────────────────────────────
   The rule and the people it produces are one block, because a rule written in
   positions cannot be checked by reading it — only by seeing the names. */
.appr-rule{border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 14px;margin-bottom:11px;background:var(--panel)}
.appr-rule.warn{border-color:var(--warn)}
.appr-rule>header{display:flex;align-items:center;gap:7px;font-size:13px;margin-bottom:7px}
.appr-steps{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.rung{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;
  border:1px solid var(--line);border-radius:999px;background:var(--panel-2);font-size:12px}
.rung i{display:inline-grid;place-items:center;inline-size:17px;block-size:17px;
  border-radius:50%;background:var(--brand);color:#fff;font-style:normal;
  font-size:10.5px;font-weight:700}

/* ── the add-employee walk ─────────────────────────────────────────────────
   A step is a screen, so it says at the top what it is for. The number in
   front of each tab shows only while a person is being created: on an existing
   card the tabs are places to go, not stations to pass through. */
.step-note{margin:0 0 15px;padding:9px 13px;border-radius:var(--radius);
  background:var(--panel-2);border-inline-start:3px solid var(--brand);
  font-size:12.5px;line-height:1.75;color:var(--ink-2)}
.stepn{display:inline-grid;place-items:center;inline-size:17px;block-size:17px;
  margin-inline-end:6px;border-radius:50%;background:var(--line);color:var(--ink-2);
  font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
.modal-tabs button.on .stepn{background:var(--brand);color:#fff}
.panel-inline{margin-top:14px;padding:11px 14px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--panel-2);
  font-size:12.5px;line-height:1.75;color:var(--ink-2)}

.modal-tabs{display:flex;gap:4px;padding:0 18px;background:var(--panel-2);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.modal-tabs button{border:0;background:transparent;padding:9px 13px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.modal-tabs button.on{color:var(--brand);border-bottom-color:var(--brand)}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:9px}
.stat-card{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.stat-card .k{font-size:10.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.stat-card .v{font-size:17px;font-weight:900;margin-top:2px}
.stat-card .d{font-size:10px;color:var(--muted)}
.stat-card.act{cursor:pointer;transition:.15s}
.stat-card.act:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(0,0,0,.07)}

/* ── the staff register and the person card ─────────────────────── */
.emptbl td{padding:6px 9px}
.nmc{display:flex;align-items:center;gap:8px;cursor:pointer;justify-content:center}
.nmc:hover b{text-decoration:underline}
.nmc b{display:block;font-size:12.5px;white-space:nowrap}
.nmc .rl2{display:block;font-size:10px;font-weight:700}
.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:800;font-size:16px;background:var(--brand);flex:0 0 auto}
.avatar.sm{width:28px;height:28px;font-size:12.5px}
.doclink{color:var(--brand);font-weight:700;text-decoration:underline;cursor:pointer}
.chip.ok{border-color:var(--pos);color:var(--pos);background:transparent}
.chip.warn{border-color:#d97706;color:#d97706;background:transparent}
.chip.neg{border-color:var(--neg);color:var(--neg);background:transparent}
.doc-row{border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-bottom:12px;
  background:var(--panel-2)}
.doc-row h5{margin:0 0 9px;font-size:12px;color:var(--ink-2);font-weight:700}
.cu-block h5{margin:0 0 8px;font-size:12px;color:var(--ink-2);font-weight:700}
.chips-pick{display:flex;flex-wrap:wrap;gap:7px}
.chips-pick .opt{display:inline-flex;align-items:center;gap:5px;font-size:12px;
  border:1px solid var(--line-2);border-radius:20px;padding:4px 11px;cursor:pointer}
.chips-pick .opt:has(input:checked){border-color:var(--brand);color:var(--brand-dk);background:var(--brand-lt)}

/* statement */
.stmt-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.stmt-head b{font-size:15px;font-weight:900}
.stmt-head .dim{font-size:11.5px;margin-top:2px}
.stmt-h{margin:16px 0 7px;font-size:13px;display:flex;justify-content:space-between;align-items:center}
.explain{border:1px solid var(--line);border-radius:9px;padding:8px 12px;margin-bottom:14px;
  background:var(--panel-2)}
.explain summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--ink-2)}
.explain-body{font-size:12px;line-height:1.75;color:var(--ink-2);margin-top:8px}
.explain-body p{margin:0 0 6px}
.paytbl td.name-cell small{display:block;font-size:10px;color:var(--muted);
  font-family:var(--mono);font-weight:400;margin-top:1px}

/* ── HR dashboard: KPI tiles, bars and the saudization donut ────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.kpi .v{font-size:19px;font-weight:900;font-variant-numeric:tabular-nums}
.kpi .l{font-size:10.5px;color:var(--muted);margin-top:3px}
.chart-row{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-top:14px}
@media (max-width:900px){.chart-row{grid-template-columns:1fr}}
.bars{display:flex;flex-direction:column;gap:7px}
.bar-row{display:grid;grid-template-columns:minmax(90px,150px) 1fr auto;gap:10px;align-items:center}
.bar-row .bl{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-align:start}
.bar-row .bt{background:var(--panel-2);border-radius:5px;height:16px;overflow:hidden}
.bar-row .bt i{display:block;height:100%;border-radius:5px;transition:width .35s ease}
.bar-row .bv{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.donut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.donut-key div{display:flex;align-items:center;gap:7px;font-size:12px;margin:4px 0}
.donut-key i{width:11px;height:11px;border-radius:3px;display:inline-block}
.donut-key b{margin-inline-start:auto;font-variant-numeric:tabular-nums}
.pick-row{display:flex;gap:8px;align-items:center;font-size:12.5px;padding:4px 0;cursor:pointer}
.btn.hdDim.on{border-color:var(--brand);color:var(--brand-dk);font-weight:800}
table.att th.tot-h{font-size:9.5px;font-weight:800;white-space:nowrap;padding:4px 5px}
table.att td.tot-c{font-size:11.5px;padding:3px 5px}

/* ── attendance grid — the platform's own look ──────────────────── */
.attpanel .attlegend{display:flex;gap:9px;flex-wrap:wrap;font-size:10.5px;color:var(--ink-2)}
.attpanel .attlegend .lg{display:inline-flex;align-items:center;gap:4px}
.attpanel .attlegend i{font-style:normal;width:19px;height:19px;border-radius:5px;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px}
/* الحضور تحت نفس القاعدة: تُفرد على الصفحة ولا تحمل نافذة تمرير خاصة */
.att-wrap{max-height:none;overflow:visible}
/* Fixed columns, like a sheet.
   min-width:max-content used to size every day column to its dropdown's LONGEST
   option ("عمل في إجازة"), which doubled the table to 8112px, stretched the name
   column to soak up the surplus and threw the head out of line with the body.
   Fixed layout gives every day the same width, so head and body always agree. */
table.att{border-collapse:separate;border-spacing:0;width:max-content}
table.att th,table.att td{padding:3px 4px;border:1px solid var(--line);background:var(--panel)}
table.att thead th{position:sticky;top:var(--sticky-top,0);z-index:3;background:var(--panel-2);
  border-bottom:1px solid var(--line-2)}
table.att th.attday{min-width:106px;line-height:1.25}
table.att th.attday .wd{font-size:9.5px;color:var(--muted);font-weight:500}
table.att th.attday .dn{font-weight:900;font-size:12px}
table.att th.attday.fri{background:#fdf2e3}
table.att th.attday.fri .wd{color:#b45309}
table.att th.attday.today{background:#eaf7ee;box-shadow:inset 0 -3px 0 var(--brand)}
table.att .sticky-col{position:sticky;inset-inline-start:0;z-index:2;min-width:150px;
  background:var(--panel);text-align:start}
table.att thead .sticky-col{z-index:4;background:var(--panel-2)}
table.att td.attname{padding:2px 7px}
table.att td.attname .l1{display:flex;align-items:center;gap:5px}
table.att td.attname .atNm{font-weight:800;font-size:11.5px;color:var(--brand);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:145px}
table.att td.attname .atNm:hover{text-decoration:underline}
table.att td.attname .l2{font-size:9px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:160px}
table.att td.attcell{min-width:106px;padding:3px 4px}
table.att td.attcell.on{background:color-mix(in srgb,var(--cbg) 55%,var(--panel))}
table.att td.attcell select{padding:3px 2px;font-size:10.5px;border:1.5px solid var(--line-2);
  border-radius:7px;background:var(--panel);color:var(--ink);font-weight:700;font-family:inherit;
  text-align:center;max-width:100%}
table.att td.attcell .att-s{width:62px}
table.att td.attcell .att-h{width:40px;margin-inline-start:3px;font-weight:800}
table.att td.attcell .att-h.pos{color:var(--pos)} table.att td.attcell .att-h.neg{color:var(--neg)}
table.att td.attcell .attro{font-size:10.5px;font-weight:700;color:var(--cfg,var(--muted))}
table.att td.attcell .atth{font-style:normal;font-size:10px;font-weight:800;margin-inline-start:4px}
table.att td.attcell .atth.pos{color:var(--pos)} table.att td.attcell .atth.neg{color:var(--neg)}
table.att tr.attgrp td{background:var(--panel-2);border-top:2px solid var(--gc);color:var(--gc);
  font-size:10.5px;font-weight:900;text-align:start;padding:4px 9px;
  position:sticky;inset-inline-start:0}
table.att tr.attrow.g0 td{background:rgba(0,108,13,.055)}
table.att tr.attrow.g0 td.sticky-col{box-shadow:inset 3px 0 0 var(--brand)}
table.att tr.attrow.g2 td{background:rgba(120,120,120,.06)}
table.att tr.attrow.g0 td.attcell.on,table.att tr.attrow.g2 td.attcell.on{
  background:color-mix(in srgb,var(--cbg) 55%,var(--panel))}
table.att th.tot-h{font-size:9.5px;font-weight:800;white-space:nowrap;padding:4px 5px;min-width:52px}
table.att td.tot-c{font-size:11.5px;padding:3px 5px}
.btn.accent-purple{color:#7e22ce;border-color:#7e22ce;font-weight:700}
.btn.btn-dirty{box-shadow:0 0 0 3px rgba(217,119,6,.28)}
:root[data-theme="dark"] table.att th.attday.fri{background:#2a2113}
:root[data-theme="dark"] table.att th.attday.today{background:#16271a}

/* ── column alignment, driven by one saved setting per table ─────
   Head and body always share it, so a header can never drift off
   its own column. "start" follows the language; RTL puts it right. */
table[data-align="start"] th,table[data-align="start"] td{text-align:start}
table[data-align="center"] th,table[data-align="center"] td{text-align:center}
table[data-align="end"] th,table[data-align="end"] td{text-align:end}
/* the sticky name column and the group bands always read from the start edge */
table[data-align] .sticky-col,table[data-align] tr.attgrp td{text-align:start}
.align-pick{display:flex;align-items:center;gap:10px;padding:0 0 12px;margin-bottom:10px;
  border-bottom:1px solid var(--line)}
.align-pick label{font-size:12px;color:var(--ink-2);font-weight:600}
.align-pick .segbtns{margin-inline-start:auto}

/* ── buttons & actions matrix ───────────────────────────────────── */
.btnpanel header select{padding:6px 10px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--panel);color:var(--ink);font-size:12.5px;font-family:inherit}
.btncount{display:flex;gap:16px;font-size:12.5px;font-weight:800;margin-bottom:12px}
.btngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:9px}
.btncard{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12.5px}
.btncard .bh{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.btncard .bh input{width:16px;height:16px;accent-color:var(--brand);flex:0 0 auto}
.btncard.on{background:color-mix(in srgb,var(--pos) 9%,var(--panel));border-color:color-mix(in srgb,var(--pos) 30%,var(--line))}
.btncard.off{background:color-mix(in srgb,var(--neg) 7%,var(--panel));border-color:color-mix(in srgb,var(--neg) 26%,var(--line))}
.btncard.lock{background:var(--panel-2);cursor:default}
.btncard.lock .bh{cursor:default;color:var(--ink-2)}
.btncard .bw{font-size:11px;color:var(--ink-2);line-height:1.7;margin-top:6px}
.btncard .bw b{color:#9a3412}
.btnfoot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}

/* ── settings ───────────────────────────────────────────────────── */
.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}
.setrow{display:flex;align-items:center;gap:12px;padding:7px 0}
.setrow+.setrow{border-top:1px solid var(--line)}
.setrow label{font-size:12.5px;color:var(--ink-2);flex:1}
.setrow input[type=number],.setrow input[type=text],.setrow input:not([type]),.setrow select{
  width:130px;padding:7px 10px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--panel);color:var(--ink);text-align:center;font-family:inherit;font-size:12.5px}
.setrow input[type=color]{width:52px;height:30px;padding:2px;border:1px solid var(--line-2);
  border-radius:6px;background:var(--panel);cursor:pointer}
.switch{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch i{position:absolute;inset:0;background:var(--line-2);border-radius:99px;transition:.2s;cursor:pointer}
.switch i::before{content:'';position:absolute;width:18px;height:18px;inset-inline-start:3px;top:3px;
  background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + i{background:var(--brand)}
.switch input:checked + i::before{transform:translateX(20px)}
body[dir="rtl"] .switch input:checked + i::before{transform:translateX(-20px)}
.catrow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line)}
.catrow input[type=color]{width:40px;height:28px;padding:2px;border:1px solid var(--line-2);
  border-radius:6px;cursor:pointer}
.catrow .cName{flex:1;padding:6px 9px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--panel);color:var(--ink);font-family:inherit;font-size:12.5px}
.catrow .cDom{padding:6px 9px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--panel);color:var(--ink);font-family:inherit;font-size:12px}

/* ── the organisation chart ─────────────────────────────────────── */
#dpTbl input,#dpTbl select,#rdTbl select{padding:6px 9px;border:1px solid var(--line-2);
  border-radius:7px;background:var(--panel);color:var(--ink);font-family:inherit;font-size:12.5px;
  width:100%;min-width:120px}
#dpTbl td,#rdTbl td{padding:5px 8px}
.dpPreview{margin:0 18px 14px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--pos) 30%,var(--line));
  border-radius:10px;background:color-mix(in srgb,var(--pos) 7%,var(--panel));
  font-size:12px;line-height:1.9;text-align:start}
.dpPreview b{color:var(--pos)}

/* ── request-form designer ──────────────────────────────────────── */
.tpllist{display:flex;flex-direction:column}
.tplrow{display:flex;align-items:center;gap:12px;padding:9px 14px;
  border-bottom:1px dashed var(--line)}
.tplrow .tn{flex:0 0 210px;font-size:13px}
.tplrow .tr-route{flex:1;font-size:11.5px;color:var(--ink-2)}
/* whose form this is — a tag, not a control: inside a company the list is
   already that company's, so the tag only has to mark the shared ones */
.tplrow .tpl-tag{flex:0 0 auto;font-size:10.5px;font-weight:700;padding:2px 9px;
  border-radius:999px;background:var(--panel-2);color:var(--muted);
  border:1px solid var(--line)}
.tplrow .tpl-tag.own{background:var(--brand);color:#fff;border-color:transparent}
.tplrow.tpl-shared{opacity:.82}
.tplrow.tpl-shared .tn{font-weight:500}
.tplrow .tpMine{font-size:11px;padding:4px 9px}
.fldrow{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px dashed var(--line)}
.fldrow input,.fldrow select{padding:6px 9px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--panel);color:var(--ink);font-family:inherit;font-size:12.5px}
.fldrow .fk{width:110px;font-family:var(--mono)}
.fldrow .fl{flex:1;min-width:120px}
.fldrow .mini{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;
  color:var(--ink-2);white-space:nowrap}
.fldrow.rt .rrole{flex:1}

/* form designer: one card per field, so a field can be read as a whole thing
   and moved as a whole thing rather than hunted along a crowded row */
.fldcard{border:1px solid var(--line);border-radius:11px;padding:8px 9px;margin-bottom:7px;
  background:var(--card)}
.fldcard .fldtop{display:grid;gap:6px;align-items:center;
  grid-template-columns:minmax(110px,1fr) minmax(110px,1fr) 118px auto}
.fldcard .fldtop:has(.fr2){grid-template-columns:minmax(100px,1fr) minmax(100px,1fr) 112px 150px auto}
.fldcard .fldbot{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:7px}
.fldcard input,.fldcard select{padding:6px 9px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--panel);color:var(--ink);font-family:inherit;font-size:12.5px;min-width:0}
.fldcard .mini{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;
  color:var(--ink-2);white-space:nowrap}
.fldcard .fldmv{display:inline-flex;gap:2px}
.fldcard .fldmv button{border:1px solid var(--line-2);border-radius:6px;background:var(--panel);
  color:var(--ink-2);width:24px;height:24px;line-height:1;cursor:pointer;font-size:12px}
.fldcard .fldmv button:hover{border-color:var(--brand);color:var(--brand)}
.fldcard .fldmv .fRm:hover{border-color:var(--neg);color:var(--neg)}
.chkwrap{display:flex;flex-wrap:wrap;gap:9px 14px;padding:2px 0 4px}
.chkwrap .mini{display:inline-flex;align-items:center;gap:5px;font-size:12px;
  color:var(--ink-2);cursor:pointer}
.routechips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.routechips .chip b{cursor:pointer;color:var(--neg);margin-inline-start:3px}

/* the repayment schedule the approver sees before signing */
.planbox{border:1.5px solid var(--brand);border-radius:11px;overflow:hidden}
.planbox .planh{background:var(--brand-lt);color:var(--brand);
  padding:6px 10px;font-size:11.5px;font-weight:800;line-height:1.6}
.planbox .plans{max-height:180px;overflow:auto}
.planbox table{width:100%;font-size:11.5px;border-collapse:collapse}
.planbox th,.planbox td{padding:4px 9px;text-align:start;
  font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line)}
.planbox tbody tr:nth-child(even){background:var(--panel-2)}

/* the instalment plan, read at a glance: one chip per month, so whether a
   month is behind you or ahead of you is a matter of shape, not of reading */
.msched{display:inline-flex;gap:3px;align-items:stretch;flex-wrap:nowrap}
.msched .mch{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:52px;padding:3px 5px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel-2);font-style:normal;line-height:1.25}
.msched .mch u{text-decoration:none;font-size:9.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.msched .mch b{font-size:11.5px;font-variant-numeric:tabular-nums}
/* paid: struck through, and stepped back so the eye skips it */
.msched .mch.pd{opacity:.55;border-style:dashed}
.msched .mch.pd b{text-decoration:line-through;text-decoration-thickness:1px;color:var(--pos)}
.msched .mch.df{border-color:var(--warn);background:transparent}
.msched .mch.df b{color:var(--warn)}
.msched .mch.ms{border-color:var(--neg);background:transparent}
.msched .mch.ms b{color:var(--neg)}
/* the month the page is actually about */
.msched .mch.nw{border-color:var(--brand);border-width:1.5px;background:var(--brand-lt)}
.msched .mch.nw b{color:var(--brand);font-weight:800}
.msched .mdots{align-self:center;color:var(--muted);font-style:normal;font-size:13px;padding:0 1px}

/* a settled row is history: present, but not competing for attention */
tr.dimrow{opacity:.6}
tr.schPaid td{opacity:.6}
tr.schPaid td:nth-child(2) b{text-decoration:line-through;text-decoration-thickness:1px}

/* the buttons on a ledger row carry words, not just glyphs — the one that
   moves money should never be a symbol somebody has to guess at */
.lgtbl td .btn.btn-sm{padding:3px 7px;font-size:11.5px}
.lgtbl .name-cell{min-width:150px}

/* ── WHOSE ROW IS THIS? ────────────────────────────────────────────
   The payroll runs to forty columns. Scroll five of them sideways and the
   numbers stop belonging to anybody — you are reading a row of figures with
   no idea whose salary it is. So the name travels with them: it holds its
   place at the edge while everything else moves past, exactly as it already
   does on the attendance sheet. */
table.paytbl td.name-cell,
table.paytbl thead th:nth-child(2),
table.lgtbl td.name-cell,
table.lgtbl thead tr:last-child th:first-child{
  position:sticky;inset-inline-start:0;z-index:2;
  min-width:190px;max-width:230px}
/* the frozen header cell must sit above the headers that slide past it, and
   those are already sticky at z-index 3 — so it needs its own, higher layer */
table.paytbl thead tr th:nth-child(2),
table.paytbl thead tr:last-child th:nth-child(2),
table.lgtbl thead tr:last-child th:first-child{z-index:8;background:var(--panel-2)}
table.paytbl td.name-cell,
table.lgtbl td.name-cell{background:var(--panel)}
/* the shadow only appears once there is something scrolled underneath it */
table.paytbl td.name-cell::after,
table.lgtbl td.name-cell::after,
table.paytbl thead th:nth-child(2)::after{
  content:'';position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:1px;
  background:var(--line-2)}
/* a striped or highlighted row keeps its colour under the frozen cell, or the
   name would sit on a pale square while its own row is tinted */
table.paytbl tbody tr:nth-child(even) td.name-cell{background:var(--panel-2)}
table.lgtbl tbody tr.dimrow td.name-cell{background:var(--panel-2)}
.paytbl tfoot td.name-cell,.paytbl tr.payTotal td:nth-child(2){
  position:sticky;inset-inline-start:0;z-index:3;background:var(--panel-2)}

/* a zero is noise in a table this wide — the eye should land on the numbers
   that actually happened */
.paytbl td.z0,.lgtbl td.z0{color:var(--line-2)}

/* ── ADVANCE ACTIONS ──────────────────────────────────────────────
   The same row of buttons wherever an advance appears, and every one of them
   says what it does. An icon alone is a guess; the word underneath is the
   difference between "press it and find out" and knowing. */
.advacts{display:flex;gap:5px;flex-wrap:wrap;align-items:stretch}
.advacts .advBtn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;min-width:52px;padding:4px 6px;line-height:1.15}
.advacts .advBtn .ai{font-size:13px}
.advacts .advBtn .al{font-size:9.5px;font-weight:600;white-space:nowrap;letter-spacing:.1px}
.advacts .advBtn.advTake{border-color:var(--brand);color:var(--brand)}
.advacts .advBtn.advDefer{border-color:var(--warn);color:var(--warn)}

/* the two timetables sit side by side: one is paper, one is live */
td.schcell{padding:5px 7px}
.msched.agreed .mch.ag{border-style:dotted;opacity:.75;background:transparent}
.msched.agreed .mch.ag b{font-weight:600;color:var(--ink-2)}
.msched.live{cursor:pointer;border-radius:9px;padding:2px;transition:background .12s}
.msched.live:hover{background:var(--brand-lt)}
.msched .marr{font-style:normal;font-size:17px;line-height:1;color:var(--muted);cursor:pointer;
  padding:0 3px;align-self:center;user-select:none}
.msched .marr:hover{color:var(--brand)}
.msched .medit{font-style:normal;font-size:12px;color:var(--muted);cursor:pointer;
  align-self:center;padding:0 3px;opacity:.5}
.msched:hover .medit{opacity:1;color:var(--brand)}

/* one button, and behind it the choices — each saying what it will do */
.advOneRow{margin-top:10px}
.advMenu{display:flex;flex-direction:column;gap:6px}
.advMenuItem{display:flex;align-items:flex-start;gap:10px;text-align:start;width:100%;
  padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
  color:var(--ink);cursor:pointer;font-family:inherit;transition:border-color .12s,background .12s}
.advMenuItem:hover{border-color:var(--brand);background:var(--brand-lt)}
.advMenuItem .mi{font-size:17px;line-height:1.3}
.advMenuItem b{display:block;font-size:13px}
.advMenuItem small{display:block;font-size:11px;color:var(--muted);margin-top:1px;line-height:1.5}
.advMenuItem.miUntake:hover{border-color:var(--neg);background:transparent}
.advMenuItem.miDefer:hover{border-color:var(--warn);background:transparent}

/* ── THE COMPANY TREE ─────────────────────────────────────────────
   Indented rows rather than boxes-and-lines: a real company runs six levels
   deep and forty branches wide, and a drawn chart of that is a poster nobody
   can read on a screen. Indentation scales; connectors do not. */
/* ── THE ORGANISATION CHART ───────────────────────────────────────
   Top to bottom, each layer spread beneath the one that answers for it.
   The connectors are drawn with borders rather than lines or SVG, so the
   chart survives any depth, any width, and both text directions without
   anything being measured in JavaScript. */
.orgchart{display:inline-block;min-width:100%;padding:4px 0 14px}
.orgchart ul{list-style:none;margin:0;padding:26px 0 0;display:flex;justify-content:center;gap:14px}
.orgchart > ul{padding-top:0}
.ocell{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 7px}

/* the stalk down from a parent, and the rail that joins its children */
.orgchart ul .ocell::before,
.orgchart ul .ocell::after{content:'';position:absolute;top:0;height:26px;
  border-top:1.5px solid var(--line-2);width:50%}
.orgchart ul .ocell::before{inset-inline-end:50%;border-inline-end:1.5px solid var(--line-2)}
.orgchart ul .ocell::after{inset-inline-start:50%}
/* an only child needs the stalk but no rail; the ends need no outer corner */
.orgchart ul .ocell:only-child::before,
.orgchart ul .ocell:only-child::after{width:0;inset-inline-end:50%;border-top:0}
.orgchart ul .ocell:only-child::before{border-inline-end:1.5px solid var(--line-2)}
.orgchart ul .ocell:first-child::before{border-top-color:transparent}
.orgchart ul .ocell:last-child::after{border-top:0}
/* and the stalk hanging out of a node that has children */
.ocell:has(> ul)::after{content:''}
.orgchart ul:not(:empty){position:relative}

.ocard{position:relative;width:186px;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:8px 10px 9px;box-shadow:var(--shadow);
  transition:border-color .12s,transform .12s}
.ocard:hover{border-color:var(--line-2);transform:translateY(-1px)}
.ocard.sel{border-color:var(--brand)}
/* who is in this box — shown on rest, placed from the card's own rectangle so
   the chart's own side-scrolling frame can never cut it off */
.org-peek{position:fixed;z-index:80;min-width:236px;max-width:320px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:11px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.34);padding:9px 0 5px;
  pointer-events:none;font-size:12.5px}
.org-peek .pk-h{padding:0 12px 8px;margin-bottom:5px;border-bottom:1px solid var(--line);
  font-weight:700;display:flex;align-items:center;gap:8px}
.org-peek .pk-l{max-height:280px;overflow:auto}
.org-peek .pk-r{display:flex;align-items:baseline;gap:7px;padding:4px 12px;text-align:start}
.org-peek .pk-r b{font-weight:600}
.org-peek .pk-r small{color:var(--muted);font-size:11px;margin-inline-start:auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.org-peek .pk-hd{background:var(--brand);color:#fff;border-radius:999px;
  padding:1px 7px;font-size:10px;font-weight:700}
.ocard.kco{border-top:3px solid var(--brand)}
.ocard.kad{border-top:3px solid #7c3aa6}
.ocard.kre{border-top:3px solid #b45309}
.ocard.kbr{border-top:3px solid #0369a1}
.ocard .ochd{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.ocard .oico{font-size:13px}
.ocard .okind{font-size:9.5px;color:var(--muted);letter-spacing:.2px}
.ocard .ocnt{font-size:11px;font-weight:800;color:var(--ink-2);
  background:var(--panel-2);border-radius:20px;padding:1px 7px;font-variant-numeric:tabular-nums}
.ocard .onm{font-size:13px;font-weight:800;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ocard .ohd{display:flex;align-items:center;gap:6px;margin-top:6px;min-height:26px}
.ocard .ohd .hav{width:24px;height:24px;border-radius:50%;background:var(--brand-lt);
  color:var(--brand);display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:11px;font-weight:800;flex:none}
.ocard .ohd b{display:block;font-size:11.5px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
.ocard .ohd small{display:block;font-size:9.5px;color:var(--muted)}
.ocard .ohd .dim{font-size:10.5px}
.ocard .oppl{position:absolute;top:7px;inset-inline-start:9px;font-size:9.5px;color:var(--muted)}
.ocard .oact{display:flex;gap:3px;margin-top:7px;opacity:0;transition:opacity .12s}
.ocard:hover .oact{opacity:1}
.ocard .oact .btn{padding:1px 6px;font-size:11px;min-height:auto;flex:1}
/* the collapse handle sits on the stalk leaving the card */
.ocard .otog{position:absolute;bottom:-11px;inset-inline-start:50%;transform:translateX(50%);
  border:1px solid var(--line-2);background:var(--panel);color:var(--muted);
  border-radius:20px;font-size:9.5px;padding:1px 7px;cursor:pointer;z-index:2;line-height:1.5}
.ocard .otog:hover{border-color:var(--brand);color:var(--brand)}
[dir="ltr"] .ocard .otog{transform:translateX(-50%)}

/* one select per level of the company, wrapping when the levels run deep */

@media(max-width:820px){
  .ocard{width:150px}
  .ocard .ohd small,.ocard .okind{display:none}
}
.chips-pick .opt.locked{opacity:.55;cursor:not-allowed;border-style:dashed}
.chips-pick .opt.locked .lk{font-size:11px}

/* ── statement, quick file, settlement, board ───────────────────── */
.stat-card.act{cursor:pointer;transition:.15s}
.stat-card.act:hover{border-color:var(--hov);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.stat-card .k .go{color:var(--hov);font-weight:900}
.stmt-head .stNm{cursor:pointer;color:var(--brand)}
.stmt-head .stNm:hover{text-decoration:underline}
.stbtns{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.swprev{font-size:13px;font-weight:800;color:var(--brand);margin-top:10px;min-height:19px}
.segbtns .swM,.segbtns .amS{border:0;padding:6px 13px;cursor:pointer;font-weight:700;
  font-size:11.5px;background:var(--panel);color:var(--ink);font-family:inherit}
.segbtns .swM.on,.segbtns .amS.on{background:var(--brand);color:#fff}
tr.lsgap td{background:color-mix(in srgb,#0f766e 8%,var(--panel));color:#0f766e;
  font-size:11.5px;font-weight:700;text-align:start}
.qpbox{border-radius:12px;padding:11px 13px;margin-bottom:12px;border:1.5px solid}
.qpbox.earn{background:color-mix(in srgb,var(--pos) 8%,var(--panel));
  border-color:color-mix(in srgb,var(--pos) 32%,var(--line))}
.qpbox.deduct{background:color-mix(in srgb,#b45309 8%,var(--panel));
  border-color:color-mix(in srgb,#b45309 30%,var(--line))}
.qpbox .qph{font-weight:900;font-size:13px;margin-bottom:8px}
.qpbox.earn .qph{color:var(--pos)} .qpbox.deduct .qph{color:#b45309}
.qpbox .qph small{font-size:10px;color:var(--muted);font-weight:400}
.qprow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.qprow select,.qprow input{padding:6px 9px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--panel);color:var(--ink);font-family:inherit;font-size:12.5px}
.qprow .mini{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ink-2)}
tr.gone td{opacity:.55;text-decoration:line-through}
tr.gone td:last-child{text-decoration:none}
.salnote{background:color-mix(in srgb,#1a56db 9%,var(--panel));
  border:1px solid color-mix(in srgb,#1a56db 28%,var(--line));border-radius:9px;
  padding:7px 11px;font-size:11.5px;color:#1a56db;font-weight:700;margin-bottom:9px}
.salchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.salChip{border:1.5px solid var(--line-2);background:var(--panel);color:var(--sc,var(--ink));
  border-radius:20px;padding:5px 12px;font-size:11px;font-weight:800;cursor:pointer;font-family:inherit}
.salChip.on{border-color:var(--sc);background:var(--sb)}
.salChip.clear{color:var(--ink-2)}
.salsum{background:color-mix(in srgb,var(--pos) 10%,var(--panel));border:1.5px solid var(--pos);
  border-radius:10px;padding:9px 12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.salsum b{color:var(--pos);font-size:12.5px}
.salsum .mini{display:inline-flex;align-items:center;gap:5px;font-size:11.5px}
.board{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));gap:9px;overflow-x:auto}
.bcol{border:1px solid var(--line);border-radius:10px;background:var(--panel-2);
  display:flex;flex-direction:column;min-width:190px}
.bcol > header{padding:8px 10px;font-size:11.5px;font-weight:900;color:var(--sc);
  background:var(--sb);border-radius:9px 9px 0 0;display:flex;align-items:center;gap:6px}
.bcol > header .n{margin-inline-start:auto;background:var(--panel);border-radius:20px;
  padding:1px 8px;font-size:11px}
.bcol .bbody{padding:7px;display:flex;flex-direction:column;gap:7px;max-height:46vh;overflow:auto}
.bcard{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 10px;
  font-size:12px;text-align:start}
.bcard.mine{box-shadow:inset 3px 0 0 var(--brand)}
.bcard b{font-size:12.5px;display:block}
.bcard .dim{font-size:10.5px;margin-top:2px}
.bcard .nextr{font-size:10.5px;color:#1a56db;font-weight:800;margin-top:4px}
.bcard .bact{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
:root[data-theme="dark"] .qpbox.earn,:root[data-theme="dark"] .qpbox.deduct{border-width:1px}

/* ═══ Frame, dialogs and tables — the rules that hold everywhere ═══ */

/* the app fills the window and never scrolls as a whole */
#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
#app.hidden{display:none}

/* ── dialogs: one size, decided when they open, and they keep it ── */
#modalRoot .overlay{align-items:center;padding:3vh 2vw}
#modalRoot .modal{display:flex;flex-direction:column;
  height:min(92vh,var(--dlg-h,900px));max-height:92vh}
#modalRoot .modal.modal-sm{--dlg-h:520px}
#modalRoot .modal.modal-md{--dlg-h:660px}
#modalRoot .modal.modal-lg{--dlg-h:800px}
#modalRoot .modal.modal-xl{--dlg-h:920px}
#modalRoot .modal > header,#modalRoot .modal > footer{flex:0 0 auto}
#modalRoot .modal .modal-tabs{flex:0 0 auto}
#modalRoot .modal-body{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden}
/* a dialog's own tables scroll inside it and keep their heads in view */
#modalRoot .modal-body .scroll{max-height:none}
#modalRoot .modal-body table thead th{position:sticky;top:0;z-index:3}
#modalRoot .modal > footer{flex-wrap:wrap;row-gap:8px}
#modalRoot .modal > footer .spacer{flex:1}
@media (max-width:820px){
  #modalRoot .overlay{padding:0}
  #modalRoot .modal{height:100vh;max-height:100vh;max-width:100vw;border-radius:0}
}

/* ── table heads stay while the body scrolls ── */
/* a panel does not cap its table either — the page is the only scroller */
.panel .scroll{max-height:none;overflow:visible}
.panel .scroll table thead th{position:sticky;top:var(--sticky-top,0);z-index:3}
.panel .scroll table.paytbl thead tr th{top:var(--sticky-top,0);z-index:3}
.panel .scroll table.paytbl thead tr:first-child:not(:last-child) th{top:var(--sticky-top,0);z-index:4}
.panel .scroll table.paytbl thead tr:last-child:not(:first-child) th{top:var(--head2,25px);z-index:3}
.panel .scroll table.att thead th{top:var(--sticky-top,0)}

/* ── the name column reads from the start edge, as a name should ── */
td.name,td.name-cell,td.attname,.nmc{text-align:start !important}
td.name small,td.name-cell small{display:block;text-align:start}
.nmc{justify-content:flex-start}
table[data-align] .name,table[data-align] .name-cell{text-align:start !important}

/* the folded group column stays narrow, and its Σ never wraps */
table.paytbl th .fold{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
table.paytbl thead th{white-space:nowrap}
/* a column keeps its width whatever is folded, so nothing shifts under the cursor */
table.paytbl{table-layout:auto}
table.paytbl th,table.paytbl td{min-width:62px}
table.paytbl th.name,table.paytbl td.name-cell{min-width:170px;max-width:230px}
.leave-ask .modal{height:auto !important}

/* ── requests: section rules, the stepper, the timeline ─────────── */
.page-sub{margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.page-sub h3{margin:0;font-size:14.5px;display:flex;align-items:center;gap:8px}
.page-sub.hot h3{color:#b45309}
.steps{display:flex;align-items:center;margin:6px 0 16px}
.steps .step{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto;
  font-size:10.5px;text-align:center;min-width:74px}
.steps .steprail{flex:1;height:2px;background:var(--line);min-width:16px}
.tl{border-inline-start:3px solid var(--pos);padding:7px 11px;margin-bottom:7px;
  background:var(--panel-2);border-radius:8px;text-align:start}
.tl.no{border-inline-start-color:var(--neg)}
.msg{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:7px 11px;margin-bottom:6px;font-size:12.5px;text-align:start}
.lnk{cursor:pointer;color:var(--brand);font-size:12px;font-weight:700}

/* ── one look for every table head ──────────────────────────────
   Opaque, with a rule under it and hairlines between the cells, so a
   header can never be read as data and the row beneath it can never
   bleed through while scrolling. */
.panel .scroll table thead th,#modalRoot .modal-body table thead th{
  background:var(--panel-2);
  box-shadow:inset 0 -1px 0 var(--line-2), inset -1px 0 0 var(--line);
  border-bottom:0}
.panel .scroll table thead th:first-child,
#modalRoot .modal-body table thead th:first-child{box-shadow:inset 0 -1px 0 var(--line-2)}
/* the group band keeps its own tint and its heavier divider */
table.paytbl thead tr:first-child:not(:last-child) th[data-tint]{background:var(--tint)}
table.paytbl thead th{padding:6px 8px;line-height:1.35}
table.paytbl thead tr:last-child th{font-size:10.5px;font-weight:800}
/* a sticky head sits above the sticky first column, never under it */
table .sticky-col{z-index:2}
table thead .sticky-col{z-index:5}

/* ── signature pad ──────────────────────────────────────────────── */
.sigpad{border:1.5px dashed var(--line-2);border-radius:9px;background:var(--panel);
  position:relative;min-height:96px;display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.sigpad.has{border-style:solid;border-color:var(--brand)}
.sigpad canvas{width:100%;height:96px;cursor:crosshair;touch-action:none;display:block}
.sigpad img{max-height:96px;max-width:100%}
.sigpad.empty{color:var(--muted);font-size:12px}
.sigpad .sighint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:12px;pointer-events:none}
.sigpad.has .sighint{display:none}
.sigpad .sigClear{position:absolute;inset-inline-end:6px;top:6px;padding:2px 8px;font-size:10.5px}
.sigrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.sigrow{grid-template-columns:1fr}}
.sigcol{display:flex;flex-direction:column;gap:6px}
.sigcol label{font-size:12px;font-weight:700;color:var(--ink-2)}
.sigcol .dim{font-size:11px}

/* ── the signed sheet ───────────────────────────────────────────── */
.docgrid{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:12px}
table.docdays{width:100%;border-collapse:collapse}
table.docdays td{border:1px solid var(--line);padding:5px 3px;text-align:center;width:12.5%}
table.docdays td.on{background:color-mix(in srgb,var(--cbg) 55%,var(--panel))}
table.docdays .dn{font-size:10px;color:var(--muted);font-weight:700}
table.docdays .ds{font-size:15px;line-height:1.2}
table.docdays .dh{font-size:10px;font-weight:800}
.tcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:7px}
.tcard{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:7px 9px;text-align:center}
.tcard span{display:block;font-size:9.5px;color:var(--muted)}
.tcard b{font-size:14px;font-variant-numeric:tabular-nums}
.iconbtn{border:0;background:transparent;cursor:pointer;font-size:13px;padding:0 3px;
  line-height:1;opacity:.7}
.iconbtn:hover{opacity:1}

/* ── final settlement ───────────────────────────────────────────── */
table.finaltbl th{width:190px;text-align:start;background:var(--panel-2)}
table.finaltbl tr.total th,table.finaltbl tr.total td{background:var(--brand-lt);
  border-top:2px solid var(--line-2)}

/* ── food safety ────────────────────────────────────────────────── */
.fsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:14px}
.fscard{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px;display:flex;flex-direction:column;gap:9px}
.fscard.bad{border-color:color-mix(in srgb,var(--neg) 45%,var(--line));
  background:color-mix(in srgb,var(--neg) 5%,var(--panel))}
.fscard .fsh{display:flex;align-items:center;gap:9px}
.fscard .fsh .ic{font-size:21px}
.fscard .fsh b{font-size:13.5px}
.fscard .fschips{display:flex;gap:6px;flex-wrap:wrap}
.fscard .fsact{display:flex;gap:7px;margin-top:auto}
.fscard .fsact .btn{flex:1}
.fsedit{border:1px solid var(--line);border-radius:9px;margin-bottom:9px;background:var(--panel-2)}
.fsedit > summary{display:flex;gap:7px;align-items:center;padding:9px 11px;cursor:pointer;
  list-style:none}
.fsedit > summary::-webkit-details-marker{display:none}
.fsedit .sName{flex:1}
.fsedit summary input{padding:5px 8px;border:1px solid var(--line-2);border-radius:6px;
  background:var(--panel);color:var(--ink);font-family:inherit;font-size:12.5px}
.fsedit .mini{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-2)}
.fsfields{padding:0 11px 11px}

/* ── request path: attachments, stage data, signed decisions ── */
.attlist{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.attchip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;
  border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:12px}
.attchip a{color:var(--accent);text-decoration:none;font-weight:600}
.attchip a:hover{text-decoration:underline}
.attchip .attX{border:0;background:none;color:var(--muted);cursor:pointer;
  font-size:12px;line-height:1;padding:0 1px}
.attchip .attX:hover{color:var(--neg)}

.stagebox{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:12px;
  background:var(--card)}
.stagebox.live{background:rgba(253,192,7,.07);border-color:#f0c650}
.stagebox .stageh{font-weight:800;font-size:12.5px;margin-bottom:8px;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.stagebox .entry-grid,.stagebox .kv-grid{margin:0}

.tl .tlsig{height:26px;margin-top:4px;display:block;
  pointer-events:none;user-select:none;filter:var(--sigfilter,none)}
:root:not([data-theme="light"]) .tl .tlsig{--sigfilter:invert(1) hue-rotate(180deg)}
:root[data-theme="dark"] .tl .tlsig{--sigfilter:invert(1) hue-rotate(180deg)}
:root[data-theme="light"] .tl .tlsig{--sigfilter:none}

.chkline{display:flex;gap:7px;align-items:center;font-size:12.5px;cursor:pointer;margin-bottom:10px}

/* A head of more than one row: each row sits below the ones above it. The
   offset is measured after paint (stickyHeads in core.js) because a rotated
   or wrapped label makes the first row any height it likes. Every selector
   that pins a head at 0 needs its own second-row counterpart, or the more
   specific one wins and the rows stack on top of each other. */
table thead tr th{position:sticky;top:var(--sticky-top,0);z-index:3;background:var(--head-bg,var(--panel-2))}
table thead tr:not(:first-child) th,
thead tr:not(:first-child) th,
.panel .scroll table thead tr:not(:first-child) th,
.panel .scroll table.paytbl thead tr:not(:first-child) th,
.panel .scroll table.att thead tr:not(:first-child) th,
#modalRoot .modal-body table thead tr:not(:first-child) th,
table.att thead tr:not(:first-child) th,
table.paytbl thead tr:not(:first-child) th{
  /* the second heading row sits under the first, and both under the page title */
  top:calc(var(--sticky-top,0px) + var(--head2,0px));z-index:2}
/* and the first row always outranks the rows beneath it */
table thead tr:first-child:not(:last-child) th,
.panel .scroll table thead tr:first-child:not(:last-child) th{z-index:4}

/* ── attendance cells read as sheet cells, not form controls ── */
table.att td.attcell select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  text-align:center;text-align-last:center;cursor:pointer;
  background-image:none}
table.att td.attcell select:focus{outline:2px solid var(--brand);outline-offset:-2px}
table.att td.attcell select:disabled{opacity:1;cursor:default}
/* an empty day is quiet: no frame at all until it carries a value */
table.att td.attcell .att-s:not(.set){border-color:var(--line);color:var(--muted);
  background:transparent;font-weight:600}
table.att td.attcell .att-h{border-color:var(--line);background:transparent}

/* ── the employee card: read-only boxes, one fact each ── */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:8px}
.cardgrid.wide{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.cardbox{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:7px 10px}
.cardbox .k{font-size:10px;color:var(--muted)}
.cardbox .v{font-size:13px;font-weight:700;line-height:1.35}

/* ═══════════════════════════════════════════════════════════════════════
   THE SHEET LOOK
   Tables are read the way a spreadsheet is read: a gridline on every side of
   every cell, in one colour, firm enough to follow across a wide table and
   quiet enough not to shout. One variable sets it for the whole program.
   ═══════════════════════════════════════════════════════════════════════ */
:root{--grid:#c9cec4;--grid-2:#9aa294}
:root:not([data-theme="light"]){--grid:#3a4038;--grid-2:#59614f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--grid:#3a4038;--grid-2:#59614f}}
:root[data-theme="dark"]{--grid:#3a4038;--grid-2:#59614f}
:root[data-theme="light"]{--grid:#c9cec4;--grid-2:#9aa294}

table thead th{border:1px solid var(--grid-2)}
table tbody td{border:1px solid var(--grid)}
table tfoot th,table tfoot td{border:1px solid var(--grid-2)}
table.att th,table.att td{border:1px solid var(--grid)}
table.att thead th{border:1px solid var(--grid-2)}
table.paytbl th,table.paytbl td{border:1px solid var(--grid)}
table.paytbl thead th{border:1px solid var(--grid-2)}

/* the sheet's own frame */
.scroll > table{border:1px solid var(--grid-2)}

/* Inside a cell the value is the value — the control does not draw a second
   box around it and compete with the gridline. */
table.att td.attcell select{border-width:1px;border-radius:5px}
table.att td.attcell .att-s:not(.set){border-color:transparent}
table.att td.attcell .att-h{border-color:transparent;color:var(--muted)}
table.att td.attcell .att-h:focus{border-color:var(--line-2)}

/* one width per kind of column, declared once and obeyed by every row */
table.att th.attday,table.att td.attcell{width:114px;min-width:114px;max-width:114px}
table.att th.tot-h,table.att td.tot-c{width:64px;min-width:64px;max-width:64px}
table.att .sticky-col{width:190px;min-width:190px;max-width:190px}
table.att td.attcell select{width:100%;max-width:100%;text-overflow:ellipsis}
table.att td.attcell{overflow:hidden}
table.att td.attcell > *{max-width:100%}
table.att td.attname .l1,table.att td.attname .l2{overflow:hidden;text-overflow:ellipsis}

/* the amount said out loud on a voucher, so digits cannot be altered alone */
.moneywords{background:rgba(0,108,13,.06);border:1.5px solid var(--brand);
  border-radius:10px;padding:8px 12px;margin-top:10px;font-weight:800;font-size:12.5px}
table.vctbl td,table.vctbl th{font-size:11.5px;padding:4px 7px}

/* the list of what is waiting on you */
.notifrow{display:flex;align-items:center;gap:11px;padding:9px 12px;
  border:1px solid var(--line);border-radius:10px;margin-bottom:7px;background:var(--bg)}
.notifrow.hot{border-color:var(--neg);background:rgba(220,38,38,.05)}
.notifrow .ic{font-size:18px;flex:none}
#topBell.hot{border-color:var(--neg);color:var(--neg);font-weight:800}

/* ── choosing which form to raise: a tile per form, as on the platform ── */
.tplgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:10px}
.tplPick{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 12px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;
  font-family:inherit;color:var(--ink);transition:border-color .12s,transform .12s}
.tplPick:hover{border-color:var(--brand);transform:translateY(-2px)}
.tplPick .ic{font-size:28px;line-height:1}
.tplPick b{font-size:12.5px;text-align:center;line-height:1.35}

.secttl{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:7px}
table.dynrows td{padding:4px}
table.dynrows input{width:100%;min-width:92px}

/* ── writing and sitting a quiz ── */
.qbox{border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:10px;
  background:var(--bg)}
.qbox .qhead{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:12.5px}
.qopts{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.qopt{display:flex;align-items:center;gap:8px}
.qopt input[type="text"],.qopt .qOpt{flex:1}
.qopt.read{padding:7px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);cursor:pointer}
.qopt.read:hover{border-color:var(--brand)}

/* the sync indicator: quiet when all is well, loud only when it is not */
.syncbox{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:7px;font-size:13px;color:var(--pos);background:transparent;cursor:default;
  border:1px solid transparent}
.syncbox.busy{color:var(--muted);animation:spin 1s linear infinite}
.syncbox.off{color:var(--neg);border-color:var(--neg)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── making the program yours: fields, names, groups, logos ── */
.segbtns .cfTab{padding:7px 13px;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:12.5px;color:var(--ink-2)}
.segbtns .cfTab.on{background:var(--brand);color:#fff;font-weight:700}
.rcbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:5px;
  padding:9px 4px}
.rgbox{border:1px solid var(--line);border-radius:11px;padding:10px;margin-bottom:9px}
.lgprev{height:32px;border:1px solid var(--line);border-radius:6px;padding:2px;background:#fff}
details.rcrole summary{cursor:pointer;padding:6px 0;display:flex;align-items:center;gap:8px}

/* ── who saw it: names, not percentages ── */
.namechips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.namechip{display:inline-flex;flex-direction:column;padding:5px 11px;border-radius:9px;
  font-size:12px;font-weight:600;border:1px solid var(--line)}
.namechip i{font-style:normal;font-size:10px;opacity:.7;font-weight:400}
.namechip.ok{background:rgba(22,163,74,.12);border-color:#16a34a}
.namechip.warn{background:rgba(253,192,7,.16);border-color:#d97706}
.namechip.neg{background:rgba(194,65,12,.12);border-color:var(--neg)}

/* ── asking about an instruction ── */
.inqbox{max-height:44vh;overflow:auto;border:1px solid var(--line);border-radius:11px;
  padding:10px;background:var(--bg);margin-bottom:10px}
.inqrow{display:flex;align-items:flex-start;gap:6px;margin-bottom:9px}
.inqrow.mine{flex-direction:row-reverse}
.inqrow .bub{max-width:82%;background:var(--card);border:1px solid var(--line);
  border-radius:11px;padding:8px 11px}
.inqrow.mine .bub{background:rgba(0,108,13,.09)}
.inqrow .who{font-size:10.5px;color:var(--muted);margin-bottom:3px}
.inqrow .txt{font-size:13.5px;line-height:1.55}

/* ── the branch device ── */
#kioskOverlay{position:fixed;inset:0;z-index:90;display:flex;align-items:center;
  justify-content:center;padding:22px;background:linear-gradient(160deg,#7a1f1f,#b91c1c)}
#kioskOverlay.ok{background:linear-gradient(160deg,#0f8a3e,#16a34a)}
#kioskOverlay .kbox{background:#fff;border-radius:20px;max-width:640px;width:100%;
  padding:30px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
#kioskOverlay .ktag{font-size:13px;font-weight:900;color:#b91c1c;letter-spacing:3px;
  margin-bottom:12px}
#kioskOverlay h2{font-size:24px;margin:0 0 12px;color:#111}
#kioskOverlay p{font-size:16px;color:#444;line-height:1.7;margin:0 0 22px}
#kioskOverlay .kack{font-size:18px;padding:14px 30px;width:100%}
#kioskOverlay .kdone{text-align:center;color:#fff}
#kioskOverlay .kdone .tick{font-size:96px;line-height:1;font-weight:900}
#kioskOverlay .kdone div:last-child{font-size:22px;font-weight:900;margin-top:6px}
.kiosklist{display:grid;gap:14px}
.kcard{border:2px solid var(--line);border-radius:16px;padding:20px;background:var(--card)}
.kcard.p-Urgent{border-color:#b91c1c;background:rgba(185,28,28,.05)}
.kcard.p-Critical{border-color:#d97706;background:rgba(217,119,6,.05)}
.kcard .kpri{font-size:11px;font-weight:900;letter-spacing:2px;color:var(--muted);
  margin-bottom:7px}
.kcard.p-Urgent .kpri{color:#b91c1c}
.kcard h3{font-size:21px;margin:0 0 9px}
.kcard p{font-size:15px;line-height:1.7;color:var(--ink-2);margin:0 0 16px}
.kcard .kdo{font-size:16px;padding:12px 26px;width:100%}
.kioskempty{text-align:center;padding:70px 20px;color:var(--muted)}
.kioskempty .big{font-size:76px;color:var(--pos);line-height:1}
#topBell.ringing{animation:bellshake .5s ease-in-out infinite}
@keyframes bellshake{0%,100%{transform:rotate(0)}25%{transform:rotate(12deg)}75%{transform:rotate(-12deg)}}

/* ── attaching a document ── */
.docctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.doc-row{border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:10px;
  background:var(--bg)}
.doc-row h5{margin:0 0 8px;font-size:12.5px;font-weight:800;color:var(--ink-2)}

/* ── looking at one ── */
.docview{background:#1c1c1c;border-radius:11px;min-height:56vh;max-height:66vh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.docview .dvimg{max-width:100%;max-height:64vh;transition:transform .12s ease-out;
  transform-origin:center;user-select:none;-webkit-user-drag:none}
.docview .dvpdf{width:100%;height:64vh;border:0;background:#fff}
.docview .dvnone{color:#bbb;text-align:center;padding:50px}
.docview .dvnone .ic{font-size:58px;margin-bottom:10px}

/* ── a pile at once ── */
.dropzone{border:2px dashed var(--line-2);border-radius:14px;padding:26px;text-align:center;
  cursor:pointer;transition:border-color .12s,background .12s;background:var(--bg)}
.dropzone:hover,.dropzone.over{border-color:var(--brand);background:rgba(0,108,13,.05)}
.dropzone .ic{font-size:34px;line-height:1;margin-bottom:8px;color:var(--brand)}
table.bdtbl td,table.bdtbl th{padding:6px 9px;font-size:12.5px}
table.bdtbl tr.done{opacity:.55}
.bdthumb{width:34px;height:34px;object-fit:cover;border-radius:6px;border:1px solid var(--line);
  vertical-align:middle;margin-inline-end:7px}

/* ═══════════════════════════════════════════════════════════════════════════
   THE OPERATIONAL P&L
   The sheet is read top to bottom, so the eye needs help finding the shape of
   it: section titles, breathing room between blocks, and a visible signal that
   a line can be opened.
   ═══════════════════════════════════════════════════════════════════════════ */
.ladder.pl td{padding:6px 16px}
.ladder.pl tr.plgap td{border:0;height:12px;padding:0}
.ladder.pl td.plhead{border-bottom:1px solid var(--line-2);padding:12px 16px 6px;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.ladder.pl tr.plmemo td{color:var(--muted);font-size:12.5px}
.ladder.pl tr.plmemo td.lbl{padding-inline-start:30px}
.ladder.pl tr.plopen{cursor:pointer}
.ladder.pl tr.plopen:hover{background:var(--panel-2)}
.ladder.pl tr.plopen:hover .plarrow{opacity:1;transform:translateX(2px)}
.plarrow{opacity:0;margin-inline-start:7px;color:var(--brand);font-weight:800;
  transition:opacity .12s,transform .12s;display:inline-block}
[dir="rtl"] .plarrow{transform:scaleX(-1)}
[dir="rtl"] .ladder.pl tr.plopen:hover .plarrow{transform:scaleX(-1) translateX(2px)}
.plwhy{display:inline-grid;place-items:center;width:14px;height:14px;margin-inline-start:6px;
  border:1px solid var(--line-2);border-radius:50%;font-size:9px;color:var(--muted);
  cursor:help;vertical-align:middle;font-weight:700}
.plwhy:hover{border-color:var(--brand);color:var(--brand)}

/* ═══════════════════════════════════════════════════════════════════════════
   THE ORG CHART
   An indented tree, not a box diagram: ten branches of staff will not fit
   across a page, and a list that indents is still a hierarchy.
   ═══════════════════════════════════════════════════════════════════════════ */
.orgtree,.orgtree ul{list-style:none;margin:0;padding:0}
.orgtree ul{padding-inline-start:26px;border-inline-start:1px solid var(--line-2);
  margin-inline-start:16px;margin-top:4px}
.orgtree li{margin:4px 0;position:relative}
.orgnode{display:flex;align-items:center;gap:10px;padding:7px 11px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);max-width:520px;cursor:pointer}
.orgnode:hover{border-color:var(--brand)}
.orgnode.dimmed{opacity:.55}
.orgav{width:28px;height:28px;border-radius:50%;background:var(--brand-lt);color:var(--brand-dk);
  display:grid;place-items:center;font-weight:800;font-size:12px;flex:0 0 auto}
[data-theme="dark"] .orgav{color:var(--brand)}
.orgtxt{display:flex;flex-direction:column;line-height:1.32;min-width:0;flex:1}
.orgtxt b{font-size:13px}
.orgtxt span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═══════════════════════════════════════════════════════════════════════════
   THE ROTA
   Thirty-one narrow columns, each carrying two things: what was planned above,
   and what actually happened below it. The name column stays put while the
   month scrolls past.
   ═══════════════════════════════════════════════════════════════════════════ */
table.rota{width:max-content;min-width:100%}
table.rota th,table.rota td{padding:2px 3px;text-align:center;font-size:11.5px}
table.rota th.stick,table.rota td.stick{position:sticky;inset-inline-start:0;z-index:3;
  background:var(--panel);text-align:start;min-width:168px;padding:5px 10px}
table.rota thead th.stick{z-index:5}
table.rota th.we{background:var(--panel-2)}
table.rota td.we{background:color-mix(in srgb,var(--panel-2) 60%,transparent)}
table.rota td.rc{padding:1px 2px;min-width:40px}
table.rota select.rcell{width:100%;min-width:38px;padding:1px 2px;font-size:10.5px;
  border:1px solid var(--line);border-radius:5px;background:var(--panel);text-align:center}
table.rota i.am{display:block;font-style:normal;font-size:9.5px;font-weight:800;
  color:var(--muted);line-height:1.5}
table.rota i.am.ok{color:var(--pos)}
table.rota i.am.bad{color:var(--neg)}
table.rota i.am.warn{color:var(--warn)}

/* two panels side by side where the screen allows, stacked where it does not */
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.frow{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:10px}
.frow label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted)}
.frow input,.frow select{font-size:13px}
.mono,td.mono{font-family:var(--mono);font-size:11.5px}

/* ═══════════════════════════════════════════════════════════════════════════
   READING THE BANK FILE BEFORE SENDING IT
   The whole point of this view is that nothing is hidden: the text wraps
   rather than scrolling off the side, and every position can be named.
   ═══════════════════════════════════════════════════════════════════════════ */
.fvtabs{display:flex;align-items:center;gap:6px;padding:11px 16px;
  border-bottom:1px solid var(--line);background:var(--panel-2)}
.fvtabs .spacer{flex:1}
.fraw{padding:12px 14px;direction:ltr}
.fline{display:flex;gap:10px;align-items:flex-start;padding:5px 0;
  border-bottom:1px solid var(--line)}
.fline:last-child{border-bottom:0}
.fline > i{flex:0 0 auto;min-width:34px;text-align:end;font-style:normal;
  font-family:var(--mono);font-size:10.5px;color:var(--muted);padding-top:2px}
.fline > code{font-family:var(--mono);font-size:11.5px;line-height:1.75;
  word-break:break-all;white-space:pre-wrap;color:var(--ink-2);flex:1}
.fline:first-child > code{color:var(--brand-dk);font-weight:500}
[data-theme="dark"] .fline:first-child > code{color:var(--brand)}
table.fpos{width:100%}
table.fpos td,table.fpos th{padding:5px 14px;font-size:12.5px}
table.fpos tr.dim td{color:var(--muted)}
table.fpos td.mono{font-family:var(--mono);font-size:12px}
tr.warnrow{background:var(--warn-lt,rgba(253,192,7,.10))}
.btn.disabled{opacity:.45;pointer-events:auto;cursor:not-allowed}

/* ═══════════════════════════════════════════════════════════════════════════
   A PERMISSION THAT CANNOT BE GRANTED
   Greyed rather than hidden, because the reader needs to see that the row
   exists and that somebody decided it does not apply here. Resting on it says
   why; clicking it offers to undo the thing that is blocking it.
   ═══════════════════════════════════════════════════════════════════════════ */
td.cell.locked-cell{cursor:help;text-align:center;background:
  repeating-linear-gradient(45deg,transparent,transparent 4px,var(--panel-2) 4px,var(--panel-2) 8px)}
td.cell.locked-cell .lk{opacity:.5;font-size:11px}
td.cell.locked-cell:hover{background:var(--panel-2)}
td.cell.locked-cell:hover .lk{opacity:1}
.matrix td.cell.locked-cell{padding:0}

/* ═══════════════════════════════════════════════════════════════════════════
   THE SHEET
   A spreadsheet, not a form: every cell open, a changed cell marked and staying
   marked, the first column pinned so a name is never lost while scrolling
   thirty columns sideways.
   ═══════════════════════════════════════════════════════════════════════════ */
.gridwrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden}
.gridbar{display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--panel-2);flex-wrap:wrap}
.gridbar .spacer{flex:1}
.gridbar .gcount{font-size:12px;color:var(--muted)}
.gridbar .gdirty{font-size:12px;color:var(--warn);font-weight:700}
.gridscroll{max-height:none;overflow-x:auto}
table.gridtbl{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0}
table.gridtbl th{position:sticky;top:var(--sticky-top,0);z-index:3;background:var(--panel-2);
  font-size:11.5px;font-weight:700;color:var(--muted);padding:7px 8px;white-space:nowrap;
  border-bottom:1px solid var(--line-2);border-inline-end:1px solid var(--line);text-align:start}
table.gridtbl td{padding:0;border-bottom:1px solid var(--line);
  border-inline-end:1px solid var(--line)}
table.gridtbl th.gnum,table.gridtbl td.gnum{position:sticky;inset-inline-start:0;z-index:4;
  background:var(--panel-2);min-width:44px;text-align:center;font-family:var(--mono);
  font-size:11px;color:var(--muted);padding:6px 4px}
table.gridtbl thead th.gnum{z-index:6}
table.gridtbl td.gact,table.gridtbl th.gact{padding:3px 6px;white-space:nowrap;
  position:sticky;inset-inline-end:0;background:var(--panel);z-index:2}
table.gridtbl tbody tr:hover td{background:var(--panel-2)}
table.gridtbl tbody tr:hover td.gnum{background:var(--line)}

.gcell{width:100%;min-width:70px;border:0;background:transparent;color:var(--ink);
  font:inherit;font-size:12.5px;padding:6px 8px;outline:0}
.gcell:focus{background:var(--brand-lt);box-shadow:inset 0 0 0 2px var(--brand)}
.gcell[data-changed="1"]{background:color-mix(in srgb,var(--warn) 16%,transparent);font-weight:600}
.gcell:disabled{background:repeating-linear-gradient(45deg,transparent,transparent 4px,
  var(--panel-2) 4px,var(--panel-2) 8px);color:var(--muted);cursor:not-allowed}
.gcell.gchk{width:auto;min-width:0;margin:6px 10px}
td.gblocked{opacity:.75}
tr.gnew td{background:color-mix(in srgb,var(--brand) 7%,transparent)}
tr.gnew td.gnum{background:var(--brand-lt);color:var(--brand-dk);font-weight:800}
.gnewdot{margin-inline-start:3px;font-weight:800}
tr.gerr td{background:color-mix(in srgb,var(--neg) 12%,transparent)}
tr.gerr td.gnum{background:var(--neg);color:#fff;font-weight:800}
.gridfoot{padding:9px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
/* a disabled field on a card, greyed where it stands rather than removed */
.field.blocked > label,label.blocked{opacity:.6}
@media (max-width:860px){
  .gridscroll{max-height:none}
  table.gridtbl th.gnum,table.gridtbl td.gnum{min-width:34px}
}
/* a value already on file that contradicts the role rule: flagged, never wiped */
td.gclash{box-shadow:inset 0 0 0 2px var(--warn)}
td.gclash .gcell{color:var(--warn);font-weight:700}

/* ═══════════════════════════════════════════════════════════════════════════
   ONE WAY OF WRITING A PERSON'S NAME
   The attendance sheet, the payroll and the employee register each had their
   own. Three shapes for the same thing is three chances to look at a row and
   not be sure it is the same person.
   ═══════════════════════════════════════════════════════════════════════════ */
.pcell{display:flex;align-items:center;gap:8px;min-width:0;text-align:start}
.pcell.empopen,.pcell.atNm,.pcell.pyNm{cursor:pointer}
.pcell.empopen:hover .pcname b,.pcell.atNm:hover .pcname b,
.pcell.pyNm:hover .pcname b{color:var(--brand-dk);text-decoration:underline}
[data-theme="dark"] .pcell.empopen:hover .pcname b{color:var(--brand)}
.pcell .avatar.sm{width:26px;height:26px;font-size:11.5px;flex:0 0 auto;
  display:grid;place-items:center;border-radius:50%;color:#fff;font-weight:800}
.pcname{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.pcname b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcname small{font-size:10.5px;color:var(--muted);font-family:var(--mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
td.attname .pcell{gap:6px}
td.attname .iconbtn{margin-inline-end:4px}

/* the compact ordering control — one select, one arrow, wherever people are listed */
.sortbar{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line-2);
  border-radius:8px;overflow:hidden;background:var(--panel)}
.sortbar select{border:0;background:transparent;font-size:12px;padding:5px 8px;
  color:var(--ink-2);outline:0;min-width:118px}
.sortbar .sdir{border:0;border-inline-start:1px solid var(--line);background:transparent;
  cursor:pointer;font-size:13px;padding:5px 9px;color:var(--brand-dk);font-weight:800}
.sortbar .sdir:hover{background:var(--brand-lt)}
[data-theme="dark"] .sortbar .sdir{color:var(--brand)}

/* dropping a spreadsheet in */
.impdrop{position:relative;border:2px dashed var(--line-2);border-radius:11px;
  padding:26px;text-align:center;background:var(--panel-2);font-size:14px;color:var(--ink-2)}
.impdrop:hover{border-color:var(--brand);background:var(--brand-lt)}
.kioskstate{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* ── WHERE IN THE COMPANY: one list, one click ─────────────────────────────
   This replaces a row of cascading selects. The list IS the chart — indented
   the way the chart is drawn — because somebody choosing a place is looking for
   a place they already know the position of, and a flat alphabetical list makes
   them find it twice. Searching flattens it on purpose: once you are typing a
   name you want matches, not context, and the path is put on the row instead. */
.pp{border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden}
.pp-load{padding:26px;text-align:center}
.pp-find{display:flex;align-items:center;gap:9px;padding:7px 9px;
  border-bottom:1px solid var(--line);background:var(--panel-2)}
.pp-find input{flex:1;min-width:0;padding:6px 10px;border:1px solid var(--line);
  border-radius:6px;background:var(--panel);font-size:13px}
.pp-find input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.pp-find .dim{font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}

.pp-list{max-height:300px;overflow:auto}

/* A GRID, NOT AN INDENTED LIST.
   The indent held the hierarchy and made you count lines to read it. Columns
   hold it now — the branch, its area, its manager and the manager above him,
   all on the row you are about to click, the way they sit in a spreadsheet. */
.pp-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;
  white-space:nowrap}
.pp-tbl th,.pp-tbl td{padding:5px 9px;border-bottom:1px solid var(--line);
  border-inline-end:1px solid var(--line);text-align:start}
.pp-tbl th:last-child,.pp-tbl td:last-child{border-inline-end:0}
.pp-tbl thead th{position:sticky;top:0;z-index:2;background:var(--panel-2);
  font-weight:700;font-size:11px;color:var(--ink-2);
  border-bottom:1.5px solid var(--line-2)}
.pp-tbl tbody tr{cursor:pointer}
.pp-tbl tbody tr:hover td{background:var(--brand-lt)}
.pp-tbl tbody tr.on td{background:var(--brand);color:#fff;border-color:transparent}
.pp-tbl tbody tr.on .pp-kind{background:rgba(255,255,255,.22);color:#fff;
  border-color:transparent}
.pp-tbl tbody tr.on .pp-dash{color:rgba(255,255,255,.6)}
.pp-tbl td.pp-nm{font-weight:700}
.pp-tbl .pp-n{text-align:end;font-variant-numeric:tabular-nums;color:var(--muted)}
.pp-tbl tbody tr.on .pp-n{color:#fff}
.pp-dash{color:var(--line-2)}

/* the kind of box, in a colour per kind — a company and a shop should not have
   to be told apart by reading them */
.pp-kind{flex:none;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--muted);background:var(--panel-2)}
.pp-kind.k-company{color:#5b3fa8;border-color:#c9b8ee;background:#f1ecfc}
.pp-kind.k-admin{color:#1c5a8f;border-color:#b6d2ea;background:#eaf2fa}
.pp-kind.k-region{color:var(--warn);border-color:#e3d3a0;background:#fbf5e4}
.pp-kind.k-branch{color:var(--brand);border-color:#bcd9b8;background:var(--brand-lt)}
[data-theme="dark"] .pp-kind.k-company{color:#c0aaf0;border-color:#3d3159;background:#221b33}
[data-theme="dark"] .pp-kind.k-admin{color:#8fbde8;border-color:#243849;background:#16232e}
[data-theme="dark"] .pp-kind.k-region{color:var(--warn);border-color:#3c3418;background:#2a2412}
[data-theme="dark"] .pp-kind.k-branch{color:var(--brand);border-color:#254a2a;background:#16271a}

.pp-none{padding:20px;text-align:center;color:var(--muted);font-size:12.5px}

/* what the program understood from the one click */
.pp-said{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;
  border-top:1px solid var(--line);background:var(--panel-2);font-size:12.5px}
.pp-tick{color:var(--pos);font-weight:800}
.pp-read{color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.7}
.pp-read b{color:var(--ink-2)}
.pp-sep{opacity:.5;margin:0 2px}

/* ── what kind of move this is ─────────────────────────────────────────────
   Moving somebody between two shops in one area and moving them into another
   company are not the same act, and the difference is invisible once it is
   done. So it is said while there is still time to change your mind. */
.tf-move{margin-top:12px;border:1px solid var(--line);border-inline-start:4px solid var(--line-2);
  border-radius:8px;padding:10px 13px;background:var(--panel-2)}
.tf-move.ok{border-inline-start-color:var(--pos)}
.tf-move.warn{border-inline-start-color:var(--warn);background:#fbf7e8}
.tf-move.neg{border-inline-start-color:var(--neg)}
[data-theme="dark"] .tf-move.warn{background:#241f10}
.tf-kind{font-weight:800;font-size:12.5px;margin-bottom:6px}
.tf-move.warn .tf-kind{color:var(--warn)}
.tf-move.neg .tf-kind{color:var(--neg)}
.tf-leg{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12.5px;
  line-height:1.8}
.tf-leg .dim:first-child{min-width:38px}
.tf-why{margin:8px 0 0;font-size:11.5px;color:var(--muted);line-height:1.75}

/* a change somebody made to their own record — findable at a glance */
.row-self{background:color-mix(in srgb,var(--warn) 8%,transparent)}

/* المصفوفة: الصف كله على سطر واحد — الاسم والمفتاح وأزرار «الكل / لا شيء».
   كان المفتاح ينزل سطرًا وحده والأزرار سطرًا ثالثًا، فصار ارتفاع الصف ثلاثة
   أضعاف ما يحتاجه صفٌّ من علامات. */
.matrix td.name{max-width:none;padding:1px 8px}
.matrix .mxrow{display:flex;align-items:center;gap:7px;line-height:1.25;min-width:0}
.matrix .mxlab{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:1;text-align:start}
.matrix .mxkey{font-family:var(--mono);font-size:9.5px;color:var(--muted);flex:none}
.matrix td.name small{display:inline}
.matrix .rowbulk{flex:none;opacity:.25;transition:opacity .12s;white-space:nowrap}
.matrix tbody tr:hover .rowbulk{opacity:1}
.matrix .mini{border:1px solid var(--line-2);background:var(--panel);border-radius:3px;
  font-size:9px;line-height:1;padding:1px 4px;cursor:pointer;color:var(--muted)}
.matrix .mini:hover{border-color:var(--brand);color:var(--brand)}

/* المبدّل: جدول الشاشة ⇄ إعدادات الشاشة */
.tswitch{margin:0}
.tswitch .cfTab{font-size:13px;font-weight:700;padding:7px 16px}

/* عمود لا يقرّر شيئًا: مظلَّل، ومربّعاته ميّتة، والسبب على رأسه */
.matrix td.cell-off{background:repeating-linear-gradient(45deg,transparent,transparent 3px,
  var(--panel-2) 3px,var(--panel-2) 6px)}
.matrix th.rot-off{color:var(--muted);opacity:.55}
.matrix input:disabled{opacity:.35;cursor:not-allowed}

/* إرشاد داخل الصفحة: لماذا لا يقرّر هذا العمود شيئًا، وكيف تجعله يقرّر */
.tsguide{margin:0 18px 12px;border:1px solid var(--line-2);border-inline-start:4px solid var(--warn);
  border-radius:8px;padding:10px 14px;background:var(--panel-2);font-size:12.5px}
.tsg-h{font-weight:800;color:var(--warn);margin-bottom:6px}
.tsg-p{margin:4px 0;line-height:1.8;color:var(--ink-2)}
.tsg-ol{margin:6px 0 0;padding-inline-start:20px;line-height:2;color:var(--ink-2)}

/* إجراء لا مفتاح له: يُذكر ولا يُدّعى أنه قرار */
.row-open td{background:color-mix(in srgb,var(--warn) 6%,transparent)}

/* رسالة نجاح وتنبيه — كانت تُستعمل في البرنامج بلا تعريف */
.msg-ok{background:color-mix(in srgb,var(--pos) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--pos) 35%,transparent);color:var(--ink)}
.msg-warn{background:color-mix(in srgb,#d97706 10%,var(--panel));border:1px solid color-mix(in srgb,#d97706 35%,transparent);color:var(--ink)}

/* ═══ الحضور الإلكتروني ═══ */
.eapanel{margin-bottom:12px}
.eabody{padding:12px 14px}
.eapunch .eacode{font-size:28px;letter-spacing:.35em;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;direction:ltr}
.eabtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.eabig{padding:18px 10px;font-size:18px;font-weight:800;justify-content:center}
.eahint{margin:10px 0 0;font-size:12px}
.eaday{padding:8px 0;border-bottom:1px solid var(--line)}
.eaday:last-child{border-bottom:0}
.eadayh{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.eaevs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.eaev{font-size:12px;padding:2px 8px;border-radius:99px;border:1px solid var(--line-2);font-variant-numeric:tabular-nums;direction:ltr}
.eaev.in{border-color:var(--pos);color:var(--pos)}
.eaev.out{border-color:var(--brand);color:var(--brand-dk)}
.eaev.void{text-decoration:line-through;opacity:.55}
.eakpis{margin-bottom:12px}
.eatools{display:flex;gap:8px;justify-content:flex-end;margin-bottom:10px}
.eatally{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.eaacts{white-space:nowrap}
.eaacts .btn{margin-inline-end:4px}
tr.eadiff td{background:color-mix(in srgb,#d97706 6%,transparent)}
tr.eavoid td{opacity:.55;text-decoration:line-through}
.eaform{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.eaform .field{margin-bottom:0;min-width:180px}
.easets{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px 18px}
.easet{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13px}
.easet input[type=number]{width:90px;text-align:center}
.easet select{max-width:200px}
.easet input:disabled{cursor:not-allowed}
/* شاشة الفرع: الرمز كبير، يُقرأ من بعيد */
.eaterm{display:flex;flex-wrap:wrap;gap:22px;align-items:center;padding:18px;margin-bottom:14px}
.eatermq{width:260px;max-width:70vw;background:#fff;padding:6px;border-radius:10px}
.eatermq svg{display:block;width:100%;height:auto}
.eatermc{flex:1;min-width:220px}
.eatermt{font-size:18px;font-weight:800;margin-bottom:6px}
.eatermcode{font-size:64px;font-weight:900;letter-spacing:.08em;font-variant-numeric:tabular-nums;direction:ltr;text-align:start;line-height:1.1}
.eatermbar{height:8px;background:var(--panel-2);border-radius:99px;overflow:hidden;margin:10px 0 6px}
.eatermbar i{display:block;height:100%;background:var(--brand);transition:width 1s linear}
.eatermrec{margin-top:12px;font-size:14px;line-height:1.8}
/* يوم مصدره البصمة في كشف الحضور الشهري */
table.att td.attcell .attsrc{font-style:normal;font-size:10px;margin-inline-end:2px;cursor:help;opacity:.8}
@media (max-width:640px){.eatermcode{font-size:44px}.eabig{font-size:16px;padding:16px 8px}}

/* ═══ جدول أعرض من الشاشة: الصفحة كلها تتحرك يمينًا ويسارًا ═══
   كانت قاعدة ".panel .scroll{overflow:visible}" تغلب قاعدة الجدول العريض، ومعها
   ".panel{overflow:clip}" تقصّ ما يتجاوز الشاشة — فأيام آخر الشهر في كشف الحضور
   وأعمدة الرواتب الأخيرة لم يكن لها طريق. الآن اللوحة تتسع لجدولها، والصفحة
   نفسها تتحرك أفقيًا وشريطها في أسفل الشاشة دائمًا، وعمود الاسم ورؤوس
   الأعمدة يبقيان ثابتين — دون شريط تمرير داخل الجدول. */
main > .page-head{position:sticky;left:0}

/* الحضور الإلكتروني — الدوامات، حركات اليوم، زر الكاميرا */
.eacam{display:flex;justify-content:center;gap:8px;margin:0 0 10px;padding:12px;font-size:15px;font-weight:700;cursor:pointer}
.eawd{display:flex;flex-wrap:wrap;gap:4px 10px}
.eawd label{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;white-space:nowrap}
.eafull{grid-column:1 / -1;margin:6px 0}
.eamaps{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px 18px;margin-top:6px}
.eamaps > b{grid-column:1 / -1;margin-top:6px}
.eamaps input{width:80px;text-align:center}
.eaPer{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0}
.eaPer .epHours{width:70px;text-align:center}
.eadaily{justify-content:flex-start;flex-wrap:wrap;align-items:center}
.eadaily label{display:inline-flex;align-items:center;gap:6px}
tr.eaabsent td{background:color-mix(in srgb,var(--neg) 7%,transparent)}
td.n.pos{color:var(--pos);font-weight:700}
td.n.neg{color:var(--neg);font-weight:700}
/* يوم إلكتروني لم يُكتب بعد: حالته في خانته */
table.att td.attcell .attlive{display:block;font-size:10px;font-weight:700;line-height:1.3;margin-bottom:2px;
  padding:1px 4px;border-radius:5px;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand-dk);white-space:nowrap}
table.att td.attcell .attlive.st-MISSING_OUT,table.att td.attcell .attlive.st-MISSING_IN{background:color-mix(in srgb,var(--neg) 12%,transparent);color:var(--neg)}
table.att td.attcell .attlive.st-CONFLICT,table.att td.attcell .attlive.st-LOCKED{background:color-mix(in srgb,#d97706 14%,transparent);color:#b45309}

/* ═══════════════════════════════════════════════════════════════════════════
   THE PHONE: the page gets the screen, the furniture gets out of the way
   The top bar was every control wrapped onto four lines, the menu a strip,
   the filters half a screen — the work itself started below the fold. On a
   phone: one thin bar (☰ menu · name · 🔔 · ⋯ the rest), the menu a drawer,
   the filters one button. Desktop is untouched: all of this is inside the query.
   ═══════════════════════════════════════════════════════════════════════════ */
.mob-only{display:none}
.flt-toggle{display:none}
@media (max-width:760px){
  .mob-only{display:inline-flex}
  .topbar{flex-wrap:nowrap;height:48px;flex:0 0 48px;padding:0 10px;gap:8px}
  .topbar .brand span[data-t="app"],.topbar .brand .cotag{display:none}
  /* folded: only ☰, the mark, the bell and ⋯ */
  .topbar > .ctl,.topbar > #coBox,.topbar > #btnLang,.topbar > #syncBox,.topbar > #btnSig,
  .topbar > #btnTheme,.topbar > .who,.topbar > #btnLogout{display:none}
  /* unfolded by ⋯: the rest drops down under the bar, one control per line */
  body.tb-open .topbar{flex-wrap:wrap;height:auto;padding-bottom:10px}
  body.tb-open .topbar > .ctl,body.tb-open .topbar > #coBox,body.tb-open .topbar > #btnLang,
  body.tb-open .topbar > #btnSig,body.tb-open .topbar > #btnTheme,body.tb-open .topbar > .who,
  body.tb-open .topbar > #btnLogout{display:flex}
  body.tb-open .topbar > .spacer{flex-basis:100%;height:0}
  .layout{grid-template-columns:1fr;height:calc(100dvh - 48px)}
  body.tb-open .layout{height:auto}
  /* the menu: a drawer over the page, closed until ☰ */
  .side{position:fixed;inset-block:48px 0;inset-inline-start:0;width:min(78vw,280px);z-index:60;
    flex-direction:column;overflow-y:auto;overflow-x:hidden;border-bottom:0;padding:12px 10px;
    transform:translateX(-105%);transition:transform .2s ease;box-shadow:0 8px 30px rgba(0,0,0,.18)}
  body.nav-open .side{transform:none}
  .side .grp{display:flex}
  .side .nav{white-space:normal}
  /* the page itself: all the room, scrolling both ways */
  main{padding:0 10px 14px;overflow:auto;-webkit-overflow-scrolling:touch}
  .page-head{padding:8px 0 6px;gap:6px;flex-wrap:wrap}
  .page-head h2{font-size:17px}
  .page-head .sub{font-size:11.5px}
  /* filters: one button; tapped, they open under it */
  .flt-toggle{display:inline-flex}
  .filterbar{padding:6px 8px;margin-bottom:10px}
  .filterbar > .lbl,.filterbar > .flt,.filterbar > #fltClear{display:none}
  .filterbar.open > .flt,.filterbar.open > #fltClear{display:block;width:100%;min-width:0 !important}
  /* tab rows scroll sideways instead of stacking */
  .subtabs{flex-wrap:nowrap;overflow-x:auto;padding:4px;margin-bottom:10px}
  .subtab{flex:0 0 auto;padding:7px 11px;font-size:13px}
  .kpis{grid-template-columns:repeat(2,1fr);gap:6px}
  .kpi{padding:8px 10px}
  .kpi .v{font-size:16px}
  .panel{margin-bottom:12px}
  .panel > header{padding:8px 10px}
  /* the attendance sheet: a narrower name column leaves room for the days */
  table.att .sticky-col{min-width:120px;max-width:140px}
  table.att td.attcell{min-width:92px}
  .eaform .field{min-width:0;width:100%}
}
@media (max-width:760px){
  /* the title and its buttons scroll away with the page — only the thin bar stays */
  main > .page-head{position:static}
  .page-head .btn{padding:4px 8px;font-size:12px}
  .page-head .sortbar,.page-head select{font-size:12px}
  /* the column heads of a long table still stay in view */
  main{--sticky-top:0px}
}
table.att td.attcell .attlive.st-HOL_PENDING,table.att td.attcell .attlive.st-EMPTY_DUE{background:color-mix(in srgb,#d97706 14%,transparent);color:#b45309}
/* الدوامات: يوم لكل خانة، والمصدر بلونه */
table.rostergrid th,table.rostergrid td{padding:4px 3px;text-align:center;font-size:12px;min-width:34px}
table.rostergrid th .dim{font-size:10px;font-weight:400}
table.rostergrid th.today{background:color-mix(in srgb,var(--brand) 14%,transparent)}
table.rostergrid td.nm{text-align:start;white-space:nowrap;position:sticky;inset-inline-start:0;background:var(--panel);z-index:1;min-width:150px}
table.rostergrid td.rs{cursor:pointer;font-weight:600;border-radius:4px}
table.rostergrid td.rs.lock{cursor:not-allowed;opacity:.6}
table.rostergrid td.rs.off{color:var(--muted);background:color-mix(in srgb,var(--muted) 10%,transparent)}
table.rostergrid td.rs.src-roster{box-shadow:inset 0 -2px 0 var(--brand)}
table.rostergrid td.rs.src-pattern{box-shadow:inset 0 -2px 0 #7c3aed}
table.rostergrid td.rs.src-file{box-shadow:inset 0 -2px 0 #0891b2}
table.rostergrid td.rs.src-company{box-shadow:inset 0 -2px 0 #9ca3af}
table.rostergrid td.rs.pend{background:color-mix(in srgb,#d97706 22%,transparent);color:#b45309}
.rslegend{margin:8px 2px;font-size:12px}
.rslegend .rs{display:inline-block;width:12px;height:4px;overflow:hidden;color:transparent;vertical-align:middle}
.rslegend .rs.src-roster{background:var(--brand)}.rslegend .rs.src-pattern{background:#7c3aed}
.rslegend .rs.src-file{background:#0891b2}.rslegend .rs.src-company{background:#9ca3af}
.eaasks{display:flex;gap:8px;flex-wrap:wrap}
.eaHol .ehName{flex:1;min-width:160px}
/* الدوامات: قوائم الصف (الراحة، الوردية، بداية اليوم) */
table.rostergrid td.pl{padding:2px 3px;min-width:0}
table.rostergrid td.pl select{font-size:12px;padding:2px 4px;max-width:150px}
table.shtable input{width:100%;min-width:70px}
table.shtable input.shName{min-width:140px}
table.shtable td:last-child{white-space:nowrap}
/* علامة مصدر اليوم في الكشف الموقّع */
.dcell .dn .attsrc{font-style:normal;font-size:10px;cursor:help;opacity:.85}
/* مشبك التقرير الطبي في يوم المرضي */
.attclipbox{display:inline-flex;gap:2px;margin-inline-start:3px;vertical-align:middle}
.attclip{font-size:12px;line-height:1;text-decoration:none;border:0;background:none;padding:1px 2px;cursor:pointer;border-radius:4px}
.attclip.on{background:color-mix(in srgb,var(--pos) 14%,transparent)}
.attclip.up{opacity:.55}
.attclip.up:hover:not([disabled]){opacity:1;background:color-mix(in srgb,var(--brand) 12%,transparent)}
.attclip[disabled]{cursor:not-allowed}
table.att td.attcell .attlive.st-SICK_WAIT{background:color-mix(in srgb,#d97706 14%,transparent);color:#b45309}
.easickwait{border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px;font-size:13px}
.hltable input.hlName{min-width:180px}

/* ═══ شبكة التعديل: الصفحة هي التي تتحرك أفقيًا، لا صندوق داخلها ═══
   كان الصندوق يمرّر نفسه، ورؤوس الأعمدة مضبوطة لتقف تحت عنوان الصفحة —
   فكانت تنزل داخل الصندوق بمقدار العنوان وتغطي أول صفين. الآن مثل باقي
   الجداول العريضة: اللوحة تتسع لجدولها، والرؤوس تقف تحت العنوان فعلًا. */

/* ═══ الكلام داخل الخلايا لا يُقص ═══
   رؤوس الأرقام كانت بخط الأرقام العريض ومقفولة العرض على سطر واحد، فضاعت
   أطراف الكلمات («ل في إجازة»). الرأس يأخذ خط البرنامج ويلتف على سطرين. */
th.n{font-family:inherit;font-size:inherit}
table.att th.tot-h{white-space:normal;line-height:1.2;font-size:10.5px;vertical-align:middle;
  overflow-wrap:break-word;hyphens:none}
thead th{overflow:visible;text-overflow:clip}
/* ═══ قوائم الموظفين: الكود · الاسم · الفرع/الإدارة — كل اسم يبدأ من نفس الحافة ═══ */
th.pc-code,th.pc-name,th.pc-place{text-align:start}
td.pc-code{text-align:start;font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
td.pc-name{text-align:start;white-space:nowrap;font-weight:500}
td.pc-name bdi{unicode-bidi:isolate}
td.pc-place{text-align:start;white-space:nowrap;color:var(--ink-2);font-size:12.5px}

/* ═══ الجدول العريض يتحرك وحده، وأعلى الصفحة ثابت ═══
   قرار المالك: العنوان والفلاتر فوق الجدول لا تتحرك. الجدول الأعرض من الشاشة
   (وشبكة التعديل دائمًا) يأخذ ما تبقى من ارتفاع الشاشة ويتحرك داخله في
   الاتجاهين، ورؤوس الأعمدة وعمود الأسماء ثابتة داخله. */
.panel .scroll.capped,.scroll.capped{overflow:auto;max-height:var(--tbl-room,calc(100vh - 250px));--sticky-top:0px;
  overscroll-behavior:contain}
/* المشبك لا يظهر إلا مع «مرضي» — وحين يظهر يكون واضحًا */
.attclipbox[hidden]{display:none !important}
.attclipbox .attclip{font-size:13px;padding:2px 5px;border:1px solid var(--line-2);border-radius:6px;background:var(--panel)}
.attclipbox .attclip.on{border-color:var(--pos);background:color-mix(in srgb,var(--pos) 12%,var(--panel))}
.attclipbox .attclip.up{opacity:1;border-style:dashed;color:var(--muted)}
/* اليوم الفارغ: إطار خفيف فقط، بلا تلوين */
/* يوم عمل فارغ في الكشف (لا بصمة ولا إدخال ولا طلب): إطار خفيف فقط، بلا تلوين */
table.att td.attcell.attempty{background:var(--panel) !important;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#d97706 55%,transparent)}
/* بصمتي: الشهر يومًا بيوم */
table.eamonth td,table.eamonth th{text-align:start}
table.eamonth tr.eamiss td{background:color-mix(in srgb,var(--neg) 7%,transparent)}
table.eamonth tr.eaempty td:first-child{box-shadow:inset 3px 0 0 #d97706}
table.eamonth tr.eatoday td{background:color-mix(in srgb,var(--brand) 9%,transparent);font-weight:600}
table.eamonth b.pos{color:var(--pos)} table.eamonth b.neg{color:var(--neg)}
/* محادثة اليوم بين الموظف ومديره */
.chatbox{max-height:50vh;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:4px}
.chatmsg{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:6px 10px;max-width:85%;align-self:flex-start}
.chatmsg.mine{background:color-mix(in srgb,var(--brand) 10%,var(--panel));align-self:flex-end}
.chatmeta{font-size:11px;margin-bottom:2px}
.chatdot{display:inline-block;min-width:16px;padding:0 4px;border-radius:8px;background:var(--neg);color:#fff;font-size:10px}
.eamnav{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto}

/* ═══ الاسم كاملًا، بلا تقطيع — في كشف الحضور وكل قوائم الأشخاص ═══
   الاسم يلتف على سطرين إن طال بدل أن تُقص بدايته، وتحته مكان العمل كاملًا. */
.pcname b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.pcname small{white-space:normal}
table.att .sticky-col.attname{min-width:220px;max-width:280px}
table.att td.attname .pcname b{font-size:12.5px;line-height:1.3}
table.att td.attname .modeIc{font-style:normal;font-size:11px;cursor:help;margin-inline-start:4px}

/* محادثة اليوم من الكشف: تظهر عند المرور على الخانة، وتبقى ظاهرة إن كان فيها كلام */
table.att td.attcell .attchat{border:0;background:none;padding:0 2px;font-size:11px;cursor:pointer;opacity:0;vertical-align:middle}
table.att td.attcell:hover .attchat,table.att td.attcell .attchat.on{opacity:1}
table.att td.attcell .attchat .chatdot{margin-inline-start:2px}

/* ═══════════════════════════════════════════════════════════════════════════
   THE PROGRAM FRAME — v2 (the owner rules, 2026-09-29)
   · the frame (top bar, sidebar) is dark in the company colour, the page
     light — the data stands out; the colour follows Settings › Identity, so
     another company gets its own without a line of code
   · the sidebar folds to icons and opens out, each person keeps their choice
   · the top of a page is one compact line; the table gets the room
   · every table is a grid: vertical and horizontal lines, like a sheet
   · sized for the branch screens (19–24 inch, 1366–1920 px wide)
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --shell:color-mix(in srgb,var(--brand) 42%,#08120d);
  --shell-2:color-mix(in srgb,var(--brand) 58%,#08120d);
  --shell-ink:#eef5f0; --shell-mute:rgba(238,245,240,.62); --shell-line:rgba(255,255,255,.12);
  --side-w:224px; --top-h:50px;
}
body.nav-mini{--side-w:60px}

/* ── the top bar ── */
.topbar{height:var(--top-h);flex:0 0 var(--top-h);background:var(--shell);color:var(--shell-ink);
  border-bottom:0;gap:10px;padding:0 14px;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.topbar .brand{color:#fff}
.topbar .brand .dot{background:var(--accent);color:#1b1b1b}
.topbar .brand .cotag{color:var(--shell-mute);border-color:var(--shell-line)}
.topbar .ctl label{color:var(--shell-mute)}
.topbar .ctl select,.topbar .btn{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}
.topbar .ctl select option{color:#16201b;background:#fff}
.topbar .btn:hover,.topbar .ctl select:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35)}
.topbar .who b{color:#fff}.topbar .who span{color:var(--shell-mute)}
.topbar .syncbox{color:#9be3a8}
.topbar .co-chip{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.25)}

/* ── the frame below it ── */
.layout{grid-template-columns:var(--side-w) 1fr;height:calc(100vh - var(--top-h));transition:grid-template-columns .18s ease}

/* ── the sidebar ── */
.side{background:var(--shell-2);border-right:0;padding:10px 8px 8px;color:var(--shell-ink)}
.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}
.side .grp{color:var(--shell-mute);padding:10px 8px 5px}
.side .grp:hover{color:#fff}
.side .grp.here{color:#fff}
[data-theme="dark"] .side .grp.here{color:#fff}
.side .grp .gic{font-size:13px;opacity:.85}
.side .grp .gcount{color:var(--shell-mute)}
.side .nav{color:rgba(238,245,240,.86);padding:7px 10px;font-size:13px}
.side .nav:hover{background:rgba(255,255,255,.08);color:#fff}
.side .nav.on{background:rgba(255,255,255,.15);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
[data-theme="dark"] .side .nav.on{color:#fff}
.side .nav .ic{opacity:1}
.side-stamp{color:var(--shell-mute);border-top-color:var(--shell-line)}
.nav-toggle{margin-top:6px;width:100%;padding:7px 0;border:1px solid var(--shell-line);border-radius:var(--radius);
  background:transparent;color:var(--shell-ink);cursor:pointer;font-size:15px;font-weight:700;flex:0 0 auto}
.nav-toggle:hover{background:rgba(255,255,255,.1)}
/* folded: one icon per group; resting on it opens its screens beside it */
body.nav-mini .side{padding:10px 6px 8px}
body.nav-mini .side .nav,body.nav-mini .side .grp .caret,body.nav-mini .side .grp > span:not(.gic),
body.nav-mini .side .grp .gcount,body.nav-mini .side-stamp{display:none !important}
body.nav-mini .side .grp{justify-content:center;padding:10px 0;border-radius:var(--radius);margin-bottom:2px}
body.nav-mini .side .grp .gic{font-size:19px;opacity:1}
body.nav-mini .side .grp:hover{background:rgba(255,255,255,.1)}
body.nav-mini .side .grp.here{background:rgba(255,255,255,.15);box-shadow:inset 3px 0 0 var(--accent)}
body.nav-mini .nav-toggle{margin-top:auto}
.navfly{position:fixed;z-index:300;min-width:230px;max-height:80vh;overflow:auto;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px -8px rgba(0,0,0,.35);padding:6px 0;display:none}
.navfly.show{display:block}
.navfly-h{font-weight:800;font-size:14px;padding:8px 16px 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.navfly-i{display:flex;align-items:center;gap:10px;width:100%;padding:8px 16px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:13.5px;color:var(--ink);text-align:start}
.navfly-i:hover{background:var(--panel-2)}
.navfly-i.on{color:var(--brand-dk);font-weight:700;background:var(--brand-lt)}
.navfly-i > span:last-child{unicode-bidi:plaintext}

/* ── the top of a page: one compact line ── */
main{padding:0 14px 10px}
.page-head{padding:8px 0 7px;margin-bottom:8px;align-items:center;gap:8px;box-shadow:0 5px 8px -9px rgba(0,0,0,.4)}
.page-head > div:first-child{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.page-head h2{font-size:17px;font-weight:700}
.page-head .sub{font-size:12px;margin:0}
.page-head .btn{padding:5px 11px;font-size:12.5px}
.page-head select{padding:5px 8px;font-size:12.5px}
.subtabs{margin-bottom:8px;padding:3px}
.subtab{padding:5px 12px;font-size:12.5px}
.filterbar{margin-bottom:8px;padding:6px 10px}
.filterbar input,.filterbar select{padding:5px 9px;font-size:12.5px}
.panel{margin-bottom:10px}
.panel > header{padding:7px 12px}
.panel > header h3{font-size:13.5px}
.tiles{gap:8px;margin-bottom:10px}
.tile{padding:9px 12px}
.tile .v{font-size:19px;margin-top:2px}

/* ── every table is a grid, like a sheet: vertical and horizontal lines ── */
table{border-collapse:separate;border-spacing:0}
thead th{background:color-mix(in srgb,var(--brand) 7%,var(--panel-2));color:var(--ink);font-weight:700;
  border:0;border-inline-end:1px solid var(--grid);border-bottom:1px solid var(--grid-2);padding:6px 8px}
tbody td{border:0;border-inline-end:1px solid var(--grid);border-bottom:1px solid var(--grid);padding:4px 8px}
thead th:first-child,tbody td:first-child{border-inline-start:1px solid var(--grid)}
tbody tr:nth-child(even) > td{background:color-mix(in srgb,var(--panel-2) 60%,var(--panel))}
tbody tr:hover > td{background:color-mix(in srgb,var(--brand) 5%,var(--panel))}

/* ── names: whole and on one line, everywhere ── */
.pcname b{white-space:nowrap;overflow:visible;text-overflow:clip}
.pcname small{white-space:nowrap}

/* ═══ the attendance sheet ═══ */
table.att .sticky-col.attname{min-width:0;max-width:none;width:auto;white-space:nowrap}
table.att td.attname .pcname b{white-space:nowrap;font-size:12.5px}
table.att td.attname .pcname small{white-space:nowrap;font-size:10.5px}
table.att th.attday{min-width:112px;width:112px}
/* one fixed shape per day: what is moving · the day · where from, paper | hours | talk */
table.att td.attcell{padding:0;height:58px;min-width:112px;width:112px;vertical-align:top;cursor:pointer}
table.att td.attcell.ro{cursor:default}
table.att td.attcell .ac{display:flex;flex-direction:column;justify-content:center;height:100%;padding:3px 5px;gap:3px}
table.att td.attcell .ac-live{line-height:1;overflow:hidden;white-space:nowrap}
table.att td.attcell .ac-live .attlive{display:inline-block;margin:0;font-size:9.5px;padding:1px 4px;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
table.att td.attcell .ac-main{display:flex;justify-content:center}
table.att td.attcell .ac-main select.att-s{width:100%;height:24px;font-size:11.5px;padding:0 4px;border-radius:6px;
  text-align:center;text-align-last:center;cursor:pointer}
table.att td.attcell .ac-main .attro{display:block;width:100%;text-align:center;font-size:11.5px;font-weight:600;
  padding:3px 0;border-radius:6px;background:var(--cbg,transparent);color:var(--cfg,var(--muted))}
table.att td.attcell .ac-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:18px;font-size:11px}
table.att td.attcell .ac-l{justify-self:start;display:inline-flex;align-items:center;gap:2px}
table.att td.attcell .ac-h{justify-self:center}
table.att td.attcell .ac-r{justify-self:end}
/* a piece that is not there keeps its place — nothing jumps */
table.att td.attcell .ac-foot [hidden]{display:inline-flex !important;visibility:hidden}
table.att td.attcell .ac-h select.att-h{height:18px;width:54px;font-size:10.5px;padding:0 2px;border-radius:4px;
  text-align:center;text-align-last:center}
table.att td.attcell .ac-h .atth{font-size:10.5px;font-weight:800;margin:0}
table.att td.attcell .attsrc{margin:0;font-size:10px;opacity:.9}
table.att td.attcell .attclipbox{margin:0}
table.att td.attcell .attclipbox .attclip{font-size:10.5px;padding:0 3px;border-radius:4px}
/* the conversation: always in its place, quiet until there is something in it */
table.att td.attcell .attchat{opacity:.28;font-size:10.5px;padding:0 2px;border:0;background:none;cursor:pointer}
table.att td.attcell:hover .attchat{opacity:.6}
table.att td.attcell .attchat.on{opacity:1}

/* the phone keeps its own frame: a drawer, the whole width for the page */
@media (max-width:760px){
  .layout{grid-template-columns:1fr;height:calc(100dvh - 48px)}
  body.tb-open .layout{height:auto}
  .topbar{height:48px;flex:0 0 48px}
  body.tb-open .topbar{height:auto}
  .nav-toggle{display:none}
}

/* the "⋯" at the end of a page title: the buttons used now and then */
.headmore{position:relative;display:inline-flex}
.headmore .hm-menu{display:none;position:absolute;top:calc(100% + 4px);inset-inline-end:0;z-index:60;min-width:170px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 26px -10px rgba(0,0,0,.35);padding:4px}
.headmore.open .hm-menu{display:flex;flex-direction:column}
.headmore .hm-item{border:0;background:none;justify-content:flex-start;width:100%;padding:7px 12px;border-radius:6px}
.headmore .hm-item:hover{background:var(--panel-2)}

/* the name line: the name, then its marks (⚡ ✋ ❄) beside it — the place underneath */
table.att td.attname .pcname{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:4px}
table.att td.attname .pcname small{flex-basis:100%}
table.att td.attname .fzChip{padding:0 5px;font-size:10px;line-height:1.4}
/* every row the same height: the signed-sheet button sits in the corner of the name cell */
table.att td.attname{padding-inline-end:26px}
table.att td.attname .atDoc{position:absolute;top:4px;inset-inline-end:3px;padding:0 3px;font-size:12px;opacity:.7}
table.att td.attname .atDoc:hover{opacity:1}
table.att tr.attrow > td{height:58px}

/* the sub-tabs and the filters share one line when there is room — the table gets the rest */
@media (min-width:761px){
  main > .subtabs{display:inline-flex;vertical-align:middle;margin-inline-end:8px;margin-bottom:8px}
  main > .subtabs + .filterbar{display:inline-flex;vertical-align:middle;margin-bottom:8px}
}
.filterbar{padding:4px 8px;gap:6px}
.filterbar input,.filterbar select{padding:4px 8px}
.panel > header{padding:5px 12px;min-height:0}
.attpanel .attlegend{font-size:10.5px}

/* ═══ frame v2 — corrections (owner, 2026-09-29) ═══ */
/* the sidebar: never white — the screens read pale on green, and turn yellow
   on a deeper green when pointed at or open */
:root{--shell-deep:color-mix(in srgb,var(--brand) 30%,#030806)}
.side .nav{background:transparent;border:0;color:rgba(238,245,240,.9)}
.side .nav:hover{background:var(--shell-deep);color:var(--accent)}
.side .nav.on{background:var(--shell-deep);color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
[data-theme="dark"] .side .nav.on{color:var(--accent)}
.side .grp{background:transparent}
.side .grp:hover,.side .grp.here{color:var(--accent)}
[data-theme="dark"] .side .grp.here{color:var(--accent)}
body.nav-mini .side .grp:hover,body.nav-mini .side .grp.here{background:var(--shell-deep)}
/* the fold button never scrolls away: it stays at the foot of the sidebar */
.nav-toggle{position:sticky;bottom:0;z-index:2;background:var(--shell-2);margin-top:auto}
.nav-toggle:hover{background:var(--shell-deep);color:var(--accent)}

/* the name on the sheet: no width limit of its own */
table.att td.attname .atNm{max-width:none;overflow:visible}

/* filters stand as tall as the tabs beside them */
.subtab{height:32px;display:inline-flex;align-items:center}
.filterbar{min-height:42px}
.filterbar input,.filterbar select,.filterbar .btn{height:32px;box-sizing:border-box}

/* a panel whose table moves inside itself — set by the program, no costly selector */
.panel.has-capped{overflow:hidden}

/* ═══ the day cell: the value in a very light frame; only the value opens the list ═══ */
table.att td.attcell{cursor:default}
table.att td.attcell .acv{display:block;width:100%;height:24px;padding:0 4px;border:1px dashed var(--line-2);border-radius:6px;
  background:transparent;color:var(--muted);font:inherit;font-size:11.5px;cursor:pointer;text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
table.att td.attcell .acv:hover{border-style:solid;border-color:var(--brand);color:var(--ink)}
table.att td.attcell .acv.set{border:1px solid var(--cfg,var(--line-2));background:var(--cbg,transparent);color:var(--cfg,var(--ink));font-weight:600}
table.att td.attcell .ach{height:18px;min-width:34px;padding:0 5px;border:1px dashed var(--line-2);border-radius:4px;background:transparent;
  font:inherit;font-size:10.5px;font-weight:700;color:var(--muted);cursor:pointer;line-height:16px}
table.att td.attcell .ach:hover{border-style:solid;border-color:var(--brand)}
table.att td.attcell .ach.pos{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 45%,transparent)}
table.att td.attcell .ach.neg{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 45%,transparent)}
table.att td.attcell .ac-h .attclipbox .attclip{font-size:11px;padding:0 5px}

/* the one list every cell opens */
.attpick{position:fixed;z-index:400;display:none;flex-direction:column;min-width:130px;max-height:260px;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 28px -10px rgba(0,0,0,.35);padding:4px}
.attpick.show{display:flex}
.attpick.hours{display:none;min-width:0;width:188px;flex-flow:row wrap;gap:2px}
.attpick.hours.show{display:flex}
.attpick .pk{border:0;background:none;padding:6px 10px;border-radius:5px;text-align:start;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink);white-space:nowrap}
.attpick.hours .pk{width:44px;padding:5px 0;text-align:center;font-size:11.5px}
.attpick .pk:hover{background:var(--panel-2)}
.attpick .pk.on{background:var(--brand-lt);color:var(--brand-dk);font-weight:700}

/* complete a day: what stands, then only what is missing */
.cdnow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
.cdevs{display:inline-flex;flex-wrap:wrap;gap:4px}
.cdnote{margin:6px 0;font-size:13px;color:var(--ink-2)}
.cdside{display:flex;flex-direction:column;gap:4px;margin:4px 0 8px;font-size:13px}
.cdside label{display:flex;align-items:center;gap:6px;cursor:pointer}

/* the day inside an attendance request: now · asked · the result */
.rqgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.rqcol{border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:4px;background:var(--panel-2)}
.rqh{font-weight:700;font-size:12px;color:var(--ink-2)}
.rqmiss{margin-top:4px;font-size:12px;color:#b45309;font-weight:600}

/* the hours window: + green, − red, the choice shown large before it is applied */
.hpnow{display:flex;align-items:baseline;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:10px;border:1px solid var(--line)}
.hpnow b{font-size:26px;font-variant-numeric:tabular-nums}
.hpnow.pos{background:color-mix(in srgb,var(--pos) 10%,var(--panel));color:var(--pos);border-color:color-mix(in srgb,var(--pos) 35%,transparent)}
.hpnow.neg{background:color-mix(in srgb,var(--neg) 9%,var(--panel));color:var(--neg);border-color:color-mix(in srgb,var(--neg) 35%,transparent)}
.hpnow.zero{background:var(--panel-2);color:var(--ink-2)}
.hpsec{margin-bottom:10px}
.hph{font-size:12.5px;font-weight:700;margin-bottom:5px}
.hpsec.pos .hph{color:var(--pos)} .hpsec.neg .hph{color:var(--neg)}
.hpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:5px;align-items:center}
.hpc{height:34px;border-radius:8px;border:1px solid var(--line-2);background:var(--panel);font:inherit;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums}
.hpc.pos{color:var(--pos)} .hpc.neg{color:var(--neg)}
.hpc:hover{border-color:var(--brand)}
.hpc.on.pos{background:var(--pos);color:#fff;border-color:var(--pos)}
.hpc.on.neg{background:var(--neg);color:#fff;border-color:var(--neg)}
.hpc.on.zero{background:var(--ink-2);color:#fff}

/* the sheet saves itself: a quiet word of where it stands */
.attAuto{font-size:12px;color:var(--ink-3);white-space:nowrap;align-self:center;padding:0 4px}
.attAuto.saving{color:#b45309}.attAuto.saved{color:var(--pos)}.attAuto.err{color:var(--neg);font-weight:700}

/* what is new: a soft red number — on the messages button and on each tab */
#topMsg,#topTasks{position:relative}
#topTasks.has{border-color:var(--brand);font-weight:800}
.tbadge{position:absolute;top:-6px;inset-inline-end:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:#fde2e1;color:#b42318;border:1px solid #f5b5b0;font-size:10.5px;font-weight:800;line-height:15px;text-align:center}
.nbadge{margin-inline-start:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#fde2e1;color:#b42318;
  font-size:10.5px;font-weight:800;line-height:18px;text-align:center;flex:none}
.nav .nav-count + .nbadge{margin-inline-start:4px}
.side .grp .nbadge.g{margin-inline-start:6px}
body.nav-mini .side .nbadge{position:absolute;top:2px;inset-inline-end:2px;min-width:15px;height:15px;line-height:15px;font-size:9.5px;padding:0 3px}
body.nav-mini .side .grp,body.nav-mini .side .nav{position:relative}
.nbadge[hidden],.tbadge[hidden]{display:none !important}

/* the demo bar on a phone: its pickers wrap under each other instead of pushing the page sideways */
@media (max-width:760px){
  #demoBar{flex-wrap:wrap;gap:6px 10px;padding:6px 10px}
  #demoBar .dmSay,#demoBar .spacer{display:none}
  #demoBar .dmPick{flex:1 1 100%;min-width:0}
  #demoBar select,#demoBar .dmCoSel{flex:1;min-width:0;max-width:none;width:100%}
}
@media (max-width:760px){
  /* one line of two pickers, their long captions left to the pickers themselves */
  #demoBar .dmPick{flex:1 1 40%;font-size:0;gap:0}
  #demoBar .dmPick > span{display:none}
  #demoBar select{height:30px;font-size:12px}
}

/* the day after approval: overtime green, shortfall red */
.rqpos{color:var(--pos);font-weight:700}.rqneg{color:var(--neg);font-weight:700}
.rqcol.rqafter{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));background:color-mix(in srgb,var(--brand) 5%,var(--panel))}

/* the frozen name column is never see-through: its header stays above the day
   headers that slide under it, and the tinted rows give it a solid tint */
.panel .scroll table thead th.sticky-col,table.att thead th.sticky-col{z-index:6}
table.att tr.attrow.g0 td.sticky-col{background:color-mix(in srgb,#006c0d 5.5%,var(--panel))}
table.att tr.attrow.g2 td.sticky-col{background:color-mix(in srgb,#787878 6%,var(--panel))}
table.att tr.attrow td.sticky-col{background-clip:padding-box}

/* the monthly sheet on a phone: one person, a day per line — the same cells */
.attmhead{padding:10px 12px !important}
.attmwho{width:100%;height:42px;font-size:15px;font-weight:700;border-radius:10px}
.attmsums{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px}
.attmsum{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line)}
.attmsum b{color:var(--tc);font-size:13px}
table.att.attm{width:100%;border-collapse:separate;border-spacing:0 5px;padding:0 8px 8px}
table.att.attm th.attmday{width:58px;min-width:58px;text-align:center;vertical-align:middle;background:var(--panel-2);
  border-radius:10px 0 0 10px;position:static;padding:6px 4px}
[dir="rtl"] table.att.attm th.attmday{border-radius:0 10px 10px 0}
table.att.attm th.attmday b{display:block;font-size:17px;line-height:1.1}
table.att.attm th.attmday small{display:block;font-size:10.5px;color:var(--muted);font-weight:600}
table.att.attm tr.fri th.attmday{background:#fdf2e3}
table.att.attm tr.today th.attmday{background:#eaf7ee;box-shadow:inset 0 -3px 0 var(--brand)}
table.att.attm td.attcell{width:auto;min-width:0;max-width:none;height:auto;min-height:58px}
table.att.attm td.attcell .acv{font-size:14px}
[dir="rtl"] table.att.attm{direction:rtl}

/* the print window: the paper's own size, inside the program */
.modal.pvmodal{width:min(900px,96vw);max-width:96vw}
.modal.pvmodal.pv-ls{width:min(1240px,96vw)}
.modal.pvmodal .modal-body{padding:0;background:#e9ece8}
.pvwrap{height:min(78vh,1180px);display:flex}
.pvframe{flex:1;width:100%;border:0;background:#fff}
@media (max-width:760px){.pvwrap{height:calc(100vh - 130px)}}
/* the print window, taller like the page it shows, with ONE scrollbar — the paper's own */
#modalRoot .modal.pvmodal{height:96vh;max-height:96vh;width:min(880px,96vw)}
#modalRoot .modal.pvmodal.pv-ls{width:min(1240px,96vw)}
#modalRoot .modal.pvmodal .modal-body{overflow:hidden;display:flex;padding:0}
.modal.pvmodal .pvwrap{flex:1;height:auto;min-height:0}
#modalRoot:has(.pvmodal) .overlay{padding:2vh 2vw}

/* the schedules' three ways in, and the help list */
.segbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.segbar .btn.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.segbar .rsHelp{margin-inline-start:auto}
ol.helpl{margin:0;padding-inline-start:20px;line-height:1.9;font-size:13.5px}

/* the title line: the group small, then the screen */
.page-head h2 .crumbG{font-size:12.5px;font-weight:600;color:var(--muted)}
.page-head h2 .crumbSep{margin:0 6px;font-size:12px;color:var(--muted);font-weight:400}
.page-head h2 .crumbT{white-space:nowrap}
/* a group's ⚙ in the sidebar, and its strip on the settings page */
.side .grp .gset{margin-inline-start:6px;opacity:.55;font-size:12px;padding:0 3px;border-radius:5px;cursor:pointer}
.side .grp:hover .gset{opacity:1}
.side .grp .gset:hover{background:rgba(255,255,255,.18)}
body.nav-mini .side .grp .gset{display:none}
.grpstrip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 10px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.grpstrip .subtabs{margin:0}

/* the sidebar, legible: screens in pure white Cairo of a medium weight, the
   groups a step bolder; line icons in the colour of their text */
.side .nav,.side .grp{font-family:"Cairo","Segoe UI",Tahoma,sans-serif}
.side .nav{color:#fff !important;font-weight:600;font-size:13.5px}
.side .grp{color:#fff;font-weight:700;font-size:13px}
.side .nav.on,.side .nav:hover,.side .grp.here,.side .grp:hover{color:var(--accent,#f5c518) !important}
.side .ic,.side .gic{display:inline-flex;align-items:center;justify-content:center;width:20px;flex:0 0 20px}
.side .ico{width:18px;height:18px;display:block}
.side .grp .gic .ico{width:17px;height:17px}
.navFly .ico,#navFly .ico{width:17px;height:17px}

/* the signature kept for this person, shown where a decision is signed */
.sigsaved{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.sigsaved img{max-height:54px;max-width:220px;background:#fff;border-radius:6px;padding:2px 6px}
/* windows take the room the screen has: wider and taller on a big screen (small confirmations stay small) */
#modalRoot .modal.modal-md{max-width:min(1000px,94vw);--dlg-h:880px}
#modalRoot .modal.modal-lg{max-width:min(1320px,95vw);--dlg-h:1100px}
#modalRoot .modal.modal-xl{max-width:min(1600px,97vw);--dlg-h:1300px}
#modalRoot .modal{max-height:94vh}
#modalRoot .modal.modal-md,#modalRoot .modal.modal-lg,#modalRoot .modal.modal-xl{height:min(94vh,var(--dlg-h))}

/* ── notifications: one list, three kinds, each line opens its place ── */
.ntfilters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.ntf{border:1px solid var(--line-2);background:var(--panel);border-radius:999px;padding:4px 12px;font:inherit;font-size:12.5px;cursor:pointer}
.ntf span{color:var(--muted);font-size:11px}
.ntf.on{background:var(--brand);border-color:var(--brand);color:#fff}.ntf.on span{color:#fff}
.ntday{font-size:11.5px;font-weight:800;color:var(--muted);margin:10px 2px 4px}
.ntrow{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:9px 10px;margin:0 0 4px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);font:inherit;cursor:pointer;position:relative}
.ntrow:hover{border-color:var(--brand);background:var(--panel-2)}
.ntrow.hot{border-inline-start:3px solid var(--neg)}
.ntrow.unread{background:color-mix(in srgb,#fde2e1 35%,var(--panel))}
.ntic{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--panel-2);display:flex;align-items:center;justify-content:center;font-size:15px}
.ntbody{flex:1;min-width:0;display:flex;flex-direction:column}
.ntbody b{font-size:13px}.ntbody .dim{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nttime{font-size:11px;color:var(--muted);white-space:nowrap}
.ntdot{width:9px;height:9px;border-radius:50%;background:#e5484d;flex:0 0 9px}
.ntgo{color:var(--muted);font-size:18px}
[dir="rtl"] .ntgo{transform:scaleX(-1)}
/* the number on the menu opens its list */
.side .nbadge{cursor:pointer}
.side .nbadge:hover{background:#fff;color:#b42318}
/* an open group sits in its own light frame, its head and screens together */
.side .gbox{margin:0 0 4px;border:1px solid transparent;border-radius:10px}
.side .gbox.open{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.04);padding:2px 2px 6px;margin:4px 0 8px}
.side .gbox.open > .grp{border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:4px}
.side .grp > span{white-space:nowrap}
body.nav-mini .side .gbox,body.nav-mini .side .gbox.open{border-color:transparent;background:none;padding:0;margin:0}
@media (max-width:760px){.side .gbox,.side .gbox.open{display:contents}}

/* what waits here: a small bell by the title; its list opens under it and folds away */
.waitwrap{position:relative;display:inline-flex;vertical-align:middle;margin-inline-start:10px}
.waitbtn{border:1px solid #f5b5b0;background:#fde2e1;color:#b42318;border-radius:999px;padding:1px 9px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.waitbtn:hover{background:#fbd0ce}
.waitpop{position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:60;width:min(420px,90vw);max-height:60vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:8px}
.waitpop[hidden]{display:none}
.waithd{font-size:12px;font-weight:800;color:var(--muted);margin:2px 4px 6px}
.page-head h2 + .waitwrap{margin-top:0}

/* electronic against by hand: a very light card on the ⚡✎ mark */
.attcmp{cursor:help}
.cmpcard{position:fixed;z-index:400;display:none;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.16);padding:8px 10px;font-size:12px;max-width:340px;pointer-events:none}
.cmpt{border-collapse:collapse;width:100%}
.cmpt th,.cmpt td{border:0;border-bottom:1px solid var(--line);padding:4px 8px;text-align:start;white-space:nowrap}
.cmpt th{font-size:11px;color:var(--muted);font-weight:700;background:none}
.cmpt td:first-child{color:var(--muted)}
.cmpt td.df{background:#fff4d6;font-weight:800;border-radius:4px}
.cmpby{margin-top:6px;color:var(--muted)}

/* the staff list: attendance method, one row or many at once */
.emMode{font-size:12px;padding:3px 6px;border-radius:6px;max-width:190px}
.empbulk{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 8px;padding:8px 12px;border:1px solid var(--brand);
  border-radius:10px;background:color-mix(in srgb,var(--brand) 6%,var(--panel))}
.empbulk[hidden]{display:none}
/* the comparison, as a proper small table: lines across and down, the difference said plainly */
.cmpcard{max-width:440px}
.cmpt{border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.cmpt th,.cmpt td{border:1px solid var(--line) !important;padding:5px 9px;text-align:center}
.cmpt thead th{background:var(--panel-2);color:var(--ink-2);font-size:11.5px}
.cmpt td.k{background:var(--panel-2);color:var(--muted);text-align:start;font-weight:700}
.cmpt td.same{color:var(--pos);font-weight:700;background:color-mix(in srgb,var(--pos) 7%,var(--panel))}
.cmpt td.df{color:#9a5b00;font-weight:800;background:#fff4d6}
.cmpt td.dfv{font-weight:800;background:#fff9e8}
.cmpt td.na{color:var(--muted)}
.cmpt td[dir="ltr"]{font-variant-numeric:tabular-nums;white-space:nowrap}

/* a decision on my own request: green when approved, red when refused */
.ntrow.good{border-inline-start:3px solid var(--pos)}
.ntrow.bad{border-inline-start:3px solid var(--neg)}

/* ── the signed sheet: the days down the left, the totals and signatures on the right ── */
.adgrid{display:grid;grid-template-columns:minmax(300px,1fr) minmax(380px,1.15fr);gap:16px;align-items:start}
@media (max-width:900px){.adgrid{grid-template-columns:1fr}}
.adside{display:flex;flex-direction:column;gap:6px}
.adtots{display:flex;flex-wrap:wrap;gap:6px}
.adtot{border:1px solid var(--line);border-radius:10px;padding:6px 12px;background:var(--panel-2);display:flex;gap:10px;align-items:baseline}
.adtot span{font-size:12px;color:var(--muted)}.adtot b{font-size:15px}
.addays{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.addt{width:100%;border-collapse:collapse;font-size:12.5px}
.addt th{background:var(--panel-2);font-size:11.5px;color:var(--muted);padding:5px 8px;text-align:center;position:sticky;top:0}
.addt td{border-top:1px solid var(--line);padding:3px 8px;text-align:center}
.addt td.dn{font-weight:800;width:34px}.addt td.wd{color:var(--muted);width:78px}
.addt td.st{text-align:start}.addt td.h{width:70px}.addt td.mk{width:34px}
.addt tr.nw td{background:color-mix(in srgb,var(--panel-2) 70%,transparent)}
.adst{display:inline-block;padding:1px 9px;border-radius:999px;background:var(--cbg);color:var(--cfg);font-weight:700;font-size:12px}
.adrung{display:flex;flex-direction:column;gap:4px;margin:4px 0}
.adrung > label{font-size:12px;font-weight:800;color:var(--ink-2)}
.adsig{border:1px dashed var(--line-2);border-radius:10px;padding:8px 10px;min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.adsig img{max-height:64px;max-width:260px;background:#fff}
.adsig.done{border-style:solid;background:color-mix(in srgb,var(--pos) 5%,var(--panel))}
.adsig.lock{color:var(--muted);background:var(--panel-2);cursor:not-allowed;font-size:12.5px}
.adsig.blocked{border-color:#f5c2c0;background:#fff6f5;align-items:flex-start;text-align:start;font-size:12.5px}
.adsig.blocked ul{margin:4px 0;padding-inline-start:18px}
.adsig.mine{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,var(--panel))}
.adwho{font-size:12px;color:var(--ink-2)}
.adovr{font-size:11.5px;color:#9a5b00;font-weight:700}
/* «بصمتي»: the month ready to sign, or what keeps it open */
.signbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 12px;margin:0 0 10px;border-radius:10px;font-size:13px}
.signbar.ok{background:color-mix(in srgb,var(--pos) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--pos) 40%,transparent)}
.signbar.warn{background:#fff7e6;border:1px solid #f3d28b}
.signbar .sbdays{display:flex;flex-wrap:wrap;gap:4px}
.sbDay{cursor:pointer;border:0;font:inherit}
/* «معلقات الشهور» */
.mcnav{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.mcnav b{font-size:15px;min-width:130px;text-align:center}
.mcmine{padding:8px;margin-bottom:10px}
.mcminehd{font-size:12px;font-weight:800;color:var(--muted);margin:0 4px 6px}
.mcsec{margin:0 0 10px}
.mcsec > summary{cursor:pointer;padding:6px 4px;font-size:13.5px;list-style:none}
.mcsec > summary::-webkit-details-marker{display:none}
/* the days on the left and the totals with the signatures on the right, whatever the language */
.adgrid{direction:ltr;grid-template-columns:minmax(330px,1fr) minmax(380px,1.1fr)}
.adgrid > .addays{order:1}.adgrid > .adside{order:2}
[dir="rtl"] .adgrid > *{direction:rtl}

/* ── the day's punches window (cancel / bring back) and the ⚡ day card ── */
.odsum{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.odsum>div{border:1px solid var(--line);border-radius:8px;padding:6px 10px;min-width:92px;background:var(--panel-2,var(--panel))}
.odsum span{display:block;font-size:11px;color:var(--muted)}
.odsum b{font-size:15px}
.odsum small{display:block;font-size:11px;margin-top:2px}
.odok{color:var(--pos);font-weight:600}
.odbad{color:var(--neg);font-weight:600}
.odt{width:100%;border-collapse:collapse}
.odt th,.odt td{border:1px solid var(--line);padding:5px 8px;vertical-align:top}
.odt tr.eavoid td{text-decoration:none;opacity:1;background:color-mix(in srgb,var(--neg) 6%,transparent)}
.odt tr.eavoid td:nth-child(2) b{text-decoration:line-through;color:var(--muted)}
.odtr{font-size:11.5px;margin-top:3px}
.odtr.void{color:var(--neg)}
.odtr.restore{color:var(--pos)}
.odsick{border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin:0 0 8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.odsick.was{border-style:dashed;color:var(--muted)}
.odhint{font-size:11.5px;margin-top:8px}
.cmpcard.daycard{border-color:#2563eb}
.dcHead{font-weight:700;font-size:12.5px;color:#2563eb;margin-bottom:5px}
.cmpt.dct th{background:color-mix(in srgb,#2563eb 10%,transparent)}
.cmpt.dcn{margin-top:6px}
.cmpt.dcn td.k{width:40%}
.mylate{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:8px 12px;border-top:1px solid var(--line);font-size:12.5px}

/* ═══ where, and which month (place.js) ═══ */
.place-picker{position:relative}
.place-picker #btnPlace{min-width:150px;display:inline-flex;align-items:center;gap:7px;font-weight:600}
.place-picker #btnPlace:disabled{opacity:1;cursor:default}
.pl-dot{width:10px;height:10px;border-radius:50%;background:var(--brand);flex:none;box-shadow:0 0 0 2px var(--panel)}
#placeMenu{min-width:280px;max-height:70vh}
.pl-list{display:flex;flex-direction:column;gap:4px}
.pl-item{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:9px 12px;
  padding-inline-start:calc(12px + var(--ind, 0px));border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--ink);cursor:pointer;font:inherit;font-size:14px}
.pl-item:hover{border-color:var(--brand);background:var(--panel-2)}
.pl-item.on{border-color:var(--brand);background:var(--brand-lt);font-weight:700}
.pl-item .pl-ic{width:16px;text-align:center;color:var(--pc, var(--muted));font-size:13px}
.pl-item.node{background:var(--panel-2);font-weight:600}
.pl-item.all{font-weight:700}
.pl-item .pl-nm{flex:1}
.pl-item small{color:var(--muted);font-size:11.5px}
.pick-list.pl-list{max-height:60vh;overflow:auto;padding:2px}
.pl-choose{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;padding:16px}
.month-ctl{display:flex;align-items:center;gap:4px}
.month-ctl .mon-step{min-width:30px;padding-inline:8px;font-weight:700}
.month-ctl #monToday{margin-inline-start:4px}
body[data-scope="free"] .place-picker #btnPlace,body[data-scope="free"] .month-ctl select,body[data-scope="free"] .month-ctl .btn{background:var(--panel-2);color:var(--muted);border-style:dashed;box-shadow:none}
body[data-scope="free"] .place-picker .pl-dot{background:var(--line-2)}
body[data-scope="free"] .place-picker label,body[data-scope="free"] .month-ctl label{color:var(--muted)}
body[data-scope="range"] .month-ctl{opacity:.7}

/* the strip under a title: where, when, and whether the month is open */
.placebar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:-4px 0 12px;
  padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);
  border-inline-start:6px solid var(--pc, var(--brand));font-size:13.5px}
.placebar.soft{border-inline-start-color:var(--line-2)}
.placebar .pb-where{font-weight:800;color:var(--pc, var(--ink))}
.placebar .pb-when{font-weight:600;color:var(--ink-2)}
.placebar .pb-lock{margin-inline-start:auto;font-weight:700;padding:2px 10px;border-radius:20px;background:var(--panel-2)}
.placebar .pb-lock.closed,.placebar .pb-lock.future{background:#fbe9e7;color:#9a2a20}
.placebar .pb-lock.some,.placebar .pb-lock.reopened{background:#fdf3d8;color:#7a5a00}
.placebar .pb-lock.open{color:var(--pos)}
[data-theme="dark"] .placebar .pb-lock.closed,[data-theme="dark"] .placebar .pb-lock.future{background:#3a1d1a;color:#f2a39b}
[data-theme="dark"] .placebar .pb-lock.some,[data-theme="dark"] .placebar .pb-lock.reopened{background:#3a3016;color:#e9cf7c}
/* a closed month is read, not written: the save buttons and the cells step back */
.period-locked .page-head .btn-primary,.period-locked .panel .btn-primary,
.period-locked table input,.period-locked table select,.period-locked .entry-form input,
.period-locked .entry-form select,.period-locked .entry-form textarea{pointer-events:none;opacity:.45}

/* a report's own months and branches */
.rangebar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-4px 0 12px;padding:8px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel-2);font-size:13px}
.rangebar select{padding:4px 8px}
.rangebar .rb-lbl{color:var(--muted);font-weight:600}
.rangebar .rb-yr{font-weight:700;color:var(--ink-2)}
.rangebar .rb-sep{width:1px;height:22px;background:var(--line-2);margin:0 4px}
.rb-chip{border:1px solid var(--line-2);background:var(--panel);border-radius:20px;padding:3px 11px;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--ink);border-inline-start:4px solid var(--pc, var(--line-2))}
.rb-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
@media (max-width:760px){
  .placebar .pb-lock{margin-inline-start:0}
  .month-ctl{flex-wrap:wrap}
}

/* ═══ the salary history (salary.js) ═══ */
.sal-now-box{display:flex;align-items:center;gap:10px;padding:6px 0}
.sal-now-box b{font-size:16px}
.sal-now{font-size:14px;margin-bottom:10px}
.sal-tbl .num{text-align:end}
.sal-tbl .pos,.paytbl .pos{color:var(--pos)}
.sal-tbl .neg,.paytbl .neg{color:var(--neg)}
.sal-add{margin-top:14px;border-top:1px dashed var(--line-2);padding-top:10px}
.sal-add h4{margin:0 0 8px;font-size:14px}

/* ═══ the months screen (periods.js) — own class names (mg-*) so nothing else styles them ═══ */
.yr-step{display:flex;align-items:center;gap:8px;font-size:16px}
.mg-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:-4px 0 12px;font-size:12.5px;color:var(--ink-2)}
.mg-key{display:inline-flex;align-items:center;gap:6px}
.mg-hint{color:var(--muted);margin-inline-start:auto}

table.mg-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}
table.mg-grid col.mg-c0{width:170px}
table.mg-grid th{font-size:12.5px;font-weight:700;padding:9px 4px;text-align:center;background:var(--panel-2);
  border-bottom:1px solid var(--line)}
table.mg-grid th.mg-c0,table.mg-grid td.mg-c0{text-align:start;padding-inline:12px}
table.mg-grid th.now{color:var(--brand);box-shadow:inset 0 -3px 0 var(--brand)}
table.mg-grid th.fut{color:var(--muted)}
table.mg-grid td{padding:5px 4px;border-bottom:1px solid var(--line);vertical-align:middle;text-align:center}
table.mg-grid td.now{background:color-mix(in srgb,var(--brand) 6%,transparent)}
table.mg-grid tr:hover td{background:var(--panel-2)}
.mg-br{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-inline-end:8px;vertical-align:middle}
.mg-sum td{background:var(--panel-2);font-weight:700;font-size:12.5px}
.mg-pill{display:inline-block;min-width:44px;padding:2px 8px;border-radius:20px;background:var(--panel);border:1px solid var(--line);font-size:12px}
.mg-pill.some{border-color:#e0a400;color:#8a6400}
.mg-pill.full{background:var(--brand);border-color:var(--brand);color:#fff}
.mg-cell{display:flex;flex-direction:column;align-items:stretch;gap:5px;width:100%;max-width:96px;margin:auto;
  padding:7px 7px 6px;border:1px solid var(--line);border-radius:9px;background:var(--panel);cursor:pointer;font:inherit}
.mg-cell:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
.mg-cell.done{background:var(--brand-lt);border-color:var(--brand)}
.mg-cell.part{border-color:#e0c26a}
.mg-cell.fut{opacity:.45}
.mg-bar{display:flex;gap:2px;height:7px}
.mg-bar .mg-s{flex:1;height:7px;border-radius:2px}
.mg-s{display:inline-block;width:14px;height:9px;border-radius:2px;background:var(--line);border:1px solid var(--line-2)}
.mg-s.closed{background:var(--brand);border-color:var(--brand)}
.mg-s.reopened{background:#e0a400;border-color:#e0a400}
.mg-key .mg-bar{width:60px}
.mg-txt{font-size:11.5px;font-weight:700;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-cell.done .mg-txt{color:var(--brand)}
@media (max-width:900px){table.mg-grid{width:auto;table-layout:auto}table.mg-grid td{min-width:78px}
  table.mg-grid td.mg-c0{position:sticky;inset-inline-start:0;background:var(--panel);z-index:1}}

/* one month's window: four parts, room for every name, and the reminders */
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:stretch}
.pcard{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--panel);display:flex;flex-direction:column;gap:8px;min-height:240px}
.pcard.closed{border-color:var(--brand);background:var(--brand-lt)}
.pcard.reopened{border-color:#e0a400}
.pcard header{display:flex;align-items:center;gap:8px;font-size:15px}
.pcard header .pchip{margin-inline-start:auto}
.pcard-body{flex:1;display:flex;flex-direction:column;gap:6px}
.pchip{font-size:12px;font-weight:700;padding:2px 10px;border-radius:20px;background:var(--panel-2)}
.pchip.closed{color:var(--brand)}
.pchip.reopened{color:#8a6400;background:#fdf3d8}
.pchip.open{color:var(--pos)}
.pmeta{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.7}
.pneed{margin:2px 0 0;font-weight:700;font-size:12.5px;color:var(--neg)}
.pready{margin:2px 0 0;font-weight:700;color:var(--pos);font-size:13px}
.pblock{margin:0;padding-inline-start:18px;font-size:13px;line-height:1.9}
.pblock li.bl-wide{list-style:none;margin-inline-start:-18px}
.bl-list{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.bl-list span{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:0 7px;font-size:11.5px}
.bl-people{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow:auto;margin:6px 0;
  border:1px solid var(--line);border-radius:10px;padding:4px}
.bl-p{display:flex;gap:8px;align-items:center;padding:5px 8px;border-radius:8px}
.bl-p:nth-child(odd){background:var(--panel-2)}
.bl-who{flex:1;display:flex;flex-direction:column;line-height:1.35;min-width:0}
.bl-who small{color:var(--muted);font-size:11.5px}
.bl-p .rm-one{padding:1px 7px;min-height:auto}
.pacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pform{border-top:1px dashed var(--line-2);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.pform textarea,.pform input{width:100%}
.rm-urg{display:inline-flex;align-self:flex-start}
.rm-urg button.on[data-u="urgent"]{background:#c0392b;border-color:#c0392b;color:#fff}
.rm-st{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:20px;white-space:nowrap}
.rm-st.sent{background:var(--panel-2);color:var(--ink-2)}
.rm-st.sent.urg{background:#fdecea;color:#a1271b}
.rm-st.seen{background:#e8f1fd;color:#1d5fa8}
.rm-st.done{background:color-mix(in srgb,var(--pos) 14%,transparent);color:var(--pos)}
.rm-urgtag{font-size:11.5px;font-weight:700;color:#a1271b}
.pnote{margin:0 0 10px;padding:8px 12px;border-radius:8px;background:#fdf3d8;color:#7a5a00;font-weight:600}
.phist{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.phist summary{cursor:pointer;font-weight:700;font-size:13px}
.tbl-mini{width:100%;font-size:12.5px;margin-top:6px;border-collapse:collapse}
.tbl-mini th{text-align:start;font-size:11.5px;color:var(--muted);padding:4px 6px}
.tbl-mini td{padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
[data-theme="dark"] .pchip.reopened,[data-theme="dark"] .pnote{background:#3a3016;color:#e9cf7c}
[data-theme="dark"] .rm-st.seen{background:#16263a;color:#8fbbef}
[data-theme="dark"] .rm-st.sent.urg{background:#3a1d1a;color:#f2a39b}

/* «بصمتي»: the days to complete are just their numbers, each a button */
.signbar .sbdays .sbDay{min-width:36px;height:32px;padding:0 8px;font-size:14px;font-weight:800;border-radius:9px;
  justify-content:center;cursor:pointer;border:1.5px solid #d99a12;background:#fff3d1;color:#7a5200}
.signbar .sbdays .sbDay:hover{background:#d99a12;color:#fff}
[data-theme="dark"] .signbar .sbdays .sbDay{background:#3a3016;color:#e9cf7c}
.scroll.nofit{max-height:none !important}

/* ═══ the workplace picker — grouped (place.js) ═══ */
.login-card.wide{max-width:min(880px,94vw);width:100%}
.pl2{display:flex;flex-direction:column;gap:14px;text-align:start}
.pl2 .pl-find{margin:0}
.pl-all{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px 16px;
  border:1.5px solid var(--line-2);border-radius:12px;background:var(--panel-2);cursor:pointer;font:inherit;font-size:15px;font-weight:800;color:var(--ink)}
.pl-all small{color:var(--muted);font-weight:600;font-size:12px}
.pl-all:hover,.pl-all.on{border-color:var(--brand);background:var(--brand-lt)}
.pl2-sec h5,.pl2-sec summary{margin:0 0 8px;font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.02em;cursor:default}
.pl2-sec summary{cursor:pointer}
.pl2-chips{display:flex;flex-wrap:wrap;gap:6px}
.pl-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--line-2);border-radius:20px;
  background:var(--panel);cursor:pointer;font:inherit;font-size:13.5px;color:var(--ink)}
.pl-chip i{width:9px;height:9px;border-radius:50%;background:var(--pc, var(--brand))}
.pl-chip small{color:var(--muted);font-size:11px;background:var(--panel-2);border-radius:10px;padding:0 6px}
.pl-chip:hover{border-color:var(--pc, var(--brand));box-shadow:0 0 0 2px var(--brand-lt)}
.pl-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pl-chip.on i{background:#fff}
.pl-chip.node{font-weight:700}
.pl2-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pl2-card{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--panel);display:flex;flex-direction:column;gap:8px}
.pl2-head{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:6px 8px;border:0;border-radius:8px;
  background:var(--panel-2);cursor:pointer;font:inherit;color:var(--ink);text-align:start}
.pl2-head b{font-size:14px}
.pl2-head small{font-size:11px;color:var(--muted)}
.pl2-head:hover,.pl2-head.on{background:var(--brand-lt);box-shadow:inset 0 0 0 1.5px var(--brand)}
.pl2-head.plain{cursor:default}
.pl2-head.plain:hover{background:var(--panel-2);box-shadow:none}
#placeMenu{min-width:min(620px,92vw);max-width:92vw;max-height:72vh;padding:12px}
@media (max-width:600px){.pl2-cards{grid-template-columns:1fr}}

/* ═══ the org chart: the last layer stands in a column, and the chart fits the screen ═══ */
.orgchart ul.overt{flex-direction:column;align-items:center;gap:10px;padding-top:24px;position:relative}
.orgchart ul.overt::before{content:'';position:absolute;top:0;bottom:24px;inset-inline-start:50%;
  border-inline-start:1.5px solid var(--line-2)}
.orgchart ul.overt > .ocell::before,.orgchart ul.overt > .ocell::after{display:none}
.orgchart ul.overt > .ocell{padding:0}
.orgchart ul.overt .ocard{z-index:1}
.ozoom{display:inline-flex;align-items:center;gap:4px;padding:0 6px;border:1px solid var(--line);border-radius:9px}
.ozoom b{min-width:42px;text-align:center;font-size:12px}
.orgpan{cursor:grab}
.orgpan.dragging{cursor:grabbing;user-select:none}
/* from the third layer down: each line of the company runs downward, a step inward per layer */
.orgchart ul.orow{align-items:flex-start}
.orgchart ul.otree{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;
  padding:14px 0 0;padding-inline-start:16px;margin-inline-start:16px;margin-top:-2px;
  border-inline-start:1.5px solid var(--line-2);align-self:stretch}
.orgchart ul.otree > .tcell{position:relative;display:flex;flex-direction:column;align-items:flex-start;list-style:none}
.orgchart ul.otree > .tcell::before{content:'';position:absolute;top:24px;inset-inline-start:-16px;width:16px;
  border-top:1.5px solid var(--line-2)}
.orgchart ul.otree > .tcell:last-child::after{content:'';position:absolute;top:25px;bottom:0;inset-inline-start:-18px;
  width:4px;background:var(--panel)}
.orgchart ul.otree .ocard .otog{inset-inline-start:auto;inset-inline-end:8px;transform:none}
.orgchart .ocell > ul.otree{margin-inline-start:24px}
.orgchart ul.otree .ocard,.orgchart ul.overt .ocard{width:172px}

/* ═══ pinned columns and headings, everywhere (core.js freezeCols) ═══ */
table.fzon td.fz{background:var(--fz-bg,var(--panel));z-index:2}
table.fzon th.fz{z-index:6 !important;background:var(--head-bg,var(--panel-2))}
table.fzon tfoot td.fz{background:var(--panel-2)}
table.fzon .fz-last{box-shadow:inset calc(-1px * var(--fz-dir,1)) 0 0 var(--line-2), 6px 0 8px -8px rgba(0,0,0,.25)}
[dir="rtl"] table.fzon .fz-last{box-shadow:inset 1px 0 0 var(--line-2), -6px 0 8px -8px rgba(0,0,0,.25)}
table.fzon tbody tr:hover td.fz{background:color-mix(in srgb,var(--brand) 5%,var(--panel))}
/* headings are always opaque: nothing shows through while rows pass under them */
table thead th{background-clip:padding-box}
.fzbtn{border:0;background:transparent;cursor:pointer;font-size:11px;padding:0 3px;margin-inline-end:3px;opacity:.35;
  vertical-align:middle;line-height:1}
.fzbtn:hover,table.fzon .fzbtn{opacity:.9}
.fzmenu{position:fixed;z-index:400;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.35);padding:6px;min-width:220px;max-width:300px;display:flex;flex-direction:column;gap:2px}
.fzmenu .fzh{font-size:11.5px;color:var(--muted);font-weight:700;padding:4px 8px}
.fzmenu button{border:0;background:transparent;text-align:start;padding:7px 10px;border-radius:7px;cursor:pointer;font:inherit;font-size:13px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fzmenu button:hover{background:var(--panel-2)}
.fzmenu button.on{background:var(--brand-lt);font-weight:700}
/* the month's own total row, after its last day */
table tfoot tr.eatotal td{background:var(--panel-2);font-weight:700;border-top:2px solid var(--line-2);position:sticky;bottom:0;z-index:1}
.eatotal .eaf{display:inline-block;margin-inline-end:12px;font-size:12.5px}

/* ═══ the date box: shows and takes 01-10-2026, the calendar one click away (dates.js) ═══ */
.dface-wrap{position:relative;display:inline-flex;align-items:center;max-width:100%;vertical-align:middle}
.field .dface-wrap,.entry-grid .dface-wrap{display:flex;width:100%}
.dface-wrap .dface{flex:1;min-width:118px;font-variant-numeric:tabular-nums;padding-inline-end:30px !important;text-align:start}
.dface-wrap .dface.bad{border-color:var(--neg) !important;box-shadow:0 0 0 2px color-mix(in srgb,var(--neg) 18%,transparent)}
.dface-wrap .dface-cal{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);border:0;background:transparent;
  cursor:pointer;font-size:13px;padding:2px 4px;line-height:1;opacity:.75}
.dface-wrap .dface-cal:hover{opacity:1}
.dface-wrap .dface-real{position:absolute;inset-inline-end:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
td .dface-wrap{width:100%}
td .dface-wrap .dface{min-width:100px}
.renew-note{padding:8px 12px;border-radius:9px;background:color-mix(in srgb,var(--pos) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--pos) 35%,transparent);font-size:12.5px;font-weight:600}
.exgrp header{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.exgrp header h3{margin:0;font-size:15px}
.mv-wait td{background:#fff9e8}
.mv-now td{font-weight:600}
[data-theme="dark"] .mv-wait td{background:#2c2614}
.ntgrp{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.ntgrp > summary{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--panel-2);cursor:pointer;font-size:13.5px;list-style:none}
.ntgrp > summary::-webkit-details-marker{display:none}
.ntgrp > summary .ntgic{font-size:16px}
.ntgrp .ntrow{border-radius:0;border-inline:0}

/* ═══ معلقات الشهور (rebuilt) ═══ */
.pdkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 12px}
.pdk{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.pdk b{font-size:24px;line-height:1.1}
.pdk span{font-size:12.5px;color:var(--muted);font-weight:600}
.pdk.warn{border-color:#e0c26a}.pdk.warn b{color:#8a6400}
.pdk.info{border-color:#9cc1ec}.pdk.info b{color:#1d5fa8}
.pdk.ok b{color:var(--pos)}
.pdk.hot{border-color:var(--neg);background:color-mix(in srgb,var(--neg) 6%,var(--panel))}.pdk.hot b{color:var(--neg)}
.pdmine{padding:12px 14px;border-inline-start:5px solid var(--brand)}
.pdmine-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14px}
.pdmine-b{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px;font-size:13px}
.pdmine-b .btn{margin-inline-start:auto}
.pdsec-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:14px}
.pdsec-h input[type=search]{max-width:200px}
.pdturn-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;padding:10px}
.pdturn-i{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);cursor:pointer;font:inherit;color:var(--ink);text-align:start;position:relative}
.pdturn-i:hover{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-lt)}
.pdturn-i .pdgo{position:absolute;inset-inline-end:10px;top:10px;font-size:12px;font-weight:700;color:var(--brand)}
.pdbar{display:inline-block;width:70px;height:7px;border-radius:5px;background:var(--line);overflow:hidden;vertical-align:middle;margin-inline-end:6px}
.pdbar i{display:block;height:100%;background:var(--brand)}
.pdtbl tr.pddone td{opacity:.7}
.chip.info{background:#e8f1fd;color:#1d5fa8}
[data-theme="dark"] .chip.info{background:#16263a;color:#8fbbef}
.emacts{white-space:nowrap}
.emacts-in{display:inline-flex;gap:4px;align-items:center}
.emacts-in .btn{padding:2px 8px}
/* the pin on a column heading: out of sight until the pointer is over it; always shown once pinned */
th .fzpin{border:0;background:transparent;cursor:pointer;font-size:10px;padding:0 2px;margin-inline-start:4px;opacity:0;
  vertical-align:middle;line-height:1;filter:grayscale(1);transition:opacity .12s}
th:hover .fzpin{opacity:.55}
th .fzpin:hover{opacity:1;filter:none}
th .fzpin.on{opacity:1;filter:none}
.fzbtn{display:none}

/* ═══ a table inside a window: always inside its margins ═══
   The window's body never scrolls sideways (it would carry its title and buttons
   away), so a table wider than the window used to be cut at both edges. Now the
   table's own box scrolls sideways inside the window's margins, with its first
   columns pinned like everywhere else. Printing is untouched. */
#modalRoot .modal-body .scroll{overflow-x:auto;max-width:100%;--sticky-top:0px}
#modalRoot .modal-body > table{display:block;overflow-x:auto;max-width:100%}
#modalRoot .modal-body .pvwrap{overflow:hidden;max-width:100%}
#modalRoot .modal-body .pvframe{max-width:100%}
/* the top controls on a screen that does not read them: darkened and shut, never white */
body[data-topshut="1"] .place-picker #btnPlace,body[data-topshut="1"] .month-ctl select,body[data-topshut="1"] .month-ctl .btn{
  background:color-mix(in srgb,var(--ink) 9%,var(--panel)) !important;color:var(--muted) !important;
  border:1px solid var(--line) !important;border-style:solid !important;cursor:not-allowed;opacity:1;box-shadow:none}
body[data-topshut="1"] .place-picker .pl-dot{background:var(--muted) !important}

/* ═══ the employee card: titled parts on a steady grid — nothing overlaps, whatever the width ═══ */
#efPane .ef-sec{border:1px solid var(--line);border-radius:12px;padding:12px 14px 14px;margin:0 0 12px;background:var(--panel)}
#efPane .ef-sec > h4{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:14px}
#efPane .ef-sec > h4 .btn{margin-inline-start:auto}
#efPane .ef-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;align-items:start}
#efPane .ef-grid > .field{min-width:0;margin:0}
#efPane .ef-grid .field > label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}
#efPane .ef-grid .field input,#efPane .ef-grid .field select{width:100%;min-width:0;box-sizing:border-box}
#efPane .ef-grid .dface-wrap{width:100%}
#efPane .ef-wide{grid-column:1/-1}
#efPane .fhint{display:block;font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5}
#efPane .sal-now-box{display:flex;align-items:center;min-height:38px;padding:0 12px;border:1px dashed var(--line-2);border-radius:8px;background:var(--panel-2)}
#efPane .sal-now-box b{font-size:16px}
#efPane .ef-salbtn{margin-top:6px;width:100%;justify-content:center}
@media (max-width:900px){#efPane .ef-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){#efPane .ef-grid{grid-template-columns:1fr}}

/* the place chooser: the place on one line, the rest one click away, grouped like the company */
.pp2-now{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--brand);border-radius:10px;background:var(--brand-lt)}
.pp2-now.none{border-style:dashed;border-color:var(--line-2);background:var(--panel-2)}
.pp2-dot{width:12px;height:12px;border-radius:50%;flex:none}
.pp2-txt{flex:1;min-width:0}
.pp2-txt .pp-read{font-size:12px;color:var(--ink-2);margin-top:2px}
.pp2-pick{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--panel)}
.pp2-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.pp2-bar .pp-q{flex:1;min-width:160px}
.pp-tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.pp2-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;max-height:320px;overflow:auto;padding:2px}
.pp2-card{border:1px solid var(--line);border-radius:10px;padding:8px}
.pp2-gh{font-size:12px;font-weight:800;color:var(--ink-2);margin-bottom:6px}
.pp2-chips{display:flex;flex-wrap:wrap;gap:5px}
.pp2-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line-2);border-radius:18px;background:var(--panel);
  cursor:pointer;font:inherit;font-size:13px;color:var(--ink)}
.pp2-chip i{width:8px;height:8px;border-radius:50%;background:var(--pc)}
.pp2-chip small{color:var(--muted);font-size:10.5px}
.pp2-chip:hover{border-color:var(--pc,var(--brand))}
.pp2-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pp2-chip.on i{background:#fff}

/* ⚙ one button per employee row, its actions in a small menu */
.emacts{width:1%;text-align:center}
.emGear{padding:2px 9px;font-size:14px;line-height:1.3}
.emGear.on{background:var(--brand);border-color:var(--brand);color:#fff}
.emmenu{position:fixed;z-index:3000;min-width:190px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.18);padding:5px;display:flex;flex-direction:column}
.emmenu-h{font-size:11px;color:var(--muted);padding:4px 10px 6px;border-bottom:1px solid var(--line);margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.emmenu button{all:unset;display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;cursor:pointer;
  font-size:13px;color:var(--ink);white-space:nowrap}
.emmenu button i{font-style:normal;width:18px;text-align:center}
.emmenu button:hover,.emmenu button:focus-visible{background:var(--panel-2)}
.emmenu button.warn{color:var(--neg)}

/* 🌴 vacations record · 📦 custody · 🎓 certificates — tables inside the card and its windows */
.lh-box,.cu-box{border:1px solid var(--line);border-radius:9px;max-height:46vh;overflow:auto}
.lhtbl td,.lhtbl th,.cu-tbl td,.cu-tbl th{white-space:nowrap}
.lhtbl tr.total td{background:var(--panel-2);font-weight:800}
.cu-sec h4{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cu-sec h4 .btn{margin-inline-start:auto}
.cu-sec + .cu-sec{margin-top:14px}
.ct-add{display:grid;grid-template-columns:2fr 1fr 1.4fr auto;gap:10px;align-items:end;margin-top:10px;
  padding-top:10px;border-top:1px dashed var(--line)}
.ct-add .field{margin:0}
@media (max-width:760px){.ct-add{grid-template-columns:1fr 1fr}}

/* 🖨 the print window's own bar: page direction, letter size, Excel */
.pvmodal > footer{flex-wrap:wrap;row-gap:8px}
.pv-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pv-lbl{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.pv-tools select{padding:3px 8px;border-radius:7px}
.pv-now{font-size:11.5px}
.lhtbl tr.lh-off td{color:var(--muted);background:var(--panel-2)}
.attcell.attaway{background:repeating-linear-gradient(135deg,#eef6f3 0 6px,#e3efe9 6px 12px);color:#0f766e;cursor:not-allowed}
.attcell.attaway .attro{font-weight:700;font-size:11px}
.ro-box{min-height:36px;display:flex;align-items:center;padding:0 10px;border:1px dashed var(--line);border-radius:8px;background:var(--panel-2)}
.lh-calc{margin:6px 0 10px;padding:8px 10px;border-radius:8px;background:var(--panel-2);font-size:12.5px}
.away-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#ecf8f4;border:1px solid #9fd8c6;color:#0f5c4a;margin-bottom:12px}

/* 🧮 how a balance was worked out — the same table on screen and on paper (calc-view.js) */
.cv{margin:6px 0 16px}
.cv-h{font-weight:800;font-size:13.5px;margin:4px 0 6px}
.cv table{width:100%;border-collapse:collapse;margin:6px 0;font-size:12.5px}
.cv td,.cv th{border:1px solid var(--line);padding:6px 9px}
.cv th{background:var(--panel-2);font-weight:800}
.cv .n{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.cv tr.total td{background:var(--panel-2);font-weight:800}
.cv .cv-kv td:first-child{background:var(--panel-2);font-weight:700;width:28%}
.cv .cv-sum{max-width:520px}
.cv .cv-sum tr.grand td{background:#e3efe3;color:#0b5d1e;font-size:14px}
.cv .cv-sub{font-weight:800;margin:12px 0 2px}
.cv .cv-note{color:var(--muted);margin:6px 0}

/* 📄 settlement documents: the route, the wizard, the inbox (settle-docs.js) */
.sd-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sd-total{font-size:20px;font-weight:800;color:#0b5d1e}
.sd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.sd-grid{grid-template-columns:1fr}}
.sd-kv{width:100%;border-collapse:collapse;font-size:12.5px}
.sd-kv td{border:1px solid var(--line);padding:6px 9px}
.sd-kv td:first-child{background:var(--panel-2);font-weight:700;width:38%}
.sd-tl{display:flex;flex-direction:column;gap:6px}
.sd-st{display:flex;gap:9px;align-items:flex-start;font-size:12.5px}
.sd-dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-2);font-size:11px;flex:none}
.sd-st.done .sd-dot{background:#16a34a;border-color:#16a34a;color:#fff}
.sd-st.now .sd-dot{background:#fef3c7;border-color:#f59e0b}
.sd-st.now b{color:#b45309}
.sd-lines{width:100%;border-collapse:collapse;margin:8px 0}
.sd-lines td,.sd-lines th{border:1px solid var(--line);padding:6px 9px}
.sd-steps{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.sd-step{padding:5px 11px;border-radius:999px;background:var(--panel-2);font-size:12px;color:var(--muted)}
.sd-step b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--line);margin-inline-end:4px;font-size:10.5px}
.sd-step.on{background:var(--brand);color:#fff}.sd-step.on b{background:#fff;color:var(--brand)}
.sd-step.done{color:#16a34a}.sd-step.done b{background:#16a34a;color:#fff}
.sd-sum{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0 12px}
.sd-sum > div{display:flex;flex-direction:column;padding:10px 14px;border:1px solid var(--line);border-radius:10px;min-width:160px}
.sd-sum b{font-size:16px}
.sd-route{margin:4px 0 12px;padding-inline-start:22px;font-size:13px}
tr.sd-hot td{background:#fff8e6}
tr.sd-off td{opacity:.55;text-decoration:line-through}
tr.sd-off td .chip{text-decoration:none}
.sr-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.sr-row select{flex:1}

/* a scanned document check (verify.js): the genuine-document line */
.msg.vf-ok{background:#e7f6ec;color:#0a6b2a;border:1px solid #b9e3c6;font-weight:700}
[data-theme="dark"] .msg.vf-ok{background:#12291a;color:#7fd6a0;border-color:#244a31}

/* ═══ messages where the eyes are (core.js toast / markNeed, owner 2026-10-03) ═══ */
/* the side message sits ABOVE the dimmed screen of an open window */
.toast{z-index:400}
.toast.err{background:#b42318;color:#fff}
.toast.ok{background:#0a7a2f;color:#fff}
/* and the same message inside the open window, above its buttons */
.modal > .dlg-msg{flex:0 0 auto;margin:0 18px 10px;padding:9px 12px;border-radius:8px;font-size:13px;font-weight:600;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink);animation:dlgmsg .25s ease-out}
.modal > .dlg-msg.err{background:#fdeceb;border-color:#f3c5c1;color:#9a1c13}
.modal > .dlg-msg.ok{background:#e7f6ec;border-color:#b9e3c6;color:#0a6b2a}
[data-theme="dark"] .modal > .dlg-msg.err{background:#2b1614;border-color:#4a2320;color:#ffb4ab}
[data-theme="dark"] .modal > .dlg-msg.ok{background:#12291a;border-color:#244a31;color:#7fd6a0}
@keyframes dlgmsg{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* what is missing, pointed at: red, and a short shake */
.need{outline:2px solid #d92d20 !important;outline-offset:2px;border-radius:6px;animation:needshake .35s}
@keyframes needshake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* a signature box not signed yet is marked as required before anyone presses save */
.sigpad:not(.has):has(canvas){border-color:#e5484d}
.sigpad:not(.has) .sighint{color:#c4320a;font-weight:700}
.sigpad:not(.has) .sighint::after{content:" *";color:#d92d20}

/* ═══ A TABLE WIDER THAN THE PHONE MOVES SIDEWAYS (owner, 2026-10-03) ═══
   On a phone or a small tablet the panel cannot grow with its table (the page is
   only as wide as the screen), and «.panel{overflow:clip}» cut the rest off with
   no way to reach it. There, every panel scrolls sideways by finger, the name
   column staying pinned — for every table in the program, not one screen. */
@media (max-width:900px){
  .panel{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;max-width:100%}
  .panel > header{position:sticky;inset-inline-start:0}
  .panel .scroll{overflow:visible}
}

/* ═══ the electronic signature on screen (signature.js) — painted, marked, not taken away ═══ */
.sigview{position:relative;height:110px;border:1px solid var(--line);border-radius:9px;background:#fff center/contain no-repeat;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.sigview .sigwm{position:absolute;inset:auto 0 5px 0;text-align:center;font-size:10px;color:rgba(0,0,0,.32);letter-spacing:1px;pointer-events:none}
.sigsafe{font-size:12px;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:10px 0 0;line-height:1.7}
.decltext{border:1px solid var(--line);border-radius:8px;padding:10px 12px;line-height:1.9;background:var(--panel-2);font-size:13px}
.reqmark{color:var(--neg);font-weight:800}
.sigpad img,.sigsaved img,.adsig img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}

/* ═══ the form designer (form-designer.js): the paper's order on one side, the paper on the other ═══ */
.modal.fdmodal{max-width:min(1500px,97vw);width:97vw}
.fd{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px;height:calc(var(--dlg-h,86vh) - 120px);min-height:520px}
.fd-ed{overflow:auto;padding-inline-end:4px}
.fd-pv{display:flex;flex-direction:column;background:#e5e7eb;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.fd-pvbar{padding:6px 10px;font-size:12px;font-weight:700;background:var(--panel-2);border-bottom:1px solid var(--line)}
.fd-frame{flex:1;border:0;width:100%;background:#e5e7eb}
.fd-tabs{display:none;gap:6px;margin-bottom:8px}
.fd-tabs button{flex:1;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font:inherit;cursor:pointer}
.fd-tabs button.on{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:700}
@media (max-width:900px){
  .fd{grid-template-columns:1fr;height:auto}
  .fd-tabs{display:flex}
  .fd[data-view="ed"] .fd-pv{display:none}
  .fd[data-view="pv"] .fd-ed{display:none}
  .fd[data-view="pv"] .fd-pv{height:75vh}
}
.fd-sec{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:var(--panel)}
.fd-h{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14px}
.fd-h i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:13px}
.fd-hint{font-size:11.5px;color:var(--muted);margin:-4px 0 8px;line-height:1.7}
.fd-fld{border:1px dashed var(--line-2);border-radius:8px;padding:6px 8px;margin-bottom:6px;display:flex;flex-direction:column;gap:5px}
.fd-fldA{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fd-fldA .fa{flex:2 1 160px}.fd-fldA .fe{flex:2 1 140px}.fd-fldA select{flex:0 1 130px}
.fd-mv{display:inline-flex;gap:2px;margin-inline-start:auto}
.fd-mv button{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:2px 7px;cursor:pointer}
.fd-sugg{background:color-mix(in srgb,var(--brand) 8%,var(--panel));font-style:italic}
.fd-add{margin-top:2px}
.fd-chips{display:flex;flex-wrap:wrap;gap:6px}
.fd-chip{display:inline-flex}
.fd-chip input{display:none}
.fd-chip span{border:1px solid var(--line-2);border-radius:20px;padding:4px 11px;font-size:12.5px;cursor:pointer;user-select:none}
.fd-chip input:checked+span{background:var(--brand);color:#fff;border-color:var(--brand)}
.fd-role{border-inline-start:3px solid var(--brand);padding-inline-start:8px;margin-bottom:8px}
.fd-role.off{border-color:var(--neg)}
.fd-roleh{font-weight:700;font-size:12.5px;margin-bottom:5px}
.fd-route{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px}
.fd-step{border:1px solid var(--line-2);border-radius:20px;padding:4px 10px;font-size:12.5px;background:var(--panel-2)}
.fd-step .rtX{cursor:pointer;color:var(--neg);margin-inline-start:4px}
.fd-arrow{color:var(--muted)}
.fd-row2{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.fd-tokens{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:6px}
.fd-tok{border:1px solid var(--brand);color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,var(--panel));border-radius:6px;padding:2px 8px;font:inherit;font-size:12px;cursor:pointer}
.fd-ack{width:100%;line-height:1.8;font-size:13.5px}
.fd-srow{display:flex;gap:6px;align-items:center;margin-bottom:5px}
.fd-srow select{flex:1}

/* a tab's name on ONE line (owner, 2026-10-03): a long name is set a little smaller, and if it still cannot fit
   it ends with «…» — the whole name is on its tooltip */
.side .nav{min-width:0}
.side .nav .nl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.side .nav .nl.long{font-size:12px;letter-spacing:-.15px}

/* a window wider than the phone moves sideways, like the tables (owner, 2026-10-03) — keeping every earlier fix */
@media (max-width:900px){
  #modalRoot .modal{max-width:100vw}
  #modalRoot .modal-body{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
}

/* ── the short check window (a scanned code): «issued by the program», a small table, «show the document» ── */
.vf-kv{margin-top:8px}
.vf-kv td{overflow-wrap:anywhere}
.vf-hint{font-size:12px;margin:8px 0 0;line-height:1.6}

/* ── Settings › Email: the certificate choice and the test's answer, inside the panel ── */
.ml-loose{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:6px 0 10px;font-size:13px}
.ml-loose small{font-size:11.5px}
.ml-result{margin-top:10px;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);font-size:13px;line-height:1.7}
.ml-result.ok{background:#e7f6ec;color:#0a6b2a;border-color:#b9e3c6}
.ml-result.bad{background:#fdecea;color:#8a1c12;border-color:#f3c2bd}
[data-theme="dark"] .ml-result.ok{background:#12291a;color:#7fd6a0;border-color:#244a31}
[data-theme="dark"] .ml-result.bad{background:#2c1513;color:#f2a49b;border-color:#5a2a25}
.ml-reply{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin-top:4px}
.ml-reply code{background:rgba(0,0,0,.06);padding:1px 6px;border-radius:4px;font-size:12px;overflow-wrap:anywhere}
.ml-hint{margin-top:6px;color:inherit;opacity:.9}
.ml-warn{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-2px 0 8px;padding:6px 10px;border-radius:8px;background:#fff4e5;color:#7a4a00;border:1px solid #f5d29a;font-size:12.5px}
[data-theme="dark"] .ml-warn{background:#2e2310;color:#f3c77a;border-color:#5a4520}
.ml-warn .btn{direction:ltr}

/* ── settlement wizard: the «this page is correct» box under every page, the quick «add a vacation» ── */
.sd-confirm{display:flex;align-items:center;gap:8px;margin:12px 2px 0;padding:9px 12px;border:1px dashed var(--line);border-radius:8px;font-weight:700;background:var(--panel-2)}
.sd-confirm.need{border-color:#d93025;border-style:solid;background:#fdecea}
[data-theme="dark"] .sd-confirm.need{background:#2c1513}
.sd-addleave{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;margin-top:10px;padding:8px 12px;border-radius:8px;background:var(--panel-2);font-size:12.5px}

/* ── the register of papers (web/js/register.js): one filter line, the table under it ── */
.reg .reg-hint{margin:8px 14px 0;font-size:12px}
.reg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line)}
.reg-bar input,.reg-bar select{height:32px;font-size:13px}
.reg-bar .reg-q{flex:1 1 220px;min-width:180px}
.reg-bar .reg-pair{display:inline-flex;gap:4px;align-items:center}
.reg-bar .reg-amin,.reg-bar .reg-amax{width:96px}
.reg-bar .reg-n{margin-inline-start:auto;font-size:12px;white-space:nowrap}
.reg-tbl td{vertical-align:middle}
.reg-more{text-align:center;padding:10px}
@media (max-width:700px){
  .reg-bar{padding:8px 10px}
  .reg-bar .reg-q{flex-basis:100%}
  .reg-bar select{flex:1 1 40%}
  .reg-bar .reg-pair{flex:1 1 100%}
  .reg-bar .reg-pair input,.reg-bar .reg-pair .dface-wrap{flex:1 1 0;min-width:0;width:auto}
}

/* ── the wake-up screen (a reload / pull-down): the brand and «جاري التحديث…», never the sign-in form ── */
.splash{background:var(--bg)}
.splash-in{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--ink-2, #555)}
.splash-logo{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:28px;font-weight:800;color:#fff;background:var(--brand, #0f8a3e);box-shadow:0 6px 18px rgba(0,0,0,.15)}
.splash-t{font-size:15px;font-weight:700}

/* ── the employee timeline (web/js/timeline.js): year marks, one coloured dot per event ── */
.tl-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:10px}
.tl-head>div{border:1px solid var(--line);border-radius:9px;padding:7px 10px;display:flex;flex-direction:column;gap:2px;background:var(--panel-2)}
.tl-head .dim{font-size:11.5px}
.tl-groups{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.tl-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12.5px;cursor:pointer;user-select:none}
.tl-chip input{margin:0}
.tl-chip.on{border-color:var(--tl);background:color-mix(in srgb,var(--tl) 10%,transparent);font-weight:700}
.tl-chip small{opacity:.7}
ol.tl{list-style:none;margin:0;padding:0 0 0 0;position:relative}
ol.tl::before{content:"";position:absolute;inset-inline-start:15px;top:4px;bottom:4px;width:2px;background:var(--line)}
.tl-year{margin:12px 0 6px}
.tl-year span{position:relative;display:inline-block;margin-inline-start:2px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:1px 10px;font-weight:800;font-size:12.5px}
.tl-ev{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px;position:relative}
.tl-dot{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:15px;background:var(--panel);border:2px solid var(--tl);position:relative;z-index:1}
.tl-body{flex:1;min-width:0;border:1px solid var(--line);border-inline-start:3px solid var(--tl);border-radius:8px;padding:6px 10px;background:var(--panel)}
.tl-top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tl-date{font-size:12px;color:var(--ink-2,#666);white-space:nowrap}
.tl-line{font-size:12.5px;color:var(--ink-2,#555);margin-top:2px;overflow-wrap:anywhere}
.tl-body .tl-open{margin-top:5px}
.tl-ev.off .tl-body{opacity:.6}
.tl-ev.off .tl-top b{text-decoration:line-through}
.odwait{color:#b45309;font-weight:600}

/* ═══ batch of 2026-10-04 ═══ */
/* the document window after one's own part is done: done, and where it went */
.msg.sd-done{background:color-mix(in srgb,var(--pos) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--pos) 40%,transparent);color:var(--ink)}
.msg.sd-ask{border-width:2px}
/* the settlement less the advance recovered inside it, and what is paid */
.sd-net{border:1px solid var(--line);border-radius:9px;padding:8px 12px;margin:10px 0;max-width:460px;background:var(--panel-2)}
.sd-net>div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:13px}
.sd-net>div.tot{border-top:1px dashed var(--line-2);margin-top:4px;padding-top:6px;font-size:14.5px}
.sd-net>div.tot b{color:var(--pos)}
.sd-net a{cursor:pointer;text-decoration:underline}
.sd-rec{max-width:560px;margin:8px 0}
/* the advance facts beside the deduction asked for */
.sd-advbox{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.sd-advbox>div{background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:7px 12px;display:flex;flex-direction:column;gap:2px;min-width:120px}
.sd-advbox>div span{font-size:11px}
.sd-advbox>div b{font-size:14px}
.sd-startleave{margin-top:12px;padding:9px 12px;border:1px dashed color-mix(in srgb,#d97706 50%,transparent);border-radius:9px}
/* «البيانات السابقة» */
.lg-kind{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);margin-bottom:10px}
.lg-prog{display:flex;align-items:center;gap:10px;margin:6px 0}
.lg-bar{flex:1;max-width:360px;height:9px;border-radius:9px;background:var(--line);overflow:hidden}
.lg-bar i{display:block;height:100%;background:var(--brand)}
.lg-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px}
.lg-item{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel)}
.lg-item.need{border-inline-start:4px solid #d97706}
.lg-item.ok{border-inline-start:4px solid var(--pos);background:var(--panel-2)}
.lg-h{display:flex;align-items:flex-start;gap:8px}
.lg-ic{font-size:18px;line-height:1.2}
.lg-t{flex:1;display:flex;flex-direction:column;gap:1px}
.lg-t small{font-size:11px}
.lg-f{font-size:12.5px;margin:6px 0}
.lg-by{font-size:11.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lg-acts{gap:6px;flex-wrap:wrap}
.lg-form{margin-top:8px;padding:8px;border:1px dashed var(--line-2);border-radius:8px}
.lg-left{font-weight:700;color:#d97706;margin:8px 0 0}
.lg-badge{border:1px solid currentColor;background:transparent;border-radius:99px;padding:1px 8px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
.lg-badge.neg{color:var(--neg)} .lg-badge.warn{color:#d97706} .lg-badge.ok{color:var(--pos)}
/* the first question of a new card: new, or from before the program */
.kind-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.kind-card{display:flex;flex-direction:column;gap:3px;border:2px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--panel)}
.kind-card input{position:absolute;opacity:0;pointer-events:none}
.kind-card small{color:var(--muted);font-size:11.5px}
.kind-card.on{border-color:var(--brand);background:var(--brand-lt)}
.ef-kind h4{margin-bottom:8px}
/* a request the company raised for the person */
.chip.byco-chip{border-color:#7c3aed;color:#7c3aed;background:transparent}
.msg.byco-msg{background:color-mix(in srgb,#7c3aed 8%,var(--panel));border:1px solid color-mix(in srgb,#7c3aed 30%,transparent);color:var(--ink)}
.whofor .tplPick{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
/* the advances register: six month columns shared by every row */
.lgtbl2 th.mhead{text-align:center;border-bottom:1px solid var(--line)}
.lgtbl2 th.mcol{font-size:11px;font-weight:700;text-align:center;min-width:74px;white-space:nowrap}
.lgtbl2 .now{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.lgtbl2 td.mcell{text-align:center;font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap}
.lgtbl2 td.mcell.pd{color:var(--pos);font-weight:700}
.lgtbl2 td.mcell.df{color:#d97706}
.lgtbl2 td.mcell.od{color:var(--neg);font-weight:700}
.lgtbl2 td.plantd{min-width:150px}
.plancell{cursor:pointer;display:flex;flex-direction:column;gap:3px}
.plancell:hover .pc-t{color:var(--brand)}
.pc-bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden;max-width:160px}
.pc-bar i{display:block;height:100%;background:var(--pos)}
.pc-t{font-size:12px} .pc-s{font-size:11px}
.adv-legend{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.adv-legend .mk{display:inline-block;min-width:16px;height:14px;border-radius:4px;border:1px solid var(--line);font-style:normal;font-size:10px;text-align:center;line-height:13px}
.adv-legend .mk.pd{color:var(--pos)} .adv-legend .mk.df{color:#d97706}
.adv-legend .mk.now{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.adv-legend .mk.od{background:color-mix(in srgb,var(--neg) 30%,transparent)}
.schtbl tr.schNow td{background:color-mix(in srgb,var(--accent) 14%,transparent)}
@media (max-width:700px){ .lg-items{grid-template-columns:1fr} .sd-net{max-width:none} }

/* «التأشير»: the card that explains a figure while the pointer rests on it */
.hc-pop{position:fixed;z-index:9999;max-width:360px;background:var(--panel);color:var(--ink);border:1px solid var(--line-2);
  border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:8px 10px;font-size:12px;pointer-events:none}
.hc-pop .hc-t{font-weight:800;margin-bottom:5px;color:var(--brand)}
.hc-pop table{border-collapse:collapse;width:100%}
.hc-pop td{padding:3px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.hc-pop td:first-child{color:var(--muted)} .hc-pop td:last-child{font-weight:700;text-align:end}
.hc-pop td.hc-note{white-space:normal;color:var(--muted);font-size:11px;text-align:start}
[data-hc]{cursor:help}

/* ═══ second batch of 2026-10-04 ═══ */
/* «لمن هذا الطلب؟» — two clear choices, a searchable list of people */
.whofor2{display:flex;flex-direction:column;gap:12px}
.whofor2 .wf-me{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-radius:12px;padding:12px 14px;
  background:var(--panel);cursor:pointer;text-align:start;font:inherit;color:inherit}
.whofor2 .wf-me:hover{border-color:var(--brand);background:var(--brand-lt)}
.whofor2 .wf-me .ic{font-size:26px}
.whofor2 .wf-me small,.wf-p small{display:block}
.whofor2 .wf-emp{border:2px solid var(--line);border-radius:12px;padding:10px 12px}
.whofor2 .wf-h{margin-bottom:8px}
.whofor2 #wfQ{width:100%;margin-bottom:8px}
.wf-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;max-height:46vh;overflow:auto}
.wf-p{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:7px 9px;background:var(--panel-2);
  cursor:pointer;text-align:start;font:inherit;color:inherit}
.wf-p:hover{border-color:var(--brand);background:var(--brand-lt)}
/* «مسار الإجازات» — one line of events */
.lp-sum{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.lp-chip{display:flex;flex-direction:column;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:6px 12px;min-width:120px}
.lp-chip span{font-size:11px;color:var(--muted)} .lp-chip b{font-size:13.5px}
.lp-chip.neg{border-color:var(--neg);color:var(--neg)}
.msg.lp-rule{background:color-mix(in srgb,var(--brand) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);color:var(--ink)}
.lptbl td,.lptbl th{white-space:nowrap}
.lptbl tr.lp-hire td{background:color-mix(in srgb,var(--pos) 7%,transparent)}
.lptbl tr.lp-set td{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.lptbl tr.lp-off td{opacity:.55;text-decoration:line-through}
.lptbl tr.lp-clash td{background:color-mix(in srgb,var(--neg) 9%,transparent)}
.lptbl tr.lp-new td,.sal-tbl tr.lp-new td{background:color-mix(in srgb,var(--brand) 6%,transparent)}
.lptbl tr.lp-new input,.sal-tbl tr.lp-new input{width:100%;min-width:110px}
.sd-lpath{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0;padding:8px 12px;border:1px dashed var(--line-2);border-radius:9px;font-size:12.5px}
.lg-mini{border-collapse:collapse;font-size:12px;margin-top:4px}
.lg-mini td{padding:2px 8px 2px 0;border-bottom:1px dotted var(--line)}
/* the month figures of the advances register are buttons; a month gone by unpaid is struck */
.lgtbl2 td.mcell.act{cursor:pointer}
.lgtbl2 td.mcell.act:hover{outline:2px solid var(--brand);outline-offset:-2px}
.lgtbl2 td.mcell.ms{color:var(--muted)}
.adv-legend .mk.ms{color:var(--muted)}
.emmenu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.emmenu{max-height:70vh;overflow:auto}

/* ═══ batch 3 (2026-10-04) ═══ */
/* «التأشير»: shown after resting a moment; a click pins it and makes it usable */
.hc-pop{pointer-events:auto;cursor:pointer}
.hc-pop.pinned{cursor:auto;box-shadow:0 10px 30px rgba(0,0,0,.28);border-color:var(--brand);max-width:min(440px,calc(100vw - 16px));
  max-height:70vh;overflow:auto;padding-top:10px}
.hc-pop .hc-x{position:absolute;top:4px;inset-inline-end:4px;border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:12px;padding:2px 6px;border-radius:6px}
.hc-pop .hc-x:hover{background:var(--line);color:var(--ink)}
.hc-pop.pinned .hc-t{padding-inline-end:22px}
.hc-pop .hc-pin{margin-top:5px;font-size:10.5px;color:var(--muted);text-align:center}
.hc-pop .hc-more{margin-top:8px;border-top:1px dashed var(--line-2);padding-top:6px}
.hc-pop .hc-more table td{white-space:nowrap}
.hc-pop .hc-more a,.hc-pop .hc-more .hc-link{color:var(--brand);cursor:pointer;text-decoration:underline;font-weight:700;background:none;border:0;padding:0;font:inherit}
.hc-pop .hc-more .hc-sub{font-weight:800;margin:6px 0 3px;color:var(--ink)}
/* the settlement wizard: the plain choice on the last working day */
.sd-choice{margin-top:10px;border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.sd-choice.need{border-color:var(--neg);box-shadow:0 0 0 2px color-mix(in srgb,var(--neg) 25%,transparent)}
.sd-choice-q{font-weight:800}
.sd-opt{display:flex;gap:8px;align-items:flex-start;padding:7px 8px;border-radius:8px;border:1px solid transparent;cursor:pointer}
.sd-opt:hover{background:color-mix(in srgb,var(--brand) 6%,transparent)}
.sd-opt.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,transparent)}
.sd-opt input{margin-top:3px}
.sd-opt span{display:flex;flex-direction:column;gap:2px}
.sd-opt small{font-size:12px;line-height:1.5}
/* the document as it will be issued, inside a review step */
.doc-prev{width:100%;border:1px solid var(--line-2);border-radius:8px;background:#fff;min-height:240px;display:block}
.cv-salnote{color:var(--muted);font-weight:400}
.lp-calc{display:block;font-weight:400}
.lg-plan .planbox{margin-top:6px}
/* a person's name in a table: the one short name, a button to his menu (empmenu.js) */
a.pmName,a.lgNm{color:inherit;font-weight:700;cursor:pointer;text-decoration:none}
a.pmName:hover,a.lgNm:hover,a.pmName.on,a.lgNm.on{color:var(--brand);text-decoration:underline}
.name-cell a.pmName{display:block}
/* the advances register: a month heading is a button (its sheet, its approval document) */
.lgtbl2 th.mhead{cursor:pointer}
.lgtbl2 th.mhead:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.lgtbl2 th.mhead .mh-caret{font-size:9px;opacity:.6}
.lgtbl2 th.mhead .mh-doc{font-size:10px;margin-top:3px;display:inline-block}
.emmenu button.off,.emmenu button[disabled]{opacity:.45;cursor:not-allowed}
.emmenu button.off:hover{background:transparent}
.abtbl input.abAmt{padding:3px 6px}
.abtbl select.abAct{padding:3px 4px}
.sd-route li.now{font-weight:800;color:var(--brand)}
.sd-route li.done{color:var(--pos)}

/* ═══ the owner's batch of 2026-10-05 ═══ */
/* a document shown as itself inside its window (settlements, requests, salary statements) */
.sd-docprev{margin-top:8px}
.sd-papers{margin:6px 0;gap:6px;flex-wrap:wrap}
/* the unpaid salaries inside a settlement */
.sd-sal td{vertical-align:middle}
.sd-sal tr.sd-off td{color:var(--muted)}
.sd-salsum{font-size:12.5px;font-weight:700;margin:6px 0}
.sd-cuact{white-space:nowrap}
.sd-mini{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;margin:1px;border:1px solid var(--line-2);border-radius:14px;font-size:12px;cursor:pointer}
.sd-mini.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent);font-weight:700}
.sd-cuact.need{outline:2px solid var(--neg);border-radius:8px}
/* «تسوية رواتب الشهر» */
.ps-scroll{max-height:42vh;border:1px solid var(--line);border-radius:9px}
.ps-done td{color:var(--ink-2)}
.paytbl tr.sel td{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.psChip[data-c="ok"].on{border-color:var(--pos)}
.psChip[data-c="warn"].on{border-color:#b45309}
.ps-prev{margin-bottom:12px}
.psPaper{cursor:pointer;text-decoration:underline;font-size:12px;margin-inline-start:4px}
/* «سُجّلت غائبًا» */
.abs-notes{border-color:var(--neg)}
.abs-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 0;font-weight:700}
.abs-note + .abs-note{border-top:1px dashed var(--line)}
/* the branch device: who is working on it */
.op-chip{font-weight:800}
.op-chip.op-none{border-color:#b45309;color:#b45309;animation:opPulse 2.4s ease-in-out 3}
.op-chip .op-x{margin-inline-start:6px;opacity:.7}
.op-chip .op-x:hover{opacity:1;color:var(--neg)}
@keyframes opPulse{50%{background:color-mix(in srgb,#b45309 14%,transparent)}}
.op-code{font-size:38px;font-weight:900;letter-spacing:8px;text-align:center;margin:10px 0;direction:ltr}
.op-mine{border-color:var(--brand)}
.op-mine .eabody{text-align:center}
/* «عرض بعين الدور» and the phone's size */
.va-bar{position:sticky;top:0;z-index:999;background:#b45309;color:#fff;font-weight:800;text-align:center;padding:4px 10px;font-size:12.5px}
.va-frame{width:100%;height:74vh;border:1px solid var(--line-2);border-radius:8px;background:#fff;display:block}
.dv-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.dv-stage{display:flex;justify-content:center;overflow:hidden}
.dv-phone{width:calc(var(--w) + 24px);height:calc(var(--h) + 24px);padding:12px;border-radius:34px;background:#1d1d1f;
  box-shadow:0 8px 30px rgba(0,0,0,.25);transform-origin:top center;flex:none}
.dv-frame{border:0;border-radius:24px;background:#fff;display:block}
@media (max-width:760px){
  .ps-scroll{max-height:none}
  .va-frame{height:64vh}
}
/* the end-of-service wizard (the owner, 2026-10-05): an old advance balance carried in on its own page */
.sd-advform{margin-top:8px;padding:10px 12px;border:1px dashed var(--line, #cfd6d1);border-radius:8px;background:var(--panel-2)}
.sd-advform .qprow{margin-top:6px}
/* a transfer between branches (the owner, 2026-10-05): a day worked in another branch, and the month's branches */
.attcell.attmoved{background:repeating-linear-gradient(135deg,var(--panel-2) 0 6px,transparent 6px 12px)}
.attcell.attmoved .attmv{font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.mysegs{margin:6px 12px;font-size:13px}
/* the rest days of each month of the year (five Fridays = five without a deduction) */
.hl-rest{margin-top:12px}
.hl-restgrid{display:flex;flex-wrap:wrap;gap:6px;padding:4px 12px}

/* every text box writes in the program's own letters (the owner, 2026-10-05: «why is it not Cairo?») */
textarea{font-family:inherit}
.crt-txt{font-size:14.5px;line-height:2}
.crt-factpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:4px 12px}

/* a share done (the past data — the owner, 2026-10-05): a small bar coloured by how far it has come */
.pbar{display:inline-block;vertical-align:middle;width:46px;height:7px;border-radius:99px;background:color-mix(in srgb,currentColor 14%,transparent);
  border:1px solid currentColor;overflow:hidden;margin-inline-start:6px}
.pbar i{display:block;height:100%;background:currentColor}
.pbar.neg{color:var(--neg)}.pbar.warn{color:#d97706}.pbar.ok{color:var(--pos)}
.emmenu .pnum{font-size:11.5px;margin-inline-start:4px}
.emmenu-h .emm-name{font-weight:800;color:var(--ink);white-space:normal;line-height:1.4}

/* the branch's punch screen: who punched today, under the code (the owner, 2026-10-05) */
.eaterm{flex-wrap:wrap}
.eatermday{flex:1 1 100%;margin-top:14px;border-top:1px solid var(--line, #dfe5e1);padding-top:10px}
.eatermday-h{font-weight:800;margin-bottom:6px}
.eatermtbl{width:100%;border-collapse:collapse;font-size:15px}
.eatermtbl th,.eatermtbl td{border:1px solid var(--line, #dfe5e1);padding:6px 10px;text-align:start}
.eatermtbl th{background:var(--panel-2)}
.emMode-sym{min-width:58px;max-width:84px}

/* the staff list: its columns move (each person's order), so its 2nd column is not always the name — the
   payroll rule above (th:nth-child(2) = the name, 190px) must not widen the small attendance symbols (2026-10-06) */
table.paytbl.emptbl thead th:nth-child(2){min-width:0;max-width:none}

/* the bank file: whom each file carries — filters, ticks, «سبق إصداره» (the owner, 2026-10-06) */
.bkpick{padding:10px 14px 0;margin:0}
.bkpick input#bkQ{width:210px}
.bkpick-n{display:inline-flex;gap:4px;align-items:center}
.bkpick-n input{width:72px}
.bkpick-sum{padding:6px 14px 8px;font-size:12.5px;font-weight:700}
.bktbl tr.bk-off td{opacity:.55}
.bktbl tr.bk-off td:first-child{opacity:1}
.bktbl .bk-was{display:inline-block;margin-inline-start:6px;font-size:10.5px;padding:1px 6px;white-space:nowrap}
@media (max-width:640px){.bkpick input#bkQ{width:100%}.bkpick select{flex:1 1 45%;min-width:0}}

/* 2026-10-06 — before the server: «نسيت كلمة المرور», mail jobs, backups, activation, custody check */
.fp-link{text-align:center;margin-top:10px}
.fp-box{margin-top:6px}
.fp-box .sub{margin:0 0 10px}
.ml-jobs-h{margin:16px 0 4px;font-size:14px}
.bk-mirror{margin-bottom:6px}
.actbl td.ac-c{text-align:center}
.actbl .chip{padding:1px 7px}
.cu-check{margin:0 0 10px}
@media (max-width:640px){.bk-mirror{flex-wrap:wrap}.bk-mirror input{min-width:0;width:100%}}
#fpLink,#fpBack{background:none;border:none;box-shadow:none;color:var(--brand, #0f766e);text-decoration:underline;cursor:pointer}

/* ═══ batch 2026-10-06 (afternoon) ═══════════════════════════════════════════════════════════ */
/* the bell's window: what it is about leads in dark letters, what it is above it, what to do under it */
.nt-sum{margin:0 0 10px;padding:8px 12px;border-radius:10px;background:#fff4f2;border:1px solid #f5c2bd;color:#9b1c1c;font-weight:700;font-size:13px}
.nt-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;margin-bottom:4px;scrollbar-width:thin}
.nt-tabs button{flex:0 0 auto;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink)}
.nt-tabs button b{margin-inline-start:4px;font-size:11.5px;color:var(--muted)}
.nt-tabs button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.nt-tabs button.on b{color:#fff}
.ntgrp2{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden;background:var(--panel)}
.ntgrp2 > header{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--panel-2);font-size:13.5px;border-bottom:1px solid var(--line)}
.ntgrp2 > header .ntgic{font-size:16px}
.ntgrp2 .ntrow{border-radius:0;border-inline:0;border-top:0;margin:0}
.ntgrp2 .ntrow:last-child{border-bottom:0}
.ntrow2{align-items:flex-start;padding:11px 12px;gap:12px}
.ntrow2 .ntic{width:36px;height:36px;flex:0 0 36px;font-size:17px;background:color-mix(in srgb,var(--brand) 10%,var(--panel));margin-top:2px}
.ntrow2.hot .ntic{background:#fde2e1}
.ntrow2 .ntbody{gap:2px}
.ntrow2 .nt-kick{font-size:11.5px;font-weight:700;color:var(--brand);letter-spacing:.1px}
.ntrow2.hot .nt-kick{color:var(--neg)}
.ntrow2 .nt-subj{font-size:14.5px;color:var(--ink);line-height:1.35}
.ntrow2 .nt-det{font-size:12.5px;color:var(--ink-2);line-height:1.5;white-space:normal}
.ntrow2 .nt-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
.ntrow2 .nt-hot{font-size:10.5px;padding:0 7px}
.ntrow2 .nt-open{font-size:12px;font-weight:700;color:var(--brand);white-space:nowrap}
.ntrow2:hover .nt-open{text-decoration:underline}
.nt-empty{padding:28px 10px;text-align:center;color:var(--pos);font-weight:700}
@media (max-width:760px){
  .ntrow2{padding:10px}
  .ntrow2 .nt-side{min-width:58px}
  .ntrow2 .nt-subj{font-size:14px}
}

/* the settlement window: an unfinished one resumed, a day already settled, his settlements so far */
.sd-resumed{margin:0 0 8px;background:color-mix(in srgb,var(--brand) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line))}
.btn-ghost-danger{background:transparent;border-color:transparent;color:var(--neg)}
.btn-ghost-danger:hover{background:#fde2e1;border-color:#f5b5b0}
.sd-datebad{margin:8px 0 4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sd-hist{margin:10px 0 6px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sd-hist-h{padding:7px 12px;background:var(--panel-2);font-weight:700;font-size:13px;border-bottom:1px solid var(--line)}
.sd-hist .scroll{margin:0}
.sd-histtbl{width:100%}
.sd-histtbl td,.sd-histtbl th{padding:5px 9px;font-size:12.5px}
.sd-histtbl tr.sd-histvac td{background:color-mix(in srgb,#16a34a 6%,var(--panel))}
.sd-histtbl tr.sd-histnext td{background:color-mix(in srgb,var(--brand) 9%,var(--panel));font-weight:700;color:var(--brand-dk)}
.sd-hist0{margin:8px 0}
.sd-delbox{margin:0 0 12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;border:1px solid #f5b5b0;background:#fff7f6}
.paytbl.sd-sal tr.sd-msrow > td{padding:0;background:var(--panel-2)}
.sdwSheet.on{background:var(--brand-lt);border-color:var(--brand)}

/* one month, in short (minisheet.js): the monthly sheet's own cells — the day on top, its choice across, its source and hours under */
.msheet{position:relative;padding:12px 14px 14px;border-top:2px solid var(--brand)}
.ms-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;font-size:13px}
.ms-h .dim{font-size:12px}
.ms-wait{padding:20px;text-align:center}
.ms-tots{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.ms-t{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;font-size:12px;background:var(--msbg,var(--panel-2));color:var(--msfg,var(--ink));border:1px solid var(--line)}
.ms-t.pos{color:var(--pos)} .ms-t.neg{color:var(--neg)}
.ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.ms-c{display:flex;flex-direction:column;gap:4px;min-height:92px;padding:6px 7px;border:1px solid var(--line);border-radius:9px;background:var(--panel);position:relative}
.ms-c.on{background:color-mix(in srgb,var(--cbg) 55%,var(--panel));border-color:color-mix(in srgb,var(--cfg) 30%,var(--line))}
.ms-c.fri .ms-ch .wd{color:#b45309}
.ms-c.fri{box-shadow:inset 0 3px 0 #fdf2e3}
.ms-c.today{box-shadow:inset 0 -3px 0 var(--brand)}
.ms-ch{display:flex;align-items:baseline;gap:5px;line-height:1.1}
.ms-ch .wd{font-size:11px;color:var(--muted)}
.ms-ch .dn{font-size:14px;font-weight:900}
.ms-ch i{font-style:normal;font-size:11px;margin-inline-start:auto}
.ms-live{font-size:10.5px;font-weight:700;line-height:1.3;padding:1px 5px;border-radius:4px;background:color-mix(in srgb,var(--neg) 12%,transparent);color:var(--neg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-cm{flex:1;display:flex;align-items:center}
.ms-cm .acv{display:block;width:100%;height:30px;padding:0 6px;border:1px dashed var(--line-2);border-radius:7px;background:transparent;color:var(--muted);
  font:inherit;font-size:13px;cursor:pointer;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-cm .acv:hover{border-style:solid;border-color:var(--brand);color:var(--ink)}
.ms-cm .acv.set{border:1px solid var(--cfg,var(--line-2));background:var(--cbg,transparent);color:var(--cfg,var(--ink));font-weight:700}
.ms-ro{display:block;width:100%;text-align:center;font-size:12px;font-weight:600;color:var(--cfg,var(--muted))}
.ms-cf{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:20px;font-size:11px}
.ms-cf > span:first-child{justify-self:start;display:inline-flex;gap:2px}
.ms-cf > span:last-child{justify-self:end}
.ms-cf .attsrc{font-style:normal;font-size:11px;cursor:help;opacity:.85}
.ms-cf .ach{height:20px;min-width:38px;padding:0 6px;border:1px dashed var(--line-2);border-radius:5px;background:transparent;
  font:inherit;font-size:11.5px;font-weight:700;color:var(--muted);cursor:pointer;line-height:18px}
.ms-cf .ach:hover{border-style:solid;border-color:var(--brand)}
.ms-cf .ach.pos,.ms-hro.pos{color:var(--pos)} .ms-cf .ach.neg,.ms-hro.neg{color:var(--neg)}
.ms-hro{font-style:normal;font-weight:800}
.ms-edm{font-style:normal;color:#b45309}
.ms-c.bad{border:2px solid var(--neg)}
.ms-c.ed{box-shadow:inset 0 -3px 0 var(--warn)}
.ms-c.shut{opacity:.55;background:repeating-linear-gradient(135deg,var(--panel-2) 0 5px,transparent 5px 10px)}
.ms-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.ms-say{font-size:12.5px;color:#b45309;font-weight:700}
@media (max-width:760px){
  .ms-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  .ms-cm .acv{font-size:12px}
}

/* the person's menu in framed sections (2026-10-06): what is open for him first, then file · money · actions · editing */
.emmenu2{width:min(560px,calc(100vw - 16px));max-height:min(82vh,660px);padding:6px}
.emmenu2 .emmenu-h{font-size:13.5px;color:var(--ink);padding:6px 10px 8px;margin-bottom:6px}
.emmenu2 .emmenu-h small{color:var(--muted)}
.emm-groups{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:2px 4px 4px}
.emm-grp{border:1px solid var(--line);border-radius:10px;padding:4px 4px 6px;background:var(--panel);min-width:0}
.emm-grp h6{margin:3px 8px 5px;font-size:11.5px;color:var(--muted);font-weight:800;letter-spacing:.2px}
.emm-grp[data-g="edit"]{border-style:dashed}
.emm-open{margin:0 4px 8px;border:1px solid #f3d29b;background:#fffaf0;border-radius:10px;padding:5px 5px 6px}
.emm-open h6{margin:3px 8px 5px;font-size:12px;color:#92400e;font-weight:800;display:flex;align-items:center;gap:6px}
.emmenu .emm-o{all:unset;display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;padding:7px 9px;border-radius:8px;cursor:pointer}
.emmenu .emm-o:hover,.emmenu .emm-o:focus-visible{background:#fff1d6}
.emm-o > i{font-style:normal;width:20px;text-align:center}
.emm-o > span{display:flex;flex-direction:column;flex:1;min-width:0}
.emm-o > span b{font-size:13px}
.emm-o > span small{color:var(--ink-2);font-size:11.5px}
.emm-o > em{font-style:normal;color:#b45309;font-weight:800}
.emm-o-row{display:flex;align-items:center;gap:4px}
.emmenu .emm-o-del{all:unset;cursor:pointer;padding:6px 9px;border-radius:7px;color:var(--neg)}
.emmenu .emm-o-del:hover{background:#fde2e1}
@media (max-width:760px){
  .emm-groups{grid-template-columns:1fr}
  .emmenu2{max-height:78vh}
}

/* ═══ THE PHONE FRAME (the owner, 2026-10-06 — «زي فيسبوك») ═══ — nothing here reaches a desktop:
   the bottom bar, the bars folding away while the page scrolls down, the drawer's framed folded groups,
   and a page's tools behind one button (mobile.js) */
.mobbar,.mob-tools{display:none}
.mbset-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mbset-row select{min-width:0;flex:1 1 120px}
@media (max-width:760px){
  .mobbar{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:70;height:58px;padding:0 4px env(safe-area-inset-bottom,0);
    background:var(--shell);border-top:1px solid var(--shell-line);box-shadow:0 -8px 22px rgba(0,0,0,.22);transition:transform .22s ease}
  .mobbar button{all:unset;box-sizing:border-box;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    position:relative;cursor:pointer;color:var(--shell-mute);font-size:10.5px;font-weight:700;min-width:0;padding-top:4px}
  .mobbar button i{font-style:normal;font-size:20px;line-height:1}
  .mobbar button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .mobbar button.on{color:#fde68a}
  .mobbar button.on::before{content:"";position:absolute;top:0;inset-inline:24%;height:3px;border-radius:0 0 3px 3px;background:#fde68a}
  .mobbar .mbn{position:absolute;top:4px;inset-inline-start:calc(50% + 5px);min-width:17px;height:17px;line-height:17px;padding:0 4px;
    border-radius:999px;background:#e5484d;color:#fff;font-size:10px;font-weight:800;text-align:center;box-shadow:0 0 0 2px var(--shell)}
  .mobbar .mbn[hidden]{display:none}
  body.chrome-hide .mobbar{transform:translateY(110%)}
  /* the top bar sticks to the top: it is slid away, and the page takes its room */
  .topbar{transition:margin-top .22s ease,transform .22s ease}
  body.chrome-hide .topbar{margin-top:-48px;transform:translateY(-100%)}
  .layout{transition:height .22s ease}
  body.chrome-hide .layout{height:100dvh}
  main{padding-bottom:76px}
  /* what the bar carries leaves the top bar */
  body[data-mb~="tasks"] #topTasks,body[data-mb~="bell"] #topBell,body[data-mb~="msgs"] #topMsg,body[data-mb~="menu"] #btnNav{display:none !important}
  /* the drawer: above the bar, each group in its own light frame, folded until tapped */
  .side{inset-block:48px 58px;height:auto}
  body.chrome-hide .side{inset-block:0 58px}
  .side .gbox,.side .gbox.open{display:block;border:1px solid var(--shell-line);border-radius:12px;margin:0 0 10px;background:rgba(255,255,255,.03);padding:2px}
  .side .gbox.open{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.07);padding:2px 2px 6px}
  .side .gbox.open > .grp{border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:4px}
  .side .nav.folded{display:none}
  .side .grp{padding:11px 10px;min-height:44px}
  .side .nav{min-height:42px}
  /* a page's tools behind one button */
  .mob-fold.mob-shut{display:none !important}
  .mob-tools{display:inline-flex;align-items:center;gap:6px}
  .mob-tools .mt-n{background:#e5484d;color:#fff;border-radius:999px;padding:0 6px;font-size:11px;line-height:17px}
  .mob-tools.on{background:var(--brand-lt);border-color:var(--brand);color:var(--brand-dk)}
  .page-head{align-items:center}
}

/* the salaries page of a settlement (2026-10-07): the question on top in one short line, every figure explained on hover */
.sd-salq{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0 0 8px;padding:7px 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel-2);font-size:13px}
.sd-salq.need{border-color:var(--neg);box-shadow:0 0 0 2px color-mix(in srgb,var(--neg) 25%,transparent)}
.sd-salq > b{margin-inline-end:4px}
.sd-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;border:1px solid var(--line-2);background:var(--panel);cursor:pointer;font-size:12.5px;white-space:nowrap}
.sd-pill:hover{border-color:var(--brand)}
.sd-pill.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--panel));font-weight:700}
.sd-pill input{margin:0}
.sd-salq .sd-salsum{margin:0;margin-inline-start:auto;font-size:12.5px;font-weight:700}
.sd-salnote{margin:0 0 6px;font-size:12px}
.paytbl.sd-sal td.sd-why{cursor:help;text-decoration:underline dotted color-mix(in srgb,var(--muted) 60%,transparent);text-underline-offset:3px}
.ms-t.ms-paid{background:var(--brand-lt);color:var(--brand-dk);border-color:var(--brand);margin-inline-start:auto}

/* the register (2026-10-07): a table for each kind, people picked, who made it, the total at the foot; the settlement group */
.reg-kinds{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px}
.reg-kinds:empty{display:none}
.reg-kind{border:1px solid var(--line-2);background:var(--panel);border-radius:99px;padding:3px 11px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink)}
.reg-kind small{color:var(--muted);margin-inline-start:3px}
.reg-kind:hover{border-color:var(--brand)}
.reg-kind.on{background:var(--brand-lt);border-color:var(--brand);color:var(--brand-dk);font-weight:700}
.reg-kreq{font-size:12px;align-self:center}
.reg-bar{position:relative}
.reg-emps.on{background:var(--brand-lt);border-color:var(--brand);color:var(--brand-dk)}
.reg-emppop{position:absolute;z-index:60;top:100%;margin-top:4px;width:300px;max-width:calc(100vw - 32px);background:var(--panel);border:1px solid var(--line-2);border-radius:10px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.35);padding:8px;display:flex;flex-direction:column;gap:6px}
.reg-emppop .rep-acts{display:flex;align-items:center;gap:8px}
.reg-emppop .rep-list{max-height:260px;overflow:auto;display:flex;flex-direction:column}
.reg-emppop .rep-list label{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;cursor:pointer;font-size:12.5px;white-space:nowrap}
.reg-emppop .rep-list label:hover{background:var(--panel-2)}
.reg-tbl tfoot td{border-top:2px solid var(--line-2);background:var(--panel-2);padding:6px 8px}
.reg-tbl tr.reg-in td:first-child{padding-inline-start:18px}
.reg-by{font-size:12px;white-space:nowrap}
.sg-tbl tr.sg-root td{background:color-mix(in srgb,var(--brand) 8%,var(--panel));font-weight:700}
.sg-tbl tr.sg-part td:first-child{padding-inline-start:14px}
.sg-arrow{color:var(--muted);margin-inline-end:6px}
.sg-tbl tfoot td{border-top:2px solid var(--line-2);background:var(--panel-2);padding:6px 8px}
.sg-tbl tr.sg-net td{background:color-mix(in srgb,var(--pos) 10%,var(--panel))}
.sg-signers{margin:4px 0 8px;font-size:12.5px}
.arch-top{display:flex;justify-content:flex-end;margin:-4px 0 6px}

/* a settlement's life (2026-10-07): saved with its issuer, handed back, its route history, its messages; late vacation */
.sd-saved{border-inline-start:4px solid var(--brand);background:color-mix(in srgb,var(--brand) 7%,var(--panel))}
.sd-returned{border-inline-start:4px solid #d97706}
.sd-hist2{margin-top:10px}
.sd-hev{font-size:12.5px;padding:3px 0}
.sd-hev.return{color:#b45309}
.sd-msgs{margin-top:10px}
.sd-msg{border:1px solid var(--line);border-radius:8px;padding:6px 9px;margin:4px 0;font-size:12.5px;background:var(--panel-2)}
.lg-late{margin:8px 0;font-size:12.5px}
.lg-late .chkline{margin-top:6px;font-weight:700}
.lg-late-amt{margin-top:6px;font-weight:800}
.sd-diffs{margin-top:12px}
.sd-zero{margin:8px 0}
.lg-late .field[hidden]{display:none}
.emp-miss{margin-inline-start:4px;font-size:10.5px}
.emp-miss{margin-inline-start:4px;font-size:10.5px}