/* ===================================================================
   تامین ترخیص ۲۴ — استایل سامانه (نسخه UI-Safe-2)
   طراحی: حرفه‌ای اداری مدرن، RTL، الهام از SaaS تمیز (سرمه‌ای + طلایی)
   فقط استایل کلاس‌های موجود — بدون تغییر HTML/JS
   =================================================================== */

@font-face { font-family: 'Vazirmatn'; src: local('Vazirmatn'), local('Tahoma'); }

/* TT24_AUTHZ_MATRIX_RECONCILE_V1: the original :root token block that used to live here was removed
   (2026-08-13, full-codebase audit) -- every single property it defined (--navy, --gold, --bg, --card,
   --ink, --line, --green, --red, --amber, --blue-bg, --radius*, --shadow*, --sidebar-w) is redefined by
   a later :root block in this same file (line ~398) or elsewhere (app.css line ~1361,
   tt24-premium.css), which always wins the cascade -- confirmed dead, zero visual effect from removal. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  font-size: 14px;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

/* ---------- صفحه ورود ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 18% 18%, rgba(44,84,153,.30), transparent 42%),
    radial-gradient(circle at 82% 82%, rgba(201,162,39,.18), transparent 42%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  padding: 20px;
}
.login-card { background: var(--card); border-radius: 20px; box-shadow: var(--shadow-lg); width: 100%; max-width: 390px; padding: 36px 30px; animation: rise .5s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.login-logo {
  width: 76px; height: 76px; margin: 0 auto 18px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border-radius: 20px; display: flex; align-items: center; justify-content: center;
  color: var(--gold-light); font-size: 30px; font-weight: bold; box-shadow: 0 8px 20px rgba(15,37,71,.35);
}
.login-card h1 { text-align: center; font-size: 19px; color: var(--navy); margin-bottom: 5px; font-weight: 800; }
.login-card .sub { text-align: center; color: var(--ink-soft); font-size: 12.5px; margin-bottom: 26px; }

/* ---------- فرم‌ها ---------- */
label { display: block; font-size: 12.5px; color: var(--ink-soft); margin: 15px 0 7px; font-weight: 600; }
input, select, textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--card); transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--navy-light);
  box-shadow: 0 0 0 3.5px rgba(44,84,153,.13);
}
input:hover, select:hover, textarea:hover { border-color: #cdd6e3; }
textarea { resize: vertical; min-height: 72px; }

/* ---------- دکمه‌ها ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 20px; border: 0; border-radius: 10px;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: transform .08s, box-shadow .18s, background .15s, opacity .15s;
  background: var(--navy); color: #fff; box-shadow: 0 2px 6px rgba(15,37,71,.18); white-space: nowrap;
}
.btn:hover { background: var(--navy-2); box-shadow: 0 5px 16px rgba(15,37,71,.26); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-block { width: 100%; }
.btn-gold { background: linear-gradient(135deg, var(--gold), #d4ae35); color: #3a2e07; }
.btn-gold:hover { background: linear-gradient(135deg, var(--gold-light), var(--gold)); }
.btn-outline { background: #fff; color: var(--navy); border: 1.5px solid var(--line); box-shadow: none; }
.btn-outline:hover { border-color: var(--navy-light); background: var(--bg-soft); box-shadow: var(--shadow-xs); transform: translateY(-1px); }
.btn-green { background: var(--green); }
.btn-green:hover { background: #166534; }
.btn-red { background: var(--red); }
.btn-red:hover { background: #991b1b; }
.btn-sm { padding: 7px 14px; font-size: 12px; border-radius: 8px; box-shadow: none; }
.btn-icon { padding: 8px 10px; }

/* ---------- چیدمان اصلی ---------- */
.app { display: none; min-height: 100vh; }
.app.active { display: block; }

.sidebar {
  position: fixed; top: 0; right: 0; width: var(--sidebar-w); height: 100vh;
  background: linear-gradient(180deg, #0d2142 0%, #16315c 100%);
  color: #c5d3e8; display: flex; flex-direction: column; z-index: 40;
  transition: transform .25s ease; box-shadow: -2px 0 20px rgba(15,37,71,.08);
}
.sidebar-head { padding: 22px 20px; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: 12px; }
.sidebar-head .logo { width: 44px; height: 44px; background: linear-gradient(135deg, var(--gold), #d4ae35); color: var(--navy); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 18px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(201,162,39,.3); }
.sidebar-head .t { font-size: 14.5px; color: #fff; font-weight: bold; }
.sidebar-head .s { font-size: 11px; color: #8298bd; }
.nav { flex: 1; overflow-y: auto; padding: 14px 12px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-radius: 10px; color: #c5d3e8; cursor: pointer;
  font-size: 13.5px; margin-bottom: 4px; transition: all .15s; text-decoration: none; font-weight: 500;
  position: relative;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: linear-gradient(135deg, var(--gold), #d4ae35); color: var(--navy); font-weight: 700; box-shadow: 0 4px 14px rgba(201,162,39,.32); }
.nav-item.active .ico { color: var(--navy); }
.nav-item .ico { width: 20px; text-align: center; color: #8298bd; transition: color .15s; }
.nav-item:hover .ico { color: #fff; }
.nav-sep { font-size: 10.5px; color: #6d83a8; padding: 16px 13px 7px; letter-spacing: .6px; font-weight: 700; text-transform: uppercase; }
.sidebar-foot { padding: 14px; border-top: 1px solid rgba(255,255,255,.07); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 11px; background: rgba(255,255,255,.06); }
.user-chip .av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), #d4ae35); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 15px; flex-shrink: 0; }
.user-chip .nm { font-size: 12.5px; color: #fff; font-weight: 600; }
.user-chip .rl { font-size: 10.5px; color: #8298bd; }

.main { margin-right: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  height: 64px; background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; position: sticky; top: 0; z-index: 30;
}
.topbar .page-title { font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: -.3px; }
.topbar .actions { display: flex; align-items: center; gap: 12px; }
.bell { position: relative; cursor: pointer; font-size: 19px; color: var(--ink-soft); padding: 8px; border-radius: 10px; transition: background .15s; }
.bell:hover { background: var(--bg); }
.bell .badge { position: absolute; top: 2px; left: 2px; background: var(--red); color: #fff; font-size: 10px; min-width: 17px; height: 17px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; font-weight: 700; box-shadow: 0 0 0 2px #fff; }
.menu-toggle { display: none; font-size: 22px; background: none; border: 0; cursor: pointer; color: var(--navy); }

.content { padding: 26px; flex: 1; }

/* ---------- کارت‌ها و شبکه ---------- */
.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; border: 1px solid rgba(230,234,240,.8); }
.card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.card-h h3 { font-size: 15px; color: var(--navy); font-weight: 800; letter-spacing: -.2px; }

.stat { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 22px 22px 26px; position: relative; overflow: hidden; border: 1px solid rgba(230,234,240,.8); transition: transform .16s, box-shadow .16s; }
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat::before { content: ''; position: absolute; top: 14px; bottom: 14px; right: 0; width: 5px; border-radius: 0 4px 4px 0; background: var(--navy); }
.stat.green::before { background: var(--green); }
.stat.amber::before { background: var(--amber); }
.stat.red::before { background: var(--red); }
.stat .v { font-size: 30px; font-weight: 800; color: var(--navy); letter-spacing: -.7px; line-height: 1.2; }
.stat .l { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; font-weight: 500; }

/* ---------- جداول ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: right; padding: 14px 16px; background: var(--bg-soft); color: var(--ink-soft); font-weight: 700; font-size: 11.5px; white-space: nowrap; border-bottom: 2px solid var(--line); letter-spacing: .2px; }
th:first-child { border-radius: 0 var(--radius-sm) 0 0; }
th:last-child { border-radius: var(--radius-sm) 0 0 0; }
td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--bg-soft); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- نشان‌ها ---------- */
.badge-s { display: inline-flex; align-items: center; gap: 5px; padding: 4px 13px; border-radius: 20px; font-size: 11.5px; font-weight: 700; }
.b-reviewing { background: var(--blue-bg); color: #1e40af; }
.b-clearing { background: var(--amber-bg); color: var(--amber); }
.b-completed { background: var(--green-bg); color: var(--green); }
.b-archived { background: #e7ebf1; color: var(--ink-soft); }
.route-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.04); }
.r-green { background: #16a34a; } .r-yellow { background: #eab308; } .r-red { background: #dc2626; }
.badge { display: inline-flex; }

/* ---------- مودال ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(15,37,71,.55); display: flex; align-items: flex-start; justify-content: center; padding: 44px 16px; z-index: 60; overflow-y: auto; backdrop-filter: blur(4px); }
.modal { background: var(--card); border-radius: 18px; width: 100%; max-width: 600px; box-shadow: var(--shadow-lg); animation: rise .25s ease; overflow: hidden; }
.modal.lg { max-width: 920px; }
.modal-h { padding: 20px 26px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: var(--bg-soft); }
.modal-h h3 { font-size: 16.5px; color: var(--navy); font-weight: 800; letter-spacing: -.2px; }
.modal-b { padding: 26px; max-height: 74vh; overflow-y: auto; }
.modal-f { padding: 18px 26px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; background: var(--bg-soft); }
.close-x { background: none; border: 0; font-size: 21px; color: var(--ink-soft); cursor: pointer; line-height: 1; padding: 5px; border-radius: 8px; transition: all .15s; }
.close-x:hover { background: var(--line); color: var(--ink); }

/* ---------- ابزارها ---------- */
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > * { flex: 1; }
.row .btn { flex: 0 0 auto; }
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.toolbar .search { flex: 1; min-width: 220px; }
.muted { color: var(--ink-soft); font-size: 12.5px; }
.empty { text-align: center; padding: 48px; color: var(--ink-soft); }
.empty .ico { font-size: 44px; opacity: .35; margin-bottom: 10px; }
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 13px 24px; border-radius: 11px; box-shadow: var(--shadow-lg); z-index: 100; font-size: 13.5px; animation: rise .3s ease; font-weight: 600; }
.toast.err { background: var(--red); }
.toast.ok { background: var(--green); }
.spinner { width: 34px; height: 34px; border: 3.5px solid var(--line); border-top-color: var(--navy); border-radius: 50%; animation: spin .7s linear infinite; margin: 34px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.pager { display: flex; gap: 7px; justify-content: center; margin-top: 20px; }
.pager button { padding: 7px 13px; border: 1.5px solid var(--line); background: var(--card); border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12.5px; transition: all .15s; font-weight: 600; }
.pager button:hover:not(:disabled) { border-color: var(--navy-light); background: var(--bg-soft); }
.pager button.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.pager button:disabled { opacity: .45; cursor: not-allowed; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
.field-grid > div { padding: 5px 0; line-height: 1.95; }
.field-grid .full { grid-column: 1 / -1; }

/* ---------- واکنش‌گرا ---------- */
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) {
  .sidebar { transform: translateX(100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-right: 0; }
  .menu-toggle { display: block; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .content { padding: 18px; }
}
@media (max-width: 520px) { .grid-4 { grid-template-columns: 1fr; } .content { padding: 14px; } }

/* ---------- چاپ ---------- */
@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .main { margin: 0; }
  .content { padding: 0; }
  body { background: #fff; }
}

/* ===================================================================
   مودال جزئیات پرونده (ورود طراحی Prototype — مرحله ۱)
   فقط کلاس‌های اختصاصی این مودال؛ بدون تغییر استایل سایر صفحات
   =================================================================== */

/* مودال بزرگ‌تر فقط برای پرونده */
.modal.file-modal { max-width: 1080px; width: 94%; max-height: 92vh; display: flex; flex-direction: column; padding: 0; background: var(--bg); }
.modal.file-modal .modal-h { padding: 0; border: 0; background: transparent; }
.modal.file-modal .modal-b { padding: 24px 26px; max-height: none; flex: 1; overflow-y: auto; }
.modal.file-modal .modal-f { background: var(--card); }

/* هدر گرادیانی */
.m-head { background: linear-gradient(120deg, var(--navy), var(--navy-2)); color: #fff; padding: 22px 26px !important;
  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.m-head .mh-main { display: flex; flex-direction: column; gap: 5px; }
.m-head .mh-num { font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: #fff; }
.m-head .mh-cust { font-size: 13px; color: #b9cae4; }
.m-head .mh-badges { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.m-head .mh-badge { padding: 4px 12px; border-radius: 30px; font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.16); color: #fff; }
.m-head .mh-act { display: flex; gap: 8px; margin-inline-start: auto; flex-wrap: wrap; }
.m-head .btn-o { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.25); }
.m-head .btn-o:hover { background: rgba(255,255,255,.22); }

/* کارت‌های اطلاعات */
.info-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 20px; }
.info-card { background: var(--card); border-radius: 14px; padding: 18px; box-shadow: var(--sh-xs,0 1px 2px rgba(15,37,71,.05)); border: 1px solid var(--line-2,#eef2f7); }
.info-card h4 { font-size: 13px; color: var(--navy); font-weight: 800; margin-bottom: 13px; padding-bottom: 11px;
  border-bottom: 2px solid var(--line-2,#eef2f7); display: flex; align-items: center; gap: 9px; }
.info-card h4 .hi { width: 26px; height: 26px; border-radius: 8px; background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.info-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; border-bottom: 1px dashed var(--line-2,#eef2f7); }
.info-row:last-child { border-bottom: 0; }
.info-row .k { color: var(--ink-soft); } .info-row .v { font-weight: 700; color: var(--ink); text-align: left; }

/* دو ستون: مراحل + تاریخچه */
.m-lower { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 18px; }
.m-panel { background: var(--card); border-radius: 14px; padding: 20px; box-shadow: var(--sh-xs,0 1px 2px rgba(15,37,71,.05)); border: 1px solid var(--line-2,#eef2f7); }
.m-panel > h4 { font-size: 14px; color: var(--navy); font-weight: 800; margin-bottom: 16px; }

/* Stepper */
.stepper { position: relative; }
.step { position: relative; padding: 0 38px 20px 0; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ''; position: absolute; inset-inline-end: 15px; top: 30px; bottom: -2px; width: 2.5px; background: var(--line); }
.step.done::before { background: var(--green); }
.step:last-child::before { display: none; }
.step .dot { position: absolute; inset-inline-end: 4px; top: 2px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--line); }
.step.done .dot { background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.step.wait .dot { background: #9fb0c6; }
.step.need .dot { background: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.step.red .dot { background: var(--red); box-shadow: 0 0 0 1px var(--red); }
.step .body { background: var(--bg-2,#f6f8fb); border-radius: 12px; padding: 12px 14px; }
.step.done .body { background: var(--green-bg); }
.step.need .body { background: var(--amber-bg); }
.step.red .body { background: var(--red-bg); }
.step .st { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.step .st .tt { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.step .meta { font-size: 12px; color: var(--ink-soft); margin-top: 5px; }
.tag { font-size: 10.5px; padding: 2px 10px; border-radius: 30px; font-weight: 700; }
.tag.done { background: var(--green); color: #fff; } .tag.wait { background: #dde3ec; color: var(--ink-soft); }
.tag.need { background: var(--amber); color: #fff; } .tag.red { background: var(--red); color: #fff; }
.step .acts { margin-top: 9px; display: flex; gap: 7px; flex-wrap: wrap; }

/* مجوزها */
.lic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.lic { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1.5px solid var(--line);
  border-radius: 11px; background: var(--card); cursor: pointer; transition: all .15s; }
.lic:hover { border-color: var(--navy-light,#2c5499); }
.lic.req { border-color: var(--amber); background: var(--amber-bg); }
.lic.on { border-color: var(--green); background: var(--green-bg); }
.lic .cb { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--ink-faint,#94a3b8); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; transition: all .15s; }
.lic.on .cb { background: var(--green); border-color: var(--green); }
.lic .nm { flex: 1; font-size: 13px; font-weight: 600; }
.lic .rt { font-size: 10px; padding: 2px 9px; border-radius: 30px; background: var(--amber); color: #fff; font-weight: 700; }

/* Timeline تاریخچه */
.tl-sec { font-size: 12.5px; font-weight: 800; color: var(--navy); margin: 16px 0 10px; }
.tl-sec:first-child { margin-top: 0; }
.tl-i { position: relative; padding: 0 24px 14px 0; font-size: 12.5px; }
.tl-i::before { content: ''; position: absolute; inset-inline-end: 6px; top: 16px; bottom: -2px; width: 2px; background: var(--line); }
.tl-i:last-child::before { display: none; }
.tl-i .td { position: absolute; inset-inline-end: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--navy-light,#2c5499); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--line); }
.tl-i.gold .td { background: var(--gold); }
.tl-i.red .td { background: var(--red,#dc2626); }
.tl-i .hd { font-weight: 700; color: var(--ink); }
.tl-i .mt { color: var(--ink-soft); font-size: 11.5px; margin-top: 2px; }
/* TT24_HISTORY_TIMELINE_UNIFY_V1: برچسب نوع/مرحله روی هر ردیف تاریخچهٔ یکپارچه (وضعیت/مسیر/کنترل
   مدیریتی/نام مرحله) -- تمایز منبع رویداد را وقتی ۴ منبع در یک لیست زمانی به‌هم آمیخته‌اند حفظ می‌کند. */
.tl-kind-badge { display: inline-block; font-size: 10px; padding: 1px 8px; border-radius: 20px;
  background: var(--bg,#eef2f7); color: var(--ink-soft,#64748b); font-weight: 700;
  margin-inline-end: 6px; vertical-align: middle; }

@media (max-width: 1080px){ .info-grid { grid-template-columns: 1fr; } .m-lower { grid-template-columns: 1fr; } }
@media (max-width: 700px){ .m-head .mh-act { margin-inline-start: 0; width: 100%; } }

/* =========================================================
   Fix: خوانایی دکمه‌های هدر مودال پرونده
   Scope فقط برای .modal.file-modal .m-head است تا کل سیستم تغییر نکند.
   ========================================================= */
.modal.file-modal .m-head .mh-act .btn {
  min-height: 34px;
  border-radius: 9px;
  font-weight: 800;
  text-shadow: none;
}

.modal.file-modal .m-head .mh-act .btn-o,
.modal.file-modal .m-head .mh-act .btn-outline {
  background: rgba(15, 37, 71, .92) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(227, 200, 105, .72) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.22) !important;
}

.modal.file-modal .m-head .mh-act .btn-o:hover,
.modal.file-modal .m-head .mh-act .btn-outline:hover {
  background: var(--gold) !important;
  color: var(--navy) !important;
  border-color: var(--gold-light) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.28) !important;
}

.modal.file-modal .m-head .mh-act .btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important;
  color: var(--navy) !important;
  border: 1.5px solid rgba(255,255,255,.65) !important;
  box-shadow: 0 5px 16px rgba(0,0,0,.25) !important;
}

.modal.file-modal .m-head .mh-act .btn-gold:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* ===================================================================
   UI Refresh v1 — الهام از SMS.ir
   هدف: ظاهر درشت‌تر، خلوت‌تر، کارت‌محور، touch-friendly و مدرن
   فقط CSS — بدون تغییر منطق، API، دیتابیس یا JS
   =================================================================== */

:root {
  --navy: #08264a;
  --navy-2: #0d3563;
  --navy-light: #1565a8;
  --gold: #ffc20a;
  --gold-light: #ffd957;
  --gold-soft: #fff7d8;
  --bg: #f3f6fc;
  --bg-soft: #f8faff;
  --card: #ffffff;
  --ink: #17233d;
  --ink-soft: #6b7890;
  --ink-faint: #a2adbf;
  --line: #e3eaf5;
  --line-soft: #edf2f9;
  --green: #168a45;
  --green-bg: #e3f9ec;
  --red: #d33131;
  --red-bg: #ffe8e8;
  --amber: #c47c00;
  --amber-bg: #fff4d6;
  --blue-bg: #e6f0ff;
  --radius: 22px;
  --radius-sm: 16px;
  --shadow-xs: 0 1px 3px rgba(8,38,74,.06);
  --shadow: 0 10px 28px rgba(8,38,74,.07);
  --shadow-md: 0 16px 40px rgba(8,38,74,.11);
  --shadow-lg: 0 28px 80px rgba(8,38,74,.24);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,194,10,.13), transparent 28%),
    radial-gradient(circle at 86% 8%, rgba(21,101,168,.11), transparent 30%),
    linear-gradient(180deg, #f6f8fe 0%, #eef3fb 100%);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.85;
}

/* Inputs: درشت‌تر و راحت‌تر برای موبایل */
label { font-size: 13.5px; color: #5f6d84; margin: 16px 0 8px; }
input, select, textarea {
  min-height: 46px;
  padding: 13px 15px;
  border-radius: 15px;
  border: 1.5px solid #dfe7f2;
  font-size: 14.5px;
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  border-color: #1f78bd;
  box-shadow: 0 0 0 4px rgba(31,120,189,.12);
}

/* Buttons: بزرگ، واضح، قابل لمس */
.btn {
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -.1px;
  box-shadow: 0 8px 18px rgba(8,38,74,.12);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(8,38,74,.18); }
.btn-sm { min-height: 38px; padding: 9px 16px; font-size: 13px; border-radius: 13px; }
.btn-gold {
  background: linear-gradient(135deg, #ffd957 0%, #ffc20a 60%, #f3ae00 100%);
  color: #08264a;
  box-shadow: 0 10px 22px rgba(255,194,10,.25);
}
.btn-outline {
  background: #fff;
  color: #0b315d;
  border: 1.5px solid #d8e2ef;
  box-shadow: 0 6px 14px rgba(8,38,74,.06);
}
.btn-outline:hover { background: #f8fbff; border-color: #ffc20a; color: #08264a; }
.btn-green { background: linear-gradient(135deg, #168a45, #0f7137); }
.btn-red { background: linear-gradient(135deg, #d33131, #b82222); }

/* Sidebar: رسمی‌تر، نرم‌تر، خواناتر */
.sidebar {
  background:
    radial-gradient(circle at 55% 4%, rgba(255,194,10,.16), transparent 26%),
    linear-gradient(180deg, #061f3f 0%, #0b315d 58%, #08264a 100%);
  box-shadow: -10px 0 36px rgba(8,38,74,.16);
}
.sidebar-head { padding: 24px 20px; }
.sidebar-head .logo {
  width: 54px; height: 54px; border-radius: 18px;
  background: linear-gradient(135deg, #ffd957, #ffc20a);
  box-shadow: 0 12px 26px rgba(255,194,10,.30);
}
.sidebar-head .t { font-size: 15.5px; }
.sidebar-head .s { font-size: 12px; color: rgba(255,255,255,.56); }
.nav { padding: 18px 12px; }
.nav-item {
  min-height: 48px;
  padding: 13px 15px;
  border-radius: 16px;
  font-size: 14.5px;
  margin-bottom: 7px;
  color: rgba(255,255,255,.74);
}
.nav-item.active {
  background: linear-gradient(135deg, #ffd957 0%, #ffc20a 100%);
  color: #071f3e;
  box-shadow: 0 12px 26px rgba(255,194,10,.28);
}
.nav-sep { font-size: 11.5px; padding-top: 18px; color: rgba(255,255,255,.42); }
.user-chip { border-radius: 18px; padding: 12px; background: rgba(255,255,255,.08); }
.user-chip .av { width: 44px; height: 44px; background: #ffc20a; }

/* Topbar */
.topbar {
  height: 72px;
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(219,228,240,.85);
  box-shadow: 0 8px 24px rgba(8,38,74,.04);
}
.topbar .page-title { font-size: 19px; color: #071f3e; }
.bell {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e4ebf5; box-shadow: 0 6px 14px rgba(8,38,74,.06);
}
.bell:hover { background: var(--gold-soft); }
.content { padding: 32px; }

/* Cards and stats: بزرگ، خلوت، نفس‌دار */
.grid { gap: 22px; }
.card {
  border-radius: 26px;
  padding: 28px;
  border: 1px solid rgba(222,231,244,.92);
  box-shadow: 0 14px 36px rgba(8,38,74,.07);
}
.card-h { margin-bottom: 24px; }
.card-h h3 { font-size: 17px; color: #071f3e; }
.stat {
  min-height: 132px;
  border-radius: 26px;
  padding: 28px 26px;
  box-shadow: 0 14px 36px rgba(8,38,74,.07);
  border: 1px solid rgba(222,231,244,.92);
  background:
    radial-gradient(circle at 15% 18%, rgba(255,194,10,.10), transparent 36%),
    #fff;
}
.stat::before { width: 7px; top: 18px; bottom: 18px; border-radius: 999px 0 0 999px; }
.stat .v { font-size: 36px; font-weight: 900; color: #071f3e; }
.stat .l { font-size: 14px; color: #6b7890; margin-top: 8px; }

/* Tables: مثل پنل‌های مدرن، خواناتر */
.table-wrap { border-radius: 20px; background: #fff; }
table { font-size: 14.5px; }
th {
  padding: 17px 18px;
  background: #f4f7fc;
  color: #66758e;
  font-size: 13px;
  border-bottom: 1px solid #dfe8f4;
}
td { padding: 17px 18px; border-bottom: 1px solid #edf2f9; }
tbody tr { transition: background .15s, transform .15s; }
tbody tr:hover { background: #fbfdff; }
.badge-s {
  min-height: 34px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
}
.b-reviewing { background: #e8f1ff; color: #1459a0; }
.b-clearing { background: #fff2ca; color: #8c5b00; }
.b-completed { background: #e0f8ea; color: #126d38; }
.b-archived { background: #e9eef5; color: #68758a; }

/* Toolbar */
.toolbar { gap: 14px; margin-bottom: 24px; }
.toolbar .search { min-width: 280px; }

/* Modal: مدرن‌تر و خواناتر */
.modal-bg { background: rgba(8, 31, 62, .58); backdrop-filter: blur(8px); padding: 38px 16px; }
.modal { border-radius: 28px; box-shadow: 0 34px 90px rgba(8,38,74,.30); }
.modal.lg { max-width: 980px; }
.modal-h { padding: 24px 30px; background: #f7faff; }
.modal-h h3 { font-size: 18px; }
.modal-b { padding: 30px; }
.modal-f { padding: 22px 30px; background: #f8fbff; }
.close-x { width: 42px; height: 42px; background: #fff; border: 1px solid #e2eaf4; }

/* File modal header: هدر قوی‌تر + دکمه‌های واضح */
.modal.file-modal { max-width: 1060px; }
.modal.file-modal .m-head {
  background:
    radial-gradient(circle at 16% 10%, rgba(255,194,10,.18), transparent 35%),
    linear-gradient(135deg, #071f3e 0%, #0b315d 100%) !important;
  color: #fff;
  padding: 26px 30px !important;
}
.modal.file-modal .m-head .mh-num { color: #fff !important; font-size: 22px !important; font-weight: 900 !important; }
.modal.file-modal .m-head .mh-cust { color: rgba(255,255,255,.72) !important; font-size: 15px !important; }
.modal.file-modal .m-head .mh-badge {
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.16);
  min-height: 32px;
  font-size: 13px;
}
.modal.file-modal .m-head .mh-act .btn-o,
.modal.file-modal .m-head .mh-act .btn-outline,
.modal.file-modal .m-head .mh-act .btn:not(.btn-gold) {
  background: #ffffff !important;
  color: #08264a !important;
  border: 1.8px solid #ffc20a !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}
.modal.file-modal .m-head .mh-act .btn-o:hover,
.modal.file-modal .m-head .mh-act .btn-outline:hover,
.modal.file-modal .m-head .mh-act .btn:not(.btn-gold):hover {
  background: #fff7d8 !important;
  color: #071f3e !important;
  border-color: #ffd957 !important;
}
.modal.file-modal .m-head .mh-act .btn-gold {
  background: linear-gradient(135deg, #ffd957, #ffc20a) !important;
  color: #071f3e !important;
  border: 1.8px solid rgba(255,255,255,.55) !important;
}

/* Info cards */
.info-grid { gap: 20px !important; }
.info-card, .m-panel {
  border-radius: 24px !important;
  border: 1px solid #e1e9f4 !important;
  box-shadow: 0 12px 30px rgba(8,38,74,.07) !important;
}
.info-card h4, .m-panel h4 { font-size: 16px !important; }
.info-row { padding: 10px 0 !important; }
.info-row .k { font-size: 14px !important; }
.info-row .v { font-size: 14.5px !important; font-weight: 750 !important; }

/* Stepper: بزرگ‌تر و قابل لمس */
.step { padding-right: 20px !important; margin-bottom: 16px !important; }
.step::before { right: 6px !important; width: 3px !important; }
.step .dot { width: 28px !important; height: 28px !important; right: -8px !important; font-size: 15px !important; }
.step .body { border-radius: 20px !important; padding: 18px 20px !important; }
.step .st .tt { font-size: 15.5px !important; font-weight: 900 !important; }
.step .meta { font-size: 13.5px !important; }
.step .acts { margin-top: 14px !important; gap: 10px !important; }
.step .acts .btn { min-height: 42px; }
.tag { font-size: 12px !important; padding: 5px 12px !important; }
.lic-grid { gap: 12px !important; }
.lic { min-height: 54px; border-radius: 18px !important; padding: 14px 16px !important; }
.lic .cb { width: 26px !important; height: 26px !important; border-radius: 9px !important; }
.lic .nm { font-size: 14.5px !important; font-weight: 800 !important; }

/* Login */
.login-card { border-radius: 28px; max-width: 430px; padding: 42px 34px; }
.login-logo { border-radius: 22px; background: linear-gradient(135deg, #ffd957, #ffc20a); color: #071f3e; }

/* Mobile first improvements */
@media (max-width: 880px) {
  body { font-size: 15.5px; }
  .content { padding: 18px; }
  .topbar { height: 66px; padding: 0 16px; }
  .card, .stat { border-radius: 22px; padding: 22px; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
  .modal-bg { padding: 0; align-items: stretch; }
  .modal, .modal.lg, .modal.file-modal { width: 100%; max-width: none; min-height: 100vh; border-radius: 0; }
  .modal-b { max-height: calc(100vh - 160px); padding: 18px; }
  .modal-f { position: sticky; bottom: 0; z-index: 5; }
  .m-head { flex-direction: column; align-items: stretch !important; }
  .m-head .mh-act { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px !important; }
  .m-head .mh-act .btn { width: 100%; min-height: 46px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .search, .toolbar select, .toolbar .btn { width: 100%; max-width: none !important; }
  .lic-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 620px) {
  .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap tr, .table-wrap th, .table-wrap td { display: block; }
  .table-wrap thead { display: none; }
  .table-wrap tr {
    background: #fff;
    border: 1px solid #e1e9f4;
    border-radius: 20px;
    margin-bottom: 14px;
    padding: 12px;
    box-shadow: 0 8px 22px rgba(8,38,74,.06);
  }
  .table-wrap td {
    border-bottom: 0;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14.5px;
  }
  .table-wrap td:last-child { justify-content: flex-start; }
  .btn { width: auto; }
}

/* Route + jan badges in file modal header */
.modal.file-modal .m-head .mh-badge.route-badge {
  border-color: rgba(255,255,255,.32) !important;
  color: #fff !important;
  font-weight: 900 !important;
}
.modal.file-modal .m-head .mh-badge.route-green {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  border-color: rgba(187,247,208,.85) !important;
  color: #fff !important;
}
.modal.file-modal .m-head .mh-badge.route-yellow {
  background: linear-gradient(135deg, #f59e0b, #facc15) !important;
  border-color: rgba(254,240,138,.9) !important;
  color: #08264a !important;
}
.modal.file-modal .m-head .mh-badge.route-red {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border-color: rgba(254,202,202,.85) !important;
  color: #fff !important;
}
.modal.file-modal .m-head .mh-badge.jan-badge {
  background: rgba(255,255,255,.92) !important;
  color: #08264a !important;
  border: 1.5px solid #ffc20a !important;
  font-weight: 900 !important;
}


/* Required documents inside loading permit stage */
.required-docs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.req-doc{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;border:1px solid var(--line);background:#fff;color:var(--muted)}
.req-doc.ok{background:#e8f8ef;color:#137a3a;border-color:#bfeccd}
.req-doc.miss{background:#fff7e0;color:#8a5a00;border-color:#f3d27a}
.step .acts .btn{margin-inline-start:6px;margin-top:6px}

/* Transport company workflow controls */
.transport-info-box{
  display:grid;
  gap:8px;
  padding:10px;
  border:1px solid rgba(15, 35, 65, .10);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  margin-top:8px;
}
.transport-info-box label{
  font-weight:800;
  color:var(--navy);
  font-size:12px;
}
.transport-info-box textarea{
  width:100%;
  min-height:74px;
  resize:vertical;
  border:1px solid rgba(15,35,65,.18);
  border-radius:14px;
  padding:10px 12px;
  font-family:inherit;
  line-height:1.9;
  background:#fff;
}
.transport-info-box textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,171,82,.16);
}
.transport-docs{margin-top:2px}
.step .acts .btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.15)}


/* Transport company registry + warehouse receipt upload */
.warehouse-doc-box{
  border:1px dashed rgba(19,54,95,.28);
  border-radius:18px;
  padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,255,.82));
}
.warehouse-doc-box input[type="file"]{
  width:100%;
  padding:12px;
  border:1px solid rgba(19,54,95,.18);
  border-radius:14px;
  background:#fff;
}
.transport-settings-page .form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.transport-settings-page .form-grid .full{ grid-column:1/-1; }
.transport-settings-page textarea{ min-height:120px; }
@media (max-width:720px){
  .transport-settings-page .form-grid{ grid-template-columns:1fr; }
}

/* Transport companies registry v3 */
.transport-company-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.transport-company-card{border:1px solid rgba(15,36,69,.12);border-radius:18px;background:#fff;padding:16px;box-shadow:0 8px 24px rgba(15,36,69,.07)}
.transport-company-card .tc-main{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.transport-company-card .tc-main b{font-size:15px;color:#0f2445}
.transport-company-card .tc-main span{font-size:13px;color:#53647a}
.transport-company-card .tc-phones{white-space:pre-wrap;font-size:13px;color:#53647a;min-height:32px;border-radius:12px;background:#f6f8fb;padding:9px;margin-bottom:12px;direction:ltr;text-align:left}
.transport-company-card .tc-actions{display:flex;gap:8px;flex-wrap:wrap}
.warn-box{border:1px dashed #d8a624;background:#fff8df;color:#5d4300;border-radius:14px;padding:10px 12px;font-size:13px;margin-bottom:10px}
.transport-info-box select{width:100%;min-height:42px;border:1px solid rgba(15,36,69,.18);border-radius:14px;background:#fff;padding:8px 12px;margin:6px 0 10px;color:#0f2445}

/* Correspondence / نامه‌نگاری */
.correspondence-page .filters-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.correspondence-page .filters-row .search{min-width:260px;flex:1}
.corr-table td{vertical-align:top}
.corr-status{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;white-space:nowrap}
.corr-status.corr-pending{background:#fff7e6;color:#a16207;border:1px solid #fde68a}
.corr-status.corr-done{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.corr-status.corr-canceled{background:#f8fafc;color:#64748b;border:1px solid #cbd5e1}
.small-note{margin-top:5px;font-size:12px;line-height:1.8;max-width:380px}
.corr-form .muted{font-size:12px;line-height:1.7;margin-top:5px}
@media (max-width:700px){
  .correspondence-page .filters-row{display:block}
  .correspondence-page .filters-row>*{width:100%;margin-bottom:8px}
  .corr-table th:nth-child(6), .corr-table td:nth-child(6){display:none}
}

/* Customer document inbox (O04/O05) -- TT24_PATCH2_CUSTOMER_DOCUMENT_INBOX_V1 */
.cdu-inbox-page .filters-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.cdu-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.cdu-tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 18px;font-size:13px;font-weight:700;color:#53647a;cursor:pointer}
.cdu-tab.active{background:var(--navy,#0f2445);color:#fff;border-color:var(--navy,#0f2445)}
.cdu-table td{vertical-align:top}
.cdu-row-actions{display:flex;gap:6px;flex-wrap:wrap}
.cdu-file-pick{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);background:#fff;border-radius:12px;cursor:pointer;text-align:right;margin-bottom:6px}
.cdu-file-pick:hover{background:#f4f7fb}
.cdu-convert-choice p{margin:0 0 10px}
@media (max-width:700px){
  .cdu-inbox-page .filters-row{display:block}
  .cdu-inbox-page .filters-row>*{width:100%;margin-bottom:8px}
  .cdu-table th:nth-child(2), .cdu-table td:nth-child(2){display:none}
}

/* Navigation grouping */
.nav-group{margin:4px 0}
.nav-parent{width:100%;border:0;background:transparent;text-align:right;display:flex;align-items:center;gap:8px;cursor:pointer}
.nav-parent .chev{margin-right:auto;transition:transform .18s ease;font-size:12px;opacity:.7}
.nav-group.open .nav-parent .chev{transform:rotate(180deg)}
.nav-sublist{display:none;padding-right:12px;margin:3px 0 6px;border-right:1px solid rgba(255,255,255,.12)}
.nav-group.open .nav-sublist{display:block}
.nav-item.nav-sub{font-size:13px;padding:9px 12px;margin:2px 0;opacity:.92}

/* Dashboard correspondence */
.dashboard-correspondence{margin-top:16px}
.dash-corr-cards{display:grid;gap:10px}
.dash-corr-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:rgba(255,255,255,.72);cursor:pointer;transition:.18s ease}
.dash-corr-item:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}

/* Correspondence module */
.corr-table tr.clickable{cursor:pointer}
.corr-table tr.clickable:hover{background:rgba(15,76,129,.05)}
.doc-count{display:inline-flex;min-width:28px;justify-content:center;border-radius:999px;background:#eef4ff;color:#0f4c81;padding:3px 8px;font-weight:800}
.corr-kotaj-search-wrap{position:relative}
.corr-search-results{position:absolute;z-index:20;top:82px;right:0;left:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:8px;max-height:250px;overflow:auto}
.corr-search-results button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:0;background:#fff;border-radius:12px;cursor:pointer;text-align:right}
.corr-search-results button:hover{background:#f4f7fb}
.corr-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.info-grid.mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}
.info-grid.mini>div{border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px}
.info-grid.mini span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.note-box{border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px;margin:10px 0}
.note-box p{margin:6px 0 0;white-space:pre-wrap;line-height:1.8}
.corr-docs{margin-top:12px}
.section-title{font-weight:900;margin:10px 0;color:var(--navy)}
.corr-doc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;margin:6px 0}
.empty.small{padding:12px;font-size:13px}
@media(max-width:720px){.info-grid.mini{grid-template-columns:1fr}.dash-corr-item,.corr-doc-row{align-items:flex-start;flex-direction:column}.corr-search-results{top:78px}}

/* ===== Brand integration: لوگوی تامین ترخیص ۲۴ ===== */
.login-logo{
  width:112px !important;
  height:112px !important;
  margin:0 auto 16px !important;
  border-radius:30px !important;
  background:#fff !important;
  border:1px solid rgba(8,38,74,.08) !important;
  box-shadow:0 18px 44px rgba(8,38,74,.14) !important;
  padding:10px !important;
  overflow:hidden !important;
}
.login-logo img{width:100%;height:100%;object-fit:contain;display:block}
.sidebar-head .brand-logo,
.sidebar-head .logo.brand-logo{
  width:64px !important;
  height:64px !important;
  border-radius:20px !important;
  background:#fff !important;
  padding:6px !important;
  box-shadow:0 14px 32px rgba(0,0,0,.20), 0 0 0 1px rgba(255,255,255,.16) inset !important;
  overflow:hidden !important;
}
.sidebar-head .brand-logo img{width:100%;height:100%;object-fit:contain;display:block}
.topbar-brand{display:flex;align-items:center;margin-inline-start:10px;opacity:.78}
.topbar-brand img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(8,38,74,.12))}
.sidebar::after{
  content:"";
  position:absolute;
  left:16px;bottom:96px;
  width:150px;height:150px;
  background:url('logo.png') center/contain no-repeat;
  opacity:.055;
  pointer-events:none;
  filter:grayscale(1) brightness(2.1);
}
.brand-hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:22px 28px;
  margin-bottom:22px;
  border-radius:30px;
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,194,10,.24), transparent 34%),
    linear-gradient(135deg,#061f3f 0%,#0b4f7a 100%);
  box-shadow:0 18px 44px rgba(8,38,74,.16);
  color:#fff;
}
.brand-hero::before{
  content:"";
  position:absolute;
  inset:auto -20px -65px auto;
  width:235px;height:235px;
  background:url('logo.png') center/contain no-repeat;
  opacity:.13;
  filter:brightness(1.8) grayscale(.2);
}
.brand-hero-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px}
.brand-hero-text b{font-size:22px;font-weight:950;letter-spacing:-.5px}
.brand-hero-text span{font-size:14px;color:rgba(255,255,255,.72)}
.brand-hero>img{position:relative;z-index:1;width:90px;height:74px;object-fit:contain;background:rgba(255,255,255,.95);border-radius:22px;padding:8px;box-shadow:0 16px 34px rgba(0,0,0,.18)}
.card,.stat,.modal,.info-card,.m-panel{position:relative;overflow:hidden}
.card::after,.stat::after{
  content:"";
  position:absolute;
  left:16px;bottom:14px;
  width:92px;height:92px;
  background:url('logo.png') center/contain no-repeat;
  opacity:.025;
  pointer-events:none;
}
.modal.file-modal .m-head::after{
  content:"";
  position:absolute;
  left:30px;top:20px;
  width:128px;height:105px;
  background:url('logo.png') center/contain no-repeat;
  opacity:.10;
  pointer-events:none;
  filter:brightness(2);
}
@media (max-width: 880px){
  .topbar-brand{display:none}
  .brand-hero{padding:18px 20px;border-radius:24px}
  .brand-hero>img{width:74px;height:62px;border-radius:18px}
  .brand-hero-text b{font-size:19px}
}

/* ===================================================================
   Premium Minimal SaaS UI Refresh v2 — Tamin Tarkhis 24
   Light-first design system inspired by clean B2B SaaS apps.
   Logic-safe: CSS only. No JS/PHP behavior is changed.
   =================================================================== */
:root{
  --brand-50:#EFF9FC;
  --brand-100:#D8F0F7;
  --brand-200:#B7E3EF;
  --brand-300:#82D0E3;
  --brand-400:#40B3D1;
  --brand-500:#0B87A8;
  --brand-600:#087492;
  --brand-700:#075F78;
  --brand-800:#064B60;
  --brand-900:#053848;
  --brand-950:#021F2A;
  --accent-50:#FFF9E8;
  --accent-100:#FFF0BF;
  --accent-300:#FFD95A;
  --accent-500:#E4B51C;
  --accent-600:#C99B0F;
  --accent-700:#A87908;
  --gray-50:#F8FAFC;
  --gray-100:#F1F5F9;
  --gray-200:#E2E8F0;
  --gray-300:#CBD5E1;
  --gray-400:#94A3B8;
  --gray-500:#64748B;
  --gray-600:#475569;
  --gray-700:#334155;
  --gray-800:#1E293B;
  --gray-900:#0F172A;
  --gray-950:#020617;
  --bg-page:#F6F8FB;
  --bg-card:#FFFFFF;
  --border-subtle:#E7ECF2;
  --border-strong:#CBD5E1;
  --text-heading:#0F172A;
  --text-body:#334155;
  --text-muted:#64748B;
  --text-disabled:#94A3B8;
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-2xl:24px;
  --radius-full:999px;
  --shadow-soft:0 8px 24px rgba(15,23,42,.05);
  --shadow-lift:0 18px 48px rgba(15,23,42,.10);
  --ease-move:cubic-bezier(.2,0,0,1);
  --navy:var(--brand-900);
  --navy-2:var(--brand-800);
  --navy-light:var(--brand-500);
  --gold:var(--accent-500);
  --gold-light:var(--accent-300);
  --bg:var(--bg-page);
  --bg-soft:var(--gray-50);
  --card:var(--bg-card);
  --ink:var(--text-heading);
  --ink-soft:var(--text-muted);
  --ink-faint:var(--gray-400);
  --line:var(--border-subtle);
  --line-soft:#EEF2F7;
  --shadow:var(--shadow-soft);
  --shadow-md:var(--shadow-lift);
  --sidebar-w:280px;
}

html{background:var(--bg-page);scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 12% 4%, rgba(11,135,168,.07), transparent 28%),
    linear-gradient(180deg,#F8FAFC 0%,#F4F7FB 100%) !important;
  color:var(--text-body) !important;
  font-size:14.5px !important;
  line-height:1.85 !important;
}

/* App shell */
.sidebar{
  width:var(--sidebar-w) !important;
  background:rgba(255,255,255,.92) !important;
  color:var(--text-body) !important;
  border-left:1px solid rgba(226,232,240,.9) !important;
  box-shadow:-18px 0 48px rgba(15,23,42,.05) !important;
  backdrop-filter:blur(18px) !important;
}
.main{margin-right:var(--sidebar-w) !important}
.sidebar-head{
  padding:20px 18px !important;
  border-bottom:1px solid var(--border-subtle) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,250,252,.85)) !important;
}
.sidebar-head .t{color:var(--text-heading) !important;font-weight:850 !important;letter-spacing:-.2px}
.sidebar-head .s{color:var(--text-muted) !important;font-weight:600 !important}
.sidebar-head .brand-logo,
.sidebar-head .logo.brand-logo{
  width:54px !important;height:54px !important;border-radius:18px !important;
  box-shadow:0 10px 26px rgba(11,135,168,.12),0 0 0 1px rgba(226,232,240,.9) inset !important;
}
.sidebar::after{opacity:.035 !important;filter:none !important}
.nav{padding:16px 14px !important}
.nav-sep{
  color:var(--gray-500) !important;
  font-size:11px !important;
  letter-spacing:0 !important;
  padding:18px 12px 8px !important;
}
.nav-item{
  color:var(--gray-700) !important;
  min-height:44px !important;
  padding:11px 13px !important;
  border-radius:14px !important;
  font-weight:700 !important;
  transition:background .18s var(--ease-move),color .18s var(--ease-move),transform .12s var(--ease-move),box-shadow .18s var(--ease-move) !important;
}
.nav-item .ico{color:var(--gray-500) !important}
.nav-item:hover{
  background:var(--gray-100) !important;
  color:var(--brand-800) !important;
  transform:translateX(-1px) !important;
}
.nav-item:hover .ico{color:var(--brand-600) !important}
.nav-item.active{
  background:linear-gradient(180deg,var(--brand-50),#fff) !important;
  color:var(--brand-800) !important;
  box-shadow:0 8px 22px rgba(11,135,168,.10),0 0 0 1px var(--brand-100) inset !important;
}
.nav-item.active .ico{color:var(--brand-600) !important}
.nav-parent{color:var(--gray-700) !important}
.nav-sublist{
  border-right:1px solid var(--border-subtle) !important;
  margin-right:14px !important;
  padding-right:8px !important;
}
.nav-item.nav-sub{font-size:13px !important;color:var(--gray-600) !important;min-height:38px !important}
.sidebar-foot{border-top:1px solid var(--border-subtle) !important;background:rgba(248,250,252,.65) !important}
.user-chip{background:#fff !important;border:1px solid var(--border-subtle) !important;box-shadow:var(--shadow-xs) !important}
.user-chip .nm{color:var(--text-heading) !important}
.user-chip .rl{color:var(--text-muted) !important}
.user-chip .av{background:var(--brand-50) !important;color:var(--brand-700) !important;box-shadow:none !important}

.topbar{
  height:68px !important;
  background:rgba(255,255,255,.82) !important;
  border-bottom:1px solid var(--border-subtle) !important;
  backdrop-filter:blur(18px) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset !important;
}
.topbar .page-title{color:var(--text-heading) !important;font-size:18px !important;font-weight:850 !important}
.bell{background:#fff !important;border:1px solid var(--border-subtle) !important;box-shadow:var(--shadow-xs) !important}
.bell:hover{background:var(--brand-50) !important;color:var(--brand-700) !important}
.content{padding:28px !important;max-width:1480px;margin:0 auto;width:100%}

/* Brand hero */
.brand-hero{
  background:
    radial-gradient(circle at 12% 18%, rgba(228,181,28,.17), transparent 30%),
    linear-gradient(135deg,var(--brand-950) 0%,var(--brand-800) 55%,var(--brand-700) 100%) !important;
  border-radius:32px !important;
  padding:26px 30px !important;
  box-shadow:0 22px 60px rgba(2,31,42,.17) !important;
}
.brand-hero-text b{font-size:24px !important;font-weight:950 !important}
.brand-hero-text span{font-size:14.5px !important;color:rgba(255,255,255,.76) !important}
.brand-hero>img{background:#fff !important;border-radius:24px !important;box-shadow:0 18px 40px rgba(0,0,0,.16) !important}

/* Cards */
.card,.stat,.info-card,.m-panel,.transport-company-card,.note-box,.info-grid.mini>div{
  background:rgba(255,255,255,.94) !important;
  border:1px solid var(--border-subtle) !important;
  border-radius:24px !important;
  box-shadow:var(--shadow-soft) !important;
}
.card{padding:24px !important}
.card-h h3,.m-panel h4,.info-card h4,.section-title{color:var(--text-heading) !important;font-weight:900 !important;letter-spacing:-.2px}
.card:hover,.stat:hover,.transport-company-card:hover{box-shadow:var(--shadow-lift) !important;transform:translateY(-2px) !important}
.stat{
  min-height:126px !important;
  padding:24px !important;
  overflow:hidden !important;
}
.stat::before{
  right:0 !important;width:4px !important;border-radius:8px 0 0 8px !important;background:var(--brand-500) !important;
}
.stat .v{color:var(--text-heading) !important;font-size:32px !important;letter-spacing:-.6px !important}
.stat .l{color:var(--text-muted) !important;font-weight:650 !important;font-size:13px !important}

/* Tables */
.table-wrap{border:1px solid var(--border-subtle) !important;border-radius:20px !important;overflow:hidden !important;background:#fff !important}
table{font-size:13.5px !important}
th{
  background:var(--gray-50) !important;
  color:var(--gray-600) !important;
  padding:15px 18px !important;
  border-bottom:1px solid var(--border-subtle) !important;
  font-size:12px !important;
  font-weight:850 !important;
}
td{padding:16px 18px !important;border-bottom:1px solid #EEF2F7 !important;color:var(--text-body) !important}
tbody tr:hover{background:var(--brand-50) !important}

/* Buttons */
.btn{
  min-height:40px !important;
  border-radius:14px !important;
  font-size:14px !important;
  font-weight:800 !important;
  padding:10px 18px !important;
  background:var(--brand-600) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(11,135,168,.18) !important;
  border:1px solid transparent !important;
  transition:background .18s var(--ease-move),border-color .18s var(--ease-move),box-shadow .18s var(--ease-move),transform .10s var(--ease-move) !important;
}
.btn:hover{background:var(--brand-700) !important;box-shadow:0 14px 28px rgba(11,135,168,.22) !important;transform:translateY(-1px) !important}
.btn:active{transform:scale(.985) !important}
.btn-sm{min-height:34px !important;padding:7px 13px !important;font-size:12.5px !important;border-radius:12px !important}
.btn-gold{
  background:linear-gradient(180deg,var(--accent-300),var(--accent-500)) !important;
  color:#2F2503 !important;
  border-color:rgba(168,121,8,.18) !important;
  box-shadow:0 10px 22px rgba(228,181,28,.22) !important;
}
.btn-gold:hover{background:linear-gradient(180deg,#FFE176,var(--accent-500)) !important}
.btn-outline,.btn-o{
  background:#fff !important;
  color:var(--brand-800) !important;
  border:1px solid var(--border-strong) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
}
.btn-outline:hover,.btn-o:hover{background:var(--brand-50) !important;border-color:var(--brand-200) !important;color:var(--brand-900) !important}
.btn-green{background:#16A34A !important;color:#fff !important;box-shadow:0 10px 22px rgba(22,163,74,.18) !important}
.btn-green:hover{background:#15803D !important}
.btn-red{background:#DC2626 !important;color:#fff !important;box-shadow:0 10px 22px rgba(220,38,38,.18) !important}
.btn-red:hover{background:#B91C1C !important}

/* Forms */
label{color:var(--gray-600) !important;font-size:12.5px !important;font-weight:800 !important;margin-bottom:8px !important}
input,select,textarea{
  min-height:44px !important;
  border:1px solid var(--border-strong) !important;
  border-radius:14px !important;
  background:#fff !important;
  color:var(--text-body) !important;
  padding:11px 14px !important;
  font-size:14px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.02) !important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand-500) !important;
  box-shadow:0 0 0 4px var(--brand-100) !important;
}
input::placeholder,textarea::placeholder{color:var(--gray-400) !important}
textarea{min-height:112px !important;line-height:1.8 !important}
.toolbar{gap:12px !important;margin-bottom:18px !important}
.toolbar .search{min-width:280px !important}

/* Badges */
.badge-s,.corr-status,.mh-badge,.tag,.doc-count{
  border-radius:999px !important;
  min-height:28px !important;
  padding:5px 11px !important;
  font-size:12px !important;
  font-weight:850 !important;
  border:1px solid transparent !important;
}
.b-reviewing{background:#EFF6FF !important;color:#1D4ED8 !important;border-color:#BFDBFE !important}
.b-clearing{background:#FFF7ED !important;color:#B45309 !important;border-color:#FED7AA !important}
.b-completed,.tag.done{background:#ECFDF3 !important;color:#15803D !important;border-color:#BBF7D0 !important}
.b-archived{background:#F1F5F9 !important;color:#475569 !important;border-color:#CBD5E1 !important}
.corr-status.corr-pending{background:#FFF7ED !important;color:#B45309 !important;border-color:#FED7AA !important}
.corr-status.corr-done{background:#ECFDF3 !important;color:#15803D !important;border-color:#BBF7D0 !important}
.corr-status.corr-canceled{background:#F1F5F9 !important;color:#475569 !important;border-color:#CBD5E1 !important}

/* Modals */
.modal-bg{background:rgba(15,23,42,.48) !important;backdrop-filter:blur(10px) !important;padding:34px 16px !important}
.modal{
  border-radius:28px !important;
  border:1px solid rgba(255,255,255,.82) !important;
  box-shadow:0 28px 88px rgba(15,23,42,.28) !important;
  overflow:hidden !important;
}
.modal-h{
  background:rgba(248,250,252,.94) !important;
  border-bottom:1px solid var(--border-subtle) !important;
  padding:20px 26px !important;
}
.modal-h h3{color:var(--text-heading) !important;font-size:18px !important;font-weight:900 !important}
.modal-b{padding:26px !important}
.modal-f{
  background:rgba(248,250,252,.94) !important;
  border-top:1px solid var(--border-subtle) !important;
  padding:18px 26px !important;
}
.close-x{background:#fff !important;border:1px solid var(--border-subtle) !important;color:var(--gray-600) !important}
.close-x:hover{background:var(--error-bg) !important;color:var(--error-text) !important;border-color:#FECACA !important}
.modal.file-modal .m-head{
  background:
    radial-gradient(circle at 18% 10%, rgba(228,181,28,.18), transparent 26%),
    linear-gradient(135deg,var(--brand-950),var(--brand-800)) !important;
  color:#fff !important;
  border:0 !important;
}
.modal.file-modal .m-head .mh-num{font-size:25px !important;font-weight:950 !important;color:#fff !important}
.modal.file-modal .m-head .mh-cust{color:rgba(255,255,255,.76) !important;font-weight:700 !important}
.modal.file-modal .m-head .mh-badge{background:rgba(255,255,255,.12) !important;color:#fff !important;border-color:rgba(255,255,255,.18) !important}
.modal.file-modal .m-head .mh-badge.route-green{background:#ECFDF3 !important;color:#15803D !important;border-color:#BBF7D0 !important}
.modal.file-modal .m-head .mh-badge.route-yellow{background:#FFF7ED !important;color:#B45309 !important;border-color:#FED7AA !important}
.modal.file-modal .m-head .mh-badge.route-red{background:#FEF2F2 !important;color:#B91C1C !important;border-color:#FECACA !important}
.modal.file-modal .m-head .btn-o,
.modal.file-modal .m-head .btn-outline{
  background:#fff !important;
  color:var(--brand-900) !important;
  border-color:var(--accent-500) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.12) !important;
}

/* Workflow steps */
.step{
  border-radius:20px !important;
  padding:16px !important;
  border:1px solid var(--border-subtle) !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(15,23,42,.03) !important;
}
.step.done{background:#ECFDF3 !important;border-color:#BBF7D0 !important}
.step.need,.step.red{background:#FFF7ED !important;border-color:#FED7AA !important}
.step.wait{background:#F8FAFC !important;border-color:#E2E8F0 !important}
.step .dot{box-shadow:0 0 0 4px rgba(255,255,255,.8) !important}
.step .tt{color:var(--text-heading) !important;font-weight:900 !important}
.step .meta{color:var(--text-muted) !important}
.lic{border-radius:16px !important;border-color:var(--border-subtle) !important;background:#fff !important}
.lic.on{background:var(--brand-50) !important;border-color:var(--brand-200) !important}

/* TT24_MRH_QUICKBOXES_V2: مجوزها/کسری‌مدارک/تصاویر‌کالا/نمونه‌برداری -- منتقل‌شده از خلاصه پرونده به
   بالای Timeline تب مراحل. باکس عیناً همان زبان بصری .step (شعاع/حاشیه/پس‌زمینه/سایه بالا) را دوباره
   استفاده می‌کند -- فقط بدون نقطهٔ متصل به خط Timeline چون این باکس‌ها ردیف‌های مستقل‌اند، نه گره‌های
   زنجیرهٔ متصل. تصحیح شد (بار دوم اشتباه رندر شده بود، ۴ ستون تنگ کنار‌هم): همیشه تک‌ستونه، هر باکس
   یک ردیف تمام‌عرض پشت‌سرهم عمودی -- دقیقاً هم‌عرض با ردیف دریافت اسناد، هم دسکتاپ هم موبایل. دیگر
   قانون override چندستونهٔ جداگانه‌ای در دسکتاپ وجود ندارد.*/
.tt24-mrh-quickboxes{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:16px}
.tt24-mrh-quickbox{
  border-radius:20px !important;
  padding:16px !important;
  border:1px solid var(--border-subtle) !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(15,23,42,.03) !important;
}
.tt24-mrh-quickbox h5{margin:0 0 10px;font-size:13.5px;font-weight:900;color:var(--text-heading);display:flex;align-items:center;gap:6px}
.tt24-mrh-quickbox h5 .hi{width:22px;height:22px;border-radius:7px;background:var(--navy,#0f2747);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:none}

/* TT24_D4_PRODUCT_IMAGES_THUMBS_V1: گرید بندانگشتی «تصاویر کالا» -- هر بندانگشتی مربعی با placeholder
   خاکستری تا زمان بارگذاری (window._tt24LoadProductImageThumbs)، سپس عکس واقعی با object-fit:cover.
   کلیک روی خودِ img = data-tt24-auth-action="view" سراسری (نمایش کامل در تب جدید). */
.tt24-pimg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:4px}
.tt24-pimg-thumb{display:flex;flex-direction:column;gap:6px}
.tt24-pimg-thumb-img{
  width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;
  border:1px solid var(--border-subtle,#e2e8f0);background:#f1f5f9;cursor:pointer;
  transition:opacity .15s,border-color .15s;
}
.tt24-pimg-thumb-img:not(.is-loaded){opacity:.55}
.tt24-pimg-thumb-img:hover{border-color:var(--navy-light,#2c5499)}
.tt24-pimg-thumb-err .tt24-pimg-thumb-img{opacity:.35;cursor:not-allowed}
.tt24-pimg-thumb-name{font-size:11.5px;color:var(--text-muted,#64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt24-pimg-thumb-acts{display:flex;gap:6px;flex-wrap:wrap}
.tt24-pimg-thumb-acts .btn{padding:3px 9px;font-size:11px;min-height:26px}

/* Correspondence and transport */
.dash-corr-item,.corr-doc-row,.transport-company-card{
  border-radius:18px !important;
  border-color:var(--border-subtle) !important;
}
.dash-corr-item:hover,.corr-table tr.clickable:hover{background:var(--brand-50) !important}
.corr-search-results{
  border-radius:18px !important;
  border-color:var(--border-subtle) !important;
  box-shadow:var(--shadow-lift) !important;
}
.corr-search-results button:hover{background:var(--brand-50) !important}

/* Login */
.login-wrap{
  background:
    radial-gradient(circle at 12% 12%, rgba(64,179,209,.22), transparent 32%),
    radial-gradient(circle at 78% 86%, rgba(228,181,28,.16), transparent 30%),
    linear-gradient(135deg,#F8FAFC 0%,#EEF6FA 100%) !important;
}
.login-card{
  border:1px solid rgba(226,232,240,.9) !important;
  box-shadow:0 28px 80px rgba(15,23,42,.12) !important;
  border-radius:30px !important;
}
.login-card h1{color:var(--text-heading) !important;font-weight:950 !important}
.login-card .sub{color:var(--text-muted) !important}

/* Mobile polish */
@media (max-width: 880px){
  :root{--sidebar-w:280px}
  .main{margin-right:0 !important}
  .content{padding:16px !important}
  .topbar{height:64px !important;padding:0 16px !important}
  .card,.stat{border-radius:22px !important;padding:18px !important}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr !important}
  .modal-bg{padding:0 !important;align-items:flex-end !important}
  .modal,.modal.file-modal{border-radius:28px 28px 0 0 !important;max-width:100% !important;min-height:auto !important;max-height:92vh !important}
  .modal-b{max-height:70vh !important;padding:18px !important}
  .modal-f{position:sticky !important;bottom:0 !important;padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important}
  .btn{min-height:44px !important}
  input,select,textarea{min-height:46px !important;font-size:15px !important}
  th,td{padding:12px !important}
  .table-wrap{overflow:auto !important}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}


/* TT24_STAGE27B_UI_UX_STYLES */
.tt24-file-receipts-panel,
.tt24-file-messages-panel {
  width: 100%;
}
.tt24-dashboard-main {
  grid-template-columns: 1fr !important;
}
.tt24-latest-files-card {
  min-height: 250px;
}
.tt24-latest-files-table th,
.tt24-latest-files-table td {
  padding-top: 16px;
  padding-bottom: 16px;
}
.tt24-dashboard-activity-lower {
  margin-top: 18px;
}
#tt24-jpicker button[data-today-day="1"],
#tt-jpicker button[data-today-day="1"] {
  box-shadow: 0 0 0 2px rgba(34,197,94,.14);
}
@media (max-width: 900px) {
  .tt24-latest-files-table th:nth-child(4),
  .tt24-latest-files-table td:nth-child(4),
  .tt24-latest-files-table th:nth-child(5),
  .tt24-latest-files-table td:nth-child(5) {
    display: none;
  }
}
/* /TT24_STAGE27B_UI_UX_STYLES */

/* TT24_UI_TOAST_ABOVE_MODAL_V1
   Toast is appended directly to <body>. Modal stack uses inline z-index up to 2000.
   Keep toast above modal backdrops so success/error messages remain readable.
*/
body > .toast {
  z-index: 3000 !important;
  isolation: isolate;
  opacity: 1 !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* TT24_FE01_FINANCIAL_REPORTS_CSS_EXTRACT_V1_BEGIN */
.tt24-fr-filter-card{margin-bottom:14px}
.tt24-fr-filter-grid{align-items:end}
.tt24-fr-muted-help{margin-top:8px}
.tt24-fr-summary-grid,.tt24-fr-section-grid{margin-bottom:14px}
.tt24-fr-summary-value{font-size:18px}
.tt24-fr-report-stack{gap:14px}
/* TT24_FE01_FINANCIAL_REPORTS_CSS_EXTRACT_V1_END */

/* TT24_FE01_APPJS_SHIPPING_DOCS_STYLE_EXTRACT_BEGIN V1 */
.tt24-s44-8-flow{display:grid;gap:10px}.tt24-s44-8-doc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:14px;background:#f8fafc;padding:12px;flex-wrap:wrap}.tt24-s44-8-doc-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tt24-s44-8-note{background:#fffbeb;border:1px solid #f6c453;border-radius:12px;padding:10px;line-height:1.9}.tt24-s44-8-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-bottom:10px}.tt24-s44-8-mini>div{border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px}
/* TT24_FE01_APPJS_SHIPPING_DOCS_STYLE_EXTRACT_END V1 */

/* TT24_FE01_APPJS_STAGE_HISTORY_STYLE_EXTRACT_BEGIN V2 */
.tt24-stage-audit-person{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
      .tt24-stage-history-link{border:0;background:transparent;color:#166534;font:inherit;font-weight:700;padding:2px 5px;cursor:pointer;white-space:nowrap}
      .tt24-stage-history-link:hover{text-decoration:underline}
      .tt24-sh-backdrop{position:fixed;inset:0;z-index:10040;background:rgba(15,23,42,.46);display:flex;align-items:center;justify-content:center;padding:18px}
      .tt24-sh-panel{direction:rtl;width:min(520px,100%);max-height:min(72vh,680px);background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.28);display:flex;flex-direction:column;overflow:hidden}
      .tt24-sh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border-bottom:1px solid #e2e8f0;flex:0 0 auto}
      .tt24-sh-title{font-weight:800;color:#0f172a}.tt24-sh-sub{font-size:11.5px;color:#64748b;margin-top:2px}
      .tt24-sh-close{width:36px;height:36px;border:0;border-radius:10px;background:#f1f5f9;font-size:22px;cursor:pointer;color:#475569}
      .tt24-sh-body{padding:14px 16px 20px;overflow:auto;overscroll-behavior:contain}
      .tt24-sh-item{position:relative;padding:0 25px 18px 0}
      .tt24-sh-item:not(:last-child):before{content:'';position:absolute;right:6px;top:16px;bottom:0;width:2px;background:#e2e8f0}
      .tt24-sh-dot{position:absolute;right:0;top:4px;width:14px;height:14px;border-radius:50%;background:#16a34a;border:3px solid #dcfce7}
      .tt24-sh-item.reopen .tt24-sh-dot{background:#f59e0b;border-color:#fef3c7}
      .tt24-sh-item.edit .tt24-sh-dot{background:#64748b;border-color:#e2e8f0}
      .tt24-sh-event{font-weight:800;color:#1e293b;font-size:13px}.tt24-sh-time{font-size:12px;color:#475569;margin-top:3px}
      .tt24-sh-actor{font-size:12px;color:#64748b;margin-top:3px}.tt24-sh-reason{font-size:11.5px;color:#64748b;background:#f8fafc;border-radius:8px;padding:6px 8px;margin-top:7px}
      .tt24-sh-empty,.tt24-sh-loading{text-align:center;color:#64748b;padding:28px 10px}
      @media(max-width:640px){
        .tt24-sh-backdrop{align-items:flex-end;padding:0}
        .tt24-sh-panel{width:100%;max-height:70vh;border-radius:18px 18px 0 0}
        .tt24-sh-panel:before{content:'';width:42px;height:4px;border-radius:4px;background:#cbd5e1;margin:8px auto 0;flex:0 0 auto}
        .tt24-sh-head{padding-top:10px}.tt24-sh-body{padding-bottom:max(22px,env(safe-area-inset-bottom))}
      }
/* TT24_FE01_APPJS_STAGE_HISTORY_STYLE_EXTRACT_END V2 */

/* TT24_FE01_APPJS_S39A_ADMIN_STAFF_MOBILE_STYLE_EXTRACT_V1_BEGIN */

/* TT24 S39A — mobile-first polish for internal admin/staff file detail modal */
@media (max-width: 768px) {
  body:has(.file-modal), html:has(.file-modal) { overflow-x: hidden !important; }
  .modal-bg:has(.file-modal) {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    background: rgba(15,23,42,.18) !important;
  }
  .modal.file-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important;
    background: #f6f9fc !important;
  }
  .file-modal .modal-b {
    padding: 8px 10px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    background: #f6f9fc !important;
  }
  .file-modal .m-head {
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 10px 9px !important;
    border-radius: 0 0 16px 16px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    background: linear-gradient(135deg,#0b2440,#123f91) !important;
    box-shadow: 0 3px 14px rgba(15,23,42,.18) !important;
  }
  .file-modal .m-head::before,
  .file-modal .m-head::after,
  .file-modal .m-head .logo,
  .file-modal .m-head img {
    display: none !important;
  }
  .file-modal .mh-main {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
    text-align: right !important;
  }
  .file-modal .mh-num {
    font-size: 19px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .file-modal .mh-cust {
    font-size: 12px !important;
    line-height: 1.4 !important;
    opacity: .9 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .file-modal .mh-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 2px !important;
  }
  .file-modal .mh-badge {
    min-height: 24px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    font-weight: 850 !important;
    border-width: 1px !important;
    box-shadow: none !important;
  }
  .file-modal .mh-act {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .file-modal .mh-act .btn,
  .file-modal .mh-act button {
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 6px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
    border-width: 1px !important;
    box-shadow: none !important;
  }
  .file-modal .info-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  .file-modal .info-card,
  .file-modal .m-panel {
    border-radius: 14px !important;
    padding: 10px !important;
    margin-top: 8px !important;
    border: 1px solid #dbe7f3 !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.05) !important;
    background: #fff !important;
  }
  .file-modal .info-card h4,
  .file-modal .m-panel h4 {
    margin: 0 0 8px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 950 !important;
  }
  .file-modal .info-row {
    display: grid !important;
    grid-template-columns: 95px minmax(0,1fr) !important;
    gap: 8px !important;
    padding: 5px 0 !important;
    border-bottom: 1px solid #eef3f8 !important;
    align-items: start !important;
  }
  .file-modal .info-row:last-child { border-bottom: 0 !important; }
  .file-modal .info-row .k {
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 800 !important;
  }
  .file-modal .info-row .v {
    font-size: 12.5px !important;
    line-height: 1.65 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .file-modal .m-lower {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }
  .file-modal .stepper {
    display: grid !important;
    gap: 7px !important;
  }
  .file-modal .step {
    min-height: 0 !important;
    padding: 8px 8px !important;
    border-radius: 12px !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-width: 1px !important;
  }
  .file-modal .step .dot {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 14px !important;
    margin-left: 7px !important;
  }
  .file-modal .step .body { min-width: 0 !important; }
  .file-modal .step .st {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  .file-modal .step .tt {
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 950 !important;
  }
  .file-modal .step .tag {
    font-size: 10px !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
  .file-modal .step .meta {
    font-size: 11px !important;
    line-height: 1.6 !important;
    margin-top: 3px !important;
  }
  .file-modal .step .acts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 6px !important;
  }
  .file-modal .step .acts .btn,
  .file-modal .step .acts button {
    min-height: 30px !important;
    padding: 4px 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    box-shadow: none !important;
  }
  .file-modal .transport-info-box,
  .file-modal .required-docs,
  .file-modal .transport-grid-mini {
    padding: 8px !important;
    border-radius: 12px !important;
    gap: 7px !important;
  }
  .file-modal .transport-grid-mini {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .file-modal label {
    font-size: 11px !important;
    margin-bottom: 3px !important;
  }
  .file-modal input,
  .file-modal select,
  .file-modal textarea {
    min-height: 36px !important;
    padding: 7px 9px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
  }
  .file-modal textarea { min-height: 76px !important; }
  .file-modal .table-wrap {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }
  .file-modal table,
  .file-modal thead,
  .file-modal tbody,
  .file-modal tr,
  .file-modal th,
  .file-modal td {
    display: block !important;
    width: 100% !important;
  }
  .file-modal thead { display: none !important; }
  .file-modal tr {
    border: 1px solid #dbe7f3 !important;
    border-radius: 12px !important;
    background: #f9fbfd !important;
    padding: 8px !important;
    margin-bottom: 7px !important;
    box-shadow: none !important;
  }
  .file-modal td {
    border: 0 !important;
    padding: 4px 0 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .file-modal .upload-actions,
  .file-modal td:last-child {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
  }
  .file-modal .btn,
  .file-modal button,
  .file-modal a.btn {
    min-height: 32px !important;
    padding: 5px 9px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    box-shadow: none !important;
  }
  .file-modal .badge-s,
  .file-modal .req-doc {
    font-size: 10.5px !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    line-height: 1.5 !important;
  }
  .file-modal .tl-sec {
    font-size: 12px !important;
    margin: 8px 0 5px !important;
  }
  .file-modal .tl-i {
    padding: 6px 0 !important;
    margin: 0 !important;
  }
  .file-modal .tl-i .hd { font-size: 12px !important; }
  .file-modal .tl-i .mt,
  .file-modal .muted,
  .file-modal .small-note {
    font-size: 11px !important;
    line-height: 1.65 !important;
  }
  .file-modal .modal-f {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    background: rgba(246,249,252,.96) !important;
    border-top: 1px solid #dbe7f3 !important;
    box-shadow: 0 -4px 16px rgba(15,23,42,.08) !important;
  }
  .file-modal .modal-f select {
    grid-column: 1 / -1 !important;
    max-width: none !important;
    width: 100% !important;
    height: 38px !important;
  }
  .file-modal .modal-f .btn,
  .file-modal .modal-f button {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 12px !important;
    margin: 0 !important;
  }
  .file-modal .modal-f .btn[style*="margin-inline-start"] {
    margin-inline-start: 0 !important;
  }
}
@media (max-width: 390px) {
  .file-modal .mh-act { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .file-modal .mh-num { font-size: 17px !important; }
  .file-modal .info-row { grid-template-columns: 82px minmax(0,1fr) !important; }
}
/* TT24_FE01_APPJS_S39A_ADMIN_STAFF_MOBILE_STYLE_EXTRACT_V1_END */

/* TT24_S39B_MOBILE_LAYOUT_PARITY_V1
   Purpose: shared mobile layout parity for inner pages/modals after S39A.
   User feedback: dashboard and case details OK; documents modal not OK.
   Scope: mobile-only CSS; no desktop layout change.
*/
@media (max-width: 768px) {
  html,
  body,
  #app,
  .app,
  .app-shell,
  .page,
  .page-shell {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :where(.modal, .dialog, .sheet, .drawer, .popup, [role="dialog"], [class*="modal"], [class*="dialog"], [class*="sheet"], [class*="drawer"]) {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  :where(.modal-content, .dialog-content, .sheet-content, .drawer-content, [class*="modal-content"], [class*="dialog-content"], [class*="sheet-content"]) {
    max-width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }

  :where(.modal-header, .dialog-header, .sheet-header, [class*="modal-header"], [class*="dialog-header"], [class*="sheet-header"]) {
    flex: 0 0 auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    background: rgba(248, 250, 252, 0.98) !important;
    backdrop-filter: blur(8px);
  }

  :where(.modal-body, .dialog-body, .sheet-body, .drawer-body, [class*="modal-body"], [class*="dialog-body"], [class*="sheet-body"], [class*="drawer-body"]) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-inline: 12px !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  :where(.modal-footer, .dialog-footer, .sheet-footer, .drawer-footer, [class*="modal-footer"], [class*="dialog-footer"], [class*="sheet-footer"], [class*="drawer-footer"]) {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 35 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
    background: rgba(248, 250, 252, 0.98) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.25) !important;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.08) !important;
  }

  :where(.modal-footer, .dialog-footer, .sheet-footer, .drawer-footer, [class*="modal-footer"], [class*="dialog-footer"], [class*="sheet-footer"], [class*="drawer-footer"]) > * {
    min-width: 0 !important;
    width: 100% !important;
  }

  :where(.modal-footer, .dialog-footer, .sheet-footer, .drawer-footer, [class*="modal-footer"], [class*="dialog-footer"], [class*="sheet-footer"], [class*="drawer-footer"]) button,
  :where(.modal-footer, .dialog-footer, .sheet-footer, .drawer-footer, [class*="modal-footer"], [class*="dialog-footer"], [class*="sheet-footer"], [class*="drawer-footer"]) .btn {
    min-height: 48px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
  }

  :where([class*="document"], [class*="documents"], [class*="doc-"], [class*="docs-"], [class*="file"], [class*="attachment"]) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  :where(.document-card, .documents-card, .doc-card, .file-card, .attachment-card, [class*="document-card"], [class*="doc-card"], [class*="file-card"], [class*="attachment-card"]) {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    border-radius: 16px !important;
  }

  :where(.document-card, .documents-card, .doc-card, .file-card, .attachment-card, [class*="document-card"], [class*="doc-card"], [class*="file-card"], [class*="attachment-card"]) :where(.actions, .card-actions, [class*="actions"]) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  :where(.document-card, .documents-card, .doc-card, .file-card, .attachment-card, [class*="document-card"], [class*="doc-card"], [class*="file-card"], [class*="attachment-card"]) button,
  :where(.document-card, .documents-card, .doc-card, .file-card, .attachment-card, [class*="document-card"], [class*="doc-card"], [class*="file-card"], [class*="attachment-card"]) .btn {
    min-height: 46px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
  }

  :where(.document-card, .documents-card, .doc-card, .file-card, .attachment-card, [class*="document-card"], [class*="doc-card"], [class*="file-card"], [class*="attachment-card"]) :where(.badge, .tag, .chip, [class*="badge"], [class*="tag"], [class*="chip"]) {
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.7 !important;
  }

  :where(.document-card, .documents-card, .doc-card, .file-card, .attachment-card, [class*="document-card"], [class*="doc-card"], [class*="file-card"], [class*="attachment-card"]) :where(.danger, .delete, [data-action="delete"], [class*="danger"], [class*="delete"]) {
    order: 9 !important;
  }

  :where(.table, table, .grid, [class*="table"], [class*="grid"]) {
    max-width: 100% !important;
  }

  :where(input, select, textarea, button, .btn) {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  :where(.modal-footer, .dialog-footer, .sheet-footer, .drawer-footer, [class*="modal-footer"], [class*="dialog-footer"], [class*="sheet-footer"], [class*="drawer-footer"]) {
    grid-template-columns: 1fr 1fr !important;
  }

  :where(.document-card, .documents-card, .doc-card, .file-card, .attachment-card, [class*="document-card"], [class*="doc-card"], [class*="file-card"], [class*="attachment-card"]) :where(.actions, .card-actions, [class*="actions"]) {
    grid-template-columns: 1fr 1fr !important;
  }
}
/* /TT24_S39B_MOBILE_LAYOUT_PARITY_V1 */

/* TT24_S39C_EXACT_MOBILE_SELECTOR_PARITY_V1
   Exact mobile selector layer based on S39C selector map.
   Good references: dashboard + case details.
   Targets: documents / finance / transport docs / status-route-edit internal modals.
   Scope: mobile CSS only.
*/
@media (max-width: 768px) {
  /* Exact modal shell used by internal file/details flows */
  .file-modal,
  .s39b-file-modal,
  .finance-modal,
  .finance-mod,
  .corr-detail,
  .correspondence-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .file-modal .modal-h,
  .file-modal .modal-b,
  .file-modal .modal-f,
  .s39b-file-modal .modal-h,
  .s39b-file-modal .modal-b,
  .s39b-file-modal .modal-f,
  .finance-modal .modal-h,
  .finance-modal .modal-b,
  .finance-modal .modal-f,
  .finance-mod .modal-h,
  .finance-mod .modal-b,
  .finance-mod .modal-f {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .file-modal .modal-b,
  .s39b-file-modal .modal-b,
  .finance-modal .modal-b,
  .finance-mod .modal-b,
  .modalBody {
    width: 100% !important;
    padding: 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .file-modal .modal-h,
  .s39b-file-modal .modal-h,
  .finance-modal .modal-h,
  .finance-mod .modal-h,
  .file-head,
  .s39b-file-head,
  .detail-head,
  .modal-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 14px !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  .file-modal .modal-h > *,
  .s39b-file-modal .modal-h > *,
  .finance-modal .modal-h > *,
  .finance-mod .modal-h > *,
  .file-head > *,
  .s39b-file-head > *,
  .detail-head > *,
  .modal-title > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Documents: exact doc/docs classes from S39C map */
  .docs-box,
  .docs-list,
  .docs-input,
  .docs-total,
  .doc-row,
  .ff-doc-row,
  .corr-doc-row,
  .doc-slot,
  .doc-file,
  .doc-pick,
  .doc-declaration,
  .doc-warehouse,
  .doc-transport,
  .doc-other,
  .doc-invoice-pack,
  .ffd-file,
  .ffd-cat,
  .required-docs,
  .req-doc,
  .corr-docs,
  .corr-doc-pick,
  .corr-new-docs-box,
  .corr-new-docs-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .doc-row,
  .ff-doc-row,
  .corr-doc-row,
  .req-doc,
  .required-docs,
  .corr-new-docs-box,
  .corr-new-docs-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .doc-row > *,
  .ff-doc-row > *,
  .corr-doc-row > *,
  .doc-slot > *,
  .doc-file > *,
  .req-doc > *,
  .required-docs > * {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .docs-box .row-actions,
  .docs-list .row-actions,
  .doc-row .row-actions,
  .ff-doc-row .row-actions,
  .corr-doc-row .row-actions,
  .required-docs .row-actions,
  .req-doc .row-actions,
  .loadingPermitDocButtons,
  .transportInfoActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
  }

  .docs-box button,
  .docs-list button,
  .doc-row button,
  .ff-doc-row button,
  .corr-doc-row button,
  .required-docs button,
  .req-doc button,
  .docs-box .btn,
  .docs-list .btn,
  .doc-row .btn,
  .ff-doc-row .btn,
  .corr-doc-row .btn,
  .required-docs .btn,
  .req-doc .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    white-space: nowrap !important;
    border-radius: 14px !important;
  }

  /* Finance: exact finance classes from S39C map */
  .finance-table,
  .finance-inline,
  .finance-modal,
  .finance-mod,
  .readonly-pay-box,
  .money-input,
  .financeSelector,
  .financeChanged,
  .file-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .finance-table,
  .file-table {
    display: block !important;
  }

  .finance-table thead,
  .file-table thead {
    display: none !important;
  }

  .finance-table tbody,
  .finance-table tr,
  .finance-table td,
  .file-table tbody,
  .file-table tr,
  .file-table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .finance-table tr,
  .file-table tr,
  .finance-inline,
  .readonly-pay-box {
    margin: 0 0 12px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05) !important;
  }

  .finance-table td,
  .file-table td {
    padding: 6px 0 !important;
    border: 0 !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
  }

  .finance-table .row-actions,
  .file-table .row-actions,
  .finance-inline .row-actions,
  .finance-modal .row-actions,
  .finance-mod .row-actions,
  .actionBar,
  .actionCell {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
  }

  .finance-table .row-actions .actionLabel,
  .file-table .row-actions .actionLabel,
  .finance-inline .row-actions .actionLabel,
  .actionBar .actionLabel,
  .actionCell .actionLabel {
    display: none !important;
  }

  .finance-table button,
  .file-table button,
  .finance-inline button,
  .finance-modal button,
  .finance-mod button,
  .actionBar button,
  .actionCell button,
  .finance-table .btn,
  .file-table .btn,
  .finance-inline .btn,
  .finance-modal .btn,
  .finance-mod .btn,
  .actionBar .btn,
  .actionCell .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
  }

  /* Transport documents: exact transport classes from S39C map */
  .transport-address,
  .transport-company,
  .transport-date,
  .transport-depot,
  .transport-depot-box,
  .transport-done,
  .transport-info,
  .transport-info-compact,
  .transport-kind,
  .transport-loading,
  .transport-msg,
  .transport-notes,
  .transport-service,
  .transport-time,
  .transport-truck,
  .transportInfoMeta,
  .transportDocsMeta,
  .transportCompanySelect,
  .transport-docs,
  .transport-company-card,
  .transport-company-list,
  .transport-settings-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-wrap: anywhere !important;
  }

  .transport-address,
  .transport-company,
  .transport-date,
  .transport-depot,
  .transport-depot-box,
  .transport-kind,
  .transport-loading,
  .transport-msg,
  .transport-notes,
  .transport-service,
  .transport-time,
  .transport-truck,
  .transport-info-compact {
    display: block !important;
    margin: 0 0 10px !important;
    text-align: right !important;
  }

  .transportInfoMeta,
  .transportDocsMeta,
  .transport-docs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .transportInfoActions,
  .transport-docs .row-actions,
  .transport-company-card .row-actions,
  .transport-settings-page .row-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .transportInfoActions button,
  .transport-docs button,
  .transport-company-card button,
  .transport-settings-page button,
  .transportInfoActions .btn,
  .transport-docs .btn,
  .transport-company-card .btn,
  .transport-settings-page .btn {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
  }

  /* Shared exact helpers missing in bad groups */
  .row-actions,
  .actionBar,
  .actionCell {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .btn-danger,
  .btn-red {
    min-width: 0 !important;
  }

  .lic-grid,
  .lic-cb,
  .field-grid,
  .info-grid,
  .info-row,
  .info-card,
  .table-wrap {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .lic-grid,
  .field-grid,
  .info-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .docs-box .row-actions,
  .docs-list .row-actions,
  .doc-row .row-actions,
  .ff-doc-row .row-actions,
  .corr-doc-row .row-actions,
  .finance-table .row-actions,
  .file-table .row-actions,
  .finance-inline .row-actions,
  .finance-modal .row-actions,
  .finance-mod .row-actions,
  .actionBar,
  .actionCell,
  .transportInfoActions,
  .transport-docs .row-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  .file-modal .modal-b,
  .s39b-file-modal .modal-b,
  .finance-modal .modal-b,
  .finance-mod .modal-b,
  .modalBody {
    padding-inline: 12px !important;
  }
}
/* /TT24_S39C_EXACT_MOBILE_SELECTOR_PARITY_V1 */

/* TT24_S39D_TARGETED_MOBILE_MODAL_COMPONENT_CSS_V1
   Targeted mobile modal shell. Applies only to modals marked by
   TT24_S39D_TARGETED_MOBILE_MODAL_HELPER_V1.
*/
@media (max-width: 768px) {
  .tt24-s39d-enhanced.modal-bg {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: calc(10px + env(safe-area-inset-top)) 8px calc(10px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .tt24-s39d-modal-panel,
  .tt24-s39d-enhanced.modal,
  .tt24-s39d-enhanced.file-modal,
  .tt24-s39d-enhanced.finance-modal,
  .tt24-s39d-enhanced .modal,
  .tt24-s39d-enhanced .file-modal,
  .tt24-s39d-enhanced .finance-modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #f6f9fc !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .tt24-s39d-modal-head,
  .tt24-s39d-enhanced .modal-h,
  .tt24-s39d-enhanced .file-head,
  .tt24-s39d-enhanced .s39b-file-head {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px 18px !important;
    min-height: 64px !important;
    background: linear-gradient(135deg, #082b5f 0%, #0f3f85 100%) !important;
    color: #fff !important;
    border-bottom: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  .tt24-s39d-modal-head *,
  .tt24-s39d-enhanced .modal-h *,
  .tt24-s39d-enhanced .file-head *,
  .tt24-s39d-enhanced .s39b-file-head * {
    color: inherit !important;
    min-width: 0 !important;
  }

  .tt24-s39d-modal-head .close-x,
  .tt24-s39d-enhanced .modal-h .close-x,
  .tt24-s39d-enhanced .file-head .close-x,
  .tt24-s39d-enhanced .s39b-file-head .close-x,
  .tt24-s39d-enhanced .modal-h button:first-child {
    color: #0f172a !important;
    background: #fff !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14) !important;
  }

  .tt24-s39d-modal-body,
  .tt24-s39d-enhanced .modal-b,
  .tt24-s39d-enhanced .modalBody {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    padding: 16px 14px !important;
    background: #f6f9fc !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  .tt24-s39d-modal-footer,
  .tt24-s39d-enhanced .modal-f {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
    background: rgba(246, 249, 252, 0.98) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.25) !important;
    box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.06) !important;
    box-sizing: border-box !important;
  }

  .tt24-s39d-modal-footer > *,
  .tt24-s39d-enhanced .modal-f > * {
    min-width: 0 !important;
    width: 100% !important;
  }

  .tt24-s39d-modal-footer button,
  .tt24-s39d-enhanced .modal-f button,
  .tt24-s39d-modal-footer .btn,
  .tt24-s39d-enhanced .modal-f .btn {
    min-height: 48px !important;
    width: 100% !important;
    border-radius: 15px !important;
    white-space: nowrap !important;
  }

  /* Short form modals: remove ugly forced vertical emptiness */
  .tt24-s39d-short-form-panel,
  .tt24-s39d-short-form-modal.modal,
  .tt24-s39d-short-form-modal.file-modal,
  .tt24-s39d-short-form-modal.finance-modal,
  .tt24-s39d-short-form-modal .modal,
  .tt24-s39d-short-form-modal .file-modal,
  .tt24-s39d-short-form-modal .finance-modal {
    min-height: 0 !important;
    height: auto !important;
  }

  .tt24-s39d-short-form-modal .tt24-s39d-form-body,
  .tt24-s39d-short-form-modal .modal-b,
  .tt24-s39d-short-form-modal .modalBody {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    padding: 22px 14px 16px !important;
  }

  .tt24-s39d-short-form-modal .tt24-s39d-form-footer,
  .tt24-s39d-short-form-modal .modal-f {
    position: relative !important;
    bottom: auto !important;
    margin-top: 0 !important;
  }

  .tt24-s39d-short-form-modal label,
  .tt24-s39d-short-form-modal .label,
  .tt24-s39d-short-form-modal .muted,
  .tt24-s39d-short-form-modal .small-note {
    display: block !important;
    margin: 8px 0 8px !important;
    line-height: 1.8 !important;
  }

  .tt24-s39d-short-form-modal textarea {
    min-height: 150px !important;
    max-height: 260px !important;
    resize: vertical !important;
  }

  .tt24-s39d-short-form-modal input,
  .tt24-s39d-short-form-modal select,
  .tt24-s39d-short-form-modal textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  /* Documents / list cards */
  .tt24-s39d-docs-modal .doc-row,
  .tt24-s39d-docs-modal .docs-box,
  .tt24-s39d-docs-modal .docs-list,
  .tt24-s39d-docs-modal .ff-doc-row,
  .tt24-s39d-docs-modal .corr-doc-row,
  .tt24-s39d-docs-modal .required-docs,
  .tt24-s39d-docs-modal .req-doc {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
    margin: 0 0 12px !important;
    border-radius: 18px !important;
    background: #fff !important;
    border: 1px solid rgba(191, 219, 254, 0.9) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .tt24-s39d-docs-modal .row-actions,
  .tt24-s39d-docs-modal .doc-row .row-actions,
  .tt24-s39d-docs-modal .ff-doc-row .row-actions,
  .tt24-s39d-docs-modal .corr-doc-row .row-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .tt24-s39d-docs-modal .row-actions button,
  .tt24-s39d-docs-modal .row-actions .btn {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 15px !important;
  }

  /* Finance: use card/list behavior on mobile */
  .tt24-s39d-finance-modal .finance-table,
  .tt24-s39d-finance-modal .file-table,
  .tt24-s39d-finance-modal .finance-inline,
  .tt24-s39d-finance-modal .readonly-pay-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tt24-s39d-finance-modal .finance-table,
  .tt24-s39d-finance-modal .file-table {
    display: block !important;
    overflow: visible !important;
  }

  .tt24-s39d-finance-modal .finance-table thead,
  .tt24-s39d-finance-modal .file-table thead {
    display: none !important;
  }

  .tt24-s39d-finance-modal .finance-table tbody,
  .tt24-s39d-finance-modal .finance-table tr,
  .tt24-s39d-finance-modal .finance-table td,
  .tt24-s39d-finance-modal .file-table tbody,
  .tt24-s39d-finance-modal .file-table tr,
  .tt24-s39d-finance-modal .file-table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .tt24-s39d-finance-modal .finance-table tr,
  .tt24-s39d-finance-modal .file-table tr,
  .tt24-s39d-finance-modal .finance-inline,
  .tt24-s39d-finance-modal .readonly-pay-box {
    margin: 0 0 12px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: #fff !important;
    border: 1px solid rgba(191, 219, 254, 0.9) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04) !important;
  }

  .tt24-s39d-finance-modal .row-actions,
  .tt24-s39d-finance-modal .actionBar,
  .tt24-s39d-finance-modal .actionCell {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .tt24-s39d-finance-modal .row-actions .actionLabel,
  .tt24-s39d-finance-modal .actionBar .actionLabel,
  .tt24-s39d-finance-modal .actionCell .actionLabel {
    display: none !important;
  }

  /* Transport docs */
  .tt24-s39d-transport-modal .transport-grid-mini,
  .tt24-s39d-transport-modal .transport-info-box,
  .tt24-s39d-transport-modal .transport-info-compact,
  .tt24-s39d-transport-modal .transport-docs,
  .tt24-s39d-transport-modal .transport-address,
  .tt24-s39d-transport-modal .transport-company,
  .tt24-s39d-transport-modal .transportInfoActions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .tt24-s39d-transport-modal .transport-grid-mini {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .tt24-s39d-transport-modal .transport-info-box,
  .tt24-s39d-transport-modal .transport-info-compact,
  .tt24-s39d-transport-modal .transport-docs {
    padding: 14px !important;
    margin: 0 0 12px !important;
    border-radius: 18px !important;
    background: #fff !important;
    border: 1px solid rgba(191, 219, 254, 0.9) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04) !important;
  }

  .tt24-s39d-transport-modal .transportInfoActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .tt24-s39d-transport-modal .transportInfoActions button,
  .tt24-s39d-transport-modal .transportInfoActions .btn {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 15px !important;
  }
}

@media (max-width: 480px) {
  .tt24-s39d-docs-modal .row-actions,
  .tt24-s39d-docs-modal .doc-row .row-actions,
  .tt24-s39d-docs-modal .ff-doc-row .row-actions,
  .tt24-s39d-docs-modal .corr-doc-row .row-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .tt24-s39d-transport-modal .transport-grid-mini {
    grid-template-columns: 1fr !important;
  }

  .tt24-s39d-modal-head,
  .tt24-s39d-enhanced .modal-h,
  .tt24-s39d-enhanced .file-head,
  .tt24-s39d-enhanced .s39b-file-head {
    padding-inline: 14px !important;
  }
}
/* /TT24_S39D_TARGETED_MOBILE_MODAL_COMPONENT_CSS_V1 */

/* TT24_S39E_MOBILE_MODAL_FOOTER_VIEWPORT_V1
   Purpose:
   Correct footer/action placement for S39D-targeted mobile modals.
   The issue is not the background page. The action buttons live inside the
   modal panel; therefore the panel itself must become viewport-height and
   the modal body must flex-grow, so the footer reaches the visual bottom.

   Scope:
   Only S39D whitelisted modals. Dashboard/case details are not targeted.
*/
@media (max-width: 768px) {
  .tt24-s39d-enhanced.modal-bg {
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .tt24-s39d-modal-panel,
  .tt24-s39d-enhanced.modal,
  .tt24-s39d-enhanced.file-modal,
  .tt24-s39d-enhanced.finance-modal,
  .tt24-s39d-enhanced .modal,
  .tt24-s39d-enhanced .file-modal,
  .tt24-s39d-enhanced .finance-modal {
    height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    min-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .tt24-s39d-enhanced .tt24-s39d-modal-head,
  .tt24-s39d-enhanced .modal-h,
  .tt24-s39d-enhanced .file-head,
  .tt24-s39d-enhanced .s39b-file-head {
    flex: 0 0 auto !important;
  }

  .tt24-s39d-modal-body,
  .tt24-s39d-enhanced .modal-b,
  .tt24-s39d-enhanced .modalBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  .tt24-s39d-modal-footer,
  .tt24-s39d-enhanced .modal-f {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* S39D made short forms auto-height. S39E intentionally reverses that:
     short forms must also behave like full mobile screens so their buttons
     sit at the bottom of the visual panel, not below the small form content. */
  .tt24-s39d-short-form-panel,
  .tt24-s39d-short-form-modal.modal,
  .tt24-s39d-short-form-modal.file-modal,
  .tt24-s39d-short-form-modal.finance-modal,
  .tt24-s39d-short-form-modal .modal,
  .tt24-s39d-short-form-modal .file-modal,
  .tt24-s39d-short-form-modal .finance-modal {
    height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    min-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .tt24-s39d-short-form-modal .tt24-s39d-form-body,
  .tt24-s39d-short-form-modal .modal-b,
  .tt24-s39d-short-form-modal .modalBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 18px !important;
  }

  .tt24-s39d-short-form-modal .tt24-s39d-form-footer,
  .tt24-s39d-short-form-modal .modal-f {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    position: sticky !important;
    bottom: 0 !important;
  }

  /* Ensure action buttons do not remain visually attached to a small inner card. */
  .tt24-s39d-short-form-modal .modal-f,
  .tt24-s39d-list-modal .modal-f,
  .tt24-s39d-docs-modal .modal-f,
  .tt24-s39d-finance-modal .modal-f,
  .tt24-s39d-transport-modal .modal-f {
    border-radius: 0 0 22px 22px !important;
    background: rgba(246,249,252,0.98) !important;
  }

  .tt24-s39d-short-form-modal textarea,
  .tt24-s39d-route-modal textarea,
  .tt24-s39d-lock-modal textarea,
  .tt24-s39d-note-modal textarea,
  .tt24-s39d-reply-modal textarea {
    max-height: 34dvh !important;
  }

  /* Long content modals: body scrolls, footer stays visible at bottom. */
  .tt24-s39d-docs-modal .tt24-s39d-list-body,
  .tt24-s39d-docs-modal .modal-b,
  .tt24-s39d-finance-modal .tt24-s39d-list-body,
  .tt24-s39d-finance-modal .modal-b,
  .tt24-s39d-transport-modal .tt24-s39d-list-body,
  .tt24-s39d-transport-modal .modal-b {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 14px !important;
  }
}

@media (max-width: 768px) and (max-height: 700px) {
  .tt24-s39d-modal-head,
  .tt24-s39d-enhanced .modal-h,
  .tt24-s39d-enhanced .file-head,
  .tt24-s39d-enhanced .s39b-file-head {
    min-height: 56px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .tt24-s39d-enhanced .modal-b,
  .tt24-s39d-enhanced .modalBody {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .tt24-s39d-enhanced .modal-f {
    padding-top: 10px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
}
/* /TT24_S39E_MOBILE_MODAL_FOOTER_VIEWPORT_V1 */

/* TT24_S41F4_UI_ONLY_INSURANCE_TREE_CSS_V1 */
.tt24-s41f4-insurance{background:#f0fdf4!important;border:1px solid #bbf7d0!important;border-radius:12px!important;padding:10px!important}
.tt24-s41f4-insurance .tt24-s41f4-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;align-items:end}
.tt24-s41f4-insurance .tt24-s41f4-grid span{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.tt24-s41f4-insurance select{width:100%}
.tt24-s41f4-note{margin-top:8px;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:8px;font-size:11.5px;color:#9a3412}
@media(max-width:700px){.tt24-s41f4-insurance .tt24-s41f4-grid{grid-template-columns:1fr}}

/* S42J_C8_DESKTOP_REVIEW_REPAIR_V1
   Scope: S42 shipping-intake modal viewport, sticky actions and detail workspace only. */
.tt24-s42h-workspace-target {
  margin-top: 12px;
  min-width: 0;
}
.tt24-s42h-form-modal {
  width: min(980px, calc(100vw - 24px)) !important;
  height: min(92dvh, 980px) !important;
  max-height: calc(100dvh - 24px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.tt24-s42h-form-modal > .tt24-s42h-head {
  flex: 0 0 auto;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148,163,184,.25);
}
.tt24-s42h-form-modal > .tt24-s42h-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px 2px 0;
}
.tt24-s42h-form-modal > .tt24-s42h-form > .tt24-s42h-actions:last-child {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin: 4px -2px 0;
  padding: 12px 2px 4px;
  background: rgba(255,255,255,.98);
  border-top: 1px solid rgba(148,163,184,.28);
  box-shadow: 0 -8px 18px rgba(15,23,42,.07);
}
.tt24-s42h-form-modal > .tt24-s42h-form > .tt24-s42h-actions:last-child .btn {
  min-width: 132px;
}
@media (max-width: 768px) {
  .tt24-s42h-modal-back {
    padding: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  .tt24-s42h-modal.tt24-s42h-form-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: 10px !important;
  }
  .tt24-s42h-form-modal > .tt24-s42h-form > .tt24-s42h-actions:last-child {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
    padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
  }
  .tt24-s42h-form-modal > .tt24-s42h-form > .tt24-s42h-actions:last-child .btn {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}



/* TT24_LINE_B_S42_MODAL_SCROLL_LOCK_V1
   S42 shipping-intake modals: lock the document and scroll only the active dialog body. */
html.tt24-s42h-modal-open,
body.tt24-s42h-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
.tt24-s42h-modal-back {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: pan-y !important;
}
.tt24-s42h-modal {
  width: min(980px, 100%) !important;
  max-width: 980px !important;
  max-height: calc(100dvh - 24px) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.tt24-s42h-modal > .tt24-s42h-head {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}
.tt24-s42h-form-modal > .tt24-s42h-form,
.tt24-s42h-detail-modal > .tt24-s42h-detail-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  box-sizing: border-box !important;
}
.tt24-s42h-detail-modal > .tt24-s42h-detail-body {
  padding: 10px 2px calc(12px + env(safe-area-inset-bottom)) !important;
}
@media (max-width: 768px) {
  .tt24-s42h-modal-back {
    padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)) !important;
    align-items: stretch !important;
    justify-content: center !important;
  }
  .tt24-s42h-modal.tt24-s42h-form-modal,
  .tt24-s42h-modal.tt24-s42h-detail-modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    border-radius: 22px !important;
    padding: 10px !important;
  }
  .tt24-s42h-form-modal > .tt24-s42h-form,
  .tt24-s42h-detail-modal > .tt24-s42h-detail-body {
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
}

/* TT24_LINE_B_S42_MOBILE_COMPACT_UI_V1
   Mobile-only density pass for S42 create, edit and detail dialogs.
   Keeps modal scroll locking and desktop presentation unchanged. */
@media (max-width: 768px) {
  .tt24-s42h-modal.tt24-s42h-form-modal,
  .tt24-s42h-modal.tt24-s42h-detail-modal {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    height: calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 18px !important;
    padding: 8px !important;
  }

  .tt24-s42h-modal > .tt24-s42h-head {
    gap: 7px !important;
    padding: 1px 1px 7px !important;
    margin: 0 !important;
  }
  .tt24-s42h-modal .tt24-s42h-title {
    font-size: 17px !important;
    line-height: 1.45 !important;
    letter-spacing: -.15px !important;
  }
  .tt24-s42h-modal .tt24-s42h-muted {
    font-size: 11.5px !important;
    line-height: 1.6 !important;
  }
  .tt24-s42h-modal > .tt24-s42h-head > .btn,
  .tt24-s42h-modal > .tt24-s42h-head [data-s42h-close] {
    min-height: 38px !important;
    height: 38px !important;
    padding: 6px 13px !important;
    border-radius: 11px !important;
    font-size: 12.5px !important;
    box-shadow: 0 5px 12px rgba(11,135,168,.15) !important;
  }

  .tt24-s42h-form-modal > .tt24-s42h-form,
  .tt24-s42h-detail-modal > .tt24-s42h-detail-body {
    padding: 7px 1px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  .tt24-s42h-modal .tt24-s42h-form {
    gap: 8px !important;
  }
  .tt24-s42h-modal .tt24-s42h-grid {
    gap: 7px !important;
  }
  .tt24-s42h-modal .tt24-s42h-section {
    padding: 8px !important;
    border-radius: 12px !important;
  }
  .tt24-s42h-detail-body > .tt24-s42h-section,
  .tt24-s42h-detail-body > .tt24-s42h-grid,
  .tt24-s42h-detail-body > .tt24-s42h-workspace-target {
    margin-top: 8px !important;
  }

  .tt24-s42h-modal .tt24-s42h-form label {
    gap: 4px !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }
  .tt24-s42h-modal .tt24-s42h-form input,
  .tt24-s42h-modal .tt24-s42h-form select,
  .tt24-s42h-modal .tt24-s42h-form textarea,
  .tt24-s42h-modal [data-s42h-assignment-select] {
    min-height: 40px !important;
    height: 40px !important;
    padding: 7px 10px !important;
    border-radius: 11px !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
  }
  .tt24-s42h-modal .tt24-s42h-form textarea {
    height: auto !important;
    min-height: 70px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .tt24-s42h-modal .tt24-s42h-actions {
    gap: 6px !important;
  }
  .tt24-s42h-detail-body .tt24-s42h-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }
  .tt24-s42h-modal .tt24-s42h-actions .btn,
  .tt24-s42h-detail-body > .tt24-s42h-section > .btn,
  .tt24-s42h-detail-body form > .btn {
    min-height: 40px !important;
    height: 40px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 7px 9px !important;
    border-radius: 11px !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    box-shadow: 0 6px 13px rgba(11,135,168,.15) !important;
  }
  .tt24-s42h-form-modal > .tt24-s42h-form > .tt24-s42h-actions:last-child {
    gap: 6px !important;
    margin-top: 2px !important;
    padding: 8px 1px calc(4px + env(safe-area-inset-bottom)) !important;
  }

  .tt24-s42h-workspace-target {
    margin-top: 7px !important;
  }
  .tt24-s42h-modal [data-s42j-c6="workspace-summary"] {
    padding: 8px !important;
    margin: 6px 0 !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.06) !important;
  }
  .tt24-s42h-modal .tt24-s42-summary-head {
    gap: 5px !important;
    margin-bottom: 5px !important;
  }
  .tt24-s42h-modal .tt24-s42-summary-head > div > div:first-child {
    font-size: 13px !important;
  }
  .tt24-s42h-modal .tt24-s42-readiness-badge {
    padding: 2px 7px !important;
    font-size: 11px !important;
  }
  .tt24-s42h-modal .tt24-s42-summary-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-top: 6px !important;
  }
  .tt24-s42h-modal .tt24-s42-summary-stat {
    min-width: 0 !important;
    padding: 5px 4px !important;
    border-radius: 9px !important;
    text-align: center !important;
  }
  .tt24-s42h-modal .tt24-s42-summary-stat > div:first-child {
    font-size: 9.5px !important;
    line-height: 1.35 !important;
  }
  .tt24-s42h-modal .tt24-s42-summary-stat > div:last-child {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .tt24-s42h-modal .tt24-s42-summary-blockers {
    margin-top: 4px !important;
    padding-right: 15px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
}
/* /TT24_LINE_B_S42_MOBILE_COMPACT_UI_V1 */

/* TT24_LINE_B_S42_MODAL_FOOTER_DOCK_V1
   Mobile S42 create/edit forms: use a dedicated scroll body and a true
   non-scrolling footer attached to the dialog bottom. */
.tt24-s42h-modal.tt24-s42h-mobile-footer-docked > .tt24-s42h-form {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.tt24-s42h-mobile-footer-docked .tt24-s42h-form-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  padding: 7px 1px 8px !important;
  box-sizing: border-box !important;
}
.tt24-s42h-mobile-footer-docked > .tt24-s42h-form > .tt24-s42h-actions:last-child {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  z-index: 6 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 7px 1px calc(7px + env(safe-area-inset-bottom)) !important;
  background: #fff !important;
  border-top: 1px solid rgba(148,163,184,.28) !important;
  box-shadow: 0 -8px 18px rgba(15,23,42,.07) !important;
  box-sizing: border-box !important;
}
.tt24-s42h-mobile-footer-docked > .tt24-s42h-form > .tt24-s42h-actions:last-child .btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  .tt24-s42h-modal.tt24-s42h-mobile-footer-docked {
    padding-bottom: 0 !important;
  }
}
/* /TT24_LINE_B_S42_MODAL_FOOTER_DOCK_V1 */

/* TT24_FE01_S42IC_DYNAMIC_STYLE_EXTRACTION_V1_START */
/* Extracted verbatim from app.js dynamic style id: tt24-s42ic-style */
.tt24-s42ic-doc-panel{margin-top:14px;border:1px solid rgba(148,163,184,.35);border-radius:18px;background:#fff;padding:14px;box-shadow:0 8px 24px rgba(15,23,42,.06)}.tt24-s42ic-doc-head{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;margin-bottom:12px}.tt24-s42ic-doc-title{font-weight:900;color:#0f172a}.tt24-s42ic-doc-sub{font-size:12px;color:#64748b;margin-top:4px;line-height:1.8}.tt24-s42ic-doc-list{display:flex;flex-direction:column;gap:10px}.tt24-s42ic-doc-row{display:grid;grid-template-columns:minmax(130px,1.05fr) minmax(115px,.8fr) minmax(105px,.75fr) minmax(150px,1.15fr) minmax(150px,1.15fr) auto;gap:8px;align-items:end;border:1px solid rgba(226,232,240,.9);border-radius:14px;padding:10px;background:#f8fafc}.tt24-s42ic-doc-name{font-weight:800;color:#1e293b;align-self:center}.tt24-s42ic-doc-virt{display:block;color:#94a3b8;font-size:11px;margin-top:4px}.tt24-s42ic-doc-row label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#64748b}.tt24-s42ic-doc-row select,.tt24-s42ic-doc-row input{height:38px;border:1px solid #dbe3ef;border-radius:12px;padding:0 10px;background:#fff;min-width:0}.tt24-s42ic-doc-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.tt24-s42ic-upload-note{font-size:11px;color:#94a3b8}.tt24-s42ic-msg{font-size:12px;color:#475569}.tt24-s42ic-error{color:#b91c1c}.tt24-s42ic-ok{color:#047857}@media(max-width:900px){.tt24-s42ic-doc-row{grid-template-columns:1fr}.tt24-s42ic-doc-head{flex-direction:column}.tt24-s42ic-doc-actions{justify-content:flex-start;flex-wrap:wrap}}
/* TT24_FE01_S42IC_DYNAMIC_STYLE_EXTRACTION_V1_END */


/* TT24_UJ3_MASTER_LIST_EXPANDABLE_SHELL_V1_START */
.uj3-intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.uj3-intro h2{font-size:22px;color:var(--navy);margin:0}
.uj3-intro p{color:var(--ink-soft);margin:3px 0 0}
.uj3-card{padding:18px}
.uj3-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) 180px 210px auto;gap:10px;align-items:center;margin-bottom:16px}
.uj3-toolbar input,.uj3-toolbar select{margin:0}
.uj3-table-wrap{border:1px solid var(--line);border-radius:12px;overflow:auto}
.uj3-table{width:100%;border-collapse:collapse;min-width:1040px}
.uj3-table th,.uj3-table td{padding:11px 10px;border-bottom:1px solid var(--line-soft);text-align:center;vertical-align:middle}
.uj3-table th{background:var(--bg-soft);color:var(--navy);font-size:12px;white-space:nowrap}
.uj3-master-row{cursor:pointer;transition:background .15s}
.uj3-master-row:hover,.uj3-master-row:focus{background:#f8fbff;outline:none}
.uj3-master-row.is-open{background:#eef6ff}
.uj3-edit{border:0;background:transparent;color:#087df0;font-size:18px;cursor:pointer;padding:5px}
.uj3-cancel{border:0;background:transparent;color:#b91c1c;font-size:14px;cursor:pointer;padding:5px}
.uj3-cancel:hover,.uj3-cancel:focus{color:#7f1d1d}
.uj3-info{border:0;background:transparent;color:#64748b;font-size:14px;cursor:pointer;padding:5px}
.uj3-info:hover,.uj3-info:focus{color:#334155}
/* MCE4B-F77 (Batch 4B-4B): recovery action for an eligible cancelled/unconverted intake row */
.uj3-recover{border:0;background:transparent;color:#0f766e;font-size:14px;cursor:pointer;padding:5px}
.uj3-recover:hover,.uj3-recover:focus{color:#0b5a54}
.uj3-stage-badge{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:5px 9px;font-weight:700;font-size:11.5px;white-space:nowrap}
.uj3-stage-badge.zone-A{background:#fff4d6;color:#8a5b00}
.uj3-stage-badge.zone-B{background:#dbeafe;color:#174ea6}
.uj3-anomaly{color:#b91c1c}
.uj3-expanded-row>td{padding:8px 12px 18px;background:#f4f6f9}
.uj3-expanded-cell{width:1px;min-width:100%;overflow:hidden}
.uj3-shell{background:#fff;border:1px solid #dce6f2;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);max-width:100%}
.uj3-zoneb-detail-target{max-width:100%}
.uj3-shell-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff}
.uj3-shell-head strong{display:block;font-size:16px}
.uj3-shell-head small{display:block;opacity:.8;margin-top:2px}
.uj3-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.uj3-summary span{background:var(--bg-soft);border-radius:9px;padding:8px;min-width:0;overflow-wrap:anywhere}
.uj3-stepper{display:flex;align-items:flex-start;gap:0;padding:18px 16px;overflow-x:auto}
.uj3-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:145px;color:var(--ink-faint)}
.uj3-step:not(:last-child)::after{content:"";position:absolute;top:15px;right:calc(50% + 17px);width:calc(100% - 34px);height:3px;background:#d2d7df}
.uj3-step span{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:3px solid #c9ced6;background:#fff;font-weight:800}
.uj3-step b{font-size:11.5px;text-align:center;white-space:normal}
.uj3-step.completed{color:var(--green)}
.uj3-step.completed span{background:var(--green);border-color:var(--green);color:#fff}
.uj3-step.completed:not(:last-child)::after{background:var(--green)}
.uj3-step.active{color:#087df0}
.uj3-step.active span{border-color:#087df0;color:#087df0}
.uj3-stage-placeholder{margin:0 16px 16px;padding:18px;border:1px dashed #b9c7d8;border-radius:12px;background:#fbfdff;text-align:right}
.uj3-stage-placeholder strong{color:var(--navy);font-size:15px}
.uj3-stage-placeholder p{color:var(--ink-soft);margin:6px 0 0}
.uj3-shell-foot{display:flex;justify-content:space-between;padding:12px 16px;background:var(--bg-soft);border-top:1px solid var(--line)}
@media(max-width:900px){
  .uj3-toolbar{grid-template-columns:1fr 1fr}
  .uj3-toolbar input{grid-column:1/-1}
  .uj3-summary{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .uj3-card{padding:10px}
  .uj3-toolbar{grid-template-columns:1fr}
  .uj3-toolbar input{grid-column:auto}
  .uj3-table{min-width:0}
  .uj3-table thead{display:none}
  .uj3-table tbody,.uj3-table tr,.uj3-table td{display:block;width:100%}
  .uj3-master-row{margin-bottom:10px;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff}
  .uj3-master-row td{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px;text-align:right;border:0;padding:5px 7px}
  .uj3-master-row td::before{font-weight:700;color:var(--ink-soft)}
  .uj3-master-row td:nth-child(1)::before{content:"ردیف"}
  .uj3-master-row td:nth-child(2)::before{content:"ویرایش"}
  .uj3-master-row td:nth-child(3)::before{content:"مرحله فعلی"}
  .uj3-master-row td:nth-child(4)::before{content:"شماره"}
  .uj3-master-row td:nth-child(5)::before{content:"بارنامه"}
  .uj3-master-row td:nth-child(6)::before{content:"صاحب کالا"}
  .uj3-master-row td:nth-child(7)::before{content:"کالا"}
  .uj3-master-row td:nth-child(8)::before{content:"کوتاژ"}
  .uj3-expanded-row>td{display:block;padding:0 0 12px}
  .uj3-summary{grid-template-columns:1fr}
  .uj3-stepper{padding:15px 8px}
  .uj3-step{min-width:125px}
}
/* TT24_UJ3_MASTER_LIST_EXPANDABLE_SHELL_V1_END */

/* TT24_S47_UNIFIED_STEPPER_GLOBAL_STYLE_V1_START: نسخه‌ی سراسری کلاس‌های stepper واحد ۱۱مرحله‌ای
   (tt24BuildStepStates/tt24WorkflowTimeline در app.js). این کلاس‌ها قبلاً فقط داخل <style> تزریقی
   صفحه‌ی ویزارد «پرونده‌ها» (tt24NewCasesStyles) تعریف شده بودند، اما همین HTML در مودال
   window.openFile و ردیف بازشوی Zone B هم استفاده می‌شود — جایی که آن <style> هرگز بارگذاری نمی‌شود
   و در نتیجه stepper بدون استایل (فهرست ساده) نمایش داده می‌شد. */
.tt24-d4-stepper-wrap{padding:14px 16px 0;max-width:100%}
.tt24-new-cases-stepper{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding:8px 4px 14px;scrollbar-width:thin}
.tt24-new-cases-step{position:relative;display:grid;justify-items:center;align-content:start;gap:8px;min-width:150px;padding:0 16px;background:transparent;color:#94a3b8;font-size:12px;font-weight:900;text-align:center}
.tt24-new-cases-step:not(:last-child)::after{content:'';position:absolute;top:15px;right:calc(50% + 17px);width:calc(100% - 34px);height:3px;background:#cbd5e1;border-radius:99px;z-index:0}
.tt24-new-cases-step b{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#e2e8f0;color:#64748b;border:3px solid #fff;box-shadow:0 0 0 1px #cbd5e1}
.tt24-new-cases-step.completed{color:#64748b}
.tt24-new-cases-step.completed b{background:#cbd5e1;color:#334155;box-shadow:0 0 0 1px #94a3b8}
.tt24-new-cases-step.completed:not(:last-child)::after{background:#94a3b8}
.tt24-new-cases-step.active{color:#15803d;background:transparent;border:0}
.tt24-new-cases-step.active b{background:#16a34a;color:#fff;box-shadow:0 0 0 1px #15803d}
.tt24-new-cases-step.future{color:#94a3b8}
.tt24-new-cases-step[data-tt24-jump-step]{cursor:pointer}
.tt24-new-cases-step[data-tt24-jump-step]:hover{color:#334155}
.tt24-new-cases-step[data-tt24-jump-step]:hover b{box-shadow:0 0 0 2px #16a34a}
@media(max-width:640px){
  .tt24-new-cases-stepper{padding-bottom:10px}
  .tt24-new-cases-step{min-width:132px;padding-inline:10px}
}
/* TT24_S47_UNIFIED_STEPPER_GLOBAL_STYLE_V1_END */

/* TT24_CIRCULAR_AUTOMATION_COMPACT_UI_V1_START
   The nine-column source registry is an operational control surface, not a spacious content
   table. Keep density changes strictly scoped to this modal so the rest of the application,
   including mobile forms and other dialogs, retains its established sizing. */
.tt24-circ-automation-modal{padding-block:24px !important}
.tt24-circ-automation-modal>.modal{
  border-radius:20px !important;
  font-size:12.5px !important;
  line-height:1.55 !important;
}
.tt24-circ-automation-modal .modal-h{
  min-height:0 !important;
  padding:11px 16px !important;
}
.tt24-circ-automation-modal .modal-h h3{
  margin:0 !important;
  font-size:16px !important;
  line-height:1.4 !important;
}
.tt24-circ-automation-modal .modal-h .close-x{
  width:34px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  border-radius:9px !important;
  font-size:16px !important;
}
.tt24-circ-automation-modal .modal-b{
  padding:14px 16px 16px !important;
  max-height:calc(100vh - 112px) !important;
}
.tt24-circ-automation-modal .modal-b>div:first-child{
  padding:7px 9px !important;
  margin-bottom:9px !important;
  border-radius:8px !important;
  gap:8px !important;
}
.tt24-circ-automation-modal h4{
  margin:10px 0 6px !important;
  font-size:13px !important;
  line-height:1.4 !important;
}
.tt24-circ-automation-modal .tt24-circ-automation-table-wrap{
  border-radius:12px !important;
}
.tt24-circ-automation-modal .tt24-circ-automation-table{
  min-width:900px !important;
  font-size:12px !important;
  line-height:1.5 !important;
}
.tt24-circ-automation-modal table th,
.tt24-circ-automation-modal table td{
  padding:7px 8px !important;
  font-size:12px !important;
  line-height:1.5 !important;
  vertical-align:middle !important;
}
.tt24-circ-automation-modal table th{
  font-size:11.5px !important;
  white-space:nowrap !important;
}
.tt24-circ-automation-modal .muted{
  font-size:10.5px !important;
  line-height:1.45 !important;
}
.tt24-circ-automation-modal .tt24-circ-mode-select{
  width:158px !important;
  min-width:158px !important;
}
.tt24-circ-automation-modal select,
.tt24-circ-automation-modal .btn{
  min-height:32px !important;
  height:32px !important;
  padding:4px 9px !important;
  border-radius:9px !important;
  font-size:11.5px !important;
  line-height:1.25 !important;
  box-shadow:none !important;
}
.tt24-circ-automation-modal input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
  min-height:16px !important;
}
.tt24-circ-automation-modal .empty{
  padding:12px !important;
  font-size:12px !important;
}
@media(max-width:768px){
  .tt24-circ-automation-modal{padding:0 !important}
  .tt24-circ-automation-modal>.modal{border-radius:0 !important}
  .tt24-circ-automation-modal .modal-b{padding:10px !important}
  .tt24-circ-automation-modal table th,
  .tt24-circ-automation-modal table td{padding:6px !important}
}
/* TT24_CIRCULAR_AUTOMATION_COMPACT_UI_V1_END */

/* TT24_PATCH9_O16_CHIP_STYLE_RELOCATE_V1: همان الگوی رفع‌مشکل بالا (tt24-new-cases-step) برای
   .tt24-chip/.tt24-chip-list/.tt24-chip-remove هم لازم بود -- این کلاس‌ها هم فقط داخل <style>
   تزریقی ویزارد «پرونده‌ها» تعریف شده بودند (app.js: tt24NewCasesStyles)، اما لیست کسری‌مدارک
   پرونده‌های موجود (files.php، تب «مراحل») همین کلاس‌ها را مستقل از آن ویزارد رندر می‌کند -- در
   نتیجه اگر کاربر در همان نشست هرگز «+ پرونده جدید» را باز نکرده باشد، دکمه حذف کسری‌مدرک کاملاً
   بدون استایل (دکمه خاکستری پیش‌فرض مرورگر، ابعاد نامنظم و کوچک) نمایش داده می‌شد -- این خودِ
   مشکل گزارش‌شده در O16 بود، نه صرفاً یک دکمه ۱۸×۱۸ کم‌رنگ. با انتقال این سه کلاس به اینجا (تعریف
   بدون‌قید‌وشرط)، هر دو محل مصرف (ویزارد پرونده جدید و لیست کسری‌مدارک پرونده موجود) به‌طور یکسان
   و همیشگی استایل می‌گیرند؛ تعریف تکراری داخل app.js حذف شد. */
.tt24-chip-list{display:flex;flex-wrap:wrap;gap:8px}
.tt24-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 6px 6px 10px;border-radius:999px;background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3;font-size:12px;font-weight:800}
/* دکمه حذف قبلی ۱۸×۱۸ و هم‌رنگ با پس‌زمینه چیپ بود -- هم زیر حداقل ۲۴×۲۴ پیکسل توصیه‌شده برای
   هدف لمسی (WCAG 2.5.8) و هم از نظر بصری غیرقابل‌تشخیص از عمل «حذف». اکنون ۲۴×۲۴، با رنگ قرمز
   مخرب مشخص (متفاوت از رنگ نیلی خودِ چیپ) و حلقه focus-visible اختصاصی؛ در صفحات لمسی/باریک به
   همان حداقل ۴۴×۴۴ که برای سایر دکمه‌های حذف این پروژه جا افتاده می‌رسد (رجوع به
   tt24-d8-exit-cycles.css، قرارداد .tt24-ec-card-actions button). aria-label="حذف" از قبل درست
   بود و تغییری نکرده است. */
.tt24-chip-remove{width:24px;height:24px;line-height:1;border:0;border-radius:50%;background:#fee2e2;color:#b91c1c;font-size:15px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0}
.tt24-chip-remove:hover{background:#fecaca}
.tt24-chip-remove:focus-visible{outline:2px solid #b91c1c;outline-offset:2px}
@media(max-width:768px){.tt24-chip-remove{width:44px;height:44px;font-size:18px}}