/* ============================================================================
   MajidLab Store Theme — «Sage»
   یک تم Bootstrap 5.3 مینیمال، مدرن و طبیعی با پالت Sage Green + لهجه‌ی چوبی
   ----------------------------------------------------------------------------
   فلسفه: ساده، تمیز، حرفه‌ای و گرم — بدون Gradient شدید، Shadow سنگین و
   Radius افراطی. همه‌ی رنگ‌ها از CSS Variables خوانده می‌شوند تا تغییر تم
   از یک نقطه ممکن باشد. کاملاً RTL و Responsive.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1) CSS Variables — تنها محل تعریف رنگ‌ها
   ---------------------------------------------------------------------------- */
:root {
    /* پالت اصلی */
    --ml-primary: #7A8F78;
    --ml-primary-dark: #5F705D;
    --ml-primary-light: #E8EDE6;
    --ml-charcoal: #202320;
    --ml-dark: #171917;
    --ml-white: #FFFFFF;
    --ml-bg: #F7F8F6;

    /* لهجه‌های چوبی — استفاده محدود */
    --ml-wood-light: #D8B98A;
    --ml-wood: #A8794F;
    --ml-wood-dark: #654936;

    /* سطوح و خطوط */
    --ml-border: #DEE3DC;
    --ml-border-strong: #C9D1C7;
    --ml-surface: #FFFFFF;
    --ml-surface-muted: #F2F4F1;
    --ml-hover: #EFF3EE;

    /* وضعیت‌ها — هماهنگ با پالت طبیعی */
    --ml-success: #6E9A6B;
    --ml-success-light: #EAF2E9;
    --ml-danger: #B05A54;
    --ml-danger-light: #F7EAE9;
    --ml-warning: #C9A15C;
    --ml-warning-light: #F7F0E2;
    --ml-info: #7B99A3;
    --ml-info-light: #EBF1F2;

    /* سایه‌های بسیار ملایم */
    --ml-shadow-xs: 0 1px 3px rgba(32, 35, 32, 0.05);
    --ml-shadow-sm: 0 2px 12px rgba(32, 35, 32, 0.06);
    --ml-shadow-md: 0 4px 18px rgba(32, 35, 32, 0.08);

    /* شعاع‌ها: کوچک/متوسط/بزرگ — بدون Pill (به‌جز Badge) */
    --ml-radius-sm: 6px;
    --ml-radius-md: 10px;
    --ml-radius-lg: 14px;

    /* تایپوگرافی */
    --ml-font-family: 'Yekan', 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
    --ml-heading-weight: 600;
    --ml-heading-color: var(--ml-charcoal);
    --ml-text-muted: #5C655C;

    /* انتقال‌ها */
    --ml-transition: .16s ease-in-out;

    /* حالت‌های Primary برای استفاده‌ی داخلی کامپوننت‌ها */
    --ml-primary-hover: #6F8370;
    --ml-primary-active: #5F705D;
    --ml-primary-focus-ring: rgba(122, 143, 120, .35);
    --ml-primary-disabled-bg: #B9C5B7;
}

/* ----------------------------------------------------------------------------
   2) Override متغیرهای Bootstrap — هماهنگ با پالت
   ---------------------------------------------------------------------------- */
:root {
    --bs-primary: var(--ml-primary);
    --bs-primary-rgb: 122, 143, 120;
    --bs-secondary: #8A948A;
    --bs-secondary-rgb: 138, 148, 138;
    --bs-success: var(--ml-success);
    --bs-success-rgb: 110, 154, 107;
    --bs-danger: var(--ml-danger);
    --bs-danger-rgb: 176, 90, 84;
    --bs-warning: var(--ml-warning);
    --bs-warning-rgb: 201, 161, 92;
    --bs-info: var(--ml-info);
    --bs-info-rgb: 123, 153, 163;
    --bs-light: var(--ml-surface-muted);
    --bs-light-rgb: 242, 244, 241;
    --bs-dark: var(--ml-dark);
    --bs-dark-rgb: 23, 25, 23;

    --bs-body-bg: var(--ml-bg);
    --bs-body-color: var(--ml-charcoal);
    --bs-body-font-family: var(--ml-font-family);
    --bs-body-font-size: .95rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.9;

    --bs-border-color: var(--ml-border);
    --bs-border-radius: var(--ml-radius-md);
    --bs-border-radius-sm: var(--ml-radius-sm);
    --bs-border-radius-lg: var(--ml-radius-lg);
    --bs-border-radius-pill: 999px;

    --bs-link-color: var(--ml-primary-dark);
    --bs-link-color-rgb: 95, 112, 93;
    --bs-link-hover-color: var(--ml-primary);

    --bs-focus-ring-color: var(--ml-primary-focus-ring);
    --bs-focus-ring-width: .2rem;

    /* تِینت‌های سبک Bootstrap برای alert / badge / btn-soft */
    --bs-primary-bg-subtle: var(--ml-primary-light);
    --bs-primary-border-subtle: #CFDACC;
    --bs-secondary-bg-subtle: var(--ml-surface-muted);
    --bs-secondary-border-subtle: var(--ml-border);
    --bs-success-bg-subtle: var(--ml-success-light);
    --bs-success-border-subtle: #D4E3D3;
    --bs-danger-bg-subtle: var(--ml-danger-light);
    --bs-danger-border-subtle: #E8D3D1;
    --bs-warning-bg-subtle: var(--ml-warning-light);
    --bs-warning-border-subtle: #EBDFC6;
    --bs-info-bg-subtle: var(--ml-info-light);
    --bs-info-border-subtle: #D5E1E4;
    --bs-light-bg-subtle: #F2F4F1;
    --bs-light-border-subtle: var(--ml-border);
    --bs-dark-bg-subtle: #D8DBD8;
    --bs-dark-border-subtle: #BDC2BD;
}

/* رنگ‌های خاکستری Bootstrap به سمت خاکستریِ سبزِ پالت */
:root {
    --bs-gray: #6D756D;
    --bs-gray-dark: var(--ml-charcoal);
    --bs-gray-100: #F4F6F3;
    --bs-gray-200: #E9EDE8;
    --bs-gray-300: var(--ml-border);
    --bs-gray-400: var(--ml-border-strong);
    --bs-gray-500: #99A298;
    --bs-gray-600: var(--ml-text-muted);
    --bs-gray-700: #3A423A;
    --bs-gray-800: #2A302A;
    --bs-gray-900: var(--ml-charcoal);
}

[data-bs-theme="dark"] {
    --bs-body-bg: var(--ml-dark);
    --bs-body-color: #E4E8E3;
    --ml-surface: #202320;
    --ml-surface-muted: #232623;
    --ml-border: #33383333;
}

/* ----------------------------------------------------------------------------
   3) Typography — سلسله‌مراتب واضح، وزن متعادل
   ---------------------------------------------------------------------------- */
body,
button,
input,
select,
textarea,
optgroup,
.form-control,
.form-select,
.btn,
.dropdown-menu,
.modal,
.tooltip,
.popover {
    font-family: var(--ml-font-family);
}

body {
    font-weight: 400;
    background-color: var(--ml-bg);
    color: var(--ml-charcoal);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ml-heading-color);
    font-weight: var(--ml-heading-weight);
    line-height: 1.6;
}

h1, .h1 { font-size: 1.9rem; letter-spacing: -.01em; }
h2, .h2 { font-size: 1.55rem; }
h3, .h3 { font-size: 1.28rem; }
h4, .h4 { font-size: 1.12rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .9rem; }

.display-1 { font-weight: 600; }
.display-2 { font-weight: 600; }
.display-3 { font-weight: 600; }
.display-4 { font-weight: 600; }
.display-5 { font-weight: 600; }
.display-6 { font-weight: 600; }

.text-muted { color: var(--ml-text-muted) !important; }

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ----------------------------------------------------------------------------
   4) Buttons — ساده، بدون Gradient، حالت‌های واضح
   ---------------------------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: var(--ml-radius-md);
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1.15rem;
    --bs-btn-font-weight: 500;
    --bs-btn-focus-box-shadow: 0 0 0 .2rem var(--ml-primary-focus-ring);
    border-radius: var(--ml-radius-md);
    transition: background-color var(--ml-transition),
                border-color var(--ml-transition),
                color var(--ml-transition),
                box-shadow var(--ml-transition);
}

.btn-sm { --bs-btn-border-radius: var(--ml-radius-sm); }
.btn-lg { --bs-btn-border-radius: var(--ml-radius-md); }

/* Primary — Sage Green */
.btn-primary {
    --bs-btn-bg: var(--ml-primary);
    --bs-btn-border-color: var(--ml-primary);
    --bs-btn-color: var(--ml-white);
    --bs-btn-hover-bg: var(--ml-primary-hover);
    --bs-btn-hover-border-color: var(--ml-primary-hover);
    --bs-btn-hover-color: var(--ml-white);
    --bs-btn-active-bg: var(--ml-primary-active);
    --bs-btn-active-border-color: var(--ml-primary-active);
    --bs-btn-active-color: var(--ml-white);
    --bs-btn-disabled-bg: var(--ml-primary-disabled-bg);
    --bs-btn-disabled-border-color: var(--ml-primary-disabled-bg);
    --bs-btn-disabled-color: var(--ml-white);
    --bs-btn-focus-shadow-rgb: 122, 143, 120;
}

/* Outline Primary */
.btn-outline-primary {
    --bs-btn-color: var(--ml-primary-dark);
    --bs-btn-border-color: var(--ml-primary);
    --bs-btn-hover-bg: var(--ml-primary);
    --bs-btn-hover-border-color: var(--ml-primary);
    --bs-btn-hover-color: var(--ml-white);
    --bs-btn-active-bg: var(--ml-primary-active);
    --bs-btn-active-border-color: var(--ml-primary-active);
    --bs-btn-active-color: var(--ml-white);
    --bs-btn-disabled-color: var(--ml-primary-disabled-bg);
    --bs-btn-disabled-border-color: var(--ml-primary-disabled-bg);
    --bs-btn-focus-shadow-rgb: 122, 143, 120;
}

/* Secondary — خنثی با Border ظریف */
.btn-secondary {
    --bs-btn-bg: var(--ml-white);
    --bs-btn-border-color: var(--ml-border-strong);
    --bs-btn-color: var(--ml-charcoal);
    --bs-btn-hover-bg: var(--ml-surface-muted);
    --bs-btn-hover-border-color: var(--ml-border-strong);
    --bs-btn-hover-color: var(--ml-charcoal);
    --bs-btn-active-bg: var(--ml-hover);
    --bs-btn-active-border-color: var(--ml-border-strong);
    --bs-btn-active-color: var(--ml-charcoal);
    --bs-btn-disabled-bg: var(--ml-surface-muted);
    --bs-btn-disabled-border-color: var(--ml-border);
    --bs-btn-disabled-color: var(--ml-text-muted);
    --bs-btn-focus-shadow-rgb: 138, 148, 138;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ml-text-muted);
    --bs-btn-border-color: var(--ml-border-strong);
    --bs-btn-hover-bg: var(--ml-surface-muted);
    --bs-btn-hover-border-color: var(--ml-border-strong);
    --bs-btn-hover-color: var(--ml-charcoal);
    --bs-btn-active-bg: var(--ml-hover);
    --bs-btn-active-border-color: var(--ml-border-strong);
    --bs-btn-focus-shadow-rgb: 138, 148, 138;
}

/* Success / Danger / Warning / Info — نسخه‌های آرام پالت */
.btn-success {
    --bs-btn-bg: var(--ml-success);
    --bs-btn-border-color: var(--ml-success);
    --bs-btn-hover-bg: #628B60;
    --bs-btn-hover-border-color: #628B60;
    --bs-btn-active-bg: #577D55;
    --bs-btn-active-border-color: #577D55;
    --bs-btn-disabled-bg: var(--ml-success);
    --bs-btn-focus-shadow-rgb: 110, 154, 107;
}

.btn-danger {
    --bs-btn-bg: var(--ml-danger);
    --bs-btn-border-color: var(--ml-danger);
    --bs-btn-hover-bg: #A34F49;
    --bs-btn-hover-border-color: #A34F49;
    --bs-btn-active-bg: #97473F;
    --bs-btn-active-border-color: #97473F;
    --bs-btn-disabled-bg: var(--ml-danger);
    --bs-btn-focus-shadow-rgb: 176, 90, 84;
}

.btn-warning {
    --bs-btn-bg: var(--ml-warning);
    --bs-btn-border-color: var(--ml-warning);
    --bs-btn-color: var(--ml-charcoal);
    --bs-btn-hover-bg: #BE9551;
    --bs-btn-hover-border-color: #BE9551;
    --bs-btn-active-bg: #B08A4A;
    --bs-btn-active-border-color: #B08A4A;
    --bs-btn-disabled-bg: var(--ml-warning);
    --bs-btn-focus-shadow-rgb: 201, 161, 92;
}

.btn-info {
    --bs-btn-bg: var(--ml-info);
    --bs-btn-border-color: var(--ml-info);
    --bs-btn-color: var(--ml-white);
    --bs-btn-hover-bg: #6E8C96;
    --bs-btn-hover-border-color: #6E8C96;
    --bs-btn-active-bg: #628089;
    --bs-btn-active-border-color: #628089;
    --bs-btn-disabled-bg: var(--ml-info);
    --bs-btn-focus-shadow-rgb: 123, 153, 163;
}

.btn-light {
    --bs-btn-bg: var(--ml-white);
    --bs-btn-border-color: var(--ml-border);
    --bs-btn-color: var(--ml-charcoal);
    --bs-btn-hover-bg: var(--ml-surface-muted);
    --bs-btn-hover-border-color: var(--ml-border);
    --bs-btn-hover-color: var(--ml-charcoal);
    --bs-btn-active-bg: var(--ml-hover);
    --bs-btn-active-border-color: var(--ml-border);
}

.btn-dark {
    --bs-btn-bg: var(--ml-dark);
    --bs-btn-border-color: var(--ml-dark);
    --bs-btn-color: var(--ml-white);
    --bs-btn-hover-bg: #232623;
    --bs-btn-hover-border-color: #232623;
    --bs-btn-active-bg: #2C302C;
    --bs-btn-active-border-color: #2C302C;
}

.btn-link {
    --bs-btn-color: var(--ml-primary-dark);
    --bs-btn-hover-color: var(--ml-primary);
}

/* لهجه‌ی چوبی — فقط برای اکشن‌های خاص (ویرایش، یادداشت و…) با استفاده محدود */
.btn-wood {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ml-wood);
    --bs-btn-color: var(--ml-wood-dark);
}
.btn-wood:hover,
.btn-wood:focus {
    background-color: var(--ml-wood);
    border-color: var(--ml-wood);
    color: var(--ml-white);
}

/* ----------------------------------------------------------------------------
   5) Forms — Border ظریف، Focus آرام با Sage
   ---------------------------------------------------------------------------- */
.form-control,
.form-select {
    border-color: var(--ml-border);
    background-color: var(--ml-white);
    border-radius: var(--ml-radius-md);
    padding: .5rem .85rem;
    transition: border-color var(--ml-transition), box-shadow var(--ml-transition), background-color var(--ml-transition);
}

.form-control::placeholder { color: #A9B2A8; }

.form-control:hover,
.form-select:hover {
    border-color: var(--ml-border-strong);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ml-primary);
    box-shadow: 0 0 0 .2rem var(--ml-primary-focus-ring);
    background-color: var(--ml-white);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--ml-surface-muted);
    border-color: var(--ml-border);
    color: var(--ml-text-muted);
}

.form-control-plaintext { color: var(--ml-charcoal); }

.form-check-input {
    border-color: var(--ml-border-strong);
}
.form-check-input:checked {
    background-color: var(--ml-primary);
    border-color: var(--ml-primary);
}
.form-check-input:focus {
    border-color: var(--ml-primary);
    box-shadow: 0 0 0 .2rem var(--ml-primary-focus-ring);
}
.form-check-input[type="checkbox"] { border-radius: 4px; }

.form-label {
    font-weight: 500;
    color: var(--ml-charcoal);
    margin-bottom: .35rem;
}

.form-text { color: var(--ml-text-muted); }

.input-group-text {
    background-color: var(--ml-surface-muted);
    border-color: var(--ml-border);
    color: var(--ml-text-muted);
}

.form-range::-webkit-slider-thumb { background-color: var(--ml-primary); }
.form-range::-moz-range-thumb { background-color: var(--ml-primary); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--ml-bg), 0 0 0 .25rem var(--ml-primary-focus-ring); }

/* اعتبارسنجی */
.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: var(--ml-success);
}
.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: var(--ml-success);
    box-shadow: 0 0 0 .2rem rgba(110, 154, 107, .25);
}
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--ml-danger);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--ml-danger);
    box-shadow: 0 0 0 .2rem rgba(176, 90, 84, .25);
}

/* ----------------------------------------------------------------------------
   6) Cards — سفید، Border ظریف، Shadow بسیار ملایم، Hover خیلی آرام
   ---------------------------------------------------------------------------- */
.card {
    --bs-card-bg: var(--ml-surface);
    --bs-card-border-color: var(--ml-border);
    --bs-card-border-radius: var(--ml-radius-lg);
    --bs-card-inner-border-radius: calc(var(--ml-radius-lg) - 1px);
    --bs-card-cap-bg: var(--ml-surface);
    --bs-card-cap-color: var(--ml-heading-color);
    --bs-card-spacer-y: 1.1rem;
    --bs-card-spacer-x: 1.25rem;
    transition: box-shadow var(--ml-transition), border-color var(--ml-transition);
}

.card:hover {
    box-shadow: var(--ml-shadow-sm);
}

.card > .card-header {
    border-bottom: 1px solid var(--ml-border);
    color: var(--ml-heading-color);
    font-weight: var(--ml-heading-weight);
}

.card > .card-footer {
    border-top: 1px solid var(--ml-border);
    color: var(--ml-text-muted);
}

/* کارت‌های قابل کلیک — فقط تغییر سایه/بوردر، بدون scale شدید */
.card-hover:hover {
    border-color: var(--ml-primary);
    box-shadow: var(--ml-shadow-md);
}

/* ----------------------------------------------------------------------------
   7) Badges — مینیمال؛ فقط Badge‌ها Pill هستند
   ---------------------------------------------------------------------------- */
.badge {
    --bs-badge-border-radius: var(--bs-border-radius-pill);
    --bs-badge-font-weight: 500;
    letter-spacing: .01em;
}

.badge.text-bg-primary {
    background-color: var(--ml-primary) !important;
    color: var(--ml-white) !important;
}
.badge.text-bg-secondary {
    background-color: var(--ml-secondary, #8A948A) !important;
}
.badge.text-bg-success {
    background-color: var(--ml-success) !important;
}
.badge.text-bg-danger {
    background-color: var(--ml-danger) !important;
}
.badge.text-bg-warning {
    background-color: var(--ml-warning) !important;
    color: var(--ml-charcoal) !important;
}
.badge.text-bg-info {
    background-color: var(--ml-info) !important;
}
.badge.text-bg-light {
    background-color: var(--ml-surface-muted) !important;
    color: var(--ml-charcoal) !important;
}
.badge.text-bg-dark {
    background-color: var(--ml-dark) !important;
}

/* Badge های ظریف (subtle) برای وضعیت‌ها */
.badge-subtle {
    background-color: var(--ml-primary-light);
    color: var(--ml-primary-dark);
}
.badge-subtle-wood {
    background-color: #F3EADC;
    color: var(--ml-wood-dark);
}

/* ----------------------------------------------------------------------------
   8) Navbar — تمیز و مینیمال؛ Active با Sage
   ---------------------------------------------------------------------------- */
.navbar {
    --bs-navbar-padding-y: .65rem;
    background-color: var(--ml-white);
    border-bottom: 1px solid var(--ml-border);
}

.navbar .navbar-brand {
    color: var(--ml-heading-color);
    font-weight: var(--ml-heading-weight);
}

.navbar .nav-link {
    color: var(--ml-text-muted);
    font-weight: 500;
    padding: .5rem .9rem;
    border-radius: var(--ml-radius-sm);
    position: relative;
    transition: color var(--ml-transition), background-color var(--ml-transition);
}

.navbar .nav-link:hover {
    color: var(--ml-primary-dark);
    background-color: var(--ml-hover);
}

.navbar .nav-link.active,
.navbar .nav-link.show {
    color: var(--ml-primary-dark);
    background-color: var(--ml-primary-light);
}

.navbar-toggler {
    border-color: var(--ml-border);
    padding: .35rem .6rem;
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem var(--ml-primary-focus-ring);
}

/* Navbar تیره — برای فوتر یا هدر تیره */
.navbar.bg-dark,
.navbar[data-bs-theme="dark"] {
    background-color: var(--ml-dark) !important;
    border-bottom-color: #2C302C;
}
.navbar.bg-dark .nav-link,
.navbar[data-bs-theme="dark"] .nav-link {
    color: #C9CFC8;
}
.navbar.bg-dark .nav-link:hover,
.navbar[data-bs-theme="dark"] .nav-link:hover {
    color: var(--ml-white);
    background-color: #232623;
}
.navbar.bg-dark .nav-link.active,
.navbar[data-bs-theme="dark"] .nav-link.active {
    color: var(--ml-white);
    background-color: var(--ml-primary-dark);
}

/* ----------------------------------------------------------------------------
   9) Navs / Tabs / Pills — هماهنگ با تم
   ---------------------------------------------------------------------------- */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--ml-border);
    --bs-nav-tabs-link-active-color: var(--ml-primary-dark);
    --bs-nav-tabs-link-active-border-color: var(--ml-border) var(--ml-border) var(--ml-surface);
    --bs-nav-link-color: var(--ml-text-muted);
    --bs-nav-link-hover-color: var(--ml-primary-dark);
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--ml-radius-md);
    --bs-nav-pills-link-active-bg: var(--ml-primary);
}

/* ----------------------------------------------------------------------------
   10) Dropdown — سایه ملایم
   ---------------------------------------------------------------------------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--ml-surface);
    --bs-dropdown-border-color: var(--ml-border);
    --bs-dropdown-border-radius: var(--ml-radius-md);
    --bs-dropdown-link-color: var(--ml-charcoal);
    --bs-dropdown-link-hover-color: var(--ml-primary-dark);
    --bs-dropdown-link-hover-bg: var(--ml-hover);
    --bs-dropdown-link-active-color: var(--ml-white);
    --bs-dropdown-link-active-bg: var(--ml-primary);
    --bs-dropdown-box-shadow: var(--ml-shadow-sm);
}

.dropdown-divider { border-color: var(--ml-border); opacity: 1; }

/* ----------------------------------------------------------------------------
   11) Alerts — پس‌زمینه‌ی subtle آرام
   ---------------------------------------------------------------------------- */
.alert {
    --bs-alert-border-radius: var(--ml-radius-md);
    border-width: 1px;
}

.alert-primary { --bs-alert-color: var(--ml-primary-dark); --bs-alert-border-color: #CFDACC; background-color: var(--ml-primary-light); }
.alert-success { --bs-alert-color: #4E6E4C; --bs-alert-border-color: #D4E3D3; background-color: var(--ml-success-light); }
.alert-danger { --bs-alert-color: #8A4038; --bs-alert-border-color: #E8D3D1; background-color: var(--ml-danger-light); }
.alert-warning { --bs-alert-color: #7C6132; --bs-alert-border-color: #EBDFC6; background-color: var(--ml-warning-light); }
.alert-info { --bs-alert-color: #4E666F; --bs-alert-border-color: #D5E1E4; background-color: var(--ml-info-light); }

/* ----------------------------------------------------------------------------
   12) Tables — سطرها با خط ظریف، هدر آرام
   ---------------------------------------------------------------------------- */
.table {
    --bs-table-color: var(--ml-charcoal);
    --bs-table-border-color: var(--ml-border);
}

.table > thead {
    vertical-align: middle;
}

.table > :not(caption) > * > * {
    padding: .7rem .75rem;
}

.table > thead > tr > th {
    color: var(--ml-text-muted);
    font-weight: 500;
    font-size: .85rem;
    background-color: var(--ml-surface-muted);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--ml-hover);
    color: var(--ml-charcoal);
}

.table-primary {
    --bs-table-bg: var(--ml-primary-light);
    --bs-table-color: var(--ml-primary-dark);
}

/* ----------------------------------------------------------------------------
   13) Modal / Offcanvas — ظریف و هماهنگ
   ---------------------------------------------------------------------------- */
.modal-content {
    background-color: var(--ml-surface);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-lg);
    box-shadow: var(--ml-shadow-md);
}

.modal-header,
.modal-footer {
    border-color: var(--ml-border);
}

.modal-backdrop.show { opacity: .4; }

.offcanvas {
    background-color: var(--ml-surface);
    border-color: var(--ml-border);
}

/* ----------------------------------------------------------------------------
   14) Pagination — Active با Sage
   ---------------------------------------------------------------------------- */
.pagination {
    --bs-pagination-color: var(--ml-primary-dark);
    --bs-pagination-bg: var(--ml-surface);
    --bs-pagination-border-color: var(--ml-border);
    --bs-pagination-hover-color: var(--ml-primary-dark);
    --bs-pagination-hover-bg: var(--ml-hover);
    --bs-pagination-hover-border-color: var(--ml-border);
    --bs-pagination-focus-color: var(--ml-primary-dark);
    --bs-pagination-focus-bg: var(--ml-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--ml-primary-focus-ring);
    --bs-pagination-active-color: var(--ml-white);
    --bs-pagination-active-bg: var(--ml-primary);
    --bs-pagination-active-border-color: var(--ml-primary);
    --bs-pagination-disabled-color: var(--ml-text-muted);
    --bs-pagination-disabled-bg: var(--ml-surface-muted);
    --bs-pagination-disabled-border-color: var(--ml-border);
    --bs-pagination-border-radius: var(--ml-radius-sm);
}

/* ----------------------------------------------------------------------------
   15) Breadcrumb / ListGroup / Progress / Spinner
   ---------------------------------------------------------------------------- */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--ml-text-muted);
    font-size: .85rem;
}
.breadcrumb-item + .breadcrumb-item::before { color: #A9B2A8; }
.breadcrumb-item.active { color: var(--ml-text-muted); }
.breadcrumb-item a { color: var(--ml-primary-dark); }
.breadcrumb-item a:hover { color: var(--ml-primary); }

.list-group {
    --bs-list-group-bg: var(--ml-surface);
    --bs-list-group-border-color: var(--ml-border);
    --bs-list-group-action-color: var(--ml-charcoal);
    --bs-list-group-action-hover-color: var(--ml-primary-dark);
    --bs-list-group-action-hover-bg: var(--ml-hover);
    --bs-list-group-action-active-bg: var(--ml-primary-light);
    --bs-list-group-active-color: var(--ml-white);
    --bs-list-group-active-bg: var(--ml-primary);
    --bs-list-group-active-border-color: var(--ml-primary);
}

.progress {
    --bs-progress-bg: var(--ml-surface-muted);
    --bs-progress-border-radius: var(--ml-radius-sm);
}
.progress-bar { background-color: var(--ml-primary); }

.spinner-border { color: var(--ml-primary); }
.text-primary { color: var(--ml-primary) !important; }
.text-secondary { color: var(--ml-text-muted) !important; }
.bg-primary { background-color: var(--ml-primary) !important; }
.bg-body-tertiary { background-color: var(--ml-surface-muted) !important; }
.border-primary { border-color: var(--ml-primary) !important; }
.link-primary { color: var(--ml-primary-dark) !important; }

/* ----------------------------------------------------------------------------
   16) Accordion — خطوط ظریف
   ---------------------------------------------------------------------------- */
.accordion {
    --bs-accordion-bg: var(--ml-surface);
    --bs-accordion-border-color: var(--ml-border);
    --bs-accordion-border-radius: var(--ml-radius-lg);
    --bs-accordion-inner-border-radius: calc(var(--ml-radius-lg) - 1px);
    --bs-accordion-btn-focus-border-color: var(--ml-primary);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem var(--ml-primary-focus-ring);
    --bs-accordion-active-color: var(--ml-primary-dark);
    --bs-accordion-active-bg: var(--ml-primary-light);
    --bs-accordion-btn-color: var(--ml-charcoal);
}

/* ----------------------------------------------------------------------------
   17) Tooltip / Popover
   ---------------------------------------------------------------------------- */
.tooltip {
    --bs-tooltip-bg: var(--ml-dark);
    --bs-tooltip-border-radius: var(--ml-radius-sm);
    --bs-tooltip-opacity: .95;
}

.popover {
    --bs-popover-bg: var(--ml-surface);
    --bs-popover-border-color: var(--ml-border);
    --bs-popover-border-radius: var(--ml-radius-md);
    --bs-popover-header-bg: var(--ml-surface-muted);
    --bs-popover-body-color: var(--ml-charcoal);
    box-shadow: var(--ml-shadow-sm);
}

/* ----------------------------------------------------------------------------
   18) Utilityهای خاص تم — لهجه‌ی چوبی، سطوح و خطوط
   ---------------------------------------------------------------------------- */
.text-wood { color: var(--ml-wood-dark) !important; }
.bg-wood-light { background-color: #F3EADC !important; }
.border-ml { border-color: var(--ml-border) !important; }
.bg-ml-surface { background-color: var(--ml-surface) !important; }
.bg-ml-muted { background-color: var(--ml-surface-muted) !important; }
.ml-divider {
    height: 1px;
    background-color: var(--ml-border);
    border: 0;
    opacity: 1;
}

/* خط لهجه‌ی چوبی — فقط برای تأکیدهای خاص */
.ml-accent-wood {
    position: relative;
}
.ml-accent-wood::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -.45rem;
    width: 2.4rem;
    height: 3px;
    border-radius: 2px;
    background-color: var(--ml-wood);
}

/* ----------------------------------------------------------------------------
   19) RTL — هماهنگی کامل (فارسی)
   ---------------------------------------------------------------------------- */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { float: right; }

[dir="rtl"] .dropdown-menu-end {
    --bs-position: start;
}

[dir="rtl"] .btn-group > .btn:not(:last-child),
[dir="rtl"] .btn-group > .btn-group:not(:last-child) > .btn {
    border-radius: 0 var(--ml-radius-sm) var(--ml-radius-sm) 0;
}
[dir="rtl"] .btn-group > .btn:not(:first-child),
[dir="rtl"] .btn-group > .btn-group:not(:first-child) > .btn {
    border-radius: var(--ml-radius-sm) 0 0 var(--ml-radius-sm);
}

/* ----------------------------------------------------------------------------
   20) Responsive — یکپارچگی در همه‌ی اندازه‌ها
   ---------------------------------------------------------------------------- */
/* موبایل: فاصله‌های عمودی کمتر و کارد تمام‌عرض */
@media (max-width: 575.98px) {
    body { font-size: .9rem; }
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }
    .card { --bs-card-spacer-x: 1rem; }
    .btn { --bs-btn-padding-x: 1rem; }
}

/* تبلت و بالاتر */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .container { max-width: 100%; }
}

/* دسکتاپ بزرگ: حداکثر عرض محتوا برای خوانایی */
@media (min-width: 1400px) {
    .container { max-width: 1280px; }
}

/* کاهش حرکت برای کاربران حساس */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}