/* ==========================================================================
   SUPPREMO MOBILE LAYOUT REBUILD
   Final layout layer loaded after existing styles.
   CSS-only UI layout except the existing mobile-shell.js menu helper.
   ========================================================================== */

@media (min-width: 992px) {
    html,
    body,
    #app {
        overflow-x: visible !important;
    }

    #main-wrapper {
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    main,
    main.py-4 {
        width: auto !important;
        max-width: none !important;
        min-height: auto !important;
        margin: 0 !important;
        padding-top: 1.5rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .topbar {
        position: relative !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 50 !important;
        width: auto !important;
        height: auto !important;
        min-height: 50px !important;
        box-shadow: none !important;
        transform: none !important;
        animation: none !important;
    }

    body.sticky header.topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        z-index: 50 !important;
    }

    .topbar .navbar,
    .topbar .top-navbar {
        min-height: 50px !important;
        height: auto !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0 !important;
        overflow: visible !important;
    }

    .topbar .navbar-header {
        width: auto !important;
        min-width: 220px !important;
        max-width: none !important;
        height: 60px !important;
        padding: 7px 0 !important;
        margin: 0 !important;
        line-height: 45px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .topbar .navbar-brand {
        height: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .topbar .navbar-brand img,
    .topbar #logo_web {
        width: 100% !important;
        max-width: 180px !important;
        max-height: 46px !important;
        object-fit: contain !important;
    }

    #mobileMenuToggle .mb-toggle,
    #mobileMenuToggle .nav-toggler {
        display: none !important;
    }

    #mobileMenuToggle .sidebartoggler {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
    }

    .topbar .navbar-collapse.sidebar-nav {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex: 1 1 auto !important;
        overflow: visible !important;
    }

    .topbar .header-user-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding-left: 20px !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    .topbar .navbar-nav.my-lg-0,
    .topbar .multi-service-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .admin-mobile-backdrop,
    .mobile-menu-overlay,
    .mobile-menu-panel {
        display: none !important;
    }
}

@media (max-width: 991px) {
    :root {
        --suppremo-mobile-header: 112px;
        --suppremo-mobile-gap: 10px;
        --suppremo-shell-bg: #f5f7fb;
        --suppremo-header-bg: var(--admin-panel-color, #101827);
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    html,
    body,
    #app {
        width: 100% !important;
        max-width: 100vw !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        background: var(--suppremo-shell-bg) !important;
        -webkit-text-size-adjust: 100% !important;
    }

    body {
        font-size: 14px !important;
        line-height: 1.45 !important;
        color: #1f2937 !important;
    }

    body.admin-mobile-menu-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

    #main-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        min-height: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    main,
    main.py-4,
    .page-wrapper,
    .content-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: calc(var(--suppremo-mobile-header) + 10px) 10px 18px !important;
        overflow-x: hidden !important;
        background: var(--suppremo-shell-bg) !important;
    }

    .topbar,
    body.sticky header.topbar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: var(--suppremo-mobile-header) !important;
        min-height: var(--suppremo-mobile-header) !important;
        z-index: 1100 !important;
        background: var(--suppremo-header-bg) !important;
        box-shadow: 0 6px 20px rgba(15, 23, 42, .22) !important;
        transform: none !important;
        animation: none !important;
    }

    .topbar .navbar,
    .topbar .top-navbar {
        width: 100% !important;
        height: var(--suppremo-mobile-header) !important;
        min-height: var(--suppremo-mobile-header) !important;
        padding: 8px 8px 9px !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: 44px minmax(86px, 108px) minmax(0, 1fr) 42px !important;
        grid-template-rows: 46px 40px !important;
        gap: 7px !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .topbar .navbar-header {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
        width: auto !important;
        max-width: none !important;
        height: 46px !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: 44px minmax(86px, 108px) !important;
        align-items: center !important;
        gap: 7px !important;
        background: transparent !important;
        overflow: visible !important;
        line-height: 1 !important;
    }

    #mobileMenuToggle,
    .sidebar-toggle {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 44px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        justify-self: start !important;
    }

    #mobileMenuToggle .nav-item,
    #mobileMenuToggle .mb-toggle {
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
    }

    #mobileMenuToggle .sidebartoggler {
        display: none !important;
    }

    #mobileMenuToggle .nav-toggler,
    #mobileMenuToggle .hidden-md-up {
        position: relative !important;
        z-index: 1112 !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
        background: rgba(255,255,255,.14) !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.10) !important;
        line-height: 1 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    #mobileMenuToggle .nav-toggler i {
        color: #fff !important;
        font-size: 24px !important;
        line-height: 1 !important;
        pointer-events: none !important;
    }

    .topbar .navbar-brand {
        grid-column: 2 !important;
        grid-row: 1 !important;
        height: 46px !important;
        max-width: 108px !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    .topbar .navbar-brand b {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        line-height: 1 !important;
    }

    .topbar .navbar-brand img,
    .topbar #logo_web {
        display: block !important;
        width: auto !important;
        max-width: 104px !important;
        max-height: 34px !important;
        object-fit: contain !important;
    }

    .topbar .navbar-brand .light-logo {
        display: none !important;
    }

    .topbar .navbar-collapse.sidebar-nav {
        display: contents !important;
    }

    .topbar .multi-service-nav {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .topbar .navbar-nav.my-lg-0 {
        grid-column: 4 !important;
        grid-row: 1 !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .topbar .multi-service-nav .nav-item,
    .topbar .multi-service-nav #activeSection {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .topbar .multi-service-nav #activeSectionLink,
    .topbar .navbar-nav.my-lg-0 .nav-link {
        height: 42px !important;
        min-height: 42px !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        color: #fff !important;
        background: rgba(255,255,255,.11) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .topbar .multi-service-nav #activeSectionLink {
        width: min(150px, 100%) !important;
        justify-content: flex-start !important;
    }

    .topbar .multi-service-nav #activeSectionLogo {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    .topbar .multi-service-nav #activeSectionName {
        display: inline-block !important;
        min-width: 0 !important;
        max-width: 96px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
    }

    .topbar .navbar-nav.my-lg-0 .profile-pic,
    .topbar .navbar-nav.my-lg-0 .dropdown-toggle img {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .topbar #language_dropdown_box {
        display: none !important;
    }

    .topbar .header-user-menu {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 7px !important;
    }

    .topbar .header-user-menu::-webkit-scrollbar {
        display: none !important;
    }

    .topbar .header-user-menu .nav-item {
        flex: 0 0 auto !important;
        display: flex !important;
        height: 38px !important;
        margin: 0 !important;
    }

    .topbar .header-user-menu .nav-link {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        border-radius: 11px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        color: #fff !important;
        background: rgba(255,255,255,.11) !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }

    .topbar .header-user-menu .nav-link i {
        font-size: 17px !important;
        line-height: 1 !important;
    }

    .topbar .header-user-menu .hide-menu {
        display: inline-block !important;
        max-width: 118px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .topbar .dropdown-menu {
        z-index: 1130 !important;
        border: 0 !important;
        border-radius: 12px !important;
        box-shadow: 0 18px 46px rgba(15, 23, 42, .26) !important;
        overflow: hidden !important;
    }

    .topbar .dropdown-menu.dropdown-menu-right,
    .topbar .navbar-nav.my-lg-0 .dropdown-menu {
        position: fixed !important;
        top: calc(var(--suppremo-mobile-header) + 6px) !important;
        right: 8px !important;
        left: auto !important;
        width: min(290px, calc(100vw - 16px)) !important;
        max-height: calc(100dvh - var(--suppremo-mobile-header) - 18px) !important;
        overflow-y: auto !important;
    }

    .topbar .dropdown-menu.dropdown-service {
        position: fixed !important;
        top: calc(var(--suppremo-mobile-header) + 6px) !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-height: calc(100dvh - var(--suppremo-mobile-header) - 18px) !important;
        overflow-y: auto !important;
    }

    .dropdown-service_inner {
        max-width: 100% !important;
        padding: 14px !important;
    }

    #sections_header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .left-sidebar {
        display: block !important;
        visibility: visible !important;
        position: fixed !important;
        top: var(--suppremo-mobile-header) !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(330px, 90vw) !important;
        height: calc(100dvh - var(--suppremo-mobile-header)) !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 1115 !important;
        background: var(--suppremo-header-bg) !important;
        box-shadow: 18px 0 42px rgba(15, 23, 42, .32) !important;
        transform: translate3d(-106%, 0, 0) !important;
        transition: transform .22s ease !important;
        overflow: hidden !important;
        will-change: transform !important;
    }

    body.admin-mobile-menu-open .left-sidebar,
    body.show-sidebar .left-sidebar {
        transform: translate3d(0, 0, 0) !important;
    }

    .admin-mobile-backdrop {
        display: block !important;
        position: fixed !important;
        inset: var(--suppremo-mobile-header) 0 0 0 !important;
        z-index: 1110 !important;
        background: rgba(15, 23, 42, .48) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .22s ease, visibility .22s ease !important;
    }

    body.admin-mobile-menu-open .admin-mobile-backdrop,
    body.show-sidebar .admin-mobile-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .left-sidebar .scroll-sidebar,
    .left-sidebar .slimScrollDiv {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        background: transparent !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .left-sidebar .sidebar-search {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        padding: 12px !important;
        margin: 0 !important;
        background: var(--suppremo-header-bg) !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

    .left-sidebar .sidebar-search input {
        width: 100% !important;
        height: 42px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        background: rgba(255,255,255,.10) !important;
        color: #fff !important;
        padding: 8px 12px !important;
    }

    .left-sidebar .sidebar-search input::placeholder {
        color: rgba(255,255,255,.68) !important;
    }

    .left-sidebar .sidebar-nav {
        width: 100% !important;
        padding: 6px 0 24px !important;
        background: transparent !important;
    }

    .left-sidebar .sidebar-nav ul,
    .left-sidebar .sidebar-nav li {
        width: 100% !important;
        max-width: 100% !important;
    }

    .left-sidebar .sidebar-nav ul li {
        border-bottom: 1px solid rgba(255,255,255,.055) !important;
    }

    .left-sidebar .sidebar-nav ul li a {
        min-height: 46px !important;
        padding: 12px 15px !important;
        display: flex !important;
        align-items: center !important;
        gap: 11px !important;
        color: rgba(255,255,255,.92) !important;
        white-space: normal !important;
        word-break: normal !important;
        line-height: 1.25 !important;
        text-decoration: none !important;
    }

    .left-sidebar .sidebar-nav ul li a:hover,
    .left-sidebar .sidebar-nav ul li.active > a,
    .left-sidebar .sidebar-nav ul li a.active {
        background: rgba(255,255,255,.11) !important;
        color: #fff !important;
    }

    .left-sidebar .sidebar-nav ul li a i {
        flex: 0 0 23px !important;
        min-width: 23px !important;
        margin: 0 !important;
        color: rgba(255,255,255,.82) !important;
        text-align: center !important;
        font-size: 18px !important;
    }

    .left-sidebar .sidebar-nav ul li a .hide-menu {
        min-width: 0 !important;
        color: inherit !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    .left-sidebar .nav-subtitle {
        padding: 17px 15px 7px !important;
        margin: 0 !important;
        color: rgba(255,255,255,.54) !important;
        border-bottom: 0 !important;
    }

    .left-sidebar .nav-subtitle-span {
        color: rgba(255,255,255,.54) !important;
        font-size: 10px !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
    }

    .mobile-menu-overlay,
    .mobile-menu-panel {
        display: none !important;
    }

    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    .row > [class*="col-"],
    .col,
    .col-auto {
        padding-left: 6px !important;
        padding-right: 6px !important;
        min-width: 0 !important;
    }

    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .card,
    .white-box,
    .panel,
    .box,
    .card-box,
    .card-box-with-icon {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 14px rgba(15, 23, 42, .08) !important;
    }

    .card-body,
    .white-box,
    .panel-body,
    .box-body {
        padding: 12px !important;
    }

    .card-header,
    .panel-heading,
    .page-titles,
    .page-title {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
        padding: 12px !important;
    }

    .page-titles h1,
    .page-titles h2,
    .page-titles h3,
    .card-header h1,
    .card-header h2,
    .card-header h3 {
        width: 100% !important;
        margin: 0 !important;
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    .breadcrumb {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        font-size: 12px !important;
    }

    .table-responsive,
    .table-wrap,
    .responsive-table,
    .dataTables_wrapper,
    .card-body:has(table),
    .white-box:has(table) {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table,
    .table,
    table.dataTable {
        width: 100% !important;
        min-width: 760px !important;
        border-collapse: collapse !important;
    }

    .table th,
    .table td,
    table.dataTable th,
    table.dataTable td {
        white-space: nowrap !important;
        vertical-align: middle !important;
        padding: 9px 10px !important;
        font-size: 13px !important;
    }

    .table td.address-list,
    .table td .address,
    .table td .description {
        white-space: normal !important;
        min-width: 180px !important;
    }

    .table td.action-btn,
    .table td.vendor-action-btn,
    .table td:last-child {
        min-width: 112px !important;
    }

    .table td.action-btn a,
    .table td.vendor-action-btn a,
    .table td .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 34px !important;
        min-height: 34px !important;
        margin: 2px !important;
        padding: 6px 8px !important;
    }

    .dataTables_wrapper .row,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate,
    .dt-buttons {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        float: none !important;
        text-align: left !important;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    form,
    .form-horizontal,
    .form-body {
        width: 100% !important;
        max-width: 100% !important;
    }

    .form-group,
    .input-group,
    .form-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .form-group.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    label,
    .control-label {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 6px !important;
        white-space: normal !important;
    }

    input,
    select,
    textarea,
    .form-control,
    .custom-select,
    .select2-container,
    .chosen-container,
    .bootstrap-tagsinput {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .select2-container .select2-selection,
    .chosen-container .chosen-single,
    .chosen-container .chosen-choices {
        min-height: 40px !important;
    }

    .select2-dropdown,
    .chosen-container .chosen-drop,
    .daterangepicker,
    .datepicker,
    .bootstrap-timepicker-widget {
        max-width: calc(100vw - 16px) !important;
        z-index: 1140 !important;
    }

    .form-check,
    .custom-control,
    .radio,
    .checkbox {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        min-width: 0 !important;
        white-space: normal !important;
    }

    .btn,
    button,
    .button,
    .btn-group,
    .button-group,
    .action-btn,
    .vendor-action-btn,
    .dt-buttons {
        max-width: 100% !important;
        flex-wrap: wrap !important;
        white-space: normal !important;
    }

    .btn-group,
    .button-group,
    .d-flex {
        gap: 7px !important;
    }

    form .btn-primary,
    form .btn-success,
    form .btn-warning,
    form .btn-danger,
    form .btn-info,
    form button[type="submit"] {
        min-height: 40px !important;
    }

    img,
    video,
    canvas,
    iframe {
        max-width: 100% !important;
    }

    .dropify-wrapper,
    .image-upload,
    .image-preview,
    .upload-box,
    .fileinput,
    .fileinput-preview {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .dropify-wrapper {
        min-height: 150px !important;
    }

    #map,
    #sectionMap,
    #map_canvas,
    .map-container,
    .leaflet-container,
    .google-map,
    .gmap_canvas {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 240px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .modal {
        padding-right: 0 !important;
    }

    .modal-dialog {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
    }

    .modal-content {
        max-height: calc(100dvh - 16px) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .modal-header,
    .modal-footer {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    .modal-body {
        max-height: calc(100dvh - 150px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px !important;
    }

    .nav,
    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .nav::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar {
        display: none !important;
    }

    .nav .nav-item,
    .nav .nav-link {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .pull-right,
    .float-right {
        float: none !important;
    }
}

@media (max-width: 575px) {
    :root {
        --suppremo-mobile-header: 108px;
    }

    main,
    main.py-4,
    .page-wrapper,
    .content-wrapper {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .topbar .navbar,
    .topbar .top-navbar {
        padding: 7px 6px 8px !important;
        grid-template-columns: 42px minmax(66px, 84px) minmax(0, 1fr) 40px !important;
        grid-template-rows: 44px 38px !important;
        gap: 6px !important;
    }

    .topbar .navbar-header {
        height: 44px !important;
        grid-template-columns: 42px minmax(66px, 84px) !important;
        gap: 6px !important;
    }

    #mobileMenuToggle,
    .sidebar-toggle,
    #mobileMenuToggle .nav-item,
    #mobileMenuToggle .mb-toggle,
    #mobileMenuToggle .nav-toggler,
    #mobileMenuToggle .hidden-md-up {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }

    .topbar .navbar-brand {
        height: 44px !important;
        max-width: 84px !important;
    }

    .topbar .navbar-brand img,
    .topbar #logo_web {
        max-width: 80px !important;
        max-height: 30px !important;
    }

    .topbar .multi-service-nav,
    .topbar .navbar-nav.my-lg-0 {
        height: 44px !important;
    }

    .topbar .multi-service-nav #activeSectionLink,
    .topbar .navbar-nav.my-lg-0 .nav-link {
        height: 40px !important;
        min-height: 40px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .topbar .multi-service-nav #activeSectionLink {
        width: min(120px, 100%) !important;
    }

    .topbar .multi-service-nav #activeSectionLogo {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
    }

    .topbar .multi-service-nav #activeSectionName {
        max-width: 70px !important;
    }

    .topbar .header-user-menu {
        height: 38px !important;
        min-height: 38px !important;
    }

    .topbar .header-user-menu .nav-item,
    .topbar .header-user-menu .nav-link {
        height: 36px !important;
        min-height: 36px !important;
    }

    .topbar .header-user-menu .hide-menu {
        max-width: 92px !important;
    }

    .table,
    table,
    table.dataTable {
        min-width: 700px !important;
    }

    .card-body,
    .white-box,
    .panel-body,
    .box-body {
        padding: 10px !important;
    }

    .btn {
        min-height: 38px !important;
    }
}


/* ==========================================================================
   SUPPREMO MOBILE HEADER ORDER STATUS FIX 2026-05-04
   Header control order and mobile dashboard chart sizing. UI only.
   ========================================================================== */

@media (max-width: 991px) {
    .topbar .navbar,
    .topbar .top-navbar {
        grid-template-columns: 48px minmax(96px, 124px) minmax(0, 1fr) 44px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .topbar .navbar-header {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .sidebar-toggle {
        order: 1 !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: visible !important;
    }

    .sidebar-toggle > .nav-item:not(.mb-toggle) {
        display: none !important;
    }

    .sidebar-toggle .mb-toggle,
    .sidebar-toggle .mb-toggle .nav-link,
    .sidebar-toggle .nav-toggler,
    .sidebar-toggle .hidden-md-up {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .sidebar-toggle .nav-toggler {
        position: relative !important;
        z-index: 1112 !important;
        border-radius: 12px !important;
        color: #fff !important;
        background: rgba(255, 255, 255, .14) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important;
        line-height: 1 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    .sidebar-toggle .nav-toggler i {
        color: #fff !important;
        font-size: 24px !important;
        line-height: 1 !important;
        pointer-events: none !important;
    }

    .topbar .navbar-brand {
        order: 2 !important;
        flex: 0 1 124px !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: auto !important;
        max-width: 124px !important;
        min-width: 0 !important;
        height: 46px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    .topbar .navbar-brand b {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    .topbar .navbar-brand img,
    .topbar #logo_web {
        width: auto !important;
        max-width: 116px !important;
        max-height: 34px !important;
        object-fit: contain !important;
    }

    .order-status-overview-card,
    .card:has(#order_status) {
        overflow: hidden !important;
    }

    .order-status-overview-card .card-header,
    .card:has(#order_status) .card-header {
        padding: 18px 16px 12px !important;
    }

    .order-status-overview-card .card-title,
    .card:has(#order_status) .card-title {
        font-size: 20px !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }

    .order-status-overview-card .card-header p,
    .card:has(#order_status) .card-header p {
        font-size: 14px !important;
        line-height: 1.45 !important;
        white-space: normal !important;
    }

    .order-status-overview-body,
    .card:has(#order_status) .card-body {
        padding: 10px 10px 18px !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    #order_status,
    .card canvas#order_status {
        --suppremo-order-status-size: min(300px, calc(100vw - 82px));
        display: block !important;
        width: var(--suppremo-order-status-size) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: var(--suppremo-order-status-size) !important;
        max-height: var(--suppremo-order-status-size) !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 575px) {
    .topbar .navbar,
    .topbar .top-navbar {
        grid-template-columns: 46px minmax(88px, 116px) minmax(0, 1fr) 42px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .sidebar-toggle,
    .sidebar-toggle .mb-toggle,
    .sidebar-toggle .mb-toggle .nav-link,
    .sidebar-toggle .nav-toggler,
    .sidebar-toggle .hidden-md-up {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
    }

    .topbar .navbar-brand {
        max-width: 116px !important;
        height: 44px !important;
    }

    .topbar .navbar-brand img,
    .topbar #logo_web {
        max-width: 108px !important;
        max-height: 31px !important;
    }

    #order_status,
    .card canvas#order_status {
        --suppremo-order-status-size: min(286px, calc(100vw - 70px));
    }
}

@media (max-width: 360px) {
    .topbar .navbar-brand {
        max-width: 100px !important;
    }

    .topbar .navbar-brand img,
    .topbar #logo_web {
        max-width: 94px !important;
    }

    #order_status,
    .card canvas#order_status {
        --suppremo-order-status-size: min(260px, calc(100vw - 56px));
    }
}