/*
 * ═══════════════════════════════════════════════════════════════
 * MAJAARH — Global Refinement Layer
 * ملف الإصلاح الشامل الموحد — لا يُغيّر التصميم، يُضبطه فقط
 * ═══════════════════════════════════════════════════════════════
 * القواعد: 8px Grid · Cairo Font · Border-radius 10px
 *          Custom Scrollbar · No Horizontal Scroll · z-index Order
 * ═══════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────
   0. SCALE — تصغير الحجم العام ليبدو كـ 80% zoom
      html font-size: 14px بدل 16px الافتراضي
      كل وحدات rem تتصغر تلقائياً بدون كسر أي شيء
   ───────────────────────────────────────────── */
html {
    font-size: 14px !important;
}

/* ─────────────────────────────────────────────
   1. FONT — Cairo كخط وحيد للمشروع كله
   ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

*,
*::before,
*::after {
    font-family: 'Cairo', sans-serif;
    box-sizing: border-box;
}

/* Fix for FontAwesome Icons - do not override their font-family */
/* يجب تصحيح العنصر نفسه + ::before لأن الأيقونة تُرسم عبر pseudo-element */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"],
.fa::before, .fas::before, .far::before, .fab::before,
.fa-solid::before, .fa-regular::before, .fa-brands::before,
[class^="fa-"]::before, [class*=" fa-"]::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}

/* ─────────────────────────────────────────────
   2. SCROLLBAR — مرئي وأنيق في كل مكان
   ───────────────────────────────────────────── */
html {
    scrollbar-gutter: stable;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
}

::-webkit-scrollbar-thumb {
    background: rgba(227, 27, 35, 0.45);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(227, 27, 35, 0.75);
}

/* Scrollbar داخل الجداول والأقسام */
.table-responsive,
.sidebar-unified,
.sidebar-advanced,
.sidebar,
[class*="sidebar"],
.overflow-auto,
.overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: rgba(227, 27, 35, 0.45) transparent;
}

.table-responsive::-webkit-scrollbar,
.sidebar-unified::-webkit-scrollbar,
.sidebar-advanced::-webkit-scrollbar,
[class*="sidebar"]::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.table-responsive::-webkit-scrollbar-thumb,
.sidebar-unified::-webkit-scrollbar-thumb,
.sidebar-advanced::-webkit-scrollbar-thumb,
[class*="sidebar"]::-webkit-scrollbar-thumb {
    background: rgba(227, 27, 35, 0.4);
    border-radius: 10px;
}

/* ─────────────────────────────────────────────
   3. NO HORIZONTAL SCROLL — منع التمرير الأفقي
   ───────────────────────────────────────────── */
body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

.container,
.container-fluid {
    max-width: 100%;
}

/* ─────────────────────────────────────────────
   4. 8px GRID — توحيد المسافات
   ───────────────────────────────────────────── */

/* Cards — padding على card-body فقط، ليس على .card مباشرة */
.card,
.stat-card,
.widget-card,
.stat-card-premium {
    border-radius: 10px !important;
    margin-bottom: 16px !important;
}

.card-header,
.widget-header {
    padding: 12px 16px !important;
    border-radius: 10px 10px 0 0 !important;
}

.card-body,
.widget-content {
    padding: 16px !important;
}

.card-footer {
    padding: 12px 16px !important;
    border-radius: 0 0 10px 10px !important;
}

/* Buttons — فقط Bootstrap .btn لتجنب تأثير الأزرار المخصصة */
.btn {
    border-radius: 10px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.btn-sm {
    padding: 4px 12px !important;
    min-height: 32px !important;
    font-size: 0.85rem !important;
}

.btn-lg {
    padding: 12px 24px !important;
    min-height: 48px !important;
}

/* Inputs */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
    border-radius: 10px !important;
    padding: 8px 16px !important;
    min-height: 40px !important;
}

/* Badges */
.badge {
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 0.78rem !important;
}

/* Section spacing */
.mb-4 { margin-bottom: 24px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mt-4 { margin-top: 24px !important; }
.mt-3 { margin-top: 16px !important; }
.p-4  { padding: 24px !important; }
.p-3  { padding: 16px !important; }
.gap-3 { gap: 16px !important; }
.gap-4 { gap: 24px !important; }

/* ─────────────────────────────────────────────
   5. ALIGNMENT — محاذاة عمودية وأفقية
   ───────────────────────────────────────────── */
.table th,
.table td {
    vertical-align: middle !important;
    padding: 10px 14px !important;
}

.card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.stat-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* ─────────────────────────────────────────────
   6. TEXT CONTRAST — وضوح النصوص فوق الخلفية الداكنة
   ───────────────────────────────────────────── */
body {
    color: var(--mj-text, #f8fafc);
}

.text-muted,
.text-secondary {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Light mode override */
html.light body,
[data-bs-theme="light"] body {
    color: #0f172a !important;
}

html.light .text-muted,
[data-bs-theme="light"] .text-muted,
html.light .text-secondary,
[data-bs-theme="light"] .text-secondary {
    color: rgba(15, 23, 42, 0.65) !important;
}

html.light .text-white,
[data-bs-theme="light"] .text-white,
html.light .text-light,
[data-bs-theme="light"] .text-light {
    color: #0f172a !important;
}

html.light h1, html.light h2, html.light h3, html.light h4, html.light h5, html.light h6,
[data-bs-theme="light"] h1, [data-bs-theme="light"] h2, [data-bs-theme="light"] h3, [data-bs-theme="light"] h4, [data-bs-theme="light"] h5, [data-bs-theme="light"] h6 {
    color: #0f172a !important;
}

/* ─────────────────────────────────────────────
   7. Z-INDEX ORDER — ترتيب الطبقات
   ───────────────────────────────────────────── */
.modal,
.modal-backdrop {
    z-index: 1055 !important;
}

.modal-dialog {
    z-index: 1056 !important;
}

.tooltip,
[data-bs-toggle="tooltip"] + .tooltip {
    z-index: 1070 !important;
}

.dropdown-menu {
    z-index: 1050 !important;
}

[class*="sidebar"] {
    z-index: 1000 !important;
}

.glass-header,
header.glass-header,
.navbar,
nav.navbar {
    z-index: 1030 !important;
}

#brain-chat-window {
    z-index: 1080 !important;
}

/* ─────────────────────────────────────────────
   8. DASHBOARD LAYOUT — هيكل لوحة التحكم (Header + Sidebar، بدون Footer)
   ───────────────────────────────────────────── */

/* إخفاء الفوتر داخل صفحات الداش بورد */
body.dashboard-page footer,
body.admin-page footer,
.dashboard-layout footer {
    display: none !important;
}

/* ─────────────────────────────────────────────
   9. RESPONSIVE — تجاوب كامل
   ───────────────────────────────────────────── */

/* جداول → Cards على الموبايل */
@media (max-width: 767.98px) {

    /* منع التمرير الأفقي */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* تحويل صفوف الجدول إلى بطاقات */
    .table-to-cards thead {
        display: none !important;
    }

    .table-to-cards tbody tr {
        display: block !important;
        background: var(--mj-card, #121A2B) !important;
        border-radius: 10px !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .table-to-cards tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 0 !important;
        border: none !important;
        font-size: 0.85rem !important;
    }

    .table-to-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--mj-text-muted, #94a3b8);
        font-size: 0.78rem;
        flex-shrink: 0;
        margin-left: 8px;
    }

    /* تصغير العناوين */
    h1, .h1 { font-size: 1.4rem !important; }
    h2, .h2 { font-size: 1.2rem !important; }
    h3, .h3 { font-size: 1rem !important; }

    /* Sidebar على الموبايل — فقط إذا لم يكن مفتوحاً */
    [class*="sidebar"]:not(.show):not(.active):not(.sidebar-open) {
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
    }

    [dir="rtl"] [class*="sidebar"]:not(.show):not(.active):not(.sidebar-open) {
        transform: translateX(-100%) !important;
    }

    [class*="sidebar"].show,
    [class*="sidebar"].active,
    [class*="sidebar"].sidebar-open {
        transform: translateX(0) !important;
    }

    /* Buttons full width على الموبايل */
    .btn-mobile-full {
        width: 100% !important;
    }

    /* Cards padding أصغر */
    .card,
    .stat-card {
        padding: 12px !important;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .card { padding: 16px !important; }
    h1, .h1 { font-size: 1.6rem !important; }
}

/* Ultra-wide */
@media (min-width: 1600px) {
    .container { max-width: 1400px !important; }
}

/* ─────────────────────────────────────────────
   10. LANDING PAGES — صفحات الهبوط فقط
   ───────────────────────────────────────────── */

/* Footer يظهر في صفحات الهبوط */
body:not(.dashboard-page):not(.admin-page) footer {
    display: block !important;
}

/* Header ثابت في الأعلى */
.glass-header {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1030 !important;
}

/* ─────────────────────────────────────────────
   11. MODALS & OVERLAYS — نوافذ منبثقة صحيحة
   ───────────────────────────────────────────── */
.modal-content {
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.modal-header {
    padding: 16px 24px !important;
    border-radius: 10px 10px 0 0 !important;
}

.modal-body {
    padding: 24px !important;
}

.modal-footer {
    padding: 16px 24px !important;
    border-radius: 0 0 10px 10px !important;
    gap: 8px !important;
}

/* ─────────────────────────────────────────────
   12. BORDERS — حدود واضحة فوق الخلفية الداكنة
   ───────────────────────────────────────────── */
.card,
.stat-card,
.widget-card {
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html.light .card,
[data-bs-theme="light"] .card,
html.light .stat-card,
[data-bs-theme="light"] .stat-card {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ─────────────────────────────────────────────
   13. TABLES — جداول واضحة ومنضبطة
   ───────────────────────────────────────────── */
.table {
    border-radius: 10px !important;
    overflow: hidden !important;
}

.table thead th {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 12px 14px !important;
    white-space: nowrap !important;
}

.table tbody tr:last-child td {
    border-bottom: none !important;
}