/* SIDE MENU
   ----------------------------- */

/* override background color only with light theme */
[data-bs-theme="light"] {
    --bs-app-bg-color: #f1f1f1;
}

/* Production width issue */
@media (min-width: 992px) {
    [data-kt-app-header-fixed=true][data-kt-app-sidebar-fixed=true][data-kt-app-sidebar-push-header=true] .app-header, [data-kt-app-header-fixed=true][data-kt-app-sidebar-sticky=on][data-kt-app-sidebar-push-header=true] .app-header {
        left: calc(var(--bs-app-sidebar-width));
    }
    [data-kt-app-sidebar-fixed=true] .app-wrapper {
        margin-left: calc(var(--bs-app-sidebar-width));
    }
}

/* Fix mobile page-header */
@media (max-width: 991.98px) {
    .app-header .page-title {
        display: block !important;
    }
}

/** Collapsed menu adjustment */
[data-kt-app-sidebar-minimize=on][data-kt-app-sidebar-hoverable=true] .app-sidebar:not(:hover) .app-sidebar-footer
{
    display: none !important;
}

/** Quick search **/
.aside-toolbar .aside-search {
    border-top: 1px dashed #2d2d43;
    border-bottom: 1px dashed #2d2d43;
}
.aside-toolbar .aside-search .search-input {
    background-color: #474764;
    border-color: #1e1e2d;
    color: white !important;
    border-left: none;
    border-right: none;
    font-size: 12px;
}
.aside-toolbar .aside-search .svg-icon {
    color: white !important;
}
.aside-toolbar .aside-search .input-group-text {
    background-color: #474764;
    border-color: #1e1e2d;
    color: white !important;
    border-right: none;
    border-left: none;
}
.aside-toolbar .aside-search .btn {
    background-color: #474764;
    color: white !important;
    border:none;
}


/** Increase font-size on main menu */
.menu-item {
    font-size: 1.1rem;
}
.menu-icon [class^="fa"], .menu-icon [class*=" fa-"] {
    font-size: 15px;
}

/** Fix color menu item **/
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link .menu-icon * {
    color: #e8e8e8 !important;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link:hover .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link:hover .menu-icon * {
    color: white !important;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link.active .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link.active .menu-icon * {
    color: white !important;
    font-weight:bold;
}

/** Reset colors for dropdowns inside sidebar (they have white background) **/
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu-sub-dropdown .menu-item .menu-link .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu-sub-dropdown .menu-item .menu-link .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu-sub-dropdown .menu-item .menu-link .menu-icon * {
    color: var(--bs-gray-700) !important;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu-sub-dropdown .menu-item .menu-link:hover .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu-sub-dropdown .menu-item .menu-link:hover .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu-sub-dropdown .menu-item .menu-link:hover .menu-icon * {
    color: var(--bs-primary) !important;
}

/** Fix footer menu active color **/
[data-kt-app-layout=dark-sidebar] .app-sidebar-footer .menu-item a:hover {
    color: var(--bs-primary) !important;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar-footer .menu-item a:not(.active) {
    color: var(--bs-gray-700) !important;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar-footer .menu-item a.active:hover {
    color: white !important;
}

/** Override active menu background color **/
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link.active {
    background-color: var(--bs-primary-active);
}

/** Reduce sub menu height **/
.menu-sub-indention .menu-item .menu-item .menu-link {
    padding: 0.35rem 1rem;
}
/** Remove submenu right indention **/
.menu-sub-indention .menu-item .menu-item .menu-link.active {
    margin-right: 0;
}
/** Increase submenu left indention **/
.menu-sub-indention .menu-sub:not([data-popper-placement]) {
    margin-left: 20px;
}

/** Show app logo on mobile **/
@media (max-width: 991.98px) {
    .app-sidebar-logo {
         display: block;
    }
}

/* PAGE HEADER
   ----------------------------- */

/** Increase icon in page header **/
.metronic-toolbar-icon > span {
    font-size: 33px;
    margin-right: 13px;
    color: var(--bs-primary);
}


/* MISC
   ----------------------------- */
.separator.separator-bold {
    border-bottom-width: 3px;
    /*margin-left: -22px;*/
    /*margin-right: -22px;*/
}

.busy-load-container {
    z-index: 90 !important;
}

body > .busy-load-container  {
    z-index: 2000 !important;
}

/** Fix list-group dark mode **/
[data-bs-theme-mode=dark] .list-group-item {
    background-color: transparent !important;
}

/** Permit <a> to be disabled **/
a[disabled] {
    pointer-events: none;
    cursor: default;
}

/** Fix .sticky-top issue with lateral navigation */
#kt_app_content .sticky-top {
    z-index: 104;
}

/** Enable thin scrollbar even under 992px */
main,
span,
ol,
ul,
pre,
div {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-scrollbar-color) transparent;
}
main::-webkit-scrollbar,
span::-webkit-scrollbar,
ol::-webkit-scrollbar,
ul::-webkit-scrollbar,
pre::-webkit-scrollbar,
div::-webkit-scrollbar {
    width: var(--bs-scrollbar-size);
    height: var(--bs-scrollbar-size);
}

/** Remove kt_app_sidebar_toggle under 992px */

@media (max-width: 993px) {
    #kt_app_sidebar_toggle {
        display: none;
    }
}


/** Stamina light theme **/
[data-bs-theme-mode=light][data-bs-theme-color=purple] {
    --bs-stamina-primary: #9966FF;
    --bs-stamina-primary-rgb: 97, 36, 221;

    --bs-stamina-ultra-light: #f4efff;
    --bs-stamina-light: #DFD4F9;
    --bs-stamina-light-rgb: 223, 212, 249;

    --bs-stamina-dark: #5838A8;
    --bs-stamina-dark-rgb: 88, 56, 168;

    --bs-stamina-ultra-dark: #1d1531;
    --bs-stamina-ultra-dark-rgb: 29, 21, 49;

    --bs-app-sidebar-bg-color: #1d1531;
    --bs-info-inverse: white;
    --bs-info: #009ef7;
    --bs-info-active: #3290ff;

    --bs-primary-active: var(--bs-stamina-dark);
    --bs-primary: var(--bs-stamina-primary);
    --bs-primary-light: var(--bs-stamina-ultra-light);
    --bs-text-primary: var(--bs-stamina-primary);
    --bs-primary-rgb: var(--bs-stamina-primary-rgb);
    --bs-link-color: var(--bs-stamina-primary);
    --bs-link-color-rgb: var(--bs-stamina-primary-rgb);
    --bs-link-hover-color: var(--bs-stamina-dark);
    --bs-link-hover-color-rgb: var(--bs-stamina-dark-rgb);
    --bs-menu-link-color-hover: var(--bs-stamina-dark);
    --bs-menu-link-color-active: var(--bs-stamina-dark);
    --bs-menu-link-color-show: var(--bs-stamina-primary);
    --bs-nav-link-color: var(--bs-stamina-primary);
    --bs-component-hover-color: var(--bs-stamina-primary);
    --bs-nav-pills-link-active-color: var(--bs-stamina-primary);
}

[data-bs-theme-mode=light][data-bs-theme-color=blue] {
    --bs-stamina-primary: #0095e8;
    --bs-stamina-primary-rgb: 0, 158, 247;

    --bs-stamina-light: #f1faff;
    --bs-stamina-light-rgb: 144, 216, 245;

    --bs-stamina-dark: #0b5b7a;
    --bs-stamina-dark-rgb: 11, 91, 122;

    --bs-stamina-ultra-dark: #073244;
    --bs-stamina-ultra-dark-rgb: 7, 50, 68;

    --bs-app-sidebar-bg-color: #1d1531;
    --bs-info-inverse: white;
    --bs-info: #009ef7;
    --bs-info-active: #3290ff;

    --bs-primary-active: var(--bs-stamina-dark);
    --bs-primary: var(--bs-stamina-primary);
    --bs-primary-light: var(--bs-stamina-light);
    --bs-text-primary: var(--bs-stamina-primary);
    --bs-primary-rgb: var(--bs-stamina-primary-rgb);
    --bs-link-color: var(--bs-stamina-primary);
    --bs-link-color-rgb: var(--bs-stamina-primary-rgb);
    --bs-link-hover-color: var(--bs-stamina-dark);
    --bs-link-hover-color-rgb: var(--bs-stamina-dark-rgb);
    --bs-menu-link-color-hover: var(--bs-stamina-dark);
    --bs-menu-link-color-active: var(--bs-stamina-dark);
    --bs-menu-link-color-show: var(--bs-stamina-primary);
    --bs-nav-link-color: var(--bs-stamina-primary);
    --bs-component-hover-color: var(--bs-stamina-primary);
}

[data-bs-theme-mode=light][data-bs-theme-color=red] {
    --bs-stamina-primary: #ef514a;
    --bs-stamina-primary-rgb: 239, 81, 74;

    --bs-stamina-light: #f59590;
    --bs-stamina-light-rgb: 245, 149, 144;

    --bs-stamina-dark: #8f120d;
    --bs-stamina-dark-rgb: 143, 18, 13;

    --bs-stamina-ultra-dark: #590b08;
    --bs-stamina-ultra-dark-rgb: 89, 11, 8;

    --bs-app-sidebar-bg-color: #1d1531;
    --bs-info-inverse: white;
    --bs-info: #009ef7;
    --bs-info-active: #3290ff;

    --bs-primary-active: var(--bs-stamina-dark);
    --bs-primary: var(--bs-stamina-primary);
    --bs-primary-light: var(--bs-stamina-light);
    --bs-text-primary: var(--bs-stamina-primary);
    --bs-primary-rgb: var(--bs-stamina-primary-rgb);
    --bs-link-color: var(--bs-stamina-primary);
    --bs-link-color-rgb: var(--bs-stamina-primary-rgb);
    --bs-link-hover-color: var(--bs-stamina-dark);
    --bs-link-hover-color-rgb: var(--bs-stamina-dark-rgb);
    --bs-menu-link-color-hover: var(--bs-stamina-dark);
    --bs-menu-link-color-active: var(--bs-stamina-dark);
    --bs-menu-link-color-show: var(--bs-stamina-primary);
    --bs-nav-link-color: var(--bs-stamina-primary);
    --bs-component-hover-color: var(--bs-stamina-primary);
}

/**
    DARK MODE

 */
[data-bs-theme-mode=dark][data-bs-theme-color=purple] {
    --bs-stamina-primary: #9966FF;
    --bs-stamina-light: #172331;
    --bs-stamina-dark: #5838A8;
    --bs-stamina-ultra-dark: #1d1531;
    --bs-app-sidebar-bg-color: #1d1531;
    --bs-primary-active: var(--bs-stamina-dark);
    --bs-primary: var(--bs-stamina-primary);
    --bs-text-primary: var(--bs-stamina-primary);
    --bs-info-inverse: white;
    --bs-info: #009ef7;
    --bs-info-active: #3290ff;
    --bs-link-color-rgb: var(--bs-stamina-primary);
    --bs-link-color: var(--bs-stamina-primary);
    --bs-primary-light: var(--bs-stamina-ultra-dark);
}

[data-bs-theme-mode=dark][data-bs-theme-color=blue] {
    --bs-stamina-primary: #9966FF;
    --bs-stamina-light: #DFD4F9;
    --bs-stamina-dark: #5838A8;
    --bs-stamina-ultra-dark: #1d1531;
    --bs-app-sidebar-bg-color: #1d1531;
    --bs-primary-active: var(--bs-stamina-dark);
    --bs-primary: var(--bs-stamina-primary);
    --bs-text-primary: var(--bs-stamina-primary);
    --bs-info-inverse: white;
    --bs-info: #009ef7;
    --bs-info-active: #3290ff;
    --bs-link-color-rgb: var(--bs-stamina-primary);
    --bs-link-color: var(--bs-stamina-primary);
    --bs-primary-light: var(--bs-stamina-ultra-dark);
}

[data-bs-theme-mode=dark][data-bs-theme-color=red] {
    --bs-stamina-primary: #9966FF;
    --bs-stamina-light: #DFD4F9;
    --bs-stamina-dark: #5838A8;
    --bs-stamina-ultra-dark: #1d1531;
    --bs-app-sidebar-bg-color: #1d1531;
    --bs-primary-active: var(--bs-stamina-dark);
    --bs-primary: var(--bs-stamina-primary);
    --bs-text-primary: var(--bs-stamina-primary);
    --bs-info-inverse: white;
    --bs-info: #009ef7;
    --bs-info-active: #3290ff;
    --bs-link-color-rgb: var(--bs-stamina-primary);
    --bs-link-color: var(--bs-stamina-primary);
    --bs-primary-light: var(--bs-stamina-ultra-dark);
}

.bg-auto {
    background-color: white;
}
[data-bs-theme-mode=dark] .bg-auto {
    background-color: var(--bs-body-bg); !important;
}


.nav-pills {
    --bs-nav-pills-link-active-color: #ffffff;
    --bs-nav-pills-link-active-bg: var(--bs-stamina-primary);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar {
    background-color: var(--bs-app-sidebar-bg-color);
}
[data-kt-app-layout=dark-sidebar] .app-sidebar-menu .menu .menu-item .menu-link.active {
    background-color: var(--bs-primary);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
    border-bottom: none;
}

.bg-stamina-primary {
    background-color: var(--bs-stamina-primary);
}
.bg-stamina-light {
    background-color: var(--bs-stamina-light);
}
.bg-stamina-dark {
    background-color: var(--bs-stamina-dark);
}
.text-stamina-primary {
    color: var(--bs-stamina-primary);
}
.text-stamina-light {
    color: var(--bs-stamina-light);
}
.text-stamina-dark {
    color: var(--bs-stamina-dark);
}
.btn.btn-info {
    color: var(--bs-info-inverse);
    border-color: var(--bs-info);
    background-color: var(--bs-info);
}

.text-stamina-blue {
    color: #48BFEE;
}

.text-stamina-red {
    color: #F37E79;
}

.text-stamina-purple {
    color: #9966FF;
}

.btn-stamina {
    color: white;
    background-color: #9966FF;
}

.btn-stamina:hover {
    color: white;
    background-color: #5838A8;
}

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


/* Fix form-floating */
.form-floating .form-label {
    font-weight: normal;
    color: var(--bs-gray-600);
    opacity: 1 !important;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Fix form-floating issue with metronic-algolia-autocomplete, drifting to the right if an icon exists */
.form-floating:has([data-controller="metronic-algolia-autocomplete"]):has(.input-group-text) label {
  left: 42px;
}

/* Fix form-floating issue with z-index, sometimes the label is hidden behind the input */
.form-floating .form-label {
    z-index: 10;
}

.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
    background-color: var(--bs-body-bg);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--bs-stamina-primary);
    color: white;
}

/** Card box shadow **/
.card {
    --bs-card-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    --bs-card-border-color: #F1F1F4;
}

/** Offcanvas border-shadow disable **/
.offcanvas {
    box-shadow: none;
}

/* ===========================================
   Custom Offcanvas Styles - Floating Effect
   =========================================== */

/* Largeur par défaut optimisée */
.offcanvas {
    --bs-offcanvas-width: 550px;
}

/* Marges pour effet flottant + border-radius sur tous les coins */
.offcanvas {
    border-radius: 15px !important;
    top: 20px !important;
    bottom: 20px !important;
    height: calc(100vh - 40px) !important;
}

/* Overflow hidden sur le turbo-frame pour respecter le border-radius */
.offcanvas > turbo-frame,
.offcanvas > turbo-frame > .card {
    overflow: hidden !important;
    border-radius: 15px !important;
}

/* Animation fluide pour offcanvas venant de la gauche */
.offcanvas-start {
    left: 20px !important;
    width: calc(var(--bs-offcanvas-width) - 20px) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Animation fluide pour offcanvas venant de la droite */
.offcanvas-end {
    right: 20px !important;
    width: calc(var(--bs-offcanvas-width) - 20px) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Mobile: offcanvas plein écran sans marges */
@media (max-width: 576px) {
    .offcanvas {
        border-radius: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        --bs-offcanvas-width: 100vw;
    }
    .offcanvas-start {
        left: 0 !important;
        width: 100vw !important;
    }
    .offcanvas-end {
        right: 0 !important;
        width: 100vw !important;
    }
    .offcanvas > turbo-frame,
    .offcanvas > turbo-frame > .card,
    .offcanvas .card {
        border-radius: 0 !important;
    }
}

/* Réduire l'opacité du backdrop (fond sombre) avec animation */
.offcanvas-backdrop {
    transition: opacity 0.3s ease-in-out !important;
}

.offcanvas-backdrop.show {
    opacity: 0.2 !important;
}

/* Forcer le border-radius sur tous les éléments internes de l'offcanvas */
.offcanvas .card,
.offcanvas .card.rounded-end-0,
.offcanvas .card.rounded-start-0,
.offcanvas > .card,
.offcanvas turbo-frame > .card {
    border-radius: 15px !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
}

/* ===========================================
   Offcanvas Parking Feature
   =========================================== */

/* État "parked" pour les offcanvas à gauche */
.offcanvas-start.parked {
    transform: translateX(calc(-100% + 60px)) !important; /* Laisse 60px visible */
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3) !important; /* Ombre pour indication visuelle */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Effet hover sur offcanvas parked */
.offcanvas-start.parked:hover {
    transform: translateX(calc(-100% + 80px)) !important; /* Petit aperçu au survol */
}

/* État "parked" pour les offcanvas à droite (au cas où) */
.offcanvas-end.parked {
    transform: translateX(calc(100% - 60px)) !important;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.offcanvas-end.parked:hover {
    transform: translateX(calc(100% - 80px)) !important;
}

/* Poignée cliquable pour rouvrir l'offcanvas parked */
.offcanvas-park-handle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 80px;
    background: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.offcanvas-start .offcanvas-park-handle {
    right: 0;
    border-radius: 8px 0 0 8px;
}

.offcanvas-end .offcanvas-park-handle {
    left: 0;
    border-radius: 0 8px 8px 0;
}

.offcanvas-park-handle:hover {
    background: var(--bs-primary-active);
    width: 70px;
}

.offcanvas-park-handle i {
    color: white;
    font-size: 20px;
    transition: transform 0.2s ease;
}

.offcanvas-park-handle:hover i {
    transform: translateX(3px);
}