/**
 * Custom App Theme - Primary Color: #A87D4E
 * RGB: 168, 125, 78
 *
 * Loaded after the Vuexy core / theme css so it overrides the template default (#7367f0).
 * Keep the JS side in sync: public/assets/js/config.js -> window.config.colors.primary
 */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"],
html {
    --bs-primary: #A87D4E;
    --bs-primary-rgb: 168, 125, 78;
    --bs-primary-text-emphasis: #684E30;
    --bs-primary-bg-subtle: #F8F5F1;
    --bs-primary-border-subtle: #E1D2C1;
    --bs-link-color: #A87D4E;
    --bs-link-color-rgb: 168, 125, 78;
    --bs-link-hover-color: #8F6A42;
    --bs-link-hover-color-rgb: 143, 106, 66;
}

/* Primary Typography & Links */
html .text-primary {
    color: #A87D4E !important;
}
html a.text-primary:hover,
html a.text-primary:focus {
    color: #8F6A42 !important;
}
html a {
    color: #A87D4E;
}
html a:hover {
    color: #8F6A42;
}

/* Backgrounds & Borders */
html .bg-primary {
    background-color: #A87D4E !important;
}
html .border-primary {
    border-color: #A87D4E !important;
}

/* Buttons */
html .btn-primary {
    color: #fff !important;
    background-color: #A87D4E !important;
    border-color: #A87D4E !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(168, 125, 78, 0.4) !important;
}
html .btn-primary:hover,
html .btn-primary:focus,
html .btn-primary:active,
html .btn-primary.active,
html .btn-primary.show,
html .show > .btn-primary.dropdown-toggle {
    color: #fff !important;
    background-color: #8F6A42 !important;
    border-color: #8F6A42 !important;
    box-shadow: 0 0.25rem 0.5rem 0 rgba(168, 125, 78, 0.45) !important;
}
html .btn-primary:disabled,
html .btn-primary.disabled {
    background-color: #A87D4E !important;
    border-color: #A87D4E !important;
    opacity: 0.55;
}
html .btn-outline-primary {
    color: #A87D4E !important;
    border-color: #A87D4E !important;
    background-color: transparent !important;
}
html .btn-outline-primary:hover,
html .btn-outline-primary:focus,
html .btn-outline-primary:active,
html .btn-outline-primary.active,
html .btn-check:checked + .btn-outline-primary,
html .show > .btn-outline-primary.dropdown-toggle {
    color: #fff !important;
    background-color: #A87D4E !important;
    border-color: #A87D4E !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(168, 125, 78, 0.4) !important;
}
html .btn-label-primary {
    color: #A87D4E !important;
    border-color: transparent !important;
    background-color: rgba(168, 125, 78, 0.12) !important;
}
html .btn-label-primary:hover,
html .btn-label-primary:focus,
html .btn-label-primary:active {
    color: #fff !important;
    background-color: #A87D4E !important;
    border-color: #A87D4E !important;
}

/* Badges */
html .bg-label-primary {
    background-color: rgba(168, 125, 78, 0.12) !important;
    color: #A87D4E !important;
}
html .badge.bg-primary {
    background-color: #A87D4E !important;
    color: #fff !important;
}

/* Sidebar Menu */
html .bg-menu-theme .menu-inner > .menu-item.active > .menu-link:not(.menu-toggle) {
    background: linear-gradient(72.47deg, #A87D4E 22.16%, rgba(168, 125, 78, 0.7) 76.47%) !important;
    box-shadow: 0px 2px 6px 0px rgba(168, 125, 78, 0.48) !important;
    color: #fff !important;
}
html .bg-menu-theme .menu-inner > .menu-item.active:before {
    background: #A87D4E !important;
}
html .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:before {
    background-color: #A87D4E !important;
}
html .bg-menu-theme .menu-item.open:not(.active) > .menu-link,
html .bg-menu-theme .menu-sub > .menu-item.active > .menu-link {
    color: #A87D4E !important;
}
html .bg-menu-theme .menu-link:hover,
html .bg-menu-theme .menu-link:focus {
    color: #A87D4E !important;
}

/* Form Elements & Inputs Focus */
html .form-control:focus,
html .form-select:focus {
    border-color: #A87D4E !important;
    box-shadow: 0 0.125rem 0.25rem rgba(168, 125, 78, 0.25) !important;
}
html .input-group:focus-within .form-control,
html .input-group:focus-within .input-group-text {
    border-color: #A87D4E !important;
}
html .form-check-input:checked,
html .form-check-input[type=checkbox]:indeterminate {
    background-color: #A87D4E !important;
    border-color: #A87D4E !important;
    box-shadow: 0 2px 4px 0 rgba(168, 125, 78, 0.4) !important;
}
html .form-check-input:focus {
    border-color: #A87D4E !important;
    box-shadow: 0 0 0.25rem 0.05rem rgba(168, 125, 78, 0.25) !important;
}
html .switch-primary .switch-input:checked ~ .switch-toggle-slider,
html .form-switch .form-check-input:checked {
    background-color: #A87D4E !important;
    border-color: #A87D4E !important;
}

/* Navigation, Tabs & Pills */
html .nav-pills .nav-link.active,
html .nav-pills .nav-link.active:hover,
html .nav-pills .nav-link.active:focus {
    background-color: #A87D4E !important;
    color: #fff !important;
    box-shadow: 0 2px 4px 0 rgba(168, 125, 78, 0.4) !important;
}
html .nav-tabs .nav-link.active,
html .nav-tabs .nav-item.show .nav-link {
    color: #A87D4E !important;
    border-bottom-color: #A87D4E !important;
}
html .nav-tabs .nav-link:hover,
html .nav-tabs .nav-link:focus {
    color: #A87D4E !important;
}

/* Dropdowns & list groups */
html .dropdown-item.active,
html .dropdown-item:active,
html .list-group-item.active {
    background-color: #A87D4E !important;
    border-color: #A87D4E !important;
    color: #fff !important;
}

/* Accordion */
html .accordion-button:not(.collapsed) {
    color: #A87D4E !important;
}

/* Pagination */
html .pagination .page-item.active .page-link,
html .pagination .page-item.active .page-link:hover,
html .pagination .page-item.active .page-link:focus {
    background-color: #A87D4E !important;
    border-color: #A87D4E !important;
    color: #fff !important;
    box-shadow: 0 0.125rem 0.25rem rgba(168, 125, 78, 0.4) !important;
}
html .page-link:hover,
html .page-link:focus {
    color: #A87D4E !important;
}

/* Progress Bars & Spinners */
html .progress-bar {
    background-color: #A87D4E !important;
}
html .spinner-border.text-primary,
html .spinner-grow.text-primary {
    color: #A87D4E !important;
}

/* Select2 Customization */
html .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #A87D4E !important;
    color: #fff !important;
}
html .select2-container--default.select2-container--focus .select2-selection--multiple,
html .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #A87D4E !important;
}
html .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(168, 125, 78, 0.12) !important;
    border-color: rgba(168, 125, 78, 0.3) !important;
    color: #A87D4E !important;
}

/* Breadcrumbs */
html .breadcrumb-item a:hover {
    color: #A87D4E !important;
}

/* File input (kartik fileinput) */
html .file-input .btn-primary,
html .file-input .krajee-default.file-preview-frame:hover {
    border-color: #A87D4E;
}

/* SweetAlert2 */
html .swal2-confirm.btn-primary,
html .swal2-styled.swal2-confirm {
    background-color: #A87D4E !important;
    border-color: #A87D4E !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(168, 125, 78, 0.4) !important;
}

/* ---------------------------------------------------------------------------
   Extras: bits of the template that still shipped the default purple
   --------------------------------------------------------------------------- */

/* Template customizer toggle button (the floating gear) */
html .template-customizer-open-btn {
    background-color: #A87D4E !important;
}

/* Vuexy draws the active tab indicator with a pseudo element */
html .nav-tabs .nav-link.active::after,
html .nav-tabs .nav-item.show .nav-link::after,
html .nav-tabs .nav-link.active:after {
    background: #A87D4E !important;
}

/* Avatars / icon tiles that use the primary tint */
html .avatar-initial.bg-label-primary,
html .badge-center.bg-label-primary {
    background-color: rgba(168, 125, 78, 0.12) !important;
    color: #A87D4E !important;
}

/* Focus rings */
html .btn-primary:focus-visible,
html .btn-outline-primary:focus-visible {
    box-shadow: 0 0 0 0.15rem rgba(168, 125, 78, 0.4) !important;
}

html .form-floating > .form-control:focus ~ label {
    color: #A87D4E !important;
}

/* Text selection */
html ::selection {
    background-color: rgba(168, 125, 78, 0.25);
}

/* ---------------------------------------------------------------------------
   Template rules that outrank the generic ones above and need an exact answer.
   (Vuexy ships a separate [dir=rtl] rule for the menu, WITH !important, which is
   why the sidebar stayed purple in Arabic while LTR was already fine.)
   --------------------------------------------------------------------------- */

/* Sidebar active item - RTL */
html[dir="rtl"] .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
html[dir="rtl"] .menu.bg-primary.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    background: linear-gradient(-270deg, rgba(168, 125, 78, 0.7) 0%, #A87D4E 100%) !important;
    box-shadow: 0px 2px 6px 0px rgba(168, 125, 78, 0.3) !important;
    color: #fff !important;
}

/* Sidebar active item - LTR */
html:not([dir="rtl"]) .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
html:not([dir="rtl"]) .menu.bg-primary.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    background: linear-gradient(270deg, rgba(168, 125, 78, 0.7) 0%, #A87D4E 100%) !important;
    box-shadow: 0px 2px 6px 0px rgba(168, 125, 78, 0.3) !important;
    color: #fff !important;
}

/* Horizontal menu (in case the layout is switched) */
html .bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle,
html .menu.bg-primary.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle {
    background: linear-gradient(270deg, rgba(168, 125, 78, 0.7) 0%, #A87D4E 100%) !important;
    box-shadow: 0px 2px 6px 0px rgba(168, 125, 78, 0.3) !important;
    color: #fff !important;
}

html[dir="rtl"] .bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle,
html[dir="rtl"] .menu.bg-primary.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle {
    background: linear-gradient(-270deg, rgba(168, 125, 78, 0.7) 0%, #A87D4E 100%) !important;
}

html .bg-menu-theme.menu-horizontal .menu-item.active > .menu-link:not(.menu-toggle) {
    background: rgba(168, 125, 78, 0.12) !important;
    color: #A87D4E !important;
}

/* Dropdown selected item */
html .dropdown-item:not(.disabled).active,
html .dropdown-item:not(.disabled):active,
html .dropdown-menu > li:not(.disabled) > a:not(.dropdown-item):active,
html .dropdown-menu > li.active:not(.disabled) > a:not(.dropdown-item) {
    background-color: rgba(168, 125, 78, 0.12) !important;
    color: #A87D4E !important;
}

/* Borders: the template targets html[dir] explicitly */
html:not([dir="rtl"]) .border-primary,
html[dir="rtl"] .border-primary {
    border-color: #A87D4E !important;
}

/* Select2 chips + focus border */
html .select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: rgba(168, 125, 78, 0.16) !important;
    color: #A87D4E !important;
}

html .select2-container--default.select2-container--focus .select2-selection,
html .select2-container--default.select2-container--open .select2-selection {
    border-color: #A87D4E !important;
}

/* bootstrap-select & typeahead */
html .bootstrap-select .dropdown-menu.inner a[aria-selected="true"],
html .tt-suggestion:active,
html .tt-cursor {
    background: #A87D4E !important;
    color: #fff !important;
}

/* Label hover backgrounds & gradient helper */
html .bg-label-hover-primary {
    background-color: rgba(168, 125, 78, 0.12) !important;
    color: #A87D4E !important;
}

html .bg-label-hover-primary:hover {
    background-color: #A87D4E !important;
    color: #fff !important;
}

html .bg-gradient-primary {
    background-image: linear-gradient(45deg, #A87D4E, #D8BFA3) !important;
}

/* Selectable option cards */
html .custom-option.checked {
    border: 2px solid #A87D4E !important;
}

/* ---------------------------------------------------------------------------
   Breadcrumb + tabs
   --------------------------------------------------------------------------- */

/* The template styles ".breadcrumb-item a" (0,2,0), which outranks a bare "a" */
html .breadcrumb-item,
html .breadcrumb-item a,
html .breadcrumb-item.active a:hover,
html .breadcrumb-item.active a:focus {
    color: #A87D4E;
}

/* The active tab indicator is an inset box-shadow, not a border-bottom */
html .nav-tabs .nav-link.active,
html .nav-tabs .nav-link.active:hover,
html .nav-tabs .nav-link.active:focus,
html .nav-align-top .nav-tabs .nav-link.active {
    box-shadow: 0 -2px 0 #A87D4E inset !important;
    color: #A87D4E !important;
}

html .nav-align-bottom .nav-tabs .nav-link.active,
html .nav-align-bottom .nav-tabs .nav-link.active:hover,
html .nav-align-bottom .nav-tabs .nav-link.active:focus {
    box-shadow: 0 2px 0 #A87D4E inset !important;
}

html body:not([dir="rtl"]) .nav-align-left .nav-tabs .nav-link.active,
html[dir="rtl"] body .nav-align-right .nav-tabs .nav-link.active {
    box-shadow: -2px 0 0 #A87D4E inset !important;
}

html body:not([dir="rtl"]) .nav-align-right .nav-tabs .nav-link.active,
html[dir="rtl"] body .nav-align-left .nav-tabs .nav-link.active {
    box-shadow: 2px 0 0 #A87D4E inset !important;
}

/* Tab hover (template marks these !important) */
html .nav-align-top .nav-tabs .nav-link:not(.active):hover {
    color: #A87D4E !important;
    border-bottom-color: rgba(168, 125, 78, 0.25) !important;
}

html .nav-align-bottom .nav-tabs .nav-link:not(.active):hover {
    color: #A87D4E !important;
    border-top-color: rgba(168, 125, 78, 0.25) !important;
}

html body .nav-align-left .nav-tabs .nav-link:not(.active):hover,
html body .nav-align-right .nav-tabs .nav-link:not(.active):hover {
    color: #A87D4E !important;
    border-color: rgba(168, 125, 78, 0.25) !important;
}

/* Ripple inside tabs */
html .nav-tabs .nav-link.waves-effect .waves-ripple {
    background: radial-gradient(rgba(168, 125, 78, 0.2) 0, rgba(168, 125, 78, 0.3) 40%, rgba(168, 125, 78, 0.4) 50%, rgba(168, 125, 78, 0.5) 60%, rgba(255, 255, 255, 0) 70%) !important;
}

/* Widget-style tabs */
html .nav-tabs.widget-nav-tabs .nav-link.active {
    border-color: #A87D4E !important;
}

html .nav-tabs.widget-nav-tabs .nav-link.active .badge {
    background-color: rgba(168, 125, 78, 0.16) !important;
    color: #A87D4E !important;
}