@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/tajawal-500-arabic.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/tajawal-500-latin.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;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/tajawal-700-arabic.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/tajawal-700-latin.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;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/tajawal-800-arabic.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/tajawal-800-latin.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;
}
/* Layout: page chrome (toolbar, upload) follows the viewer's theme; the board below is a fixed light "report sheet" because it is exported and sent as an image. */
:root{
  --bg:#eef2f7; --fg:#14243d; --muted:#5b6b82; --line:#d5deea; --panel:#ffffff; --accent:#1d4e89; --accent-2:#3a9a48;
  --font-display:"Tajawal","Segoe UI",Tahoma,sans-serif;
  --font-body:"Tajawal","Segoe UI",Tahoma,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0e1724;--fg:#e4ebf5;--muted:#9aabc2;--line:#24344b;--panel:#152234;--accent:#7fb0ec;--accent-2:#6cc57a;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0e1724;--fg:#e4ebf5;--muted:#9aabc2;--line:#24344b;--panel:#152234;--accent:#7fb0ec;--accent-2:#6cc57a;color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:15px;direction:rtl}
.wrap{max-width:1440px;margin:0 auto;padding-block:20px 40px;padding-inline:16px;display:flex;flex-direction:column;gap:16px}

/* toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.tb-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{font:700 15px/1 var(--font-body);border-radius:10px;padding:11px 16px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
:root[data-theme="dark"] .btn{color:#0e1724}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn{color:#0e1724}}
.btn.ghost{background:transparent;color:var(--accent)}
.btn:focus-visible,.drop:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}
.btn[disabled]{opacity:.5;cursor:default}
.status{color:var(--muted);font-size:14px;min-width:0}
.status b{color:var(--fg)}
.status.err{color:#c0392b}
.drop{border:2px dashed var(--line);border-radius:14px;padding:14px;text-align:center;color:var(--muted);transition:border-color .15s,background .15s}
.drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ===== the board (fixed light sheet) ===== */
.board-scroll{overflow-x:auto;border-radius:20px}
.board{
  --b-ink:#14315c; --b-navy:#1d4e89; --b-green:#2f9a4a; --b-orange:#ee7a2a; --b-gold:#e9b21b; --b-text:#22324a; --b-muted:#5c6c84; --b-line:#cfdbea; --b-card:#ffffff;
  width:100%;min-width:0;background:linear-gradient(160deg,#f7fafe 0%,#eef4fb 55%,#f5f8fc 100%);color:var(--b-text);
  border:3px solid var(--b-navy);border-radius:20px;padding:22px 26px 20px;display:flex;flex-direction:column;gap:14px;font-family:var(--font-body);position:relative
}
.board.exporting{width:1440px}
.b-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
.b-logo{display:flex;align-items:center;gap:10px}
.b-logo img{width:62px;height:62px}
.b-logo span{font-weight:700;font-size:14px;line-height:1.35;color:var(--b-ink)}
.b-title{text-align:center;font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.4vw,34px);color:var(--b-ink);margin:0;text-wrap:balance}
.b-date{background:#fff;border:1px solid var(--b-line);border-radius:12px;padding:8px 14px;text-align:center;font-size:13px;color:var(--b-muted);line-height:1.5}
.b-date b{display:block;font-size:16px;color:var(--b-ink)}
.b-total{align-self:center;background:#fff;border:1px solid var(--b-line);border-radius:16px;padding:10px 46px 12px;text-align:center;box-shadow:0 6px 20px rgba(29,78,137,.08)}
.b-total .k{font-weight:700;font-size:18px;color:var(--b-ink)}
.b-total .v{font-weight:800;font-size:clamp(38px,4.4vw,58px);line-height:1.05;color:var(--b-navy);font-variant-numeric:tabular-nums}
.b-total .u{font-weight:700;color:var(--b-muted)}
.flow svg{width:100%;height:auto;display:block}
.flow text{font-family:var(--font-body)}
.b-grid{display:grid;grid-template-columns:1.05fr 1.35fr 1fr;gap:14px}
.card{background:var(--b-card);border:1px solid var(--b-line);border-radius:16px;padding:14px 18px;min-width:0}
.card h3{margin:0 0 10px;font-size:17px;font-weight:800;color:var(--b-ink)}
.ind{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ind li{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;font-size:15px}
.ind .dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800}
.ind b{font-variant-numeric:tabular-nums;color:var(--b-ink)}
.rates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.rate{border-radius:12px;padding:8px 12px;border:1px solid var(--b-line)}
.rate .rv{font-size:30px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.rate .rk{font-size:13px;font-weight:700;color:var(--b-muted)}
.rate.done{background:#eef8f0;border-color:#cfe9d5}.rate.done .rv{color:var(--b-green)}
.rate.run{background:#fff4ea;border-color:#f6d7bd}.rate.run .rv{color:var(--b-orange)}
.stack{display:flex;height:16px;border-radius:9px;overflow:hidden;background:#e8eef6;direction:rtl}
.stack i{display:block;height:100%}
.stack-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12.5px;color:var(--b-muted)}
.stack-legend span{display:inline-flex;align-items:center;gap:5px}
.stack-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.goal{margin-top:10px;font-size:12.5px;color:var(--b-muted);line-height:1.6}
.lab{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lab div{background:#fbf7f2;border:1px solid #f1e2d2;border-radius:10px;padding:7px 10px}
.lab .lv{font-size:21px;font-weight:800;color:#b4561a;font-variant-numeric:tabular-nums;line-height:1.15}
.lab .lk{font-size:12.5px;color:var(--b-muted);font-weight:700}
.b-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--b-muted)}
.legend{display:flex;gap:16px;align-items:center;font-weight:700;color:var(--b-ink)}
.legend i{display:inline-block;width:30px;height:10px;border-radius:6px;vertical-align:middle;margin-inline-start:6px}
.chk{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:3px 10px;font-weight:700}
.chk.ok{background:#e6f5ea;color:#1e7a39}.chk.bad{background:#fdecea;color:#b03224}
.delta{font-size:12px;font-weight:700;color:var(--b-green)}
/* viewer mode + partial export: the board ends at the progress card */
.board.viewer #labCard,.board.viewer #check,.board.partial #labCard,.board.partial #check{display:none}
.board.viewer .b-grid,.board.partial .b-grid{grid-template-columns:1fr 1.4fr}
.mode{font-size:12.5px;font-weight:700;border-radius:20px;padding:4px 10px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.sel{font:700 14px/1 var(--font-body);padding:10px 10px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--fg)}
.sign{direction:ltr;display:inline-flex;align-items:center;gap:5px;background:#dde8f8;border-radius:20px;padding:7px 16px;font-size:13.5px;line-height:1.2;color:#3d5f93;font-weight:500}
.sign .sig{font-weight:800;color:#1b3b70;outline:none}
@media (max-width:1000px){.board.viewer .b-grid,.board.partial .b-grid{grid-template-columns:1fr}}
@media (max-width:1000px){.b-grid{grid-template-columns:1fr}.b-head{grid-template-columns:1fr;justify-items:center}.b-date{order:3}}
@media (max-width:600px){.board{padding:16px 14px}.b-total{padding:8px 22px 10px}.rates{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.flow .num{transition:opacity .3s}}

/* admin sign-in */
.login{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.login label{font-weight:700}
.login input{font:500 15px var(--font-body);padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);min-width:0;flex:1 1 220px;max-width:360px}
.login input:focus-visible{outline:3px solid var(--accent-2);outline-offset:1px}
.login-err{color:#c0392b;font-weight:700;font-size:14px}
[hidden]{display:none!important}
body{margin:0}
img{max-width:100%}

/* visibility by role: guest · auth (any signed-in) · upload (admin/editor) · admin */
.auth-only,.upload-only,.admin-only{display:none}
body.is-auth .auth-only,body.can-upload .upload-only,body.is-admin .admin-only{display:revert}
body.can-upload .drop.upload-only{display:block}
body.is-auth .guest-only{display:none}

/* user management */
.users{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:14px}
.users h2{margin:0;font-size:18px}
.users h3{margin:0;font-size:15px;width:100%}
.users-table{overflow-x:auto}
.users table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.users th,.users td{text-align:start;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.users th{color:var(--muted);font-weight:700;font-size:13px}
.users td.ltr{direction:ltr;text-align:end;font-variant-numeric:tabular-nums}
.users .acts{display:flex;flex-wrap:wrap;gap:6px}
.users .acts button,.users td select{font:700 13px/1 var(--font-body);padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.users .acts button.danger{color:#c0392b;border-color:#e8b4ad}
.users .acts button:focus-visible,.users td select:focus-visible{outline:3px solid var(--accent-2);outline-offset:1px}
.pill{display:inline-block;border-radius:20px;padding:3px 10px;font-size:12px;font-weight:700}
.pill.on{background:#e6f5ea;color:#1e7a39}.pill.off{background:#f1f3f6;color:#6b7686}
.user-add{display:flex;flex-wrap:wrap;gap:10px;align-items:end;border-top:1px solid var(--line);padding-top:12px}
.user-add label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:var(--muted);flex:1 1 170px;min-width:0}
.user-add input,.user-add select{font:500 14px var(--font-body);padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);min-width:0}
.user-add input:focus-visible,.user-add select:focus-visible{outline:3px solid var(--accent-2);outline-offset:1px}
.login input#userInput{max-width:220px}