/* ==========================================================================
   panel-theme.css
   یک بار در پروژه اضافه شود: /wwwroot/assets/css/panel-theme.css
   در هر ویو فقط کافیست:
     1) این فایل را لینک کنید (یا یک‌بار در _Layout.cshtml مشترک بگذارید)
     2) کل محتوای صفحه را در <div class="pr-page"> بگذارید
     3) دکمه‌های btn-primary/btn-danger/... را به pr-btn pr-btn--variant تغییر دهید
     4) فیلدهای فرم داخل مودال را در <div class="pr-field"> بگذارید
   هیچ id، name، data-kt-* یا class جاوااسکریپتی نیازی به تغییر ندارد.
   ========================================================================== */

:root {
    --pr-bg: #F6F4EF;
    --pr-surface: #FFFFFF;
    --pr-surface-alt: #FAF8F4;
    --pr-border: #E7E1D6;
    --pr-text: #2A241C;
    --pr-text-muted: #8B8172;

    --pr-primary: #8A6F3D;
    --pr-primary-dark: #6E5A32;
    --pr-primary-soft: #F1E9D8;

    --pr-success: #3F7D5C;
    --pr-success-soft: #E3F0E8;

    --pr-danger: #B0483B;
    --pr-danger-soft: #F8E7E4;

    --pr-warning: #B4863E;
    --pr-warning-soft: #FBF0DE;

    --pr-info: #4A6FA5;
    --pr-info-soft: #E7EFF7;

    --pr-radius-sm: 8px;
    --pr-radius-md: 14px;
    --pr-radius-lg: 20px;
    --pr-shadow: 0 1px 2px rgba(42,36,28,.04), 0 12px 28px -16px rgba(42,36,28,.16);
}

.pr-page {
    font-family: 'Vazirmatn', 'IRANSansX', Tahoma, sans-serif;
    color: var(--pr-text);
}

/* ---- Cards ---- */
.pr-page .card {
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius-lg);
    box-shadow: var(--pr-shadow);
}

/* ---- Search / inputs ---- */
.pr-page [data-kt-docs-table-filter="search"],
.pr-page .form-control {
    border-radius: var(--pr-radius-sm);
}
.pr-page [data-kt-docs-table-filter="search"] {
    border: 1px solid var(--pr-border);
    background: var(--pr-surface-alt);
}
.pr-page [data-kt-docs-table-filter="search"]:focus {
    border-color: var(--pr-primary);
    box-shadow: 0 0 0 3px var(--pr-primary-soft);
    background: var(--pr-surface);
}

/* ---- Buttons: use these instead of btn-primary/btn-danger/... ----
   <button class="pr-btn pr-btn--primary">...</button>
   variants: --primary --outline --success --danger --warning --dark
*/
.pr-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--pr-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all .12s ease;
}
.pr-btn:hover { transform: translateY(-1px); text-decoration: none; }
.pr-btn--primary { background: var(--pr-primary); color: #fff; }
.pr-btn--primary:hover { background: var(--pr-primary-dark); color: #fff; }
.pr-btn--outline { background: var(--pr-surface); color: var(--pr-text); border-color: var(--pr-border); }
.pr-btn--outline:hover { border-color: var(--pr-primary); color: var(--pr-primary-dark); }
.pr-btn--success { background: var(--pr-success-soft); color: var(--pr-success); }
.pr-btn--success:hover { background: var(--pr-success); color: #fff; }
.pr-btn--danger { background: var(--pr-danger-soft); color: var(--pr-danger); }
.pr-btn--danger:hover { background: var(--pr-danger); color: #fff; }
.pr-btn--warning { background: var(--pr-warning-soft); color: var(--pr-warning); }
.pr-btn--dark { background: var(--pr-surface-alt); color: var(--pr-text); border-color: var(--pr-border); }

/* Square icon-only row-action buttons, e.g. edit/delete pen/trash icons */
.pr-page .btn-icon,
.pr-page .btn-group .btn-icon {
    border-radius: 8px !important;
    width: 30px;
    height: 30px;
}

/* ---- Table (works for ANY table id, e.g. kt_datatable_example_1, Tkt_datatable_example_1, ...) ---- */
.pr-page table.dataTable thead th {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pr-text-muted);
    border-bottom: 1px solid var(--pr-border) !important;
}
.pr-page table.dataTable tbody td {
    font-size: 13px;
    vertical-align: middle;
}
.pr-page table.dataTable.table-hover tbody tr:hover {
    background: var(--pr-surface-alt);
}
.pr-page table.dataTable.no-footer {
    border-bottom: none;
}

/* Row status classes some pages add via createdRow (table-danger, or the '-cutome' family) */
.pr-page table.dataTable tbody tr.table-danger,
.pr-page table.dataTable tbody tr.bg-light-danger-cutome     { background: var(--pr-danger-soft) !important; }
.pr-page table.dataTable tbody tr.table-success,
.pr-page table.dataTable tbody tr.bg-light-success-cutome    { background: var(--pr-success-soft) !important; }
.pr-page table.dataTable tbody tr.table-warning,
.pr-page table.dataTable tbody tr.bg-light-warning-cutome    { background: var(--pr-warning-soft) !important; }
.pr-page table.dataTable tbody tr.table-info,
.pr-page table.dataTable tbody tr.bg-light-info-cutome       { background: var(--pr-info-soft) !important; }
.pr-page table.dataTable tbody tr.table-primary,
.pr-page table.dataTable tbody tr.bg-light-primary-cutome    { background: var(--pr-primary-soft) !important; }
.pr-page table.dataTable tbody tr.bg-light-secondary-cutome  { background: var(--pr-surface-alt) !important; }

/* DataTables built-in chrome (length / info / pagination) */
.pr-page .dataTables_wrapper .dataTables_length,
.pr-page .dataTables_wrapper .dataTables_info,
.pr-page .dataTables_wrapper .dataTables_paginate {
    font-size: 12.5px;
    color: var(--pr-text-muted);
}
.pr-page .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px;
}
.pr-page .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--pr-primary) !important;
    border-color: var(--pr-primary) !important;
    color: #fff !important;
}

/* ---- Badges (however your *.js render function builds them, class names stay the same) ---- */
.pr-page .badge {
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    padding: 5px 10px;
}
.pr-page .badge-dark                              { background: var(--pr-surface-alt) !important; color: var(--pr-text) !important; border: 1px solid var(--pr-border); }
.pr-page .badge-info,    .pr-page .badge-light-info     { background: var(--pr-info-soft) !important;     color: var(--pr-info) !important; }
.pr-page .badge-warning, .pr-page .badge-light-warning  { background: var(--pr-warning-soft) !important;  color: var(--pr-warning) !important; }
.pr-page .badge-primary, .pr-page .badge-light-primary  { background: var(--pr-primary-soft) !important;  color: var(--pr-primary-dark) !important; }
.pr-page .badge-secondary, .pr-page .badge-light-secondary { background: var(--pr-surface-alt) !important; color: var(--pr-text-muted) !important; border: 1px solid var(--pr-border); }
.pr-page .badge-success, .pr-page .badge-light-success  { background: var(--pr-success-soft) !important;  color: var(--pr-success) !important; }
.pr-page .badge-danger,  .pr-page .badge-light-danger   { background: var(--pr-danger-soft) !important;   color: var(--pr-danger) !important; }

/* ---- Modals (global, not scoped to .pr-page, since modals render outside it in the DOM) ---- */
.modal .modal-content {
    border-radius: var(--pr-radius-lg);
    border: none;
    box-shadow: var(--pr-shadow);
    font-family: 'Vazirmatn', 'IRANSansX', Tahoma, sans-serif;
}

/* Use <div class="pr-field"><label>...</label><input class="form-control" /></div>
   instead of the old fv-row / mb-7 / label.fw-bold pattern            */
.modal .pr-field { margin-bottom: 16px; }
.modal .pr-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--pr-text);
}
.modal .form-control,
.modal select.form-control {
    border-radius: var(--pr-radius-sm);
    border: 1px solid var(--pr-border);
    padding: 10px 12px;
    font-size: 13.5px;
}
.modal .form-control:focus {
    border-color: var(--pr-primary);
    box-shadow: 0 0 0 3px var(--pr-primary-soft);
}

.modal .accordion-button:not(.collapsed) {
    background: var(--pr-primary-soft);
    color: var(--pr-primary-dark);
}
.modal .accordion-button:focus {
    box-shadow: 0 0 0 3px var(--pr-primary-soft);
    border-color: var(--pr-primary);
}

.modal .nav-pills .nav-link {
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pr-text-muted);
    padding: 8px 16px;
}
.modal .nav-pills .nav-link.active {
    background: var(--pr-primary) !important;
    color: #fff !important;
}

.modal .btn-outline-dashed {
    border-radius: var(--pr-radius-md);
    border-color: var(--pr-border);
}
.modal .btn-check:checked + .btn-outline-dashed {
    border-color: var(--pr-primary);
    background: var(--pr-primary-soft);
}