/* ============================================================
   style.css - النسخة النهائية V21
   تحسين الطباعة، إزالة تحويل العملة، إصلاح عرض الأعمدة
   ============================================================ */

/* ===== متغيرات CSS — مستوحاة من هوية AAMFIX (بنفسجي-نيلي متدرج) ===== */
:root {
    /* الألوان الأساسية */
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --primary-color: #0f0f23;
    --border-color: #e2e8f0;
    --border-focus: #4f46e5;
    --accent-color: #4f46e5;
    --accent-hover: #4338ca;
    --accent-light: #eef2ff;
    --danger-color: #dc2626;
    --danger-light: #fef2f2;
    --danger-contrast: #ffffff;
    --success-color: #059669;
    --success-light: #ecfdf5;
    --success-contrast: #ffffff;
    --warning-color: #b45309;
    --warning-light: #fffbeb;
    --info-color: #0369a1;
    --info-light: #f0f9ff;
    --info-border: #3b82f6;
    --info-toast-bg: var(--accent-color);
    --input-bg: #f1f5f9;
    --bg-muted: #f1f5f9;
    --bg-muted-hover: #e2e8f0;
    --bg-nav: rgba(255, 255, 255, 0.85);
    --primary-gradient: linear-gradient(135deg, #4f46e5, #7c3aed);

    /* الظلال (بتلوين خفيف من لون العلامة، بدل الأسود الخام) */
    --shadow-sm: 0 1px 3px rgba(79,70,229,0.06);
    --shadow-md: 0 6px 20px rgba(79,70,229,0.10);
    --shadow-lg: 0 14px 40px rgba(79,70,229,0.16);

    /* الحواف */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* الخطوط */
    /* خط Windows 11 نفسه (Segoe UI Variable) أولاً — يدعم كل اللغات الثمان المتوفرة (عربي، لاتيني، كيريلي) أصلاً كخط نظام واحد موحّد */
    --font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 0.95rem;
    --font-size-md: 1.05rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 1.8rem;
    --font-size-3xl: 2.2rem;

    /* المسافات */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;

    /* الأبعاد */
    --header-height: 56px;
    --action-bar-height: 64px;
    --container-max: 1100px;
    --container-padding: 16px;

    /* الانتقالات */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-family);
    background: var(--bg-color);
    background-image: radial-gradient(circle at top, rgba(37,99,235,0.05), transparent 55%);
    background-attachment: fixed;
    color: var(--text-primary);
    padding-bottom: calc(var(--action-bar-height) + var(--space-xl));
    font-size: var(--font-size-base);
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== شريط التنقل ===== */
.navbar {
    background: var(--bg-nav);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--text-primary);
    padding: var(--space-sm) 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-color);
    min-height: var(--header-height);
    display: flex;
    flex-direction: column;
    transition: background var(--transition-base);
}

.nav-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    flex-wrap: wrap;
    row-gap: var(--space-sm);
}

.nav-brand {
    font-size: var(--font-size-md);
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1.2;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-lang {
    background: var(--bg-muted);
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font-size-xs);
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

.nav-bell-wrapper {
    position: relative;
}

.nav-bell {
    position: relative;
}

.nav-bell-badge {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    background: var(--danger-color);
    color: var(--danger-contrast);
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: 320px;
    max-width: 90vw;
    max-height: 420px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notif-dropdown[hidden] {
    display: none;
}

.notif-dropdown-header {
    padding: var(--space-md);
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.notif-dropdown-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

.notif-item {
    display: block;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-primary);
    transition: background var(--transition-fast);
}

.notif-item:hover {
    background: var(--bg-muted);
}

.notif-item-unread {
    background: var(--accent-light);
}

.notif-item-subject {
    font-weight: 700;
    font-size: var(--font-size-sm);
    margin-bottom: 2px;
}

.notif-item-snippet {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.notif-item-meta {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.notif-empty {
    padding: var(--space-lg);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.notif-dropdown-footer {
    display: block;
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
    border-top: 1px solid var(--border-color);
}

.notif-dropdown-footer:hover {
    background: var(--bg-muted);
}

@media (max-width: 480px) {
    .notif-dropdown {
        width: calc(100vw - 24px);
        inset-inline-end: -8px;
    }
}

.nav-lang-wrapper {
    position: relative;
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    min-width: 160px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    padding: var(--space-xs) 0;
}

.lang-dropdown[hidden] {
    display: none;
}

.lang-dropdown-item {
    display: block;
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: background var(--transition-fast);
    white-space: nowrap;
}

.lang-dropdown-item:hover {
    background: var(--bg-muted);
}

.lang-dropdown-item.active {
    color: var(--accent-color);
    background: var(--accent-light);
}

@media (max-width: 480px) {
    .lang-dropdown {
        inset-inline-start: -8px;
    }
}

.btn-lang:hover,
.btn-lang:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: var(--accent-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.15);
}

/* ===== الحاوية الرئيسية ===== */
.container {
    max-width: var(--container-max);
    margin: var(--space-xl) auto;
    padding: 0 var(--container-padding);
}

.report-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
    padding: var(--space-sm) 0;
}

.report-header h1 {
    font-size: var(--font-size-2xl);
    color: var(--primary-color);
    margin-bottom: var(--space-xs);
    font-weight: 800;
    letter-spacing: -0.5px;
}

.report-date {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* ===== البطاقات ===== */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.message-card {
    margin-bottom: var(--space-sm);
    background: var(--bg-muted);
}

.announcement-card {
    border-inline-start: 4px solid var(--accent-color);
    background: var(--accent-light);
}

.message-meta {
    margin-bottom: var(--space-xs);
}

.message-date {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.message-from {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-xs);
}

.attachments-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.attachments-drop-zone.drag-over {
    border-color: var(--accent-color);
    background: var(--accent-light);
}

.attachments-drop-zone span {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-sm);
}

.attachment-thumb {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.shop-logo-preview {
    max-width: 200px;
    max-height: 100px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    /* خلفية بيضاء ثابتة عمداً (وليست var(--card-bg)) بصرف النظر عن الوضع الليلي: أغلب شعارات
       المحلات مصممة بافتراض خلفية فاتحة (نص/خطوط داكنة)، فخلفية داكنة قد تُخفي الشعار بدل إظهاره -
       الحد الواضح هنا يكفي لتمييزها كإطار معاينة مقصود وليس خطأ في تطبيق الوضع الليلي */
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    background: #ffffff;
    padding: var(--space-sm);
}

.print-shop-logo {
    display: block;
    max-width: 220px;
    max-height: 90px;
    object-fit: contain;
    margin: 0 auto 8px;
}

.card h2 {
    font-size: var(--font-size-md);
    color: var(--primary-color);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--accent-light);
    font-weight: 700;
}

/* ===== النماذج والحقول ===== */
.form-grid {
    display: grid;
    gap: var(--space-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-group label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.form-control {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    background-color: var(--input-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    min-height: 44px;
    -webkit-appearance: none;
    appearance: none;
}

.form-control:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 4px var(--accent-light);
}

.form-control:disabled {
    background-color: var(--bg-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

.form-control::placeholder {
    color: var(--text-muted);
}

select.form-control {
    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='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    padding-right: var(--space-2xl);
}

textarea.form-control {
    min-height: 80px;
    resize: vertical;
}

/* ===== الجداول - تصميم سطح المكتب ===== */
.table-responsive {
    overflow: visible !important;
    margin: 0;
    padding: 0;
}

.maintenance-table {
    width: 100%;
    border-collapse: collapse;
}

.maintenance-table th {
    background-color: var(--bg-muted);
    color: var(--text-primary);
    font-weight: 700;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    text-align: left;
}

.maintenance-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.category-row {
    background-color: var(--bg-muted);
    font-weight: 700;
    color: var(--text-primary);
}

.category-row td {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
}

/* ===== عناصر الأسعار ===== */
/* إزالة أزرار spin */
.financial-input[type="number"] {
    -moz-appearance: textfield;
}

.financial-input[type="number"]::-webkit-outer-spin-button,
.financial-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.currency-badge {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
    min-width: 30px;
}

.checkbox-cell {
    text-align: center;
    width: 40px;
}

.custom-cb {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-color);
}

.service-name-cell {
    position: relative;
}

.service-text {
    font-weight: 500;
}

/* ===== حالة الصفوف ===== */
.row-disabled {
    opacity: 0.6;
}

.row-disabled .service-text {
    color: var(--text-muted);
}

.service-row:not(.row-disabled) {
    background-color: var(--input-bg);
    border-inline-start: 3px solid var(--accent-color);
    transition: background-color var(--transition-fast);
}

.service-row:not(.row-disabled):hover {
    background-color: var(--accent-light);
}

/* ===== الخلاصة المالية ===== */
.financial-summary-grid {
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.financial-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    box-shadow: var(--shadow-sm);
    min-height: 80px;
}

.financial-card label {
    font-weight: 700;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
}

.financial-card > div,
.financial-card > input.financial-input {
    font-size: var(--font-size-xl);
    font-weight: 800;
    text-align: center;
    color: var(--text-primary);
}

.financial-input {
    font-size: var(--font-size-md);
    font-weight: 700;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-color);
    background-color: var(--input-bg);
    text-align: center;
    min-height: 44px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.financial-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 4px var(--accent-light);
}

.total-highlight {
    background: var(--primary-gradient);
    border: 2px solid transparent;
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(79, 70, 229, 0.4);
    position: relative;
    overflow: hidden;
}

.total-highlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.total-highlight label {
    color: #ffffff !important;
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.95;
}

.total-display-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-sm);
}

/* :not(.currency-badge) بدل :first-child لتغطية كل مبالغ العملات المتعددة (vehicle-history-print.php
   يعرض عملة منفصلة لكل نوع كـ"مبلغ + رمز عملة" داخل نفس الـ span الواحد لكل عملة) بنفس الحجم والوضوح،
   بدل تكبير أول عملة فقط وترك الباقي بحجم/لون غير مقروء فوق خلفية .total-highlight الملوّنة */
#grandTotalText,
.total-display-wrapper > span:not(.currency-badge) {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* .total-highlight #grandTotalText (بدل #grandTotalText وحدها) - يجعل الاعتماد على وجوده دوماً
   داخل بطاقة .total-highlight صريحاً بدل الاعتماد الضمني على ترتيب new-report.php الحالي فقط،
   فلا يظهر نص أبيض غير مقروء لو استُخدم نفس المعرّف يوماً خارج تلك البطاقة */
.total-highlight #grandTotalText,
.total-highlight .total-display-wrapper > span:not(.currency-badge) {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.total-highlight .currency-badge {
    color: #ffffff;
    font-weight: 700;
    font-size: var(--font-size-md);
}

/* ===== شريط الإجراءات السفلي ===== */
.action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-nav);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
    padding: var(--space-sm) var(--space-lg);
    box-shadow: var(--shadow-md);
    z-index: 999;
    min-height: var(--action-bar-height);
    display: flex;
    align-items: center;
}

.action-container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    gap: var(--space-sm);
    width: 100%;
}

/* التمدد للتساوي على الجوال فقط (عدد أزرار ثابت وصغير في شريط واحد لا يلتف فيبدو منطقياً أن يملأ
   العرض بالكامل) - على الشاشات الكبيرة يبقى كل زر بحجم محتواه الطبيعي (flex:0 1 auto الافتراضي)
   ومحاذاة لليمين (justify-content:flex-end أدناه)، وإلا يتضخّم كل زر بشكل غير متناسق مقارنة ببقية
   أزرار الموقع */
@media (max-width: 767px) {
    .action-container > .btn {
        flex: 1;
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    border: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
    /* حجم طبيعي حسب المحتوى افتراضياً (وليس flex:1) - flex:1 كانت تجبر كل زر داخل أي صف flex
       على التمدد للتساوي، فيتضخّم أي زر وحيد ينتقل لسطر مستقل عند flex-wrap على الشاشات الضيقة
       بينما البقية أصغر - يظهر الصف "مبعثراً" وغير متسق. التمدد الفعلي مطلوب فقط داخل شريط
       الإجراءات السفلي الثابت (.action-container أدناه) حيث عدد الأزرار ثابت ومحدود */
    flex: 0 1 auto;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.btn:active {
    transform: scale(0.96);
}

.btn-primary {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.28);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.38);
    transform: translateY(-2px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background-color: var(--bg-muted);
    color: var(--text-primary);
    border: 1.5px solid var(--border-color);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background-color: var(--card-bg);
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* حالة "مفعّل" لأزرار القوالب السريعة (وأي زر تبديل مشابه) */
.preset-btn.active {
    background: var(--success-color) !important;
    border-color: var(--success-color) !important;
    color: var(--success-contrast) !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
}

.preset-btn.active:hover {
    background: var(--success-color) !important;
    color: var(--success-contrast) !important;
}

.btn-secondary:active {
    transform: translateY(0);
}

.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ===== RTL ===== */
[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] .financial-input,
[dir="rtl"] .price-input {
    text-align: left;
    direction: ltr;
}

[dir="rtl"] .maintenance-table th,
[dir="rtl"] .maintenance-table td {
    text-align: right;
}

[dir="rtl"] .total-display-wrapper {
    direction: ltr;
}

[dir="rtl"] .form-control {
    text-align: right;
}

[dir="rtl"] .form-control[type="number"],
[dir="rtl"] select.form-control {
    text-align: left;
    direction: ltr;
}

[dir="rtl"] select.form-control {
    background-position: left var(--space-md) center;
    padding-right: var(--space-md);
    padding-left: var(--space-2xl);
}

/* ============================================================
   ===== تصميم الهواتف والموبايل =====
   ============================================================ */
@media (max-width: 767px) {
    .table-responsive {
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-overflow-scrolling: auto !important;
    }
    
    .maintenance-table thead {
        display: none;
    }

    .maintenance-table tbody {
        display: block;
        width: 100%;
    }

    .maintenance-table {
        min-width: unset !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    .maintenance-table tbody tr.category-row {
        display: block;
        background: var(--bg-muted);
        padding: var(--space-sm) var(--space-md);
        margin-top: var(--space-lg);
        margin-bottom: var(--space-sm);
        border-radius: var(--radius-sm);
        text-align: center;
        width: 100%;
    }

    .maintenance-table tbody tr.category-row td {
        display: block;
        padding: 0;
        font-size: var(--font-size-base);
        font-weight: 800;
        width: 100%;
        text-align: center;
    }

    /* تخطيط صف الصيانة على الجوال - قاعدة واحدة موحّدة (كانت مُعرَّفة 3 مرات متعارضة سابقاً) */
    .maintenance-table tbody tr.service-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        padding: var(--space-md);
        margin-bottom: var(--space-sm);
        box-shadow: var(--shadow-sm);
        gap: var(--space-sm);
        transition: border-color var(--transition-fast);
        width: 100%;
        max-width: 100%;
        overflow: visible;
        height: auto;
        min-height: 0;
    }

    .maintenance-table tbody tr.service-row:not(.row-disabled) {
        border-color: var(--accent-color);
        border-inline-start: 4px solid var(--accent-color);
    }

    .maintenance-table tbody tr.service-row.row-disabled {
        opacity: 0.6;
        border-color: var(--border-color);
    }

    .maintenance-table tbody tr.service-row td {
        display: flex;
        padding: var(--space-xs) 0;
        width: 100% !important;
        border: none;
        align-items: center;
        flex-wrap: wrap;
    }

    .maintenance-table tbody tr.service-row > .checkbox-cell {
        display: flex;
        width: auto !important;
        justify-content: flex-start;
        gap: var(--space-sm);
        padding: var(--space-xs) 0;
        order: 1;
        flex: 0 0 auto;
        box-sizing: border-box;
    }

    .maintenance-table tbody tr.service-row .checkbox-cell .custom-cb {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .maintenance-table tbody tr.service-row > .service-name-cell {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-xs);
        padding: 0;
        order: 2;
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
        box-sizing: border-box;
    }

    .maintenance-table tbody tr.service-row > .price-cell {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        max-width: 100%;
        flex: 1 1 100%;
        box-sizing: border-box;
        height: auto;
        max-height: none;
        overflow: visible;
        order: 3;
        padding-top: var(--space-xs);
    }

    .maintenance-table tbody tr.service-row .price-cell .form-control,
    .maintenance-table tbody tr.service-row .price-cell .price-input {
        display: block;
        width: 100%;
    }

    .service-text {
        font-size: var(--font-size-base);
        font-weight: 600;
        display: inline-block;
        word-break: break-word;
        text-align: inherit;
        padding-top: 2px;
    }

    .financial-summary-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        margin-top: var(--space-lg);
    }

    .financial-card {
        padding: var(--space-md);
        min-height: 70px;
        border-radius: var(--radius-sm);
    }

    #grandTotalText {
        font-size: var(--font-size-xl);
    }

    .action-bar {
        padding: var(--space-sm) var(--space-md);
        min-height: var(--action-bar-height);
    }

    .action-container {
        gap: var(--space-sm);
    }

    .btn {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-sm);
        min-height: 40px;
    }

    .btn svg {
        width: 14px;
        height: 14px;
    }

    .btn span {
        font-size: var(--font-size-xs);
    }

    .card {
        padding: var(--space-md);
        margin-bottom: var(--space-md);
        border-radius: var(--radius-sm);
    }

    .card h2 {
        font-size: var(--font-size-base);
        margin-bottom: var(--space-sm);
        padding-bottom: var(--space-xs);
    }

    .container {
        padding: 0 var(--space-md);
        margin: var(--space-md) auto;
    }

    .report-header h1 {
        font-size: var(--font-size-xl);
    }

    .form-grid {
        gap: var(--space-sm);
    }

    .form-control {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-sm);
        min-height: 40px;
    }

    .form-group label {
        font-size: var(--font-size-xs);
    }
}

/* ===== شاشات صغيرة جداً ===== */
@media (max-width: 380px) {
    :root {
        --container-padding: 10px;
        --action-bar-height: 58px;
        --header-height: 50px;
    }

    .container {
        padding: 0 var(--container-padding);
        margin: var(--space-sm) auto;
    }

    .card {
        padding: var(--space-sm) var(--space-md);
        margin-bottom: var(--space-sm);
        border-radius: var(--radius-xs);
    }

    .card h2 {
        font-size: var(--font-size-sm);
        margin-bottom: var(--space-sm);
    }

    .maintenance-table tbody tr.service-row {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
        border-radius: var(--radius-xs);
    }

    .service-text {
        font-size: var(--font-size-sm);
    }

    .btn {
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--font-size-xs);
        min-height: 36px;
        border-radius: var(--radius-xs);
    }

    .btn svg {
        width: 12px;
        height: 12px;
    }

    #grandTotalText {
        font-size: var(--font-size-lg);
    }

    .financial-card {
        padding: var(--space-sm) var(--space-md);
        min-height: 56px;
        border-radius: var(--radius-xs);
    }

    .financial-card label {
        font-size: var(--font-size-xs);
    }

    .financial-input {
        font-size: var(--font-size-sm);
        padding: var(--space-xs) var(--space-sm);
        min-height: 34px;
    }

    .report-header h1 {
        font-size: var(--font-size-lg);
    }

    .report-date {
        font-size: var(--font-size-xs);
    }

    .navbar {
        padding: 0 var(--space-md);
        min-height: var(--header-height);
    }

    .nav-brand {
        font-size: var(--font-size-sm);
    }

    .btn-lang {
        font-size: var(--font-size-xs);
        padding: var(--space-xs) var(--space-sm);
    }

    .form-grid {
        gap: var(--space-sm);
    }

    .form-control {
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--font-size-sm);
        min-height: 36px;
    }

    .form-group label {
        font-size: var(--font-size-xs);
    }
}

/* ===== تصميم سطح المكتب ===== */
@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-2xl);
        margin: var(--space-3xl) auto;
    }

    .report-header h1 {
        font-size: var(--font-size-3xl);
    }

    .form-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--space-xl);
    }

    .financial-summary-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--space-xl);
        margin-top: var(--space-3xl);
    }

    .financial-card {
        padding: var(--space-2xl);
        min-height: 120px;
    }

    .card {
        padding: var(--space-2xl);
        margin-bottom: var(--space-2xl);
    }

    .card h2 {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-xl);
        padding-bottom: var(--space-md);
    }

    .action-container {
        justify-content: flex-end;
    }

    .btn {
        padding: var(--space-md) var(--space-2xl);
        font-size: var(--font-size-base);
        flex: 0 1 auto;
        min-height: auto;
    }

    .navbar {
        padding: 0 var(--space-2xl);
        height: 68px;
        min-height: 68px;
    }

    .nav-brand {
        font-size: var(--font-size-lg);
    }

    .btn-lang {
        font-size: var(--font-size-sm);
        padding: var(--space-xs) var(--space-lg);
        min-height: 36px;
    }

    .maintenance-table tbody tr.service-row {
        display: table-row !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        padding: 0 !important;
        gap: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .maintenance-table tbody tr.service-row td {
        display: table-cell !important;
        padding: var(--space-sm) var(--space-md) !important;
        border-bottom: 1px solid var(--border-color) !important;
        flex: none !important;
        width: auto !important;
    }

    .service-name-cell {
        display: table-cell !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .service-text {
        display: inline-block !important;
    }

    /* border-inline-start (بدل border-right المقتصر على RTL سابقاً) يعيد شريط التمييز اللوني لكل
       اللغات بالتساوي على سطح المكتب، بدل اقتصاره على العربية فقط بينما بقية اللغات بلا أي حد مميّز */
    .maintenance-table tbody tr.service-row:not(.row-disabled) {
        border-inline-start: 3px solid var(--accent-color) !important;
    }
}

/* ===== شاشات كبيرة ===== */
@media (min-width: 1200px) {
    .container {
        padding: 0 40px;
    }

    .report-header h1 {
        font-size: var(--font-size-3xl);
    }
}

/* ===== وضع اللمس ===== */
@media (hover: none) and (pointer: coarse) {
    .btn:hover {
        transform: none;
    }
    
    .btn:active {
        transform: scale(0.96);
    }
    
    .custom-cb {
        width: 22px;
        height: 22px;
    }
    
    .form-control,
    .price-input,
    .financial-input {
        font-size: 16px;
        min-height: 44px;
    }
}

/* ============================================================
   ===== الطباعة - تنسيق مثالي وإصلاح تداخل العناوين =====
   ============================================================ */
@media print {
    /* فرض متغيرات الألوان الفاتحة صراحة بصرف النظر عن data-theme="dark" على <html> - بلا هذا،
       أي عنصر يستخدم var(--text-muted)/var(--border-color)/var(--accent-color) إلخ في لونه الخاص
       يستمر بعرض قيم الوضع الليلي الفاتحة/الزاهية أثناء الطباعة الفعلية (Ctrl+P أو زر 🖨️)، رغم أن
       body نفسها كانت تُجبَر بالفعل على أبيض/أسود. !important إجبارية هنا لأن محدِّد [data-theme="dark"]
       أعلى تخصيصاً (specificity) من :root فيتجاوزها بلا !important. نفس القيم المستخدمة أصلاً في
       #printableArea.pdf-print-mode أدناه (مسار تصدير PDF المنفصل عبر html2canvas) لتطابق النتيجتين */
    :root {
        --bg-color: #ffffff !important;
        --card-bg: #ffffff !important;
        --text-primary: #0f172a !important;
        --text-secondary: #334155 !important;
        --text-muted: #64748b !important;
        /* تستخدمها .report-header h1 (تقرير الصيانة) و.card h2 (بيانات العميل والمركبة، إصلاحات
           وصيانات إضافية، الصيانة القادمة) - بلا هذا تبقى بقيمتها الفاتحة في الوضع الليلي فتظهر
           شبه غير مرئية فوق الخلفية البيضاء المفروضة أعلاه، بنفس خلل مسار PDF الذي أُصلح سابقاً */
        --primary-color: #0f172a !important;
        --border-color: #e2e8f0 !important;
        --accent-color: #4f46e5 !important;
        --accent-hover: #4338ca !important;
        --accent-light: #eef2ff !important;
        --danger-color: #dc2626 !important;
        --danger-light: #fef2f2 !important;
        --success-color: #059669 !important;
        --success-light: #ecfdf5 !important;
        --warning-color: #b45309 !important;
        --warning-light: #fffbeb !important;
        --info-color: #0369a1 !important;
        --info-light: #f0f9ff !important;
        --input-bg: #f1f5f9 !important;
        --bg-muted: #f1f5f9 !important;
        --bg-muted-hover: #e2e8f0 !important;
    }

    *,
    *::before,
    *::after {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
        padding-bottom: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        font-size: 12px !important;
    }

    .navbar,
    .subnav,
    .footer,
    .action-bar,
    .flash-message,
    .alert-banner,
    .btn-lang,
    .btn {
        display: none !important;
    }

    .maintenance-table tbody tr.row-disabled {
        display: none !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 15px !important;
    }

    .card,
    .financial-card {
        border: none !important;
        box-shadow: none !important;
        padding: 8px 0 !important;
        margin-bottom: 6px !important;
        page-break-inside: avoid !important;
    }

    .card h2 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        padding-bottom: 4px !important;
        border-bottom: 1px solid #ccc !important;
    }

    .form-control,
    .financial-input {
        border: none !important;
        border-bottom: 1px solid #000 !important;
        background: transparent !important;
        color: #000 !important;
        font-size: 12px !important;
        min-height: auto !important;
        padding: 2px 4px !important;
    }

    .form-grid {
        /* تُفرض صراحة (بدل الاعتماد على قاعدة min-width:768px الشاشية) لأن محرك طباعة بعض المتصفحات
           يحسب عرض الصفحة المطبوعة أضيق من ذلك، فيسقط الشبكة لعمود واحد بدل الأعمدة المتعددة
           الظاهرة في نسخة PDF (المُلتقَطة فعلياً بعرض الشاشة الحالي) - هذا يوحّد شكل القسمين */
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
        gap: 6px !important;
    }

    .form-group label {
        font-size: 11px !important;
        font-weight: 600 !important;
    }

    .report-header {
        margin-bottom: 10px !important;
        padding: 0 !important;
    }

    .report-header h1 {
        font-size: 18px !important;
        margin-bottom: 2px !important;
    }

    .report-date {
        font-size: 12px !important;
    }

    /* ===== إعدادات الجدول ===== */
    .maintenance-table {
        width: 100% !important;
        min-width: 100% !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
        font-size: 11px !important;
    }

    .maintenance-table thead {
        display: table-header-group !important;
    }

    /* ===== إصلاح تداخل العناوين وضبط عرض الأعمدة ===== */
    .maintenance-table th {
        background: #f3f4f6 !important;
        color: #000 !important;
        border-bottom: 2px solid #000 !important;
        padding: 6px 8px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        text-align: center !important;
        line-height: 1.3 !important;
        min-height: 30px !important;
        vertical-align: middle !important;
    }

    /* تحديد عرض الأعمدة - جدول التقرير المطبوع عمودان فقط (اسم الخدمة والسعر) */
    .maintenance-table th:nth-child(1),
    .maintenance-table td:nth-child(1) {
        width: 70% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .maintenance-table th:nth-child(2),
    .maintenance-table td:nth-child(2) {
        width: 30% !important;
        min-width: 90px !important;
        max-width: none !important;
    }

    /* ===== إعادة تعيين صفوف الجدول للطباعة ===== */
    .maintenance-table tbody tr {
        display: table-row !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        border-radius: 0 !important;
    }

    /* السعر (العمود الثاني) يُستثنى من قاعدة المحاذاة العامة أدناه ليبقى دائماً متوسطاً
       تحت عنوانه بلا أي تعارض في الخصوصية بين هذه القاعدة وقاعدة الاتجاه RTL */
    .maintenance-table tbody tr td:not(:nth-child(2)) {
        display: table-cell !important;
        border-bottom: 1px solid #ddd !important;
        color: #000 !important;
        padding: 5px 8px !important;
        vertical-align: middle !important;
        flex: none !important;
        width: auto !important;
        font-size: 11px !important;
        text-align: left !important;
    }

    [dir="rtl"] .maintenance-table tbody tr td:not(:nth-child(2)) {
        text-align: right !important;
    }

    .maintenance-table tbody tr td:nth-child(2) {
        display: table-cell !important;
        border-bottom: 1px solid #ddd !important;
        color: #000 !important;
        padding: 5px 8px !important;
        vertical-align: middle !important;
        flex: none !important;
        font-size: 11px !important;
        text-align: center !important;
    }

    .category-row td {
        background: #eaeaea !important;
        font-weight: bold !important;
        text-align: center !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    /* ===== محاذاة الخلايا ===== */
    .maintenance-table .checkbox-cell {
        text-align: center !important;
    }

    .maintenance-table .service-name-cell {
        text-align: left !important;
    }

    [dir="rtl"] .maintenance-table .service-name-cell {
        text-align: right !important;
    }

    .service-text {
        display: inline-block !important;
        font-size: 11px !important;
    }

    .custom-cb {
        display: inline-block !important;
        width: 14px !important;
        height: 14px !important;
        accent-color: #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        margin: 0 !important;
    }

    /* ===== الخلاصة المالية ===== */
    .financial-summary-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    .financial-card {
        flex: 1 1 30% !important;
        min-width: 120px !important;
        padding: 8px 12px !important;
        min-height: auto !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
    }

    .financial-card label {
        font-size: 10px !important;
        margin-bottom: 2px !important;
        font-weight: 600 !important;
    }

    .financial-input {
        font-size: 12px !important;
        padding: 2px 6px !important;
        min-height: auto !important;
        text-align: center !important;
        font-weight: 600 !important;
    }

    .total-highlight {
        background: #f3f4f6 !important;
        color: #000 !important;
        border: 2px solid #000 !important;
    }

    .total-highlight label,
    #grandTotalText,
    .total-highlight .total-display-wrapper > span:not(.currency-badge),
    .total-highlight .currency-badge {
        color: #000 !important;
    }

    #grandTotalText,
    .total-display-wrapper > span:not(.currency-badge) {
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    /* ===== منع تكسر الكلمات ===== */
    .service-text {
        word-break: break-word !important;
        hyphens: auto !important;
    }

    /* ===== إعدادات الصفحة ===== */
    @page {
        margin: 10mm 8mm !important;
    }

    /* ===== رأس الطباعة ===== */
    .print-header {
        display: block !important;
        text-align: center;
        margin-bottom: 20px;
        border-bottom: 2px solid #000;
        padding-bottom: 10px;
    }
    .print-header h1 {
        font-size: 22px !important;
        font-weight: bold;
        margin-bottom: 4px;
    }
    .print-shop-logo {
        max-width: 180px !important;
        max-height: 70px !important;
        margin: 0 auto 6px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .print-meta {
        display: flex !important;
        justify-content: space-between;
        font-size: 12px;
        font-weight: normal;
    }
    .print-meta span {
        display: inline-block;
    }
    .print-tech-info {
        display: flex !important;
        justify-content: center;
        gap: 12px;
        font-size: 12px;
        margin-top: 6px;
        color: #333;
    }

}

/* ============================================================
   ملاحظة: كانت هذه القواعد سابقاً تحت `@media print and (max-width: 767px)`،
   وهو شرط لا يتحقق أبداً في الطباعة الفعلية (عرض صفحة الورق القياسية A4/Letter
   دائماً أكبر من 767px بصرف النظر عن نوع الجهاز الذي بدأ الطباعة)، فكانت هذه
   التخصيصات معطّلة فعلياً دون أن يظهر أي خطأ. نُقلت هنا لتُطبَّق فعلياً أثناء
   التقاط PDF من شاشة جوال ضيقة (حيث تبقى أبعاد العنصر الملتقطة بعرض الشاشة
   الفعلي وليس عرض الورقة، فتحتاج فعلاً لخط أصغر وتباعد أضيق ليتناسب المحتوى)
   ============================================================ */
@media (max-width: 767px) {
    #printableArea.pdf-print-mode {
        font-size: 10px !important;
        padding: 10px !important;
    }

    #printableArea.pdf-print-mode .card {
        padding: 4px 0 !important;
        margin-bottom: 3px !important;
    }

    #printableArea.pdf-print-mode .card h2 {
        font-size: 11px !important;
        margin-bottom: 3px !important;
        padding-bottom: 2px !important;
    }

    #printableArea.pdf-print-mode .report-header h1 {
        font-size: 14px !important;
    }

    #printableArea.pdf-print-mode .report-date {
        font-size: 9px !important;
    }

    #printableArea.pdf-print-mode .form-grid {
        gap: 3px !important;
    }

    #printableArea.pdf-print-mode .form-group label {
        font-size: 8px !important;
    }

    #printableArea.pdf-print-mode .form-control,
    #printableArea.pdf-print-mode .financial-input {
        font-size: 9px !important;
        padding: 1px 3px !important;
        border-bottom: 1px solid #000 !important;
    }

    #printableArea.pdf-print-mode .maintenance-table {
        font-size: 8px !important;
    }

    #printableArea.pdf-print-mode .maintenance-table th {
        font-size: 7px !important;
        padding: 3px 4px !important;
        line-height: 1.2 !important;
        min-height: 20px !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    #printableArea.pdf-print-mode .maintenance-table tbody tr td {
        font-size: 8px !important;
        padding: 3px 4px !important;
    }

    #printableArea.pdf-print-mode .service-text {
        font-size: 8px !important;
    }

    #printableArea.pdf-print-mode .category-row td {
        font-size: 9px !important;
        padding: 3px 6px !important;
    }

    #printableArea.pdf-print-mode .financial-card {
        padding: 4px 6px !important;
        min-width: 50px !important;
        flex: 1 1 45% !important;
    }

    #printableArea.pdf-print-mode .financial-card label {
        font-size: 7px !important;
    }

    #printableArea.pdf-print-mode .financial-input {
        font-size: 8px !important;
        padding: 1px 3px !important;
    }

    #printableArea.pdf-print-mode .custom-cb {
        width: 10px !important;
        height: 10px !important;
        transform: scale(0.7) !important;
    }

    #printableArea.pdf-print-mode .total-display-wrapper .currency-badge {
        font-size: 9px !important;
    }

    /* تصغير خط الإجمالي/الخصم المُكبَّر (font-size-xl/3xl) ليلائم بطاقة financial-card المضغوطة هنا
       (padding:4px 6px; min-width:50px) - بلا هذا التصغير يفيض الرقم الكبير خارج البطاقة الصغيرة */
    #printableArea.pdf-print-mode .financial-card > div {
        font-size: 9px !important;
    }

    #printableArea.pdf-print-mode .total-display-wrapper > span:not(.currency-badge) {
        font-size: 11px !important;
    }
}

/* ===== الإشعارات ===== */
#notification {
    display: none;
    position: fixed;
    bottom: calc(var(--action-bar-height) + var(--space-md));
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-sm);
    z-index: 9999;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    max-width: 92%;
    text-align: center;
    font-size: var(--font-size-sm);
    animation: slideUp 0.3s ease;
}

@media (max-width: 767px) {
    #notification {
        bottom: calc(var(--action-bar-height) + var(--space-md));
        font-size: var(--font-size-sm);
        padding: var(--space-sm) var(--space-lg);
        max-width: 95%;
        border-radius: var(--radius-sm);
    }
}

@media (max-width: 380px) {
    #notification {
        font-size: var(--font-size-xs);
        padding: var(--space-xs) var(--space-md);
        bottom: calc(var(--action-bar-height) + var(--space-sm));
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ===== حركات دخول تدريجية لبطاقات المركبات (تُعطي إحساساً حيوياً بالصفحة دون مبالغة) ===== */
@keyframes cardRise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vehicle-card-list .vehicle-card:nth-child(1) { animation-delay: 0.02s; }
.vehicle-card-list .vehicle-card:nth-child(2) { animation-delay: 0.06s; }
.vehicle-card-list .vehicle-card:nth-child(3) { animation-delay: 0.10s; }
.vehicle-card-list .vehicle-card:nth-child(4) { animation-delay: 0.14s; }
.vehicle-card-list .vehicle-card:nth-child(5) { animation-delay: 0.18s; }
.vehicle-card-list .vehicle-card:nth-child(n+6) { animation-delay: 0.20s; }

/* ===== نبضة تنبيه لطيفة لشارات "صيانة مستحقة الآن" تلفت الانتباه دون إزعاج ===== */
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
    50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}

.badge-pulse {
    animation: badgePulse 2.2s ease-in-out infinite;
}

#notification.error {
    background-color: var(--danger-color);
    color: var(--danger-contrast);
}

#notification.success {
    background-color: var(--success-color);
    color: var(--success-contrast);
}

#notification.info {
    background-color: var(--info-toast-bg);
    color: #ffffff;
}

/* ===== تحسينات إضافية ===== */
.hidden {
    display: none !important;
}

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

::-webkit-scrollbar-track {
    background: var(--bg-muted);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.currency-badge,
.btn span {
    user-select: none;
}

.custom-cb {
    transition: transform 0.15s ease;
}

.custom-cb:active {
    transform: scale(0.9);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   أنماط الطباعة لتوليد PDF (html2canvas لا يُطبّق قواعد @media print إطلاقاً،
   فيلتقط العنصر كما يظهر فعلياً على الشاشة — بما في ذلك الوضع الليلي والتخطيط
   الضيق الخاص بالجوال — لذا يجب فرض مظهر فاتح ونظيف صراحةً هنا)
   ============================================================ */
#printableArea.pdf-print-mode {
    /* فرض المتغيرات الفاتحة محلياً بصرف النظر عن data-theme="dark" على <html> */
    --bg-color: #ffffff;
    --card-bg: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    /* --primary-color غير مُضافة سابقاً هنا: في الوضع الليلي قيمتها فاتحة (لتُقرأ فوق خلفية داكنة)،
       فتُصبح شبه غير مرئية فوق الخلفية البيضاء المفروضة هنا (نص فاتح على أبيض) - تستخدمها
       .report-header h1 و.card h2 */
    --primary-color: #0f172a;
    --border-color: #d1d5db;
    --input-bg: #ffffff;
    --bg-muted: #f3f4f6;
    --bg-muted-hover: #e5e7eb;

    background: #ffffff !important;
    color: #0f172a !important;
    padding: 20px !important;
    margin: 0 !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
}

#printableArea.pdf-print-mode .navbar,
#printableArea.pdf-print-mode .action-bar,
#printableArea.pdf-print-mode .btn-lang,
#printableArea.pdf-print-mode .btn {
    display: none !important;
}

#printableArea.pdf-print-mode .card,
#printableArea.pdf-print-mode .financial-card {
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
    box-shadow: none !important;
    page-break-inside: avoid !important;
}

/* بطاقة الإجمالي (.total-highlight) لها نص أبيض مقصود فوق خلفيتها المتدرجة الأرجوانية على الشاشة،
   لكن القاعدة أعلاه تُجبر خلفيتها هنا على الأبيض أيضاً - بلا هذا التصحيح يبقى النص أبيض على أبيض
   (نفس الخلل الذي كان يجعل "الإجمالي الكلي النهائي" غير مرئي في ملفات PDF المُصدَّرة) */
#printableArea.pdf-print-mode .total-highlight,
#printableArea.pdf-print-mode .total-highlight label,
#printableArea.pdf-print-mode .total-highlight #grandTotalText,
#printableArea.pdf-print-mode .total-highlight .total-display-wrapper > span,
#printableArea.pdf-print-mode .total-highlight .currency-badge {
    color: #0f172a !important;
    text-shadow: none !important;
}

/* letter-spacing يكسر تشكيل/اتصال الحروف العربية عند التقاط html2canvas (يرسم كل حرف منفصلاً
   بمسافة يدوية بدل استخدام محرك تشكيل النص المتصل للمتصفح) - كان هذا الخلل موجوداً دوماً في
   ".report-header h1" (letter-spacing: -0.5px) و".total-highlight label" (letter-spacing: 0.06em)
   لكنه كان مخفياً سابقاً لأن النص كان أبيض على أبيض (غير مرئي أصلاً) قبل إصلاح الألوان أعلاه */
#printableArea.pdf-print-mode .report-header h1,
#printableArea.pdf-print-mode .total-highlight label {
    letter-spacing: normal !important;
}

/* على الجوال، خانة الجدول تُثبَّت بعرض أدنى (min-width) للسماح بتمرير أفقي عند العرض
   على الشاشة فقط؛ أثناء التقاط لقطة PDF هذا يجعل الجدول أعرض من بقية بطاقات الصفحة
   فيظهر التنسيق مفككاً، لذا يُعطَّل هنا ليأخذ الجدول عرض حاويته بالكامل مثل الطباعة الفعلية */
#printableArea.pdf-print-mode .table-responsive {
    overflow-x: visible !important;
}

#printableArea.pdf-print-mode .maintenance-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
}

#printableArea.pdf-print-mode .maintenance-table th,
#printableArea.pdf-print-mode .maintenance-table td {
    background: transparent !important;
    color: #0f172a !important;
    word-break: break-word !important;
}

#printableArea.pdf-print-mode .maintenance-table th:nth-child(2),
#printableArea.pdf-print-mode .maintenance-table td:nth-child(2) {
    width: 28% !important;
    text-align: center !important;
}

#printableArea.pdf-print-mode .category-row td {
    background: #f3f4f6 !important;
}

/* تطبيق أنماط الطباعة الأخرى من @media print */
#printableArea.pdf-print-mode .print-header {
    display: block !important;
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
}

#printableArea.pdf-print-mode .print-meta {
    display: flex !important;
    justify-content: space-between;
}

/* ============================================================
   الوضع الليلي - V22 (تحويل PHP+MySQL)
   ============================================================ */
[data-theme="dark"] {
    --bg-color: #0f172a;
    --card-bg: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    /* كانت #1e293b (كحلي داكن) - قريبة جداً من --bg-color/--card-bg في الوضع الليلي، فتصبح عناوين
       .report-header h1 و.card h2 (اللتان تستخدمان هذا المتغير) شبه غير مرئية (نص داكن على خلفية داكنة) */
    --primary-color: #f1f5f9;
    --border-color: #334155;
    --border-focus: #818cf8;
    --accent-color: #6366f1;
    --accent-hover: #818cf8;
    --accent-light: #312e81;
    --danger-color: #f87171;
    --danger-light: #450a0a;
    --danger-contrast: #450a0a;
    --success-color: #4ade80;
    --success-light: #064e3b;
    --success-contrast: #052e16;
    --warning-color: #fbbf24;
    --warning-light: #451a03;
    --info-color: #60a5fa;
    --info-light: #0c4a6e;
    /* لون أغمق من --accent-color الفاتح للوضع الليلي خصيصاً لخلفية تنبيه "معلومة" (#notification.info) -
       أبيض على --accent-color الفاتح (#6366f1) يعطي تبايناً حدياً (4.47:1)، بينما هذا اللون (نفس درجة
       التمييز في الوضع النهاري) يعطي 6.29:1 دون تغيير --accent-color نفسه المستخدم في عناصر أخرى كثيرة */
    --info-toast-bg: #4f46e5;
    --info-border: #60a5fa;
    --input-bg: #0f172a;
    --bg-muted: #1e293b;
    --bg-muted-hover: #334155;
    --bg-nav: rgba(15, 23, 42, 0.85);
    --primary-gradient: linear-gradient(135deg, #4f46e5, #7c3aed);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 6px 20px rgba(0,0,0,0.4);
    --shadow-lg: 0 14px 40px rgba(0,0,0,0.55);
}

[data-theme="dark"] body {
    background-image: radial-gradient(circle at top, rgba(99,102,241,0.10), transparent 55%);
}


/* ============================================================
   شعارات التواصل بالرأس والتذييل
   ============================================================ */

.nav-social-links {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.nav-social-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px 3px 8px;
    border-radius: var(--radius-full);
    background: var(--bg-muted);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

[dir="rtl"] .nav-social-links a {
    padding: 3px 8px 3px 12px;
}

.nav-social-links a:hover {
    color: var(--accent-color);
    background: var(--accent-light);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.nav-social-icon {
    flex-shrink: 0;
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.subnav {
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
    display: flex;
    /* توسيط افتراضي (يُلغى لـ flex-start على الجوال أدناه، حيث القائمة قد تفيض عن العرض وتحتاج
       تمريراً أفقياً من البداية - التوسيط مع overflow يجعل الجزء الفائض على جهة البداية غير قابل
       للوصول بالتمرير في بعض المتصفحات) */
    justify-content: center;
    /* بلا flex-wrap عمداً: صف أفقي واحد قابل للتمرير الجانبي (overflow-x) على الشاشات الضيقة، كما
       كان مصمَّماً أصلاً - إضافة flex-wrap تجعل الأزرار الخمسة تلتف لعدة أسطر فتُطيل الرأس اللاصق
       (position:sticky) بشكل كبير وتزاحم محتوى الصفحة تحته */
    gap: var(--space-sm);
    overflow-x: auto;
    /* overflow-y: hidden صريحة إجبارية: بلا هذا، أي متصفح يجعل overflow-y المحسوب "auto" تلقائياً
       بمجرد ضبط overflow-x وحدها (قاعدة CSS معروفة) - رغم عدم وجود محتوى يفيض عمودياً فعلياً، كان
       هذا يجعل الشريط يلتقط لمسة السحب الرأسي على الجوال (تأثير ارتداد مطاطي) بدل تمرير الصفحة بشكل طبيعي */
    overflow-y: hidden;
    padding: var(--space-sm) var(--space-lg) var(--space-md);
    border-top: 1px solid var(--border-color);
    -webkit-overflow-scrolling: touch;
}

/* أزرار حبّة (pill) بدل أسلوب التبويب بخط سفلي سابقاً - يجعل التنقّل الرئيسي مقروءاً كأزرار حقيقية
   بدلاً من روابط نصية مجردة، متّسق مع بقية عناصر الواجهة */
.subnav a {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    background: var(--bg-muted);
    border: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 999px;
    transition: all var(--transition-fast);
}

.subnav a:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: var(--accent-light);
}

.subnav a.active {
    color: #ffffff;
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.footer {
    margin-top: var(--space-3xl);
    padding: var(--space-2xl) var(--space-lg);
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
}

.footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

.footer-text {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.footer-version {
    max-width: var(--container-max);
    margin: var(--space-md) auto 0;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.footer-social-links {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.footer-social-links a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: color var(--transition-fast);
}

.footer-social-links a:hover {
    color: var(--accent-color);
}

/* ============================================================
   تنبيهات ورسائل
   ============================================================ */
/* الشريط الجانبي الملوّن بدل الإطار الكامل - نفس أسلوب oemv3، لكن عبر خاصية منطقية
   (border-inline-start) تنقلب تلقائياً مع اتجاه اللغة بلا حاجة لقواعد [dir] مكرَّرة */
.flash-message,
.alert-banner {
    margin: var(--space-lg) 0;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-sm);
    border-inline-start: 4px solid transparent;
    animation: fadeSlideUp 0.3s ease;
}

.flash-success { background: var(--success-light); color: var(--success-color); border-inline-start-color: var(--success-color); }
.flash-error { background: var(--danger-light); color: var(--danger-color); border-inline-start-color: var(--danger-color); }

.alert-banner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.alert-danger { background: var(--danger-light); color: var(--danger-color); border-inline-start-color: var(--danger-color); }
.alert-warning { background: var(--warning-light); color: var(--warning-color); border-inline-start-color: var(--warning-color); }
.alert-success { background: var(--success-light); color: var(--success-color); border-inline-start-color: var(--success-color); }
.alert-info { background: var(--info-light); color: var(--info-color); border-inline-start-color: var(--info-border); }

/* ============================================================
   صفحات تسجيل الدخول/التثبيت
   ============================================================ */
.auth-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2xl);
    position: relative;
    overflow: hidden;
    animation: cardRise 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-card::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 5px;
    background: var(--primary-gradient);
}

.auth-card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    border-radius: var(--radius-full);
    background: var(--primary-gradient);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
}

.auth-card h1 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xl);
    text-align: center;
}

.auth-card .form-group {
    margin-bottom: var(--space-lg);
}

/* ============================================================
   جداول بيانات عامة (لوحة التحكم/القوائم)
   ============================================================ */
.data-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.data-table th {
    background: var(--bg-color);
    padding: var(--space-sm) var(--space-md);
    text-align: start;
    font-weight: 700;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.data-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.data-table tr:hover td {
    background: var(--bg-muted);
}

/* مجموعة أزرار مضغوطة (إيموجي + كلمة واحدة قصيرة) لصف إجراءات داخل خلية جدول - بديل عن أزرار .btn
   الكاملة بالنص الطويل ("عرض التقرير"، "طباعة التقرير"...) التي لا تتّسع بأناقة داخل عمود جدول ضيق */
.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 6px 10px;
    min-height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-muted);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.icon-btn:hover,
.icon-btn:focus-visible {
    background: var(--accent-light);
    border-color: var(--accent-color);
    transform: translateY(-1px);
}

.icon-btn:active {
    transform: scale(0.94);
}

.badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.badge-success { background: var(--success-light); color: var(--success-color); }
.badge-danger { background: var(--danger-light); color: var(--danger-color); }
.badge-warning { background: var(--warning-light); color: var(--warning-color); }
.badge-info { background: var(--info-light); color: var(--info-color); }
.badge-muted { background: var(--bg-muted); color: var(--text-muted); }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.stat-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    border-top: 3px solid var(--accent-color);
    transition: transform var(--transition-base);
}

.stat-card:hover {
    transform: translateY(-2px);
}

/* ألوان دلالية بحسب نوع البطاقة (بدل :nth-of-type الهش الذي يفترض ترتيباً ثابتاً للبطاقات) */
.stat-card-success {
    border-top-color: var(--success-color);
}

.stat-card-warning {
    border-top-color: var(--warning-color);
}

.stat-card-success .stat-value {
    color: var(--success-color);
}

.stat-card-warning .stat-value {
    color: var(--warning-color);
}

.stat-card .stat-value {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--accent-color);
}

.stat-card .stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 4px;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.vehicle-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-lg);
}

/* ===== حالة "لا توجد بيانات بعد" - أكثر ترحيباً من نص عادٍ فقط ===== */
.empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
}

.empty-state-icon {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: var(--space-lg);
    filter: grayscale(0.3);
    opacity: 0.85;
}

.empty-state p {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    max-width: 420px;
    margin-inline: auto;
}

.vehicle-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
    border: 1px solid var(--border-color);
    animation: cardRise 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.vehicle-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary-gradient);
    opacity: 0.85;
}

.vehicle-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--accent-color);
}

/* شارة رقم اللوحة على شكل لوحة مركبة حقيقية، بدل نص عادي */
.vehicle-card .vehicle-card-plate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: var(--font-size-md);
    letter-spacing: 0.06em;
    color: var(--text-primary);
    background: var(--bg-muted);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px 12px;
    font-family: 'Courier New', monospace;
}

.vehicle-card .vehicle-card-plate::before {
    content: '🚗';
    font-family: initial;
    font-size: var(--font-size-sm);
    filter: grayscale(1) opacity(0.6);
}

.fav-star-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-xl);
    line-height: 1;
    padding: var(--space-sm);
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.modal-overlay.show {
    display: flex;
}

.modal-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
    animation: fadeSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    color-scheme: light;
}
[data-theme="dark"] {
    color-scheme: dark;
}

details > summary {
    cursor: pointer;
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}
details[open] > summary.btn {
    margin-bottom: var(--space-sm);
}

.badge button {
    line-height: 1;
    font-size: var(--font-size-md);
    padding: 0 2px;
}

/* ============================================================
   لوحة التحكم - قائمة جانبية ثابتة (Sidebar)، بنفس بنية وهوية لوحة تحكم oemv3
   ============================================================ */
.admin-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xl);
    max-width: var(--container-max);
    margin: var(--space-lg) auto;
    padding: 0 var(--container-padding);
}

.admin-layout .container {
    max-width: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
}

.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-sm);
    position: sticky;
    top: var(--space-lg);
    max-height: calc(100vh - 2 * var(--space-lg));
    overflow-y: auto;
}

.sidebar-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}

.sidebar-menu li a:hover {
    background: var(--accent-light);
    color: var(--accent-color);
}

.sidebar-menu li a.active {
    background: var(--primary-gradient);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.sidebar-menu li a .icon {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-toggle {
    display: none;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.sidebar-backdrop {
    display: none;
}

@media (max-width: 900px) {
    .admin-layout {
        flex-direction: column;
    }

    .sidebar-toggle {
        display: flex;
    }

    .sidebar {
        position: fixed;
        top: 0;
        inset-inline-start: 0;
        bottom: 0;
        width: 280px;
        max-height: none;
        border-radius: 0;
        transform: translateX(-100%);
        z-index: 999;
        transition: transform var(--transition-base);
    }

    [dir="rtl"] .sidebar {
        transform: translateX(100%);
    }

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

    .sidebar-backdrop.show {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }

    .admin-layout .container {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .footer-social-links .social-label {
        display: none;
    }
    .subnav {
        justify-content: flex-start;
    }
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   خيار "خدمة مجانية" في خانة السعر
   ============================================================ */
.price-cell .free-service-label {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    flex-wrap: wrap;
}

.price-cell .free-service-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.price-cell .free-service-checkbox:disabled {
    cursor: not-allowed;
}

.service-row.free-service .price-input {
    background: var(--success-light);
    color: var(--success-color);
    font-weight: 600;
}

.service-row.free-service .free-service-label {
    color: var(--success-color);
    font-weight: 600;
}

/* ============================================================
   جدول التقرير المطبوع (report-view.php / vehicle-history-print.php)
   يجب أن يطابق تنسيق شاشات الكمبيوتر تماماً على الجوال أيضاً - لا تخطيط
   بطاقات مثل new-report.php، فيُسمح له بالتمرير الأفقي بدل الانضغاط أو القص
   عند ضيق الشاشة. القاعدة العامة لـ .maintenance-table أعلاه (تصميم new-report.php
   التفاعلي) تُخفي thead وتحوّل tbody لعرض block؛ نُلغي ذلك هنا صراحةً لإعادة
   الجدول الحقيقي القياسي بدل تركه بعرض مكسور نصف "بطاقة" ونصف "جدول"
   ============================================================ */
@media (max-width: 767px) {
    #printableArea .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #printableArea .maintenance-table {
        min-width: 480px;
        table-layout: auto !important;
    }

    #printableArea .maintenance-table thead {
        display: table-header-group !important;
    }

    #printableArea .maintenance-table tbody {
        display: table-row-group !important;
    }

    #printableArea .maintenance-table tr {
        display: table-row !important;
    }

    #printableArea .maintenance-table th,
    #printableArea .maintenance-table td {
        display: table-cell !important;
    }
}