/**
 * Bolan Sports — Mobile-First Responsive Layer
 * UI/UX only — no functional changes
 */

/* ─── Base: prevent horizontal overflow ─── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

.layout-wrapper,
.main-content,
.page-content,
.container-fluid {
    max-width: 100%;
}

/* ─── Touch-friendly targets ─── */
@media (max-width: 767.98px) {
    .btn:not(.btn-icon):not(.dropdown-toggle):not(.header-item),
    .form-control,
    .form-select,
    .selectize-input,
    .sp-search-input {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 38px;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .navbar-menu .nav-link.menu-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .page-link {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ─── Page spacing ─── */
@media (max-width: 767.98px) {
    .page-content {
        padding: calc(70px + 0.65rem) 0.65rem 48px !important;
    }

    .container-fluid {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
    }

    body.sp-popup-layout .page-content {
        padding: 0.5rem !important;
    }

    body.sp-popup-layout .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

@media (max-width: 575.98px) {
    .page-content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ─── Header (mobile) ─── */
@media (max-width: 767.98px) {
    #page-topbar .navbar-header {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .sp-topbar-brand-name {
        font-size: 0.95rem !important;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topnav-hamburger {
        min-width: 44px;
        min-height: 44px;
    }

    .header-profile-user {
        width: 34px;
        height: 34px;
    }

    .topbar-user .btn {
        padding: 0.25rem;
        min-height: 44px;
    }
}

@media (max-width: 575.98px) {
    .btn-sp-pos.sp-btn-mobile-icon {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem !important;
        border-radius: 12px !important;
    }

    .sp-header-icon-btn.sp-btn-mobile-icon {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ─── Sidebar / navigation drawer ─── */
@media (max-width: 767.98px) {
    .navbar-menu {
        width: min(280px, 88vw) !important;
    }

    .navbar-menu .navbar-nav .nav-link.menu-link {
        margin: 2px 8px;
        padding: 10px 12px !important;
        font-size: 0.875rem;
    }

    .navbar-menu .menu-dropdown .nav-link {
        padding-left: 2.25rem !important;
    }

    [data-layout=horizontal] .navbar-menu {
        max-height: calc(100dvh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ─── Dashboard ─── */
@media (max-width: 767.98px) {
    .sp-hero {
        padding: 1.1rem 1rem !important;
        margin-bottom: 1rem;
    }

    .sp-hero-title {
        font-size: 1.15rem !important;
    }

    .sp-hero-sub {
        font-size: 0.82rem;
        margin-bottom: 0.85rem;
    }

    .sp-hero-actions .btn {
        width: 100%;
        margin-right: 0 !important;
        justify-content: center;
    }

    .sp-dashboard-zone {
        padding: 0.5rem 0.25rem 0.25rem;
        border-radius: 12px;
    }

    .sp-kpi-grid {
        gap: 0.65rem;
    }

    .sp-kpi-card {
        padding: 1rem;
    }

    .sp-kpi-value {
        font-size: 1.35rem;
    }

    .sp-kpi-card::after {
        width: 72px;
        height: 72px;
        opacity: 0.07;
    }
}

/* ─── Cards & headings ─── */
@media (max-width: 767.98px) {
    .card {
        border-radius: 10px !important;
    }

    .card-body {
        padding: 1rem !important;
    }

    .card-header {
        padding: 0.85rem 1rem !important;
    }

    .card-header h3,
    .card-header h4,
    .card-header .card-title {
        font-size: 1.05rem !important;
        line-height: 1.35;
    }

    .card-header.d-flex.justify-content-between,
    .card-header.align-items-center.d-flex {
        flex-wrap: wrap;
        gap: 0.65rem;
    }
}

@media (max-width: 575.98px) {
    .card-header .row {
        flex-direction: column;
        gap: 0.65rem;
    }

    .card-header .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .card-header .d-flex.flex-row-reverse {
        flex-direction: row !important;
        justify-content: flex-start !important;
    }

    .card-header h3 {
        font-size: 1rem !important;
    }
}

/* ─── Forms: stack fixed columns on mobile ─── */
@media (max-width: 767.98px) {
    .container-fluid .col-1,
    .container-fluid .col-2,
    .container-fluid .col-3,
    .container-fluid .col-4,
    .container-fluid .col-5,
    .container-fluid .col-6,
    .container-fluid .col-7,
    .container-fluid .col-8,
    .container-fluid .col-9,
    .container-fluid .col-10,
    .container-fluid .col-11 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .form-group,
    .mb-3,
    .mb-2 {
        margin-bottom: 0.85rem !important;
    }

    .form-label,
    label {
        font-size: 0.85rem;
    }

    .input-group {
        flex-wrap: wrap;
    }

    .input-group > .form-control,
    .input-group > .form-select,
    .input-group > .btn {
        width: 100%;
        border-radius: 10px !important;
        margin-bottom: 0.35rem;
    }

    .selectize-control {
        width: 100% !important;
    }

    .selectize-dropdown {
        max-width: calc(100vw - 1.5rem);
    }
}

/* ─── Tables: scrollable containers ─── */
@media (max-width: 767.98px) {
    .table-responsive,
    .table-card {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        max-width: 100%;
    }

    .card-body > .table,
    .card-body form > .table,
    .card-body > form .table,
    .card-body .table-responsive > .table {
        display: table;
        width: 100%;
        min-width: 560px;
    }

    .card-body:has(> .table),
    .card-body:has(> form > .table),
    .card-body:has(.table:not(.table-responsive .table)) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dataTables_wrapper {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .dataTables_wrapper .table {
        min-width: 520px;
    }

    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        float: none !important;
        text-align: left !important;
        width: 100% !important;
        margin-bottom: 0.65rem;
    }

    div.dataTables_wrapper div.dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
        max-width: 100%;
    }

    div.dataTables_wrapper div.dataTables_length select {
        width: auto;
        min-width: 80px;
    }

    .dataTables_wrapper .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin-bottom: 0.65rem;
    }

    .dataTables_wrapper .dt-buttons .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    .table thead th {
        font-size: 0.7rem;
        padding: 0.65rem 0.5rem !important;
    }

    .table tbody td {
        padding: 0.65rem 0.5rem !important;
        font-size: 0.82rem;
    }
}

/* Dashboard product/customer tables — card-style rows on very small screens */
@media (max-width: 575.98px) {
    .sp-dashboard-card .table thead {
        display: none;
    }

    .sp-dashboard-card .table tbody tr {
        display: block;
        border: 1px solid var(--sp-border);
        border-radius: 10px;
        margin-bottom: 0.65rem;
        padding: 0.65rem;
        background: var(--sp-surface);
    }

    .sp-dashboard-card .table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        padding: 0.35rem 0 !important;
        border: none !important;
        text-align: right !important;
    }

    .sp-dashboard-card .table tbody td:first-child {
        flex-direction: column;
        align-items: flex-start;
        text-align: left !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.35rem;
        border-bottom: 1px dashed var(--sp-border) !important;
    }

    .sp-dashboard-card .table tbody td .text-muted {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .sp-dashboard-card .table tbody td h5 {
        margin-bottom: 0 !important;
        font-size: 0.9rem !important;
    }

    .sp-dashboard-card .table {
        min-width: 0 !important;
    }
}

/* ─── Modals & offcanvas ─── */
@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 0.5rem auto;
        max-width: calc(100% - 1rem);
    }

    .modal-content {
        border-radius: 12px !important;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 0.85rem 1rem !important;
    }

    .modal-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .modal-footer .btn {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 120px;
    }

    .offcanvas {
        max-width: min(100%, 320px);
    }

    #theme-settings-offcanvas.offcanvas {
        max-width: 100%;
    }
}

/* ─── Footer ─── */
@media (max-width: 575.98px) {
    .footer {
        text-align: center;
        padding: 1rem 0.5rem !important;
        font-size: 0.78rem;
    }

    .footer .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .footer .text-sm-end {
        text-align: center !important;
        margin-top: 0.35rem;
    }
}

/* ─── Auth / login ─── */
@media (max-width: 767.98px) {
    .auth-page-content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .auth-page-content .card-body {
        padding: 1.25rem 1rem !important;
    }

    .sp-auth-brand {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .sp-auth-brand .text-start {
        text-align: center !important;
    }
}

/* ─── POS full-screen layout ─── */
@media (max-width: 991.98px) {
    body > .row[style*="100vh"] {
        height: auto !important;
        min-height: 100dvh;
        overflow: visible !important;
        flex-wrap: wrap;
    }

    body > .row[style*="100vh"] > .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 42vh;
    }

    body > .row[style*="100vh"] > .col-6 .row[style*="overflow-y"] {
        overflow-y: visible !important;
        max-height: none !important;
    }

    body > .row[style*="100vh"] .productsList {
        min-width: 480px;
    }

    body > .row[style*="100vh"] .col-12:has(.productsList),
    body > .row[style*="100vh"] form .col-12 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body > .row[style*="100vh"] .col-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    body > .row[style*="100vh"] .col-6 .selectize-control {
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    body > .row[style*="100vh"] .col-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    body > .row[style*="100vh"] .btn-sm {
        min-height: 44px;
        font-size: 0.78rem;
    }
}

/* ─── POS (popup / full page) ─── */
@media (max-width: 767.98px) {
    .pos-product-card .card-body {
        padding: 0.65rem !important;
    }

    .pos-product-img {
        height: 90px;
    }
}

/* ─── Floating controls ─── */
@media (max-width: 767.98px) {
    #back-to-top {
        width: 44px;
        height: 44px;
        right: 12px;
        bottom: 72px;
    }

    .customizer-setting {
        display: block !important;
        bottom: 12px !important;
        right: 12px !important;
    }

    .customizer-setting .btn-lg {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .customizer-setting .fs-22 {
        font-size: 1.15rem !important;
    }
}

/* ─── Reports & filters ─── */
@media (max-width: 767.98px) {
    .report-filter-card .row > [class*="col-"] {
        margin-bottom: 0.5rem;
    }

    .invoice-meta-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
    }

    .invoice-meta-item.text-end {
        text-align: left !important;
    }
}

/* ─── Tablet (768px – 991px) ─── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .sp-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .container-fluid .col-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ─── Tabs & alerts ─── */
@media (max-width: 575.98px) {
    .nav-tabs-custom {
        flex-direction: column;
        gap: 0.25rem;
    }

    .nav-tabs-custom .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        border-radius: 8px !important;
    }

    .alert ul {
        padding-left: 1.1rem;
        margin-bottom: 0;
    }
}

/* ─── Utility: safe area for notched phones ─── */
@supports (padding: max(0px)) {
    @media (max-width: 767.98px) {
        .page-content {
            padding-bottom: max(48px, env(safe-area-inset-bottom)) !important;
        }

        #page-topbar {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }
    }
}