/* 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;

    /* الألوان الأساسية */
    --bg-body: #f2f4fa;
    --bg-card: #ffffff;
    --bg-table-header: #fcfdfe;
    --bg-sidebar: #464AFA;
    --bg-sidebar-hover: rgba(255, 255, 255, 0.14);

    /* النصوص */
    --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: 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%);
    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; }
.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: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); }

/* ============ المحتوى الرئيسي ============ */
.main-content {
    margin-right: 270px;
    padding: 32px 40px;
    min-height: 100vh;
    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); }

.btn-primary {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    box-shadow: 0 4px 15px rgba(70,74,250,0.3);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--secondary-light) 0%, var(--secondary) 100%);
    box-shadow: 0 7px 20px rgba(70,74,250,0.4);
    transform: translateY(-1px);
}

.btn-success {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
    box-shadow: 0 4px 15px rgba(23,166,114,0.3);
}
.btn-success:hover {
    background: linear-gradient(135deg, var(--success-light) 0%, var(--success) 100%);
    box-shadow: 0 7px 20px rgba(23,166,114,0.4);
    transform: translateY(-1px);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-light) 100%);
    box-shadow: 0 4px 15px rgba(200,40,58,0.3);
}
.btn-danger:hover {
    background: linear-gradient(135deg, var(--danger-light) 0%, var(--danger) 100%);
    box-shadow: 0 7px 20px rgba(200,40,58,0.4);
    transform: translateY(-1px);
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-light) 100%);
    box-shadow: 0 4px 15px rgba(243,156,18,0.3);
    color: var(--text-white);
}
.btn-warning:hover {
    background: linear-gradient(135deg, var(--warning-light) 0%, var(--warning) 100%);
    box-shadow: 0 7px 20px rgba(243,156,18,0.4);
    transform: translateY(-1px);
}

.btn-purple {
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-light) 100%);
    box-shadow: 0 4px 15px rgba(136,84,208,0.3);
}
.btn-purple:hover {
    background: linear-gradient(135deg, var(--purple-light) 0%, var(--purple) 100%);
    box-shadow: 0 7px 20px rgba(136,84,208,0.4);
    transform: translateY(-1px);
}

.btn-dark {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    box-shadow: 0 4px 15px rgba(50,48,210,0.3);
}
.btn-dark:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    box-shadow: 0 7px 20px rgba(50,48,210,0.4);
    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: #f8faff; }
.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: #d9f5ea; color: #0e6b49; }
.badge-danger { background: #fbe1de; color: #a3271c; }
.badge-warning { background: #fdf1d6; color: #8a5a06; }
.badge-info { background: #d9edf9; color: #185f8a; }
.badge-purple { background: #ecdffb; color: #5c2d97; }
.badge-dark { background: #dfe2ea; color: #1e2740; }

/* ============ التنبيهات ============ */
.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: #d9f5ea; color: #0e6b49; border-right-color: var(--success); }
.alert-danger { background: #fbe1de; color: #a3271c; border-right-color: var(--danger); }
.alert-warning { background: #fdf1d6; color: #8a5a06; border-right-color: var(--warning); }
.alert-info { background: #d9edf9; color: #185f8a; border-right-color: var(--info); }

/* ============ الشارات ============ */
.wh-badge {
    background: #e4edfb;
    color: #24438f;
    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: #f8faff; }
.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;
}

/* ============ الفوتر ============ */
footer {
    text-align: center;
    padding: 25px 0;
    margin-top: 40px;
    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); }