/* Final mobile layout layer: one app viewport, one page scroller, contained sheets. */
:root {
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-safe-left: env(safe-area-inset-left, 0px);
    --app-safe-right: env(safe-area-inset-right, 0px);
    /* The dock is exactly the buttons' row. iOS already keeps its own inset below the
       layout viewport in installed webapps (innerHeight < screen.height), so adding
       safe-area here produced a second, empty strip. */
    --mobile-dock-buttons: 56px;
    --mobile-dock-height: var(--mobile-dock-buttons);
}
#mobile-sidebar-backdrop, #mobile-modal-close, .mobile-calendar-settings { display: none; }
.gb-panel-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gb-panel-tabs .gb-panel-tab { min-width: 0; flex-direction: column; font-size: 11px; padding: 10px 4px; gap: 4px; }
.task-detail-heading { gap: 12px; }
.task-detail-heading-main, .task-detail-heading-main > div { min-width: 0; }
.task-detail-title-actions { flex-wrap: wrap; }
.task-detail-title-actions #task-edit-name { width: 100% !important; min-width: 0 !important; flex: 1 1 240px; }
.task-detail-heading p { overflow-wrap: anywhere; }
.modal-content:has(.task-detail-heading) .grid-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 300px) !important; }
.modal-content .task-main-info, .modal-content .task-sidebar { min-width: 0; }
@media (max-width: 1024px) {
    html { font-size: 16px; -webkit-text-size-adjust: 100%; background: var(--bg-dark) !important; }
    body { background: var(--bg-dark) !important; }
    html, body { position: fixed !important; inset: 0; height: 100% !important; width: 100% !important; overflow: hidden !important; }
    .app-container { height: var(--mobile-viewport-height, 100dvh) !important; max-height: var(--mobile-viewport-height, 100dvh) !important; min-width: 0; }
    .app-container .main-content {
        min-height: 0; min-width: 0; width: 100% !important; height: 100% !important;
        padding: 0 0 var(--mobile-dock-height) !important; overflow: hidden !important; box-shadow: none !important;
    }
    .app-container .top-bar {
        flex: 0 0 auto; min-width: 0; gap: 8px; height: auto !important;
        padding: calc(8px + var(--app-safe-top)) calc(12px + var(--app-safe-right)) 8px calc(12px + var(--app-safe-left)) !important;
    }
    .top-bar-left, .view-title { flex: 1; min-width: 0; }
    .top-bar-left { display: flex !important; align-items: center; gap: 8px; }
    .view-title h1 { font-size: 18px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .top-bar-actions { flex: 0 0 auto; gap: 6px !important; }
    #mobile-menu-toggle { display: inline-flex !important; flex: 0 0 44px; }
    .app-container .view-content {
        flex: 1 1 0; min-height: 0; min-width: 0; height: auto !important; max-height: none !important;
        padding: 12px calc(12px + var(--app-safe-right)) 20px calc(12px + var(--app-safe-left)) !important;
        overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch; scroll-padding-block: 12px 24px;
    }
    .view-content > *, .modal-content > * { min-width: 0; max-width: 100%; }
    .view-content h1, .view-content h2, .view-content h3, .modal-content h1, .modal-content h2, .modal-content h3 { overflow-wrap: anywhere; }
    .view-content button:not(.whiteboard-content button), .modal-content button,
    .top-bar button, .sidebar button, .view-content select:not(.whiteboard-content select), .modal-content select {
        min-height: 44px !important; min-width: 44px; height: auto !important; touch-action: manipulation;
    }
    .view-content .btn, .modal-content .btn { white-space: normal; line-height: 1.35; }
    .top-bar .btn-square, .modal-content .btn-square { width: 44px !important; height: 44px !important; flex-shrink: 0; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.sticky-note-editor),
    textarea:not(.sticky-note-editor), select {
        font-size: 16px !important; min-width: 0; max-width: 100%; min-height: 44px !important;
    }
    .modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .modal-content select { height: 44px !important; }
    #view-container select:not(.whiteboard-content select), #modal-container .modal-content select, #modal-container .modal-content select.status-badge {
        -webkit-appearance: none !important; appearance: none !important; min-height: 44px !important; height: 44px !important;
        padding-right: 28px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2394a3b8' stroke-width='2'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important; background-position: right 9px center !important;
    }
    .modal-content textarea { height: auto !important; min-height: 110px !important; }
    input[style*="opacity: 0"] { min-height: 0 !important; height: 100% !important; }
    .mobile-checkbox-control { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; min-width: 44px; min-height: 44px; cursor: pointer; }
    .mobile-checkbox-control input { width: 24px !important; height: 24px !important; margin: 0 !important; flex: 0 0 24px; }
    .modal-content label:has(> input[type="checkbox"]) { min-height: 44px; }
    .modal-content label > input[type="checkbox"] { width: 24px !important; height: 24px !important; flex-shrink: 0; }
    button:focus-visible, a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

    /* Full menu restores access to WhiteBoard, Timeline, folders, trash and settings. */
    .app-container .sidebar {
        display: flex !important; position: fixed !important; top: 0 !important; left: 0 !important; bottom: auto !important;
        width: min(340px, calc(100vw - 48px)) !important; min-width: 0 !important; max-width: calc(100vw - 48px) !important;
        height: var(--mobile-viewport-height, 100dvh) !important; padding: var(--app-safe-top) 0 var(--app-safe-bottom) !important;
        background: var(--bg-sidebar); z-index: 4000; visibility: hidden; transform: translateX(-105%);
        transition: transform 180ms ease, visibility 180ms; overflow: hidden;
    }
    .app-container .sidebar.mobile-active { visibility: visible; transform: none; }
    .sidebar.mobile-active::before { display: none !important; }
    .sidebar .sidebar-header, .sidebar .sidebar-footer { display: block !important; padding: 12px !important; flex-shrink: 0; }
    .sidebar .sidebar-header .logo span { display: inline !important; }
    .sidebar .sidebar-close-btn { position: static !important; display: flex !important; width: 44px; height: 44px; }
    .sidebar .sidebar-nav { min-height: 0; flex: 1; width: 100%; align-items: stretch; padding: 8px !important; overflow-y: auto !important; }
    .sidebar .nav-item { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; width: 100% !important; min-height: 48px !important; padding: 10px 12px !important; gap: 12px; }
    .sidebar .nav-item span, .sidebar .nav-item > div { display: flex !important; opacity: 1 !important; }
    .sidebar .nav-item span { font-size: 14px !important; white-space: normal !important; }
    .sidebar .nav-group-projects { width: 100%; }
    .sidebar .user-profile, .sidebar .user-info { display: flex !important; min-width: 0; }
    .sidebar .user-info { flex-direction: column; }
    .sidebar .user-profile .username { font-size: 13px !important; white-space: normal; overflow-wrap: anywhere; }
    .sidebar .user-profile button { min-width: 44px; }
    #mobile-sidebar-backdrop { position: fixed; inset: 0; background: #0009; border: 0; z-index: 3500; }
    body.mobile-menu-open #mobile-sidebar-backdrop { display: block; }
    .app-container .mobile-bottom-nav {
        position: fixed !important;
        top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
        width: 100% !important; height: var(--mobile-dock-height) !important;
        margin: 0 !important; padding: 0 !important;
        box-sizing: border-box !important; border-radius: 0 !important;
        border-bottom: 0 !important; background: var(--bg-sidebar) !important;
        background-clip: border-box !important;
        transform: none !important; -webkit-transform: none !important;
        align-items: stretch !important;
        overflow: hidden !important; clip-path: none !important;
    }
    .app-container .mobile-bottom-nav::after { content: none !important; display: none !important; }
    /* Keep large touch areas ABOVE the icons, with no inset/padding BELOW them. */
    .app-container .mobile-bottom-nav > button {
        display: flex !important; flex: 1 1 0 !important; flex-direction: column !important;
        align-items: center !important; justify-content: center !important;
        height: auto !important; align-self: stretch !important; min-height: 44px !important;
        width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
        gap: 0 !important; border: 0 !important; border-radius: 0 !important;
        transform: none !important; box-shadow: none !important; background: transparent !important;
    }
    .app-container .mobile-bottom-nav > button > span { display: none !important; }
    .app-container .mobile-bottom-nav > button > svg,
    .app-container .mobile-bottom-nav > button > i {
        display: block !important; flex: 0 0 24px; width: 24px !important; height: 24px !important;
        margin: 0 !important; padding: 0 !important; transform: none !important;
    }
    .app-container .mobile-bottom-nav .mobile-bottom-add-btn { color: white !important; }

    /* A scrollable sheet with a close button that cannot be scrolled out of reach. */
    #modal-container {
        inset: auto 0 auto 0 !important; top: var(--mobile-viewport-top, 0px) !important;
        height: var(--mobile-viewport-height, 100dvh) !important; max-height: var(--mobile-viewport-height, 100dvh) !important;
        padding: calc(var(--app-safe-top) + 8px) calc(var(--app-safe-right) + 8px) calc(var(--app-safe-bottom) + 8px) calc(var(--app-safe-left) + 8px) !important;
        align-items: stretch !important; overflow: hidden !important; z-index: 10000;
        transition: none !important;
    }
    #modal-container .modal-content, #modal-container .modal-content.large {
        width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important;
        min-width: 0; min-height: 0; margin: 0 !important; padding: 58px 16px 24px !important;
        border-radius: 18px !important; overflow-x: hidden !important; overflow-y: auto !important;
        transform: none !important; box-sizing: border-box; scroll-padding-block: 60px 24px;
        transition: none !important; animation: none !important;
        -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    }
    .modal-content::before { display: none !important; }
    #mobile-modal-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: calc(var(--app-safe-top) + 16px); right: calc(var(--app-safe-right) + 20px); width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-sidebar); color: white; z-index: 5; }
    .task-detail-heading { display: flex; flex-wrap: wrap; gap: 12px; }
    .task-detail-heading > .task-detail-heading-main { flex: 1 1 100% !important; min-width: 0; }
    .task-detail-heading-main > div { min-width: 0; width: 100%; }
    .task-detail-title-actions { flex-wrap: wrap; gap: 8px !important; }
    #task-edit-name, #task-edit-name-static { flex: 1 1 100%; width: 100% !important; min-width: 0 !important; font-size: 18px !important; }
    .task-detail-heading p { font-size: 13px !important; overflow-wrap: anywhere; }
    .task-detail-heading > button { display: none !important; } /* fixed sheet close replaces this duplicate */
    #modal-container .modal-content > .flex-between > button[onclick="App.hideModal()"] { display: none !important; }
    .modal-content .grid-layout { display: flex !important; flex-direction: column !important; gap: 16px !important; }
    .modal-content .task-main-info, .modal-content .task-sidebar { min-width: 0; width: 100% !important; }
    .modal-content .task-sidebar { padding: 12px !important; }
    .modal-content .flex-between { flex-wrap: wrap; gap: 10px; }
    .modal-content .flex-between > div { min-width: 0; max-width: 100%; }
    .modal-content .subtasks-container .task-card { flex-wrap: wrap; gap: 8px; }
    .modal-content .subtasks-container .task-card > div { min-width: 0; flex: 1; }
    .modal-content .subtasks-container .task-card span { overflow-wrap: anywhere; }
    .modal-content .logs-container .glass { grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; }
    body:has(#modal-container:not(.hidden)) .mobile-bottom-nav { display: none !important; }
    #wb-new-task-modal, #wb-project-select-overlay, #wb-task-select-overlay, #wb-entity-select-overlay {
        top: var(--mobile-viewport-top, 0px) !important; height: var(--mobile-viewport-height, 100dvh) !important;
        padding: calc(8px + var(--app-safe-top)) 8px calc(8px + var(--app-safe-bottom)); overflow: hidden;
    }
    #wb-new-task-modal > div, #wb-project-select-overlay > div, #wb-task-select-overlay > div, #wb-entity-select-overlay > div {
        width: 100% !important; max-height: 100% !important; padding: 16px !important; overflow-y: auto;
    }

    /* Project content uses the page scroller; controls wrap rather than being cropped. */
    .project-detail-view:not(.whiteboard-active-view) .project-detail { height: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important; }
    .project-detail-view:not(.whiteboard-active-view) #project-view-content { flex: none !important; overflow: visible !important; height: auto !important; }
    .project-header-container { padding: 12px !important; }
    .project-header-top, .project-actions { flex-wrap: wrap !important; }
    .project-title-wrapper { min-width: 0 !important; width: 100%; }
    .project-actions { gap: 8px !important; }
    .project-header-bottom { display: flex !important; margin-top: 10px !important; }
    .view-controls { min-width: 0; width: 100%; flex-wrap: wrap; gap: 8px; }
    .view-controls > div { min-width: 0; width: 100%; flex-wrap: wrap; }
    .view-switcher { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; min-width: 0; }
    .view-switcher .view-btn { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0 !important; min-height: 54px !important; padding: 6px 2px !important; font-size: 11px !important; }
    .view-switcher .view-btn svg { width: 18px; height: 18px; }
    .table-container, .kanban-board { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .project-progress-col .progress-txt { flex-wrap: wrap; }
    .project-card-row { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "info info" "status actions" !important; }
    .project-info, .project-title-main { min-width: 0; }
    .project-title-main > span[contenteditable] { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
    .project-client-sub { overflow-wrap: anywhere; white-space: normal; }
    .project-row-actions { flex-wrap: wrap; justify-content: flex-end; align-self: end; }
    .project-status-col { min-width: 0; flex-wrap: wrap; }
    .project-status-col select { max-width: 100%; }
    .progress-refresh-btn { width: 44px !important; }
    .dashboard-hero h1 { font-size: clamp(28px, 8vw, 38px) !important; }
    .section-header { flex-wrap: wrap; gap: 10px; }

    /* Canvas stays flexible; its tools are one reachable horizontal tray. */
    .whiteboard-active-view .view-content { overflow: hidden !important; }
    .whiteboard-active-view .project-detail { height: 100% !important; min-height: 0; padding: 0 !important; }
    .whiteboard-active-view .project-header-bottom { display: none !important; }
    .whiteboard-active-view .project-header-container { flex-shrink: 0; max-height: clamp(88px, calc(var(--mobile-viewport-height, 100dvh) - 380px), 220px); overflow-y: auto; }
    .whiteboard-active-view #project-view-content { flex: 1 1 0 !important; min-height: 120px; }
    .app-container:not(.fullscreen-canvas) .whiteboard-container { flex: 1 !important; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; aspect-ratio: auto !important; margin: 0 !important; }
    .whiteboard-canvas-controls { flex-direction: row !important; top: auto !important; bottom: 8px !important; left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; gap: 4px !important; justify-content: flex-end; }
    .whiteboard-canvas-controls { background: rgba(11,14,18,0.92); border-radius: 24px; height: 48px !important; align-items: center; }
    .whiteboard-canvas-controls .wb-nav-btn { flex: 0 0 44px; width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 6px !important; }
    .whiteboard-canvas-controls .wb-nav-btn { max-height: 44px !important; }
    .whiteboard-toolbar { display: none !important; }
    .whiteboard-canvas-controls .wb-mobile-tools-wrapper { position: relative !important; display: flex !important; height: 44px; flex: 0 0 44px; }
    .wb-mobile-tools-dropdown { position: absolute !important; display: flex; flex-direction: row !important; flex-wrap: nowrap !important; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-sidebar); overflow-x: auto !important; top: auto !important; bottom: 54px !important; right: 0 !important; transform: none !important; max-width: calc(100vw - 56px) !important; }
    .whiteboard-brush-popover { bottom: 64px !important; max-width: calc(100% - 16px) !important; flex-wrap: wrap; }
    .wb-mobile-tools-dropdown .whiteboard-tool-btn { min-width: 44px; min-height: 44px; }
    .global-board-body { position: relative; }
    .global-board-canvas { min-height: 0; }
    .global-board-panel { position: absolute; inset: auto 0 0; width: 100% !important; max-height: 65% !important; z-index: 150; background: var(--bg-sidebar); }
    .global-board-body.panel-collapsed .global-board-panel { display: none; }
    .gb-board-switcher { min-width: 0; flex-wrap: wrap; }
    .gb-board-switcher select { max-width: 180px; }
    .gb-board-btn { min-width: 44px; }
    .gb-panel-tab { min-height: 44px; }
    .gb-item-open { opacity: 1; min-width: 44px; }
    .app-container.fullscreen-canvas:has(.wb-fullscreen) .main-content { padding: 0 !important; }
    .app-container.fullscreen-canvas .whiteboard-container.wb-fullscreen { height: var(--mobile-viewport-height,100dvh) !important; max-height: var(--mobile-viewport-height,100dvh) !important; }
    .wb-fullscreen .whiteboard-canvas-controls { bottom: calc(8px + var(--app-safe-bottom)) !important; left: calc(8px + var(--app-safe-left)) !important; right: calc(8px + var(--app-safe-right)) !important; }
    .app-container.fullscreen-canvas:has(.wb-fullscreen) #mobile-menu-toggle, .app-container.fullscreen-canvas:has(.wb-fullscreen) .sidebar { display: none !important; }

    .calendar-layout .calendar-view { height: 100% !important; }
    .calendar-layout .view-mode-btn { min-height: 44px !important; }
    .mobile-calendar-settings { display: inline-flex; }
    .auth-overlay, #auth-page-overlay { top: var(--mobile-viewport-top,0px) !important; height: var(--mobile-viewport-height,100dvh) !important; overflow-y: auto !important; padding: calc(16px + var(--app-safe-top)) 16px calc(16px + var(--app-safe-bottom)) !important; align-items: flex-start !important; }
    .auth-card { width: 100% !important; max-width: 440px; min-width: 0; margin: auto !important; padding: 24px 16px !important; }
    .auth-card .btn, .auth-card input { min-height: 44px; }
    #install-banner { max-width: calc(100vw - 24px); min-width: 0 !important; flex-wrap: wrap; bottom: calc(72px + var(--app-safe-bottom)) !important; }
    #install-banner button { min-width: 44px; min-height: 44px; }
    .auth-card a { display: inline-flex; align-items: center; min-height: 44px; }
    body.mobile-keyboard .main-content { padding-bottom: 0 !important; }
    body.mobile-keyboard .mobile-bottom-nav { display: none !important; }
}
/* Secondary canvas actions remain available from the tools menu on smaller phones. */
.wb-phone-secondary { display: none; }
@media (max-width: 480px) {
    .whiteboard-canvas-controls > button:nth-of-type(5), .whiteboard-canvas-controls > button:nth-of-type(6) { display: none !important; }
    .wb-mobile-tools-dropdown .wb-phone-secondary { display: inline-flex !important; }
}
@media (max-width: 1024px) and (max-height: 520px) {
    .top-bar { padding-top: 4px !important; padding-bottom: 4px !important; }
    .whiteboard-active-view .project-header-container { max-height: 88px; overflow-y: auto; }
    .global-board-header { max-height: 105px; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar, .modal-content { animation: none !important; transition: none !important; }
}

/* Home-screen iOS is not Safari's browser layout. Keep the dock in normal flex
   flow, so Web.app's fixed-layer viewport cannot leave a second strip below it. */
@media (max-width: 1024px) {
    html.ios-standalone, html.ios-standalone body {
        position: relative !important; inset: auto !important;
        width: 100% !important; height: var(--installed-viewport-height, 100%) !important;
        margin: 0 !important; padding: 0 !important; overflow: hidden !important;
    }
    html.ios-standalone .app-container {
        position: absolute !important; inset: 0 !important;
        display: flex !important; flex-direction: column !important;
        height: var(--mobile-viewport-height, var(--installed-viewport-height, 100%)) !important;
        max-height: var(--mobile-viewport-height, var(--installed-viewport-height, 100%)) !important; margin: 0 !important; padding: 0 !important;
        transform: none !important;
    }
    html.ios-standalone .app-container > .main-content {
        flex: 1 1 0 !important; height: auto !important; min-height: 0 !important;
        padding-bottom: 0 !important;
    }
    html.ios-standalone .app-container > .mobile-bottom-nav {
        position: relative !important; inset: auto !important;
        flex: 0 0 var(--mobile-dock-height) !important;
        margin: 0 !important; transform: none !important;
        height: var(--mobile-dock-height) !important;
        padding: 0 !important;
    }
}