/* TT24_D4_PRODUCTION_CASE_DETAILS_V1_BEGIN
   Desktop-only presentation refinement for the existing Production Case Details modal.
   No API, role, permission, company_id, handler, finance/docs content, workflow order or stage condition is changed.
*/

@media (min-width: 881px) {
  .modal-bg:has(.tt24-d4-file-modal) {
    align-items: center !important;
    padding: 20px 18px !important;
  }

  .modal.file-modal.tt24-d4-file-modal {
    width: calc(100% - 24px) !important;
    max-width: 1180px !important;
    max-height: 94vh !important;
    border: 1px solid rgba(214,225,237,.95) !important;
    border-radius: 24px !important;
    background: #f3f7fb !important;
    box-shadow: 0 30px 90px rgba(15,35,60,.28) !important;
  }

  .modal.file-modal.tt24-d4-file-modal .modal-h.tt24-d4-file-head {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(420px,auto);
    align-items: center !important;
    gap: 24px !important;
    min-height: 132px;
    padding: 22px 28px !important;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    background:
      radial-gradient(circle at 13% 12%,rgba(72,194,224,.22),transparent 29%),
      radial-gradient(circle at 88% 85%,rgba(228,181,28,.16),transparent 30%),
      linear-gradient(135deg,#0b2c4d 0%,#123f6d 58%,#1e5794 100%) !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-file-head::after {
    content: '24';
    position: absolute;
    inset-inline-start: 20px;
    top: -36px;
    color: rgba(255,255,255,.035);
    font: 900 150px/1 Arial,sans-serif;
    pointer-events: none;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-main,
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-actions {
    position: relative;
    z-index: 1;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-kicker {
    width: max-content;
    margin-bottom: 4px;
    padding: 3px 10px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.78);
    font-size: 11.5px;
    font-weight: 700;
  }
  .modal.file-modal.tt24-d4-file-modal .mh-num {
    font-family: 'TT24 B Yekan Plus Bold','TT24 B Yekan Plus','B Yekan+',Tahoma,sans-serif !important;
    font-size: 27px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
  }
  .modal.file-modal.tt24-d4-file-modal .mh-cust {
    margin-top: 1px;
    color: rgba(255,255,255,.82) !important;
    font-size: 14px !important;
    line-height: 1.6;
  }
  .modal.file-modal.tt24-d4-file-modal .mh-badges {
    gap: 7px !important;
    margin-top: 8px !important;
    flex-wrap: wrap;
  }
  .modal.file-modal.tt24-d4-file-modal .mh-badge {
    min-height: 27px;
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    line-height: 1.4;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-actions {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(112px,1fr));
    gap: 9px !important;
    width: min(100%,520px);
    margin-inline-start: auto !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-actions .btn {
    width: 100%;
    min-height: 41px;
    margin: 0 !important;
    padding: 7px 12px !important;
    border-radius: 11px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    white-space: nowrap;
  }

  .modal.file-modal.tt24-d4-file-modal .modal-b {
    padding: 18px 22px 24px !important;
    background:
      radial-gradient(circle at 8% 2%,rgba(40,181,209,.065),transparent 22%),
      #f3f7fb !important;
    scrollbar-color: #b8c8d8 transparent;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-case-body {
    width: 100%;
    max-width: 1128px;
    margin: 0 auto;
  }

  .modal.file-modal.tt24-d4-file-modal .tt24-d4-section-nav {
    position: sticky;
    top: -1px;
    z-index: 12;
    display: grid;
    grid-template-columns: repeat(8,minmax(0,1fr));
    gap: 6px;
    margin: 0 0 15px;
    padding: 8px;
    border: 1px solid #dce6f0;
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 26px rgba(15,43,77,.08);
    backdrop-filter: blur(12px);
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-section-nav button {
    min-width: 0;
    min-height: 37px;
    padding: 6px 7px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #38536e;
    font-family: 'TT24 B Yekan Plus','B Yekan+',Tahoma,sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-section-nav button:hover,
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-section-nav button:focus-visible {
    border-color: #bfd4e8;
    background: #edf6ff;
    color: #0d5d9d;
    outline: none;
    transform: translateY(-1px);
  }

  .modal.file-modal.tt24-d4-file-modal .tt24-d4-section {
    scroll-margin-top: 66px;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-info-grid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 14px !important;
    margin-bottom: 0 !important;
  }
  /* TT24_MRH_QUICKBOXES_GRID_V2: تصحیح شد -- نسخهٔ قبلی این‌جا auto-fit چندستونه (تا ۴ ستون تنگ کنار‌هم)
     تنظیم کرده بود، که اشتباه بود: مشخصات (بار دوم تکرارشده) صریحاً هر باکس را یک ردیف تمام‌عرض
     می‌خواهد، پشت‌سرهم عمودی -- «همون عرض دریافت اسناد» یعنی عرض کامل ردیف Timeline، نه عرض یک گره
     کوچک. نسخهٔ پایهٔ app.css (grid-template-columns:1fr) از قبل درست بود؛ اینجا دیگر قانون override
     نمی‌خواهد -- به همین دلیل این بلوک کامل حذف شد، نه فقط مقدارش عوض شد، تا هیچ CSS اضافه/گمراه‌کننده‌ای
     نماند. */
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-info-card,
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-panel {
    overflow: hidden;
    border: 1px solid #dce6ef !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(15,43,77,.055) !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-info-card {
    padding: 0 16px 10px !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-info-card h4,
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-panel > h4 {
    min-height: 50px;
    margin: 0 -16px 8px !important;
    padding: 13px 16px 11px !important;
    border-bottom: 1px solid #e7edf4;
    background: linear-gradient(180deg,#fbfdff,#f6f9fc);
    color: #173b5f !important;
    font-family: 'TT24 B Yekan Plus Bold','TT24 B Yekan Plus','B Yekan+',Tahoma,sans-serif !important;
    font-size: 15px !important;
    line-height: 1.65;
    font-weight: 700 !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-info-card h4 .hi {
    display: inline-grid;
    place-items: center;
    width: 27px;
    height: 27px;
    margin-inline-end: 5px;
    border-radius: 9px;
    background: #eaf4fd;
    color: #1769a6;
    font-size: 14px;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-info-card .info-row {
    min-height: 39px;
    padding: 8px 1px !important;
    gap: 10px;
    border-bottom-color: #edf1f5 !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-info-card .info-row .k {
    color: #64788c !important;
    font-size: 12px !important;
    line-height: 1.6;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-info-card .info-row .v {
    color: #18344f !important;
    font-size: 13px !important;
    line-height: 1.65;
    font-weight: 700 !important;
    overflow-wrap: anywhere;
  }

  .modal.file-modal.tt24-d4-file-modal .tt24-d4-panel {
    padding: 0 17px 16px !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-panel > h4 {
    margin-inline: -17px !important;
    margin-bottom: 14px !important;
    padding-inline: 17px !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-panel .muted {
    font-size: 12.5px;
    line-height: 1.75;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-panel .btn-sm {
    min-height: 35px;
    padding: 6px 11px !important;
    border-radius: 9px !important;
    font-size: 11.5px !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-panel .table-wrap {
    border: 1px solid #e0e8f0;
    border-radius: 13px;
    overflow: hidden;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-panel table th {
    background: #f4f8fc !important;
    color: #48627c !important;
    font-size: 11.5px !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-panel table td {
    font-size: 12px !important;
  }

  .modal.file-modal.tt24-d4-file-modal .tt24-d4-lower {
    grid-template-columns: minmax(0,1.42fr) minmax(300px,.82fr) !important;
    align-items: start;
    gap: 14px !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-stages-panel,
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-history-panel {
    min-width: 0;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-stages-panel .stepper {
    padding: 0 2px;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-stages-panel .step {
    position: relative !important;
    margin: 0 0 11px !important;
    padding: 13px 47px 13px 14px !important;
    border-radius: 15px !important;
    box-shadow: none !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-stages-panel .step:last-child {
    margin-bottom: 0 !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-stages-panel .step::before {
    inset-inline-end: 18px !important;
    top: 37px !important;
    bottom: -14px !important;
    width: 2px !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-stages-panel .step .dot {
    inset-inline-end: 7px !important;
    top: 13px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-stages-panel .step .body {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-stages-panel .step .st .tt {
    color: #173853 !important;
    font-size: 14px !important;
    line-height: 1.55;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-stages-panel .step .meta {
    margin-top: 4px !important;
    color: #62778b !important;
    font-size: 12px !important;
    line-height: 1.65;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-stages-panel .step .acts {
    margin-top: 8px !important;
    gap: 6px !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-stages-panel .step .acts .btn {
    min-height: 33px !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
  }

  .modal.file-modal.tt24-d4-file-modal .tt24-d4-history-panel .tl-sec {
    margin: 16px 0 9px !important;
    padding: 7px 10px;
    border-radius: 9px;
    background: #f3f7fb;
    color: #294e70 !important;
    font-size: 12px !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-history-panel .tl-sec:first-child {
    margin-top: 0 !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-history-panel .tl-i {
    padding: 1px 25px 14px 0 !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-history-panel .tl-i .hd {
    color: #213d57 !important;
    font-size: 12.5px;
    line-height: 1.55;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-history-panel .tl-i .mt {
    color: #718297 !important;
    font-size: 11.5px !important;
    line-height: 1.6;
  }

  .modal.file-modal.tt24-d4-file-modal .modal-f {
    min-height: 68px;
    padding: 13px 22px !important;
    border-top: 1px solid #dce6ef !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 -10px 30px rgba(15,43,77,.055);
  }
  .modal.file-modal.tt24-d4-file-modal .modal-f select {
    min-height: 40px;
    border-radius: 10px;
    font-size: 12.5px;
  }
  .modal.file-modal.tt24-d4-file-modal .modal-f .btn {
    min-height: 40px;
    padding: 7px 14px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
  }
}

@media (min-width: 881px) and (max-width: 1150px) {
  .modal.file-modal.tt24-d4-file-modal .modal-h.tt24-d4-file-head {
    grid-template-columns: 1fr;
    gap: 16px !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-actions {
    width: 100%;
    max-width: none;
    margin-inline-start: 0 !important;
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-section-nav {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-info-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-route-card {
    grid-column: 1 / -1;
  }
  .modal.file-modal.tt24-d4-file-modal .tt24-d4-lower {
    grid-template-columns: 1fr !important;
  }
}

/* The new quick-navigation row must not alter the approved mobile Case Details. */
@media (max-width: 880px) {
  .tt24-d4-section-nav,
  .tt24-d4-kicker { display: none !important; }
}

/* TT24_D4_PRODUCTION_CASE_DETAILS_V1_END */

/* TT24_UJ3_ZONEB_INLINE_DETAIL_V1_BEGIN
   Zone B (files list) inline accordion row reuses the exact same file-detail markup
   and classes as the modal (.modal.file-modal.tt24-d4-file-modal) so it inherits all
   of the styling above for free. This block only neutralizes the fixed-dialog sizing
   (width/height/shadow/position) that made sense for a floating modal but not for
   content flowing inline inside a table row.
*/
.tt24-uj3-zoneb-inline.modal.file-modal.tt24-d4-file-modal {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  overflow: visible !important;
}
.tt24-uj3-zoneb-inline.modal.file-modal.tt24-d4-file-modal .modal-b {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  flex: none !important;
}
@media (min-width: 881px) {
  .tt24-uj3-zoneb-inline.modal.file-modal.tt24-d4-file-modal {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .tt24-uj3-zoneb-inline.modal.file-modal.tt24-d4-file-modal .modal-b {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
/* TT24_UJ3_ZONEB_INLINE_DETAIL_V1_END */

/* TT24_D4_HEADER_ACTION_ICONS_V1: آیکن معنادار برای دکمه‌های عملیات هدر (اسناد/مالی/تغییر مسیر/قفل). */
.tt24-d4-head-actions .tt24-d4-act-ico { margin-inline-end: 4px; }

/* TT24_S47_UNIFIED_STEPPER_WRAP_V1: فاصله پایین stepper واحد ۱۱مرحله‌ای که اکنون در مودال/ردیف Zone B هم نمایش داده می‌شود. */
.tt24-d4-stepper-wrap { margin-bottom: 16px; }
.tt24-uj3-zoneb-inline .tt24-d4-stepper-wrap,
.modal-b > .tt24-d4-stepper-wrap { padding: 0 2px; }

/* TT24_S46_VISUAL_FLATTEN_V1_BEGIN
   منابع: "Dashboard Design Principles" (UXPin) — کاهش تودرتویی و سایه به‌جای خط دور هر عنصر؛
   "17 button design best practices" (Balsamiq) — یک دکمه اصلی در هر صفحه/بخش، فاصله حداقل ۱۲px بین دکمه‌ها.
   محدوده: فقط صفحه جزئیات پرونده (مودال/ردیف Zone B)؛ به سیستم دکمه/کارت عمومی برنامه دست نمی‌زند.
*/

/* دکمه‌های هدر: فقط «ویرایش» اصلی (btn-gold) و بزرگ‌تر؛ بقیه ثانویه و کوچک‌تر؛ فاصله ۱۲px */
.tt24-d4-head-actions { gap: 12px !important; }
.tt24-d4-head-actions .btn { min-height: 32px !important; }
.tt24-d4-head-actions .btn-gold { min-height: 38px !important; padding: 8px 16px !important; font-weight: 800 !important; }
.tt24-d4-head-actions .btn:not(.btn-gold) { min-height: 30px !important; padding: 6px 13px !important; font-size: 12px !important; box-shadow: none !important; }

/* ردیف‌های stepper (کارشناسی/صندوق/...): دکمه‌های عملیات ثانویه و یکدست، بدون سایه اضافی */
.tt24-d4-stages-panel .step .acts .btn,
.tt24-license-actions .btn {
  min-height: 30px !important;
}
.tt24-d4-stages-panel .step .acts,
.tt24-license-actions { gap: 12px !important; }

/* مجوزهای قانونی: حذف قاب دور هر آیتم، جایگزینی با تغییر پس‌زمینه/سایه ملایم (تخت‌سازی به یک سطح) */
.tt24-license-step .lic {
  border: 0 !important;
  background: #f3f6fa !important;
  box-shadow: inset 0 0 0 1px rgba(15,43,77,.06) !important;
}
.tt24-license-step .lic:hover { box-shadow: inset 0 0 0 1px rgba(15,43,77,.14) !important; }
.tt24-license-step .lic.req { background: var(--amber-bg) !important; box-shadow: inset 0 0 0 1px rgba(217,119,6,.25) !important; }
.tt24-license-step .lic.on { background: var(--green-bg) !important; box-shadow: inset 0 0 0 1px rgba(22,163,74,.3) !important; }

/* فاصله یکدست ۱۶ تا ۲۴ پیکسل بین بخش‌های مجزا */
.modal.file-modal.tt24-d4-file-modal .tt24-d4-info-grid,
.tt24-uj3-zoneb-inline .tt24-d4-info-grid { gap: 16px !important; }
.modal.file-modal.tt24-d4-file-modal .tt24-d4-lower,
.tt24-uj3-zoneb-inline .tt24-d4-lower { gap: 16px !important; }
.tt24-d4-case-body > * + * { margin-top: 16px; }
/* TT24_S46_VISUAL_FLATTEN_V1_END */

/* TT24_S48_ZONEB_INLINE_WIDTH_SAFETY_V1: بخش‌های بالا (هدر/اقدامات/بخش پایین) برای مودال واقعی
   position:fixed طراحی شده‌اند و در دسکتاپ بزرگ (>1150px) عرض ثابت حداقلی دارند (420px/300px برای
   ستون دوم گرید) — چون همان‌جا همیشه عرض کافی هست. همین markup در ردیف بازشوی Zone B به‌صورت
   درون‌خطی (نه یک مودال fixed، بلکه داخل یک ردیف جدول با عرض واقعی محدودتر) هم استفاده می‌شود؛
   آن حداقل‌های ثابت باعث می‌شدند کل پنل به‌جای reflow کردن، به‌صورت افقی اسکرول شود. اینجا فقط
   برای حالت inline (کلاس tt24-uj3-zoneb-inline) همان الگوی امن minmax(0,...) که در بازه
   881-1150px بالاتر همین فایل هم استفاده شده، بدون وابستگی به عرض پنجره اعمال می‌شود. */
.modal.file-modal.tt24-d4-file-modal.tt24-uj3-zoneb-inline .modal-h.tt24-d4-file-head {
  grid-template-columns: minmax(0,1fr) !important;
}
.modal.file-modal.tt24-d4-file-modal.tt24-uj3-zoneb-inline .tt24-d4-head-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px !important;
  width: 100%;
  max-width: none;
  margin-inline-start: 0 !important;
}
.modal.file-modal.tt24-d4-file-modal.tt24-uj3-zoneb-inline .tt24-d4-lower {
  grid-template-columns: minmax(0,1fr) !important;
}
/* دکمه‌های اقدام هدر (ویرایش/اسناد/مالی/تغییر مسیر/قفل پرونده) در سه فایل دیگر با اندازه‌های
   بزرگ‌تر (برای مودال واقعی) رقابت می‌کنند؛ در حالت inline همان ۵ دکمه با اندازه‌ی فعلی به دو
   ردیف می‌شکنند در حالی‌که عرض کافی برای یک ردیف هست. اینجا فقط اندازه (نه عرض ثابت) کوچک‌تر
   می‌شود تا fallback شکستن به ردیف بعدی برای عرض‌های واقعاً باریک هم‌چنان کار کند. */
.modal.file-modal.tt24-d4-file-modal.tt24-uj3-zoneb-inline .tt24-d4-head-actions .btn {
  min-height: 44px !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  flex: 0 0 138px !important;
  width: 138px !important;
}
/* TT24_S48_ZONEB_INLINE_WIDTH_SAFETY_V1_END */