/* =========================================================
   Workshop Management System — Design Tokens
   لوحة الألوان:
   - الخلفية:        #F7F8FA  (رمادي فاتح جداً)
   - سطح البطاقات:   #FFFFFF
   - النص الأساسي:   #1F2937  (رمادي داكن دافئ)
   - اللون الأساسي:  #245B73  (أزرق بترولي هادئ)
   - اللون الثانوي:  #C88B3F  (ذهبي دافئ - للتمييز والتنبيه)
   - النجاح:         #2E8B57  (أخضر بحري)
   - الخطر:          #C0392B  (أحمر طوبي)
   ========================================================= */

:root {
    --bg: #F7F8FA;
    --surface: #FFFFFF;
    --text: #1F2937;
    --text-muted: #6B7280;
    --border: #E5E9ED;

    --primary: #245B73;
    --primary-dark: #1B4557;
    --primary-soft: #E8F0F3;

    --accent: #C88B3F;
    --accent-soft: #FBF1E1;

    --success: #2E8B57;
    --success-soft: #E7F5EC;

    --danger: #C0392B;
    --danger-soft: #FBEAE8;

    --radius: 12px;
    --shadow: 0 1px 3px rgba(31, 41, 55, 0.06), 0 6px 20px rgba(31, 41, 55, 0.04);
}

* { box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    direction: rtl;
    text-align: right;
}

/* ================= الهيكل العام: قائمة جانبية + محتوى ================= */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--primary-dark);
    color: #fff;
    padding: 24px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0 8px 20px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.sidebar .brand i { color: var(--accent); font-size: 1.4rem; }

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    font-size: 0.95rem;
    margin-bottom: 4px;
    transition: background .15s ease, color .15s ease;
}

.sidebar-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }

.sidebar-nav a.active {
    background: var(--accent);
    color: #241503;
    font-weight: 600;
}

.sidebar-nav a i { width: 20px; text-align: center; }

.main-content {
    flex: 1;
    padding: 28px 32px;
    min-width: 0;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.topbar h4 { margin: 0; font-weight: 700; color: var(--primary-dark); }

.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: 30px;
    box-shadow: var(--shadow);
}

/* ================= بطاقات وإحصائيات ================= */

.card-surface {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-card .icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.icon-box.primary { background: var(--primary-soft); color: var(--primary); }
.icon-box.accent { background: var(--accent-soft); color: var(--accent); }
.icon-box.success { background: var(--success-soft); color: var(--success); }
.icon-box.danger { background: var(--danger-soft); color: var(--danger); }

.stat-card .value { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.stat-card .label { font-size: 0.85rem; color: var(--text-muted); }

/* ================= أزرار ================= */

.btn-brand {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn-brand:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

.btn-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: #241503;
}
.btn-accent:hover { background: #b17a33; border-color: #b17a33; color: #241503; }

/* ================= جداول ================= */

/* -----------------------------------------------------------
   إصلاح زر "تصدير Excel" (DataTables Buttons): نص الزر يظهر شفافاً
   في الحالة العادية ولا يظهر إلا عند تمرير الفأرة (hover). السبب أن
   عنصر الزر الذي تولّده المكتبة يرث لون نص غير محدد بوضوح، ولا يظهر
   إلا عندما تفرض حالة :hover لوناً صريحاً. الحل: تحديد لون النص
   والخلفية والحدود صراحة في كل الحالات بدل الاعتماد على الوراثة.
   ----------------------------------------------------------- */
.dt-buttons .btn,
.dt-buttons .dt-button {
    color: var(--primary-dark) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
}
.dt-buttons .btn:hover,
.dt-buttons .dt-button:hover {
    color: var(--primary-dark) !important;
    background: var(--primary-soft) !important;
    border-color: var(--primary) !important;
}

.table-modern thead th {
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-weight: 600;
    border: none;
    white-space: nowrap;
}

.table-modern td { vertical-align: middle; }

/* -----------------------------------------------------------
   إصلاح انزياح رأس الجدول (thead) عن صفوف البيانات (tbody)
   السبب الحقيقي: مكتبة DataTables تضيف حشوة إضافية (padding-right)
   ومساحة لأيقونات الفرز ▲▼ بافتراض أن الاتجاه LTR، فتُموضعها على
   الجانب الأيمن فعلياً. في تخطيط RTL هذا يدفع نص الرأس نحو اليسار
   بينما نص خلايا البيانات (بدون هذه الحشوة) يبقى ملاصقاً لليمين،
   فيظهر الرأس "منزاحاً" عن الصفوف. الحل: عكس الحشوة وموضع الأيقونات.
   ----------------------------------------------------------- */
table.dataTable thead th,
table.dataTable tbody td {
    text-align: right;
}

table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_asc_disabled,
table.dataTable thead > tr > th.sorting_desc_disabled {
    padding-right: 0.75rem !important;
    padding-left: 1.875rem !important; /* 30px مكان أيقونات الفرز، بعد قلب الجهة */
    background-position: left 0.5rem center, left 0.5rem center !important;
}

table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_asc_disabled:before,
table.dataTable thead > tr > th.sorting_desc_disabled:before {
    right: auto !important;
    left: 1em !important;
}

table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > th.sorting_asc_disabled:after,
table.dataTable thead > tr > th.sorting_desc_disabled:after {
    right: auto !important;
    left: 0.5em !important;
}

/* توحيد حشوة الرأس والصفوف على باقي الأعمدة غير القابلة للفرز */
table.dataTable thead th:not(.sorting):not(.sorting_asc):not(.sorting_desc) {
    padding-right: 0.75rem !important;
}

.badge-active { background: var(--success-soft); color: var(--success); padding: 5px 12px; border-radius: 20px; font-weight: 600; font-size: 0.8rem; }
.badge-inactive { background: var(--danger-soft); color: var(--danger); padding: 5px 12px; border-radius: 20px; font-weight: 600; font-size: 0.8rem; }

/* ================= صفحة الدخول ================= */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #F7F8FA 0%, #E8F0F3 100%);
}

.login-card {
    background: var(--surface);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 40px;
    width: 100%;
    max-width: 400px;
}

.login-card .brand-mark {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 16px;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(36, 91, 115, 0.12);
}

/* =========================================================
   الاستجابة لأحجام الشاشات المختلفة (هاتف / آيباد / تابلت / حاسوب)
   ========================================================= */

body.no-scroll { overflow: hidden; }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1040;
    opacity: 0;
    transition: opacity .2s ease;
}
.sidebar-overlay.open { display: block; opacity: 1; }

.btn-toggle-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--primary-dark);
    box-shadow: var(--shadow);
}

/* الشاشات المتوسطة والصغيرة: من الأجهزة اللوحية (آيباد) إلى الهواتف
   نخفي القائمة الجانبية افتراضياً ونظهرها كطبقة علوية عند الفتح */
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        right: -280px;
        width: 280px;
        height: 100vh;
        z-index: 1050;
        transition: right .25s ease;
        box-shadow: -8px 0 30px rgba(0,0,0,0.15);
    }
    .sidebar.open { right: 0; }

    .main-content { padding: 18px; }

    .topbar {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    .topbar-title {
        order: 2;
        flex: 1 1 100%;
        font-size: 1.05rem;
    }
    .btn-toggle-sidebar { order: 1; }
    .user-chip { order: 3; margin-inline-start: auto; }
}

/* آيباد / أجهزة لوحية بوضع رأسي تقريباً (768px) */
@media (max-width: 820px) {
    .stat-card { padding: 16px; }
    .stat-card .icon-box { width: 44px; height: 44px; font-size: 1.1rem; }
    .stat-card .value { font-size: 1.25rem; }
    .card-surface { padding: 16px; }
}

/* الهواتف المحمولة */
@media (max-width: 575.98px) {
    .main-content { padding: 14px; }
    .login-card { padding: 28px 22px; }

    .user-chip { padding: 6px 10px; gap: 6px; }
    .user-chip-text { display: none; } /* إخفاء اسم المستخدم على الشاشات الضيقة جداً، مع إبقاء الأيقونة وزر الخروج */

    .topbar-title { font-size: .95rem; }

    /* تكديس أزرار الإجراءات في الجداول عمودياً بدل الازدحام الأفقي */
    .table-modern td .btn { margin-bottom: 4px; }
}

/* منع تمدد الجداول العريضة خارج الشاشة على كل الأحجام الصغيرة */
.table-responsive { -webkit-overflow-scrolling: touch; }


/* =========================================================
   إعدادات الطباعة الموحّدة (كشوف الحساب وجميع صفحات الطباعة القادمة)
   نخفي كل عناصر التحكم في DataTables غير المفيدة عند الطباعة:
   طول العرض (أظهر N مدخلات)، مربع البحث، معلومات الصفحات، والتنقل
   بين الصفحات (التالي/السابق) — لا داعي لها في كشف حساب مطبوع.
   ========================================================= */
@media print {
    .no-print,
    .sidebar,
    .sidebar-overlay,
    .topbar,
    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_paginate,
    .dataTables_processing,
    .dt-buttons {
        display: none !important;
    }

    .main-content { padding: 0 !important; }
    body { background: #fff; }
}