/*
 * PTK Design System v1 — لایه‌ی مینیمال پنل مدیریت
 * مرجع: docs/ui-redesign/DESIGN_SYSTEM.md
 *
 * این فایل باید *آخرین* stylesheet در base/header.html باشد. قالب (Vuexy/Bootstrap 5)
 * رنگ‌ها را به‌صورت literal کامپایل کرده؛ پس علاوه بر متغیرهای --bs-* قواعد اصلی را هم
 * بازنویسی می‌کنیم. صفحه‌های جدید نباید رنگ/شعاع/سایه‌ی سخت‌کد بنویسند.
 */

:root {
  /* ── رنگ ── */
  --ptk-primary-50: #e8f5f7;
  --ptk-primary-100: #cfebef;
  --ptk-primary-500: #148291;
  --ptk-primary-600: #116d7a;
  --ptk-primary-700: #0d5863;
  --ptk-success: #2f9e5b;   --ptk-success-soft: rgba(47, 158, 91, .12);  --ptk-success-ink: #1f7a43;
  --ptk-warning: #e5a00d;   --ptk-warning-soft: rgba(229, 160, 13, .14); --ptk-warning-ink: #93650a;
  --ptk-danger: #d9424e;    --ptk-danger-soft: rgba(217, 66, 78, .12);   --ptk-danger-ink: #a72934;
  --ptk-info: #2b8cc4;      --ptk-info-soft: rgba(43, 140, 196, .12);    --ptk-info-ink: #1c6a99;
  --ptk-ink-900: #182230;
  --ptk-ink-700: #364152;
  --ptk-ink-500: #667085;
  --ptk-ink-400: #98a2b3;
  --ptk-line: #e6e9ee;
  --ptk-line-strong: #d0d5dd;
  --ptk-bg: #f6f7f9;
  --ptk-surface: #fff;
  --ptk-surface-2: #f9fafb;

  /* ── شعاع ── */
  --ptk-r-sm: 8px;
  --ptk-r-md: 12px;
  --ptk-r-lg: 16px;
  --ptk-r-xl: 20px;
  --ptk-r-pill: 999px;

  /* ── سایه ── */
  --ptk-shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --ptk-shadow-sm: 0 2px 8px rgba(16, 24, 40, .06);
  --ptk-shadow-md: 0 8px 24px rgba(16, 24, 40, .08);
  --ptk-shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .22);
  --ptk-focus: 0 0 0 3px rgba(20, 130, 145, .22);

  /* ── حرکت ── */
  --ptk-ease: cubic-bezier(.2, .8, .2, 1);
  --ptk-t-fast: 120ms;
  --ptk-t: 180ms;

  /* ── نگاشت به متغیرهای Bootstrap/قالب ── */
  --bs-primary: #148291;
  --bs-primary-rgb: 20, 130, 145;
  --bs-primary-bg-subtle: #e8f5f7;
  --bs-primary-border-subtle: #cfebef;
  --bs-primary-text-emphasis: #0d5863;
  --bs-success: #2f9e5b;   --bs-success-rgb: 47, 158, 91;
  --bs-warning: #e5a00d;   --bs-warning-rgb: 229, 160, 13;
  --bs-danger: #d9424e;    --bs-danger-rgb: 217, 66, 78;
  --bs-info: #2b8cc4;      --bs-info-rgb: 43, 140, 196;
  --bs-body-color: var(--ptk-ink-700);
  --bs-body-bg: var(--ptk-bg);
  --bs-heading-color: var(--ptk-ink-900);
  --bs-border-color: var(--ptk-line);
  --bs-border-radius: var(--ptk-r-md);
  --bs-border-radius-sm: var(--ptk-r-sm);
  --bs-border-radius-lg: var(--ptk-r-lg);
  --bs-border-radius-xl: var(--ptk-r-xl);
  --bs-link-color: var(--ptk-primary-500);
  --bs-link-hover-color: var(--ptk-primary-600);
}

/* ─────────────── پایه و تایپوگرافی ─────────────── */
html body {
  font-size: .875rem;
  line-height: 1.7;
  color: var(--ptk-ink-700);
  background-color: var(--ptk-bg);
}
h1, .h1 { font-size: 1.5rem;   font-weight: 700; line-height: 1.4; color: var(--ptk-ink-900); }
h2, .h2 { font-size: 1.25rem;  font-weight: 700; line-height: 1.4; color: var(--ptk-ink-900); }
h3, .h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.5; color: var(--ptk-ink-900); }
h4, .h4, h5, .h5, h6, .h6 { font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--ptk-ink-900); }
.text-muted, small.text-muted { color: var(--ptk-ink-500) !important; }
label, .form-label { font-size: .8125rem; font-weight: 500; color: var(--ptk-ink-700); margin-bottom: .35rem; }
a { color: var(--ptk-primary-500); }
a:hover { color: var(--ptk-primary-600); }
:focus-visible { outline: none; box-shadow: var(--ptk-focus); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ─────────────── رنگ برند روی کلاس‌های ابزاری ─────────────── */
.text-primary { color: var(--ptk-primary-500) !important; }
.bg-primary { background-color: var(--ptk-primary-500) !important; }
.border-primary { border-color: var(--ptk-primary-500) !important; }
.text-success { color: var(--ptk-success) !important; }
.text-danger { color: var(--ptk-danger) !important; }
.text-warning { color: var(--ptk-warning-ink) !important; }
.text-info { color: var(--ptk-info) !important; }

.bg-label-primary   { background-color: var(--ptk-primary-50) !important; color: var(--ptk-primary-600) !important; }
.bg-label-success   { background-color: var(--ptk-success-soft) !important; color: var(--ptk-success-ink) !important; }
.bg-label-warning   { background-color: var(--ptk-warning-soft) !important; color: var(--ptk-warning-ink) !important; }
.bg-label-danger    { background-color: var(--ptk-danger-soft) !important; color: var(--ptk-danger-ink) !important; }
.bg-label-info      { background-color: var(--ptk-info-soft) !important; color: var(--ptk-info-ink) !important; }
.bg-label-secondary { background-color: #eef0f3 !important; color: var(--ptk-ink-500) !important; }
.bg-label-dark      { background-color: #e3e6eb !important; color: var(--ptk-ink-900) !important; }

/* ─────────────── کارت ─────────────── */
.card {
  --bs-card-border-width: 1px;
  --bs-card-border-color: var(--ptk-line);
  --bs-card-border-radius: var(--ptk-r-lg);
  --bs-card-inner-border-radius: calc(var(--ptk-r-lg) - 1px);
  --bs-card-box-shadow: var(--ptk-shadow-xs);
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-cap-padding-y: 1.1rem;
  --bs-card-cap-padding-x: 1.25rem;
  border: 1px solid var(--ptk-line);
  border-radius: var(--ptk-r-lg);
  box-shadow: var(--ptk-shadow-xs);
  background-color: var(--ptk-surface);
}
.card-header, .card-footer { background: transparent; border-color: var(--ptk-line); }
.card-header { border-bottom: 1px solid var(--ptk-line); }
.card-header > h5, .card-header > .card-title, h5.card-header { font-size: 1rem; font-weight: 600; }
button.card, a.card { transition: transform var(--ptk-t) var(--ptk-ease), box-shadow var(--ptk-t) var(--ptk-ease), border-color var(--ptk-t) var(--ptk-ease); }
button.card:hover, a.card:hover { box-shadow: var(--ptk-shadow-md); border-color: var(--ptk-primary-100); }

/* ─────────────── دکمه ─────────────── */
.btn { border-radius: var(--ptk-r-md); font-weight: 500; transition: background-color var(--ptk-t-fast) var(--ptk-ease), border-color var(--ptk-t-fast) var(--ptk-ease), box-shadow var(--ptk-t-fast) var(--ptk-ease), transform var(--ptk-t-fast) var(--ptk-ease); }
.btn-sm { border-radius: var(--ptk-r-sm); }
.btn-lg { border-radius: var(--ptk-r-lg); }
.btn:focus-visible { box-shadow: var(--ptk-focus) !important; }

.btn-primary { color: #fff; background-color: var(--ptk-primary-500); border-color: var(--ptk-primary-500); box-shadow: var(--ptk-shadow-xs); }
.btn-primary:hover, .btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary.focus,
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active,
.btn-primary.show.dropdown-toggle, .show > .btn-primary.dropdown-toggle {
  color: #fff !important; background-color: var(--ptk-primary-600) !important; border-color: var(--ptk-primary-600) !important; box-shadow: var(--ptk-shadow-sm) !important;
}
.btn-primary.disabled, .btn-primary:disabled { color: #fff !important; background-color: var(--ptk-primary-500) !important; border-color: var(--ptk-primary-500) !important; box-shadow: none !important; opacity: .55; }
.btn-outline-primary { color: var(--ptk-primary-500); border-color: var(--ptk-primary-500); }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary { color: #fff !important; background-color: var(--ptk-primary-500) !important; border-color: var(--ptk-primary-500) !important; box-shadow: var(--ptk-shadow-xs) !important; }
.btn-label-primary { color: var(--ptk-primary-600); background: var(--ptk-primary-50); }
.btn-label-primary:hover { background: var(--ptk-primary-100) !important; color: var(--ptk-primary-700) !important; }

.btn-success { background-color: var(--ptk-success); border-color: var(--ptk-success); }
.btn-success:hover, .btn-success:focus, .btn-success:active { background-color: #278a4d !important; border-color: #278a4d !important; }
.btn-danger { background-color: var(--ptk-danger); border-color: var(--ptk-danger); }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background-color: #c4353f !important; border-color: #c4353f !important; }
.btn-warning { background-color: var(--ptk-warning); border-color: var(--ptk-warning); }
.btn-info { background-color: var(--ptk-info); border-color: var(--ptk-info); }
.btn-outline-success { color: var(--ptk-success); border-color: var(--ptk-success); }
.btn-outline-danger { color: var(--ptk-danger); border-color: var(--ptk-danger); }
.btn-outline-warning { color: var(--ptk-warning-ink); border-color: var(--ptk-warning); }
.btn-outline-info { color: var(--ptk-info); border-color: var(--ptk-info); }
.btn-outline-secondary { color: var(--ptk-ink-500); border-color: var(--ptk-line-strong); }
.btn-outline-secondary:hover { color: var(--ptk-ink-900) !important; background: var(--ptk-surface-2) !important; border-color: var(--ptk-line-strong) !important; }
.btn-label-secondary { color: var(--ptk-ink-700); background: #eef0f3; }
.btn-label-secondary:hover { background: #e3e6eb !important; color: var(--ptk-ink-900) !important; }

/* ─────────────── فرم ─────────────── */
.form-control, .form-select {
  min-height: 2.5rem;
  font-size: .84375rem;
  color: var(--ptk-ink-900);
  background-color: var(--ptk-surface);
  border: 1px solid var(--ptk-line-strong);
  border-radius: var(--ptk-r-md);
  transition: border-color var(--ptk-t-fast) var(--ptk-ease), box-shadow var(--ptk-t-fast) var(--ptk-ease);
}
.form-control::placeholder { color: var(--ptk-ink-400); }
.form-control:focus, .form-select:focus { color: var(--ptk-ink-900); border-color: var(--ptk-primary-500); box-shadow: var(--ptk-focus); }
.form-control-sm, .form-select-sm { min-height: 2rem; border-radius: var(--ptk-r-sm); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--ptk-surface-2); }
.input-group-text { border-color: var(--ptk-line-strong); border-radius: var(--ptk-r-md); background: var(--ptk-surface-2); color: var(--ptk-ink-500); }
.form-check-input { border-color: var(--ptk-line-strong); }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--ptk-primary-500); border-color: var(--ptk-primary-500); box-shadow: none; }
.form-check-input:focus { border-color: var(--ptk-primary-500); box-shadow: var(--ptk-focus); }
.form-switch .form-check-input:checked { background-color: var(--ptk-primary-500); }
.invalid-feedback { font-size: .75rem; }

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { min-height: 2.5rem; border: 1px solid var(--ptk-line-strong); border-radius: var(--ptk-r-md); }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--ptk-primary-500); box-shadow: var(--ptk-focus); }
.select2-dropdown { border: 1px solid var(--ptk-line); border-radius: var(--ptk-r-md); box-shadow: var(--ptk-shadow-md); overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--ptk-primary-500) !important; }
/* متن گزینه‌ی هایلایت‌شده: قالب select2 رنگ بنفش !important می‌دهد که روی زمینه‌ی primary ناخوانا بود */
.select2-dropdown .select2-results__option--highlighted[aria-selected],
.select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable,
.select2-dropdown .select2-results__option--highlighted:not([aria-selected=true]) { color: #fff !important; }

/* ─────────────── جدول ─────────────── */
.table {
  --bs-table-striped-bg: #fafbfc;
  --bs-table-hover-bg: rgba(20, 130, 145, .045);
  --bs-table-border-color: var(--ptk-line);
  color: var(--ptk-ink-700);
  font-size: .84375rem;
}
.table > :not(caption) > * > * { padding: .8rem 1rem; border-bottom-color: var(--ptk-line); }
.table > thead > tr > th, .table > thead.table-dark > tr > th, .table > thead.table-light > tr > th,
.table thead th {
  background-color: var(--ptk-surface-2) !important;
  color: var(--ptk-ink-500) !important;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-top: 0;
  border-bottom: 1px solid var(--ptk-line);
  white-space: nowrap;
}
.table-responsive { border-radius: var(--ptk-r-md); }
table.dataTable thead th, table.dataTable thead td { border-bottom: 1px solid var(--ptk-line) !important; }
.dataTables_wrapper .dataTables_info { color: var(--ptk-ink-500); font-size: .8125rem; }

/* ─────────────── Badge ─────────────── */
.badge { border-radius: var(--ptk-r-pill); font-size: .75rem; font-weight: 500; padding: .35em .75em; letter-spacing: 0; text-transform: none; }
.badge.bg-primary   { background-color: var(--ptk-primary-50) !important; color: var(--ptk-primary-600) !important; }
.badge.bg-success   { background-color: var(--ptk-success-soft) !important; color: var(--ptk-success-ink) !important; }
.badge.bg-warning   { background-color: var(--ptk-warning-soft) !important; color: var(--ptk-warning-ink) !important; }
.badge.bg-danger    { background-color: var(--ptk-danger-soft) !important; color: var(--ptk-danger-ink) !important; }
.badge.bg-info      { background-color: var(--ptk-info-soft) !important; color: var(--ptk-info-ink) !important; }
.badge.bg-secondary { background-color: #eef0f3 !important; color: var(--ptk-ink-500) !important; }
.badge.bg-dark      { background-color: #e3e6eb !important; color: var(--ptk-ink-900) !important; }

/* ─────────────── صفحه‌بندی ─────────────── */
.page-link { border-radius: var(--ptk-r-sm) !important; color: var(--ptk-ink-700); border-color: transparent; background: transparent; margin: 0 2px; }
.page-item .page-link:hover { background: var(--ptk-surface-2); color: var(--ptk-primary-600); }
.page-item.active .page-link { background-color: var(--ptk-primary-500) !important; border-color: var(--ptk-primary-500) !important; color: #fff !important; box-shadow: var(--ptk-shadow-xs); transform: none; }
.page-item.disabled .page-link { color: var(--ptk-ink-400); background: transparent; }
.paginate_button.page-item .page-link { border-radius: var(--ptk-r-sm); }

/* ─────────────── مدال / dropdown / alert ─────────────── */
.modal-content { border: 0; border-radius: var(--ptk-r-xl); box-shadow: var(--ptk-shadow-lg); }
.modal-header { border-bottom: 0; padding: 1.25rem 1.5rem .5rem; }
.modal-footer { border-top: 1px solid var(--ptk-line); padding: 1rem 1.5rem; }
.modal-title { font-size: 1.0625rem; font-weight: 600; }
.modal-backdrop.show { --bs-backdrop-opacity: .45; }
.dropdown-menu { border: 1px solid var(--ptk-line); border-radius: var(--ptk-r-md); box-shadow: var(--ptk-shadow-md); padding: .4rem; }
.dropdown-item { border-radius: var(--ptk-r-sm); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--ptk-primary-50); color: var(--ptk-primary-600); }
.alert { border-radius: var(--ptk-r-md); }
.progress { height: .5rem; border-radius: var(--ptk-r-pill); background: #eef0f3; }
.progress-bar { background-color: var(--ptk-primary-500); }
.nav-pills .nav-link { border-radius: var(--ptk-r-md); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--ptk-primary-500); color: #fff; box-shadow: var(--ptk-shadow-sm); }
.nav-tabs .nav-link.active { color: var(--ptk-primary-600); border-color: var(--ptk-primary-500); }
.avatar .avatar-initial.rounded, .avatar-initial.rounded { border-radius: var(--ptk-r-md) !important; }
.list-group-item { border-color: var(--ptk-line); }

/* SweetAlert2 */
.swal2-popup { border-radius: var(--ptk-r-xl); font-family: inherit; }
.swal2-styled.swal2-confirm { background-color: var(--ptk-primary-500) !important; border-radius: var(--ptk-r-md); }
.swal2-styled.swal2-cancel { border-radius: var(--ptk-r-md); }

/* ─────────────── منوی کناری و نوار بالا ─────────────── */
.bg-menu-theme, .layout-menu { background-color: var(--ptk-surface) !important; }
.layout-menu { border-inline-end: 1px solid var(--ptk-line); }
.bg-menu-theme.menu-vertical { box-shadow: none !important; }
.menu-vertical .menu-item .menu-link { border-radius: var(--ptk-r-md); }
.bg-menu-theme .menu-item.active > .menu-link { color: var(--ptk-primary-600); }
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
[dir=rtl] .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--ptk-primary-50) !important;
  box-shadow: none !important;
  color: var(--ptk-primary-600) !important;
  font-weight: 600;
}
.bg-menu-theme .menu-inner > .menu-item.active:before,
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active:before { background: var(--ptk-primary-500) !important; }
.bg-menu-theme .menu-item.open > .menu-toggle { color: var(--ptk-ink-900); }
.bg-menu-theme .menu-inner > .menu-item > .menu-link:hover { background: var(--ptk-surface-2); }
.bg-navbar-theme { background-color: var(--ptk-surface) !important; box-shadow: none !important; border: 1px solid var(--ptk-line); }
.layout-navbar-fixed .layout-navbar.navbar-detached, .layout-navbar.navbar-detached { border-radius: var(--ptk-r-lg); box-shadow: var(--ptk-shadow-xs) !important; }
.content-wrapper { background: transparent; }