/* لا خطوط خارجية (CSP: font-src/style-src 'self'). Tajawal يُستعمل إن كان مثبّتًا، وإلا البدائل في --font.
   لاستعادته: استضِف ملفات woff2 محليًّا (مثل /fonts/) وأضِف @font-face هنا. */

/* =========================================================
   زيوس — نظام تصميم تطبيق المضيفات (مظهر احترافي)
   ========================================================= */
/* =========================================================
   الثيمان: غامق (افتراضي) + فاتح — يتشاركان اللمسة الذهبية.
   أسماء المتغيّرات ثابتة كي تتكيّف كل المكوّنات دون تعديل.
   الوضع يتبع تفضيل الجهاز افتراضيًّا، ويتجاوزه مفتاح المستخدم عبر data-theme.
   ========================================================= */
:root {
  /* ===== الوضع الغامق (الافتراضي) ===== */
  --bg: #141419;
  --bg-2: #1a1a23;
  --surface: #1e1e28;
  --surface-2: #1a1a23;
  --surface-3: #2a2a35;
  --border: #2e2e3a;
  --border-soft: #26262f;

  --text: #f1f1f4;
  --muted: #9a9aa5;
  --muted-2: #73737e;

  --primary: #e0a23b;             /* ذهبي زيوس */
  --primary-2: #c8862b;
  --primary-ink: #1a1304;         /* حبر داكن على الذهبي */
  --primary-soft: rgba(224, 162, 59, 0.14);
  --gold: #e0a23b;
  --accent: #5bb0ff;
  --accent-soft: rgba(91, 176, 255, 0.16);

  --good: #5dcaa5;
  --warn: #f0a33e;
  --bad: #f2676b;
  --info: #5bb0ff;

  /* أسطح القشرة (شريط علوي/سفلي) — شفافة لتبقى الزجاجية */
  --chrome-bg: rgba(20, 20, 26, 0.82);
  --chrome-bg-solid: #1e1e28;
  --glow-gold: rgba(224, 162, 59, 0.10);
  --glow-accent: rgba(91, 176, 255, 0.10);

  /* الشكل */
  --radius-lg: 20px;
  --radius: 15px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, 0.7);
  --ring: 0 0 0 3px rgba(224, 162, 59, 0.35);

  --grad-primary: linear-gradient(135deg, #edb24e 0%, #c8862b 100%);
  --grad-gold: linear-gradient(135deg, #edb24e 0%, #c8862b 100%);

  --font: "Tajawal", "Segoe UI", Tahoma, "Noto Naskh Arabic", system-ui, sans-serif;
}

/* ===== الوضع الفاتح ===== */
:root[data-theme="light"],
:root:not([data-theme="dark"]) {}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f4f0;
    --bg-2: #efede7;
    --surface: #ffffff;
    --surface-2: #efede7;
    --surface-3: #e7e5de;
    --border: #e7e5de;
    --border-soft: #eceae4;

    --text: #1b1b1d;
    --muted: #6d6c67;
    --muted-2: #8a8980;

    --primary: #b67d17;
    --primary-2: #946112;
    --primary-ink: #ffffff;
    --primary-soft: rgba(182, 125, 23, 0.10);
    --gold: #b67d17;
    --accent: #2563c9;
    --accent-soft: rgba(37, 99, 201, 0.12);

    --good: #0f6e56;
    --warn: #b5730a;
    --bad: #c23b3f;
    --info: #2563c9;

    --chrome-bg: rgba(255, 255, 255, 0.85);
    --chrome-bg-solid: #ffffff;
    --glow-gold: rgba(182, 125, 23, 0.07);
    --glow-accent: rgba(37, 99, 201, 0.05);

    --shadow-sm: 0 2px 8px rgba(40, 36, 28, 0.08);
    --shadow: 0 10px 30px -10px rgba(40, 36, 28, 0.18);
    --shadow-lg: 0 24px 60px -14px rgba(40, 36, 28, 0.25);
    --ring: 0 0 0 3px rgba(182, 125, 23, 0.28);
    --grad-primary: linear-gradient(135deg, #c89433 0%, #a9741a 100%);
    --grad-gold: linear-gradient(135deg, #c89433 0%, #a9741a 100%);
  }
}

/* تجاوز صريح بمفتاح المستخدم (يفوق تفضيل الجهاز) */
:root[data-theme="light"] {
  --bg: #f5f4f0;
  --bg-2: #efede7;
  --surface: #ffffff;
  --surface-2: #efede7;
  --surface-3: #e7e5de;
  --border: #e7e5de;
  --border-soft: #eceae4;

  --text: #1b1b1d;
  --muted: #6d6c67;
  --muted-2: #8a8980;

  --primary: #b67d17;
  --primary-2: #946112;
  --primary-ink: #ffffff;
  --primary-soft: rgba(182, 125, 23, 0.10);
  --gold: #b67d17;
  --accent: #2563c9;
  --accent-soft: rgba(37, 99, 201, 0.12);

  --good: #0f6e56;
  --warn: #b5730a;
  --bad: #c23b3f;
  --info: #2563c9;

  --chrome-bg: rgba(255, 255, 255, 0.85);
  --chrome-bg-solid: #ffffff;
  --glow-gold: rgba(182, 125, 23, 0.07);
  --glow-accent: rgba(37, 99, 201, 0.05);

  --shadow-sm: 0 2px 8px rgba(40, 36, 28, 0.08);
  --shadow: 0 10px 30px -10px rgba(40, 36, 28, 0.18);
  --shadow-lg: 0 24px 60px -14px rgba(40, 36, 28, 0.25);
  --ring: 0 0 0 3px rgba(182, 125, 23, 0.28);
  --grad-primary: linear-gradient(135deg, #c89433 0%, #a9741a 100%);
  --grad-gold: linear-gradient(135deg, #c89433 0%, #a9741a 100%);
}

:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } }

* { box-sizing: border-box; }
::selection { background: rgba(91, 140, 255, 0.3); }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(1100px 600px at 85% -8%, var(--glow-gold), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, var(--glow-accent), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 84px;
}

a { color: var(--primary); }

/* ===== الشريط العلوي ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--chrome-bg);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 18px;
  padding-top: max(14px, env(safe-area-inset-top, 0));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.topbar h1 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
}
.topbar .sub { font-size: 0.8rem; color: var(--muted); font-weight: 500; }
/* مجموعة يسار الشريط: شعار زيوس (صورة الاسم) + مفتاح الوضع */
.topbar .tb-right { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.content { padding: 18px; flex: 1; animation: fade 0.3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===== البطاقات ===== */
.card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card h2 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.card .hint { color: var(--muted); font-size: 0.86rem; margin: 0 0 16px; line-height: 1.7; }

/* ===== النماذج ===== */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}
.field .req { color: var(--bad); }
input, select, textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
  background: var(--surface-3);
}
input[readonly], input:disabled, select:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  background: var(--bg-2);
}
input[inputmode="numeric"], input[inputmode="tel"], input[inputmode="decimal"] { direction: ltr; text-align: right; }
.field .error-msg {
  display: none;
  color: var(--bad);
  font-size: 0.82rem;
  margin-top: 7px;
  font-weight: 500;
}
.field.invalid input,
.field.invalid select { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(242, 103, 107, 0.2); }
.field.invalid .error-msg { display: block; }

.field .prefilled-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 7px;
  padding: 2px 8px;
  margin-right: 6px;
  vertical-align: middle;
}

/* رفع الصورة */
.upload {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 22px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  background: var(--surface-2);
  transition: border-color 0.15s, background 0.15s;
}
.upload:hover { border-color: var(--primary); }
.upload.has-file { border-color: var(--good); color: var(--text); background: rgba(48, 214, 139, 0.06); }
.upload input[type="file"] { display: none; }
.upload .preview { max-width: 100%; max-height: 180px; border-radius: 10px; margin-top: 12px; display: block; }
.clear-file {
  margin-top: 8px; font-size: 0.82rem; color: var(--bad);
  background: none; border: none; cursor: pointer; width: auto; padding: 4px;
}

/* ===== الأزرار ===== */
button, .btn {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--grad-primary);
  color: var(--primary-ink);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(233, 189, 91, 0.6);
  transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s;
}
button:hover, .btn:hover { box-shadow: 0 12px 28px -8px rgba(233, 189, 91, 0.78); }
button:active, .btn:active { transform: translateY(1px) scale(0.99); }
button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
button.secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
button.secondary:hover { background: var(--surface-3); border-color: var(--primary); }
button.ghost { background: none; color: var(--primary); font-weight: 700; box-shadow: none; }

/* ===== شارات الحالة ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.submitted { color: var(--info);    background: rgba(91,184,230,0.12);  border-color: rgba(91,184,230,0.25); }
.badge.approved  { color: var(--accent);  background: var(--accent-soft);      border-color: rgba(91,176,255,0.3); }
.badge.ready     { color: var(--good);    background: rgba(48,214,139,0.12);   border-color: rgba(48,214,139,0.28); }
.badge.paid      { color: var(--good);    background: rgba(48,214,139,0.18);   border-color: rgba(48,214,139,0.35); }
.badge.review    { color: var(--warn);    background: rgba(245,182,63,0.12);   border-color: rgba(245,182,63,0.3); }
.badge.needs_fix { color: var(--warn);    background: rgba(245,182,63,0.16);   border-color: rgba(245,182,63,0.34); }
.badge.on_hold   { color: var(--muted);   background: rgba(147,162,191,0.12);  border-color: rgba(147,162,191,0.25); }
.badge.expired   { color: var(--muted);   background: rgba(147,162,191,0.12);  border-color: rgba(147,162,191,0.25); }
.badge.rejected  { color: var(--bad);     background: rgba(242,103,107,0.12);  border-color: rgba(242,103,107,0.3); }

/* ===== قائمة المطالبات ===== */
.claim {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, transform 0.15s;
}
.claim:hover { border-color: var(--border); }
.claim .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.claim .amount { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.claim .meta { color: var(--muted); font-size: 0.82rem; margin-top: 5px; }
.claim .meta b { color: var(--text); }

/* كتل التغذية الراجعة */
.feedback {
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  border-right: 3px solid var(--border);
  background: var(--surface-2);
  line-height: 1.7;
}
.feedback.ok { border-color: var(--good); background: rgba(48,214,139,0.07); }
.feedback.data_error { border-color: var(--warn); background: rgba(245,182,63,0.07); }
.feedback.supervision_bonus { border-color: var(--primary); background: var(--primary-soft); }
.feedback.pending { border-color: var(--info); }
.feedback .salary {
  margin-top: 12px; display: grid; grid-template-columns: 1fr auto;
  gap: 5px 10px; font-size: 0.86rem;
}
.feedback .salary .total { font-weight: 800; border-top: 1px solid var(--border); padding-top: 7px; margin-top: 5px; }

/* ===== الشريط السفلي ===== */
.bottomnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: 560px;
  margin: 0 auto;
  background: var(--chrome-bg);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-top: 1px solid var(--border-soft);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 20;
}
.bottomnav {
  gap: 2px;
  padding: 7px 6px;
  padding-bottom: max(7px, env(safe-area-inset-bottom, 0));
  overflow-x: auto;              /* يتمرّر أفقيًّا عند كثرة التبويبات */
  scrollbar-width: none;
}
.bottomnav::-webkit-scrollbar { display: none; }
.bottomnav a {
  flex: 1 0 auto;                /* يملأ العرض عند القلّة، ولا يتقلّص تحت min-width عند الكثرة */
  min-width: 60px;
  text-align: center;
  padding: 7px 3px 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  border-radius: 14px;
  transition: color 0.18s ease, background 0.18s ease;
}
.bottomnav a .ic {
  font-size: 1.3rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 28px; border-radius: 999px;
  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.bottomnav a .ic svg { width: 1.25rem; height: 1.25rem; }
/* الحالة النشطة: رقاقة ذهبية حول الأيقونة + نصّ ذهبيّ (بدل الخطّ العلويّ) */
.bottomnav a.active { color: var(--primary); font-weight: 800; }
.bottomnav a.active .ic { background: var(--primary-soft); color: var(--primary); transform: translateY(-1px); }
@media (hover: hover) and (pointer: fine) {
  .bottomnav a:not(.active):hover { color: var(--text); }
  .bottomnav a:not(.active):hover .ic { background: var(--surface-2); }
}

/* ===== الدخول ===== */
.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 22px calc(28px + env(safe-area-inset-bottom, 0));
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
}
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo .brand-logo {
  width: 190px;
  max-width: 62%;
  height: auto;
  display: inline-block;
  border-radius: 18px;
  filter: drop-shadow(0 14px 36px rgba(233, 189, 91, 0.28));
  margin-bottom: 10px;
}
.login-logo h1 { font-size: 1.4rem; font-weight: 800; margin: 10px 0 6px; letter-spacing: -0.02em; }
.login-logo p { color: var(--muted); margin: 0; font-size: 0.92rem; }

.site-btn {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom, 0));
  left: 50%; transform: translateX(-50%);
  z-index: 30;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chrome-bg);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--gold);
  font-weight: 700; font-size: 0.82rem;
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.site-btn:hover { background: rgba(233, 189, 91, 0.2); border-color: var(--gold); box-shadow: 0 8px 20px -10px rgba(233,189,91,0.6); }

.test-accounts { margin-top: 20px; font-size: 0.8rem; color: var(--muted-2); text-align: center; }
.test-accounts > div { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 8px; }
.test-accounts button {
  width: auto;
  padding: 7px 12px;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
  box-shadow: none;
}
.test-accounts button:hover { color: var(--text); border-color: var(--primary); }

/* ===== متفرقات ===== */
.empty { text-align: center; color: var(--muted); padding: 56px 20px; }
.empty .big { font-size: 2.8rem; margin-bottom: 8px; opacity: 0.9; }
.empty button { width: auto; padding: 12px 22px; margin-top: 16px; display: inline-block; }

.spinner {
  width: 22px; height: 22px;
  border: 2.5px solid rgba(255,255,255,0.22);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.center { text-align: center; padding: 36px; color: var(--muted); }

.toast {
  position: fixed;
  bottom: 96px; left: 50%;
  transform: translateX(-50%);
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  font-size: 0.9rem;
  font-weight: 600;
  max-width: 90%;
  animation: toastin 0.25s ease;
}
@keyframes toastin { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%); } }
.toast.good { border-color: var(--good); box-shadow: 0 16px 40px -12px rgba(48,214,139,0.5); }
.toast.bad { border-color: var(--bad); box-shadow: 0 16px 40px -12px rgba(242,103,107,0.5); }

.offline-bar {
  background: var(--warn);
  color: #231800;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 7px;
}

.install-hint {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.install-hint button { width: auto; padding: 8px 14px; font-size: 0.85rem; white-space: nowrap; }

/* ===== صفحات السياسات ===== */
.legal { max-width: 720px; margin: 0 auto; padding: 24px 18px calc(44px + env(safe-area-inset-bottom, 0)); }
.legal .back { display: inline-block; margin-bottom: 18px; color: var(--primary); text-decoration: none; font-weight: 700; }
.legal h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 6px; }
.legal .updated { color: var(--muted); font-size: 0.85rem; margin: 0 0 22px; }
.legal h2 { font-size: 1.1rem; font-weight: 800; margin: 28px 0 8px; padding-bottom: 7px; border-bottom: 1px solid var(--border-soft); }
.legal p, .legal li { line-height: 1.95; }
.legal ul { padding-right: 20px; }
.legal a { color: var(--primary); }
.legal .note {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-right: 3px solid var(--warn); border-radius: var(--radius-sm);
  padding: 13px 15px; font-size: 0.88rem; color: var(--muted); margin: 22px 0;
}
.legal .fill { color: var(--gold); font-weight: 700; }

.legal-footer { text-align: center; margin-top: 24px; font-size: 0.82rem; color: var(--muted-2); }
.legal-footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 1px; }
.legal-footer a:hover { color: var(--text); }
.legal-footer span { margin: 0 8px; }

/* ===== اختيار استلام الراتب ===== */
.seg { display: flex; gap: 8px; }
.seg-btn {
  width: auto; flex: 1; padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border); font-weight: 700; box-shadow: none;
}
.seg-btn.active {
  background: var(--primary-soft); border-color: var(--primary);
  color: var(--primary); font-weight: 800;
}
.choice-hint { color: var(--muted); font-size: 0.8rem; margin-top: 7px; line-height: 1.6; }

/* ===== أزرار واتساب ===== */
.wa-contacts { margin: 18px 0 6px; }
.wa-title { font-size: 0.82rem; color: var(--muted); font-weight: 700; margin-bottom: 8px; text-align: center; }
.wa-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 13px 14px; margin-top: 9px;
  border-radius: var(--radius-sm);
  background: #25d366; color: #052e16;
  font-weight: 800; font-size: 0.95rem; text-decoration: none;
  box-shadow: 0 8px 20px -10px rgba(37, 211, 102, 0.7);
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.wa-btn:hover { background: #22c55e; }
.wa-btn:active { transform: translateY(1px); }
.wa-btn svg { flex: 0 0 auto; }
.wa-btn.emergency {
  background: transparent; color: #25d366;
  border: 1.5px solid rgba(37, 211, 102, 0.55);
  box-shadow: none; font-size: 0.86rem; font-weight: 700;
}
.wa-btn.emergency:hover { background: rgba(37, 211, 102, 0.12); }

/* تبويب «خدمات»: بطاقة الموقع — بانر ZEUSTOP-UP كامل (غير مقصوص) ثم الزرّ */
.svc-site-img {
  display: block; width: 100%; height: auto;
  max-height: 120px; object-fit: cover; object-position: center;
  border-radius: 12px; margin-bottom: 14px;
  border: 1px solid var(--border);
}

/* تبويب «خدمات»: زرّ فتح موقع الشحن (ذهبيّ بارز) */
.svc-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 16px; margin-top: 4px;
  border-radius: var(--radius-sm);
  background: var(--grad-primary); color: var(--primary-ink);
  font-weight: 800; font-size: 1rem; text-decoration: none;
  box-shadow: 0 8px 22px -8px rgba(224, 162, 59, 0.6);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.svc-link:hover { box-shadow: 0 12px 28px -8px rgba(224, 162, 59, 0.78); }
.svc-link:active { transform: translateY(1px) scale(0.99); }

/* ===== بيان الوكيلة ===== */
.section-label { display: block; font-weight: 800; font-size: 0.92rem; margin: 18px 0 10px; color: var(--text); }
.id-row { display: flex; gap: 7px; align-items: center; margin-bottom: 9px; }
.id-row .r-id { flex: 2; min-width: 0; }
.id-row .r-idtext { flex: 2; min-width: 0; }
.id-row .r-salary { flex: 1; min-width: 0; }
.id-row input, .id-row select { padding: 11px; }
.id-row .r-del {
  width: auto; flex: 0 0 auto; padding: 11px 13px;
  background: rgba(242,103,107,0.1); color: var(--bad);
  border: 1px solid rgba(242,103,107,0.3); font-weight: 800; box-shadow: none;
}
/* ===== كشف التوزيع (لوحة المالك) ===== */
.dist-summary { display: flex; gap: 10px; margin: 12px 0 18px; }
.dist-stat {
  flex: 1; text-align: center; padding: 12px 6px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.dist-stat-num { font-size: 1.25rem; font-weight: 900; color: var(--gold); }
.dist-group { margin-top: 16px; border-top: 2px solid var(--border); padding-top: 10px; }
.dist-group-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-bottom: 8px; font-size: 0.95rem;
}
.dist-group-name { font-weight: 800; color: var(--text); }
.dist-row {
  padding: 10px 0; border-bottom: 1px dashed var(--border-soft);
}
.dist-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dist-amt { font-weight: 900; color: var(--good); white-space: nowrap; }
.dist-row-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.dist-chip {
  font-size: 0.74rem; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border);
}
.dist-chip.warn { color: var(--warn); background: rgba(240,180,41,0.1); border-color: rgba(240,180,41,0.35); }
.dist-chip.accent { color: var(--accent); background: rgba(91,176,255,0.1); border-color: rgba(91,176,255,0.35); }
.dist-chip.ok { color: var(--good); background: rgba(48,214,139,0.1); border-color: rgba(48,214,139,0.35); }
.dist-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.dist-btn {
  width: auto; flex: 0 0 auto; padding: 7px 12px; font-size: 0.8rem; font-weight: 800;
  border-radius: var(--radius-sm); box-shadow: none; border: 1px solid var(--primary);
  background: var(--primary-soft); color: var(--primary);
}
.dist-btn.pay { background: rgba(48,214,139,0.12); border-color: rgba(48,214,139,0.4); color: var(--good); }
.dist-btn.ghost { background: transparent; border-color: var(--border); color: var(--muted); }
/* أزرار نسخ صغيرة + رقم العملية + أدوات المكتب */
.dist-mini-row, .dist-group-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.dist-group-actions { margin-bottom: 6px; }
.dist-mini {
  width: auto; flex: 0 0 auto; padding: 5px 10px; font-size: 0.75rem; font-weight: 700;
  border-radius: 999px; box-shadow: none; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted);
}
.dist-mini.pay { background: rgba(48,214,139,0.12); border-color: rgba(48,214,139,0.4); color: var(--good); }
.dist-mark { display: flex; gap: 7px; margin-top: 8px; align-items: center; }
.dist-ref { flex: 1; min-width: 0; padding: 8px 10px; font-size: 0.82rem; }
.dist-mark .dist-btn { flex: 0 0 auto; }
/* نافذة تكبير الباركود */
.dist-modal { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.82); display: flex; align-items: center; justify-content: center; padding: 20px; }
.dist-modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-width: 92vw; max-height: 86vh; overflow: auto; padding: 12px; }
.dist-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 800; margin-bottom: 10px; }
.dist-modal-x { width: auto; padding: 4px 12px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.dist-modal-box img { max-width: 100%; max-height: 72vh; display: block; border-radius: 8px; }

/* دليل ٣ خطوات أعلى نموذج الوكيلة */
.steps-guide {
  margin: 10px 0 16px; padding: 12px 14px 12px 0; list-style: decimal;
  padding-inline-start: 26px; background: var(--primary-soft);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.85rem; line-height: 1.9; color: var(--text);
}
.steps-guide li { margin: 2px 0; }

/* سطر مضيفة ككتلة (قناة استلام لكل سطر) */
.stmt-entry {
  display: block; margin-bottom: 14px; padding: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.stmt-entry .entry-top { display: flex; gap: 7px; align-items: center; }
.stmt-entry .r-id { flex: 1; min-width: 0; }
.stmt-entry > input { width: 100%; margin-top: 8px; padding: 11px; }
.stmt-entry .ch-label { font-size: 0.82rem; font-weight: 700; color: var(--muted); margin: 12px 0 6px; }
.stmt-entry .ch-seg { margin-bottom: 4px; }
.stmt-entry .ch-shamcash, .stmt-entry .ch-masarat { margin-top: 8px; }
.stmt-entry .qr-up { margin: 0; padding: 14px; font-size: 0.86rem; }
.stmt-entry .two-col { display: flex; gap: 8px; }
.stmt-entry .two-col > input { flex: 1; min-width: 0; margin-top: 8px; padding: 11px; }
.totals {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; margin: 16px 0; font-size: 0.92rem; line-height: 2;
}
.totals b { color: var(--text); }
.totals .warn-line { color: var(--warn); font-weight: 800; }
.stmt-list { margin: 8px 0; }
.stmt-row {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: 0.86rem; padding: 7px 0; border-bottom: 1px dashed var(--border-soft);
}
.stmt-row .flag { color: var(--warn); font-size: 0.78rem; width: 100%; }
.reasons { margin: 8px 0 0; padding-right: 18px; font-size: 0.84rem; }
.reasons li { margin: 3px 0; }

/* =========================================================
   تجاوب الكمبيوتر واللوحي (≥768px). المحمول (<768px) يبقى كما هو تمامًا،
   فالمضيفات على الجوال لا تتأثّر. المالك/الوكلاء على الكمبيوتر يكسبون المساحة.
   ========================================================= */
@media (min-width: 768px) {
  #app { max-width: 860px; }
  .bottomnav { max-width: 860px; }
  .content { padding: 22px 28px; }
  .card { padding: 20px 24px; }
  /* المحادثة تستفيد من ارتفاع الشاشة الأكبر، والفقاعات لا تمتدّ عرضًا مبالغًا */
  .gc-wrap { height: 64vh; max-height: 680px; }
  .gc-msg { max-width: 70%; }
  /* كشف التوزيع: إحصاءات أوسع */
  .dist-summary { gap: 14px; }
}
@media (min-width: 1280px) {
  #app { max-width: 1040px; }
  .bottomnav { max-width: 1040px; }
  .content { padding: 26px 40px; }
  .gc-wrap { height: 68vh; max-height: 780px; }
}
/* لمسات الكمبيوتر: مؤشّر الفأرة + تحويم ألطف على العناصر القابلة للنقر */
@media (hover: hover) and (pointer: fine) {
  .ov-gbtn, .dist-mini, .gc-file, .gc-img { cursor: pointer; }
  .card:hover { border-color: var(--border); }
}

/* =========================================================
   مفتاح الوضع الليلي/النهاري (في الشريط العلوي)
   ========================================================= */
.theme-tgl {
  width: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
  font-size: 0.78rem; font-weight: 700;
}
.theme-tgl:hover { border-color: var(--primary); box-shadow: none; }
.theme-tgl:active { transform: translateY(1px) scale(0.99); }
.theme-tgl svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--gold); }
.theme-tgl .tgl-tx { line-height: 1; }
@media (max-width: 380px) { .theme-tgl .tgl-tx { display: none; } .theme-tgl { padding: 8px; } }

/* =========================================================
   شعار زيوس (صورة اسم ZEUS) — تُستخدم كما هي، بنسبة محفوظة.
   خلفيتها داكنة: طبيعية على الغامق؛ على الفاتح ضمن حاوية لطيفة.
   ========================================================= */
.zeus-wordmark {
  display: inline-block; width: auto; height: auto; max-width: 100%;
  object-fit: contain; border-radius: 10px; vertical-align: middle;
}
.login-wordmark { display: block; max-width: 240px; width: 70%; margin: 10px auto 2px; }
.tb-brand { height: 26px; width: auto; }
/* على الثيم الفاتح: حدّ + ظلّ خفيف كي يبدو الشعار الداكن مقصودًا لا مقحمًا */
:root[data-theme="light"] .zeus-wordmark { border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .zeus-wordmark { border: 1px solid var(--border); box-shadow: var(--shadow-sm); } }
/* الشعار في الشريط العلوي يظهر على الجوال فقط؛ على العريض تحمله القائمة الجانبية */
.side-brand { display: none; }
@media (min-width: 900px) { .tb-brand { display: none; } }

/* نفس المفتاح داخل صفحة «حسابي» ككتلة كاملة العرض */
.theme-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.theme-row .tr-txt .k { font-weight: 800; color: var(--text); font-size: 0.95rem; }
.theme-row .tr-txt .d { color: var(--muted); font-size: 0.82rem; margin-top: 2px; }

/* =========================================================
   بنود جانبية داخل لوحة الإشراف (شريط أفقيّ متمرّر) — يفرّغ الصفحة الطويلة.
   ========================================================= */
.ov-subtabs {
  display: flex; gap: 6px; margin: 2px 0 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 3px; scrollbar-width: none;
}
.ov-subtabs::-webkit-scrollbar { display: none; }
.ov-sub {
  width: auto; flex: 0 0 auto;
  padding: 9px 15px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border); box-shadow: none;
  font-weight: 700; font-size: 0.86rem; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ov-sub:hover { color: var(--text); box-shadow: none; }
.ov-sub.active {
  background: var(--primary-soft); color: var(--primary);
  border-color: var(--primary); font-weight: 800;
}

/* محدّد الكروبات في الإشراف — رقائق أنيقة بدل الأزرار الخام */
.ov-grouphead { font-weight: 800; font-size: 0.98rem; margin-bottom: 11px; display: flex; align-items: center; gap: 8px; }
.ov-grouphead .ov-count {
  background: var(--primary-soft); color: var(--primary);
  font-weight: 800; font-size: 0.78rem; padding: 2px 10px; border-radius: 999px;
}
.ov-groups { display: flex; gap: 7px; flex-wrap: wrap; }
.ov-gchip {
  width: auto; flex: 0 0 auto;
  padding: 8px 15px; border-radius: 999px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); box-shadow: none;
  font-weight: 700; font-size: 0.85rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.ov-gchip:hover { border-color: var(--primary); box-shadow: none; }
.ov-gchip:active { transform: scale(0.97); }
.ov-gchip.sel { background: var(--grad-primary); color: var(--primary-ink); border-color: transparent; font-weight: 800; box-shadow: 0 6px 16px -8px rgba(224,162,59,0.6); }
.ov-gchip.err { border-color: var(--bad); color: var(--bad); }
.ov-gchip.err.sel { color: var(--primary-ink); }
/* رقم الكروب الصغير تحت الاسم */
.ov-gchip .ov-gnum { display: block; font-size: 0.66rem; opacity: 0.55; font-weight: 600; margin-top: 2px; }
/* الكروبات الخاملة (بلا واتساب) — لون مختلف (تحذيريّ) وحدّ متقطّع */
.ov-gchip.idle { background: var(--surface); border: 1px dashed var(--warn); color: var(--warn); }
.ov-gchip.idle:hover { border-color: var(--warn); }
.ov-gchip.idle.sel { background: var(--warn); color: #1a1205; border-style: solid; box-shadow: 0 6px 16px -8px rgba(240,163,62,0.6); }
.ov-gchip.idle .ov-gnum { opacity: 0.75; }
/* مبدّل قائمة الكروبات: الإشراف / الخاملة */
.ov-gtoggle { display: flex; gap: 6px; margin-bottom: 11px; }
.ov-gtab {
  flex: 1; padding: 7px 6px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-weight: 700; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.ov-gtab.sel { background: var(--grad-primary); color: var(--primary-ink); border-color: transparent; }
.ov-count.idle { background: var(--warn); color: #1a1205; }
.ov-idlenote {
  background: var(--surface-2); border: 1px solid var(--warn); color: var(--warn);
  border-radius: 10px; padding: 7px 9px; font-size: 0.78rem; line-height: 1.55; margin-bottom: 11px;
}
/* الروستر: افتراضيًّا (الجوّال) يظهر أسفل المحادثة في المحتوى؛ نسخة الشريط مخفيّة.
   على الشاشات العريضة ينعكس: الشريط يظهر والمحتوى يختفي (قاعدة في media أدناه). */
.ov-side-roster { display: none; }
.ov-main-roster { display: block; margin-top: 12px; }
.ov-side-roster { margin-top: 12px; }
.ov-side-roster .card { padding: 10px 11px; margin-bottom: 0; }
.ov-side-roster h2 { font-size: 0.85rem; margin-bottom: 6px; }
.ov-side-roster .stmt-row { font-size: 0.78rem; padding: 6px 0; }
/* نافذة محادثة الكروب — الجوّال: ارتفاع معقول؛ العريض: طويلة (في media أدناه) */
#ov-chat .gc-wrap { height: 60vh; max-height: none; min-height: 400px; }
/* قصّ أسماء الكروبات الطويلة بأناقة في العمود المضيَّق */
.ov-groups-v .ov-gchip { overflow: hidden; }
.ov-gchip .ov-gname-t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ov-otherrow { display: flex; gap: 8px; margin-top: 13px; align-items: center; }
.ov-ginput { flex: 1; max-width: 170px; padding: 10px 13px; text-align: center; }
.ov-gochip { width: auto; flex: 0 0 auto; padding: 10px 20px; font-size: 0.9rem; }

/* الإشراف: نافذتان جنبًا إلى جنب — قائمة الكروبات العاموديّة + جزء الواتساب/المحتوى */
/* الجوال: الكروبات شبكة مضغوطة بالأعلى (صفوف قصيرة)، والمحتوى/الواتساب بعرض كامل تحتها */
.ov-layout { display: block; }
.ov-sidebar {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px;
}
.ov-main { min-width: 0; }
.ov-sidebar .ov-grouphead { font-size: 0.9rem; margin-bottom: 10px; }
.ov-groups-v { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 7px; }
.ov-groups-v .ov-gchip { width: 100%; text-align: center; padding: 9px 6px; font-size: 0.8rem; white-space: nowrap; }
.ov-otherrow-v { display: flex; gap: 8px; margin-top: 11px; }
.ov-otherrow-v .ov-ginput { flex: 1; max-width: none; padding: 10px 10px; text-align: center; }
.ov-otherrow-v .ov-gochip { flex: 0 0 auto; width: auto; padding: 10px 20px; }

/* الشاشات العريضة: نافذتان جنبًا إلى جنب (قائمة الكروبات عاموديّة ثابتة) */
@media (min-width: 760px) {
  .ov-layout { display: flex; gap: 12px; align-items: flex-start; }
  .ov-sidebar {
    flex: 0 0 196px; position: sticky; top: 8px; margin-bottom: 0;
    max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin;
  }
  .ov-main { flex: 1; min-width: 0; }
  .ov-groups-v { grid-template-columns: 1fr 1fr; }
  .ov-otherrow-v { display: grid; grid-template-columns: 1fr 1fr; }
  .ov-otherrow-v .ov-gochip { width: 100%; padding: 10px 6px; }
  /* العريض: الروستر في الشريط (لا في المحتوى)، والمحادثة طويلة */
  .ov-side-roster { display: block; }
  .ov-main-roster { display: none; }
  #ov-chat .gc-wrap { height: calc(100vh - 150px); min-height: 540px; }
}

/* بطاقات كشف التسليم — تصميم عصريّ: صورة حرف + مبلغ ذهبيّ + رقاقة حالة + حدّ جانبيّ ملوّن */
.dcard {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 13px 14px; margin-bottom: 10px;
  border-inline-start: 3px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.dcard.paid { border-inline-start-color: var(--good); }
.dcard.marked { border-inline-start-color: var(--accent); }
.dcard.pending { border-inline-start-color: var(--gold); }
.dcard-top { display: flex; align-items: center; gap: 11px; }
.dcard-av {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary-soft); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
}
.dcard-info { flex: 1; min-width: 0; }
.dcard-name { font-weight: 800; font-size: 0.95rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcard-meta { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.dcard-chan { color: var(--text); font-weight: 600; }
.dcard-amt { flex: 0 0 auto; font-weight: 900; font-size: 1.15rem; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dcard-cur { font-size: 0.72rem; margin-inline-start: 2px; font-weight: 700; }
.dcard-detail { margin-top: 9px; }
.dcard-bits { font-size: 0.82rem; color: var(--muted); }
.dcard-note { font-size: 0.8rem; color: var(--muted); }
.dcard-foot { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dcard-status { font-size: 0.74rem; font-weight: 800; padding: 4px 11px; border-radius: 999px; }
.dcard-status.paid { color: var(--good); background: rgba(93,202,165,0.14); }
.dcard-status.marked { color: var(--accent); background: var(--accent-soft); }
.dcard-status.pending { color: var(--gold); background: var(--primary-soft); }
.dcard-ref { font-size: 0.76rem; color: var(--muted); }
.dcard-btn { width: auto; flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; box-shadow: none; margin-inline-start: auto; }
.dcard-btn.pay { background: rgba(93,202,165,0.14); color: var(--good); border: 1px solid rgba(93,202,165,0.4); }
.dcard-btn.ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }

/* أسطر التدقيق (أخطاء زيوس) — بطاقة عصرية بحدّ أحمر */
.irow {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-inline-start: 3px solid var(--bad); border-radius: 11px;
  padding: 11px 13px; margin-bottom: 8px;
}
.irow-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.irow-name { font-weight: 800; color: var(--text); font-size: 0.9rem; }
.irow-verdict { font-size: 0.7rem; font-weight: 800; color: var(--bad); background: rgba(242,103,107,0.14); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.irow-meta { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.irow-meta b { color: var(--text); }
.irow-reason { font-size: 0.82rem; color: var(--warn); margin-top: 5px; font-weight: 600; }

/* أسطر الاعتراضات / لم أستلم — بطاقة عصرية */
.arow {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-inline-start: 3px solid var(--border); border-radius: 11px;
  padding: 11px 13px; margin-bottom: 8px;
}
.arow.flagged { border-inline-start-color: var(--warn); }
.arow-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arow-kind { font-size: 0.72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.arow-kind.ok { color: var(--good); background: rgba(93,202,165,0.14); }
.arow-kind.bad { color: var(--warn); background: rgba(240,163,62,0.14); }
.arow-id { font-weight: 700; color: var(--text); font-size: 0.85rem; }
.arow-time { margin-inline-start: auto; font-size: 0.73rem; color: var(--muted); }
.arow-text { font-size: 0.85rem; color: var(--text); margin-top: 6px; }
.arow-meta { font-size: 0.76rem; color: var(--muted); margin-top: 4px; }

/* =========================================================
   تخطيط متجاوب: قائمة جانبية للشاشات العريضة (≥900px)،
   وشريط سفليّ للجوال (الوضع الافتراضي <900px يبقى كما هو).
   ========================================================= */
@media (min-width: 900px) {
  #app {
    max-width: 1080px;
    padding-bottom: 0;
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    grid-template-areas: "nav top" "nav main";
    align-items: start;
    column-gap: 0;
  }
  .topbar {
    grid-area: top;
    border-inline-start: 1px solid var(--border-soft);
  }
  .content { grid-area: main; border-inline-start: 1px solid var(--border-soft); }

  .bottomnav {
    grid-area: nav;
    position: sticky; top: 0; align-self: start;
    inset: auto; left: auto; right: auto;
    width: auto; max-width: none; margin: 0;
    height: 100vh;
    flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: 16px 12px;
    padding-top: max(16px, env(safe-area-inset-top, 0));
    border-top: none;
    background: var(--surface);
    overflow-y: auto;
  }
  .side-brand { display: block; margin: 2px auto 14px; max-width: 150px; }
  .bottomnav a {
    flex: 0 0 auto;
    flex-direction: row; justify-content: flex-start;
    gap: 11px; padding: 11px 13px;
    border-radius: 11px;
    font-size: 0.9rem; font-weight: 600;
    text-align: start;
  }
  .bottomnav a .ic { font-size: 1.15rem; width: auto; height: auto; border-radius: 0; background: transparent; }
  .bottomnav a.active { background: var(--primary-soft); color: var(--primary); }
  .bottomnav a.active .ic { transform: none; background: transparent; }
  /* الشريط العلوي لا يلزق فوق المحتوى في وضع القائمة الجانبية */
  .topbar { position: static; }
}