/* ══ Cairo Font — محلي (لا يحتاج انترنت) ══ */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cairo-arabic-400-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cairo-latin-400-normal.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: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/cairo-arabic-600-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/cairo-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/cairo-arabic-700-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/cairo-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/cairo-arabic-900-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/cairo-latin-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC;
}

/* =====================================================================
   01-tokens.css
   منصة زمام الجيزة — نظام التصميم الموحَّد (v0.8.3)

   مصدر القيم: هوية الألوان (نيلي/أخضر) وقيم الوضع الليلي منقولة بالكامل
   من منصة زمام الأصلية (كانت مُراجَعة ومُختبَرة فعلياً لمشاكل تباين النص
   في الوضع الليلي — راجع سجل زمام 1.7.1). أضفنا لها مقياس تنظيمي أوسع
   (نصف قطر/ظلال/أحجام خط/أبعاد الشريط الجانبي) من نظام سُقيا، لأن
   التطبيق الموحَّد يحتاج تخطيط Sidebar+Topbar لصفحات الإدارة المنفصلة
   (بنية سُقيا) بخلاف الـ Single-Page القديمة في زمام وحدها.

   القرار المتعمَّد: الألوان = زمام، الهيكل التنظيمي (المقاييس) = سُقيا.
   ===================================================================== */

:root {
    color-scheme: light;

    /* ---- ألوان الهوية (ثابتة في الوضعين — خلفيات صلبة بنص أبيض) ---- */
    --nile-dark: #0f4c46;
    --nile-light: #1b6e64;
    --clay: #b9692e;
    --clay-light: #fdf2e9;
    --gold: #d9a441;

    /* ---- سطح/نص متغيّر مع الوضع ---- */
    --nile-surface: #e8f0ee;
    --heading: #0f4c46;
    --bg-body: #fdfbf7;
    --bg-card: #ffffff;
    --bg-subtle: #faf9f5;
    --bg-subtle-2: #f4efe3;
    --text-main: #1a2219;
    --text-muted: #5c665a;
    --text-faint: #948a73;
    --border: #e3d9be;
    --border-light: #f0ebe0;

    /* ---- ألوان الحالة ---- */
    --danger: #9c3b2c;
    --danger-light: #fcefef;
    --success: #2f7a56;
    --success-light: #edf7f2;
    --warning: #b47b00;
    --warning-light: #fef9eb;
    --info: #1e5a7a;
    --info-light: #eaf4fa;
    --whatsapp: #25d366;
    --whatsapp-dark: #128c4a;
    --surface-translucent: rgba(255,255,255,0.92);

    /* ---- مقياس نصف القطر (موسَّع من سُقيا) ---- */
    --radius-xs: 8px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* ---- مقياس الظلال (موسَّع من سُقيا) ---- */
    --shadow-1: 0 1px 3px rgba(0,0,0,0.02), 0 8px 24px rgba(15,76,70,0.05);
    --shadow-2: 0 6px 18px -6px rgba(15,76,70,0.14), 0 2px 6px -2px rgba(15,76,70,0.08);
    --shadow-pop: 0 20px 60px rgba(15,34,30,0.28);
    /* أسماء متوافقة مع كود زمام القديم (بدل إعادة كتابة كل استخدام) */
    --shadow-card: var(--shadow-1);

    /* ---- مقياس حجم الخط (من سُقيا — يفيد صفحات الجداول الكثيفة) ---- */
    --fs-xs: 11px;
    --fs-sm: 12.5px;
    --fs-base: clamp(14px, 4vw, 16px);
    --fs-md: 15.5px;
    --fs-lg: 19px;
    --fs-xl: 24px;

    /* ---- أبعاد تخطيط صفحات الإدارة (بنية سُقيا: Sidebar+Topbar) ---- */
    --sidebar-w: 260px;
    --topbar-h: 62px;
    --bottom-nav-h: 64px;

    --transition: 0.2s ease;
    --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ============ الوضع الليلي (Dark Mode) ============
   يُفعَّل بإضافة data-theme="dark" على عنصر <html>. نفس أسماء المتغيرات
   بالضبط، فقط بقيم مختلفة — كل ملفات CSS التالية تستخدم var(--xxx) ولا
   تحتاج أي تعديل لدعم الوضع الليلي تلقائياً. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --heading: #6fd8c7;
    --nile-surface: #16302c;
    --clay-light: #3a2a1c;
    --bg-body: #12181a;
    --bg-card: #1b2326;
    --bg-subtle: #202a2c;
    --bg-subtle-2: #2a2118;
    --text-main: #eef1ee;
    --text-muted: #9aa69f;
    --text-faint: #6f7f9e;
    --border: #2c3a36;
    --border-light: #232d2a;
    --danger: #ef6b5a;
    --danger-light: #3a2020;
    --success: #5fd399;
    --success-light: #1c332a;
    --warning: #f0bb52;
    --warning-light: #362c18;
    --info: #6db6dd;
    --info-light: #1c2f38;
    --shadow-1: 0 1px 3px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.28);
    --shadow-2: 0 6px 18px -6px rgba(0,0,0,0.4), 0 2px 6px -2px rgba(0,0,0,0.24);
    --shadow-pop: 0 20px 60px rgba(0,0,0,0.55);
    --surface-translucent: rgba(27,35,38,0.92);
}

/* ============ إعادة الضبط (Reset) ============ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Cairo", sans-serif;
}
html { transition: background 0.25s ease; }
body {
    background: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    font-size: var(--fs-base);
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    padding-bottom: env(safe-area-inset-bottom);
    overscroll-behavior-y: contain;
    transition: background 0.25s ease, color 0.25s ease;
    overflow-x: hidden;
}
body, .card-box, .stat-card, .chart-card, .table-responsive,
.modal-box, th, td, .filter-bar, .form-input, select.form-input,
.sidebar, .topbar, .mobile-bottom-nav {
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
h1, h2, h3, h4 {
    font-family: "Tajawal", sans-serif;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.3;
}
button, input, select, textarea { font-family: "Cairo", sans-serif; }
a { color: inherit; text-decoration: none; }

/* انتقال ناعم (cross-fade) بين صفحات لوحة الإدارة بدل القفزة الفجائية
   (شاشة فاضية ثم ظهور مفاجئ) اللي كانت بتحسّ التنقّل "زي ريفريش
   للتطبيق كله". دعم المتصفح تلقائي بالكامل — كروم بيطبّقها، أي متصفح
   تاني بيتجاهلها بأمان من غير أي تأثير سلبي. */
@view-transition { navigation: auto; }