/* =========================================================================
   XER2XLSXGANTT - 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 0.75rem !important;
    }

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

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

    /* 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-center.show {
        gap: 0.15rem;
    }

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

    /* Container / main content padding */
    #mainContent.container.main-content,
    #mainContent.container {
        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 0.5rem !important;
        height: 54px !important;
    }

    /* Hide the File / View / Export button group on phone.
       These exact same actions are already available inside the
       hamburger sidebar, so we don't lose functionality. */
    .header-nav-center,
    .header-nav-center.show {
        display: none !important;
    }

    /* 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: 66px !important;           /* just below the 54px 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-create-view-submenu,
    .header-view-subgroup {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        padding-left: 1rem !important;
    }

    /* ----- Main content ----- */
    #mainContent.container.main-content,
    #mainContent.container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 54px !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 {
        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,
    .nav-pills {
        flex-wrap: wrap !important;
    }

    /* 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;
    }
}