/* =========================================================
   Global Mobile Screen Fixes
   Applies to all public + dashboard pages on phone/tablet
   ========================================================= */

:root {
    --mobile-safe-left: max(env(safe-area-inset-left, 0px), 0px);
    --mobile-safe-right: max(env(safe-area-inset-right, 0px), 0px);
}

@media (max-width: 1024px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body {
        padding-left: var(--mobile-safe-left);
        padding-right: var(--mobile-safe-right);
    }

    /* Keep layouts inside viewport */
    .container,
    .container-fluid {
        max-width: 100%;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .main-content,
    .content-body,
    .dashboard-content-wrapper {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }

    /* Avoid media overflow */
    img,
    svg,
    video,
    canvas,
    iframe {
        max-width: 100%;
        height: auto;
    }

    /* Table handling on mobile */
    body:not(.pos-page) .table-responsive,
    body:not(.pos-page) .dataTables_wrapper,
    body:not(.pos-page) .datatable-wrapper,
    body:not(.pos-page) .table-container,
    body:not(.pos-page) .card .table-responsive,
    body:not(.pos-page) .dashboard-card .table-responsive {
        width: 100%;
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

    body:not(.pos-page) .table {
        /* Keep full-width when table is small, but allow real horizontal width for dense data tables */
        width: max-content !important;
        min-width: 100% !important;
        table-layout: auto;
    }

    body:not(.pos-page) .table th,
    body:not(.pos-page) .table td {
        white-space: nowrap;
    }

    /* Prevent filter/action rows from forcing horizontal scroll */
    .content-body .d-flex,
    .main-content .d-flex,
    .dashboard-content-wrapper .d-flex {
        min-width: 0;
    }

    .content-body .btn-group,
    .main-content .btn-group,
    .dashboard-content-wrapper .btn-group,
    .content-body .input-group,
    .main-content .input-group,
    .dashboard-content-wrapper .input-group {
        max-width: 100%;
        flex-wrap: wrap;
    }

    /* Inside table cells, keep actions on one line and let table scroll instead of wrapping/overlapping */
    body:not(.pos-page) .table td .btn-group,
    body:not(.pos-page) .table td .btn-group-sm {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        max-width: none !important;
        white-space: nowrap !important;
    }

    .form-control,
    .form-select,
    .btn {
        max-width: 100%;
    }

    /* Keep dropdowns and modals inside viewport */
    .dropdown-menu {
        max-width: calc(100vw - 1rem) !important;
    }

    .modal-dialog {
        margin: 0.75rem auto;
        max-width: calc(100vw - 1.5rem);
    }

    /* If inline min-width exists, don't let it break mobile layout */
    .content-body [style*="min-width:"],
    .main-content [style*="min-width:"],
    .dashboard-content-wrapper [style*="min-width:"] {
        min-width: min(100%, 220px) !important;
    }
}

@media (max-width: 768px) {
    /* Make horizontal stat strips scroll instead of wrapping badly */
    .dashboard-stats-horizontal,
    .horizontal-stats-cards {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.75rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-stats-horizontal > *,
    .horizontal-stats-cards > * {
        flex: 0 0 210px;
        min-width: 210px;
    }

    .dashboard-stats-horizontal::-webkit-scrollbar,
    .horizontal-stats-cards::-webkit-scrollbar {
        display: none;
    }

    /* Common page headers */
    .page-header-section,
    .section-header {
        max-width: 100%;
        overflow: hidden;
    }

    .page-header-section h1,
    .content-header h1,
    .content-header h2,
    .content-header h3,
    .content-header h4 {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Dashboard tabs: always reachable on phone */
    .content-body [role="tablist"],
    .dashboard-content-wrapper [role="tablist"],
    .content-body .nav.nav-tabs,
    .dashboard-content-wrapper .nav.nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.45rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        padding-bottom: 0.15rem !important;
    }

    .content-body [role="tablist"]::-webkit-scrollbar,
    .dashboard-content-wrapper [role="tablist"]::-webkit-scrollbar,
    .content-body .nav.nav-tabs::-webkit-scrollbar,
    .dashboard-content-wrapper .nav.nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .content-body [role="tablist"] > li,
    .content-body [role="tablist"] > .nav-item,
    .content-body [role="tablist"] > .nav-link,
    .dashboard-content-wrapper [role="tablist"] > li,
    .dashboard-content-wrapper [role="tablist"] > .nav-item,
    .dashboard-content-wrapper [role="tablist"] > .nav-link,
    .content-body .nav.nav-tabs > li,
    .content-body .nav.nav-tabs > .nav-item,
    .content-body .nav.nav-tabs > .nav-link,
    .dashboard-content-wrapper .nav.nav-tabs > li,
    .dashboard-content-wrapper .nav.nav-tabs > .nav-item,
    .dashboard-content-wrapper .nav.nav-tabs > .nav-link {
        flex: 0 0 auto !important;
    }

    .content-body [role="tablist"] .nav-link,
    .dashboard-content-wrapper [role="tablist"] .nav-link,
    .content-body .nav.nav-tabs .nav-link,
    .dashboard-content-wrapper .nav.nav-tabs .nav-link {
        white-space: nowrap !important;
        min-height: 38px !important;
    }

    /* Profile/Settings tabs: avoid clipped/off-screen tabs on small phones */
    #profileTabs.profile-tabs-list,
    #settingsTabs.settings-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        padding-bottom: 0 !important;
    }

    #profileTabs.profile-tabs-list > .nav-item,
    #settingsTabs.settings-tabs > .nav-item {
        flex: 1 1 calc(50% - 0.35rem) !important;
        min-width: 0 !important;
    }

    #profileTabs.profile-tabs-list .nav-link,
    #settingsTabs.settings-tabs .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.35rem !important;
        width: 100% !important;
        min-height: 44px !important;
        white-space: nowrap !important;
        padding: 0.55rem 0.6rem !important;
    }
}

@media (max-width: 480px) {
    #profileTabs.profile-tabs-list > .nav-item,
    #settingsTabs.settings-tabs > .nav-item {
        flex-basis: 100% !important;
    }
}

@media (max-width: 576px) {
    .dashboard-stats-horizontal > *,
    .horizontal-stats-cards > * {
        flex-basis: 180px;
        min-width: 180px;
    }

    .content-body [style*="min-width:"],
    .main-content [style*="min-width:"],
    .dashboard-content-wrapper [style*="min-width:"] {
        min-width: 100% !important;
    }
}

/* =========================================================
   Cross-page mobile hardening (dashboard + public pages)
   Loaded last to reduce CSS conflicts from legacy files
   ========================================================= */
@media (max-width: 1024px) {
    /* Keep dashboard header below device status bar/notch */
    .content-header {
        top: var(--app-safe-top, 0px) !important;
    }

    /* Stable one-line mobile header layout with horizontal controls scroll */
    .content-header .content-header-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.6rem !important;
        min-width: 0 !important;
    }

    .content-header .content-header-title-group {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .content-header .dashboard-header-controls {
        flex: 0 1 auto !important;
        max-width: 62vw !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        gap: 0.35rem !important;
    }

    .content-header .dashboard-header-controls .btn,
    .content-header .dashboard-header-controls .dropdown > .btn {
        min-height: 34px !important;
    }

    .content-header .dashboard-header-controls .user-info-wrapper {
        display: none !important;
    }

    /* Public header overflow protection */
    .main-header {
        top: var(--app-safe-top, 0px) !important;
        padding-inline: 0 !important;
    }

    .header-container {
        min-width: 0 !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }

    .header-logo,
    .logo-text {
        min-width: 0 !important;
    }

    .brand-name,
    .brand-desc {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .header-actions {
        min-width: 0 !important;
        max-width: 58vw !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }

    /* Legacy/public header variant (includes/header.php) */
    .logo-bar {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .logo-bar .logo-text {
        min-width: 0 !important;
    }

    .mobile-menu-toggle {
        min-width: 40px !important;
        min-height: 40px !important;
        flex: 0 0 auto !important;
    }

    .main-nav {
        max-height: calc(100dvh - 64px - var(--app-safe-top, 0px)) !important;
        overflow-y: auto !important;
    }

    /* Common action bars/cards/buttons */
    .page-actions,
    .actions-toolbar,
    .toolbar-actions,
    .card-actions {
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }

    .btn,
    button,
    .form-control,
    .form-select,
    .form-input {
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .content-header {
        padding: 0.75rem !important;
    }

    .content-header h4 {
        font-size: 0.98rem !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .content-header small {
        display: none !important;
    }

    .content-header .dashboard-header-controls {
        max-width: 66vw !important;
    }

    .main-header .header-container {
        padding: 0.55rem 0.75rem !important;
    }

    .main-header .brand-name {
        font-size: 1rem !important;
    }

    .main-header .brand-desc {
        font-size: 0.66rem !important;
    }

    .main-header .header-actions {
        max-width: 64vw !important;
    }

    /* Better tap targets for mobile */
    .btn,
    button,
    .form-control,
    .form-select,
    .form-input {
        min-height: 40px !important;
    }
}

@media (max-width: 576px) {
    .content-header .dashboard-header-controls {
        max-width: 70vw !important;
    }

    .main-header .header-actions {
        max-width: 68vw !important;
    }

    .main-header .brand-desc {
        display: none !important;
    }
}

/* =========================================================
   Final mobile overrides (very small devices)
   - prevent header/control overlap on narrow phones
   - keep control groups readable in RTL/LTR
   ========================================================= */
@media (max-width: 768px) {
    .content-header .content-header-row {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .content-header .content-header-title-group {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .content-header .dashboard-header-controls {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: 64vw !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        justify-content: flex-start !important;
        padding-top: 0 !important;
        padding-bottom: 0.1rem !important;
    }
}

@media (max-width: 576px) {
    .content-header .dashboard-header-controls {
        flex-wrap: nowrap !important;
        gap: 0.25rem !important;
        max-width: 70vw !important;
    }

    .content-header .dashboard-header-controls .btn,
    .content-header .dashboard-header-controls .dropdown > .btn {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0.3rem 0.5rem !important;
        font-size: 0.75rem !important;
        line-height: 1.1 !important;
    }

    /* Keep card action buttons/icons stable on tiny phones */
    .card .btn,
    .dashboard-card .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.35rem !important;
        white-space: nowrap !important;
    }

    .card .btn i,
    .dashboard-card .btn i {
        position: static !important;
        margin: 0 !important;
        line-height: 1 !important;
        transform: none !important;
    }
}

/* Final dashboard header lock for phones: keep a single compact row */
@media (max-width: 768px) {
    .content-header {
        display: block !important;
        padding: 0.7rem 0.75rem !important;
    }

    .content-header .content-header-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.55rem !important;
        min-width: 0 !important;
    }

    .content-header .content-header-title-group {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 0.5rem !important;
        align-items: center !important;
    }

    .content-header .header-logo img {
        width: 34px !important;
        height: 34px !important;
    }

    .content-header h4 {
        margin: 0 !important;
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .content-header small {
        display: none !important;
    }

    .content-header .dashboard-header-controls {
        display: flex !important;
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: 64vw !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.28rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .content-header .dashboard-header-controls::-webkit-scrollbar {
        display: none;
    }

    .content-header .dashboard-header-controls .btn-sm,
    .content-header .dashboard-header-controls .dropdown > .btn {
        min-height: 32px !important;
        height: 32px !important;
        padding: 0.26rem 0.45rem !important;
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
    }

    /* User avatar dropdown must not be compressed like other small buttons */
    .content-header .dashboard-header-controls #dashboardUserDropdownBtn,
    .content-header .dashboard-header-controls .user-dropdown-trigger {
        min-height: 34px !important;
        height: auto !important;
        padding: 0.08rem !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        border-radius: 999px !important;
    }

    .content-header .dashboard-header-controls .user-avatar-header {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .content-header .dashboard-header-controls .user-avatar-header img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
}

/* Public pages: keep content below fixed header on phone/tablet */
@media (max-width: 900px) {
    body.public-page:not(.auth-page) {
        padding-top: calc(60px + var(--app-safe-top, 0px)) !important;
    }
}

@media (max-width: 480px) {
    body.public-page:not(.auth-page) {
        padding-top: calc(55px + var(--app-safe-top, 0px)) !important;
    }
}

/* Public about page first hero title was touching header on some phones */
@media (max-width: 768px) {
    body.about-page .about-hero-content {
        padding-top: calc(76px + var(--app-safe-top, 0px)) !important;
    }

    body.about-page .about-hero-title {
        margin-top: 1.6rem !important;
        line-height: 1.25 !important;
    }
}