/* =========================================================================
   ConstructOS - Mobile & Tablet responsive overrides
   -------------------------------------------------------------------------
   This stylesheet ONLY adds mobile/tablet layout fixes. It does NOT change
   the desktop look & feel. All overrides are scoped behind media queries
   so that widths >= 1025px render exactly as before.
   =========================================================================*/

/* Global safety: never let the page scroll horizontally on small screens */
html,
body {
    max-width: 100%;
}

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

    /* Bootstrap containers shouldn't force horizontal scroll */
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 100% !important;
    }

    /* Any raw image/video shouldn't exceed the viewport */
    img,
    video,
    iframe,
    canvas {
        max-width: 100%;
        height: auto;
    }

    /* Tables wrap nicely inside a scroll container */
    .table-responsive,
    .table-wrapper {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }
}

/* =========================================================================
   Tablet (<= 1024px) - keep most of the desktop layout but trim spacing
   =========================================================================*/
@media (max-width: 1024px) {
    /* Reduce the huge header padding so logo + settings + user all fit */
    .help-header {
        padding: 0 !important;
    }

    .help-header-content {
        gap: 0.5rem;
        padding: 0 0.75rem;
    }

    .header-left {
        gap: 0.5rem;
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    /* The File / View / Export button group is awkward on touch devices.
       On tablet we leave it visible but tighten spacing so it fits. */
    .header-nav-scroll:has(.header-nav-center.show) {
        overflow: hidden;
    }

    .header-nav-center.show {
        gap: 0.15rem;
    }

    .header-nav-right {
        flex-shrink: 0;
    }

    .header-dropdown-btn,
    .header-export-btn,
    .header-schedule-btn,
    .header-schedule-chevron-btn {
        padding: 0.4rem 0.55rem !important;
    }

    /* Container / main content padding */
    #mainContent.container.main-content,
    #mainContent.container,
    #mainContent.container-fluid.main-content,
    #mainContent.container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #main-app-content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-top: 1rem !important;
    }

    /* Card bodies that are normally padded a lot */
    .card-body {
        padding: 1rem;
    }

    /* Documentation sidebar is 300px wide and fixed - it should collapse
       to an off-canvas drawer on tablets */
    #dynamic-content-area .help-main,
    #dynamic-content-inner .help-main {
        padding-right: 1.5rem !important;
        padding-left: 1rem !important;
        margin-left: 0 !important;
    }

    #dynamic-content-area aside.help-sidebar,
    #dynamic-content-inner aside.help-sidebar {
        width: 280px !important;
    }
}

/* =========================================================================
   Phone (<= 768px) - stack everything, hide desktop-only chrome
   =========================================================================*/
@media (max-width: 768px) {
    /* ----- Header ----- */
    .help-header {
        padding: 0 !important;
        height: 40px !important;
    }

    html.has-open-project-band .help-header {
        height: 62px !important;
    }

    .help-header-content {
        padding: 0 0.5rem;
    }

    /* Keep File / Schedule / Dashboard / Excel Gantt / Pivot Studio / Report Master / Schedule Animator / Reports / Tools in the header.
       Browser zoom reduces the layout viewport like a narrow window; hiding
       this block made most toolbar icons "disappear" while zoomed in. */
    .header-nav-center.show {
        flex-shrink: 0;
    }

    .header-nav-right {
        flex-shrink: 0;
    }

    .header-nav-scroll:has(.header-nav-center.show) {
        overflow: hidden;
    }

    /* Logo text shrinks - keep only icon + short name */
    .logo-text-app,
    .logo-text-full,
    .brand-text {
        display: none !important;
    }

    .help-logo img,
    .brand-logo {
        height: 28px;
        width: 28px;
        margin-right: 6px;
    }

    /* User dropdown: show only the icon + credits, hide name */
    .header-user-btn {
        padding: 0.35rem 0.5rem !important;
        gap: 0.4rem;
    }

    .header-user-name span {
        display: none !important;
    }

    .header-user-chevron {
        display: none !important;
    }

    .header-user-credits {
        font-size: 0.85rem;
    }

    /* Settings cog stays visible, make it a larger touch target */
    .header-settings-btn {
        width: 40px;
        height: 40px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Back-to-app button (if visible) gets compact */
    #back-to-app-btn {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.8rem !important;
    }

    #back-to-app-btn span {
        display: none;
    }

    /* ----- Sidebar toggle (hamburger menu) ----- */
    .sidebar-toggle {
        top: 52px !important;           /* just below the 40px header */
        left: 10px !important;
        padding: 9px 12px !important;
        font-size: 0.9rem !important;
        border-radius: 6px !important;
        z-index: 199;                   /* below header (200) but above content */
    }

    .sidebar-toggle span {
        /* keep the "Menu" label but allow hiding on super narrow screens */
    }

    /* When the sidebar drawer is open, overlay the backdrop and
       ensure the sidebar itself takes most of the screen */
    .app-sidebar {
        width: 82vw !important;
        max-width: 320px !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35) !important;
    }

    /* ----- Dropdown menus (File/View/Settings/User) ----- */
    /* Prevent dropdowns from being wider than the viewport */
    .header-dropdown-menu,
    .header-settings-menu,
    .header-user-menu {
        max-width: calc(100vw - 16px) !important;
        width: min(320px, calc(100vw - 16px)) !important;
        right: 8px !important;
        left: auto !important;
    }

    /* Sub-menus should stack below rather than fly out to the side (header menus).
       Excel Gantt uses #headerCreateViewSubmenu — keep absolute positioning there. */
    .header-create-view-submenu:not(#headerCreateViewSubmenu) {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        padding-left: 1rem !important;
    }
    #headerScheduleActivitiesSubmenu,
    #headerFileImportSubmenu,
    #headerFileExportSubmenu {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        padding-left: 0 !important;
        transform: none !important;
        margin-top: 0 !important;
    }
    #headerScheduleActivitiesSubmenu .header-schedule-activities-subgroup {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        padding-left: 1rem !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    #headerScheduleActivitiesSubmenu .header-schedule-layout-flyout {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        padding-left: 1rem !important;
        margin-top: 0 !important;
    }
    .header-view-subgroup {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        padding-left: 1rem !important;
    }
    #headerCreateViewSubmenu .header-view-subgroup {
        position: absolute !important;
        left: 100% !important;
        top: 0 !important;
        width: auto !important;
        min-width: 200px !important;
        max-width: min(280px, 85vw) !important;
        padding-left: 0 !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid #e5e7eb !important;
    }

    /* ----- Main content ----- */
    body.cpm-module-expanded #mainContent.container.main-content,
    body.cpm-module-expanded #mainContent.container,
    body.cpm-module-expanded #mainContent.container-fluid.main-content,
    body.cpm-module-expanded #mainContent.container-fluid {
        padding-top: 0 !important;
    }
    #mainContent.container.main-content,
    #mainContent.container,
    #mainContent.container-fluid.main-content,
    #mainContent.container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: var(--app-header-h, 28px) !important;
    }

    #main-app-content {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        margin-top: 0.5rem !important;
    }

    #main-app-content .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #main-app-content .col-md-10,
    #main-app-content .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

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

    /* App logo banner inside main card */
    .app-logo-banner {
        padding: 12px 14px !important;
    }

    /* ----- Tables & Gantt views: allow horizontal scroll ----- */
    #main-app-content table,
    #main-app-content .ag-root-wrapper,
    #main-app-content .view-card-body,
    #main-app-content .gantt-chart-container,
    #main-app-content .preview-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* View card toolbar wraps its buttons */
    .view-card-header-toolbar {
        gap: 0.35rem !important;
        padding: 0.5rem !important;
    }

    .view-card-header-toolbar .btn {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.8rem !important;
    }

    /* ----- Bootstrap modals: full-width with breathing room ----- */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }

    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl,
    .modal-dialog.modal-fullscreen {
        max-width: calc(100vw - 1rem) !important;
    }

    .modal-body {
        padding: 0.75rem !important;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
    }

    .modal-header,
    .modal-footer {
        padding: 0.6rem 0.75rem !important;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 120px;
    }

    /* ----- Form fields: make them comfortable on touch ----- */
    input.form-control,
    select.form-control,
    select.form-select,
    textarea.form-control {
        font-size: 16px;  /* prevents iOS zoom-on-focus */
        min-height: 40px;
    }

    .btn {
        min-height: 40px;
    }

    .btn-sm {
        min-height: 34px;
    }

    /* Bootstrap tab strips: let tabs wrap rather than cut off */
    .nav-tabs:not(.schedule-main-tabs-scroll),
    .nav-pills {
        flex-wrap: wrap !important;
    }

    /* Schedule workspace: keep dual side-by-side rails on dashboard; stack only on narrow phones */
    #schedule-workspace.schedule-workspace--dashboard-active #schedule-workspace-body.schedule-workspace-body {
        grid-template-columns: min(var(--schedule-workspace-nav-rail-w, 56px), 64px) minmax(0, 1fr);
    }
    #schedule-workspace.schedule-workspace--dashboard-active #schedule-workspace-nav-rail #schedule-main-tabs.nav {
        flex-direction: column !important;
    }
    @media (max-width: 640px) {
        #schedule-workspace-body.schedule-workspace-body {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto auto 1fr;
        }
        #schedule-workspace-nav-rail {
            grid-column: 1;
            grid-row: 1;
            width: 100%;
            --schedule-workspace-nav-rail-w: auto;
            border-right: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            padding: 0 0 0.5rem 0;
        }
        .schedule-workspace-nav-rail-handle {
            display: none;
        }
        .schedule-workspace-main {
            grid-column: 1;
            grid-row: 3;
        }
        body.dark-mode .schedule-workspace-nav-rail {
            border-bottom-color: rgba(255, 255, 255, 0.12);
        }
        #schedule-workspace-nav-rail #schedule-main-tabs.nav {
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            overflow-x: auto;
            padding-bottom: 0.15rem;
            -webkit-overflow-scrolling: touch;
        }
        #schedule-workspace-nav-rail .schedule-workspace-nav-item {
            flex: 0 0 auto;
            width: auto;
            min-width: 7.5rem;
        }
        /* Folder-tab merge: active icon extends down over rail border-bottom */
        #schedule-workspace-nav-rail .schedule-workspace-nav-item.is-active::after {
            top: auto;
            left: 0;
            right: 0;
            bottom: calc(-0.15rem - 0.5rem - 1px);
            width: auto;
            height: calc(0.15rem + 0.5rem + 2px);
        }
        #schedule-workspace-nav-rail .schedule-workspace-nav-item.is-active .schedule-workspace-nav-tab,
        #schedule-workspace-nav-rail .schedule-workspace-nav-tab.active {
            margin-right: 0;
            margin-bottom: calc(-0.15rem - 0.5rem - 1px);
            padding-right: 0.5rem;
            padding-bottom: calc(0.5rem + 0.15rem + 0.5rem + 1px);
            border-style: solid;
            border-color: rgba(0, 0, 0, 0.08);
            border-width: 1px 1px 0 1px;
            border-radius: 0.375rem 0.375rem 0 0;
        }
        body.dark-mode #schedule-workspace-nav-rail .schedule-workspace-nav-item.is-active .schedule-workspace-nav-tab,
        body.dark-mode #schedule-workspace-nav-rail .schedule-workspace-nav-tab.active {
            border-color: rgba(255, 255, 255, 0.12);
        }
    }

    /* Select2 widgets full-width */
    .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Tooltips are often wider than phones */
    .tooltip.wbs-rollup-tooltip .tooltip-inner,
    .tooltip.activity-color-tooltip .tooltip-inner,
    .tooltip.baseline-color-tooltip .tooltip-inner,
    .tooltip.time-interval-tooltip .tooltip-inner,
    .tooltip.text-angle-tooltip .tooltip-inner,
    .tooltip.timeline-range-tooltip .tooltip-inner {
        max-width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        width: auto !important;
    }

    /* Documentation layout: sidebar becomes drawer */
    #dynamic-content-area aside.help-sidebar,
    #dynamic-content-inner aside.help-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 280px !important;
    }

    #dynamic-content-area aside.help-sidebar.mobile-open,
    #dynamic-content-inner aside.help-sidebar.mobile-open {
        transform: translateX(0);
    }

    #dynamic-content-area .help-main,
    #dynamic-content-inner .help-main {
        margin-left: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* ----- Landing page hero / sections ----- */
    .hero h1 {
        font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
        line-height: 1.15 !important;
    }

    .hero .lead,
    .hero p.lead {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    .hero-logo-section img {
        height: 64px !important;
        width: 64px !important;
        margin-right: 10px !important;
    }

    /* Pricing / feature grids: one column */
    .pricing-grid,
    .pricing-cards,
    .features-grid,
    .intro-features-cards,
    .feature-showcase-item {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    /* Ensure modal-form dialogs in landing (login/signup) fit */
    #authModal .modal-dialog,
    #authModal .modal-content {
        margin: 0.5rem !important;
    }

    /* ----- Subscribe page pricing cards ----- */
    .pricing-container,
    .plans-grid,
    .plan-cards {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    /* ----- Account page two-column forms ----- */
    .account-layout,
    .account-content,
    .account-grid {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    /* ----- Footer / copyright rows ----- */
    footer .row,
    .landing-footer .row {
        text-align: center;
    }
}

/* =========================================================================
   Very small phones (<= 480px) - extra-compact tweaks
   =========================================================================*/
@media (max-width: 480px) {
    .sidebar-toggle span {
        display: none;          /* only show the hamburger icon */
    }

    .sidebar-toggle {
        padding: 8px 10px !important;
    }

    .header-user-credits span {
        font-size: 0.8rem;
    }

    .app-logo-text {
        font-size: 1.1rem !important;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
    }

    /* Scroll-to-top floating button */
    .scroll-to-top-btn {
        bottom: 1rem !important;
        right: 1rem !important;
        width: 40px !important;
        height: 40px !important;
    }
}

/* =========================================================================
   Touch-only improvements
   =========================================================================*/
@media (hover: none) and (pointer: coarse) {
    /* Enlarge small icon buttons */
    .btn-icon,
    .icon-btn,
    .header-settings-btn,
    .header-user-btn,
    .header-dropdown-btn,
    .header-export-btn {
        min-height: 40px;
    }

    /* Replace hover-only submenus with tap-friendly ones
       (the "lookahead-parent" hover submenu) */
    .lookahead-parent:focus-within .lookahead-submenu,
    .lookahead-parent.open .lookahead-submenu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Disable sticky hover states that get stuck after tapping */
    a:hover,
    button:hover {
        -webkit-tap-highlight-color: transparent;
    }
}

/* =========================================================================
   Landscape phones (short height) - tweak header-heavy layouts
   =========================================================================*/
@media (max-height: 500px) and (max-width: 1024px) {
    .modal-body {
        max-height: calc(100vh - 110px);
    }

    .app-sidebar {
        overflow-y: auto;
    }
}

/* =========================================================================
   Instant modals (all pages that load this file): no blur, no fade animation
   ========================================================================= */
.modal.fade .modal-dialog,
.modal.fade,
.modal-backdrop.fade {
    transition: none !important;
}

.modal.fade .modal-dialog {
    transform: none !important;
}

.modal-backdrop,
.modal-backdrop.show,
.modal-backdrop.fade,
.modal-backdrop.fade.show {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.modal-backdrop.fade {
    opacity: 1;
}

#columnSelectorModal.show .column-item,
#columnSelectorModal.show .list-group-item,
#filtersModal.show .list-group-item {
    transition: none !important;
}

.zen-preparing-overlay,
.pivot-studio-loading,
.zoom-modal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (max-width: 768px) {
    :root {
        --app-project-status-bar-h: 20px;
    }

    html.app-project-status-visible {
        --app-project-status-bar-h: 20px;
    }

    #app-project-status-bar .app-status-role-wrap {
        flex: 0 1 180px;
        min-width: 120px;
        max-width: 220px;
    }

    #app-project-status-bar .app-status-val {
        max-width: 120px;
    }

    .app-project-status-bar-inner {
        gap: 8px;
        padding: 0 8px;
    }

    body.dark-mode .schedule-workspace-nav-rail {
        background: var(--bg-secondary, #252525);
        color: var(--text-primary, #f1f3f5);
    }

    body.dark-mode #app-project-status-bar,
    body.dark-mode .app-project-status-bar-inner {
        background: var(--bg-secondary, #252525);
        color: var(--text-primary, #f1f3f5);
        border-color: var(--border, #3a3a3a);
    }
}