/* style.css - النسخة المُحدَّثة (هوية زجاجية عصرية Glassmorphism + دعم كامل للموبايل/التابلت/الديسكتوب)
   مبنية بدمج هوية تصميم مُستوحاة + كل الكلاسات والإصلاحات الحرجة المُثبَتة بالنظام الفعلي. */

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

:root {
    /* الألوان الرئيسية — مُحدَّثة بتدرّج اللازورد المستخرَج من الصورة المرجعية */
    --primary: #3230D2;
    --primary-light: #464AFA;
    --primary-dark: #26248F;
    --secondary: #464AFA;
    --secondary-light: #6C8AFD;
    --secondary-dark: #3230D2;
    --success: #17a672;
    --success-light: #22c98d;
    --danger: #C8283A;
    --danger-light: #E85468;
    --warning: #f39c12;
    --warning-light: #f5b041;
    --info: #2980b9;
    --purple: #8854d0;
    --purple-light: #a179dd;

    /* تصحيح تناسق: نفس الألوان الدلالية أعلاه، بس بدرجة أغمق لاستخدامها كنص/عنوان مقروء فوق خلفية
       فاتحة (بطاقات التنبيه والأدوات الإدارية) — كانت هذي القيم مكتوبة يدوياً بعشرات الأماكن بقيم
       متفرقة قريبة من بعضها بدل الرجوع لمصدر واحد، فصار كل ملف "يخترع" درجته الخاصة بالصدفة.
       التوحيد هنا بالقيم الفعلية الأكثر استخداماً فعلياً بالكود (أوضح تباين مثبَت، مو تخمين) */
    --danger-dark: #a3271c;
    --warning-dark: #8a5a00;
    --success-dark: #1e824c;
    --info-dark: #1a5a8a;
    /* لونان إضافيان كانا مستخدَمان فعلياً (أدوات الإصلاح الإدارية) بدون أي تعريف مركزي إطلاقاً */
    --teal: #16a085;
    --teal-dark: #0e7c67;
    --indigo: #6c5ce7;
    --indigo-dark: #4834a8;
    /* خلفية شارة/تنبيه التحذير الفاتحة — كانت مكرَّرة كنص ثابت بعشرات الأماكن، وبأربع درجات
       أصفر باهتة مختلفة قليلاً عن بعضها بملفات مختلفة (fff3cd, fff3d6, fff8e1, fff8ec) رغم إنها
       تمثّل نفس المعنى بالضبط — درجة واحدة موحَّدة الآن */
    --warning-bg: #fff3cd;
    --secondary-bg: #ebf5fb;
    --indigo-bg: #eef0ff;
    --info-bg: #e0f2fe;
    --danger-bg: #fef2f2;
    --purple-bg: #faf5ff;
    /* لون "ذهبي" مستخدَم فعلياً بميزة البنّدلات/العروض (طابع "هدية مميّزة" متعمَّد ومختلف عن التحذير) —
       كان يُستدعى بـvar(--gold, #c9a15d) بصفحة المبيعات بس بدون أي تعريف مركزي إطلاقاً */
    --gold: #c9a15d;
    --gold-dark: #8a6d2f;
    --gold-bg: #fdf7ec;

    /* ألوان تصنيفات القائمة الجانبية (كل قسم له لون هوية ثابت) */
    --grp-purchase: #f39c12;
    --grp-warehouse: #1abc9c;
    --grp-market: #9b59b6;
    --grp-sales: #2ecc71;
    --grp-finance: #5d9cec;
    --grp-admin: #C8283A;
    --grp-hr: #3f51b5;
    --grp-contracts: #8d6e63;
    --grp-commissions: #d81b60;
    --grp-referrals: #00acc1;
    --grp-attendance: #00897b;

    /* الألوان الأساسية */
    --bg-body: #f2f4fa;
    --bg-card: #ffffff;
    --bg-table-header: #fcfdfe;
    --bg-sidebar: #464AFA;
    --bg-sidebar-hover: rgba(255, 255, 255, 0.14);
    /* تصحيح تناسق (طلب صريح): كثرة ألوان خلفيات الأزرار المختلفة بكل صفحة كانت تُشعِر بتشتّت
       بصري — كل الأزرار الآن تشترك بنفس خلفية السايدبار (نفس نقطتي تدرّجه بالضبط)، ومعنى
       الزر (نجاح/خطر/تحذير...) يظهر فقط عبر لون إطاره وتوهج ظله، لا الخلفية بالكامل */
    --sidebar-grad-start: #85B4FA;
    --btn-bg: linear-gradient(135deg, var(--sidebar-grad-start) 0%, var(--secondary) 100%);

    /* ألوان الرسوم البيانية (لوحة التحكم) — كانت مكتوبة حرفياً بالصفحة فلا تتبع الثيم */
    --chart-1: #464AFA;
    --chart-2: #85B4FA;
    --chart-3: #3230D2;
    --chart-4: #6C8AFD;
    --chart-5: #26248F;
    --chart-6: #B6CDFC;
    --chart-bar-bg: linear-gradient(180deg, #85B4FA, #464AFA);
    --chart-bar-shadow: 0 0 14px rgba(70,74,250,.45);
    --chart-label-bg: linear-gradient(135deg, #4D8AFD, #464AFA);
    --chart-label-shadow: 0 6px 16px rgba(70,74,250,.4);

    /* درجات الحالة للشارات والتنبيهات والصفوف الملوّنة وصفحة الدخول — كانت مكتوبة حرفياً بـstyle.css
       وبالصفحات فلا تتبع الثيم. القيم هنا هي نفسها السابقة بالضبط (الثيم الحالي لا يتغير) */
    --success-tint: #d9f5ea;
    --success-ink: #0e6b49;
    --danger-tint: #fbe1de;
    --warning-tint: #fdf1d6;
    --warning-ink: #8a5a06;
    --info-tint: #d9edf9;
    --info-ink: #185f8a;
    --purple-tint: #ecdffb;
    --purple-ink: #5c2d97;
    --dark-tint: #dfe2ea;
    --dark-ink: #1e2740;
    --neutral-tint: #eef1f5;
    --neutral-ink: #5b6475;
    --wh-tint: #e4edfb;
    --wh-ink: #24438f;
    --row-hover: #f8faff;
    --row-success-bg: #d1fae5;
    --row-success-ink: #065f46;
    --row-valid-bg: #ecfdf5;
    --row-opening-bg: #e6f7ff;
    --row-period-bg: #f0f4ff;
    --row-amber-bg: #fef3c7;
    --cell-amber-bg: #fff9e6;
    --danger-soft: #fee2e2;
    --danger-deep: #7f1d1d;
    --alert-red: #c62828;
    --alert-red-dark: #b91c1c;
    --alert-orange: #e65100;
    --success-flat: #27ae60;
    --ink-slate: #34495e;
    --ink-navy: #2c3e50;
    --scan-highlight: #ff5722;
    --scan-highlight-ring: rgba(255,87,34,0.15);
    --day-highlight: #e3f2fd;
    --holiday-bg: #fff3e0;
    --note-blue-bg: #eef6ff;
    --note-blue-border: #cfe2ff;
    --login-bg: linear-gradient(135deg, #1a2940 0%, #2c3e50 100%);
    --body-glow: radial-gradient(circle at 100% 0%, rgba(70,74,250,0.08) 0%, transparent 45%),
                 radial-gradient(circle at 0% 100%, rgba(136,84,208,0.05) 0%, transparent 45%);
    --login-btn-shadow: 0 6px 20px rgba(52,152,219,0.35);
    --purple-strong: #6b21a8;
    --row-ok-bg: #e8f8ee;
    --picker-bg: #fffaf0;
    --picker-border: #e8a33d;
    --picker-ink: #a56617;
    --picker-ring: rgba(232,163,61,0.12);

    /* النصوص */
    --text-primary: #171e2e;
    --text-secondary: #5b6478;
    --text-light: #a2a9bb;
    --text-white: #ffffff;

    /* الحدود والظلال */
    --border-color: #e7e9f2;
    --table-border: #f0f0f5;
    --shadow-sm: 0 2px 10px rgba(20,25,50,0.05);
    --shadow-md: 0 15px 35px rgba(20,25,50,0.08);
    --shadow-lg: 0 25px 55px rgba(20,25,50,0.12);
    --border-radius: 20px;
    --border-radius-sm: 12px;

    /* الخطوط */
    --font-family: 'Cairo', 'Segoe UI', 'Tahoma', system-ui, -apple-system, sans-serif;
    --font-size-base: 15px;

    /* ارتفاع الشريط العلوي على الموبايل */
    --topbar-height: 64px;

    /* توقيت التفاعلات */
    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-duration: 0.3s;
}

/* ============ إعادة تعيين أساسية ============ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-family);
    background: var(--bg-body);
    background-image: var(--body-glow);
    background-attachment: fixed;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    line-height: 1.65;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
}

a { text-decoration: none; color: var(--secondary); transition: color var(--transition-duration) var(--transition-timing); }
a:hover { color: var(--secondary-light); }

/* ============ الشريط العلوي (موبايل فقط) — زجاجي ضبابي ============ */
.mobile-topbar {
    display: none;
    position: fixed;
    top: 0; right: 0; left: 0;
    height: var(--topbar-height);
    background: linear-gradient(90deg, #85B4FA 0%, #464AFA 100%);
    color: var(--text-white);
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    z-index: 1100;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mobile-topbar .brand {
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mobile-topbar .brand i { color: var(--secondary-light); }
.mobile-topbar .brand .brand-logo-sm {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    flex-shrink: 0;
}
.menu-toggle-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-white);
    width: 42px;
    height: 42px;
    border-radius: var(--border-radius-sm);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-duration) var(--transition-timing);
    -webkit-tap-highlight-color: transparent;
}
.menu-toggle-btn:active { transform: scale(0.92); background: rgba(255,255,255,0.2); }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,14,28,0.6);
    z-index: 999;
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.sidebar-overlay.show { display: block; opacity: 1; }

/* ============ السايد بار (زجاجي — Glassmorphism) ============ */
.sidebar {
    width: 270px;
    background: linear-gradient(180deg, #85B4FA 0%, #464AFA 100%);
    color: var(--text-white);
    position: fixed;
    height: 100vh;
    right: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: -10px 0 40px rgba(70,74,250,0.25);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 10px; }

.sidebar-brand {
    text-align: center;
    padding: 24px 18px 20px;
    font-size: 1.2rem;
    font-weight: 800;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: var(--text-white);
    letter-spacing: 0.3px;
    line-height: 1.3;
}
.sidebar-brand .brand-logo-lg {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.sidebar-brand .brand-name-text { display: block; }
.sidebar-brand i { color: var(--secondary-light); margin-left: 8px; }
/* شعار محايد (أيقونة) عند تغيير اسم النظام بلا صورة شعار — APP_BRAND_NAME بدون APP_BRAND_LOGO */
.brand-logo-icon { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #464AFA, #1f3a5f); color: #fff; }
.sidebar-brand .brand-logo-icon { display: flex; font-size: 24px; }
.mobile-topbar .brand .brand-logo-icon { font-size: 14px; }
.brand-logo-icon i, .sidebar-brand .brand-logo-icon i { color: #fff; margin: 0; }
.sidebar-brand .brand-tagline {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    margin-top: 5px;
    letter-spacing: 0.2px;
}

.sidebar-menu { list-style: none; padding: 10px 12px 90px; }

/* عناوين تصنيف صغيرة تفصل مجموعات الصفحات المرتبطة ببعضها (حسب دورة المادة بالنظام) */
.sidebar-section-label {
    font-size: 12.5px;
    font-weight: 800;
    color: rgba(255,255,255,0.85);
    padding: 16px 14px 7px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 7px;
    user-select: none;
    text-transform: uppercase;
}
.sidebar-menu li.sidebar-section-li:first-child .sidebar-section-label { padding-top: 6px; }
.sidebar-section-label .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.sidebar-menu li { margin-bottom: 4px; }
.sidebar-menu li.sidebar-section-li { margin-bottom: 0; }

.sidebar-menu a {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,0.94);
    padding: 12px 16px;
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    font-size: 15.5px;
    font-weight: 800;
    transition: all var(--transition-duration) var(--transition-timing);
    gap: 12px;
    -webkit-tap-highlight-color: transparent;
}

.sidebar-menu a i {
    width: 22px;
    font-size: 16px;
    text-align: center;
    color: rgba(255,255,255,0.7);
    transition: color 0.2s;
}

/* تلوين خفيف لأيقونات كل مجموعة بس (بدون ما يغيّر خلفية الرابط أو نمط التصميم العام) —
   موضوعة قبل قواعد hover/active قصداً حتى تبقى هي الأقوى عند التفاعل فعلياً */
.sidebar-menu a.grp-purchase i { color: var(--grp-purchase); opacity: 0.7; }
.sidebar-menu a.grp-warehouse i { color: var(--grp-warehouse); opacity: 0.7; }
.sidebar-menu a.grp-market i { color: var(--grp-market); opacity: 0.75; }
.sidebar-menu a.grp-sales i { color: var(--grp-sales); opacity: 0.75; }
.sidebar-menu a.grp-finance i { color: var(--grp-finance); opacity: 0.75; }
.sidebar-menu a.grp-admin i { color: var(--grp-admin); opacity: 0.75; }
.sidebar-menu a.grp-hr i { color: var(--grp-hr); opacity: 0.75; }
.sidebar-menu a.grp-contracts i { color: var(--grp-contracts); opacity: 0.75; }
.sidebar-menu a.grp-commissions i { color: var(--grp-commissions); opacity: 0.75; }
.sidebar-menu a.grp-referrals i { color: var(--grp-referrals); opacity: 0.75; }
.sidebar-menu a.grp-attendance i { color: var(--grp-attendance); opacity: 0.75; }

.sidebar-menu a:hover {
    background: var(--bg-sidebar-hover);
    color: var(--text-white);
    transform: translateX(-4px);
}
.sidebar-menu a:hover i { color: var(--secondary-light); opacity: 1; }

.sidebar-menu a.active {
    background: linear-gradient(90deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    color: var(--text-white);
    box-shadow: 0 8px 22px rgba(70,74,250,0.4);
    border-inline-start: 3px solid var(--secondary-light);
}
.sidebar-menu a.active i { color: var(--text-white); opacity: 1; }

/* شريط تمييز بلون هوية القسم على الرابط النشط، لتعزيز الربط البصري مع نقطة القسم بالأعلى */
.sidebar-menu a.grp-purchase.active { border-inline-start-color: var(--grp-purchase); }
.sidebar-menu a.grp-warehouse.active { border-inline-start-color: var(--grp-warehouse); }
.sidebar-menu a.grp-market.active { border-inline-start-color: var(--grp-market); }
.sidebar-menu a.grp-sales.active { border-inline-start-color: var(--grp-sales); }
.sidebar-menu a.grp-finance.active { border-inline-start-color: var(--grp-finance); }
.sidebar-menu a.grp-admin.active { border-inline-start-color: var(--grp-admin); }
.sidebar-menu a.grp-hr.active { border-inline-start-color: var(--grp-hr); }
.sidebar-menu a.grp-contracts.active { border-inline-start-color: var(--grp-contracts); }
.sidebar-menu a.grp-commissions.active { border-inline-start-color: var(--grp-commissions); }
.sidebar-menu a.grp-referrals.active { border-inline-start-color: var(--grp-referrals); }
.sidebar-menu a.grp-attendance.active { border-inline-start-color: var(--grp-attendance); }

/* شريط "التبديل السريع" بأعلى السايد بار المختصر: زر رجوع للشبكة الرئيسية + أيقونة لكل مجموعة
   مسموحة، يسمح التنقل المباشر بين المجاميع بضغطة وحدة بدون رجوع كامل لصفحة home.php */
.nav-switch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px 16px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav-switch-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0.5;
    text-decoration: none;
    font-size: 13px;
    flex-shrink: 0;
    transition: opacity var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing);
}
.nav-switch-btn:hover { opacity: 0.9; transform: scale(1.12); color: #fff; }
.nav-switch-btn.active { opacity: 1; box-shadow: 0 0 0 2px rgba(255,255,255,0.7); }
.nav-home-btn { background: rgba(255,255,255,0.16); opacity: 0.85; }
.nav-home-btn:hover { opacity: 1; }

/* ============ شبكة أيقونات "الرئيسية" (home.php) ============ */
.app-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 10px;
}
.app-tile {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    padding: 28px 16px;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    transition: box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing), border-color var(--transition-duration) var(--transition-timing);
}
@media (hover: hover) and (pointer: fine) {
    .app-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--accent, var(--secondary)); }
}
.app-tile:active { transform: translateY(-1px) scale(0.98); }
.app-tile .app-tile-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent, var(--secondary));
    color: #fff;
    font-size: 22px;
}
.app-tile .app-tile-label { font-size: 0.92rem; font-weight: 800; }
.app-tile.app-tile-utility { border-style: dashed; }
.app-tile.app-tile-utility .app-tile-icon { background: transparent; border: 2px solid var(--border-color); color: var(--text-secondary); }

/* ============ المحتوى الرئيسي ============ */
.main-content {
    margin-right: 270px;
    padding: 32px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
    transition: margin var(--transition-duration) var(--transition-timing);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============ عنوان الصفحة ============ */
.page-title {
    background: linear-gradient(120deg, var(--bg-card) 0%, #fcfdfe 100%);
    padding: 26px 34px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 28px;
    border-right: 6px solid var(--secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.page-title-text {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
}
.page-title-text i { color: var(--secondary); margin-left: 12px; }

.page-title-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============ بطاقات الإحصائيات (KPI) ============ */
.stat-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}
.stat-card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    min-width: 0;
    transition: box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing);
}
@media (hover: hover) and (pointer: fine) {
    .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 90px; height: 90px;
    background: var(--accent, var(--secondary));
    opacity: 0.08;
    border-radius: 0 0 0 100%;
}
.stat-card .stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.stat-card .stat-label i {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent, var(--secondary));
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}
.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    overflow-wrap: break-word;
    word-break: break-word;
}
.stat-card.accent-success { --accent: var(--success); }
.stat-card.accent-danger { --accent: var(--danger); }
.stat-card.accent-warning { --accent: var(--warning); }
.stat-card.accent-purple { --accent: var(--purple); }
.stat-card.accent-info { --accent: var(--info); }

/* ============ البطاقات (زجاجية خفيفة + رفعة عند التحويم) ============ */
.card {
    background: var(--bg-card);
    padding: 30px 32px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 26px;
    border: 1px solid var(--border-color);
    transition: box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing);
}
@media (hover: hover) and (pointer: fine) {
    .card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
    flex-wrap: wrap;
    gap: 10px;
}
.card-header h3 {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--text-primary);
}
.card-header h3 i { color: var(--secondary); margin-left: 10px; }

.card-primary { border-top: 4px solid var(--secondary); }
.card-success { border-top: 4px solid var(--success); }
.card-danger { border-top: 4px solid var(--danger); }
.card-warning { border-top: 4px solid var(--warning); }
.card-purple { border-top: 4px solid var(--purple); }
.card-dark { border-top: 4px solid var(--primary); }

/* ============ النماذج ============ */
.form-group { margin-bottom: 17px; min-width: 0; }

.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 7px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    letter-spacing: 0.1px;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-family: var(--font-family);
    font-weight: 500;
    transition: all 0.3s var(--transition-timing);
    background: #fcfdfe;
    color: var(--text-primary);
}
.form-control:hover { border-color: #d1d5e3; background: #fff; }
.form-control:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(70,74,250,0.12);
    background: var(--bg-card);
    transform: translateY(-1px);
}
.form-control::placeholder { color: var(--text-light); opacity: 0.8; }

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235b6478' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-left: 36px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 5px;
}

/* ============ الأزرار (تدرّج لوني + توهج عند التحويم) ============ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius-sm);
    font-weight: 700;
    font-size: 14px;
    font-family: var(--font-family);
    cursor: pointer;
    transition: all 0.3s var(--transition-timing);
    color: var(--text-white);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.btn i { font-size: 15px; }
.btn:active { transform: scale(0.96); }

/* الزر الأساسي (حفظ/إجراء عادي): بلا إطار ملوّن — لونه أصلاً هو لون السايدبار نفسه، فلا يحتاج
   تمييزاً إضافياً. حدّ شفاف بنفس عرض حدود بقية الأزرار يحافظ على تطابق القياس بينها كلها بالضبط
   (box-sizing:border-box يجعل الحدّ يقتطع من الحشو الداخلي لا يزيد حجم الزر) */
.btn-primary {
    background: var(--btn-bg);
    border: 2.5px solid transparent;
    box-shadow: 0 4px 15px rgba(70,74,250,0.3);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--secondary-light) 0%, var(--secondary-dark) 100%);
    box-shadow: 0 7px 20px rgba(70,74,250,0.4);
    transform: translateY(-1px);
}

.btn-success {
    background: var(--btn-bg);
    border: 2.5px solid var(--success);
    box-shadow: 0 4px 15px rgba(23,166,114,0.35);
}
.btn-success:hover {
    border-color: var(--success-light);
    box-shadow: 0 7px 20px rgba(23,166,114,0.5);
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--btn-bg);
    border: 2.5px solid var(--danger);
    box-shadow: 0 4px 15px rgba(200,40,58,0.35);
}
.btn-danger:hover {
    border-color: var(--danger-light);
    box-shadow: 0 7px 20px rgba(200,40,58,0.5);
    transform: translateY(-1px);
}

.btn-warning {
    background: var(--btn-bg);
    border: 2.5px solid var(--warning);
    box-shadow: 0 4px 15px rgba(243,156,18,0.4);
    color: var(--text-white);
}
.btn-warning:hover {
    border-color: var(--warning-light);
    box-shadow: 0 7px 20px rgba(243,156,18,0.55);
    transform: translateY(-1px);
}

.btn-purple {
    background: var(--btn-bg);
    border: 2.5px solid var(--purple);
    box-shadow: 0 4px 15px rgba(136,84,208,0.35);
}
.btn-purple:hover {
    border-color: var(--purple-light);
    box-shadow: 0 7px 20px rgba(136,84,208,0.5);
    transform: translateY(-1px);
}

/* كانت مطابقة تماماً للون الأساسي (--primary/--primary-light) قبل هذا التعديل — أُبقيت متمايزة
   بإطار بلون الأساسي الغامق، بما إن خلفيتها صارت الآن نفس خلفية بقية الأزرار */
.btn-dark {
    background: var(--btn-bg);
    border: 2.5px solid var(--primary);
    box-shadow: 0 4px 15px rgba(50,48,210,0.35);
}
.btn-dark:hover {
    border-color: var(--primary-light);
    box-shadow: 0 7px 20px rgba(50,48,210,0.5);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-secondary);
}
.btn-outline:hover {
    background: var(--bg-body);
    border-color: var(--secondary);
    color: var(--secondary);
}

.btn-sm { padding: 7px 15px; font-size: 12px; }
.btn-lg { padding: 15px 32px; font-size: 16px; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ============ الجداول ============ */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 10px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.data-table thead {
    background: var(--bg-table-header);
    border-bottom: 2px solid var(--table-border);
}

.data-table th {
    padding: 15px 18px;
    text-align: center;
    font-weight: 800;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.data-table td {
    padding: 14px 18px;
    text-align: center;
    border-bottom: 1px solid var(--table-border);
    vertical-align: middle;
}

.data-table tbody tr { transition: background var(--transition-duration) var(--transition-timing); }
.data-table tbody tr:hover { background: var(--row-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }

.data-table .badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.badge-success { background: var(--success-tint); color: var(--success-ink); }
.badge-danger { background: var(--danger-tint); color: var(--danger-dark); }
.badge-warning { background: var(--warning-tint); color: var(--warning-ink); }
.badge-info { background: var(--info-tint); color: var(--info-ink); }
.badge-purple { background: var(--purple-tint); color: var(--purple-ink); }
.badge-dark { background: var(--dark-tint); color: var(--dark-ink); }
/* محايدة للحالات الساكنة (معطَّل، محذوف، غير مُسدَّد...): كانت مستخدَمة بعدة صفحات بلا تعريف فتظهر نصاً عادياً */
.badge-secondary { background: var(--neutral-tint); color: var(--neutral-ink); }

/* ============ التنبيهات ============ */
.alert {
    padding: 16px 22px;
    border-radius: var(--border-radius-sm);
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    border-right: 4px solid transparent;
}
.alert i { font-size: 20px; }

.alert-success { background: var(--success-tint); color: var(--success-ink); border-right-color: var(--success); }
.alert-danger { background: var(--danger-tint); color: var(--danger-dark); border-right-color: var(--danger); }
.alert-warning { background: var(--warning-tint); color: var(--warning-ink); border-right-color: var(--warning); }
.alert-info { background: var(--info-tint); color: var(--info-ink); border-right-color: var(--info); }

/* ============ الشارات ============ */
.wh-badge {
    background: var(--wh-tint);
    color: var(--wh-ink);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 12px;
    display: inline-block;
}
.wh-badge i { margin-left: 5px; }

/* ============ نوافذ منبثقة عامة (Modal) — زجاجية بخلفية ضبابية + دخول منزلق ============ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,14,28,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal-box {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-box .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-box .modal-header h3 { font-size: 1.05rem; font-weight: 800; }
.modal-box .modal-close-x {
    background: var(--bg-body);
    border: none;
    width: 34px; height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}
.modal-box .modal-close-x:hover { background: var(--border-color); color: var(--text-primary); }
.modal-box .modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}
.modal-box .modal-footer {
    padding: 18px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
}

/* قائمة اختيار متعددة (checkbox list) لاختيار عدة مواد دفعة واحدة */
.checkbox-list {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    max-height: 340px;
    overflow-y: auto;
}
.checkbox-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}
.checkbox-list-item:last-child { border-bottom: none; }
.checkbox-list-item:hover { background: var(--row-hover); }
.checkbox-list-item input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--secondary);
    flex-shrink: 0;
}
.checkbox-list-item .item-name { flex: 1; font-weight: 600; font-size: 13.5px; }
.checkbox-list-item .item-stock { font-size: 11.5px; color: var(--text-light); white-space: nowrap; }
.checkbox-list-item .item-qty {
    width: 70px;
    padding: 6px 8px;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
}
.checkbox-list-empty {
    padding: 30px;
    text-align: center;
    color: var(--text-light);
    font-size: 13px;
}

/* ============ الفوتر ============ */
/* margin-top:auto (بدل قيمة ثابتة) داخل .main-content الآن Flex عمودي — يثبّت الفوتر بآخر
   الشاشة تماماً لو المحتوى قصير (بدل ما يطلع بمنتصف الشاشة الفارغة)، وبنفس الوقت يبقى
   بآخر الصفحة الفعلي (يحتاج تمرير) لو المحتوى أطول من الشاشة — سلوك واحد يغطي الحالتين */
footer {
    text-align: center;
    padding: 25px 0;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: 0.85rem;
}
footer a { color: var(--secondary); font-weight: 700; }
footer a:hover { color: var(--secondary-light); }

/* ============ الوسائط (Responsive) ============ */

/* موبايل وتابلت: حد استجابة موحّد (991px) للسايد بار كامل — هذا يمنع من الأساس أي تصادم
   بين السايد بار الثابت وتخطيطات الأعمدة المتعددة بالمحتوى (كان يسبب مشكلة انزياح بوضع
   الأفقي landscape على بعض الصفحات). بدل ما نرقّع كل حالة لحالها، أي عرض 991px فما تحت
   يشتغل بنمط "قائمة منسدلة" موحّد، فما يصير تصادم إطلاقاً. */
@media (max-width: 991px) {
    html, body { overflow-x: hidden; max-width: 100vw; }

    .mobile-topbar { display: flex; }

    .sidebar { transform: translateX(100%); }
    .sidebar.open { transform: translateX(0); }

    .sidebar-brand { padding-top: calc(var(--topbar-height) + 16px); }

    .main-content {
        margin-right: 0;
        padding: 22px;
        padding-top: calc(var(--topbar-height) + 20px);
    }

    .stat-cards-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

    /* تصحيح تخطيطات الأعمدة الثابتة (صفحات الموردين/الزبائن/المنتجات) — تنكمش لعمود واحد،
       مع min-width:0 لضمان عدم رفض المحتوى الداخلي (فورم/جدول عريض) الانكماش الفعلي */
    .two-col-layout { grid-template-columns: 1fr !important; }
    .two-col-layout > * { min-width: 0; }
}

@media (max-width: 768px) {
    .page-title {
        padding: 18px 22px;
        border-radius: 15px;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .page-title-text { font-size: 1.15rem; }
    .card { padding: 20px 18px; border-radius: 15px; }

    .form-row { grid-template-columns: 1fr; gap: 13px; }

    .stat-cards-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat-card { padding: 14px 16px; }
    .stat-card .stat-value { font-size: 1.2rem; }

    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table td {
        display: block; width: 100%;
    }
    .data-table tr {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-sm);
        margin-bottom: 14px;
        padding: 12px 16px;
        box-shadow: var(--shadow-sm);
        border-right: 4px solid var(--secondary-light);
    }
    .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 9px 0;
        border-bottom: 1px solid var(--table-border);
        text-align: right;
        min-height: 42px;
    }
    .data-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--text-secondary);
        font-size: 12px;
        margin-left: 15px;
        flex-shrink: 0;
    }
    .data-table td:last-child { border-bottom: none; }
    .data-table td .btn { font-size: 12px; padding: 5px 10px; }

    /* تصحيح استجابة: بعض الجداول (مثلاً صف شحن الطلبات بـorders.php) تحط بخلية واحدة عناصر
       متعددة مكدَّسة (قوائم منسدلة، أو صندوق اختيار أرقام تسلسلية كامل) بدل قيمة واحدة بسيطة —
       نمط "التسمية بجانب القيمة" (space-between) أعلاه يضغطها بعرض غير قابل للاستخدام. هذي
       الفئة تُستخدَم فقط على الخلايا المحدَّدة صراحة (data-table td.cell-complex) لعرض التسمية
       فوق المحتوى كامل العرض، بلا أي تأثير على باقي خلايا كل الجداول الأخرى المستخدِمة لنفس الكلاس */
    .data-table td.cell-complex {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }
    .data-table td.cell-complex::before { margin: 0 0 6px; }
    /* تصحيح استجابة إضافي: بعض الحقول داخل خلايا معقَّدة (مثلاً حقول النطاق الرقمي/المسح
       بصندوق استلام الأرقام التسلسلية) لها min-width ثابت (140-280px) بالأسلوب inline لضمان
       عرض مريح على الديسكتوب — هذا نفسه يفرض عرض جدول أوسع من عرض شاشة الجوال. نحيّد الحد
       الأدنى فقط (مو width — بعض الحقول أزواج جنباً لجنب كـ"من/إلى" وتحتاج تنكمش نسبياً
       بمرونة flex الطبيعية، لا تُفرَض على 100% كل واحد فتتصادم) */
    .data-table td.cell-complex input,
    .data-table td.cell-complex textarea,
    .data-table td.cell-complex select {
        min-width: 0 !important;
    }

    .btn { padding: 10px 18px; font-size: 13px; }
    .btn-block-mobile { width: 100%; justify-content: center; }

    .alert { padding: 12px 16px; font-size: 14px; }

    .modal-box { max-width: 100%; margin: 0 10px; border-radius: 18px; }
    .modal-box .modal-body { padding: 18px 16px; }
    .modal-box .modal-footer { padding: 16px; flex-direction: column-reverse; }
    .modal-box .modal-footer .btn { width: 100%; justify-content: center; }
}

/* شاشات صغيرة جداً */
@media (max-width: 480px) {
    .stat-cards-grid { grid-template-columns: 1fr 1fr; }
    .card { padding: 16px 14px; }
    .data-table td { font-size: 13px; padding: 7px 0; flex-wrap: wrap; }
    .data-table td::before { font-size: 11px; }
}

/* ============ أدوات مساعدة ============ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }

.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }
.flex-wrap { flex-wrap: wrap; }

/* ============ Scrollbar مخصص ============ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* خلية فارغة بطبيعتها (مثل تاريخ ومادة سطر مكافأة أو تسوية) لا تُعرض كبطاقة فارغة على الجوال */
@media (max-width: 768px) { .data-table td.m-hide-empty { display: none !important; } }

/* شاشة لابتوب بارتفاع محدود (مثل 1440×900): القائمة الجانبية أكثر إحكاماً حتى تظهر روابط المجموعة وزر الخروج بلا تمرير. الجوال لا يتأثر */
@media (min-width: 769px) and (max-height: 1000px) {
    .sidebar-brand { padding: 14px 14px 12px; }
    .sidebar-brand .brand-logo-lg { width: 40px; height: 40px; margin-bottom: 6px; }
    .nav-switch-row { gap: 6px; padding: 8px 12px 10px; margin-bottom: 4px; }
    .nav-switch-btn { width: 28px; height: 28px; font-size: 12px; }
    .sidebar-menu { padding: 6px 10px 24px; }
    .sidebar-section-label { padding: 10px 14px 5px; }
    .sidebar-menu li { margin-bottom: 2px; }
    .sidebar-menu a { padding: 9px 14px; }
}

/* ============================================================
   الثيم المؤسسي (data-theme="corporate") — لونان فقط وتدرجاتهما:
   محايد دافئ (خلفيات ونصوص، وفحمي لرأس القائمة والشريط العلوي) + بترولي للعلامة (القائمة الجانبية،
   والصفحة المختارة بدرجته الأغمق، والأزرار والروابط والتحديد).
   ألوان الحالة (نجاح/خطر/تحذير) باقية بدرجات خافتة لأنها تحمل معنى. أسطح مسطّحة بلا تدرّجات
   ولا توهّج، وزوايا أقل استدارة. يُختار من إعدادات النظام العامة (system_settings.ui_theme)
   ============================================================ */
html[data-theme="corporate"] {
    --primary: #1D6676;
    --primary-light: #3B8090;
    --primary-dark: #12424E;
    --secondary: #1D6676;
    --secondary-light: #3B8090;
    --secondary-dark: #12424E;
    --success: #4F7D35;
    --success-light: #6A9A4E;
    --success-dark: #3D6128;
    --danger: #B3311F;
    --danger-light: #CC5440;
    --danger-dark: #8F2516;
    --warning: #AC630C;
    --warning-light: #C77F2A;
    --warning-dark: #7A4608;
    --info: #2F7484;
    --info-dark: #12424E;
    --purple: #5A6E78;
    --purple-light: #7A8C95;
    --teal: #1D6676;
    --teal-dark: #12424E;
    --indigo: #4A5E68;
    --indigo-dark: #33454E;
    --gold: #8C7B66;
    --gold-dark: #5F5243;
    --gold-bg: #F5F1EB;

    --warning-bg: #FAEFDD;
    --secondary-bg: #E6F0F2;
    --indigo-bg: #EEF1F2;
    --info-bg: #E6F0F2;
    --danger-bg: #FBE9E6;
    --purple-bg: #F1F3F4;

    --grp-purchase: #1D6676;
    --grp-warehouse: #1D6676;
    --grp-market: #1D6676;
    --grp-sales: #1D6676;
    --grp-finance: #1D6676;
    --grp-admin: #1D6676;
    --grp-hr: #1D6676;
    --grp-contracts: #1D6676;
    --grp-commissions: #1D6676;
    --grp-referrals: #1D6676;
    --grp-attendance: #1D6676;

    --bg-body: #F5F4F2;
    --bg-card: #FFFFFF;
    --bg-table-header: #FBF9F8;
    --bg-sidebar: #1A5C6B;
    --sidebar-active-bg: #12424E;
    --topbar-charcoal: #2B2724;
    --bg-sidebar-hover: rgba(255, 255, 255, 0.08);
    --sidebar-grad-start: #1D6676;
    --btn-bg: #1D6676;

    --text-primary: #161513;
    --text-secondary: #5C5853;
    --text-light: #9A958F;

    --border-color: #E2DFDB;
    --table-border: #EEECE9;
    --shadow-sm: 0 1px 3px rgba(22,21,19,0.08);
    --shadow-md: 0 4px 14px rgba(22,21,19,0.10);
    --shadow-lg: 0 16px 40px rgba(22,21,19,0.16);
    --border-radius: 10px;
    --border-radius-sm: 6px;

    --chart-1: #1D6676;
    --chart-2: #9CC3CC;
    --chart-3: #12424E;
    --chart-4: #4E8C9A;
    --chart-5: #312D2A;
    --chart-6: #C9C4BE;
    --chart-bar-bg: #1D6676;
    --chart-bar-shadow: none;
    --chart-label-bg: #312D2A;
    --chart-label-shadow: 0 2px 6px rgba(22,21,19,.2);

    --success-tint: #E9F2E1;
    --success-ink: #3D6128;
    --danger-tint: #FBE9E6;
    --warning-tint: #FAEFDD;
    --warning-ink: #7A4608;
    --info-tint: #E6F0F2;
    --info-ink: #12424E;
    --purple-tint: #EAEFF1;
    --purple-ink: #3E5560;
    --dark-tint: #E6E3DF;
    --dark-ink: #312D2A;
    --neutral-tint: #F1EFED;
    --neutral-ink: #5C5853;
    --wh-tint: #E6F0F2;
    --wh-ink: #12424E;
    --row-hover: #F7F6F4;
    --row-success-bg: #E9F2E1;
    --row-success-ink: #3D6128;
    --row-valid-bg: #F1F6EC;
    --row-opening-bg: #E6F0F2;
    --row-period-bg: #EEF4F5;
    --row-amber-bg: #FAEFDD;
    --cell-amber-bg: #FBF5EA;
    --danger-soft: #FBE9E6;
    --danger-deep: #6E1C11;
    --alert-red: #B3311F;
    --alert-red-dark: #8F2516;
    --alert-orange: #AC630C;
    --success-flat: #4F7D35;
    --ink-slate: #3A3632;
    --ink-navy: #161513;
    --scan-highlight: #AC630C;
    --scan-highlight-ring: rgba(172,99,12,0.16);
    --day-highlight: #E6F0F2;
    --holiday-bg: #FAEFDD;
    --note-blue-bg: #EEF4F5;
    --note-blue-border: #C4DCE1;
    --login-bg: linear-gradient(160deg, #2B2724 0%, #1A5C6B 100%);
    --body-glow: none;
    --login-btn-shadow: none;
    --purple-strong: #3E5560;
    --row-ok-bg: #E9F2E1;
    --picker-bg: #FBF5EA;
    --picker-border: #C77F2A;
    --picker-ink: #7A4608;
    --picker-ring: rgba(172,99,12,0.12);
}

/* الشريط العلوي ورأس القائمة فحميان، والقائمة بترولية، والصفحة المختارة بنفس اللون أغمق */
html[data-theme="corporate"] .mobile-topbar { background: var(--topbar-charcoal); box-shadow: 0 1px 0 rgba(0,0,0,0.2); }
html[data-theme="corporate"] .sidebar { background: var(--bg-sidebar); box-shadow: none; border-left-color: rgba(255,255,255,0.06); }
html[data-theme="corporate"] .sidebar-brand { background: var(--topbar-charcoal); border-bottom-color: rgba(0,0,0,0.25); }
html[data-theme="corporate"] .brand-logo-icon { background: var(--primary); }
html[data-theme="corporate"] .sidebar-menu a { font-weight: 700; }
html[data-theme="corporate"] .sidebar-menu a i,
html[data-theme="corporate"] .sidebar-menu a[class*="grp-"] i { color: rgba(255,255,255,0.62); opacity: 1; }
html[data-theme="corporate"] .sidebar-menu a:hover { transform: none; }
html[data-theme="corporate"] .sidebar-menu a:hover i { color: #fff; }
html[data-theme="corporate"] .sidebar-menu a.active,
html[data-theme="corporate"] .sidebar-menu a[class*="grp-"].active {
    background: var(--sidebar-active-bg);
    box-shadow: none;
    border-inline-start-color: #9CC3CC;
}
html[data-theme="corporate"] .sidebar-menu a.active i { color: #fff; }
html[data-theme="corporate"] .sidebar-section-label .dot { background: #9CC3CC; }
html[data-theme="corporate"] .nav-switch-btn { background: rgba(255,255,255,0.10) !important; opacity: 0.8; }
html[data-theme="corporate"] .nav-switch-btn.active { background: var(--sidebar-active-bg) !important; box-shadow: none; opacity: 1; }

/* أسطح مسطّحة: بلا رفعة عند التحويم وبلا تدرّجات */
html[data-theme="corporate"] .page-title { background: var(--bg-card); border-right-width: 4px; }
html[data-theme="corporate"] .card:hover,
html[data-theme="corporate"] .stat-card:hover { transform: none; box-shadow: var(--shadow-sm); }
html[data-theme="corporate"] .app-tile:hover { transform: none; }
html[data-theme="corporate"] .stat-card::before { opacity: 0.05; }
html[data-theme="corporate"] .stat-card .stat-label i { border-radius: 6px; }

/* النماذج */
html[data-theme="corporate"] .form-control { background: #fff; border-width: 1px; }
html[data-theme="corporate"] .form-control:hover { border-color: #BDB8B2; }
html[data-theme="corporate"] .form-control:focus { box-shadow: 0 0 0 3px rgba(29,102,118,0.18); transform: none; }

/* الأزرار: لون صلب واحد لكل معنى، بلا ظل متوهّج. الأساسي/النجاح بلون العلامة، «الداكن» فحمي */
html[data-theme="corporate"] .btn { box-shadow: none; }
html[data-theme="corporate"] .btn-primary,
html[data-theme="corporate"] .btn-success,
html[data-theme="corporate"] .btn-purple { background: var(--primary); border-color: var(--primary); box-shadow: none; }
html[data-theme="corporate"] .btn-primary:hover,
html[data-theme="corporate"] .btn-success:hover,
html[data-theme="corporate"] .btn-purple:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: none; }
html[data-theme="corporate"] .btn-dark { background: #312D2A; border-color: #312D2A; box-shadow: none; }
html[data-theme="corporate"] .btn-dark:hover { background: #161513; border-color: #161513; box-shadow: none; }
html[data-theme="corporate"] .btn-danger { background: var(--danger); border-color: var(--danger); box-shadow: none; }
html[data-theme="corporate"] .btn-danger:hover { background: var(--danger-dark); border-color: var(--danger-dark); box-shadow: none; }
/* التحذير (تعديل، سحب، مصروف...) كثير التكرار بالجداول: إطار ونص بلونه على خلفية بيضاء بدل كتل برتقالية */
html[data-theme="corporate"] .btn-warning { background: #fff; color: var(--warning-dark); border-color: var(--warning); box-shadow: none; }
html[data-theme="corporate"] .btn-warning:hover { background: var(--warning-tint); color: var(--warning-dark); border-color: var(--warning-dark); box-shadow: none; }
html[data-theme="corporate"] .btn-outline { border-color: #CBC7C2; color: var(--text-primary); background: #fff; }
html[data-theme="corporate"] .btn-outline:hover { background: var(--secondary-bg); }
/* أزرار معرَّفة داخل الصفحات بنمط «خلفية موحّدة + إطار ملوّن» (المبيعات، المناقلة، المنتجات): صلبة بلون معناها */
html[data-theme="corporate"] .btn-remove,
html[data-theme="corporate"] .btn-remove-row,
html[data-theme="corporate"] .btn-reset { background: var(--danger) !important; border-color: var(--danger) !important; }
html[data-theme="corporate"] .btn-add-row,
html[data-theme="corporate"] .btn-save-invoice,
html[data-theme="corporate"] .btn-export { border-color: var(--primary) !important; }
html[data-theme="corporate"] .btn-add-row:hover,
html[data-theme="corporate"] .btn-save-invoice:hover,
html[data-theme="corporate"] .btn-export:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; box-shadow: none; transform: none; }
/* ظل متوهّج مكتوب داخل سمة style لبعض الأزرار: يُلغى هنا لأن القاعدة العامة لا تغلب الأسلوب المضمَّن */
html[data-theme="corporate"] .btn[style*="box-shadow"] { box-shadow: none !important; }

/* الجداول والشارات والتنبيهات: تدرجات خافتة */
html[data-theme="corporate"] .data-table th { letter-spacing: 0; }
html[data-theme="corporate"] .data-table .badge,
html[data-theme="corporate"] .wh-badge { border-radius: 4px; }

/* النوافذ والرسوم: بلا ضبابية ولا توهّج */
html[data-theme="corporate"] .modal-overlay,
html[data-theme="corporate"] .sidebar-overlay { background: rgba(22,21,19,0.5); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="corporate"] svg [filter] { filter: none; }