/* Cairo (SIL Open Font License), self-hosted: variable font, one file per script covers weights 400-800 */
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("fonts/cairo-arabic.4d90a59cb181.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("fonts/cairo-latin-ext.2ef88f3a969d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("fonts/cairo-latin.3c9597566d23.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* palette: navy / royal / teal with gold actions */
  --navy: #0E2E63; --royal: #1B62B3; --royal-d: #14528f; --teal: #18A2B8; --gold: #F5A623; --gold-bright: #FFB638;
  --bg: #EDF3FB; --card: #fff; --surface-2: #F4F8FD; --text: #0E2240; --muted: #46597A; --muted-2: #7E92AE;
  --line: rgba(14, 46, 99, 0.10); --line-2: rgba(14, 46, 99, 0.18);
  --brand: var(--royal); --brand-d: var(--royal-d);
  --ok: #0F9D6C; --okbg: #e3f6ef; --err: #E23D6B; --errbg: #fde8ee; --warn: #9a6100; --warnbg: #FFF3DD;
  --grad-gold: linear-gradient(135deg, var(--gold), var(--gold-bright));
  --grad-brand: linear-gradient(135deg, var(--navy) 0%, var(--royal) 50%, var(--teal) 100%);
  --shadow-sm: 0 2px 10px rgba(14, 46, 99, 0.06); --shadow: 0 16px 36px rgba(14, 46, 99, 0.10);
  --shadow-gold: 0 8px 20px rgba(245, 166, 35, 0.30);
  --r-lg: 20px; --r-md: 14px; --r-sm: 9px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Tahoma, "Noto Kufi Arabic", Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
header.top { background: #fff; border-bottom: 3px solid var(--brand); display: flex; align-items: center; gap: 18px; padding: 10px 20px; flex-wrap: wrap; }
header.top .logo { font-weight: 800; font-size: 20px; color: var(--brand); }
header.top nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
header.top nav a { padding: 7px 12px; border-radius: 6px; color: var(--text); }
header.top nav a.on, header.top nav a:hover { background: #f1e3e4; color: var(--brand); text-decoration: none; }
.who { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 14px; }
.bal { background: var(--okbg); color: var(--ok); border-radius: 6px; padding: 5px 10px; font-weight: 700; }
.bal.neg { background: var(--errbg); color: var(--err); }
main { max-width: 1200px; margin: 20px auto; padding: 0 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
h1 { font-size: 21px; margin: 0 0 14px; } h2 { font-size: 17px; margin: 0 0 12px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat { font-size: 26px; font-weight: 800; } .muted { color: var(--muted); }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
input, select, textarea { width: 100%; padding: 9px 10px; border: 1px solid #cfd4dc; border-radius: 7px; font: inherit; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid #f1c9cc; border-color: var(--brand); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .row > div { flex: 1 1 160px; min-width: 0; }
button, .btn { display: inline-block; background: var(--brand); color: #fff; border: 0; border-radius: 7px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; }
button:hover, .btn:hover { background: var(--brand-d); text-decoration: none; }
.btn.light, button.light { background: #eef0f3; color: var(--text); } .btn.light:hover, button.light:hover { background: #e2e5ea; }
.btn.sm, button.sm { padding: 5px 10px; font-size: 13px; }
.btn.big, button.big { padding: 13px 26px; font-size: 17px; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; }
th { background: #f8f9fb; font-size: 13px; color: var(--muted); font-weight: 600; position: sticky; top: 0; }
tr:hover td { background: #fbfbfc; }
.num { direction: ltr; text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flash { padding: 11px 14px; border-radius: 8px; margin-bottom: 12px; }
.flash.ok { background: var(--okbg); color: var(--ok); } .flash.error { background: var(--errbg); color: var(--err); }
.flash.warn { background: var(--warnbg); color: var(--warn); }
.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.tag.ok { background: var(--okbg); color: var(--ok); } .tag.cancelled, .tag.failed { background: var(--errbg); color: var(--err); }
.tag.pending { background: var(--warnbg); color: var(--warn); } .tag.off { background: #eee; color: #666; }
.methods { display: flex; gap: 8px; flex-wrap: wrap; }
.methods label { flex: 1; min-width: 120px; border: 2px solid #d7dbe1; border-radius: 8px; padding: 12px; text-align: center; cursor: pointer; color: var(--text); font-size: 15px; margin: 0; }
.methods input { display: none; }
.methods input:checked + span { color: var(--brand); font-weight: 800; }
.methods label:has(input:checked) { border-color: var(--brand); background: #fbf1f2; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; } .kv b { font-weight: 700; }
.login-box { max-width: 380px; margin: 70px auto; }
.scroll { overflow-x: auto; }
.inline { display: inline; }
@media (max-width: 640px) { .kv { grid-template-columns: 110px 1fr; } header.top { padding: 8px 12px; } }

.kv > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 360px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv b { margin-top: 6px; } }

/* ---- work orders ---- */
.head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.head-row h1 { margin: 0; }
.grid2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid2 > .card { margin-bottom: 0; }
.grid2 + * { margin-top: 16px; }
.stat-card { color: var(--text); display: block; } .stat-card:hover { text-decoration: none; border-color: var(--brand); }
.tag.s-new { background: #e7eefc; color: #1d4ed8; } .tag.s-assigned { background: var(--warnbg); color: var(--warn); }
.tag.s-accepted { background: #efe7fb; color: #6d28d9; } .tag.s-submitted { background: #e0f2fe; color: #0369a1; }
.tag.s-returned { background: #fde8d7; color: #b45309; } .tag.s-approved { background: var(--okbg); color: var(--ok); }
.tag.s-cancelled, .tag.late { background: var(--errbg); color: var(--err); }
.items { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 14px; }
.items .item { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 14px; margin: 0; }
.items .qty { width: 72px; flex: 0 0 72px; }
.code { font-size: 22px; letter-spacing: 6px; text-align: center; }
tr.total td { font-weight: 800; background: #f8f9fb; }
.neg { color: var(--err); }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 12px; }
.timeline { list-style: none; padding: 0; margin: 0; } .timeline li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
button.danger { background: var(--err); }
.actions form.inline { display: inline-block; }
@media (max-width: 640px) { main { margin: 12px auto; padding: 0 10px; } .card { padding: 14px; } .grid2 { grid-template-columns: 1fr; } }
.row > div.shrink { flex: 0 0 auto; }
@media (max-width: 640px) {
  header.top { gap: 8px; }
  header.top nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  header.top nav a { white-space: nowrap; padding: 6px 10px; }
  .who { font-size: 13px; }
  .row > div.shrink { flex: 1 1 100%; } .row > div.shrink button { width: 100%; }
  .head-row form.row { width: 100%; }
}
/* editable tables: keep inputs readable on phones, scroll the card instead of squeezing */
.edit-table { min-width: 600px; } .edit-table td:first-child input { min-width: 180px; }

label.check { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0 14px; color: var(--text); font-size: 15px; }
label.check input { width: auto; }
label.big-check { display: flex; font-size: 17px; padding: 10px 0; }
details summary { cursor: pointer; font-weight: 600; color: var(--brand); }

/* ---- theme: Cairo + navy/royal/teal/gold, soft cards ---- */
body { font-family: "Cairo", system-ui, Tahoma, sans-serif; line-height: 1.7; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: var(--navy); font-weight: 800; line-height: 1.3; }
a { color: var(--royal); }
header.top { position: sticky; top: 0; z-index: 50; background: rgba(247, 250, 253, .9); border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(14, 46, 99, .06); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
header.top .logo { font-weight: 800; color: var(--navy); }
header.top .logo b { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
header.top nav a { color: var(--muted); font-weight: 700; border-radius: var(--r-sm); position: relative; }
header.top nav a.on, header.top nav a:hover { background: transparent; color: var(--navy); }
header.top nav a::after { content: ""; position: absolute; bottom: 2px; right: 12px; left: 12px; height: 2px; border-radius: 2px;
  background: var(--grad-gold); transform: scaleX(0); transition: transform .3s; }
header.top nav a.on::after, header.top nav a:hover::after { transform: scaleX(1); }
.card { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.stat-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.stat { color: var(--navy); }
label { color: var(--muted); font-weight: 600; }
input, select, textarea { border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(24, 162, 184, .22); border-color: var(--teal); }
button, .btn { background: var(--grad-gold); color: var(--navy); font-weight: 800; border-radius: var(--r-md); box-shadow: var(--shadow-gold);
  transition: transform .2s, box-shadow .2s, filter .2s; }
button:hover, .btn:hover { background: var(--grad-gold); filter: brightness(1.04); transform: translateY(-1px); }
.btn.light, button.light { background: var(--surface-2); color: var(--navy); box-shadow: none; border: 1px solid var(--line); }
.btn.light:hover, button.light:hover { background: #e8f0fa; }
button.danger { background: var(--err); color: #fff; box-shadow: 0 8px 20px rgba(226, 61, 107, .25); }
th { background: var(--surface-2); color: var(--muted); font-weight: 700; }
th, td { border-bottom-color: var(--line); }
tr:hover td { background: #f7fafe; }
tr.total td { background: var(--surface-2); color: var(--navy); }
.flash { border-radius: var(--r-md); border: 1px solid transparent; font-weight: 600; }
.flash.ok { border-color: rgba(15, 157, 108, .2); } .flash.error { border-color: rgba(226, 61, 107, .2); }
.flash.warn { border-color: rgba(245, 166, 35, .35); }
.tag { border-radius: 99px; padding: 2px 10px; font-weight: 700; }
.tag.s-new { background: #e4eefb; color: var(--royal); } .tag.s-submitted { background: #e0f5f8; color: #0f7f91; }
.items .item { border-color: var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.methods label { border-radius: var(--r-md); border-color: var(--line-2); }
.methods label:has(input:checked) { border-color: var(--royal); background: #eef4fc; }
.methods input:checked + span { color: var(--royal); }
.card.login-box { box-shadow: var(--shadow); padding: 28px; }
details summary { color: var(--royal); }
.who a { color: var(--navy); font-weight: 700; }
.bal { border-radius: var(--r-sm); }
/* header: one scrollable nav row below the logo whenever the links do not fit on one line */
@media (max-width: 1180px) {
  header.top { gap: 6px 12px; padding: 8px 14px 0; }
  header.top nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  header.top nav::-webkit-scrollbar { display: none; }
  header.top nav a { white-space: nowrap; padding: 6px 10px 10px; }
  header.top .who { margin-inline-start: auto; }
}
@media (max-width: 640px) { header.top { position: static; } }

/* work items as checkboxes */
.items .item-check { justify-content: flex-start; cursor: pointer; padding: 12px 14px; user-select: none; }
.items .item-check input { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; accent-color: var(--royal); cursor: pointer; }
.items .item-check span:first-of-type { flex: 1; font-weight: 600; }
.items .item-check:has(input:checked) { border-color: var(--royal); background: #eef4fc; }

/* no coverage */
.tag.s-no_coverage { background: #fde8ee; color: #b4234e; }
.card.nocov { border-color: rgba(226, 61, 107, .35); background: #fff7f9; }
.card.nocov h2 { color: #b4234e; }
.nocov-form summary { color: #b4234e; font-weight: 700; }