@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════════════════
   CEA — Design Tokens
   القاعدة: --navy / --blue / --gold / --green / --red = خلفيات (Brand)
            دايمًا غامقة كفاية لنص أبيض في الوضعين.
            --navy-text / --gold-text = نفس الهوية لكن للنص على الكروت.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Refined Navy: كحلي أعمق للثقة، الذهبي = لون الإجراء/التأكيد فقط */
  --navy:#173058;  --blue:#2A4F8F;  --gold:#C9A84C;
  --green:#2E7D32; --red:#C62828;   --purple:#6A1B9A; --orange:#E65100;
  --navy-text:#173058; --gold-text:#8A6D1D; --purple-text:#6A1B9A;

  --bg:#F5F7FB; --card:#FFFFFF; --border:#E1E7F0; --border-strong:#C3CEE0;
  --text:#152238; --muted:#63708A; --input:#F4F7FC; --track:#E6EBF3;

  --ok-bg:#E8F5E9;   --ok-fg:#1B5E20;
  --warn-bg:#FFF6DC; --warn-fg:#9A5B00;
  --danger-bg:#FDECEC; --danger-fg:#B71C1C;
  --info-bg:#EAF1FF; --info-fg:#1F3864;
  --purple-bg:#F3E8FA; --purple-fg:#6A1B9A;
  --pink-bg:#FCE4EC;  --pink-fg:#880E4F;
  --gold-bg:#FFF8E1;  --gold-fg:#7B5800;

  --shadow-sm:0 1px 4px rgba(23,48,88,.06);
  --shadow:0 2px 12px rgba(23,48,88,.08);
  --shadow-lg:0 8px 28px rgba(23,48,88,.16);
  --radius:14px; --radius-sm:10px;
  --header-grad:linear-gradient(135deg,#173058,#2A4F8F);
  --focus:0 0 0 3px rgba(42,79,143,.18);
  /* التنقل الجديد */
  --nav-bg:#173058; --nav-fg:rgba(255,255,255,.62); --nav-active:#F0D07A;
  --bottombar-h:64px;
}
body.dark-mode {
  --navy:#2C4E88;  --blue:#3B6AB5;  --gold:#D4B45A;
  --green:#2F8A35; --red:#D64545;   --purple:#8E44AD; --orange:#EF6C00;
  --navy-text:#9DBCEF; --gold-text:#E4C670; --purple-text:#CE93D8;

  --bg:#0F1621; --card:#171F2E; --border:#28344B; --border-strong:#36486A;
  --text:#E3EAF6; --muted:#94A2BB; --input:#1E2838; --track:#28344B;

  --ok-bg:#13301B;   --ok-fg:#7BD389;
  --warn-bg:#382A0B; --warn-fg:#F2C260;
  --danger-bg:#3A1717; --danger-fg:#FF8A80;
  --info-bg:#1B2A45; --info-fg:#9DBCEF;
  --purple-bg:#2A1B3A; --purple-fg:#CE93D8;
  --pink-bg:#3A1A2A;  --pink-fg:#F48FB1;
  --gold-bg:#2E2606;  --gold-fg:#E4C670;

  --shadow-sm:0 1px 4px rgba(0,0,0,.35);
  --shadow:0 2px 12px rgba(0,0,0,.4);
  --shadow-lg:0 8px 28px rgba(0,0,0,.6);
  --header-grad:linear-gradient(135deg,#0B1526,#16294A);
  --focus:0 0 0 3px rgba(157,188,239,.25);
  --nav-bg:#0B1526; --nav-fg:rgba(255,255,255,.55); --nav-active:#F0D07A;
}

/* ─── Base ─── */
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:'Cairo',system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh;
  transition:background-color .25s ease, color .25s ease;
  padding-bottom:env(safe-area-inset-bottom);
}
body, .card, input, select, textarea, button, .tabs, .tab, .total-field, .edit-banner
 { transition:background-color .25s ease, color .25s ease, border-color .25s ease; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:6px; }
button { font-family:inherit; }

/* ─── Header ─── */
.app-header {
  background:var(--header-grad); color:#fff;
  padding:12px 16px; box-shadow:0 3px 12px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:60px;
}
.header-title-wrap { min-width:0; text-align:right; }
.brand-logo {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  border:2.5px solid #C9A84C; background:rgba(201,168,76,.12);
  display:flex; align-items:center; justify-content:center;
}
.brand-logo span { font-size:11.5px; font-weight:900; color:#C9A84C; }
.brand-title { font-size:19px; font-weight:900; letter-spacing:.2px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-sub   { font-size:10px; color:rgba(255,255,255,.55); letter-spacing:.8px; white-space:nowrap; margin-top:1px; }
.icon-toggle {
  grid-column:1; justify-self:start;
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.25); border-radius:50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; transition:background .25s, transform .25s;
}
.icon-toggle:hover  { background:rgba(255,255,255,.22); transform:scale(1.06); }
.icon-toggle:active { transform:scale(.94); }

/* ─── Sticky top: offline banner + tabs ─── */
.topbar { position:sticky; top:0; z-index:100; }
#offline-banner {
  display:none; background:#E65100; color:#fff; text-align:center;
  font-size:11.5px; font-weight:700; padding:6px 10px; line-height:1.4;
}
/* ─── صف تفضيل بمفتاح تبديل (Settings) ─── */
.pref-row {
  width:100%; min-height:52px; padding:8px 4px; border:none; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:inherit; color:var(--text); text-align:right; -webkit-tap-highlight-color:transparent;
}
.pref-text { min-width:0; }
.pref-title { font-size:13.5px; font-weight:800; }
.pref-sub { font-size:11px; color:var(--muted); margin-top:2px; }
.switch {
  width:46px; height:26px; border-radius:13px; flex-shrink:0; position:relative;
  background:var(--track); border:1px solid var(--border-strong); transition:background .2s, border-color .2s;
}
.switch .knob {
  position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s;
}
.pref-row[aria-pressed="true"] .switch { background:var(--gold); border-color:var(--gold); }
.pref-row[aria-pressed="true"] .switch .knob { transform:translateX(-20px); }

/* ─── الشريط السفلي (تنقل أساسي — 4 عناصر ≥44px في متناول الإبهام) ─── */
.bottombar {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  display:flex; background:var(--nav-bg);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -3px 14px rgba(0,0,0,.18);
  border-top:1px solid rgba(255,255,255,.06);
}
.bb-item {
  flex:1 1 0; min-width:0; min-height:var(--bottombar-h); padding:8px 4px 6px;
  border:none; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--nav-fg); font-size:11px; font-weight:700; line-height:1.2;
  position:relative; -webkit-tap-highlight-color:transparent;
  transition:color .2s;
}
.bb-item .ico { font-size:21px; line-height:1; filter:grayscale(.4); opacity:.85; transition:transform .2s, filter .2s, opacity .2s; }
.bb-item.active { color:var(--nav-active); }
.bb-item.active .ico { filter:none; opacity:1; transform:translateY(-2px); }
.bb-item.active::before {
  content:""; position:absolute; top:0; left:22%; right:22%; height:3px;
  background:var(--nav-active); border-radius:0 0 3px 3px;
}
.bb-item:active .ico { transform:scale(.9); }

/* ─── القائمة الجانبية (Drawer) — تفتح من اليمين في RTL ─── */
#drawer-scrim {
  position:fixed; inset:0; background:rgba(8,16,32,.55); z-index:200;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s;
  backdrop-filter:blur(2px);
}
#drawer {
  position:fixed; top:0; bottom:0; right:0; width:min(300px,84vw); z-index:201;
  background:var(--card); box-shadow:-8px 0 30px rgba(0,0,0,.25);
  transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
}
body.drawer-open #drawer-scrim { opacity:1; visibility:visible; }
body.drawer-open #drawer { transform:translateX(0); }
body.drawer-open { overflow:hidden; }
.drawer-head {
  background:var(--header-grad); color:#fff; padding:18px 16px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.drawer-user { display:flex; align-items:center; gap:11px; min-width:0; }
.drawer-avatar {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  border:2.5px solid #C9A84C; background:rgba(201,168,76,.14);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:900; color:#F0D07A;
}
.drawer-user-text { min-width:0; }
.drawer-user-email { font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; direction:ltr; text-align:right; }
.drawer-user-role { font-size:10.5px; color:rgba(255,255,255,.6); margin-top:2px; }
.drawer-close {
  width:36px; height:36px; border-radius:50%; flex-shrink:0; cursor:pointer;
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.25); color:#fff; font-size:15px;
}
.drawer-nav { flex:1; overflow-y:auto; padding:10px 10px; }
.drawer-item {
  width:100%; min-height:48px; padding:10px 12px; border:none; border-radius:var(--radius-sm);
  background:none; cursor:pointer; text-align:right;
  display:flex; align-items:center; gap:12px;
  color:var(--text); font-size:14px; font-weight:700;
  transition:background .15s, color .15s; -webkit-tap-highlight-color:transparent;
}
.drawer-item .ico { font-size:19px; width:26px; text-align:center; filter:grayscale(.3); }
.drawer-item:hover { background:var(--input); }
.drawer-item.active { background:var(--info-bg); color:var(--navy-text); box-shadow:inset 3px 0 0 var(--gold); }
.drawer-item.active .ico { filter:none; }
.drawer-sep { height:1px; background:var(--border); margin:8px 6px; }
.drawer-foot { padding:12px 14px 14px; border-top:1px solid var(--border); }
.drawer-sync { font-size:11px; color:var(--muted); margin-bottom:10px; line-height:1.5; }
.drawer-logout {
  width:100%; min-height:44px; border-radius:var(--radius-sm); cursor:pointer;
  background:var(--danger-bg); color:var(--danger-fg); border:1px solid transparent;
  font-size:13px; font-weight:800; font-family:inherit;
}
.drawer-logout:hover { border-color:var(--red); }

/* ─── الرئيسية ─── */
.home-greet { padding:4px 2px 14px; }
.home-greet-text { font-size:20px; font-weight:900; color:var(--navy-text); line-height:1.3; }
.home-greet-date { font-size:13.5px; font-weight:700; color:var(--navy-text); margin-top:4px; opacity:.85; }
.stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
@media (min-width:640px){ .stat-grid { grid-template-columns:repeat(4,1fr); } }
.stat {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 12px; text-align:right; cursor:pointer; box-shadow:var(--shadow-sm);
  font-family:inherit; color:var(--text); min-height:88px;
  display:flex; flex-direction:column; justify-content:space-between; gap:4px;
  transition:transform .15s, box-shadow .15s, border-color .15s; -webkit-tap-highlight-color:transparent;
}
.stat:active { transform:scale(.98); }
.stat:hover { box-shadow:var(--shadow); border-color:var(--border-strong); }
.stat-l { font-size:11.5px; font-weight:700; color:var(--muted); }
.stat-v { font-size:24px; font-weight:900; color:var(--navy-text); line-height:1.1; font-variant-numeric:tabular-nums; }
.stat-s { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.stat.warn { border-color:var(--orange); }
.stat.warn .stat-v { color:var(--orange); }
.home-cta {
  width:100%; min-height:54px; margin-bottom:14px; border:none; border-radius:var(--radius); cursor:pointer;
  background:linear-gradient(135deg,#C9A84C,#B8963A); color:#1A1400;
  font-size:16px; font-weight:900; font-family:inherit; letter-spacing:.2px;
  box-shadow:0 4px 16px rgba(201,168,76,.35);
  transition:transform .15s, box-shadow .15s; -webkit-tap-highlight-color:transparent;
}
.home-cta:active { transform:scale(.985); box-shadow:0 2px 8px rgba(201,168,76,.3); }
.link-btn { background:none; border:none; color:var(--blue); font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; padding:4px 6px; min-height:32px; }
body.dark-mode .link-btn { color:var(--navy-text); }
.home-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--border);
}
.home-row:last-child { border-bottom:none; }
.home-row .n { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-row .s { font-size:11px; color:var(--muted); margin-top:2px; }
.home-row .v { font-size:13.5px; font-weight:800; color:var(--navy-text); white-space:nowrap; font-variant-numeric:tabular-nums; }
.home-row.late .n { color:var(--danger-fg); }
.home-empty { text-align:center; color:var(--muted); font-size:12px; padding:14px 0; }
.home-sync { text-align:center; font-size:11px; color:var(--muted); padding:6px 0 4px; }

/* ─── Layout ─── */
.panel { display:none; padding:14px 14px calc(var(--bottombar-h) + 28px); max-width:760px; margin:0 auto; }
.panel.active { display:block; animation:fadeIn .18s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

.card {
  background:var(--card); border-radius:var(--radius); padding:16px 14px;
  box-shadow:var(--shadow); margin-bottom:12px; border:1px solid var(--border);
}
.card-title {
  font-size:13.5px; font-weight:800; color:var(--navy-text); margin-bottom:12px;
  padding-bottom:8px; border-bottom:2px solid var(--border);
  display:flex; align-items:center; gap:7px;
}
.card-title.between { justify-content:space-between; }
.card-title .t { display:flex; align-items:center; gap:7px; }
.card.accent-navy   { border-color:var(--blue); }
.card.accent-gold   { border-color:var(--gold); }
.card.accent-red    { border-color:var(--red); }
.card.accent-purple { border-color:var(--purple); }
.hint { font-size:12px; color:var(--muted); margin-bottom:10px; line-height:1.6; }
.hint-box { background:var(--input); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:10px; font-size:11.5px; color:var(--muted); line-height:1.7; }
.hint-box strong { color:var(--text); }
.section-title { font-size:13px; font-weight:800; color:var(--navy-text); margin:14px 0 8px; display:flex; align-items:center; gap:6px; }
.subhead { font-size:12px; font-weight:700; color:var(--navy-text); margin:12px 0 6px; }

/* ─── Forms ─── */
.field { margin-bottom:12px; }
.field:last-child { margin-bottom:0; }
label { display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:5px; }
label .req { color:var(--red); }
input, select, textarea {
  width:100%; padding:11px 13px; border:1.5px solid var(--border-strong); border-radius:var(--radius-sm);
  font-family:inherit; font-size:14px; color:var(--text); background:var(--input);
  -webkit-appearance:none; appearance:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.75; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--blue); box-shadow:var(--focus); background:var(--card); }
body.dark-mode input:focus, body.dark-mode select:focus, body.dark-mode textarea:focus { background:#243044; border-color:var(--navy-text); }
input[type="date"] { min-height:44px; }
input[type="file"] { padding:9px 12px; font-size:13px; background:var(--card); }
input[type="checkbox"] { width:22px; height:22px; padding:0; accent-color:var(--green); border-radius:6px; }
input[type="range"] { appearance:auto; -webkit-appearance:auto; border:none; background:transparent; padding:0; height:28px; accent-color:var(--blue); }
textarea { resize:vertical; min-height:60px; line-height:1.5; }
select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7A99' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 12px center; padding-left:34px;
}
.row { display:flex; gap:7px; }
.row > * { flex:1; min-width:0; }
.row .grow2 { flex:2; }
.mb7 { margin-bottom:7px; }
.auto-field  { background:var(--purple-bg); border-color:var(--purple-fg); color:var(--purple-fg); font-weight:600; }
.total-field { background:var(--gold-bg); border-color:var(--gold); color:var(--gold-fg); font-size:18px; font-weight:900; text-align:center; letter-spacing:.3px; }

/* ─── Buttons ─── */
.btn {
  width:100%; padding:13px 14px; border:none; border-radius:12px; cursor:pointer;
  font-size:14.5px; font-weight:800; color:#fff; letter-spacing:.2px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .1s, filter .15s, box-shadow .15s; -webkit-tap-highlight-color:transparent;
}
.btn:active { transform:scale(.975); filter:brightness(.95); }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn + .btn { margin-top:10px; }
.btn-primary { background:linear-gradient(135deg,var(--green),#43A047); box-shadow:0 4px 14px rgba(46,125,50,.28); }
.btn-danger  { background:linear-gradient(135deg,#E53935,var(--red)); box-shadow:0 4px 14px rgba(198,40,40,.22); }
.btn-export, .btn-navy { background:linear-gradient(135deg,var(--navy),var(--blue)); box-shadow:0 4px 14px rgba(31,56,100,.28); }
.btn-gold    { background:linear-gradient(135deg,#8A6D1D,var(--gold)); box-shadow:0 4px 14px rgba(201,168,76,.3); }
.btn-purple  { background:linear-gradient(135deg,#5B3E8C,#7B5BB6); box-shadow:0 4px 14px rgba(91,62,140,.3); }
.btn-dark-red{ background:linear-gradient(135deg,#4A0000,#B71C1C); box-shadow:0 4px 14px rgba(183,28,28,.4); border:2px solid #FF5252; }
.btn-ghost   { background:var(--input); color:var(--text); border:1.5px solid var(--border-strong); box-shadow:none; }
.btn-add     { background:linear-gradient(135deg,var(--green),#43A047); padding:11px; font-size:14px; border-radius:var(--radius-sm); margin-top:8px; }
.btn-sm { padding:9px 12px; font-size:13px; border-radius:var(--radius-sm); }
.btn-inline { width:auto; display:inline-flex; padding:6px 12px; font-size:11.5px; border-radius:8px; margin:0; font-weight:700; white-space:nowrap; flex-shrink:0; }
.btn-sm-del  { background:var(--red);  color:#fff; border:none; border-radius:8px; padding:6px 11px; font-size:12px; font-weight:700; cursor:pointer; }
.btn-sm-edit { background:var(--blue); color:#fff; border:none; border-radius:8px; padding:6px 11px; font-size:12px; font-weight:700; cursor:pointer; margin-left:4px; }
.btn-group { display:flex; gap:8px; }
.btn-group .btn { margin:0; }
.actions-block { padding:0 0 12px; }

/* ─── Toast ─── */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(90px);
  background:var(--green); color:#fff; padding:11px 18px; border-radius:16px;
  font-weight:700; font-size:13px; line-height:1.5; text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.28); z-index:99999;
  max-width:min(92vw,420px); width:max-content; white-space:normal;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s; opacity:0;
}
.toast.show  { transform:translateX(-50%) translateY(0); opacity:1; }
.toast.error { background:var(--red); }

/* ─── Records ─── */
.records-header { display:flex; justify-content:space-between; align-items:center; margin:12px 0 10px; }
.records-header .rh-title { font-size:13.5px; font-weight:800; color:var(--navy-text); }
.records-header .rh-title.purple { color:var(--purple-text); }
.records-header .rh-title.orange { color:var(--orange); }
.records-count  { background:var(--blue); color:#fff; padding:3px 11px; border-radius:20px; font-size:12px; font-weight:700; }
.records-count.purple { background:var(--purple); }
.records-count.orange { background:var(--orange); }
.empty-state    { text-align:center; padding:36px 20px; color:var(--muted); font-size:13px; }
.empty-state .icon { font-size:44px; margin-bottom:8px; opacity:.85; }

.record-card {
  background:var(--card); border-radius:12px; padding:12px 13px; margin-bottom:9px;
  box-shadow:var(--shadow-sm); border:1px solid var(--border); border-right:4px solid var(--blue);
}
.record-card:nth-child(even) { border-right-color:var(--gold); }
.record-card.ir-card { border-right-color:var(--purple); }
.record-card.done-card { border-right-color:var(--green); }
.record-head { display:flex; align-items:flex-start; gap:8px; margin-bottom:6px; }
.record-title { flex:1; min-width:0; }
.record-name { font-weight:900; font-size:14px; color:var(--navy-text); line-height:1.35; word-break:break-word; }
.record-spec { font-size:11px; color:var(--muted); margin-top:1px; }
.record-side { text-align:left; flex-shrink:0; }
.record-total{ font-size:16px; font-weight:900; color:var(--green); white-space:nowrap; line-height:1.1; }
.record-total small { display:block; font-size:10px; color:var(--muted); font-weight:600; }
.record-actions { display:flex; gap:2px; flex-shrink:0; margin-right:2px; }
.icon-btn {
  background:var(--input); border:1px solid var(--border); border-radius:8px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; padding:0;
  color:var(--muted); transition:background .15s, color .15s;
}
.icon-btn:active { transform:scale(.92); }
.icon-btn.edit:hover { color:var(--navy-text); border-color:var(--blue); }
.icon-btn.del { color:var(--red); }
.icon-btn.del:hover { background:var(--danger-bg); border-color:var(--red); }
.record-meta { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.badge { background:var(--input); color:var(--navy-text); padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; border:1px solid var(--border); }
.badge-a, .badge-ok   { background:var(--ok-bg);   color:var(--ok-fg);   border-color:transparent; }
.badge-b, .badge-warn { background:var(--warn-bg); color:var(--warn-fg); border-color:transparent; }
.badge-c, .badge-pink { background:var(--pink-bg); color:var(--pink-fg); border-color:transparent; }
.badge-danger { background:var(--danger-bg); color:var(--danger-fg); border-color:transparent; }
.record-notes{ font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.6; word-break:break-word; }
.deduct-box { margin-top:6px; background:var(--danger-bg); border-right:3px solid var(--red); border-radius:6px; padding:5px 8px; font-size:11px; line-height:1.6; }
.deduct-box b { color:var(--danger-fg); font-weight:900; }
.deduct-box .note { color:var(--muted); }
.done-toggle { margin-top:8px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; padding:5px 8px 5px 10px; border-radius:20px; border:1px dashed var(--border-strong); font-size:12px; font-weight:700; color:var(--muted); }
.done-toggle .box { width:18px; height:18px; border-radius:5px; border:2px solid var(--border-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.done-toggle.on { color:var(--ok-fg); background:var(--ok-bg); border-color:transparent; }
.done-toggle.on .box { background:var(--green); border-color:var(--green); color:#fff; font-size:12px; font-weight:900; }
.thumb { width:84px; height:64px; object-fit:cover; border-radius:8px; border:2px solid var(--border); cursor:pointer; display:block; margin-top:8px; }
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:9999; align-items:center; justify-content:center; }
.lightbox img { max-width:95vw; max-height:90vh; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.6); }

/* ─── Filters / search ─── */
.search-bar { display:flex; gap:7px; margin-bottom:8px; }
.search-bar input, .search-bar select { flex:1; min-width:0; padding:10px 12px; font-size:13px; background:var(--card); }
.filter-box { margin:8px 0; padding:10px; background:var(--input); border-radius:var(--radius-sm); border:1.5px dashed var(--border-strong); }
.filter-box-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.filter-box-title { font-size:12px; font-weight:800; color:var(--navy-text); line-height:1.5; }
.filter-box select { background:var(--card); padding:9px 12px; font-size:13px; }
.chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.chips:empty { margin-top:0; }
.chip { display:inline-flex; align-items:center; gap:5px; background:var(--info-bg); border:1.5px solid var(--blue); border-radius:20px; padding:4px 10px; font-size:12px; font-weight:700; color:var(--info-fg); }
.chip button { background:none; border:none; color:inherit; font-size:14px; cursor:pointer; padding:0 0 0 2px; line-height:1; font-weight:900; }
.chip.danger { background:var(--danger-bg); border-color:var(--red); color:var(--danger-fg); }
.sort-bar { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; align-items:center; }
.sort-bar .lbl { font-size:12px; font-weight:700; color:var(--muted); }
.sort-btn { padding:6px 12px; border-radius:20px; border:1.5px solid var(--border-strong); background:var(--card); color:var(--muted); font-size:12px; font-weight:700; cursor:pointer; transition:all .2s; }
.sort-btn.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.sort-btn.active.asc::after  { content:" ↑"; }
.sort-btn.active.desc::after { content:" ↓"; }

/* ─── Week navigator ─── */
.week-nav { background:var(--navy); color:#fff; border-radius:var(--radius); padding:10px 12px; margin-bottom:10px; box-shadow:var(--shadow-sm); }
.week-nav-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.week-nav-mid { flex:1; text-align:center; min-width:0; }
#week-label { font-size:13px; font-weight:900; }
#week-range { font-size:11px; opacity:.75; margin-top:2px; }
.week-nav.all-mode #week-label, .week-nav.all-mode #week-range { opacity:.4; }
.wk-arrow { background:rgba(255,255,255,.14); border:none; color:#fff; font-size:20px; width:36px; height:36px; border-radius:50%; cursor:pointer; flex-shrink:0; line-height:1; }
.wk-arrow:active { background:rgba(255,255,255,.3); }
.week-nav-actions { display:flex; gap:8px; margin-top:9px; }
.pill { flex:1; border:1.5px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff; font-size:11.5px; font-weight:800; padding:7px 10px; border-radius:20px; cursor:pointer; white-space:nowrap; }
.pill.gold { background:var(--gold); border-color:var(--gold); color:#1A2640; }
.pill.on   { background:#F0D07A; border-color:#F0D07A; color:#1A2640; }

/* ─── Edit banner ─── */
.edit-banner { background:var(--warn-bg); border:2px solid var(--gold); border-radius:12px; padding:10px 13px; margin-bottom:12px; display:none; align-items:center; gap:9px; }
.edit-banner.show { display:flex; }
.edit-banner span { flex:1; font-size:13px; font-weight:700; color:var(--warn-fg); }
.edit-banner button { background:none; border:none; font-size:19px; cursor:pointer; color:var(--warn-fg); }
.edit-banner button.txt { background:var(--red); color:#fff; border-radius:8px; padding:5px 12px; font-size:12px; font-weight:700; }

/* ─── Sub-tabs (site) ─── */
.subtabs { display:flex; background:var(--navy); border-radius:12px; margin-bottom:14px; overflow:hidden; padding:4px; gap:4px; }
.subtab { flex:1; padding:9px 6px; border:none; font-size:13px; font-weight:800; cursor:pointer; background:transparent; color:rgba(255,255,255,.65); border-radius:9px; transition:all .2s; }
.subtab.active { background:var(--gold); color:#1A2640; }

/* ─── Summary ─── */
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:12px; }
.summary-box  { background:var(--card); border-radius:12px; padding:13px 10px; text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.summary-box .val { font-size:19px; font-weight:900; color:var(--navy-text); display:block; line-height:1.2; }
.summary-box .lbl { font-size:11px; color:var(--muted); margin-top:3px; display:block; }
.summary-box.green  .val { color:var(--green); }
.summary-box.red    .val { color:var(--red); }
.summary-box.gold   .val { color:var(--gold-text); }
.summary-box.purple .val { color:var(--purple-text); }
.summary-box.tint-ok   { background:var(--ok-bg);   } .summary-box.tint-ok .val   { color:var(--ok-fg); }
.summary-box.tint-warn { background:var(--warn-bg); } .summary-box.tint-warn .val { color:var(--warn-fg); }
.summary-box.tint-pink { background:var(--pink-bg); } .summary-box.tint-pink .val { color:var(--pink-fg); }
.summary-box.tint-purple { background:var(--purple-bg); } .summary-box.tint-purple .val { color:var(--purple-fg); }
.contractor-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); gap:8px; }
.contractor-row:last-child { border-bottom:none; }
.contractor-row .n { font-weight:700; font-size:13px; }
.contractor-row .s { font-size:11px; color:var(--muted); }
.contractor-row .v { font-weight:900; font-size:15px; color:var(--green); white-space:nowrap; }

/* ─── Settings ─── */
.list-scroll { max-height:300px; overflow-y:auto; }
.setting-item { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); gap:8px; }
.setting-item:last-child { border-bottom:none; }
.setting-name { font-size:13px; font-weight:700; word-break:break-word; }
.setting-sub  { font-size:11px; color:var(--muted); margin-top:2px; }
.setting-actions { display:flex; gap:5px; flex-shrink:0; }
.stage-chip { background:var(--info-bg); border:1px solid var(--border); border-radius:10px; padding:2px 7px; font-size:10px; color:var(--info-fg); font-weight:700; }
.stage-row { display:flex; align-items:center; gap:6px; background:var(--input); border:1px solid var(--border); border-radius:8px; padding:5px 9px; }
.stage-row .n { flex:1; font-size:12px; font-weight:700; }
.stage-row .p { font-size:12px; color:var(--navy-text); font-weight:900; }
.stage-row button { background:var(--red); color:#fff; border:none; border-radius:6px; padding:2px 7px; font-size:11px; cursor:pointer; }
.stage-total { font-size:11px; color:var(--muted); margin-bottom:8px; }
.inline-form { background:var(--input); border:1px solid var(--border); border-radius:12px; padding:12px; margin-top:10px; }
.add-row      { display:flex; gap:7px; margin-top:9px; }
.add-row input, .add-row select { flex:1; min-width:0; }
.mini-btn { background:var(--navy); color:#fff; border:none; border-radius:8px; padding:8px 12px; font-weight:700; cursor:pointer; white-space:nowrap; font-size:12.5px; }
.code-box { background:var(--input); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:12px; }
.code-box .k { font-size:11px; color:var(--muted); margin-bottom:4px; }
.code-box .v { display:flex; align-items:center; gap:8px; }
.code-box .code { flex:1; font-size:16px; font-weight:900; letter-spacing:3px; color:var(--navy-text); font-family:ui-monospace,Consolas,monospace; }
.account-email { font-size:14px; font-weight:900; color:var(--navy-text); margin-bottom:12px; word-break:break-all; }
.status-line { font-size:11px; color:var(--muted); text-align:center; min-height:16px; margin-top:6px; }
.sig-preview { display:none; margin-bottom:12px; text-align:center; }
.sig-preview img { max-width:220px; max-height:90px; border-radius:8px; background:#fff; padding:6px; border:1px solid var(--border); }
.sig-empty { text-align:center; padding:16px 0; color:var(--muted); font-size:12px; }
.sig-empty .big { font-size:32px; margin-bottom:6px; }

/* ─── IR status ─── */
.ir-status { display:inline-block; padding:4px 14px; border-radius:20px; font-size:12px; font-weight:900; }
.ir-a { background:var(--ok-bg);   color:var(--ok-fg);   border:1.5px solid rgba(46,125,50,.35); }
.ir-b { background:var(--warn-bg); color:var(--warn-fg); border:1.5px solid rgba(230,81,0,.35); }
.ir-c { background:var(--pink-bg); color:var(--pink-fg); border:1.5px solid rgba(136,14,79,.35); }

/* ─── Exec ─── */
.stage-slider { background:var(--input); border:1px solid var(--border); border-radius:12px; padding:11px 12px; margin-bottom:8px; }
.stage-slider .head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.stage-slider .name { font-size:12px; font-weight:700; color:var(--text); }
.stage-slider .w { font-size:10px; color:var(--muted); }
.stage-slider .done { font-size:13px; font-weight:900; color:var(--navy-text); min-width:36px; text-align:left; }
.stage-slider .contrib { font-size:10px; color:var(--muted); margin-top:3px; text-align:left; }
.track { height:7px; border-radius:4px; margin-top:4px; background:var(--track); overflow:hidden; }
.track > div { height:100%; width:0%; border-radius:4px; transition:width .3s; background:var(--blue); }
.track.lg { height:11px; border-radius:6px; }
.track.sm { height:5px; }
.exec-note { margin-top:8px; font-size:12px; font-weight:900; color:#fff; background:var(--navy); border-radius:8px; padding:8px 12px; display:none; text-align:center; }
.exec-pct-big { font-size:24px; font-weight:900; line-height:1; }
.exec-pct-lbl { font-size:9px; color:var(--muted); }
.stage-line { margin-bottom:5px; }
.stage-line .h { display:flex; justify-content:space-between; font-size:11px; margin-bottom:2px; }
.stage-line .h b { font-weight:700; color:var(--text); }

/* ─── To-Do ─── */
.todo-card { background:var(--card); border-radius:12px; padding:12px 13px; margin-bottom:9px; box-shadow:var(--shadow-sm); border:1px solid var(--border); border-right:4px solid var(--orange); }
.todo-card.p-عاجل  { border-right-color:var(--red); }
.todo-card.p-متوسط { border-right-color:var(--orange); }
.todo-card.p-عادي  { border-right-color:var(--green); }
.todo-done  { opacity:.65; border-right-color:var(--green) !important; }
.todo-body { display:flex; align-items:flex-start; gap:10px; }
.todo-check { flex-shrink:0; margin-top:2px; }
.todo-title { font-weight:800; font-size:14px; color:var(--navy-text); line-height:1.5; word-break:break-word; }
.todo-done .todo-title { text-decoration:line-through; color:var(--muted); }
.todo-date  { font-size:11px; color:var(--muted); margin-top:3px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.prio { font-weight:800; }
.prio.عاجل { color:var(--red); } .prio.متوسط { color:var(--orange); } .prio.عادي { color:var(--green); }

/* ─── Splash ─── */
#splash { position:fixed; inset:0; background:#0A0A0A; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity .6s ease; }
#splash.hide { opacity:0; pointer-events:none; }
.splash-logo { width:90px; height:90px; border-radius:50%; border:3px solid #C9A84C; display:flex; align-items:center; justify-content:center; background:rgba(201,168,76,.08); animation:pulse 2s ease-in-out infinite; margin-bottom:24px; }
.splash-logo span { font-size:26px; font-weight:900; color:#C9A84C; letter-spacing:1px; }
.splash-title { font-size:22px; font-weight:900; color:#fff; letter-spacing:2px; margin-bottom:6px; text-align:center; }
.splash-sub { font-size:12px; color:rgba(255,255,255,.4); letter-spacing:1px; margin-bottom:40px; }
.splash-bar { width:160px; height:3px; background:rgba(255,255,255,.1); border-radius:10px; overflow:hidden; }
.splash-bar-fill { height:100%; width:0%; background:linear-gradient(90deg,#C9A84C,#f0d080); border-radius:10px; animation:load 2s ease forwards; }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(201,168,76,.3); } 50% { box-shadow:0 0 0 12px rgba(201,168,76,0); } }
@keyframes load  { 0% { width:0%; } 100% { width:100%; } }

/* ─── Login ─── */
#login-screen { position:fixed; inset:0; background:var(--header-grad); z-index:10000; display:none; flex-direction:column; align-items:center; justify-content:center; padding:24px; }
#login-screen.show { display:flex; }
.login-box { width:100%; max-width:340px; background:var(--card); border-radius:18px; padding:28px 22px; box-shadow:var(--shadow-lg); }
.login-logo { width:70px; height:70px; border-radius:50%; border:2.5px solid var(--gold); display:flex; align-items:center; justify-content:center; background:rgba(201,168,76,.1); margin:0 auto 14px; }
.login-logo span { font-size:20px; font-weight:900; color:var(--gold-text); }
.login-title { text-align:center; font-size:16px; font-weight:900; color:var(--navy-text); margin-bottom:4px; }
.login-sub { text-align:center; font-size:11px; color:var(--muted); margin-bottom:20px; }
.login-box label { color:var(--text); }
#login-error { color:var(--red); font-size:12px; text-align:center; margin-bottom:10px; min-height:16px; }
.login-btn { width:100%; padding:12px; border:none; border-radius:10px; cursor:pointer; background:linear-gradient(135deg,var(--navy),var(--blue)); color:#fff; font-weight:900; font-size:14px; margin-top:4px; }
.login-btn:disabled { opacity:.6; }

/* ─── PIN modal ─── */
#pin-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:99999; align-items:center; justify-content:center; padding:16px; }
#pin-modal-box { background:var(--card); color:var(--text); border-radius:16px; padding:22px; width:min(320px,92vw); box-shadow:var(--shadow-lg); text-align:center; }
#pin-modal-box input { text-align:center; font-size:18px; letter-spacing:4px; margin-bottom:10px; }
#pin-modal-box .btns { display:flex; gap:8px; }
#pin-modal-box .btns button { flex:1; padding:10px; border-radius:8px; border:none; font-weight:700; cursor:pointer; }
#pin-modal-cancel { background:var(--input); color:var(--text); border:1px solid var(--border-strong) !important; }
#pin-modal-ok { background:var(--navy); color:#fff; }

/* ─── Misc ─── */
.search-result { background:var(--warn-bg); }
.text-muted { color:var(--muted); }
.text-center { text-align:center; }
@media (min-width:600px) {
  .tab { font-size:12px; flex-direction:row; gap:6px; padding:11px 4px; }
  .tab .ico { font-size:16px; }
  .summary-grid { grid-template-columns:repeat(4,1fr); }
}
@media print { .topbar, .app-header, .toast { display:none !important; } }