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

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

:root {
    /* الألوان الرئيسية */
    --primary: #161f36;
    --primary-light: #24304f;
    --primary-dark: #0c1121;
    --secondary: #4a63e7;
    --secondary-light: #6c82ef;
    --secondary-dark: #3a4fc4;
    --success: #17a672;
    --success-light: #22c98d;
    --danger: #e74c3c;
    --danger-light: #f1786a;
    --warning: #f39c12;
    --warning-light: #f5b041;
    --info: #2980b9;
    --purple: #8854d0;
    --purple-light: #a179dd;

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

    /* النصوص */
    --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(74,99,231,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: rgba(19, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    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: rgba(19, 26, 46, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    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(0,0,0,0.25);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.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.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    margin-top: 5px;
    letter-spacing: 0.2px;
}

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

/* عناوين تصنيف صغيرة تفصل مجموعات الصفحات المرتبطة ببعضها (حسب دورة المادة بالنظام) */
.sidebar-section-label {
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
    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.75);
    padding: 12px 16px;
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    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.45);
    transition: color 0.2s;
}

/* تلوين خفيف لأيقونات كل مجموعة بس (بدون ما يغيّر خلفية الرابط أو نمط التصميم العام) —
   موضوعة قبل قواعد hover/active قصداً حتى تبقى هي الأقوى عند التفاعل فعلياً */
.sidebar-menu a.grp-purchase i { color: rgba(243,156,18,0.7); }
.sidebar-menu a.grp-warehouse i { color: rgba(26,188,172,0.7); }
.sidebar-menu a.grp-market i { color: rgba(155,89,182,0.75); }
.sidebar-menu a.grp-sales i { color: rgba(46,204,113,0.75); }
.sidebar-menu a.grp-finance i { color: rgba(93,156,236,0.75); }
.sidebar-menu a.grp-admin i { color: rgba(231,76,60,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); }

.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(74,99,231,0.35);
}
.sidebar-menu a.active i { color: var(--text-white); }

/* ============ المحتوى الرئيسي ============ */
.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(74,99,231,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(74,99,231,0.3);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--secondary-light) 0%, var(--secondary) 100%);
    box-shadow: 0 7px 20px rgba(74,99,231,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(231,76,60,0.3);
}
.btn-danger:hover {
    background: linear-gradient(135deg, var(--danger-light) 0%, var(--danger) 100%);
    box-shadow: 0 7px 20px rgba(231,76,60,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(22,31,54,0.3);
}
.btn-dark:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    box-shadow: 0 7px 20px rgba(22,31,54,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; }

    .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); }