/* مسیرفایل: D:\_Codes\owras-system\static\css\generals\public_styles.css */

/* ═══════════════════════════════════════════════════════════
   چرخش آیکون chevron در باکس‌های راهنمای بازشونده
   ─ Bootstrap 5 خودکار aria-expanded را روی trigger می‌گذارد،
     پس نیازی به JS نیست.
   ═══════════════════════════════════════════════════════════ */
[data-bs-toggle="collapse"] .bi-chevron-down {
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}
[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════
   بلوک‌های منبع مقدار در فرم دستور کار — شروع مخفی
   (JS با تغییر style.display آن‌ها را نمایش می‌دهد)
   ═══════════════════════════════════════════════════════════ */
.source-block {
  display: none;
}
.source-block.is-visible {
  display: block;
  animation: fadeInSource 0.2s ease;
}
.method-block {
  animation: fadeInMethod 0.2s ease;
}
@keyframes fadeInSource {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInMethod {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   فرم دریافت کالا — انتقال نرم فیلدهای شرطی
   ═══════════════════════════════════════════════════════════ */
.conditional-field {
  transition: opacity 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════
   Radio Card — انتخاب با تیک (DRY — همه‌ی .mode-cardها)
   ═══════════════════════════════════════════════════════════ */
.mode-card {
    transition: all 0.2s ease;
    cursor: pointer;
}
/* پنهان‌کردن دایره‌ی رادیو در کارت‌های انتخاب */
.mode-card input[type="radio"],
.mode-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
/* حذف فاصله‌ی label وقتی input مخفی است */
.mode-card .form-check-label {
    margin-right: 0 !important;
}
/* وضعیت انتخاب‌شده */
.mode-card.is-selected {
    background-color: #e7f1ff !important;
    border-color: #0d6efd !important;
}

/* مدیریت آیکون‌های تیک (انتخاب‌شده / انتخاب‌نشده) */
.mode-card .icon-checked {
    display: none;
}
.mode-card .icon-unchecked {
    transition: opacity 0.2s ease;
}
.mode-card:hover .icon-unchecked {
    opacity: 1 !important; /* روشن‌تر شدن هنگام هاور */
}
.mode-card.is-selected .icon-unchecked {
    display: none;
}
.mode-card.is-selected .icon-checked {
    display: inline-block;
    animation: popIn 0.2s ease;
}

@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   KPI Grid — گرید تطبیقی برای کارت‌های شاخص
   ─ پیش‌فرض ۲ ستون، در دسکتاپ به تعداد کارت‌ها
   ─ استفاده: <div class="kpi-grid"> ... </div>
   ═══════════════════════════════════════════════════════════ */
.kpi-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 576px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .kpi-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.kpi-grid .card-body { padding: 0.6rem 0.4rem; }
.kpi-grid .kpi-value {
  font-size: 1.5rem;
  line-height: 1.1;
}
.kpi-grid .kpi-label {
  font-size: 0.7rem;
  line-height: 1.15;
  min-height: 2.3em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kpi-grid .card-footer {
  padding: 0.25rem 0.3rem;
  font-size: 0.7rem;
}

/* ═══════════════════════════════════════════════════════════
   کارت تاشو — هدر کلیک‌پذیر
   ─ چرخش chevron خودکار از قاعده‌ی [data-bs-toggle="collapse"]
     بالای همین فایل انجام می‌شود.
   ─ استفاده: <div class="card-header ... card-header-toggle" data-bs-toggle="collapse" ...>
   ═══════════════════════════════════════════════════════════ */
.card-header-toggle {
  cursor: pointer;
  user-select: none;
  transition: filter 0.15s ease;
}
.card-header-toggle:hover {
  filter: brightness(0.92);
}

/* ═══════════════════════════════════════════════════════════
   بدنه‌ی اسکرول‌پذیر — ارتفاع محدود + اسکرول
   ─ استفاده: <div class="card-body p-0 card-body-scrollable">
   ═══════════════════════════════════════════════════════════ */
.card-body-scrollable {
  max-height: 340px;
  overflow-y: auto;
}