/*
  توکن‌های طراحی مشترک بین صفحات ورود (auth.css)، پنل راننده (driver.css) و پنل مدیریت (admin.css)
  تا رنگ/فونت/اندازه‌ی متن در کل سایت هماهنگ و یکپارچه بمونه.
*/
:root {
    --brand-navy: #0f1b3c;
    --brand-navy-light: #1a2b56;
    --brand-blue: #3d63d4;
    --brand-blue-dark: #3455ba;
    --brand-amber: #f2a93b;
    --brand-green: #4ade80;
    --brand-bg: #f7f8fb;
    --brand-text-muted: #6b7280;
    --brand-radius: 14px;
}

/*
  اندازه‌ی پایه‌ی فونت کل سایت: چون کامپوننت‌های Bootstrap 5 عمدتاً با واحد rem تعریف شدن،
  کوچک‌کردن اندازه‌ی فونت ریشه (html) به‌طور خودکار روی همه‌ی صفحات (دکمه، فرم، جدول، هدینگ) به‌طور
  یکپارچه اعمال می‌شه - به‌جای این‌که مجبور باشیم اندازه رو تک‌تک روی هر کلاس بازنویسی کنیم.
*/
html {
    font-size: 15px;
}

.brand-font {
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* مقیاس هدینگ‌ها - محدود و یکپارچه، نه بزرگ و پراکنده */
.brand-font h1, .brand-font .h1 { font-size: 1.7rem; font-weight: 800; }
.brand-font h2, .brand-font .h2 { font-size: 1.45rem; font-weight: 800; }
.brand-font h3, .brand-font .h3 { font-size: 1.25rem; font-weight: 700; }
.brand-font h4, .brand-font .h4 { font-size: 1.1rem; font-weight: 700; }
.brand-font h5, .brand-font .h5 { font-size: 1rem; font-weight: 700; }
.brand-font h6, .brand-font .h6 { font-size: 0.9rem; font-weight: 700; }

.brand-font .btn { font-size: 0.9rem; }
.brand-font .form-label { font-size: 0.85rem; font-weight: 600; }
.brand-font small, .brand-font .small { font-size: 0.8rem; }

/* حباب‌های چت (استفاده در Driver/Chat و Admin/Chat) */
#messagesList {
    background: var(--brand-bg);
    border-radius: var(--brand-radius);
    padding: 1rem;
}

/* دکمه‌ی بازگشت - همیشه پین‌شده به گوشه‌ی چپ-بالای فیزیکی صفحه (از left واقعی استفاده می‌شه، نه start/end
   منطقی Bootstrap که در RTL برعکس می‌شن)، با متن «بازگشت» و رنگ برند یکدست در کل سایت */
.back-btn-fixed {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1035;
    background: var(--brand-blue);
    color: #fff;
    box-shadow: 0 4px 14px rgba(61, 99, 212, 0.35);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}
.back-btn-fixed:hover {
    background: var(--brand-blue-dark);
    color: #fff;
}

/* فاصله‌ی جبرانی بالای صفحه، چون دکمه‌ی بازگشت روی محتوا شناور می‌مونه */
.has-fixed-back {
    padding-top: 3.25rem !important;
}

/* کرایه‌ی پیشنهادی - گوشه‌ی چپ-پایین فیزیکی کارت (left واقعی، نه start/end) */
.fare-badge-corner {
    position: absolute;
    bottom: 8px;
    left: 8px;
}

/* رنگ‌بندی ملایم پیام‌ها بر اساس نوع - هماهنگ با تم کلی سایت */
.msg-type-contact {
    border-inline-start: 4px solid var(--brand-amber);
    background: #fff9ed;
}
.msg-type-offer {
    border-inline-start: 4px solid var(--brand-green);
    background: #f2fbf6;
}
.msg-type-general {
    border-inline-start: 4px solid var(--brand-blue);
}

/* --- حباب‌های پیام چت (مشترک بین پنل راننده و مدیریت) --- */
.chat-msg-row {
    display: flex;
    margin-bottom: 14px;
}

.chat-msg-mine { justify-content: flex-start; }   /* در RTL یعنی سمت راست */
.chat-msg-theirs { justify-content: flex-end; }   /* در RTL یعنی سمت چپ */

.chat-msg-content {
    max-width: 78%;
}

.chat-msg-sender {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--brand-text-muted);
    margin-bottom: 2px;
    padding: 0 4px;
}

.chat-msg-mine .chat-msg-sender { text-align: right; }
.chat-msg-theirs .chat-msg-sender { text-align: left; }

.chat-bubble {
    padding: 0.6rem 0.9rem;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(15, 27, 60, 0.08);
    font-size: 0.88rem;
}

.chat-msg-mine .chat-bubble {
    background: var(--brand-blue);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-msg-theirs .chat-bubble {
    background: #fff;
    color: #1f2937;
    border: 1px solid #eef0f4;
    border-bottom-left-radius: 4px;
}

.chat-bubble-time {
    font-size: 0.65rem;
    margin-top: 3px;
    opacity: 0.75;
}

/*
  قاعده‌ی ثابت رنگ وضعیت‌ها در کل برنامه (راننده، بار، درخواست، شکایت، اسلات) - همه‌جا باید همین
  چهار رنگ استفاده بشه، نه رنگ‌های دستی جداگانه:
  - سبز (bg-success)   = تاییدشده / موفق / تکمیل‌شده
  - زرد (bg-warning)   = در انتظار تصمیم (هنوز کسی تایید/رد نکرده)
  - آبی (bg-primary)   = فعال و در حال انجام (بعد از تایید، پیش از تکمیل - مثلاً حمل در جریان)
  - قرمز (bg-danger)   = رد‌شده / مسدود
  - خاکستری (bg-secondary) = لغوشده / خنثی
  بررسی شد: این قاعده همین الان توی همه‌ی صفحات (بار، درخواست/پیشنهاد، راننده، شکایت، اسلات) رعایت
  شده - این کامنت فقط برای مستندسازی و جلوگیری از انحراف در توسعه‌های بعدیه.
*/

/* --- کارت بار و بج مسیر (مشترک بین پنل راننده و مدیریت - جزئیات بار در هر دو پنل باید یکسان دیده بشه) --- */
.cargo-card {
    border: 1px solid #e5e7ee;
    border-radius: var(--brand-radius);
    box-shadow: 0 4px 16px rgba(15, 27, 60, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cargo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 27, 60, 0.1);
}
.cargo-route-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(61, 99, 212, 0.08);
    color: var(--brand-blue);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
}

/* --- هدر رنگی و ردیف‌های برچسب/مقدار برای صفحه‌ی جزئیات بار (مشترک) --- */
.section-header {
    padding: 0.6rem 1rem;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: var(--brand-radius) var(--brand-radius) 0 0;
}
.section-header.header-blue { background: rgba(61, 99, 212, 0.1); color: var(--brand-blue); }
.section-header.header-navy { background: rgba(15, 27, 60, 0.06); color: var(--brand-navy); }
.section-header.header-green { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
.section-header.header-gray { background: var(--brand-bg); color: var(--brand-text-muted); }

.section-header-lg {
    text-align: center;
    font-size: 1rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.1rem;
    border-bottom: 1px solid #f1f2f6;
    font-size: 0.88rem;
}
.detail-row:last-child { border-bottom: none; }
.detail-row .detail-label { color: var(--brand-text-muted); }
.detail-row .detail-value { font-weight: 600; color: #1f2937; }

/* --- کارت «دیده‌نشده» با پس‌زمینه‌ی آبی نرم + شماره‌گذاری گرافیکی - مشترک بین پنل راننده و مدیریت --- */
.request-card-unseen {
    background: #eef4ff !important;
    border: 1px solid #bcd0f7 !important;
}

.request-index-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-navy);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* --- حباب‌های پیام چت: کارتی و واضح، با برچسب فرستنده - مشترک بین پنل راننده/مدیریت/صاحب کالا ---
   نکته: قبلاً فقط توی driver.css بود، پس چت پنل مدیریت همیشه کاملاً بدون استایل (خام) رندر می‌شد. */
.chat-msg-row {
    display: flex;
    margin-bottom: 14px;
}

.chat-msg-mine { justify-content: flex-start; }   /* در RTL یعنی سمت راست */
.chat-msg-theirs { justify-content: flex-end; }   /* در RTL یعنی سمت چپ */

.chat-msg-content {
    max-width: 78%;
}

.chat-msg-sender {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--brand-text-muted);
    margin-bottom: 2px;
    padding: 0 4px;
}

.chat-msg-mine .chat-msg-sender { text-align: right; }
.chat-msg-theirs .chat-msg-sender { text-align: left; }

.chat-bubble {
    padding: 0.6rem 0.9rem;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(15, 27, 60, 0.08);
    font-size: 0.88rem;
}

.chat-msg-mine .chat-bubble {
    background: var(--brand-blue);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-msg-theirs .chat-bubble {
    background: #fff;
    color: #1f2937;
    border: 1px solid #eef0f4;
    border-bottom-left-radius: 4px;
}

.chat-bubble-time {
    font-size: 0.65rem;
    margin-top: 3px;
    opacity: 0.75;
}