/**
 * Bootstrap 4 → 5 Compatibility Layer
 * Handles classes that weren't caught by automated sed replacements
 * or need CSS-level backwards compatibility.
 */

/* Old ArchitectUI / BS4 theme classes - map to Vuexy equivalents */
.app-container,
.app-theme-white,
.body-tabs-shadow,
.fixed-header,
.fixed-sidebar {
    /* These old wrapper classes are no longer needed */
}

/* Legacy app-main structure (for views that still use old classes) */
.app-main__outer {
    flex: 1;
    flex-direction: column;
    display: flex;
    z-index: 8;
}

.app-main__inner {
    padding: 0;
}

/* Legacy page title styles */
.app-page-title {
    padding: 0;
    margin-bottom: 1rem;
}

.page-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.page-title-heading {
    display: flex;
    align-items: center;
}

.page-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 0.375rem;
    margin-right: 1rem;
    background: rgba(228, 5, 33, 0.08);
    color: #E40521;
    font-size: 1.25rem;
}

.page-title-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* icon-gradient fallback */
.icon-gradient {
    background: transparent !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: inherit !important;
}

/* Legacy card classes */
.main-card {
    /* Already handled by .card */
}

/* form-group compatibility (BS4 used this, BS5 uses mb-3) */
.form-group {
    margin-bottom: 1rem;
}

/* Badge color classes (BS4 used badge-*, BS5 uses bg-*) */
.badge-primary { background-color: var(--bs-primary) !important; color: #fff; }
.badge-secondary { background-color: var(--bs-secondary) !important; color: #fff; }
.badge-success { background-color: var(--bs-success) !important; color: #fff; }
.badge-danger { background-color: var(--bs-danger) !important; color: #fff; }
.badge-warning { background-color: var(--bs-warning) !important; color: #212529; }
.badge-info { background-color: var(--bs-info) !important; color: #fff; }
.badge-light { background-color: var(--bs-light) !important; color: #212529; }
.badge-dark { background-color: var(--bs-dark) !important; color: #fff; }

/* Legacy margin/padding utilities (BS4 → BS5 direction mapping) */
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* Float utilities */
.float-left { float: left !important; }
.float-right { float: right !important; }

/* Text alignment */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* Old dropdown positioning */
.dropdown-menu-right { right: 0; left: auto; }

/* close button compat */
.close {
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    opacity: .5;
    padding: 0;
}
.close:hover { opacity: .75; }

/* Custom control classes (BS4 forms) */
.custom-control { position: relative; display: block; min-height: 1.5rem; padding-left: 1.5rem; }
.custom-control-input { position: absolute; left: 0; z-index: -1; width: 1rem; height: 1.25rem; opacity: 0; }
.custom-control-label { position: relative; margin-bottom: 0; vertical-align: top; }

/* Loader animation */
.loader_upload {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.line-scale-pulse-out {
    display: flex;
    gap: 4px;
}

.line-scale-pulse-out > div {
    width: 4px;
    height: 35px;
    border-radius: 2px;
    animation: lineScalePulseOut 0.9s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
}

.line-scale-pulse-out > div:nth-child(1) { animation-delay: -0.4s; }
.line-scale-pulse-out > div:nth-child(2) { animation-delay: -0.2s; }
.line-scale-pulse-out > div:nth-child(3) { animation-delay: 0s; }
.line-scale-pulse-out > div:nth-child(4) { animation-delay: 0.2s; }
.line-scale-pulse-out > div:nth-child(5) { animation-delay: 0.4s; }

@keyframes lineScalePulseOut {
    0%, 100% { transform: scaley(1); }
    50% { transform: scaley(0.4); }
}

/* Legacy widget classes from ArchitectUI */
.widget-content { padding: 1rem; display: flex; align-items: center; }
.widget-content-wrapper { display: flex; flex: 1; align-items: center; }
.widget-content-left { display: flex; align-items: center; }
.widget-content-right { margin-left: auto; }
.widget-heading { opacity: .8; font-weight: bold; }

/* Legacy nav-link-icon */
.nav-link-icon { margin-right: 0.5rem; }

/* Legacy button classes from ArchitectUI */
.btn-pill { border-radius: 50rem !important; }
.btn-hover-shine { position: relative; overflow: hidden; }
.btn-shine { position: relative; overflow: hidden; }
.btn-focus { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.btn-shadow { box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075) !important; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; }
.btn-icon-only { width: 2.5rem; height: 2.5rem; padding: 0; }

/* Legacy opacity utilities */
.opacity-1 { opacity: 0.1; }
.opacity-2 { opacity: 0.2; }
.opacity-5 { opacity: 0.5; }
.opacity-8 { opacity: 0.8; }

/* Legacy dropdown header from ArchitectUI */
.dropdown-menu-header { padding: 0; }
.dropdown-menu-header-inner { padding: 1rem; border-radius: 0; }
.menu-header-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.1; }
.menu-header-content { position: relative; }
.menu-header-title { color: #fff; font-weight: 600; }
.rm-pointers { min-width: 15rem; }
.dropdown-menu-lg { min-width: 20rem; }
.dropdown-menu-rounded { border-radius: 0.5rem; }

/* header-btn-lg */
.header-btn-lg { padding: 0 1rem; }
.header-user-info { padding: 0 0.5rem; }

/* Ensure sidebar menu icons are visible */
.menu-icon.ti,
.menu-icon.icon-base {
    display: inline-block;
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
}

/* Select2 navbar shop selector */
#shop-selector-form .select2-container {
    min-width: 220px;
}
#shop-selector-form .select2-container .select2-selection--single {
    height: 2.375rem;
}

/* DataTable action icon buttons */
table.dataTable td .btn-icon {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
table.dataTable td .btn-text-secondary {
    color: var(--bs-secondary-color);
    background: transparent;
    border: none;
}
table.dataTable td .btn-text-secondary:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Card header with buttons */
.card-header .btn {
    white-space: nowrap;
}

/* DataTables pagination icon sizing */
.dataTables_wrapper .page-link .icon-base,
.dt-container .page-link .icon-base {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    font-size: 1.125rem;
    vertical-align: middle;
}
.dataTables_wrapper .page-item .page-link,
.dt-container .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.125rem;
    min-height: 2.125rem;
    border-radius: 50% !important;
}

/* DataTables processing indicator overlay */
.dataTables_wrapper {
    position: relative;
}
.dataTables_wrapper > .dataTables_processing {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    z-index: 10 !important;
    border-radius: 0.375rem;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Hide the default DataTable bouncing dots */
.dataTables_wrapper > .dataTables_processing > div:last-child {
    display: none !important;
}

/* Navbar icon buttons — Vuexy style */
#layout-navbar .navbar-nav .btn-text-secondary {
    color: var(--bs-secondary-color);
    background: transparent;
    border: none;
    width: 2.375rem;
    height: 2.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#layout-navbar .navbar-nav .btn-text-secondary:hover {
    background: rgba(var(--bs-secondary-rgb), 0.08);
}

/* Navbar search overlay */
.navbar-search-wrapper.search-input-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: var(--bs-card-bg, #fff);
    display: flex;
    align-items: center;
    padding: 0 1rem;
}
.navbar-search-wrapper.search-input-wrapper .input-group-text {
    background: transparent;
    border: none;
}
.navbar-search-wrapper.search-input-wrapper .search-input {
    font-size: 0.9375rem;
}
.navbar-search-wrapper.search-input-wrapper .cursor-pointer {
    cursor: pointer;
}

/* Navbar dropdown-notifications */
.dropdown-notifications .dropdown-menu {
    max-height: 25rem;
    overflow-y: auto;
}
.dropdown-notifications .dropdown-menu-header {
    background: transparent;
}

/* Vuexy toast alert (fixed top-right) */
.vuexy-toast-alert {
    top: 1rem;
    right: 1rem;
    left: auto;
    z-index: 99999;
    min-width: 300px;
    max-width: 450px;
    box-shadow: 0 0.25rem 1rem rgba(47, 43, 61, 0.16);
}

/* ===== RESPONSIVE FIXES ===== */

/* Responsive chart containers */
.chart-responsive {
    height: 500px;
}
@media (max-width: 767.98px) {
    .chart-responsive {
        height: 300px;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .chart-responsive {
        height: 400px;
    }
}

/* Navbar: hide shop selector icon on smaller tablets */
@media (max-width: 767.98px) {
    #shop-selector-form .select2-container {
        min-width: 150px !important;
    }
}

/* Toast alert on mobile */
@media (max-width: 575.98px) {
    .vuexy-toast-alert {
        min-width: auto;
        max-width: calc(100vw - 2rem);
        left: 1rem;
        right: 1rem;
    }
}

/* Dashboard filter buttons on mobile */
@media (max-width: 767.98px) {
    .dashboard-filter-button {
        margin-top: 0 !important;
    }
}

/* Card header btn-group wrapping */
.card-header .btn-group.flex-wrap .btn {
    border-radius: 0.25rem !important;
    margin: 1px;
}

/* Modals on mobile — full width */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem;
    }
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100vw - 1rem);
    }
}

/* Navbar dropdown on mobile */
@media (max-width: 575.98px) {
    .dropdown-notifications .dropdown-menu {
        min-width: calc(100vw - 2rem) !important;
        right: -1rem !important;
    }
}