/* Layout: fixed side rail (right, RTL) + top bar with project switcher; content = form panel above a ledger table.
   Fiber-optic palette: deep ink, cable teal, signal amber. */
:root {
  --bg: #F3F5F4; --surface: #FFFFFF; --surface-2: #EAEFEE; --line: #D3DCDA;
  --ink: #13222B; --muted: #5C6E74; --accent: #0A7383; --accent-ink: #FFFFFF; --accent-soft: #D7ECEE;
  --rail: #13222B; --rail-ink: #C9D6DA; --rail-active: #1E3540;
  --amber: #B86A00; --amber-soft: #FBEBD2; --red: #B4232C; --red-soft: #F8DCDD; --green: #2E7D4F; --green-soft: #DAF0E2;
  --f-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-display: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --r: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0E171C; --surface: #15222A; --surface-2: #1C2C35; --line: #2A3D47;
  --ink: #E4ECEE; --muted: #93A6AD; --accent: #3FB4C4; --accent-ink: #06171C; --accent-soft: #163A42;
  --rail: #0A1216; --rail-ink: #A9BAC0; --rail-active: #17262E;
  --amber: #F0A940; --amber-soft: #3A2C14; --red: #F07178; --red-soft: #3D1D21; --green: #6BCB91; --green-soft: #173327;
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0E171C; --surface: #15222A; --surface-2: #1C2C35; --line: #2A3D47;
  --ink: #E4ECEE; --muted: #93A6AD; --accent: #3FB4C4; --accent-ink: #06171C; --accent-soft: #163A42;
  --rail: #0A1216; --rail-ink: #A9BAC0; --rail-active: #17262E;
  --amber: #F0A940; --amber-soft: #3A2C14; --red: #F07178; --red-soft: #3D1D21; --green: #6BCB91; --green-soft: #173327;
  color-scheme: dark }

* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.55; }
td, .kpi b, .num { font-variant-numeric: tabular-nums }
[hidden] { display: none !important }
.boot { padding: 40px; text-align: center; color: var(--muted) }

/* ---------- login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px }
.login form { width: min(380px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 14px }
.login h1 { font-family: var(--f-display); font-weight: 700; font-size: 22px; margin: 0; display: flex; gap: 10px; align-items: center }
.login p { margin: 0; color: var(--muted); font-size: 14px }

/* ---------- shell */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh }
.rail { background: var(--rail); color: var(--rail-ink); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top, 0px)) 10px calc(16px + env(safe-area-inset-bottom, 0px)); gap: 2px }
.rail .brand { font-family: var(--f-display); font-weight: 700; color: #fff; font-size: 17px; line-height: 1.4; display: flex; gap: 10px; align-items: center; padding: 4px 10px 16px }
.rail .grp { font-size: 12.5px; font-weight: 600; color: #8FA3AA; padding: 14px 12px 4px }
.rail a { color: var(--rail-ink); text-decoration: none; padding: 7px 12px; border-radius: 6px; font-size: 14.5px; display: block }
.rail a:hover { background: var(--rail-active); color: #fff }
.rail a.on { background: var(--accent); color: var(--accent-ink); font-weight: 600 }
.content { min-width: 0; display: flex; flex-direction: column }
.topbar { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); padding: calc(10px + env(safe-area-inset-top, 0px)) 20px 10px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between }
.topbar .proj { display: flex; gap: 8px; align-items: center; min-width: 0 }
.topbar .proj select { min-width: 220px; font-weight: 600 }
.topbar .who { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muted); flex-wrap: wrap }
.menu-btn { display: none }
.rail-close { display: none }
.rail-backdrop { display: none }
main { padding: 22px 20px 60px; max-width: 1400px; width: 100%; display: flex; flex-direction: column; gap: 18px }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr }
  .rail { position: fixed; inset: 0 auto 0 0; right: 0; left: auto; width: 260px; z-index: 40; transform: translateX(100%); transition: transform .2s }
  .rail.open { transform: none; box-shadow: -8px 0 30px rgba(0,0,0,.3) }
  .rail { overscroll-behavior: contain }
  .rail .brand { position: relative; padding-left: 48px }
  .rail-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 40px; height: 40px;
    background: transparent; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; color: #fff; font-size: 18px; cursor: pointer }
  .rail-close:hover, .rail-close:focus-visible { background: var(--rail-active) }
  .rail-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.45); -webkit-tap-highlight-color: transparent }
  body.menu-open { overflow: hidden }
  .menu-btn { display: inline-flex }
  .topbar { padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px }
  .who .install-btn { padding: 5px 10px; font-size: 13px }
  .topbar .proj select { min-width: 0; max-width: 60vw }
  main { padding: 16px 16px 60px }
}
@media (prefers-reduced-motion: reduce) { .rail { transition: none } }

/* ---------- type & panels */
h1, h2 { font-family: var(--f-display); font-weight: 700; line-height: 1.4; margin: 0; text-wrap: balance }
h1 { font-size: 22px } h2 { font-size: 18px }
h3 { font-size: 15px; margin: 0; font-weight: 600 }
.hint { color: var(--muted); font-size: 13px; margin: 0 }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px }
.two > * { min-width: 0 }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px 12px }
.f { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.f.wide { grid-column: 1 / -1 }
.f > label { font-size: 12.5px; color: var(--muted); font-weight: 500 }
.req { color: var(--red) }
input, select, textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; width: 100%; min-width: 0 }
input[type=checkbox] { width: auto }
textarea { min-height: 70px; resize: vertical }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
input[type=number], .ltr { direction: ltr; text-align: right }
.sub { font-size: 12px; color: var(--muted); min-height: 1em }
.sub.bad { color: var(--red) } .sub.warn { color: var(--amber) }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); max-height: 220px; overflow-y: auto }
.checks label { display: flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer }
.foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; border-top: 1px dashed var(--line); padding-top: 10px }
.btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.btn { font: inherit; font-size: 14px; border-radius: 6px; padding: 7px 16px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }
.btn:hover { background: var(--surface-2) }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600 }
.btn.primary:hover { filter: brightness(1.08) }
.btn.danger { color: var(--red); border-color: var(--red) }
.btn.danger:hover { background: var(--red-soft) }
.btn:disabled { opacity: .5; cursor: not-allowed }
.mini { font: inherit; font-size: 12.5px; border: 0; background: none; color: var(--accent); cursor: pointer; padding: 2px 6px; border-radius: 4px; white-space: nowrap }
.mini:hover { background: var(--accent-soft) }
.mini.del { color: var(--red) } .mini.del:hover { background: var(--red-soft) }
.mini.armed { background: var(--red); color: #fff }
.preview { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px }
.preview b { color: var(--accent) }

/* ---------- segmented type chooser */
.seg { display: flex; gap: 6px; flex-wrap: wrap }
.seg a, .seg button { font: inherit; cursor: pointer; text-decoration: none; color: var(--ink); border: 1px solid var(--line); background: var(--surface); padding: 6px 12px; border-radius: 999px; font-size: 13.5px }
.seg a:hover, .seg button:hover { border-color: var(--accent) }
.seg a.on, .seg button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600 }

/* ---------- tables */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: end }
.filters .f { width: 150px } .filters .f.grow { flex: 1; min-width: 160px; width: auto }
.tbl { overflow: auto; border: 1px solid var(--line); border-radius: 6px; max-height: 620px }
table { border-collapse: collapse; width: 100%; font-size: 13.5px }
th, td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: top }
th { position: sticky; top: 0; background: var(--surface-2); font-weight: 600; font-size: 12.5px; color: var(--muted); z-index: 1 }
td.n, th.n { text-align: left; direction: ltr }
td.wrap { white-space: normal; min-width: 160px; max-width: 320px }
tbody tr:hover > td { background: var(--surface-2) }
tfoot td { font-weight: 700; background: var(--surface-2); position: sticky; bottom: 0 }
tr.sub-row > td { background: var(--bg); padding: 0 }
tr.sub-row table { font-size: 13px }
tr.sub-row th { position: static; background: transparent }
.empty { text-align: center; color: var(--muted); padding: 28px 12px !important; white-space: normal }
.lines td { padding: 4px 6px; vertical-align: middle }
.lines input, .lines select { padding: 5px 7px }
.lines .item-in { min-width: 240px }
.lines .qty-in { width: 110px }
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap }
.pill.ok { background: var(--green-soft); color: var(--green) } .pill.warn { background: var(--amber-soft); color: var(--amber) }
.pill.bad { background: var(--red-soft); color: var(--red) } .pill.info { background: var(--accent-soft); color: var(--accent) }
.pill.mute { background: var(--surface-2); color: var(--muted) }

/* ---------- attendance grid */
.att-wrap { max-height: 70vh }
table.att { width: auto; font-size: 13px }
table.att th, table.att td { padding: 0; text-align: center; border: 1px solid var(--line) }
.att .att-name { position: sticky; right: 0; z-index: 2; background: var(--surface); text-align: right; padding: 6px 10px; min-width: 140px; white-space: nowrap }
.att thead .att-name { z-index: 3; background: var(--surface-2) }
.att .att-name small { display: block; color: var(--muted); font-size: 11px }
.att-day { min-width: 32px; padding: 4px 2px !important; line-height: 1.2 }
.att-day small { display: block; font-size: 10px; font-weight: 400 }
.att-day.today { background: var(--accent-soft) !important; color: var(--accent) }
.att-cell { width: 32px; height: 34px; cursor: pointer; font-weight: 700; user-select: none }
.att-cell:hover { outline: 2px solid var(--accent); outline-offset: -2px }
.att-cell.off { background: var(--surface-2); color: var(--muted); font-weight: 400 }
.att-cell.future { opacity: .45; cursor: default }
.att-cell.future:hover { outline: none }
.att-cell.s-present { background: var(--green-soft); color: var(--green) }
.att-cell.s-absent { background: var(--red-soft); color: var(--red) }
.att-cell.s-leave { background: var(--amber-soft); color: var(--amber) }
.att-cell.s-half { background: var(--accent-soft); color: var(--accent) }
.att-cell.s-holiday { background: var(--surface-2); color: var(--ink) }
tbody tr:hover > td.att-cell.off { background: var(--surface-2) }

.att-cell.sel, .att-cell.sel.off { outline: 3px solid var(--accent); outline-offset: -3px; background: var(--accent-soft) }
.att.multi .att-cell, .att.multi .att-name, .att.multi .att-day { cursor: cell }
.selbar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r); padding: 10px 12px; box-shadow: 0 -4px 16px rgba(0,0,0,.08) }

/* ---------- worker calendar & notices */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px }
.cal-head { text-align: center; font-size: 12px; color: var(--muted); padding: 2px 0 }
.cal-cell { min-height: 54px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; background: var(--surface) }
.cal-cell b { font-size: 14px } .cal-cell small { font-size: 11px }
.cal-cell.empty { border: 0; background: none }
.cal-cell.off { background: var(--surface-2); color: var(--muted) }
.cal-cell.future { opacity: .5 }
.cal-cell.today { outline: 2px solid var(--accent) }
.cal-cell.s-present { background: var(--green-soft); color: var(--green) }
.cal-cell.s-absent { background: var(--red-soft); color: var(--red) }
.cal-cell.s-leave { background: var(--amber-soft); color: var(--amber) }
.cal-cell.s-half { background: var(--accent-soft); color: var(--accent) }
.cal-cell.s-holiday { background: var(--surface-2) }
.task.overdue { border-color: var(--red); box-shadow: inset -4px 0 0 var(--red) }
.task.t-in_progress { box-shadow: inset -4px 0 0 var(--amber) }
.task.t-done, .task.t-cancelled { opacity: .78 }
.tg-card { border-color: var(--accent) }
.notice.unread { border-color: var(--accent); box-shadow: inset -4px 0 0 var(--accent) }
@media (max-width: 520px) { .cal-cell { min-height: 44px; padding: 3px } .cal-cell small { display: none } }

/* ---------- attachments */
.thumbs { display: flex; flex-wrap: wrap; gap: 10px }
.thumbs:empty { display: none }
.thumb { width: 112px; display: flex; flex-direction: column; gap: 3px; align-items: stretch; position: relative }
.thumb img, .thumb .pdf { width: 112px; height: 84px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; font-weight: 700; color: var(--red) }
.thumb small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.thumb .mini.del { position: absolute; top: 4px; left: 4px; background: var(--surface); }

/* ---------- KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px }
.kpi span { font-size: 12.5px; color: var(--muted) }
.kpi b { font-size: 22px; font-weight: 700; direction: ltr; text-align: right }
.kpi small { font-size: 12.5px; color: var(--muted) }
.kpi.lead { border-color: var(--accent); background: var(--accent-soft) }
.kpi.lead b { color: var(--accent) }
.banner { padding: 12px 14px; border-radius: var(--r); background: var(--amber-soft); color: var(--amber); font-size: 14px }
.banner.bad { background: var(--red-soft); color: var(--red) }
.banner.ok { background: var(--green-soft); color: var(--green) }
.budget .bar { height: 14px; border-radius: 7px; background: var(--line); overflow: hidden; margin: 6px 0 }
.budget .bar span { display: block; height: 100%; border-radius: 7px; background: var(--green) }
.budget .bar.warn span { background: var(--amber) }
.budget .bar.bad span { background: var(--red) }
.rate-chart { width: 100%; height: 140px; display: block }
.rate-chart polyline { fill: none; stroke: var(--accent, #0A7383); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round }
.alerts { display: flex; flex-direction: column; gap: 6px }
.alerts a.banner { text-decoration: none; display: block }
.alerts a.banner:hover { filter: brightness(.97) }
.errlist { margin: 0; padding-inline-start: 20px; font-size: 13px; color: var(--red); max-height: 200px; overflow: auto }

/* ---------- dialog & toast */
dialog { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--surface); color: var(--ink); width: min(460px, calc(100vw - 32px)) }
dialog::backdrop { background: rgba(10, 20, 25, .45) }
dialog .btns { justify-content: flex-end; margin-top: 14px }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 9px 18px; border-radius: 6px; font-size: 14px; z-index: 100; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: calc(100vw - 32px) }
.toast.show { opacity: 1 }
.toast.bad { background: var(--red); color: #fff }
@media (prefers-reduced-motion: reduce) { .toast { transition: none } }
@media (max-width: 520px) { .grid { grid-template-columns: 1fr 1fr } .kpi b { font-size: 19px } }

/* ---------- fault reports (cards reuse .task / .overdue / .t-*) */
.fault-list { display: flex; flex-direction: column; gap: 12px }
.fault .preview a { color: var(--accent); text-decoration: none; font-weight: 600 }
.fault-times { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; margin: 8px 0 }
.fault-times span { display: flex; flex-direction: column; direction: ltr; text-align: right }
.fault-times small { color: var(--muted); font-size: 11.5px; direction: rtl }
.fault-fix { margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--green-soft); color: var(--green); font-size: 14px; white-space: pre-wrap; line-height: 1.8 }
.fault-tl { margin: 6px 0 0; padding-inline-start: 18px; font-size: 13px; line-height: 1.9 }
.kpi.fault-late { border-color: var(--red); background: var(--red-soft) }
.kpi.fault-late b { color: var(--red) }

/* ---------- workers: GPS check-in card, quality stars */
.ci-card { border-color: var(--accent); box-shadow: inset -4px 0 0 var(--accent) }
.ci-act { display: flex; flex-direction: column; gap: 8px; align-items: stretch; max-width: 460px }
.ci-big { font-size: 18px; padding: 14px 20px; justify-content: center; border-radius: 10px; min-height: 54px }
.ci-big.out { background: var(--ink); border-color: var(--ink); color: var(--bg) }
.q-line { font-size: 14px }
.q-stars { color: var(--amber); letter-spacing: 1px }
.q-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 10px; font-size: 14px }
.q-box input { flex: 1; min-width: 180px; width: auto }
.q-pick { display: inline-flex; gap: 0 }
.q-star { font: inherit; font-size: 26px; line-height: 1; background: none; border: 0; border-radius: 4px; cursor: pointer; color: var(--line); padding: 2px 3px }
.q-star.on { color: var(--amber) }
.q-star:hover { color: var(--amber); filter: brightness(1.15) }
@media (max-width: 520px) { .ci-act { max-width: none } .q-star { font-size: 30px; padding: 2px 4px } }

/* ---------- warehouse: camera scanning, scan page, labels, purchase orders */
dialog.scan-dialog { width: min(520px, calc(100vw - 24px)); padding: 16px }
.scan-dlg { display: flex; flex-direction: column; gap: 10px }
.scan-dlg h3:focus { outline: none }
.scan-view { position: relative; width: 100%; min-height: 200px; background: #000; border-radius: var(--r); overflow: hidden }
.scan-view.native { display: grid; place-items: center; aspect-ratio: 4 / 3; min-height: 0 }
.scan-view.native video { width: 100%; height: 100%; object-fit: cover; display: block }
.scan-view.native::after { content: ""; position: absolute; inset: 20% 14%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .28); pointer-events: none }
.scan-view video { max-height: 60vh }
.scan-status.bad { color: var(--red) }
.scan-manual { display: flex; gap: 8px }
.scan-manual input { direction: ltr; text-align: left }
.scan-panel { align-items: stretch }
.scan-big { font-size: 17px; padding: 14px 22px; justify-content: center }
.scan-form { display: flex; gap: 8px; align-items: end }
.scan-form .f { flex: 1 }
.scan-card h2 { font-size: 19px }
.scan-card .kpi b { font-size: 20px }
.scan-holder { margin: 0; font-size: 15px }
.scan-hist { display: flex; flex-wrap: wrap; gap: 8px }
.scan-chip { font: inherit; font-size: 13px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 4px 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center }
.scan-chip:hover { border-color: var(--accent) }
.scan-chip small { color: var(--muted); font-size: 11px }
tr.scan-hit > td, tbody tr.scan-hit:hover > td { background: var(--amber-soft) !important }
tr.pick { cursor: pointer }
.lbl-check { display: flex; gap: 8px; align-items: center; font-size: 14px; padding-bottom: 8px }
.lbl-preview { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.lbl-preview:empty { display: none }
.lbl-frame { border: 1px dashed var(--line); background: #fff; border-radius: 4px; display: block }
.po-group { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; margin-top: 8px }
.po-group .tbl { max-height: 320px }

/* ---------- offline mode: connection indicator, outbox badge, offline banner, outbox page */
.net-ind { display: inline-flex; gap: 6px; align-items: center }
.net-ind a.pill { text-decoration: none }
.off-bar { margin: 14px 20px 0; display: flex; gap: 8px 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; line-height: 1.7 }
.off-bar .btn { padding: 4px 12px; font-size: 13px }
.ob-list { display: flex; flex-direction: column; gap: 12px }
.ob-op.failed { border-color: var(--red) }
.ob-sum { margin: 0; line-height: 1.8; overflow-wrap: anywhere }
@media (max-width: 900px) { .off-bar { margin: 12px 16px 0 } }
@media (max-width: 520px) { .net-ind .net-txt { display: none } }

/* ---------- production bonuses (مكافآت الإنتاج) */
.bonus-progress { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.bp-row { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.bp-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.bp-bar span { display: block; height: 100%; background: var(--amber); border-radius: 99px; }
/* attendance: phone check-in confirmation and cells the leader can no longer change */
.att-cell { position: relative }
.att-gps { position: absolute; top: 0; inset-inline-end: 1px; font-size: 9px; line-height: 1 }
.att-gps.out { filter: hue-rotate(140deg) saturate(2) }
.att-cell.locked { cursor: default }

/* manufacturing: live cost totals, the unit cost stands out */
.mfg-totals .kpi b.mfg-unit { font-size: 1.9em; color: var(--green) }
.mfg-totals .kpis { margin-bottom: 8px }

/* petty cash: one KPI group per currency */
.kpis.petty-cur > h3 { grid-column: 1 / -1; margin: 4px 0 0; font-size: 15px }

/* 🔔 follow-up center + menu badges */
.bell-wrap { position: relative; display: inline-flex }
.bell { position: relative; padding: 5px 10px; display: inline-flex; gap: 4px; align-items: center }
.bell .bell-n { background: var(--amber); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 12px; line-height: 18px; min-width: 18px; text-align: center }
.bell.bad .bell-n { background: var(--red) }
.bell.info .bell-n { background: var(--muted, #888) }
.bell-panel { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 40; width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 8px; color: var(--ink) }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px }
.bell-item { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 6px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 14px }
.bell-item:hover { background: var(--red-soft) }
.bell-item.bad { border-inline-start: 3px solid var(--red) }
.bell-item.warn { border-inline-start: 3px solid var(--amber) }
.bell-item.info { border-inline-start: 3px solid var(--line) }
.rail a .nbadge { float: left; background: var(--red); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; line-height: 19px; font-weight: 700 }

/* ---------- vehicle maintenance schedule, team evaluation (2.6) */
.vs-panel { display: flex; flex-direction: column; gap: 12px }
.vs-panel h4 { margin: 4px 0 0; font-size: 14px }
.vs-form { box-shadow: none; border-style: dashed; margin: 0 }
.vs-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); margin-bottom: 3px }
.vs-bar > span { display: block; height: 100%; background: var(--green) }
.vs-bar.warn > span { background: var(--amber) }
.vs-bar.due > span { background: var(--red) }
.vs-bar.unknown > span { background: var(--line) }
tr.muted > td { opacity: .6 }
.rate-tbl td { vertical-align: middle }
.rate-tbl .q-star { font-size: 22px; padding: 1px 2px }
.rate-tbl input { min-width: 140px }
@media (max-width: 520px) { .rate-tbl .q-star { font-size: 26px } }

/* work reports: map, points, report text */
.wr-map { height: 360px; border: 1px solid var(--line); border-radius: var(--r); direction: ltr; margin: 8px 0; background: var(--surface); z-index: 0 }
.wr-pin span { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font: 700 12px/1 sans-serif; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4) }
.wr-pin { background: none; border: 0 }
.wr-vx { background: #fff; border: 2px solid #e67e22; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.4) }
.wr-tools { flex-wrap: wrap; align-items: center; margin-top: 8px }
.wr-pts { display: flex; flex-direction: column; gap: 6px }
.wr-pt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.wr-pt input { flex: 1 1 180px; min-width: 0 }
.wr-pt select { width: auto }
.wr-num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 12px }
.wr-lab { flex: 1 1 160px }
.wr-body { white-space: pre-wrap; line-height: 1.9; overflow-wrap: anywhere }
.wr-body-in { line-height: 1.8 }
@media (max-width: 520px) { .wr-map { height: 300px } }

/* 3.5.0 «تحديثات جديدة» / «إصدار جديد» chips (delta sync, service-worker update) */
.sync-chip { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 50; border: 0; border-radius: 999px; padding: 10px 18px;
  background: var(--accent, #0A7383); color: #fff; font: 600 14px/1.2 inherit; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer }
.sync-chip.upd { bottom: 64px; background: #13222B }
.sync-chip[hidden] { display: none }

/* 3.5.0 fiber splice documentation (pages/splice.js) */
.sp-tabs { flex-wrap: wrap; margin: 4px 0 10px }
.sp-tools { flex-wrap: wrap; align-items: center; margin: 6px 0 }
.sp-wrap { overflow: auto; max-height: 72vh; border: 1px solid var(--line); border-radius: var(--r); background: #fff; -webkit-overflow-scrolling: touch }
.sp-svg { display: block; touch-action: none; user-select: none; -webkit-user-select: none; font-family: "IBM Plex Sans Arabic", Tahoma, sans-serif }
.sp-svg text { direction: rtl; text-anchor: start }
.sp-svg .sp-fib, .sp-svg .sp-tube, .sp-svg .sp-line { cursor: pointer }
/* 3.7.1 multi-select: floating action bar (phone first: big buttons, no hover) */
.sp-msbar { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 50; background: var(--card, #fff); border: 2px solid #e67e22; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.25); padding: 8px; display: flex; flex-direction: column; gap: 6px; max-width: 760px; margin: 0 auto }
.sp-msbar[hidden] { display: none }
.sp-editor:has(.sp-msbar:not([hidden])) { padding-bottom: 210px }
.sp-msrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.sp-msrow .btn { min-height: 44px; flex: 1 1 auto }
.sp-msrow > b { flex: 1 1 100%; font-size: 15px }
.sp-mschk { display: inline-flex; gap: 6px; align-items: center; min-height: 40px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px }
.sp-mschk input { width: 22px; height: 22px }
.sp-msmsg { white-space: pre-line; font-size: 13px; max-height: 96px; overflow: auto; color: #8e2c1c }
.sp-msmsg:empty { display: none }
.sp-sw { display: inline-block; vertical-align: middle; border-radius: 50%; border: 1px solid #555 }
.sp-legend, .sp-prev { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; margin-top: 8px }
.sp-chip { white-space: nowrap }
.sp-info { flex: 1 1 260px }
.sp-ccrow { align-items: end }
.sp-trace { line-height: 2; padding-inline-start: 22px }
.sp-mapimg img { border: 1px solid var(--line); border-radius: var(--r) }
/* 3.5.1 project area on the splice maps */
.sp-area-lbl { background: none; border: 0; pointer-events: none }
/* 3.7.0 code labels on the maps (zoom ≥ 17), the network schematic, splitter ports in the editor */
.sp-code-lbl { background: none; border: 0; pointer-events: none }
.sp-code-lbl span { display: inline-block; font: 700 11px/14px Consolas, Tahoma, monospace; color: #13222B; background: rgba(255,255,255,.88); border: 1px solid #b0bec5; border-radius: 4px; padding: 0 4px; white-space: nowrap; direction: ltr }
.sp-code-lbl.cab span { color: #5b2c6f; border-color: #c39bd3 }
.sp-pop { font: 13px/1.6 Tahoma, sans-serif }
.tr-wrap { max-height: 76vh; cursor: grab; touch-action: none }
.tr-svg { display: block }
.tr-node, .tr-tog { cursor: pointer }
.sp-tree-legend span { font-weight: 700 }
.sp-port.free rect { opacity: .9 }
/* 3.6.0 clusters of closures on large maps, QGIS import */
.sp-cluster { background: none; border: 0 }
.sp-cluster span { display: block; border-radius: 50%; text-align: center; font: 700 12px Tahoma, sans-serif; color: #fff; background: rgba(10,115,131,.85); border: 3px solid rgba(255,255,255,.85); box-shadow: 0 1px 4px rgba(0,0,0,.4); box-sizing: content-box; cursor: pointer }
.sp-prog progress { width: 100%; height: 14px }
.sp-sel { width: 18px; height: 18px }
.sp-qmap { height: 460px }
.sp-area-lbl span { display: block; text-align: center; font: 700 13px/20px Tahoma, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 4px #fff }
.sp-area-tog { display: flex; gap: 6px; align-items: center; background: #fff; color: #222; padding: 5px 9px; border-radius: 6px; box-shadow: 0 1px 5px rgba(0,0,0,.35); font-size: 13px; cursor: pointer }
.sp-grant-on { color: var(--green); font-weight: 700 }

/* work-report map: side handles that add a corner */
.wr-mid { opacity: .55; transform: scale(.85) }
.wr-mid:hover { opacity: 1 }

/* work-report map colours */
.wr-sws { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.wr-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0 }
.wr-sw.on { outline: 3px solid var(--ink); outline-offset: 1px }
.wr-color { width: 34px; height: 28px; padding: 0 2px; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer }

/* 3.2.0 two-step login, approvals, statements */
.login form .panel { padding: 14px; border-radius: 10px }
.tf-qr { display: flex; justify-content: center; padding: 10px; background: #fff; border-radius: 8px; border: 1px solid var(--line); min-height: 60px; align-items: center }
.tf-qr svg { width: min(220px, 100%); height: auto }
.tf-secret { display: block; font-size: 15px; letter-spacing: 1px; padding: 8px; background: var(--surface-2); border-radius: 6px; text-align: center; word-break: break-all; user-select: all }
.tf-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0 }
.tf-codes code { font-size: 16px; padding: 6px; background: var(--surface-2); border-radius: 6px; text-align: center; user-select: all }
.twofa-banner { display: block; font-size: 15px; text-decoration: none }
.appr-card .panel-head b { font-weight: 600 }
.appr-text { white-space: pre-wrap; font-family: var(--f-body); font-size: 14px; margin: 6px 0; line-height: 1.8; overflow-wrap: anywhere }
.appr-kind { margin-bottom: 14px }
/* 3.2.1: Leaflet draws the layer-switcher icon from cdnjs (images/layers.png), which the CSP img-src blocks — the same icon as a data: SVG */
.leaflet-container .leaflet-control-layers .leaflet-control-layers-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 4 2 9.5 13 15l11-5.5z' fill='%23444'/%3E%3Cpath d='M4.6 12.8 2 14.1l11 5.5 11-5.5-2.6-1.3L13 17z' fill='%23777'/%3E%3Cpath d='M4.6 17.4 2 18.7l11 5.5 11-5.5-2.6-1.3L13 21.6z' fill='%23999'/%3E%3C/svg%3E");
  background-size: 26px 26px; background-repeat: no-repeat; background-position: center
}