/* =============================================================================
 * panel.css — AIOP panel: MINOR Metronic overrides ONLY
 * -----------------------------------------------------------------------------
 * IRON RULE: the panel is Metronic-only. Do NOT recreate components or pull in
 * another framework here. Keep this file to small, surgical brand touches.
 * Use Bootstrap logical utilities (start/end) in markup — never left/right here.
 * ===========================================================================*/

/* Logo swap: full wordmark expanded, square mark when the sidebar is minimized. */
.app-sidebar-logo-minimize { display: none; }
[data-kt-app-sidebar-minimize="on"] .app-sidebar-logo-default { display: none; }
[data-kt-app-sidebar-minimize="on"] .app-sidebar-logo-minimize { display: inline-block; }

/* Persian webfont so panel fa text renders in the brand FA font — Metronic's
   Latin font has no Persian glyphs. Self-hosted (no CDN), woff2 + ttf fallback.
   EN panel stays on Metronic's own theme; only fa/rtl switches. */
@font-face {
  font-family: "Yekan Bakh"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/brand/fonts/YekanBakh-Regular.woff2") format("woff2"),
       url("/static/brand/fonts/yekanbakh-regular.ttf") format("truetype");
}
html[lang="fa"], html[dir="rtl"] {
  --bs-body-font-family: "Yekan Bakh", system-ui, Tahoma, sans-serif;
}
html[lang="fa"] body, html[dir="rtl"] body {
  font-family: "Yekan Bakh", system-ui, Tahoma, sans-serif;
}

/* Keep the user-menu initials avatar crisp. */
#kt_header_user_menu_toggle .symbol-label { text-transform: uppercase; }

/* Dashboard quick-action cards: subtle lift + primary border on hover. */
.quick-action { transition: transform .15s ease, box-shadow .15s ease; text-decoration: none; }
.quick-action:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.quick-action:hover .fw-bold { color: var(--bs-primary); }

/* Responsive detail tables (.table-cards) — collapse to per-row cards on small
   screens (matches the customer forms). For read-only detail tables; the
   sortable list tables use DataTables Responsive instead. Cells carry
   data-label (set in the page JS) for the per-row labels. */
@media (max-width: 767.98px) {
  .table-cards thead { display: none; }
  .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr {
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    margin-bottom: .75rem;
    padding: .35rem .9rem;
  }
  .table-cards td {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border: 0 !important; text-align: end; padding: .5rem 0 !important;
  }
  .table-cards td:not(:last-child) { border-bottom: 1px dashed var(--bs-border-color) !important; }
  .table-cards td::before {
    content: attr(data-label);
    font-weight: 600; color: var(--bs-gray-600);
    text-align: start; flex: 0 0 42%;
  }
  .table-cards td:empty { display: none; }
}