@charset "UTF-8";
/* ============================================================================
   App custom styles
   Extracted from the former inline <style> block 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;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #fff !important;
  background-color: var(--primary-color) !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;
}

/* 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;
}

.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, .offcanvas-backdrop {
  zoom: 155% !important;
}

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

#sig {
  height: 200px;
  width: 100%;
  border: 1px solid #ccc;
}

.kbw-signature {
  width: 100% !important;
  height: 100% !important;
}

.repeater-table-wrapper {
  display: block;
  max-width: 100%;
  overflow-x: auto; /* ✅ horizontal scroll only */
}

/* Stop buttons from looking faded/translucent after being pressed:
   the element keeps :focus/:active and shows a lingering focus halo.
   Genuinely disabled buttons still dim as usual. */
.btn:focus,
.btn:focus-visible,
.btn:active,
.btn.active {
  box-shadow: none !important;
}

.btn:not(:disabled):not(.disabled):focus,
.btn:not(:disabled):not(.disabled):active {
  opacity: 1 !important;
}

/* Global Converter Widget Button - link tab centered on the right edge */
.converter-widget-btn {
  position: fixed;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1045;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 42px;
  height: 42px;
  border-top-left-radius: 15%;
  border-bottom-left-radius: 15%;
  background: var(--bs-primary);
  color: #fff !important;
  font-size: 18px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in;
}

.converter-widget-btn:hover {
  color: #fff;
  -webkit-filter: brightness(0.92);
          filter: brightness(0.92);
}

.converter-widget-offcanvas {
  --bs-offcanvas-width: 800px !important;
}

@media (max-width: 800px) {
  .converter-widget-offcanvas {
    --bs-offcanvas-width: 100vw !important;
  }
}
#converterWidgetTabs .nav-link {
  font-size: 1.05rem;
  padding: 0.85rem 1rem;
}

#converterWidgetTabs .nav-link i {
  font-size: 1.25rem;
}

#converterWidgetTabs {
  --bs-nav-tabs-link-active-color: var(--primary-color);
}

#converterWidgetTabs .nav-link:not(.active):hover,
#converterWidgetTabs .nav-link:not(.active):focus {
  color: var(--primary-color-darker) !important;
}

/* ----------------------------------------------------------------------------
   Horizontal layout only.
   Was a Blade @if on custom.myLayout == 'horizontal'; now statically scoped
   via the data-template attribute set on <html> by commonMaster.blade.php.
   --------------------------------------------------------------------------- */
:root {
  --horizontal-navbar-height: 6rem;
}

html[data-template^=horizontal-menu] {
  /* Navbar height */
  /* Remove navbar margin on mobile */
}
html[data-template^=horizontal-menu] #layout-navbar.layout-navbar {
  height: var(--horizontal-navbar-height) !important;
  margin-bottom: 3rem !important;
}
@media (max-width: 1199.98px) {
  html[data-template^=horizontal-menu] {
    /* Drop the desktop navbar reservation on mobile - but only while the
       navbar is in flow and reserves its own space. With the customizer's
       "sticky" navbar option `.layout-navbar-fixed` lands on <html> and
       core.css makes the navbar `position: fixed`, so zeroing this here is
       what used to drop the first cards underneath it.
       (The `:not()` case is belt-and-braces: core.css already zeroes it
       through `html:not(.layout-navbar-fixed) .layout-navbar-full
       .layout-page`. The old list also carried
       `.layout-navbar-fixed.layout-horizontal ...`, which can never match -
       `.layout-navbar-fixed` sits on <html> and `.layout-horizontal` on
       `.layout-wrapper`.) */
    /* Fixed navbar: reserve its height so the cards start below it.
       helpers.js measures the real navbar and injects
       `.layout-page { padding-top: <height>px !important }` on every
       update, which is the value we actually want - this rule only covers
       the first paint before that runs. `:where()` keeps it at the same
       (0,1,0) specificity as the injected rule while sitting earlier in
       the cascade, so the measured height wins the moment it lands
       instead of being outranked by a hard-coded guess.
       Hoisted out of the parent selector with @at-root: `.layout-navbar-fixed`
       is on <html> itself, so nesting it here would compile to a descendant
       combinator that can never match - and re-attaching the parent outside
       the `:where()` would push the specificity back above the injected
       rule. */
  }
  html[data-template^=horizontal-menu] #layout-navbar.layout-navbar {
    height: auto !important;
    margin-bottom: 0 !important;
  }
  html[data-template^=horizontal-menu]:not(.layout-navbar-fixed) .layout-horizontal .layout-page,
  html[data-template^=horizontal-menu]:not(.layout-navbar-fixed) .layout-navbar-full .layout-page,
  html[data-template^=horizontal-menu]:not(.layout-navbar-fixed) .layout-horizontal .layout-wrapper .layout-page,
  html[data-template^=horizontal-menu]:not(.layout-navbar-fixed) .layout-navbar-full .layout-wrapper .layout-page,
  html[data-template^=horizontal-menu]:not(.layout-navbar-fixed) .layout-wrapper.layout-horizontal .layout-page {
    padding-top: 0 !important;
  }
  :where(html[data-template^=horizontal-menu].layout-navbar-fixed) .layout-page {
    padding-top: 3.25rem !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.
   Not nested under html[data-template^='horizontal-menu'] on purpose:
   .layout-menu-fixed is a class on that same <html> element, not a
   descendant, so nesting would compile to a descendant combinator that can
   never match. .layout-navbar-full is already horizontal-layout-only, so no
   extra scoping is needed.
   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;
  }
}
#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 the backdrop so the hamburger stays clickable.
     Only z-index here: `position` must stay whatever the template picked.
     With the customizer's "sticky" option `.layout-navbar-fixed` puts the
     navbar at `position: fixed`, which is what pins it to the viewport -
     forcing it back to `relative` drops it into the flow, where it is only
     as wide as `.layout-container` (one viewport) and scrolls away sideways
     as soon as wide content makes the page scroll horizontally. What keeps
     the cards from sliding under a fixed navbar is the height reservation
     in the horizontal-layout block above, not this rule.
     `.layout-navbar` is a flex item, so z-index applies without a position
     of its own. */
  #layout-navbar,
  .layout-navbar,
  nav.layout-navbar {
    z-index: 1001 !important;
  }
}
/* 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.
     No `position` here on purpose: below 768px core.css positions the
     navbar dropdowns against the navbar itself
     (`.nav-item.dropdown { position: static }` +
     `.dropdown-menu { left: 0.9rem; width: 92% }`), so making this <ul>
     positioned turned it into the containing block and shrank the menu to
     92% of the avatar button - the "only part of the dropdown shows" bug.
     `.navbar-nav` is a flex item, so z-index applies without it. */
  .navbar-nav {
    z-index: 1051 !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;
  }
  .desktop-toggle-icon,
  #mobile-menu-icon {
    display: none !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):not(.app-brand):not(.menu-inner-shadow):not(.menu-horizontal-wrapper) {
    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;
  }
}
/* ----------------------------------------------------------------------------
   Layout content spacing (replaces the former inline style attributes in the
   layout blades: appLayout.blade.php content wrapper/container).
   --------------------------------------------------------------------------- */
.app-content-pull-up {
  margin-top: -1.5rem !important;
}

.app-content-offset {
  margin-top: 1rem;
}

.app-content-fit {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 100%;
  margin-top: 0.5rem;
}

/* ----------------------------------------------------------------------------
   Brand logo
   The logo is a wide bitmap (761x170). It must only ever be constrained on one
   axis so it keeps its aspect ratio, and it has to scale down inside the narrow
   collapsed menu rail instead of being cropped by `.app-brand`'s overflow.
   --------------------------------------------------------------------------- */
.app-brand-logo {
  -ms-flex-negative: 1;
      flex-shrink: 1;
  min-width: 0;
  overflow: visible;
}

/* demo.css pins `.app-brand-logo.demo` to 34x24 — the box of the placeholder
   SVG this template shipped with. That squeezes the wider bitmap logo, so size
   the box to its contents instead and give it a floor to sit on. */
.app-brand-logo.demo {
  width: auto;
  height: auto;
  min-width: 130px;
}

.brand-logo-img {
  display: block;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (min-width: 1200px) {
  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu {
    /* The collapsed rail is narrower than the 130px floor above. */
  }
  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .app-brand-logo.demo {
    min-width: 0;
  }
  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .app-brand-logo .brand-logo-img {
    width: 100% !important;
    height: auto !important;
    max-height: 34px;
  }
}
/* Horizontal layout: the brand sits in a 6rem tall navbar next to the inline
   horizontal menu. Step the logo down on narrower desktops so the menu keeps
   its room; the aspect ratio is preserved either way. */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  html[data-template^=horizontal-menu] .layout-navbar .app-brand-logo .brand-logo-img {
    height: 40px !important;
  }
}
/* open - that only shows up once you open the dropdown. This badges the
   active child underneath the active item.
   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: -webkit-fit-content;
  width: -moz-fit-content;
  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;
}