/* =============================================================================
   Menu Shop Design System
   Central tokens + component styles. Loaded last in dashboard/auth layouts.
   ============================================================================= */

:root {
    /* Brand / semantic colors */
    --color-primary: #6f5340;
    --color-primary-hover: #5a4334;
    --color-primary-soft: #f3ece6;
    --color-primary-rgb: 111, 83, 64;

    --color-secondary: #8a7b6f;
    --color-secondary-hover: #74675c;
    --color-secondary-rgb: 138, 123, 111;

    --color-success: #2d8a5e;
    --color-success-hover: #246f4b;
    --color-success-soft: #e8f6ef;
    --color-success-rgb: 45, 138, 94;

    --color-warning: #c9891a;
    --color-warning-hover: #a87214;
    --color-warning-soft: #fbf4e6;
    --color-warning-rgb: 201, 137, 26;

    --color-danger: #c94c3f;
    --color-danger-hover: #a83e34;
    --color-danger-soft: #fbeceb;
    --color-danger-rgb: 201, 76, 63;

    --color-info: #3d7a9a;
    --color-info-hover: #326480;
    --color-info-soft: #eaf3f8;
    --color-info-rgb: 61, 122, 154;

    /* Surfaces */
    --color-background: #f4f1ed;
    --color-surface: #ffffff;
    --color-surface-muted: #faf8f6;
    --color-border: #e5ddd4;
    --color-border-strong: #d4c8bc;

    /* Text */
    --color-text: #2b241c;
    --color-text-muted: #6f655c;
    --color-text-inverse: #ffffff;

    /* Focus */
    --focus-ring: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.18);
    --focus-border: rgba(var(--color-primary-rgb), 0.55);

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    /* Shadow — keep subtle */
    --shadow-sm: 0 1px 2px rgba(43, 36, 28, 0.05);
    --shadow-md: 0 4px 12px rgba(43, 36, 28, 0.06);
    --shadow-lg: 0 10px 24px rgba(43, 36, 28, 0.08);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Typography */
    --font-family: "iransans", "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-md: 0.9375rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.35rem;
    --line-height: 1.65;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Controls */
    --control-height: 42px;
    --control-height-sm: 34px;
    --control-height-lg: 48px;
    --control-padding-x: 0.85rem;
    --control-border-width: 1px;

    /* Layout */
    --sidebar-width: 16.666%;
    --topbar-height: 56px;
    --content-pad: 1.25rem;

    /* Compatibility aliases used across existing CSS files */
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-secondary);
    --success-color: var(--color-success);
    --warning-color: var(--color-warning);
    --danger-color: var(--color-danger);
    --info-color: var(--color-info);
    --light-color: var(--color-surface-muted);
    --dark-color: var(--color-text);
    --border-radius: var(--radius-lg);
    --box-shadow: var(--shadow-md);
    --font-color-dark: var(--color-text);
    --font-color-light: var(--color-text-inverse);
    --bg-form-color: var(--color-surface);
    --bg-primary: var(--color-surface);
    --bg-secondary: var(--color-background);
    --bg-tertiary: var(--color-surface-muted);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-muted);
    --text-muted: var(--color-text-muted);
    --border-color: var(--color-border);
    --border-light: var(--color-surface-muted);
    --dash-bg: var(--color-background);
    --dash-surface: var(--color-surface);
    --dash-border: var(--color-border);
    --dash-text: var(--color-text);
    --dash-muted: var(--color-text-muted);
    --dash-primary: var(--color-primary);
    --dash-radius: var(--radius-lg);

    /* Bootstrap 5 token bridge */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-secondary: var(--color-secondary);
    --bs-secondary-rgb: var(--color-secondary-rgb);
    --bs-success: var(--color-success);
    --bs-success-rgb: var(--color-success-rgb);
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: var(--color-warning-rgb);
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: var(--color-danger-rgb);
    --bs-info: var(--color-info);
    --bs-info-rgb: var(--color-info-rgb);
    --bs-body-bg: var(--color-background);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-border-radius: var(--radius-md);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-hover);
    --bs-body-font-family: var(--font-family);
    --bs-font-sans-serif: var(--font-family);
    --bs-list-group-active-color: #ffffff;
    --bs-list-group-active-bg: var(--color-primary);
    --bs-list-group-active-border-color: var(--color-primary);
    --bs-nav-link-hover-color: var(--color-primary);
    --bs-pagination-active-bg: var(--color-primary);
    --bs-pagination-active-border-color: var(--color-primary);
    --bs-pagination-hover-color: var(--color-primary);
}

/* =============================================================================
   Base
   ============================================================================= */

.dashboard-body,
.auth-page {
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-secondary: var(--color-secondary);
    --bs-secondary-rgb: var(--color-secondary-rgb);
    --bs-success: var(--color-success);
    --bs-success-rgb: var(--color-success-rgb);
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: var(--color-warning-rgb);
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: var(--color-danger-rgb);
    --bs-info: var(--color-info);
    --bs-info-rgb: var(--color-info-rgb);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-hover);
    --bs-list-group-active-color: #ffffff;
    --bs-list-group-active-bg: var(--color-primary);
    --bs-list-group-active-border-color: var(--color-primary);
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    line-height: var(--line-height);
    overflow-x: hidden;
}

.dashboard-body a:not(.btn):not(.page-link):not(.nav-link):not(.list-group-item) {
    color: var(--color-primary);
}

.dashboard-body a:not(.btn):not(.page-link):not(.nav-link):not(.list-group-item):hover {
    color: var(--color-primary-hover);
}

/* Filled action links must keep inverse (white) text */
.dashboard-body a.expense-categories-add-btn,
.dashboard-body a.expense-categories-add-btn:hover,
.dashboard-body a.expense-categories-empty-action,
.dashboard-body a.expense-categories-empty-action:hover,
.dashboard-body a.quick-filter-btn.active,
.dashboard-body a.quick-filter-btn.active:hover,
.dashboard-body .note-actions a.btn-edit,
.dashboard-body .note-actions a.btn-edit:hover {
    color: #fff !important;
}

.dashboard-body a.expense-categories-add-btn i,
.dashboard-body a.expense-categories-empty-action i,
.dashboard-body a.quick-filter-btn.active i,
.dashboard-body .note-actions a.btn-edit i {
    color: inherit !important;
}

.dashboard-body a.quick-filter-btn:not(.active) {
    color: var(--color-text-muted);
}

.dashboard-body a.quick-filter-btn:not(.active):hover {
    color: var(--color-text);
}

.dashboard-body #main_content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 0 var(--content-pad) 2rem;
    zoom: 1;
    transform: none;
}

@media (min-width: 992px) {
    .dashboard-body #main_content {
        padding: 0 1.5rem 2.5rem;
    }
}

@media (max-width: 575.98px) {
    .dashboard-body #main_content {
        padding: 0 0.75rem 1.5rem;
    }
}

.dashboard-body :where(h1, h2, h3, h4, h5, h6) {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
}

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

.dashboard-body .text-primary {
    color: var(--color-primary) !important;
}

.dashboard-body svg {
    vertical-align: -0.125em;
}

/* =============================================================================
   Topbar / Navbar
   ============================================================================= */

.dashboard-body > nav,
.dashboard-body .dashboard-topbar {
    min-height: var(--topbar-height);
    align-items: center;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: none !important;
    margin-bottom: 1rem !important;
    padding: 0.5rem 1rem !important;
    position: sticky;
    top: 0;
    z-index: 5;
}

.dashboard-body .hamburger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dashboard-body .hamburger-btn:hover,
.dashboard-body .hamburger-btn:focus {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
    outline: none;
}

/* =============================================================================
   Sidebar
   ============================================================================= */

.dashboard-body .sidebar,
.dashboard-body #sidebar {
    background: var(--color-surface) !important;
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.dashboard-body .sidebar .user-info {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.dashboard-body .sidebar .user-details h6 {
    color: var(--color-text);
}

.dashboard-body .sidebar .list-group-item,
.dashboard-body #sidebar .list-group-item {
    border-radius: var(--radius-md) !important;
    color: var(--color-text);
    border: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.dashboard-body #sidebar .list-group-item .menu-icon,
.dashboard-body #sidebar .list-group-item span.bi,
.dashboard-body #sidebar .list-group-item svg,
.dashboard-body #sidebar .list-group-item i,
.dashboard-body #sidebar .list-group-item .dropdown-arrow {
    color: var(--color-text-muted);
    fill: currentColor;
}

.dashboard-body .sidebar .list-group-item:hover,
.dashboard-body #sidebar .list-group-item:hover,
.dashboard-body #sidebar button.list-group-item:hover {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary) !important;
}

.dashboard-body #sidebar .list-group-item:hover .menu-icon,
.dashboard-body #sidebar .list-group-item:hover span.bi,
.dashboard-body #sidebar .list-group-item:hover svg,
.dashboard-body #sidebar .list-group-item:hover i,
.dashboard-body #sidebar .list-group-item:hover .dropdown-arrow,
.dashboard-body #sidebar .list-group-item[aria-expanded="true"] .dropdown-arrow {
    color: var(--color-primary);
    fill: currentColor;
}

.dashboard-body #sidebar .list-group-item:hover .menu-icon,
.dashboard-body #sidebar .list-group-item:hover span.bi {
    background: rgba(var(--color-primary-rgb), 0.12);
}

.dashboard-body .sidebar .list-group-item.active,
.dashboard-body .sidebar .list-group-item.active_parent,
.dashboard-body #sidebar .list-group-item.active,
.dashboard-body #sidebar .list-group-item.active_parent,
.dashboard-body #sidebar .submenu-item.active,
.dashboard-body #sidebar .active_parent {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border-right-color: var(--color-primary) !important;
}

.dashboard-body #sidebar .list-group-item.active .menu-icon,
.dashboard-body #sidebar .list-group-item.active span.bi,
.dashboard-body #sidebar .list-group-item.active svg,
.dashboard-body #sidebar .list-group-item.active i,
.dashboard-body #sidebar .list-group-item.active .dropdown-arrow,
.dashboard-body #sidebar .list-group-item.active .text-primary,
.dashboard-body #sidebar .list-group-item.active_parent .menu-icon,
.dashboard-body #sidebar .list-group-item.active_parent span.bi,
.dashboard-body #sidebar .list-group-item.active_parent svg,
.dashboard-body #sidebar .list-group-item.active_parent i,
.dashboard-body #sidebar .list-group-item.active_parent .dropdown-arrow,
.dashboard-body #sidebar .list-group-item.active_parent .text-primary,
.dashboard-body #sidebar .submenu-item.active .menu-icon,
.dashboard-body #sidebar .submenu-item.active span.bi,
.dashboard-body #sidebar .submenu-item.active svg,
.dashboard-body #sidebar .submenu-item.active i {
    color: #fff !important;
    fill: currentColor !important;
}

.dashboard-body #sidebar .list-group-item.active .menu-icon,
.dashboard-body #sidebar .list-group-item.active span.bi,
.dashboard-body #sidebar .list-group-item.active_parent .menu-icon,
.dashboard-body #sidebar .list-group-item.active_parent span.bi,
.dashboard-body #sidebar .submenu-item.active .menu-icon,
.dashboard-body #sidebar .submenu-item.active span.bi {
    background: rgba(255, 255, 255, 0.18);
}

.dashboard-body #sidebar .list-group-item.active .menu-icon svg,
.dashboard-body #sidebar .list-group-item.active span.bi svg,
.dashboard-body #sidebar .list-group-item.active_parent .menu-icon svg,
.dashboard-body #sidebar .list-group-item.active_parent span.bi svg,
.dashboard-body #sidebar .submenu-item.active .menu-icon svg,
.dashboard-body #sidebar .submenu-item.active span.bi svg {
    background: transparent;
}

.dashboard-body #sidebar .submenu-item:hover {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary) !important;
    border-right-color: var(--color-primary) !important;
}

.dashboard-body #sidebar-toggle-btn:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.dashboard-body .search-input-wrapper {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    height: var(--control-height-sm);
}

.dashboard-body .search-input:focus {
    background: var(--color-surface);
}

.dashboard-body .subscription-info {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
}

#sidebar-overlay.overlay {
    background: rgba(43, 36, 28, 0.4);
}

/* =============================================================================
   Page chrome
   ============================================================================= */

.dashboard-body .dashboard-container,
.dashboard-body .crm-container,
.dashboard-body .notifications-container {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    max-width: none;
    width: 100%;
    padding: 0 0 1.5rem;
    margin: 0;
    min-height: 0;
}

.dashboard-body .page-title {
    background: transparent;
    text-align: start;
    padding: 0.25rem 0 0.85rem;
    margin: 0 0 1.25rem;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    position: relative;
}

.dashboard-body .page-title:after {
    display: none;
}

.dashboard-body .dashboard-header,
.dashboard-body .notifications-header {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.dashboard-body .dashboard-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.dashboard-body .dashboard-subtitle {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* =============================================================================
   Cards / Surfaces
   ============================================================================= */

.dashboard-body :where(.card, .modal-content, .dropdown-menu) {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.dashboard-body .card {
    overflow: hidden;
}

.dashboard-body .card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
}

.dashboard-body .card-header {
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border);
    padding: 0.9rem 1.15rem;
    font-weight: var(--font-weight-semibold);
}

.dashboard-body .card-header h5,
.dashboard-body .card-header h6 {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.dashboard-body .card-body {
    padding: 1.15rem;
}

.dashboard-body .card-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

/* =============================================================================
   Forms
   ============================================================================= */

.dashboard-body .form-label,
.auth-page .form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: 0.4rem;
}

.dashboard-body :where(.form-control, .form-select, textarea.form-control, .modern-input, .input-group-text),
.auth-page :where(.form-control, .form-select, textarea.form-control) {
    height: var(--control-height);
    min-height: var(--control-height);
    padding: 0.5rem var(--control-padding-x);
    border: var(--control-border-width) solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    font-size: var(--font-size-md);
    font-family: inherit;
    text-align: start;
    direction: inherit;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.dashboard-body textarea.form-control,
.auth-page textarea.form-control {
    height: auto;
    min-height: 96px;
    line-height: 1.6;
    resize: vertical;
}

.dashboard-body :where(.form-control, .form-select, .modern-input)::placeholder,
.auth-page .form-control::placeholder {
    color: var(--color-text-muted);
    opacity: 0.8;
}

.dashboard-body :where(.form-control:focus, .form-select:focus, .modern-input:focus),
.auth-page .form-control:focus {
    border-color: var(--focus-border) !important;
    box-shadow: var(--focus-ring) !important;
    background: var(--color-surface) !important;
    outline: none;
}

.dashboard-body :where(.form-control.is-invalid, .form-select.is-invalid),
.auth-page .form-control.is-invalid {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-danger-rgb), 0.15) !important;
}

.dashboard-body :where(.form-control.is-valid, .form-select.is-valid) {
    border-color: var(--color-success) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-success-rgb), 0.15) !important;
}

.dashboard-body .invalid-feedback,
.auth-page .invalid-feedback {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
}

.dashboard-body .form-text {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.dashboard-body .form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.2em;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    background-color: var(--color-surface);
}

.dashboard-body .form-check-input[type="radio"] {
    border-radius: 50%;
}

.dashboard-body .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.dashboard-body .form-check-input:focus {
    box-shadow: var(--focus-ring);
    border-color: var(--color-primary);
}

.dashboard-body .form-check-label {
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.dashboard-body .input-group .form-control {
    border-radius: 0;
}

.dashboard-body .input-group > :first-child {
    border-start-start-radius: var(--radius-md) !important;
    border-end-start-radius: var(--radius-md) !important;
}

.dashboard-body .input-group > :last-child {
    border-start-end-radius: var(--radius-md) !important;
    border-end-end-radius: var(--radius-md) !important;
}

.dashboard-body .row.g-2,
.dashboard-body .row.g-3,
.dashboard-body form .mb-3 {
    --bs-gutter-y: 0.85rem;
}

/* Select2 */
.dashboard-body .select2-container--default .select2-selection--single,
.dashboard-body .select2-container--default .select2-selection--multiple {
    min-height: var(--control-height);
    height: var(--control-height);
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-surface);
}

.dashboard-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--control-height) - 2px);
    padding-inline: var(--control-padding-x);
    color: var(--color-text);
}

.dashboard-body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--control-height) - 2px);
}

.dashboard-body .select2-container--default.select2-container--focus .select2-selection--single,
.dashboard-body .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--focus-border) !important;
    box-shadow: var(--focus-ring);
}

.dashboard-body .select2-dropdown {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.dashboard-body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary);
}

.dashboard-body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
}

/* Persian datepicker */
.dashboard-body .persian-datepicker-container,
.dashboard-body .datepicker-plot-area {
    border-radius: var(--radius-md);
    border-color: var(--color-border);
    font-family: var(--font-family);
}

/* =============================================================================
   Buttons — Bootstrap 5.3 uses --bs-btn-* on each variant; remap those
   plus force colors so page CSS / utilities cannot keep the default blue.
   ============================================================================= */

.dashboard-body .btn,
.auth-page .btn,
.dashboard-body .btn-modern,
.dashboard-body .btn-login,
.dashboard-body .btn-register,
.dashboard-body .btn-submit,
.dashboard-body .btn-back,
.dashboard-body .btn-cancel,
.dashboard-body .btn-send-sms,
.dashboard-body .search-btn,
.dashboard-body .export-btn,
.dashboard-body .load-more-btn,
.auth-page .btn-login,
.auth-page .btn-register,
.auth-page .btn-verify {
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-size: var(--font-size-sm);
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.2;
    --bs-btn-border-radius: var(--radius-md);
    --bs-btn-border-width: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--control-height);
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-md) !important;
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    border-width: 1px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    transform: none !important;
    box-shadow: none;
}

.dashboard-body .btn i,
.dashboard-body .btn svg,
.dashboard-body .btn .bi,
.dashboard-body .btn .fa,
.dashboard-body .btn .fas,
.dashboard-body .btn .far,
.dashboard-body .btn .fab,
.dashboard-body .btn-modern i,
.dashboard-body .btn-modern svg,
.dashboard-body .btn-submit i,
.dashboard-body .btn-submit svg,
.dashboard-body .search-btn i,
.dashboard-body .search-btn svg {
    color: inherit !important;
    fill: currentColor !important;
}

.dashboard-body .btn:hover,
.dashboard-body .btn-modern:hover,
.auth-page .btn:hover {
    transform: none !important;
}

.dashboard-body .btn:focus-visible,
.auth-page .btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.dashboard-body .btn-sm,
.dashboard-body .btn-modern.btn-sm,
.dashboard-body .btn-group-sm > .btn {
    min-height: var(--control-height-sm);
    padding: 0.3rem 0.7rem;
    font-size: var(--font-size-xs);
}

.dashboard-body .btn-lg,
.dashboard-body .btn-modern.btn-lg {
    min-height: var(--control-height-lg);
    padding: 0.65rem 1.35rem;
}

.dashboard-body .btn.rounded-circle {
    border-radius: 50% !important;
    min-height: 0;
    padding: 0.35rem;
}

.dashboard-body .btn.rounded-pill {
    border-radius: var(--radius-pill) !important;
}

/* Primary (Bootstrap + modern + page-specific wrappers) */
.dashboard-body .btn-primary,
.dashboard-body .btn.btn-primary,
.dashboard-body .btn-modern-primary,
.dashboard-body .btn-submit,
.dashboard-body .btn-send-sms,
.dashboard-body .search-btn,
.dashboard-body .date-filter-section .btn-primary,
.dashboard-body .sales-buttons .btn-primary,
.dashboard-body #notificationsModal .btn-primary,
.auth-page .btn-primary,
.auth-page .btn-login,
.auth-page .btn-verify {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    background: var(--color-primary) !important;
    background-image: none !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.dashboard-body .btn-primary:hover,
.dashboard-body .btn-primary:focus,
.dashboard-body .btn-primary:active,
.dashboard-body .btn-primary.active,
.dashboard-body .btn.btn-primary:hover,
.dashboard-body .btn-modern-primary:hover,
.dashboard-body .btn-submit:hover,
.dashboard-body .btn-send-sms:hover,
.dashboard-body .search-btn:hover,
.dashboard-body .date-filter-section .btn-primary:hover,
.dashboard-body .sales-buttons .btn-primary:hover,
.dashboard-body #notificationsModal .btn-primary:hover,
.auth-page .btn-primary:hover,
.auth-page .btn-login:hover,
.auth-page .btn-verify:hover {
    background: var(--color-primary-hover) !important;
    background-image: none !important;
    border-color: var(--color-primary-hover) !important;
    color: #fff !important;
}

.dashboard-body .btn-secondary,
.dashboard-body .btn-modern-secondary,
.dashboard-body .btn-cancel,
.dashboard-body .btn-back {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-secondary);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-bg: var(--color-secondary-hover);
    --bs-btn-hover-border-color: var(--color-secondary-hover);
    --bs-btn-hover-color: #fff;
    background: var(--color-secondary) !important;
    background-image: none !important;
    border-color: var(--color-secondary) !important;
    color: #fff !important;
}

.dashboard-body .btn-secondary:hover,
.dashboard-body .btn-modern-secondary:hover,
.dashboard-body .btn-cancel:hover,
.dashboard-body .btn-back:hover {
    background: var(--color-secondary-hover) !important;
    border-color: var(--color-secondary-hover) !important;
    color: #fff !important;
}

.dashboard-body .btn-success,
.dashboard-body .btn.btn-success,
.dashboard-body .btn-modern-success,
.dashboard-body .date-filter-section .btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-success);
    --bs-btn-border-color: var(--color-success);
    --bs-btn-hover-bg: var(--color-success-hover);
    --bs-btn-hover-border-color: var(--color-success-hover);
    --bs-btn-hover-color: #fff;
    background: var(--color-success) !important;
    background-image: none !important;
    border-color: var(--color-success) !important;
    color: #fff !important;
}

.dashboard-body .btn-success:hover,
.dashboard-body .btn-success:focus,
.dashboard-body .btn-success:active,
.dashboard-body .btn-modern-success:hover,
.dashboard-body .date-filter-section .btn-success:hover {
    background: var(--color-success-hover) !important;
    border-color: var(--color-success-hover) !important;
    color: #fff !important;
}

.dashboard-body .btn-danger,
.dashboard-body .btn-modern-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-bg: var(--color-danger-hover);
    --bs-btn-hover-color: #fff;
    background: var(--color-danger) !important;
    background-image: none !important;
    border-color: var(--color-danger) !important;
    color: #fff !important;
}

.dashboard-body .btn-danger:hover,
.dashboard-body .btn-modern-danger:hover {
    background: var(--color-danger-hover) !important;
    border-color: var(--color-danger-hover) !important;
    color: #fff !important;
}

.dashboard-body .btn-warning,
.dashboard-body .btn-modern-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-warning);
    --bs-btn-border-color: var(--color-warning);
    --bs-btn-hover-bg: var(--color-warning-hover);
    --bs-btn-hover-color: #fff;
    background: var(--color-warning) !important;
    background-image: none !important;
    border-color: var(--color-warning) !important;
    color: #fff !important;
}

.dashboard-body .btn-warning:hover,
.dashboard-body .btn-modern-warning:hover {
    background: var(--color-warning-hover) !important;
    color: #fff !important;
}

.dashboard-body .btn-info,
.dashboard-body .btn-modern-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-info);
    --bs-btn-border-color: var(--color-info);
    --bs-btn-hover-bg: var(--color-info-hover);
    --bs-btn-hover-color: #fff;
    background: var(--color-info) !important;
    background-image: none !important;
    border-color: var(--color-info) !important;
    color: #fff !important;
}

.dashboard-body .btn-info:hover,
.dashboard-body .btn-modern-info:hover {
    background: var(--color-info-hover) !important;
    color: #fff !important;
}

.dashboard-body .btn-outline-primary,
.auth-page .btn-register {
    --bs-btn-color: var(--color-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    background: transparent !important;
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.dashboard-body .btn-outline-primary:hover,
.auth-page .btn-register:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}

.dashboard-body .btn-outline-secondary {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-bg: var(--color-surface-muted);
    --bs-btn-hover-color: var(--color-text);
    background: transparent !important;
    border: 1px solid var(--color-border-strong) !important;
    color: var(--color-text) !important;
}

.dashboard-body .btn-outline-secondary:hover {
    background: var(--color-surface-muted) !important;
    color: var(--color-text) !important;
}

.dashboard-body .btn-outline-success {
    --bs-btn-color: var(--color-success);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-success);
    background: transparent !important;
    border: 1px solid var(--color-success) !important;
    color: var(--color-success) !important;
}

.dashboard-body .btn-outline-success:hover {
    background: var(--color-success) !important;
    color: #fff !important;
}

.dashboard-body .btn-outline-danger {
    --bs-btn-color: var(--color-danger);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-danger);
    background: transparent !important;
    border: 1px solid var(--color-danger) !important;
    color: var(--color-danger) !important;
}

.dashboard-body .btn-outline-danger:hover {
    background: var(--color-danger) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
}

.dashboard-body .btn-outline-warning {
    --bs-btn-color: var(--color-warning);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-warning);
    background: transparent !important;
    border: 1px solid var(--color-warning) !important;
    color: var(--color-warning) !important;
}

.dashboard-body .btn-outline-warning:hover {
    background: var(--color-warning) !important;
    color: #fff !important;
}

.dashboard-body .btn-outline-info {
    --bs-btn-color: var(--color-info);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-info);
    background: transparent !important;
    border: 1px solid var(--color-info) !important;
    color: var(--color-info) !important;
}

.dashboard-body .btn-outline-info:hover {
    background: var(--color-info) !important;
    color: #fff !important;
}

.dashboard-body .btn-outline-dark {
    background: transparent !important;
    border: 1px solid var(--color-text) !important;
    color: var(--color-text) !important;
}

.dashboard-body .btn-outline-dark:hover {
    background: var(--color-text) !important;
    color: #fff !important;
}

.dashboard-body .btn-light,
.dashboard-body .btn-outline-light {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
}

.dashboard-body .btn-dark {
    background: var(--color-text) !important;
    border-color: var(--color-text) !important;
    color: #fff !important;
}

.dashboard-body .btn-ghost,
.dashboard-body .btn-link {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--color-primary) !important;
    min-height: var(--control-height-sm);
    box-shadow: none !important;
}

.dashboard-body .btn-ghost:hover,
.dashboard-body .btn-link:hover {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary-hover) !important;
}

.dashboard-body .btn:disabled,
.dashboard-body .btn.disabled,
.auth-page .btn:disabled {
    opacity: 0.55;
    pointer-events: none;
}

.dashboard-body .btn.loading,
.dashboard-body .btn-loading,
.auth-page .btn.loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.dashboard-body .btn.loading::after,
.dashboard-body .btn-loading::after,
.auth-page .btn.loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: ds-spin 0.7s linear infinite;
    inset: 50% auto auto 50%;
    margin: -0.5rem 0 0 -0.5rem;
    color: var(--color-text-inverse);
}

.dashboard-body .btn-group > .btn {
    min-height: var(--control-height-sm);
}

.dashboard-body .quick-access-card,
.dashboard-body .quick-access-card.btn {
    min-height: 92px;
    flex-direction: column;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
    box-shadow: none;
}

.dashboard-body .quick-access-card:hover,
.dashboard-body .quick-access-card.btn:hover {
    background: var(--color-primary-soft) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.dashboard-body .quick-access-card i,
.dashboard-body .quick-access-card svg {
    color: inherit !important;
}

/* Bootstrap color utilities used on buttons, icons, badges, stats */
.dashboard-body .text-primary,
.dashboard-body .link-primary {
    color: var(--color-primary) !important;
}

.dashboard-body .text-success { color: var(--color-success) !important; }
.dashboard-body .text-danger { color: var(--color-danger) !important; }
.dashboard-body .text-warning { color: var(--color-warning) !important; }
.dashboard-body .text-info { color: var(--color-info) !important; }
.dashboard-body .text-secondary { color: var(--color-text-muted) !important; }

.dashboard-body .text-primary svg,
.dashboard-body .text-primary i,
.dashboard-body .text-success svg,
.dashboard-body .text-success i,
.dashboard-body .text-danger svg,
.dashboard-body .text-danger i,
.dashboard-body .text-warning svg,
.dashboard-body .text-warning i,
.dashboard-body .text-info svg,
.dashboard-body .text-info i {
    color: inherit !important;
    fill: currentColor !important;
}

.dashboard-body .bg-primary,
.dashboard-body .text-bg-primary {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.dashboard-body .bg-success,
.dashboard-body .text-bg-success { background-color: var(--color-success) !important; color: #fff !important; }
.dashboard-body .bg-danger,
.dashboard-body .text-bg-danger { background-color: var(--color-danger) !important; color: #fff !important; }
.dashboard-body .bg-warning,
.dashboard-body .text-bg-warning { background-color: var(--color-warning) !important; color: #fff !important; }
.dashboard-body .bg-info,
.dashboard-body .text-bg-info { background-color: var(--color-info) !important; color: #fff !important; }
.dashboard-body .bg-secondary,
.dashboard-body .text-bg-secondary { background-color: var(--color-secondary) !important; color: #fff !important; }

.dashboard-body .bg-primary svg,
.dashboard-body .bg-primary i,
.dashboard-body .bg-success svg,
.dashboard-body .bg-success i,
.dashboard-body .bg-danger svg,
.dashboard-body .bg-danger i,
.dashboard-body .bg-warning svg,
.dashboard-body .bg-warning i,
.dashboard-body .bg-info svg,
.dashboard-body .bg-info i {
    color: inherit !important;
    fill: currentColor !important;
}

.dashboard-body .border-primary { border-color: var(--color-primary) !important; }
.dashboard-body .border-success { border-color: var(--color-success) !important; }
.dashboard-body .border-danger { border-color: var(--color-danger) !important; }

.dashboard-body .btn.bg-primary,
.dashboard-body .btn.bg-success,
.dashboard-body .btn.bg-danger,
.dashboard-body .btn.bg-warning,
.dashboard-body .btn.bg-info {
    color: #fff !important;
}

.dashboard-body .btn.bg-primary { background: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.dashboard-body .btn.bg-success { background: var(--color-success) !important; border-color: var(--color-success) !important; }
.dashboard-body .btn.bg-danger { background: var(--color-danger) !important; border-color: var(--color-danger) !important; }

/* Higher specificity vs page CSS like .table-modern .btn-modern-primary */
.dashboard-body .table-modern .btn-modern-primary,
.dashboard-body .table-modern .btn.btn-modern-primary,
.dashboard-body .products-manage-page .btn-modern-primary {
    background: var(--color-primary) !important;
    background-image: none !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.dashboard-body .table-modern .btn-modern-danger,
.dashboard-body .products-manage-page .btn-modern-danger {
    background: var(--color-danger) !important;
    background-image: none !important;
    color: #fff !important;
}

.dashboard-body .products-manage-page .btn-modern-info,
.dashboard-body .table-modern .btn-modern-info {
    background: var(--color-info) !important;
    background-image: none !important;
    color: #fff !important;
}

/* Custom dashboard button class names (no Bootstrap variant) */
.dashboard-body .search-btn,
.dashboard-body .btn-print,
.dashboard-body .btn-elegant,
.dashboard-body .btn-gradient-primary,
.dashboard-body .btn-update,
.dashboard-body .btn-primary-notification,
.dashboard-body .minimal-submit,
.dashboard-body .btn-installment,
.dashboard-body .add-rating-btn,
.dashboard-body .btn-subscribe.primary,
.dashboard-body .btn-subscribe.premium,
.dashboard-body a.btn-print,
.dashboard-body a.action-btn.btn-print {
    background: var(--color-primary) !important;
    background-image: none !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.dashboard-body .search-btn:hover,
.dashboard-body .btn-print:hover,
.dashboard-body .btn-elegant:hover,
.dashboard-body .btn-gradient-primary:hover,
.dashboard-body .btn-update:hover,
.dashboard-body .btn-primary-notification:hover,
.dashboard-body .minimal-submit:hover,
.dashboard-body .btn-installment:hover,
.dashboard-body .add-rating-btn:hover,
.dashboard-body .btn-subscribe.primary:hover,
.dashboard-body .btn-subscribe.premium:hover {
    background: var(--color-primary-hover) !important;
    background-image: none !important;
    color: #fff !important;
}

.dashboard-body .btn-success-notification,
.dashboard-body .btn-add-check {
    background: var(--color-success) !important;
    background-image: none !important;
    border-color: var(--color-success) !important;
    color: #fff !important;
}

.dashboard-body .btn-danger-notification,
.dashboard-body .btn-return {
    background: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: #fff !important;
}

.dashboard-body .clear-search-btn,
.dashboard-body .btn-gradient-secondary,
.dashboard-body .back-btn {
    background: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: #fff !important;
}

.dashboard-body .btn-view {
    background: transparent !important;
    border: 1px solid var(--color-info) !important;
    color: var(--color-info) !important;
}

.dashboard-body .btn-view:hover {
    background: var(--color-info-soft) !important;
    color: var(--color-info-hover) !important;
}

.dashboard-body .section-icon,
.dashboard-body .permissions-icon {
    background: var(--color-primary) !important;
    color: #fff !important;
}

/* Bootstrap components that hardcode --bs-*-bg on themselves */
.dashboard-body .pagination {
    --bs-pagination-color: var(--color-primary);
    --bs-pagination-hover-color: var(--color-primary-hover);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--color-primary);
    --bs-pagination-active-border-color: var(--color-primary);
    --bs-pagination-focus-box-shadow: var(--focus-ring);
}

.dashboard-body .pagination .page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.dashboard-body .form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.dashboard-body .form-check-input:focus,
.dashboard-body .search-input:focus {
    border-color: var(--focus-border) !important;
    box-shadow: var(--focus-ring) !important;
}

.dashboard-body .nav-pills {
    --bs-nav-pills-link-active-bg: var(--color-primary);
    --bs-nav-pills-link-active-color: #fff;
}

.dashboard-body .nav-pills .nav-link.active,
.dashboard-body .nav-pills .show > .nav-link {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.dashboard-body .progress-bar {
    background-color: var(--color-primary) !important;
}

.dashboard-body .list-group-item.active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.dashboard-body .accordion-button:not(.collapsed) {
    background-color: var(--color-primary-soft) !important;
    color: var(--color-primary) !important;
    box-shadow: none !important;
}

.dashboard-body .action-in {
    background: var(--color-primary) !important;
}

.dashboard-body .action-out {
    background: var(--color-danger) !important;
}

.dashboard-body .action-delete {
    background: var(--color-secondary) !important;
}

/* =============================================================================
   Tables
   ============================================================================= */

.dashboard-body .table-responsive,
.dashboard-body .table-container,
.dashboard-body .table-container-compact {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.dashboard-body .table,
.dashboard-body .table-modern,
.dashboard-body .table-modern-compact,
.dashboard-body .admin-table-modern {
    width: 100%;
    margin: 0;
    background: var(--color-surface);
    color: var(--color-text);
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-sm);
    box-shadow: none;
    border-radius: 0;
}

.dashboard-body :where(.table, .table-modern, .table-modern-compact, .admin-table-modern) > :where(thead) > tr > th,
.dashboard-body :where(.table, .table-modern, .table-modern-compact) th {
    background: var(--color-surface-muted) !important;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    text-transform: none;
    border-bottom: 1px solid var(--color-border) !important;
    border-top: none;
    padding: 0.8rem 0.85rem;
    white-space: nowrap;
    vertical-align: middle;
}

.dashboard-body :where(.table, .table-modern, .table-modern-compact) td {
    padding: 0.8rem 0.85rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-text);
}

.dashboard-body :where(.table, .table-modern) tbody tr:hover {
    background: var(--color-primary-soft);
}

.dashboard-body .table-modern {
    margin-top: 0;
    margin-bottom: 0;
    overflow: visible;
}

@media (max-width: 991.98px) {
    .dashboard-body table.table,
    .dashboard-body table.table-modern,
    .dashboard-body table.table-modern-compact,
    .dashboard-body table.admin-table-modern {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =============================================================================
   Badge / Alert / Breadcrumb
   ============================================================================= */

.dashboard-body .badge {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    padding: 0.35em 0.65em;
    border-radius: var(--radius-sm);
    letter-spacing: 0;
}

.dashboard-body .sidebar .notification-badge-small.badge {
    padding: 0;
}

.dashboard-body .badge.bg-primary { background: var(--color-primary) !important; color: #fff !important; }
.dashboard-body .badge.bg-success { background: var(--color-success) !important; color: #fff !important; }
.dashboard-body .badge.bg-warning { background: var(--color-warning) !important; color: #fff !important; }
.dashboard-body .badge.bg-danger { background: var(--color-danger) !important; color: #fff !important; }
.dashboard-body .badge.bg-info { background: var(--color-info) !important; color: #fff !important; }
.dashboard-body .badge.bg-secondary { background: var(--color-secondary) !important; color: #fff !important; }
.dashboard-body .badge.bg-light {
    background: var(--color-surface-muted) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border);
}

.dashboard-body .alert {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    font-size: var(--font-size-sm);
}

.dashboard-body .alert-success { background: var(--color-success-soft); border-color: rgba(var(--color-success-rgb), 0.25); color: var(--color-success-hover); }
.dashboard-body .alert-warning { background: var(--color-warning-soft); border-color: rgba(var(--color-warning-rgb), 0.25); color: var(--color-warning-hover); }
.dashboard-body .alert-danger { background: var(--color-danger-soft); border-color: rgba(var(--color-danger-rgb), 0.25); color: var(--color-danger-hover); }
.dashboard-body .alert-info { background: var(--color-info-soft); border-color: rgba(var(--color-info-rgb), 0.25); color: var(--color-info-hover); }
.dashboard-body .alert-primary { background: var(--color-primary-soft); border-color: rgba(var(--color-primary-rgb), 0.25); color: var(--color-primary-hover); }

.dashboard-body .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-sm);
}

.dashboard-body .breadcrumb-item,
.dashboard-body .breadcrumb-separator {
    color: var(--color-text-muted);
}

/* =============================================================================
   Modal / Dropdown / Tabs / Pagination
   ============================================================================= */

.dashboard-body .modal-content {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.dashboard-body .modal-header {
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 1.15rem;
}

.dashboard-body .modal-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.dashboard-body .modal-footer {
    border-top: 1px solid var(--color-border);
    gap: 0.5rem;
}

.dashboard-body .dropdown-menu {
    padding: 0.4rem;
    border-radius: var(--radius-md);
}

.dashboard-body .dropdown-item {
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    padding: 0.45rem 0.7rem;
}

.dashboard-body .dropdown-item:hover,
.dashboard-body .dropdown-item:focus {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.dashboard-body .nav-tabs {
    border-bottom: 1px solid var(--color-border);
    gap: 0.25rem;
}

.dashboard-body .nav-tabs .nav-link {
    border: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    padding: 0.65rem 1rem;
}

.dashboard-body .nav-tabs .nav-link.active {
    color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: inset 0 -2px 0 var(--color-primary);
}

.dashboard-body .pagination,
.dashboard-body .pagination-modern {
    gap: 0.3rem;
    flex-wrap: wrap;
}

.dashboard-body .pagination .page-link,
.dashboard-body .pagination-modern .page-link {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm) !important;
    color: var(--color-text);
    background: var(--color-surface);
    font-size: var(--font-size-sm);
    padding: 0 0.55rem;
}

.dashboard-body .pagination .page-item.active .page-link,
.dashboard-body .pagination-modern .page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.dashboard-body .pagination .page-item.disabled .page-link {
    opacity: 0.5;
}

/* =============================================================================
   Empty / Loading / Error
   ============================================================================= */

.dashboard-body .empty-state,
.dashboard-body .text-center.py-5 {
    color: var(--color-text-muted);
}

.dashboard-body .empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
}

.dashboard-body .empty-state i,
.dashboard-body .empty-state svg {
    font-size: 2.25rem;
    color: var(--color-border-strong);
    margin-bottom: 0.75rem;
}

.global-loading-overlay {
    background: rgba(43, 36, 28, 0.45);
    backdrop-filter: blur(4px);
}

.global-loading-content {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
}

.global-loading-text {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.global-loading-subtext {
    color: var(--color-text-muted);
}

@keyframes ds-spin {
    to { transform: rotate(360deg); }
}

/* =============================================================================
   Auth pages
   ============================================================================= */

.auth-page {
    min-height: 100vh;
}

.auth-page :where(.login-container, .register-container, .forgot-password-container, .reset-password-container, .verify-container) {
    min-height: 100vh;
    padding: 2rem 0;
}

.auth-page :where(.login-card, .register-card, .forgot-password-card, .reset-password-card, .verify-card) {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2rem;
}

.auth-page :where(.login-card, .register-card, .forgot-password-card, .reset-password-card, .verify-card):hover {
    transform: none;
    box-shadow: var(--shadow-md);
}

.auth-page :where(.login-card, .register-card, .forgot-password-card, .reset-password-card, .verify-card) h2 {
    font-size: 1.35rem;
    margin-bottom: 1.5rem;
    font-weight: var(--font-weight-semibold);
}

.auth-page .forgot-password {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.auth-page .forgot-password:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.auth-page .login-image,
.auth-page .register-image,
.auth-page .forgot-password-image {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .auth-page :where(.login-container, .register-container, .forgot-password-container, .reset-password-container, .verify-container) {
        padding: 1rem;
    }

    .auth-page :where(.login-card, .register-card, .forgot-password-card, .reset-password-card, .verify-card) {
        padding: 1.35rem;
    }
}

/* =============================================================================
   Page-specific wrappers (unify without touching markup)
   ============================================================================= */

.dashboard-body .notifications-filters,
.dashboard-body .filter-section,
.dashboard-body .filter-section-compact,
.dashboard-body .sms-form,
.dashboard-body .date-filter-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.dashboard-body .stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.dashboard-body .stats-card.stats-total,
.dashboard-body .stats-card.stats-active,
.dashboard-body .stats-card.stats-overdue,
.dashboard-body .stats-card.stats-completed {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.dashboard-body .stats-card.stats-total .stats-number,
.dashboard-body .stats-card.stats-active .stats-number,
.dashboard-body .stats-card.stats-overdue .stats-number,
.dashboard-body .stats-card.stats-completed .stats-number {
    color: var(--color-text) !important;
}

.dashboard-body .stats-card.stats-total .stats-label,
.dashboard-body .stats-card.stats-active .stats-label,
.dashboard-body .stats-card.stats-overdue .stats-label,
.dashboard-body .stats-card.stats-completed .stats-label {
    color: var(--color-text-muted) !important;
}

.dashboard-body .list-group-item {
    color: var(--color-text);
}

/* =============================================================================
   Responsive / overflow safety
   ============================================================================= */

.dashboard-body img,
.dashboard-body svg,
.dashboard-body canvas,
.dashboard-body video {
    max-width: 100%;
}

.dashboard-body .row {
    --bs-gutter-x: 1rem;
}

@media (max-width: 767.98px) {
    .dashboard-body .dashboard-header .row > [class*="col-"] {
        text-align: start !important;
    }

    .dashboard-body .d-flex.flex-wrap {
        gap: 0.5rem;
    }

    .dashboard-body .btn,
    .dashboard-body .btn-modern {
        white-space: nowrap;
    }

    .dashboard-body .modal-dialog {
        margin: 0.75rem;
    }

    .dashboard-body .card-body,
    .dashboard-body .card-header {
        padding: 0.9rem;
    }

    .dashboard-body .page-title {
        font-size: 1.15rem;
    }

    .dashboard-body .plans-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    .dashboard-body > nav,
    .dashboard-body .sidebar,
    .dashboard-body .hamburger-btn,
    .dashboard-body #sidebar-toggle-btn-container {
        display: none !important;
    }

    .dashboard-body #main_content {
        padding: 0;
        width: 100% !important;
    }
}

/* High-specificity overrides (beat page CSS and :where() grouping) */
.dashboard-body .form-control,
.dashboard-body .form-select,
.dashboard-body textarea.form-control,
.dashboard-body .modern-input,
.dashboard-body .input-group-text,
.auth-page .form-control,
.auth-page .form-select,
.auth-page textarea.form-control,
.auth-page .login-card .form-control,
.auth-page .register-card .form-control,
.auth-page .forgot-password-card .form-control,
.auth-page .reset-password-card .form-control,
.auth-page .verify-card .form-control {
    min-height: var(--control-height);
    padding: 0.5rem var(--control-padding-x);
    border: var(--control-border-width) solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    font-size: var(--font-size-md) !important;
    box-shadow: none;
}

.dashboard-body textarea.form-control,
.auth-page textarea.form-control {
    min-height: 96px;
    height: auto !important;
}

.dashboard-body .form-control:focus,
.dashboard-body .form-select:focus,
.dashboard-body .modern-input:focus,
.auth-page .form-control:focus,
.auth-page .login-card .form-control:focus {
    border-color: var(--focus-border) !important;
    box-shadow: var(--focus-ring) !important;
}

.dashboard-body .btn,
.dashboard-body .btn-modern,
.auth-page .btn,
.auth-page .btn-login,
.auth-page .btn-register,
.auth-page .btn-verify {
    border-radius: var(--radius-md) !important;
}

.dashboard-body .card,
.dashboard-body .modal-content {
    border-radius: var(--radius-lg) !important;
    border-color: var(--color-border) !important;
}

.dashboard-body .form-container,
.dashboard-body #expense-search-form {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 1.25rem !important;
}

.dashboard-body .form-container {
    max-width: 640px;
    margin-inline: auto;
}

.dashboard-body .invoice-create-page .form-container {
    max-width: none;
    width: 100%;
    margin-inline: 0;
}

.dashboard-body .table tbody tr:hover,
.dashboard-body .table-modern tbody tr:hover {
    transform: none !important;
}

.dashboard-body .card .table-responsive,
.dashboard-body .card .table-container,
.dashboard-body .card .table-container-compact {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.dashboard-body .filters-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1rem;
}

.dashboard-body .filters-section:has(.search-box),
.dashboard-body .filters-section:has(.filter-controls) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.dashboard-body .search-box {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: 1 1 220px;
}

.dashboard-body .search-box .search-btn {
    min-height: var(--control-height);
    min-width: var(--control-height);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}

.dashboard-body .filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.dashboard-body .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.dashboard-body .page-header .page-title {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.dashboard-body .page-header .page-title h1 {
    font-size: var(--font-size-xl);
    margin: 0 0 0.25rem;
}

.dashboard-body .page-header .page-title p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.dashboard-body .pagination .page-link:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    transform: none;
}