/* ============================================================
   BKTasks Mobile CSS — active below 768px only
   Desktop layout is completely unchanged.
   ============================================================ */

@media (max-width: 767px) {

    /* ── 0. TASK LIST HEIGHT FIX ───────────────────────────── */

    /* Desktop uses a flex scroll container that clips the list on mobile.
       On mobile let the list grow naturally and the page itself scrolls. */
    #tasksListWrap {
        overflow: visible !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }
    #tasksListArea {
        overflow-y: visible !important;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
    }

    /* ── 1. BOTTOM TAB BAR ─────────────────────────────────── */

    /* Hide the top navbar entirely on mobile for logged-in users */
    body.is-logged-in .navbar {
        display: none !important;
    }

    /* Bottom tab bar */
    #mobile-tab-bar {
        display: flex !important;
    }

    /* Push page content above the tab bar */
    body.is-logged-in #gencontent {
        padding-bottom: 64px;
    }


    /* ── 2. SEARCH PAGE ────────────────────────────────────── */

    /* Hide the redundant nav toolbar on search page (bottom bar covers it) */
    .container #toolbar_container {
        display: none !important;
    }
    /* Search box full-width on mobile */
    #searchInput { font-size: 16px !important; }
    .col-md-7 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }

    /* ── 3. TASKS PAGE ─────────────────────────────────────── */

    /* Hide the old icon toolbar row — keep the tcb-band (project picker) */
    #toolbar_container {
        display: none !important;
    }

    /* Make the project band stack neatly on mobile */
    .tcb-band {
        height: auto !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .tcb-controls {
        flex-wrap: nowrap;
        gap: 6px !important;
        width: 100%;
    }
    /* Project dropdown — fills remaining space next to the ⋮ button */
    .tcb-controls .input-group {
        flex: 1 1 auto;
        min-width: 0;
    }
    .tcb-controls #chooseProject {
        font-size: 14px !important;
    }
    /* Hide period filter & import button on mobile — keep it simple */
    .tcb-controls #periodFilter,
    .tcb-controls #bktImportFileBtn {
        display: none !important;
    }
    /* Hide sidebar pull-tab — we use the dropdown instead */
    #sidebarPullTab,
    #sidebarWrap,
    #sidebarOverlay {
        display: none !important;
    }
    /* Tasks area takes full width */
    #tasksProjContainer .row > .col-md-3 { display: none !important; }
    #tasksProjContainer .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }

    /* ── 3. TASK LIST — card style ─────────────────────────── */

    /* Hide the filter bar (filter input + "active only" + filter icon) */
    #only-active,
    .filter-input-wrap,
    .filter-clear-btn,
    .input-group > .input-group-text {
        display: none !important;
    }
    /* Location strip — show compact above the project band */
    .toggleProjectsBar {
        display: block !important;
        margin: 0 !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
        background: #f0f4ff;
        border-bottom: 1px solid #dbe4ff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .toggleProjectsBar .cursor-pointer strong {
        font-size: 13px;
    }
    /* Project label (green text) after the folder icon — keep visible */
    #taskAreaProjectLabel { font-size: 13px; }
    /* Hide the table header */
    #tasksTable thead {
        display: none !important;
    }
    /* Hide property value columns */
    .taskRow .prop-col-td,
    .projRow .prop-col-td {
        display: none !important;
    }

    /* Card: flex row — left lip + content */
    .taskRow {
        display: flex !important;
        align-items: stretch !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 8px !important;
        margin-bottom: 8px !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
        backdrop-filter: blur(4px);
        overflow: hidden;
        cursor: pointer;
    }

    /* Left lip — priority accent + highlighter button */
    .taskRow .task-hl-col {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 38px !important;
        min-width: 38px;
        padding: 6px 0 !important;
        background: #f8f9fa;
        border-right: 1px solid #e9ecef;
        box-shadow: none !important;
    }
    /* Priority colors on the lip */
    .taskRow.priority-1 .task-hl-col { border-left: 4px solid #dc3545; background: #fff5f5; }
    .taskRow.priority-2 .task-hl-col { border-left: 4px solid #fd7e14; background: #fff8f0; }
    .taskRow.priority-3 .task-hl-col { border-left: 4px solid #adb5bd; background: #f8f9fa; }

    /* Show highlighter button inside the lip */
    .taskRow .task-hl-col .btn-highlight {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 4px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        opacity: 0.5;
        border-radius: 4px;
    }
    .taskRow .task-hl-col .btn-highlight:active { opacity: 1; background: rgba(0,0,0,.07); }
    .taskRow .task-hl-col .btn-highlight img { width: 18px; height: 18px; object-fit: contain; }
    /* Drag handle still hidden on mobile */
    .taskRow .task-hl-col .drag-handle { display: none !important; }

    /* Status bullet — narrow column after the lip */
    .taskRow .taskBullet {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 28px !important;
        min-width: 28px;
        padding: 8px 2px !important;
        font-size: 15px;
        color: #6c757d;
        border: none !important;
    }

    /* Reorder flex cells: lip | bullet | title | checkbox */
    .taskRow .task-hl-col { order: 1; }
    .taskRow .taskBullet  { order: 2; }
    .taskRow .task-title-cell { order: 3; }
    .taskRow .taskchk     { order: 4; }

    /* Checkbox — always show at the right end of the card */
    .taskRow .taskchk {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        padding: 8px !important;
        border: none !important;
    }
    .taskRow .taskchk .form-check { margin: 0; padding: 0; }
    .taskRow .taskchk .taskcheckbox { width: 22px; height: 22px; cursor: pointer; margin: 0; }

    /* Title cell — takes remaining space */
    .taskRow .task-title-cell {
        display: block !important;
        flex: 1;
        padding: 10px 8px !important;
        border: none !important;
        min-width: 0;
    }
    .taskRow .taskTitle {
        font-size: 15px !important;
        font-weight: 500;
    }
    .taskRow .task-step-info {
        margin-top: 4px;
    }

    /* Project group row — slim folder label */
    .projRow {
        display: block !important;
        border: none !important;
        padding: 8px 4px 2px !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .projRow td {
        display: inline !important;
        border: none !important;
        padding: 0 !important;
    }
    .projRow .task-hl-col,
    .projRow .projBulletTd {
        display: none !important;
    }

    /* ── 4b. FOLDER PROPERTIES TOOLBAR — hide on mobile ───── */
    /* The prop-act-btn group (Folder Properties, Columns, Print, Export,
       Attendees, Check-in) is desktop-only complexity */
    #propActionGroup {
        display: none !important;
    }

    /* ── 4c. APPOINTMENTS folder type — hide in new project modal ── */
    /* Hides the Appointments <option> in the folder_type <select>.
       Enterprise users shouldn't create appointment folders on mobile. */
    #folder_type option[value="2"] {
        display: none !important;
    }

    /* ── 4. FLOATING ADD BUTTON ────────────────────────────── */

    /* Hide the original add button in the band on mobile */
    .tcb-btn-add:not(#mobile-fab) {
        display: none !important;
    }

    /* Go-top button — clear the mobile tab bar, left side to avoid FAB */
    #goTopBtn {
        bottom: 72px !important;
        right: auto !important;
        left: 16px !important;
        z-index: 1042 !important;
    }

    /* Floating action button */
    #mobile-fab {
        display: flex !important;
    }


    /* ── 5. TASK DETAIL PAGE ───────────────────────────────── */

    /* Hide Forms and Files tabs — show Steps only */
    #task-forms-tab,
    #task-files-tab {
        display: none !important;
    }

    /* Rich text editor: let it use the full width on narrow screens */
    .tox-hugerte {
        width: 100% !important;
    }

    /* Stack the two columns (description + steps) vertically */
    #tab-task-detail .row > .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Toolbar on task page — keep back & save buttons, hide others */
    #toolbar_container .btn-group:nth-child(n+3) {
        display: none !important;
    }

    /* Task title area */
    #tab-task-detail h4 {
        font-size: 16px;
    }

    /* Steps input + button — full width on mobile */
    #new_step {
        font-size: 15px !important;
    }


    /* ── 6. MODALS → FULL SCREEN ───────────────────────────── */

    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
    }
    .modal-content {
        border-radius: 0 !important;
        border: none !important;
        min-height: 100dvh;
    }
    .modal-body {
        overflow-y: auto;
    }


    /* ── 7. GENERAL TOUCH POLISH ───────────────────────────── */

    /* Larger tap targets for buttons */
    .btn {
        min-height: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .btn-sm {
        min-height: 36px;
    }

    /* Form controls — bigger on mobile */
    .form-control,
    .form-select {
        font-size: 16px !important; /* prevents iOS zoom on focus */
        min-height: 44px;
    }

    /* Remove horizontal padding from container on mobile */
    .container, .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Nav tabs — scrollable horizontally if they overflow */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs .nav-link {
        white-space: nowrap;
        font-size: 13px;
        padding: 6px 12px;
    }

}

/* ── Bottom tab bar (hidden on desktop, flex on mobile) ── */
#mobile-tab-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #fff;
    border-top: 1px solid #dee2e6;
    z-index: 1040;
    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
}
#mobile-tab-bar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    text-decoration: none;
    font-size: 10px;
    gap: 3px;
    transition: color .15s;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
#mobile-tab-bar a i {
    font-size: 20px;
}
#mobile-tab-bar a.active,
#mobile-tab-bar a:hover {
    color: #0d6efd;
}

/* ── Floating action button (hidden on desktop) ── */
#mobile-fab {
    display: none;
    position: fixed;
    bottom: 76px; /* above tab bar */
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #534AB7;
    color: #fff;
    border: none;
    font-size: 24px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(83,74,183,.45);
    z-index: 1039;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
#mobile-fab:active {
    transform: scale(.93);
    box-shadow: 0 2px 8px rgba(83,74,183,.3);
}