/* ==========================================================================
   Trip Master System — سیستم طراحی
   tms-design.css  ·  VERSION 1.0

   این فایل پایه بصری کل پنل کاربران است. هر صفحه‌ای که بازنویسی می‌شود،
   استایل چسبیده به تگ‌هایش حذف و با کلاس‌های همین فایل جایگزین می‌شود.

   قانون‌های این فایل:
   ۱. همه کلاس‌ها با tms- شروع می‌شوند تا با قالب وردپرس تداخل نکنند.
   ۲. همه رنگ‌ها از متغیرهای بخش «توکن‌ها» می‌آیند. هیچ رنگ ثابتی
      مستقیم داخل قانون‌ها نوشته نمی‌شود.
   ۳. تفاوت پنل مسافر و راننده فقط یک رنگ تأکیدی است؛ ساختار یکی است.
      کلاس tms-theme-driver روی همان عنصر یا والدش، رنگ را عوض می‌کند.
   ۴. بدون سایه رنگی، بدون ایموجی وضعیت.
   ۵. گرادیان فقط در یک جا: سربرگ مودال‌ها و کارت‌های شاخص (مثل کارت سفر
      فعال در صفحه خانه). همه‌جای دیگر رنگ تخت است.
      این قانون قبلاً «بدون گرادیان» بود، ولی صفحه خانه از روز اول پنج
      گرادیان داشت — یعنی قانون با خودِ محصول نمی‌خواند و هر بار کسی
      می‌آمد مودالی را هم‌زبان کند، نتیجه بی‌روح از آب درمی‌آمد.
      گرادیان را از توکن --tms-gradient-header بگیر، نه دستی.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ۰) فونت
   فایل‌ها از داخل خود افزونه لود می‌شوند، نه از Google Fonts.
   مسیرها را PHP جایگزین می‌کند (به design-system.php نگاه کن).
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   ۱) توکن‌ها
   -------------------------------------------------------------------------- */
.tms {
    /* --- سطح‌ها --- */
    --tms-bg:            #EEF0F4;
    --tms-surface:       #FFFFFF;
    --tms-surface-soft:  #F7F8FA;
    --tms-line:          #E1E4EA;
    --tms-line-strong:   #C9CED8;

    /* --- متن --- */
    --tms-text:          #17191F;
    --tms-text-muted:    #5C6070;
    --tms-text-faint:    #8A8F9E;
    --tms-text-invert:   #FFFFFF;

    /* --- رنگ تأکیدی (پیش‌فرض: پنل مسافر) --- */
    --tms-accent:        #4C3BCF;
    --tms-accent-dark:   #3D2DB0;
    --tms-accent-soft:   #F1F0FB;
    --tms-accent-line:   #D6D2F3;

    /* --- رنگ‌های معنایی --- */
    --tms-success:       #0F7A61;
    --tms-success-soft:  #E6F4EF;
    --tms-warn:          #B26A00;
    --tms-warn-soft:     #FDF3E2;
    --tms-warn-line:     #F0DCB8;
    --tms-danger:        #B3261E;
    --tms-danger-soft:   #FCEDEC;
    --tms-danger-line:   #F2CFCC;
    --tms-info:          #1B5E9B;
    --tms-info-soft:     #E8F1F9;

    /* --- شکل --- */
    --tms-radius-sm:     8px;
    --tms-radius:        12px;
    --tms-radius-lg:     16px;
    --tms-radius-pill:   999px;

    /* --- فاصله --- */
    --tms-gap-xs:        6px;
    --tms-gap-sm:        10px;
    --tms-gap:           14px;
    --tms-gap-lg:        20px;

    /* --- سایه (خاکستری خنثی، نه رنگی) --- */
    --tms-shadow:        0 1px 2px rgba(23, 25, 31, .05);
    --tms-shadow-lift:   0 6px 24px rgba(23, 25, 31, .10);

    /* --- تایپوگرافی --- */
    --tms-font:          Vazirmatn, Vazir, IRANSans, Tahoma, sans-serif;

    /* --- گرادیان سربرگ ---
       همان گرادیانی که کارت سفر فعالِ صفحه خانه مسافر از اول داشته؛
       اینجا توکن شد تا سربرگ مودال‌ها هم دقیقاً همان را بگیرند و
       دوباره دستی نوشته نشود. */
    --tms-gradient-header: linear-gradient(135deg, #4C3BCF 0%, #3F5BC4 55%, #1B5E9B 100%);
}

/* --- تم راننده: فقط رنگ تأکیدی عوض می‌شود --- */
.tms-theme-driver,
.tms .tms-theme-driver {
    --tms-accent:      #0F7A61;
    --tms-accent-dark: #0C6B54;
    --tms-accent-soft: #E6F4EF;
    --tms-accent-line: #BCE0D5;

    /* سبزِ راننده که مثل نسخه مسافر به آبی می‌رسد. صفحه خانه راننده
       گرادیان شاخصی نداشت که از آن کپی شود، پس این پیشنهاد است و موقع
       کار روی صفحه‌های راننده باید تأیید شود. */
    --tms-gradient-header: linear-gradient(135deg, #0F7A61 0%, #136E7C 55%, #1B5E9B 100%);
}

/* --------------------------------------------------------------------------
   ۲) پایه
   -------------------------------------------------------------------------- */
.tms {
    direction: rtl;
    text-align: right;
    font-family: var(--tms-font);
    font-size: 14px;
    line-height: 1.9;
    color: var(--tms-text);
    -webkit-font-smoothing: antialiased;
}
.tms *,
.tms *::before,
.tms *::after { box-sizing: border-box; }

.tms h1, .tms h2, .tms h3, .tms h4 {
    margin: 0;
    line-height: 1.5;
    font-weight: 800;
    color: var(--tms-text);
}
.tms h1 { font-size: 24px; }
.tms h2 { font-size: 20px; }
.tms h3 { font-size: 16px; }
.tms h4 { font-size: 14px; font-weight: 700; }
.tms p  { margin: 0; }

.tms a { color: var(--tms-accent); text-decoration: none; }
.tms a:hover { color: var(--tms-accent-dark); }

/* عددها و هر متن لاتین که باید چپ‌چین بماند */
.tms-ltr { direction: ltr; unicode-bidi: isolate; }

/* تکه‌های کنار هم که نباید در RTL جابه‌جا شوند */
.tms-inline { unicode-bidi: isolate; }

/* --------------------------------------------------------------------------
   ۳) چیدمان
   -------------------------------------------------------------------------- */
.tms-page {
    display: flex;
    flex-direction: column;
    gap: var(--tms-gap);
    max-width: 760px;
    margin: 0 auto;
    padding: 4px 0 28px;
}
.tms-stack     { display: flex; flex-direction: column; gap: var(--tms-gap); }
.tms-stack-sm  { display: flex; flex-direction: column; gap: var(--tms-gap-sm); }
.tms-row {
    display: flex; align-items: center; gap: var(--tms-gap-sm); flex-wrap: wrap;
}
.tms-row-between {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--tms-gap-sm);
}
.tms-spacer { margin-inline-start: auto; }

.tms-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tms-gap-sm); }
.tms-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tms-gap-sm); }

/* --------------------------------------------------------------------------
   ۴) کارت
   -------------------------------------------------------------------------- */
.tms-card {
    background: var(--tms-surface);
    border: 1px solid var(--tms-line);
    border-radius: var(--tms-radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: var(--tms-gap-sm);
}
.tms-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--tms-gap-sm);
}
.tms-card-head h3 { font-size: 15px; }

/* کارت پررنگ — برای چیزی که «همین الان در جریان است» */
.tms-card-accent {
    background: var(--tms-accent);
    border-color: var(--tms-accent);
    color: var(--tms-text-invert);
}
.tms-card-accent h1, .tms-card-accent h2,
.tms-card-accent h3, .tms-card-accent h4 { color: var(--tms-text-invert); }
.tms-card-accent .tms-muted { color: rgba(255, 255, 255, .75); }

/* کارت هشدار — کاری که منتظر کاربر است */
.tms-card-warn   { border-color: var(--tms-warn-line); }
.tms-card-danger { border-color: var(--tms-danger-line); }

/* ردیف‌های داخل کارت با خط جداکننده */
.tms-card-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--tms-gap-sm);
    padding-top: var(--tms-gap-sm);
    border-top: 1px solid var(--tms-line);
}
.tms-card-accent .tms-card-row { border-top-color: rgba(255, 255, 255, .18); }
.tms-card-head + .tms-card-row { padding-top: 0; border-top: none; }

/* --------------------------------------------------------------------------
   ۵) متن‌های کمکی
   -------------------------------------------------------------------------- */
.tms-muted { font-size: 13px; color: var(--tms-text-muted); }
.tms-faint { font-size: 12px; color: var(--tms-text-faint); }
.tms-label { font-size: 12px; color: var(--tms-text-muted); }
.tms-strong { font-weight: 700; }

/* فهرست تکه‌های اطلاعاتی با نقطه جداکننده — بدون به‌هم‌ریختن عددها */
.tms-meta {
    display: flex; flex-wrap: wrap; align-items: center;
    font-size: 13px; color: var(--tms-text-muted);
}
.tms-meta > * { unicode-bidi: isolate; }
.tms-meta > * + *::before {
    content: '·'; margin: 0 6px; color: var(--tms-line-strong);
}

/* --------------------------------------------------------------------------
   ۶) پول و عدد
   -------------------------------------------------------------------------- */
.tms-money { font-weight: 800; font-size: 18px; unicode-bidi: isolate; }
.tms-money-lg { font-size: 22px; }
.tms-money-sm { font-size: 15px; }
.tms-money small {
    font-size: 12px; font-weight: 400; color: var(--tms-text-muted);
    margin-inline-start: 4px;
}
.tms-card-accent .tms-money small { color: rgba(255, 255, 255, .75); }

/* --------------------------------------------------------------------------
   ۷) دکمه
   -------------------------------------------------------------------------- */
.tms-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--tms-gap-xs);
    font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: var(--tms-radius);
    background: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tms-btn:disabled,
.tms-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.tms-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.tms-btn-primary { background: var(--tms-accent); color: var(--tms-text-invert); }
.tms-btn-primary:hover { background: var(--tms-accent-dark); color: var(--tms-text-invert); }

.tms-btn-secondary {
    background: var(--tms-surface); color: var(--tms-text); border-color: var(--tms-line);
}
.tms-btn-secondary:hover { border-color: var(--tms-line-strong); color: var(--tms-text); }

.tms-btn-soft { background: var(--tms-accent-soft); color: var(--tms-accent); }
.tms-btn-soft:hover { background: var(--tms-accent-line); color: var(--tms-accent-dark); }

.tms-btn-success { background: var(--tms-success); color: var(--tms-text-invert); }
.tms-btn-success:hover { background: #0C6B54; color: var(--tms-text-invert); }

.tms-btn-danger { background: var(--tms-danger); color: var(--tms-text-invert); }
.tms-btn-danger:hover { background: #931D17; color: var(--tms-text-invert); }

.tms-btn-quiet { color: var(--tms-text-muted); padding: 8px 12px; }
.tms-btn-quiet:hover { background: var(--tms-surface-soft); color: var(--tms-text); }

/* روی زمینه رنگی */
.tms-card-accent .tms-btn-secondary {
    background: var(--tms-surface); color: var(--tms-accent); border-color: transparent;
}

.tms-btn-sm    { padding: 8px 14px; font-size: 13px; }
.tms-btn-lg    { padding: 14px 22px; font-size: 15px; }
.tms-btn-block { width: 100%; }

/* دکمه متنی */
.tms-link-btn {
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 700;
    color: var(--tms-accent);
}
.tms-link-btn:hover { color: var(--tms-accent-dark); }

/* گروه دکمه‌ها */
.tms-btn-group { display: flex; gap: var(--tms-gap-sm); }
.tms-btn-group .tms-btn { flex: 1; }

/* --------------------------------------------------------------------------
   ۸) بج و وضعیت
   -------------------------------------------------------------------------- */
.tms-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; line-height: 1.6;
    padding: 4px 10px;
    border-radius: var(--tms-radius-pill);
    background: var(--tms-surface-soft); color: var(--tms-text-muted);
    unicode-bidi: isolate;
}
.tms-badge-accent  { background: var(--tms-accent-soft);  color: var(--tms-accent); }
.tms-badge-success { background: var(--tms-success-soft); color: var(--tms-success); }
.tms-badge-warn    { background: var(--tms-warn-soft);    color: var(--tms-warn); }
.tms-badge-danger  { background: var(--tms-danger-soft);  color: var(--tms-danger); }
.tms-badge-info    { background: var(--tms-info-soft);    color: var(--tms-info); }

/* نقطه زنده — برای «در حال انجام» */
.tms-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.tms-dot-live { animation: tmsPulse 1.8s ease-in-out infinite; }
@keyframes tmsPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
    .tms-dot-live { animation: none; }
}

/* شمارنده روی آیکون */
.tms-count {
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--tms-radius-pill);
    background: var(--tms-accent); color: var(--tms-text-invert);
    font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}

/* --------------------------------------------------------------------------
   ۹) جعبه پیام
   -------------------------------------------------------------------------- */
.tms-note {
    display: flex; gap: var(--tms-gap-sm);
    padding: 12px 14px;
    border: 1px solid var(--tms-line);
    border-radius: var(--tms-radius);
    background: var(--tms-surface-soft);
    font-size: 13px; line-height: 1.9; color: var(--tms-text-muted);
}
.tms-note strong { color: var(--tms-text); }
.tms-note-warn    { background: var(--tms-warn-soft);    border-color: var(--tms-warn-line);   color: var(--tms-warn); }
.tms-note-danger  { background: var(--tms-danger-soft);  border-color: var(--tms-danger-line); color: var(--tms-danger); }
.tms-note-success { background: var(--tms-success-soft); border-color: #BCE0D5;                color: var(--tms-success); }
.tms-note-info    { background: var(--tms-info-soft);    border-color: #C6DCEE;                color: var(--tms-info); }
.tms-note-warn strong, .tms-note-danger strong,
.tms-note-success strong, .tms-note-info strong { color: inherit; }

/* --------------------------------------------------------------------------
   ۱۰) فرم
   -------------------------------------------------------------------------- */
.tms-field { display: flex; flex-direction: column; gap: var(--tms-gap-xs); }
.tms-field > label {
    font-size: 13px; font-weight: 700; color: var(--tms-text);
}
.tms-field-req::after { content: ' *'; color: var(--tms-danger); }

.tms-input,
.tms-select,
.tms-textarea {
    width: 100%;
    font-family: inherit; font-size: 14px; line-height: 1.7;
    color: var(--tms-text);
    background: var(--tms-surface);
    border: 1px solid var(--tms-line);
    border-radius: var(--tms-radius);
    padding: 11px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tms-textarea { min-height: 96px; resize: vertical; }
.tms-input::placeholder,
.tms-textarea::placeholder { color: var(--tms-text-faint); }

.tms-input:focus,
.tms-select:focus,
.tms-textarea:focus {
    outline: none;
    border-color: var(--tms-accent);
    box-shadow: 0 0 0 3px var(--tms-accent-soft);
}
.tms-input:disabled,
.tms-select:disabled,
.tms-textarea:disabled {
    background: var(--tms-surface-soft); color: var(--tms-text-muted); cursor: not-allowed;
}
.tms-input.is-error,
.tms-select.is-error,
.tms-textarea.is-error { border-color: var(--tms-danger); }

.tms-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 18px;
    padding-inline-start: 38px;
}

.tms-help  { font-size: 12px; color: var(--tms-text-faint); }
.tms-error { font-size: 12px; color: var(--tms-danger); font-weight: 700; }

/* عددهای فارسی داخل ورودی — مثل شماره موبایل و قیمت */
.tms-input-num { direction: ltr; text-align: right; }

/* چک‌باکس و رادیو به شکل کارت انتخابی */
.tms-choice {
    display: flex; align-items: center; gap: var(--tms-gap-sm);
    padding: 12px 14px;
    border: 1px solid var(--tms-line);
    border-radius: var(--tms-radius);
    background: var(--tms-surface);
    cursor: pointer;
    font-size: 14px;
    transition: border-color .15s ease, background-color .15s ease;
}
.tms-choice:hover { border-color: var(--tms-line-strong); }
.tms-choice input { accent-color: var(--tms-accent); width: 18px; height: 18px; margin: 0; }
.tms-choice.is-selected,
.tms-choice:has(input:checked) {
    border-color: var(--tms-accent);
    background: var(--tms-accent-soft);
}

/* استپر عدد — مثل قیمت پیشنهادی راننده */
.tms-stepper {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--tms-gap-sm);
    background: var(--tms-surface-soft);
    border: 1px solid var(--tms-line);
    border-radius: var(--tms-radius);
    padding: 8px;
}
.tms-stepper-btn {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--tms-surface);
    border: 1px solid var(--tms-line);
    border-radius: var(--tms-radius-sm);
    font-size: 18px; font-weight: 700; color: var(--tms-text);
    cursor: pointer;
}
.tms-stepper-btn:hover { border-color: var(--tms-accent); color: var(--tms-accent); }
.tms-stepper-value { flex: 1; text-align: center; }

/* --------------------------------------------------------------------------
   ۱۱) تب
   -------------------------------------------------------------------------- */
.tms-tabs {
    display: flex; gap: 2px;
    background: var(--tms-surface-soft);
    border: 1px solid var(--tms-line);
    border-radius: var(--tms-radius);
    padding: 4px;
}
.tms-tab {
    flex: 1;
    padding: 9px 12px;
    border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 700;
    color: var(--tms-text-muted);
    border-radius: var(--tms-radius-sm);
    transition: background-color .15s ease, color .15s ease;
}
.tms-tab:hover { color: var(--tms-text); }
.tms-tab.is-active {
    background: var(--tms-accent); color: var(--tms-text-invert);
}

/* تب خطی — وقتی تب‌ها زیادند */
.tms-tabs-line {
    display: flex; gap: var(--tms-gap-lg);
    border-bottom: 1px solid var(--tms-line);
    overflow-x: auto;
}
.tms-tabs-line .tms-tab {
    flex: 0 0 auto; border-radius: 0; padding: 10px 2px;
    border-bottom: 2px solid transparent;
}
.tms-tabs-line .tms-tab.is-active {
    background: none; color: var(--tms-accent); border-bottom-color: var(--tms-accent);
}

/* --------------------------------------------------------------------------
   ۱۲) لیست و ردیف
   -------------------------------------------------------------------------- */
.tms-list { display: flex; flex-direction: column; }
.tms-list > * + * {
    padding-top: var(--tms-gap);
    margin-top: var(--tms-gap);
    border-top: 1px solid var(--tms-line);
}
.tms-list-item {
    display: flex; align-items: flex-start; gap: var(--tms-gap-sm);
}
.tms-list-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

/* تاریخ کنار ردیف */
.tms-date {
    flex-shrink: 0; width: 48px; text-align: center;
    display: flex; flex-direction: column; gap: 1px;
}
.tms-date-day   { font-size: 18px; font-weight: 800; line-height: 1.2; }
.tms-date-month { font-size: 11px; color: var(--tms-text-muted); }

/* --------------------------------------------------------------------------
   ۱۳) مسیر سفر
   -------------------------------------------------------------------------- */
.tms-route {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 15px; font-weight: 700;
}
.tms-route-lg { font-size: 21px; font-weight: 800; }
.tms-route-arrow { color: var(--tms-text-muted); font-weight: 400; }
.tms-card-accent .tms-route-arrow { color: rgba(255, 255, 255, .65); }

/* مسیر عمودی با نقطه — وقتی آدرس دقیق هم هست */
.tms-route-v { display: flex; flex-direction: column; gap: var(--tms-gap-sm); }
.tms-route-stop { display: flex; align-items: flex-start; gap: var(--tms-gap-sm); }
.tms-route-pin {
    width: 10px; height: 10px; margin-top: 7px; flex-shrink: 0;
    border-radius: 50%; border: 2px solid var(--tms-accent);
}
.tms-route-pin-end { background: var(--tms-accent); }

/* --------------------------------------------------------------------------
   ۱۴) نوار مرحله
   -------------------------------------------------------------------------- */
.tms-steps { display: flex; flex-direction: column; gap: var(--tms-gap-xs); }
.tms-steps-bars { display: flex; gap: 6px; }
.tms-step-bar {
    flex: 1; height: 4px; border-radius: var(--tms-radius-pill);
    background: var(--tms-line);
}
.tms-step-bar.is-done { background: var(--tms-accent); }
.tms-card-accent .tms-step-bar { background: rgba(255, 255, 255, .28); }
.tms-card-accent .tms-step-bar.is-done { background: #7BE3C0; }
.tms-steps-label { font-size: 12px; color: var(--tms-text-muted); }
.tms-card-accent .tms-steps-label { color: rgba(255, 255, 255, .8); }

/* --------------------------------------------------------------------------
   ۱۵) آواتار و شخص
   -------------------------------------------------------------------------- */
.tms-avatar {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%; object-fit: cover;
    background: var(--tms-surface-soft);
}
.tms-avatar-sm { width: 32px; height: 32px; }
.tms-avatar-lg { width: 56px; height: 56px; }

.tms-person { display: flex; align-items: center; gap: var(--tms-gap-sm); min-width: 0; }
.tms-person-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tms-person-name { font-size: 14px; font-weight: 700; }
.tms-person-meta { font-size: 12px; color: var(--tms-text-muted); }
.tms-card-accent .tms-person-meta { color: rgba(255, 255, 255, .75); }

/* جعبه شخص روی زمینه رنگی */
.tms-person-box {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--tms-gap-sm);
    background: rgba(255, 255, 255, .12);
    border-radius: var(--tms-radius);
    padding: 10px 12px;
}

/* --------------------------------------------------------------------------
   ۱۶) آمار
   -------------------------------------------------------------------------- */
.tms-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--tms-surface);
    border: 1px solid var(--tms-line);
    border-radius: var(--tms-radius-lg);
    overflow: hidden;
}
.tms-stats-2 { grid-template-columns: repeat(2, 1fr); }
.tms-stat {
    padding: 14px 8px; text-align: center;
    display: flex; flex-direction: column; gap: 4px;
    border-inline-start: 1px solid var(--tms-line);
}
.tms-stat:first-child { border-inline-start: none; }
.tms-stat-label { font-size: 12px; color: var(--tms-text-muted); }
.tms-stat-value { font-size: 17px; font-weight: 800; unicode-bidi: isolate; }

/* --------------------------------------------------------------------------
   ۱۷) دکمه‌های اقدام (شبکه آیکون‌دار)
   -------------------------------------------------------------------------- */
.tms-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tms-gap-sm); }
.tms-action {
    background: var(--tms-surface);
    border: 1px solid var(--tms-line);
    border-radius: var(--tms-radius-lg);
    padding: 14px 8px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    cursor: pointer; font-family: inherit;
    transition: border-color .15s ease;
}
.tms-action:hover { border-color: var(--tms-accent); }
.tms-action-icon {
    position: relative;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--tms-accent-soft); color: var(--tms-accent);
}
.tms-action-icon.is-active { background: var(--tms-accent); color: var(--tms-text-invert); }
.tms-action-icon .tms-count {
    position: absolute; top: -4px; inset-inline-start: -4px;
    border: 2px solid var(--tms-surface);
}
.tms-action-icon.is-active .tms-count {
    background: var(--tms-surface); color: var(--tms-accent);
}
.tms-action-label { font-size: 13px; font-weight: 700; color: var(--tms-text); }

/* --------------------------------------------------------------------------
   ۱۸) حالت خالی
   -------------------------------------------------------------------------- */
.tms-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--tms-gap-sm);
    text-align: center;
    padding: 30px 18px;
}
.tms-empty h3 { font-size: 16px; }
.tms-empty p  { font-size: 13px; line-height: 2; color: var(--tms-text-muted); max-width: 400px; }
.tms-empty .tms-btn { margin-top: 4px; }

/* --------------------------------------------------------------------------
   ۱۹) مودال
   -------------------------------------------------------------------------- */
.tms-modal-backdrop {
    position: fixed; inset: 0; z-index: 99990;
    background: rgba(23, 25, 31, .45);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    overflow-y: auto;
}
.tms-modal {
    width: 100%; max-width: 480px;
    background: var(--tms-surface);
    border-radius: var(--tms-radius-lg);
    box-shadow: var(--tms-shadow-lift);
    display: flex; flex-direction: column;
    max-height: calc(100vh - 32px);
    overflow: hidden;
}
.tms-modal-lg { max-width: 680px; }
.tms-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--tms-gap-sm);
    padding: 16px;
    border-bottom: 1px solid var(--tms-line);
}
.tms-modal-head h3 { font-size: 16px; }
.tms-modal-close {
    width: 32px; height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; background: var(--tms-surface-soft);
    border-radius: 50%; cursor: pointer;
    color: var(--tms-text-muted); font-size: 18px; line-height: 1;
}
.tms-modal-close:hover { background: var(--tms-line); color: var(--tms-text); }
.tms-modal-body {
    padding: 16px; overflow-y: auto;
    display: flex; flex-direction: column; gap: var(--tms-gap);
}
.tms-modal-foot {
    padding: 16px;
    border-top: 1px solid var(--tms-line);
    display: flex; gap: var(--tms-gap-sm);
}
.tms-modal-foot .tms-btn { flex: 1; }

/* --------------------------------------------------------------------------
   ۲۰) جدول
   -------------------------------------------------------------------------- */
.tms-table-wrap { overflow-x: auto; }
.tms-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.tms-table th, .tms-table td {
    padding: 11px 12px; text-align: right;
    border-bottom: 1px solid var(--tms-line);
    white-space: nowrap;
}
.tms-table th {
    font-weight: 700; color: var(--tms-text-muted);
    background: var(--tms-surface-soft);
}
.tms-table tbody tr:last-child td { border-bottom: none; }
.tms-table tbody tr:hover td { background: var(--tms-surface-soft); }
.tms-table-num { unicode-bidi: isolate; font-weight: 700; }

/* --------------------------------------------------------------------------
   ۲۱) بارگذاری
   -------------------------------------------------------------------------- */
.tms-spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--tms-line);
    border-top-color: var(--tms-accent);
    border-radius: 50%;
    animation: tmsSpin .7s linear infinite;
}
@keyframes tmsSpin { to { transform: rotate(360deg); } }

.tms-skeleton {
    background: var(--tms-surface-soft);
    border-radius: var(--tms-radius-sm);
    animation: tmsShimmer 1.4s ease-in-out infinite;
}
@keyframes tmsShimmer { 50% { opacity: .5; } }

.tms-loading {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--tms-gap-sm); padding: 40px 20px;
    color: var(--tms-text-muted); font-size: 13px;
}

/* --------------------------------------------------------------------------
   ۲۲) جداکننده
   -------------------------------------------------------------------------- */
.tms-divider { height: 1px; background: var(--tms-line); border: none; margin: 0; }

/* --------------------------------------------------------------------------
   ۲۳) دسترس‌پذیری
   -------------------------------------------------------------------------- */
.tms-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tms :focus-visible {
    outline: 2px solid var(--tms-accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   ۲۴) موبایل
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .tms h1 { font-size: 21px; }
    .tms h2 { font-size: 18px; }
    .tms-card { padding: 14px; border-radius: var(--tms-radius); }
    .tms-route-lg { font-size: 19px; }
    .tms-stat-value { font-size: 15px; }
    .tms-grid-2, .tms-grid-3 { grid-template-columns: 1fr; }
    .tms-modal-foot { flex-direction: column-reverse; }
}