/* TT24_PATCH6A_O12_CUSTOMER_CASE_DETAIL_V1: customer-only case-detail modal (window.openPortalFile,
   app2.js).
   TT24_PATCH6A_VISUAL_PARITY_CORRECTION_V1: this file now supplies ONLY what genuinely has no
   internal-only equivalent (tab-bar mobile/base fallback below the internal component's own
   min-width:881px breakpoint, panel show/hide + fade-in, and the new History list). The header,
   progress timeline, tab-bar desktop treatment, and every grouped info panel (Main Information/
   Cargo Specifications/Route & Clearance/Documents/Finance/Messages/Stages) now reuse the SAME
   global classes the internal case-detail modal itself uses (.mh-main/.mh-badges/.mh-badge,
   .tt24-d4-stepper-wrap/.tt24-new-cases-stepper/.tt24-new-cases-step, .tt24-d4-section-nav/
   .tt24-d4a-view-nav, .info-card/.info-row/.tt24-d4-info-card) -- reached by giving the customer
   modal the SAME .file-modal/.tt24-d4-file-modal wrapper classes the internal modal already carries
   (see window.openPortalFile), never by duplicating that CSS here. Respects prefers-reduced-motion. */

.tt24-p6a-nav {
  display: flex; gap: 6px; padding: 6px; border-radius: 12px; background: #f4f8fc;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.tt24-p6a-nav button {
  flex: 1 0 auto; min-height: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: #38536e; font-family: inherit; font-size: 13px; font-weight: 700;
  white-space: nowrap; cursor: pointer; transition: background .16s ease,border-color .16s ease,color .16s ease;
}
.tt24-p6a-nav button:hover { border-color: #cbd9e7; background: #eaf1f8; color: #123f6c; }
.tt24-p6a-nav button:focus-visible { outline: 2px solid #123f6c; outline-offset: 2px; }
.tt24-p6a-nav button.is-active {
  border-color: #123f6c; background: linear-gradient(135deg,#0e345b,#174f83); color: #fff;
  box-shadow: 0 6px 14px rgba(18,63,108,.18);
}

.tt24-p6a-panels { min-height: 220px; }
.tt24-p6a-panel[hidden] { display: none !important; }
.tt24-p6a-panel { animation: tt24P6aPanelIn .16s ease-out; }

.tt24-p6a-history-list { display: flex; flex-direction: column; gap: 10px; }
.tt24-p6a-history-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.tt24-p6a-history-icon { font-size: 16px; line-height: 1.3; }
.tt24-p6a-history-main { flex: 1; min-width: 0; }

.tt24-p6a-detail-btn { white-space: nowrap; }
.tt24-p6a-mobile-detail-btn-wrap { margin-top: 8px; }
.tt24-p6a-mobile-detail-btn-wrap .btn { width: 100%; }

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

@media (prefers-reduced-motion: reduce) {
  .tt24-p6a-panel { animation: none; }
  .tt24-p6a-nav button { transition: none; }
}

/* ui-e2e: tt24-d4-case-details.css در ≤880px هر .tt24-d4-section-nav را با !important مخفی می‌کند (برای نمای داخلی مصوب).
   پنل صاحب کالا فقط یک پنل را هم‌زمان نشان می‌دهد، پس بدون این نوار، تب‌های مراحل/اسناد/مالی/پیام‌ها/تاریخچه روی موبایل
   کاملاً غیرقابل‌دسترسی می‌شد. نوار اختصاصی پورتال (طبق توضیح بالای همین فایل «mobile fallback») باید روی موبایل دیده شود. */
@media (max-width: 880px) {
  .tt24-d4-section-nav.tt24-p6a-nav { display: flex !important; }
}