@charset "UTF-8";
/* ============================================================================
   App custom styles
   Extracted from the former inline \3c style> blocks in
   resources/views/layouts/sections/styles.blade.php.
   The color source of truth is the :root CSS custom properties rendered
   inline by styles.blade.php from config/custom.php (colors.*):
   --primary-color, --primary-color-darker, --primary-gradient-color,
   --primary-color-rgb, --primary-color-darker-rgb.
   Rule order is preserved from the original file; do not reorder sections.
   ========================================================================== */
/* ---------------------------------- */
/* PRIMARY COLOR COMPONENT OVERRIDES */
/* ---------------------------------- */
/* Buttons - Primary */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
a.btn-primary,
input.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
button.btn-primary:hover,
button.btn-primary:focus,
button.btn-primary:active,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--primary-color-darker) !important;
  border-color: var(--primary-color-darker) !important;
  color: #fff !important;
}

.btn-primary:focus,
.btn-primary.focus,
.btn.btn-primary:focus,
.btn.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.4) !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--primary-color-darker) !important;
  border-color: var(--primary-color-darker) !important;
}

/* Buttons - Outline Primary */
.btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

/* Buttons - Label Primary */
.btn-label-primary {
  background-color: rgba(var(--primary-color-rgb), 0.16) !important;
  color: var(--primary-color) !important;
}

.btn-label-primary:hover,
.btn-label-primary:focus,
.btn-label-primary:active {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

/* Background Colors */
.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-label-primary {
  background-color: rgba(var(--primary-color-rgb), 0.16) !important;
  color: var(--primary-color) !important;
}

.bg-light-primary {
  background-color: rgba(var(--primary-color-rgb), 0.12) !important;
}

/* Text Colors */
.text-primary {
  color: var(--primary-color) !important;
}

/* Links */
a {
  --bs-link-color-rgb: var(--primary-color-rgb) !important;
}

a:hover {
  --bs-link-hover-color-rgb: var(--primary-color-darker-rgb) !important;
}

/* Border Colors */
.border-primary {
  border-color: var(--primary-color) !important;
}

/* Badges */
.badge.bg-primary {
  background-color: var(--primary-color) !important;
}

.badge.bg-label-primary {
  background-color: rgba(var(--primary-color-rgb), 0.16) !important;
  color: var(--primary-color) !important;
}

/* Alerts */
.alert-primary {
  background-color: rgba(var(--primary-color-rgb), 0.12) !important;
  border-color: rgba(var(--primary-color-rgb), 0.12) !important;
  color: var(--primary-color) !important;
}

/* Progress Bars */
.progress-bar,
.progress-bar.bg-primary {
  background-color: var(--primary-color) !important;
}

/* Pagination */
.page-item.active .page-link {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.page-link {
  color: var(--primary-color);
}

.page-link:hover {
  color: var(--primary-color-darker);
}

/* Form Controls */
.form-check-input:checked {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.form-check-input:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important;
}

.form-control:focus,
.form-select:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-select:focus,
.form-control:focus-visible,
.form-select:focus-visible {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(var(--primary-color-rgb), 0.3) !important;
  outline: 0 !important;
}

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

.form-floating > .form-control:focus ~ label,
.form-floating > .form-select:focus ~ label {
  color: var(--primary-color) !important;
}

.input-group:focus-within .input-group-text {
  border-color: var(--primary-color) !important;
}

.input-group .form-control:focus,
.input-group .form-select:focus {
  border-color: var(--primary-color) !important;
}

/* Nav & Tabs */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--primary-color) !important;
}

.nav-link {
  color: var(--primary-color);
}

.nav-tabs .nav-link.active {
  color: var(--primary-color) !important;
  border-bottom-color: var(--primary-color) !important;
}

/* List Groups */
.list-group-item.active {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.list-group-item-primary {
  background-color: rgba(var(--primary-color-rgb), 0.12) !important;
  color: var(--primary-color) !important;
}

/* Tables */
.table-primary {
  --bs-table-bg: rgba(var(--primary-color-rgb), 0.12);
  --bs-table-border-color: rgba(var(--primary-color-rgb), 0.2);
}

/* Dropdowns */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

/* Cards */
.card-header.bg-primary,
.card.bg-primary {
  background-color: var(--primary-color) !important;
}

/* Spinners */
.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: var(--primary-color) !important;
}

/* Accordion */
.accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background-color: rgba(var(--primary-color-rgb), 0.1);
}

.accordion-button:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}

/* Avatars */
.avatar.bg-primary,
.avatar.bg-label-primary {
  background-color: rgba(var(--primary-color-rgb), 0.16) !important;
  color: var(--primary-color) !important;
}

/* Timeline */
.timeline-indicator-primary {
  background-color: var(--primary-color) !important;
  box-shadow: 0 0 0 6px rgba(var(--primary-color-rgb), 0.16);
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* Select2 */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted,
.select2-results__option[role=option][aria-selected=true],
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

html body .select2-container--default .select2-selection--single:focus,
html body .select2-container--default .select2-selection--multiple:focus,
html body .select2-container--default.select2-container--focus .select2-selection--single,
html body .select2-container--default.select2-container--focus .select2-selection--multiple,
html body .select2-container--default.select2-container--open .select2-selection--single,
html body .select2-container--default.select2-container--open .select2-selection--multiple,
html body .select2-container .select2-selection--single:focus,
html body .select2-container .select2-selection--multiple:focus,
html body .select2-container.select2-container--focus .select2-selection,
html body .select2-container.select2-container--open .select2-selection {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(var(--primary-color-rgb), 0.3) !important;
  outline: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container .select2-selection--multiple .select2-selection__choice {
  background-color: rgba(var(--primary-color-rgb), 0.16) !important;
  color: var(--primary-color) !important;
  border-color: transparent !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.select2-container .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--primary-color) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--primary-color-darker) !important;
}

.select2-container--default .select2-results__option--highlighted:not([aria-selected=true]) {
  background-color: rgba(var(--primary-color-rgb), 0.08) !important;
  color: var(--primary-color) !important;
}

.select2-primary .select2-container--default .select2-selection,
.select2-primary .select2-selection {
  border-color: #dbdade !important;
}

.select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-primary .select2-selection--multiple .select2-selection__choice,
.select2-primary.select2-container--default .select2-selection--multiple .select2-selection__choice,
html body .select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice,
html body .select2-primary .select2-selection--multiple .select2-selection__choice,
html body .select2-primary.select2-container--default .select2-selection--multiple .select2-selection__choice,
.light-style .select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice,
.dark-style .select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: rgba(var(--primary-color-rgb), 0.16) !important;
  background-color: rgba(var(--primary-color-rgb), 0.16) !important;
  color: var(--primary-color) !important;
  border-color: transparent !important;
}

.select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.select2-primary .select2-selection--multiple .select2-selection__choice__remove,
html body .select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
html body .select2-primary .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--primary-color) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus,
.select2-container .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--primary-color) !important;
  outline: 0 !important;
}

/* Flatpickr */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* Gradient backgrounds using primary colors */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-gradient-color) 100%) !important;
}

/* ----------------------------------------- */
/* OVERRIDE ALL VIOLET/PURPLE COLORS #7367f0 */
/* ----------------------------------------- */
/* Tagify */
.tagify__tag {
  --tag-bg: rgba(var(--primary-color-rgb), 0.16);
  --tag-text-color: var(--primary-color);
}

.tagify__tag:hover {
  --tag-bg: rgba(var(--primary-color-rgb), 0.24);
}

/* Toastr */
.toast-primary {
  background-color: var(--primary-color) !important;
}

/* SweetAlert2 */
.swal2-styled.swal2-confirm {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.swal2-styled.swal2-confirm:hover,
.swal2-styled.swal2-confirm:focus {
  background-color: var(--primary-color-darker) !important;
  border-color: var(--primary-color-darker) !important;
}

/* BS Stepper */
.bs-stepper .step.active .bs-stepper-circle,
.bs-stepper .step.crossed .bs-stepper-circle {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

.bs-stepper .step.active .bs-stepper-label .bs-stepper-title {
  color: var(--primary-color) !important;
}

/* Dropzone */
.dropzone.dz-drag-hover {
  border-color: var(--primary-color) !important;
}

/* noUiSlider */
.noUi-connect,
.noUi-horizontal .noUi-connect {
  background: var(--primary-color) !important;
}

.noUi-handle {
  border-color: var(--primary-color) !important;
}

/* App Calendar */
.fc .fc-button-primary,
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.fc .fc-button-primary:hover {
  background-color: var(--primary-color-darker) !important;
  border-color: var(--primary-color-darker) !important;
}

.fc .fc-daygrid-day.fc-day-today {
  background-color: rgba(var(--primary-color-rgb), 0.1) !important;
}

/* Kanban */
.kanban-board-header {
  background-color: rgba(var(--primary-color-rgb), 0.1) !important;
}

/* Shepherd Tour */
.shepherd-button {
  background: var(--primary-color) !important;
}

.shepherd-button:hover {
  background: var(--primary-color-darker) !important;
}

/* Waves effect */
.waves-effect.waves-light .waves-ripple {
  background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

.btn-primary .waves-ripple {
  background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

/* Menu active states */
.menu-item.active > .menu-link:not(.menu-toggle),
.menu-item.active > .menu-link.menu-toggle {
  color: var(--primary-color) !important;
}

.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-gradient-color)) !important;
  color: #fff !important;
}

/* Avatar initials */
.avatar-initial.bg-primary {
  background-color: var(--primary-color) !important;
}

.avatar-initial.bg-label-primary {
  background-color: rgba(var(--primary-color-rgb), 0.16) !important;
  color: var(--primary-color) !important;
}

/* Offcanvas */
.offcanvas .nav-link.active,
.offcanvas .nav-link:hover {
  color: var(--primary-color) !important;
}

/* Override any remaining violet #7367f0 or purple #685dd8 colors */
[style*="background-color: #7367f0"],
[style*="background-color:#7367f0"],
[style*="background: #7367f0"],
[style*="background:#7367f0"] {
  background-color: var(--primary-color) !important;
  background: var(--primary-color) !important;
}

[style*="color: #7367f0"],
[style*="color:#7367f0"] {
  color: var(--primary-color) !important;
}

[style*="border-color: #7367f0"],
[style*="border-color:#7367f0"] {
  border-color: var(--primary-color) !important;
}

/* -------------------------------------------------- */
/* COMPREHENSIVE THEME PRIMARY COLOR OVERRIDES        */
/* Override all theme-default.css violet colors       */
/* -------------------------------------------------- */
/* Carousel Controls */
.carousel-control-prev,
.carousel-control-next,
.carousel-control-prev:hover,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-next:focus {
  color: var(--primary-color) !important;
}

/* Modal onboarding carousel */
.modal-onboarding .carousel-indicators [data-bs-target] {
  background-color: var(--primary-color) !important;
}

/* List group */
.list-group-item-primary {
  color: var(--primary-color) !important;
}

button.list-group-item-primary,
button.list-group-item-primary:hover,
button.list-group-item-primary:focus {
  color: var(--primary-color) !important;
}

button.list-group-item-primary.active {
  border-color: var(--primary-color) !important;
  background-color: var(--primary-color) !important;
}

.list-group-item-action.active,
.list-group-item-action.active:hover,
.list-group-item-action.active:focus {
  border-color: var(--primary-color) !important;
  background-color: var(--primary-color) !important;
}

.list-group.list-group-timeline .list-group-timeline-primary:before {
  background: var(--primary-color) !important;
}

/* Alert primary */
.alert-primary .alert-link {
  color: var(--primary-color) !important;
}

/* Tooltip primary */
.tooltip-primary .tooltip-inner,
.tooltip-primary > .tooltip .tooltip-inner,
.ngb-tooltip-primary + ngb-tooltip-window .tooltip-inner {
  background: var(--primary-color) !important;
}

.tooltip-primary.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow::before,
.tooltip-primary.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow::before,
.tooltip-primary.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow::before,
.tooltip-primary.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow::before {
  border-top-color: var(--primary-color) !important;
}

/* Popover primary */
.popover-primary .popover-header,
.popover-primary > .popover .popover-header {
  background: var(--primary-color) !important;
}

.popover-primary.bs-popover-auto[data-popper-placement=top] > .popover-arrow::after,
.popover-primary.bs-popover-auto[data-popper-placement=bottom] > .popover-arrow::after,
.popover-primary.bs-popover-auto[data-popper-placement=left] > .popover-arrow::after,
.popover-primary.bs-popover-auto[data-popper-placement=right] > .popover-arrow::after {
  border-top-color: var(--primary-color) !important;
}

/* Dropdown item active */
.dropdown-item:not(.disabled):active,
.dropdown-menu > li.active:not(.disabled) > a:not(.dropdown-item) {
  background-color: var(--primary-color) !important;
}

/* Notifications */
.dropdown-notifications-item:not(.mark-as-read) .dropdown-notifications-read span {
  background-color: var(--primary-color) !important;
}

/* Nav pills and tabs */
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
  background-color: var(--primary-color) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
  color: var(--primary-color) !important;
  border-bottom-color: var(--primary-color) !important;
}

.nav-align-bottom .nav-tabs .nav-link.active,
.nav-align-left .nav-tabs .nav-link.active,
.nav-align-right .nav-tabs .nav-link.active {
  border-color: var(--primary-color) !important;
}

/* Button label primary - additional states */
.btn-label-primary,
.btn-label-primary:hover,
.btn-label-primary:focus,
.btn-label-primary.focus {
  color: var(--primary-color) !important;
}

.btn-label-primary:active,
.btn-label-primary.active,
.btn-label-primary.show.dropdown-toggle,
.show > .btn-label-primary.dropdown-toggle {
  color: #fff !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* Button outline primary - additional states */
.btn-outline-primary,
.btn-outline-primary:focus,
.btn-check:focus + .btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary.dropdown-toggle.show,
.show > .btn-outline-primary.dropdown-toggle {
  color: var(--primary-color) !important;
  background-color: rgba(var(--primary-color-rgb), 0.16) !important;
  border-color: var(--primary-color) !important;
}

.btn-outline-primary .badge {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

/* Form switch */
.form-switch .form-check-input:checked {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* Form range */
.form-range::-webkit-slider-thumb {
  background-color: var(--primary-color) !important;
}

.form-range::-moz-range-thumb {
  background-color: var(--primary-color) !important;
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important;
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important;
}

/* Divider */
.divider.divider-primary .divider-text:before,
.divider.divider-primary .divider-text:after {
  border-color: var(--primary-color) !important;
}

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

/* Timeline */
.timeline .timeline-item .timeline-indicator-primary {
  background-color: var(--primary-color) !important;
  box-shadow: 0 0 0 6px rgba(var(--primary-color-rgb), 0.16) !important;
}

.timeline .timeline-point-primary {
  background-color: var(--primary-color) !important;
}

/* Table primary */
.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: rgba(var(--primary-color-rgb), 0.12) !important;
  color: var(--primary-color) !important;
}

/* Accordion focus */
.accordion-button:not(.collapsed) {
  color: var(--primary-color) !important;
  background-color: rgba(var(--primary-color-rgb), 0.08) !important;
}

.accordion-button:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important;
}

/* Waves primary */
.waves-primary .waves-ripple {
  background: radial-gradient(rgba(var(--primary-color-rgb), 0.2) 0, rgba(var(--primary-color-rgb), 0.3) 40%, rgba(var(--primary-color-rgb), 0.4) 50%, rgba(var(--primary-color-rgb), 0.5) 60%, rgba(255, 255, 255, 0) 70%) !important;
}

/* App Brand / Logo */
.app-brand .layout-menu-toggle {
  background-color: var(--primary-color) !important;
}

/* Menu */
.bg-menu-theme .menu-link.active:not(.menu-toggle),
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-gradient-color)) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(var(--primary-color-rgb), 0.35) !important;
}

.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle)::before {
  background-color: var(--primary-color) !important;
}

.bg-menu-theme .menu-item:not(.active) > .menu-link:hover {
  color: var(--primary-color) !important;
}

/* Customizer */
.customizer .customizer-toggle {
  background: var(--primary-color) !important;
}

/* App calendar event */
.fc-event.fc-event-primary {
  background-color: rgba(var(--primary-color-rgb), 0.16) !important;
  color: var(--primary-color) !important;
}

.fc-event.fc-event-primary .fc-event-title,
.fc-event.fc-event-primary .fc-event-main {
  color: var(--primary-color) !important;
}

/* Tagify tags */
.tagify--focus,
.tagify:focus,
.tagify.tagify--focus,
.tagify:focus-within {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(var(--primary-color-rgb), 0.3) !important;
  outline: 0 !important;
}

.tagify__tag,
.tagify .tagify__tag {
  --tag-bg: rgba(var(--primary-color-rgb), 0.16) !important;
  --tag-text-color: var(--primary-color) !important;
  --tag-hover: rgba(var(--primary-color-rgb), 0.24) !important;
  --tag-remove-bg: rgba(var(--primary-color-rgb), 0.3) !important;
  --tag-remove-btn-color: var(--primary-color) !important;
}

.tagify__tag:hover {
  --tag-bg: rgba(var(--primary-color-rgb), 0.24) !important;
}

.tagify__tag > div::before {
  box-shadow: 0 0 0 1.1em rgba(var(--primary-color-rgb), 0.16) inset !important;
}

.tagify__tag:hover > div::before {
  box-shadow: 0 0 0 1.1em rgba(var(--primary-color-rgb), 0.24) inset !important;
}

.tagify__tag__removeBtn:hover {
  background: rgba(var(--primary-color-rgb), 0.3) !important;
}

.tagify__input::before {
  color: var(--primary-color) !important;
}

.tagify__dropdown__item--active {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

/* Apex Charts */
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  background: var(--primary-color) !important;
}

/* Text body hover */
.text-body[href]:hover {
  color: var(--primary-color-darker) !important;
}

/* Input group and button group with primary */
.input-group .btn-primary,
.input-group .btn-primary:hover,
.input-group .btn-primary:focus,
.input-group .btn-primary:active,
.btn-group .btn-primary,
.btn-group .btn-primary:hover,
.btn-group .btn-primary:focus,
.btn-group .btn-primary:active,
.btn-group-vertical .btn-primary,
.btn-group-vertical .btn-primary:hover,
.btn-group-vertical .btn-primary:focus,
.btn-group-vertical .btn-primary:active {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.input-group .btn-primary:hover,
.input-group .btn-primary:focus,
.input-group .btn-primary:active,
.btn-group .btn-primary:hover,
.btn-group .btn-primary:focus,
.btn-group .btn-primary:active,
.btn-group-vertical .btn-primary:hover,
.btn-group-vertical .btn-primary:focus,
.btn-group-vertical .btn-primary:active {
  background-color: var(--primary-color-darker) !important;
  border-color: var(--primary-color-darker) !important;
}

/* Shepherd buttons */
.shepherd-element .shepherd-button:not(:disabled).btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.shepherd-element .shepherd-button:not(:disabled).btn-primary:hover,
.shepherd-element .shepherd-button:not(:disabled).btn-primary:focus {
  background-color: var(--primary-color-darker) !important;
  border-color: var(--primary-color-darker) !important;
}

/* More specific button overrides for all btn-primary variants */
html body .btn-primary,
html body button.btn-primary,
html body a.btn-primary,
html body input[type=submit].btn-primary,
html body input[type=button].btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-primary:active,
html body .btn-primary.active,
html body button.btn-primary:hover,
html body button.btn-primary:focus,
html body button.btn-primary:active,
html body a.btn-primary:hover,
html body a.btn-primary:focus,
html body a.btn-primary:active {
  background-color: var(--primary-color-darker) !important;
  border-color: var(--primary-color-darker) !important;
  color: #fff !important;
}

/* Light primary backgrounds */
.bg-light-primary,
.bg-lighter-primary {
  background-color: rgba(var(--primary-color-rgb), 0.12) !important;
}

/* Icon primary */
.icon-primary {
  color: var(--primary-color) !important;
}

/* Datatable pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

/* Bootstrap Select */
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item.selected,
.bootstrap-select .dropdown-menu .dropdown-item:active {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

/* Switch Primary */
html body .switch-primary.switch .switch-input:checked ~ .switch-toggle-slider,
html body .switch-primary .switch-input:checked ~ .switch-toggle-slider,
html body .form-switch.switch-primary .form-check-input:checked,
html body .switch.switch-primary .switch-input:checked ~ .switch-toggle-slider {
  background: var(--primary-color) !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

html body .switch-primary.switch .switch-input:focus ~ .switch-toggle-slider,
html body .switch-primary .switch-input:focus ~ .switch-toggle-slider {
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important;
}

/* Quill editor */
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: var(--primary-color) !important;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
  stroke: var(--primary-color) !important;
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill {
  fill: var(--primary-color) !important;
}

.tt-suggestion:hover {
  color: var(--primary-color) !important;
}

.offcanvas-body {
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
  overflow-y: visible !important;
}

body {
  zoom: 75%;
}

.modal-backdrop {
  zoom: 140% !important;
}

body.page-loading {
  overflow: hidden;
}

body.page-loading .layout-wrapper {
  opacity: 0;
}

.layout-wrapper {
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* Navbar height (horizontal layout only; scoped via .layout-horizontal instead
   of a server-side @if, since Sass has no access to the runtime config) */
:root {
  --horizontal-navbar-height: 5rem;
}

.layout-horizontal #layout-navbar.layout-navbar {
  height: var(--horizontal-navbar-height) !important;
  margin-bottom: 3rem !important;
}

/* Reserve the fixed navbar's space in plain CSS.
   On >=1200px the horizontal navbar is position:fixed straight from core.css,
   but nothing static reserves its height - helpers.js measures the navbar on
   load and only then injects `.layout-page { padding-top: <navbar>px }`.
   So the first paint puts the cards underneath the navbar and they jump down
   once JS finishes. Reserving the same height here means the content starts
   in its final position.
   These selectors (0,3,0) outrank the injected `.layout-page` rule (0,1,0),
   so our value wins even though both are !important - the JS update becomes a
   no-op instead of a second layout pass. */
@media (min-width: 1200px) {
  .layout-menu-fixed .layout-navbar-full .layout-page,
  .layout-menu-fixed-offcanvas .layout-navbar-full .layout-page,
  .layout-navbar-fixed .layout-navbar-full .layout-page {
    padding-top: var(--horizontal-navbar-height) !important;
  }
}

/* Remove navbar margin on mobile */
@media (max-width: 1199.98px) {
  .layout-horizontal #layout-navbar.layout-navbar {
    height: auto !important;
    margin-bottom: 0 !important;
  }
  /* Remove any padding-top from layout-page in horizontal layout on mobile */
  .layout-horizontal .layout-page,
  .layout-navbar-full .layout-page,
  .layout-horizontal .layout-wrapper .layout-page,
  .layout-navbar-full .layout-wrapper .layout-page,
  .layout-wrapper.layout-horizontal .layout-page,
  .layout-navbar-fixed.layout-horizontal .layout-wrapper .layout-page {
    padding-top: 0 !important;
  }
}
#layout-navbar.layout-navbar > .container-fluid,
#layout-navbar.layout-navbar > .container-xxl {
  min-height: inherit;
}

/* Horizontal Menu - inline in navbar */
.layout-navbar .layout-menu-horizontal {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  margin: 0 !important;
  -ms-flex-positive: 1 !important;
      flex-grow: 1 !important;
  position: static !important;
  z-index: auto !important;
}

.layout-navbar .layout-menu-horizontal > .container-fluid,
.layout-navbar .layout-menu-horizontal > .container-xxl {
  padding: 0;
  -ms-flex-pack: center;
      justify-content: center;
}

.layout-horizontal .menu-horizontal .menu-inner > .menu-item {
  margin: 0.25rem 0.1rem;
}

.layout-horizontal .menu-horizontal .menu-inner > .menu-item > .menu-link {
  padding: 0.7rem 1.35rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  gap: 0.55rem;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: #6f6b7d;
  white-space: nowrap;
}

.layout-horizontal .menu-horizontal .menu-inner > .menu-item > .menu-link.menu-toggle {
  padding-right: calc(1.35rem + 1.26em);
}

.layout-horizontal .menu-horizontal .menu-inner > .menu-item > .menu-link:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 10%, transparent), color-mix(in srgb, var(--primary-gradient-color) 8%, transparent));
  color: var(--primary-color) !important;
}

.layout-horizontal .menu-horizontal .menu-inner > .menu-item > .menu-link i {
  font-size: 1.4rem;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

.layout-horizontal .menu-horizontal .menu-inner > .menu-item > .menu-link:hover i {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.layout-horizontal .bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link,
.layout-horizontal .bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-gradient-color, var(--primary-color-darker))) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--primary-color) 35%, transparent);
  border-radius: 0.5rem;
}

.layout-horizontal .bg-menu-theme.menu-horizontal .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-gradient-color, var(--primary-color-darker))) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--primary-color) 35%, transparent);
  border-radius: 0.5rem;
}

/* Hide mobile menu header on large screens */
.mobile-menu-header {
  display: none !important;
}

/* Mobile Menu Backdrop */
.mobile-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  pointer-events: none;
}

.mobile-menu-backdrop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Z-index hierarchy for mobile menu */
@media (max-width: 1199.98px) {
  /* Navbar above backdrop to ensure hamburger is clickable */
  #layout-navbar,
  .layout-navbar,
  nav.layout-navbar {
    z-index: 1001 !important;
    position: relative;
  }
}
/* Ensure hamburger menu toggle is always clickable on mobile */
@media (max-width: 1199.98px) {
  #hamburger-toggle,
  a.layout-menu-toggle {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1050 !important;
    position: relative !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center !important;
        align-items: center !important;
    -ms-flex-pack: center !important;
        justify-content: center !important;
    padding: 0.5rem !important;
    min-width: 44px !important;
    min-height: 44px !important;
    -ms-touch-action: manipulation !important;
        touch-action: manipulation !important;
  }
  #hamburger-toggle i,
  a.layout-menu-toggle i {
    pointer-events: none !important;
    font-size: 1.5rem !important;
    display: block !important;
  }
  /* Fix drag-target to not cover hamburger button */
  .drag-target {
    z-index: 998 !important;
    pointer-events: auto !important;
  }
  /* Ensure navbar area is above drag-target */
  .navbar-nav {
    z-index: 1051 !important;
    position: relative !important;
  }
}
/* Hide inline menu on small screens - hamburger handles mobile */
@media (max-width: 1199.98px) {
  .layout-navbar .layout-menu-horizontal {
    display: none !important;
  }
  /* Show mobile menu header only on mobile */
  .mobile-menu-header {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  /* Mobile Menu Fix - Ensure proper stacking */
  #layout-menu.layout-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    min-height: 133vh !important;
    min-height: 133dvh !important;
    width: 280px !important;
    z-index: 9999 !important;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    background: #fff !important;
    overflow: hidden !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-direction: column !important;
        flex-direction: column !important;
  }
  /* Show menu when expanded */
  .layout-menu-expanded #layout-menu.layout-menu {
    -webkit-transform: translateX(0) !important;
            transform: translateX(0) !important;
  }
  /* Mobile menu header styling */
  #layout-menu .mobile-menu-header,
  #layout-menu #mobile-menu-header,
  #layout-menu > .mobile-menu-header,
  #layout-menu > div > .mobile-menu-header,
  .mobile-menu-header {
    display: -ms-flexbox !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    -ms-flex-align: center !important;
        align-items: center !important;
    -ms-flex-pack: justify !important;
        justify-content: space-between !important;
    -ms-flex-direction: row !important;
        flex-direction: row !important;
    -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid #e5e5e5 !important;
    background: #fff !important;
    min-height: 70px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
    -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important;
    -ms-flex-order: -1 !important;
        order: -1 !important;
  }
  .mobile-menu-header > .mobile-menu-logo {
    -ms-flex-order: 1 !important;
        order: 1 !important;
  }
  .mobile-menu-header > .mobile-menu-close {
    -ms-flex-order: 2 !important;
        order: 2 !important;
    margin-left: auto !important;
  }
  .mobile-menu-header .mobile-menu-logo,
  .mobile-menu-header .mobile-menu-logo img {
    display: block !important;
    visibility: visible !important;
  }
  .mobile-menu-header .mobile-menu-logo img {
    height: 40px !important;
    width: auto !important;
  }
  .mobile-menu-close,
  #mobile-menu-close {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center !important;
        align-items: center !important;
    -ms-flex-pack: center !important;
        justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f5f5f5 !important;
    color: #333 !important;
    text-decoration: none !important;
  }
  .mobile-menu-close .ti-x,
  #mobile-menu-close .ti-x {
    font-size: 1.25rem !important;
  }
  .mobile-menu-close:hover,
  #mobile-menu-close:hover {
    background: #eee !important;
  }
  /* Menu items container - align to top */
  #layout-menu .menu-inner,
  #vertical-menu-inner.menu-inner {
    display: block !important;
    -ms-flex-pack: start !important;
        justify-content: flex-start !important;
    -ms-flex-align: start !important;
        align-items: flex-start !important;
    padding: 0.75rem 0 !important;
    margin: 0 !important;
    -ms-flex: 1 !important;
        flex: 1 !important;
    height: auto !important;
  }
  /* Override inline styles on menu-inner */
  #layout-menu ul.menu-inner[style] {
    -ms-flex-pack: start !important;
        justify-content: flex-start !important;
    margin-left: 0 !important;
  }
  /* Override any container styles */
  #layout-menu > .container-fluid,
  #layout-menu > div:not(.mobile-menu-header):not(.menu-inner) {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-direction: column !important;
        flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
  }
  /* Hide horizontal menu elements on mobile */
  #layout-menu .menu-horizontal-wrapper,
  #layout-menu .menu-horizontal-prev,
  #layout-menu .menu-horizontal-next,
  #layout-menu .app-brand {
    display: none !important;
  }
  /* Mobile menu link styles */
  #layout-menu .menu-item .menu-link {
    padding: 0.7rem 1.25rem !important;
    color: #6f6b7d !important;
    transition: all 0.2s ease !important;
  }
  #layout-menu .menu-item .menu-link:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 10%, transparent), color-mix(in srgb, var(--primary-gradient-color) 8%, transparent)) !important;
    color: var(--primary-color) !important;
  }
  #layout-menu .menu-item.active > .menu-link {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-gradient-color, var(--primary-color-darker))) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--primary-color) 35%, transparent) !important;
    border-radius: 0.5rem !important;
    margin: 0 0.75rem !important;
  }
  #layout-menu .menu-item .menu-link i {
    color: inherit !important;
  }
}
/* ----------------------------------------------------------------------------
   Final overrides (previously a second inline \3c style> block that had to be
   the last \3c style> tag on the page to win the cascade against vendor CSS —
   preserved here at the end of the same compiled file for the same reason).
   --------------------------------------------------------------------------- */
/* Select2 Final Overrides */
.select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: rgba(var(--primary-color-rgb), 0.16) !important;
  color: var(--primary-color) !important;
}

/* Select2 - grey border by default, primary border and box-shadow on focus */
html body .select2-container--default .select2-selection--multiple,
html body .select2-container--default .select2-selection--single {
  border-color: #dbdade !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

html body .select2-container--default.select2-container--focus .select2-selection,
html body .select2-container--default.select2-container--open .select2-selection,
html body .select2-container--default.select2-container--focus .select2-selection--single,
html body .select2-container--default.select2-container--focus .select2-selection--multiple,
html body .select2-container--default.select2-container--open .select2-selection--single,
html body .select2-container--default.select2-container--open .select2-selection--multiple,
html body .select2-container--default .select2-selection--single:focus,
html body .select2-container--default .select2-selection--multiple:focus,
html body .select2-container .select2-selection--single:focus,
html body .select2-container .select2-selection--multiple:focus,
html body .select2-container.select2-container--focus .select2-selection,
html body .select2-container.select2-container--open .select2-selection {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(var(--primary-color-rgb), 0.3) !important;
  outline: 0 !important;
}

.select2-primary .select2-container--default .select2-selection,
.select2-primary .select2-selection {
  border-color: #dbdade !important;
}

/* Tagify Final Overrides */
.tagify--focus {
  border-color: var(--primary-color) !important;
}

/* Form Controls Final Overrides */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary-color) !important;
}

/* Switch Final Overrides */
html body .switch-primary.switch .switch-input:checked ~ .switch-toggle-slider,
html body .switch-primary .switch-input:checked ~ .switch-toggle-slider,
html body .form-switch.switch-primary .form-check-input:checked,
html body .switch.switch-primary .switch-input:checked ~ .switch-toggle-slider {
  background: var(--primary-color) !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* Button Primary Final Overrides */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-color-darker) !important;
  border-color: var(--primary-color-darker) !important;
}

/* Dropdown Item Hover - Primary Color */
.dropdown-item:hover,
.dropdown-item:focus {
  color: #fff !important;
  background-color: var(--primary-color) !important;
}

.dropdown-item:active {
  background-color: var(--primary-color-darker) !important;
}

/* Active module badge (opt-in). Not wired up by default - MenuData renders
   the horizontal nav flat, same as vertical, so nothing currently sets
   .menu-active-module. Available for when a header section needs to be
   grouped into a dropdown again: badges the active child underneath the
   active top-level item, since collapsing a section into a dropdown hides
   which child is open until you open it.
   It has to sit in normal flow: .menu-horizontal .menu-inner is
   overflow:hidden and sized to its content, so anything absolutely
   positioned below the link gets clipped. */
.layout-horizontal .menu-horizontal .menu-inner > .menu-item > .menu-active-module {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0.3rem auto 0;
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--primary-color) 14%, transparent);
  color: var(--primary-color);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Get out of the way while the dropdown is open. visibility rather than
   display so the badge keeps its space - the menu is vertically centred in
   the navbar, so collapsing it would bounce the whole nav row on hover. */
.layout-horizontal .menu-horizontal .menu-inner > .menu-item:hover > .menu-active-module,
.layout-horizontal .menu-horizontal .menu-inner > .menu-item.open > .menu-active-module {
  opacity: 0;
  visibility: hidden;
}

/* ...and paint the dropdown above it regardless. */
.layout-horizontal .menu-horizontal .menu-inner > .menu-item > .menu-sub {
  z-index: 3;
}