/* استيراد خط Cairo من Google Fonts (يدعم العربية والإنجليزية) */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');

/* =====================================================================
   الهوية البصرية لمنصة ساس
   الألوان مأخوذة من الشعار. نعرّفها هنا مرة واحدة، وتستخدمها كل الصفحات.
   لتغيير لون في المنصة كلها: عدّل قيمته هنا فقط.
   ===================================================================== */
:root {
    --sas-primary: #105078;        /* كحلي الشعار: الأزرار والروابط */
    --sas-primary-rgb: 16, 80, 120;
    --sas-primary-dark: #0C3F5F;   /* عند تمرير الماوس / الضغط */
    --sas-accent: #F08800;         /* برتقالي الشعار: الإجراء الأهم فقط */
    --sas-accent-dark: #D47800;
    --sas-on-accent: #1F2933;      /* النص فوق البرتقالي: داكن وليس أبيض (للوضوح) */
    --sas-footer: #0B2E45;         /* خلفية الفوتر */
    --sas-bg: #F5F6F8;             /* خلفية الصفحات */

    /* نربط ألوان Bootstrap بألواننا، فتتغير كل عناصره تلقائياً */
    --bs-primary: var(--sas-primary);
    --bs-primary-rgb: var(--sas-primary-rgb);
    --bs-link-color: var(--sas-primary);
    --bs-link-color-rgb: var(--sas-primary-rgb);
    --bs-link-hover-color: var(--sas-primary-dark);
    --bs-link-hover-color-rgb: 12, 63, 95;
}

/* الزر الأساسي (كحلي) */
.btn-primary {
    --bs-btn-bg: var(--sas-primary);
    --bs-btn-border-color: var(--sas-primary);
    --bs-btn-hover-bg: var(--sas-primary-dark);
    --bs-btn-hover-border-color: var(--sas-primary-dark);
    --bs-btn-active-bg: var(--sas-primary-dark);
    --bs-btn-active-border-color: var(--sas-primary-dark);
    --bs-btn-disabled-bg: var(--sas-primary);
    --bs-btn-disabled-border-color: var(--sas-primary);
    --bs-btn-focus-shadow-rgb: var(--sas-primary-rgb);
}

/* الزر المحدد (إطار كحلي) - يُستخدم أيضاً في بطاقتي شاحن/ناقل */
.btn-outline-primary {
    --bs-btn-color: var(--sas-primary);
    --bs-btn-border-color: var(--sas-primary);
    --bs-btn-hover-bg: var(--sas-primary);
    --bs-btn-hover-border-color: var(--sas-primary);
    --bs-btn-active-bg: var(--sas-primary);
    --bs-btn-active-border-color: var(--sas-primary);
    --bs-btn-focus-shadow-rgb: var(--sas-primary-rgb);
}

/* زر التمييز (برتقالي) - للإجراء الأهم في الصفحة فقط، مثل "إنشاء شحنة جديدة" */
.btn-accent {
    --bs-btn-color: var(--sas-on-accent);
    --bs-btn-bg: var(--sas-accent);
    --bs-btn-border-color: var(--sas-accent);
    --bs-btn-hover-color: var(--sas-on-accent);
    --bs-btn-hover-bg: var(--sas-accent-dark);
    --bs-btn-hover-border-color: var(--sas-accent-dark);
    --bs-btn-active-color: var(--sas-on-accent);
    --bs-btn-active-bg: var(--sas-accent-dark);
    --bs-btn-active-border-color: var(--sas-accent-dark);
    --bs-btn-focus-shadow-rgb: 240, 136, 0;
    --bs-btn-disabled-color: var(--sas-on-accent);
    --bs-btn-disabled-bg: var(--sas-accent);
    --bs-btn-disabled-border-color: var(--sas-accent);
    font-weight: 700;
}

/* حقول الإدخال: إطار كحلي عند الكتابة بدل الأزرق الافتراضي */
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--sas-primary-rgb), .6);
    box-shadow: 0 0 0 .25rem rgba(var(--sas-primary-rgb), .2);
}

/* الفوتر */
.site-footer {
    background-color: var(--sas-footer);
}

/*
  ملاحظة مهمة: لا نحدد direction هنا.
  الاتجاه يأتي من <html dir="rtl|ltr"> في base.html حسب لغة المستخدم.
  ونستخدم start/end بدل right/left حتى يتبع الاتجاه تلقائياً.
*/
html, body {
    text-align: start;
}

body {
    font-family: 'Cairo', sans-serif;
}

.dropdown-menu .dropdown-item {
    text-align: start;
}

/* الشريط العلوي ثابت (fixed-top)، فنترك مسافة بارتفاعه حتى لا يغطي أول الصفحة */
body {
    padding-top: 70px;
}

/* ===== صفحات الدخول والتسجيل ===== */
.auth-page {
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background-color: var(--sas-bg);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    border: 0;
    border-radius: 1rem;
}

.auth-card .auth-logo {
    height: 50px;
}

/* ===== اختيار نوع الحساب في صفحة التسجيل (شاحن / ناقل) ===== */
.role-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.role-switch .role-option {
    padding: .9rem .5rem;
    border-radius: .75rem;
    line-height: 1.4;
}

/* ===== مربع رمز التحقق: أرقام كبيرة متباعدة ===== */
.code-input {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1.2rem;
    text-align: center;
    padding-inline-start: 1.2rem; /* يعوّض المسافة بعد آخر رقم حتى يبقى الرمز في المنتصف */
}

/* ===== هيكل لوحة التحكم: قائمة جانبية + محتوى ===== */
.dash-layout {
    display: flex;
    min-height: calc(100vh - 70px);
    background-color: var(--sas-bg);
}

.dash-content {
    flex: 1;
    min-width: 0;          /* يمنع الجداول العريضة من دفع الصفحة خارج الشاشة */
    padding: 1.5rem;
}

/* على الشاشات الكبيرة: القائمة ثابتة بجانب المحتوى ولا تتحرك مع التمرير */
@media (min-width: 992px) {
    .dash-sidebar {
        width: 260px;
        flex-shrink: 0;
        background-color: #fff;
        border-inline-end: 1px solid #e5e7eb;
        position: sticky;
        top: 70px;
        height: calc(100vh - 70px);
        overflow-y: auto;
    }
}

/* بطاقة المستخدم أعلى القائمة */
.sidebar-user {
    padding: .75rem;
    border-radius: .75rem;
    background-color: var(--sas-bg);
}

.sidebar-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--sas-primary);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* روابط القائمة */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .75rem;
    border-radius: .5rem;
    color: #374151;
}

.sidebar-link i {
    font-size: 1.1rem;
}

.sidebar-link:hover {
    background-color: rgba(var(--sas-primary-rgb), .08);
    color: var(--sas-primary);
}

/* الصفحة المفتوحة حالياً */
.sidebar-link.active {
    background-color: var(--sas-primary);
    color: #fff;
}

/* الصفحات التي لم تُبنَ بعد */
.sidebar-link.disabled {
    color: #9ca3af;
}

.sidebar-link.disabled .badge {
    background-color: #eef1f4;
    color: #6b7280;
    font-weight: 500;
}

/* ===== الأسطول ===== */
/* عنوان قسم داخل النماذج الطويلة */
.form-section {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sas-primary);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

/* اللوحة: تشبه اللوحة الحقيقية (العربي فوق والإنجليزي تحت، الأرقام يساراً والحروف يميناً) */
.plate {
    display: inline-block;
    min-width: 120px;
    padding: .15rem .5rem;
    border: 2px solid #1f2933;
    border-radius: .4rem;
    background-color: #fff;
    font-weight: 700;
    line-height: 1.4;
}

.plate-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}

.plate-en {
    border-top: 1px solid #d1d5db;
    font-size: .8rem;
    letter-spacing: .05rem;
}

/* مفتاح التشغيل/الإيقاف (form-switch) بلون الهوية بدل أزرق Bootstrap */
.form-check-input:checked {
    background-color: var(--sas-primary);
    border-color: var(--sas-primary);
}

.form-check-input:focus {
    border-color: rgba(var(--sas-primary-rgb), .6);
    box-shadow: 0 0 0 .25rem rgba(var(--sas-primary-rgb), .2);
}

/* لوحة صغيرة داخل جداول أخرى (مثل جدول السائقين) */
.plate.plate-sm {
    min-width: 96px;
    padding: .05rem .4rem;
    font-size: .85rem;
    border-width: 1.5px;
}

.plate.plate-sm .plate-en {
    font-size: .7rem;
}

/* ===== المستندات ===== */
/* الملف الحالي في نموذج التعديل: صورة مصغّرة + رابط + خيار الحذف */
.doc-current {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}

.doc-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    overflow: hidden;
    background-color: var(--sas-bg);
    font-size: 1.6rem;
    color: #dc3545;   /* أيقونة PDF حمراء */
}

.doc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== الشحنات ===== */
/* سهم المسار: يشير لليسار في العربي ولليمين في الإنجليزي */
[dir="ltr"] .route-arrow {
    display: inline-block;
    transform: scaleX(-1);
}

/* ملخص السعر يبقى ظاهراً أثناء التمرير على الشاشات الكبيرة */
@media (min-width: 992px) {
    .price-summary {
        position: sticky;
        top: 90px;
    }
}

.detail-list dt {
    font-weight: 600;
    color: #6b7280;
}

/* شريط أدوات توزيع الرحلات أسفل جدول الرحلات */
.assign-bar {
    background-color: var(--sas-bg);
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 .375rem .375rem;
}

/* التبويبات (nav-pills) بلون الهوية بدل أزرق Bootstrap */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--sas-primary);
    --bs-nav-link-color: var(--sas-primary);
    --bs-nav-link-hover-color: var(--sas-primary-dark);
}

/* ===== الرحلات (9.4) ===== */
.text-accent { color: var(--sas-accent); }

/* بطاقة رحلة جديدة بانتظار رد الناقل: خط برتقالي جانبي */
.trip-card-new,
.border-start-accent {
    border-inline-start: 4px solid var(--sas-accent) !important;
}
.trip-card { transition: transform .15s, box-shadow .15s; }
.trip-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08) !important; }

/* شريط مراحل التنفيذ: دوائر مرقّمة بينها خط */
.trip-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
}
.trip-steps::before {          /* الخط الواصل بين الدوائر */
    content: "";
    position: absolute;
    top: 1rem;
    inset-inline: 10%;
    height: 2px;
    background: #e5e7eb;
}
.trip-step {
    flex: 1;
    text-align: center;
    position: relative;
    font-size: .85rem;
    color: #9ca3af;
}
.trip-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e5e7eb;
    font-weight: 700;
    position: relative;
}
.trip-step-label { display: block; margin-top: .35rem; }
.trip-step.done { color: var(--sas-primary); }
.trip-step.done .trip-step-dot {
    background: var(--sas-primary);
    border-color: var(--sas-primary);
    color: #fff;
}
.trip-step.current .trip-step-dot {
    background: var(--sas-accent);
    border-color: var(--sas-accent);
    color: #212529;
    box-shadow: 0 0 0 4px rgba(240, 136, 0, .2);
}
.trip-step.current { font-weight: 700; color: #212529; }

/* سجل الرحلة: خط عمودي ونقطة لكل حدث */
.trip-timeline-item {
    position: relative;
    padding-inline-start: 1.25rem;
    padding-bottom: .9rem;
    border-inline-start: 2px solid #e5e7eb;
    margin-inline-start: .35rem;
}
.trip-timeline-item:last-child { border-color: transparent; padding-bottom: 0; }
.trip-timeline-item::before {
    content: "";
    position: absolute;
    inset-inline-start: -.45rem;
    top: .25rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--sas-primary);
}
.trip-timeline-item.kind-declined::before,
.trip-timeline-item.kind-unassigned::before { background: #dc3545; }
.trip-timeline-item.kind-completed::before,
.trip-timeline-item.kind-delivered::before { background: #198754; }

/* ===== رئيسية الشاحن (القرار 48) ===== */
.step-number {
    flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sas-primary); color: #fff; font-weight: 700;
}
.order-row, .stat-link { transition: border-color .15s, box-shadow .15s; }
.order-row:hover { border-color: var(--sas-primary) !important; }
.stat-link:hover { box-shadow: 0 .25rem .75rem rgba(16, 80, 120, .15) !important; }

/* ===== محادثة البلاغ (القرار 49) ===== */
.ticket-thread { display: flex; flex-direction: column; gap: .75rem; }
.ticket-msg {
    background: #fff; border: 1px solid var(--bs-border-color); border-radius: .75rem;
    padding: .875rem 1rem; max-width: 85%; align-self: flex-start;
}
.ticket-msg.from-staff { background: #EEF4F8; border-color: #CFE0EA; align-self: flex-end; }
.ticket-msg.internal { background: #FFF8E6; border: 1px dashed #E0B252; }
.ticket-body { white-space: normal; overflow-wrap: anywhere; }

/* ===== دفتر العناوين (القرار 50) ===== */
.address-block { overflow-wrap: anywhere; }

/* ===== اختيار بالصور: أحجام وأنواع الشاحنات (القرار 56) ===== */
.pic-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 8px 8px;
    background: #fff;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    color: inherit;
    text-align: center;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pic-card img { width: 100%; height: 54px; object-fit: contain; margin-bottom: 4px; }
.pic-card .pic-name { font-weight: 600; font-size: .9rem; line-height: 1.3; }
.pic-card .pic-sub { font-size: .75rem; color: #6B7280; }
.pic-card:hover { border-color: #9BB8CC; transform: translateY(-1px); }
.pic-card:focus-visible { outline: 3px solid rgba(16, 80, 120, .35); outline-offset: 1px; }
.pic-card.active {
    border-color: var(--bs-primary, #105078);
    box-shadow: 0 0 0 3px rgba(16, 80, 120, .15);
    background: #F3F8FB;
}
.pic-card.active .pic-name { color: var(--bs-primary, #105078); }
.pic-group img { height: 40px; }
.pic-group.active { border-color: #F08800; box-shadow: 0 0 0 3px rgba(240, 136, 0, .18); background: #FFF8EE; }
.pic-group.active .pic-name { color: #B45F00; }
.catalog-thumb { width: 64px; height: 30px; object-fit: contain; }
.catalog-preview { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #F8FAFC; border-radius: 12px; }
.catalog-preview img { width: 180px; height: 72px; object-fit: contain; }
.pic-card-icon { padding: 14px 8px 10px; }
.pic-card-icon .bi { font-size: 1.6rem; color: var(--bs-primary, #105078); line-height: 1; margin-bottom: 6px; }
.pic-card-icon.active .bi { color: #F08800; }

/* ===== الصفحة الرئيسية: الواجهة والتتبع (القرار 59) ===== */
.home-hero {
    position: relative;
    min-height: calc(100vh - 70px);
    min-height: calc(100svh - 70px);
    display: flex;
    overflow: hidden;
    background: #0B2E45;
}
.home-hero-bg, .home-hero-shade { position: absolute; inset: 0; }
.home-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
/* تظليل: أعلى للعنوان وأسفل للبطاقة، حتى تُقرأ النصوص فوق أي صورة */
.home-hero-shade {
    background:
        linear-gradient(180deg, rgba(11, 46, 69, .78) 0%, rgba(11, 46, 69, .25) 38%, rgba(11, 46, 69, 0) 55%),
        linear-gradient(0deg, rgba(11, 20, 28, .85) 0%, rgba(11, 20, 28, .35) 30%, rgba(11, 20, 28, 0) 50%);
}
.home-hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding-top: 56px;
    padding-bottom: 48px;
}
.home-hero-title {
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.6rem, 3.6vw, 2.8rem);
    line-height: 1.3;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
    margin: 0;
}
.home-hero-title span { display: block; font-weight: 500; font-size: .62em; margin-top: 6px; color: #FFD9A3; }
.home-card {
    width: 100%;
    max-width: 620px;
    align-self: flex-start;            /* يمين الصورة (بداية السطر في العربية) حتى لا تغطي لوحة الشعار يسارها */
    background: #fff;
    border-radius: 22px;
    padding: 8px 24px 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
[dir="ltr"] .home-card { align-self: flex-end; }
.home-tabs { border-bottom: 1px solid #E5E7EB; margin-bottom: 20px; flex-wrap: nowrap; overflow-x: auto; }
.home-tabs .nav-link {
    color: #374151;
    font-weight: 600;
    padding: 16px 18px 14px;
    border: 0;
    border-bottom: 4px solid transparent;
    border-radius: 0;
    white-space: nowrap;
    background: none;
}
.home-tabs .nav-link.active { color: #0B2E45; border-bottom-color: #F08800; }
.home-card-track { padding: 24px; }
.home-track .form-check { margin-bottom: 6px; }
.home-track .form-check-input:checked { background-color: #F08800; border-color: #F08800; }
.home-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F3F4F6;
    border-radius: 14px;
    padding: 6px 6px 6px 6px;
    padding-inline-start: 16px;
}
.home-search .bi { color: #6B7280; font-size: 1.1rem; }
.home-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 4px; outline: none; }
.home-search input:placeholder-shown { direction: inherit; }
.home-search .btn { border-radius: 10px; padding-inline: 20px; font-weight: 700; }
.home-contact li { padding: 8px 0; border-bottom: 1px solid #F3F4F6; }
.home-contact li:last-child { border-bottom: 0; }
.home-contact .bi { color: #105078; margin-inline-end: 8px; }
@media (max-width: 767.98px) {
    .home-hero-inner { padding-top: 32px; padding-bottom: 104px; }   /* مسافة لزر واتساب العائم */
    .home-card { padding: 4px 16px 18px; border-radius: 18px; }
    .home-card-track { padding: 14px; }
    .home-search input { font-size: .9rem; }
    .home-hero-bg img { object-position: 22% 70%; }   /* على الجوال: لوحة الشعار والمبنى */
    .home-tabs .nav-link { padding: 14px 12px 12px; }
}

/* ===== صفحة نتائج التتبع ===== */
.track-head { background: linear-gradient(135deg, #0B2E45, #105078); color: #fff; padding: 32px 0 72px; }
.track-head h1 { font-size: 1.5rem; font-weight: 800; }
.track-body { margin-top: -48px; padding-bottom: 48px; }

/* ===== رمز الريال السعودي (القرار 60): يأخذ لون النص وحجمه ===== */
.sar {
    display: inline-block;
    width: .82em;
    height: .92em;
    vertical-align: -0.1em;
    background-color: currentColor;
    -webkit-mask: url('../images/sar.svg') no-repeat center / contain;
    mask: url('../images/sar.svg') no-repeat center / contain;
}