/*
 * Phones only. Every rule lives inside the media query below, so nothing here
 * can reach the desktop layout. Loaded last, after every other stylesheet.
 *
 * Phase 1 (getting around): the top menu becomes a drawer, a bar of the places
 * people go most sits at the bottom, the section menus (Tasks, Admin) fold away
 * behind a button, and filter bars fold behind a Filters button.
 */

/* The bottom bar and the Sections button are built for phones and hidden
   everywhere else, so they never appear on a desktop. */
.mobile-bar,
.mobile-sections-btn { display: none; }

/* A tab strip is styled as one row that the panel below hangs off, so when it
   runs out of width and wraps, the rows shingle over each other. Rows keep
   their distance wherever that happens - at any width, this one included. */
.nav-tabs { row-gap: 6px; }

/* Narrower than a desktop layout - phones, and tablets in portrait - the strip
   stays one row and scrolls, rather than wrapping into that stack. */
@media (max-width: 991.98px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs::-webkit-scrollbar { height: 3px; }
    .nav-tabs > * { flex: 0 0 auto; }
    .nav-tabs .nav-link { white-space: nowrap; }
}

@media (max-width: 767.98px) {

    /* ── Room for the bar at the bottom ─────────────────────────────── */
    body.is-phone { padding-bottom: 64px; }
    /* The strapline is pinned to the bottom of every screen, which on a phone
       is a band of nothing above the bar that actually goes somewhere. */
    body.is-phone .main-footer { display: none; }

    /* ── The places people go most, always within reach ─────────────── */
    .mobile-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035;
        background: #1a1a1a;
        border-top: 1px solid rgba(255, 255, 255, .12);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .light-theme .mobile-bar { background: #fff; border-top-color: rgba(0, 0, 0, .12); }
    .mobile-bar a,
    .mobile-bar button {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 56px;
        padding: 6px 2px;
        border: 0;
        background: transparent;
        color: #9ca3af;
        font-size: 11px;
        line-height: 1.2;
        text-decoration: none;
        position: relative;
    }
    .mobile-bar i { font-size: 18px; }
    .mobile-bar .is-here { color: var(--primary-bg-color, #d20007); }
    .mobile-bar .mobile-bar-count {
        position: absolute;
        top: 4px;
        left: 50%;
        margin-left: 4px;
        min-width: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: #dc3545;
        color: #fff;
        font-size: 10px;
        line-height: 16px;
        text-align: center;
    }

    /* ── The top menu as a drawer, not a dropped-down block ─────────── */
    body.is-phone .main-header .navbar-collapse.collapse.show,
    body.is-phone .main-header .navbar-collapse.collapsing {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(86vw, 340px);
        z-index: 1045;
        overflow-y: auto;
        background: #1f1f1f;
        box-shadow: -8px 0 24px rgba(0, 0, 0, .45);
        padding: 12px 8px calc(24px + env(safe-area-inset-bottom, 0));
    }
    .light-theme.is-phone .main-header .navbar-collapse.collapse.show { background: #fff; }
    body.is-phone .main-header .navbar-collapse.show .nav-item .nav-link {
        margin: 0 !important;
        padding: 12px 14px;
        border-radius: 8px;
        font-size: 15px;
    }
    body.is-phone .main-header .navbar-collapse.show .header-icons {
        display: block;
        width: 100%;
    }
    /* The icons along the top of a desktop screen (admin, help, notifications,
       the theme, the account) are guesswork at thumb size, so in the drawer
       each one is a row that says what it does. */
    body.is-phone .main-header .navbar-collapse.show .header-icon-item {
        display: block;
        width: 100%;
    }
    body.is-phone .main-header .navbar-collapse.show .header-icon-link {
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        gap: 12px;
        width: 100%;
        padding: 12px 14px;
        border: 0;
        background: transparent;
        color: inherit !important;
        font-size: 15px;
        text-align: left;
    }
    body.is-phone .main-header .navbar-collapse.show [data-mobile-label]::after {
        content: attr(data-mobile-label);
        order: 2;
    }
    /* How many are waiting sits at the end of the row, not between the bell
       and the word. */
    body.is-phone .main-header .navbar-collapse.show .notification-badge {
        position: static;
        order: 3;
        margin-left: auto;
        display: inline-block !important;
    }
    body.is-phone .main-header .navbar-collapse.show .notification-badge.d-none { display: none !important; }
    /* A search box that searches nothing, and a picture of a favicon. */
    body.is-phone .main-header .navbar-collapse.show .search-icon,
    body.is-phone .main-header .navbar-collapse.show .main-profile-menu > .profile-user { display: none !important; }
    /* The account menu is already written out: show it rather than hiding it
       behind a tap on a tiny avatar. */
    body.is-phone .main-header .navbar-collapse.show .main-profile-menu {
        display: block;
        width: 100%;
        padding: 0;
    }
    body.is-phone .main-header .navbar-collapse.show .main-profile-menu .dropdown-menu {
        display: block;
        position: static;
        float: none;
        width: 100%;
        margin: 8px 0 0;
        border: 0;
        border-top: 1px solid rgba(127, 127, 127, .25);
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    body.is-phone .main-header .navbar-collapse.show .main-profile-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        font-size: 15px;
    }
    body.is-phone .main-header .navbar-collapse.show .main-profile-menu .main-img-user img { width: 32px; height: 32px; }
    .mobile-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, .5);
    }

    /* ── Section menus (Tasks, Admin) fold away ─────────────────────── */
    .mobile-sections-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 8px 0;
        padding: 8px 12px;
        border: 1px solid rgba(127, 127, 127, .35);
        border-radius: 8px;
        background: transparent;
        color: inherit;
        font-size: 14px;
    }
    body.is-phone .tasks-shell { flex-direction: column; }
    body.is-phone .tasks-sidebar-col,
    body.is-phone .admin-sections-col,
    body.is-phone .crm-details-col { display: none; }
    body.is-phone .tasks-sidebar-col.mobile-open,
    body.is-phone .admin-sections-col.mobile-open,
    body.is-phone .crm-details-col.mobile-open {
        display: block;
        width: 100%;
        margin-bottom: 12px;
    }
    /* A record's button says whose record it is, and the panel it opens. */
    .mobile-sections-btn {
        width: 100%;
        justify-content: flex-start;
    }
    .mobile-sections-btn .mobile-panel-name {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        font-weight: 600;
    }
    .mobile-sections-btn .mobile-panel-hint { color: #9ca3af; font-size: 12px; }
    body.is-phone .tasks-sidebar-scroll { height: auto; overflow: visible; }
    /* The admin panel: its menu and its content stack, each scrolling the page
       rather than a box of its own. */
    body.is-phone .admin-sections-col .d-flex,
    body.is-phone .admin-sections-col .card { height: auto !important; overflow: visible !important; }
    body.is-phone #contentContainer { height: auto !important; overflow: visible !important; }
    body.is-phone .row.flex-nowrap { flex-wrap: wrap !important; }

    /* ── Filter bars behind one button ──────────────────────────────── */
    body.is-phone .filter-bar { flex-wrap: wrap; }
    body.is-phone .mobile-filters-hidden { display: none !important; }
    body.is-phone .filter-select,
    body.is-phone .filter-bar .form-control {
        width: 100% !important;
        max-width: none;
        height: auto !important;
        padding: 8px 10px !important;
        font-size: 14px !important;
    }
    .mobile-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border: 1px solid rgba(127, 127, 127, .35);
        border-radius: 8px;
        background: transparent;
        color: inherit;
        font-size: 14px;
    }
    .mobile-filter-toggle .mobile-filter-count {
        min-width: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: var(--primary-bg-color, #d20007);
        color: #fff;
        font-size: 11px;
        line-height: 18px;
        text-align: center;
    }
    body.is-phone .filter-bar-right,
    body.is-phone .filter-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }
    body.is-phone .filter-bar-right > * { flex: 1 1 100%; }

    /* ── Wide tables read as cards ──────────────────────────────────── */
    .mobile-table-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 4px 0 8px;
        padding: 6px 10px;
        border: 1px solid rgba(127, 127, 127, .35);
        border-radius: 8px;
        background: transparent;
        color: inherit;
        font-size: 13px;
    }
    /* The table keeps its rows and cells (so sorting, searching, paging and
       row taps all still work); each row just lays out as a card. */
    body.is-phone .mobile-cards-wrap { overflow: visible !important; }
    body.is-phone table.mobile-cards,
    body.is-phone table.mobile-cards tbody,
    body.is-phone table.mobile-cards tr,
    body.is-phone table.mobile-cards td { display: block; width: auto; }
    /* A table sized for a desktop grid ("at least 900px wide") would drag its
       cards off the side of the screen. */
    body.is-phone table.mobile-cards { min-width: 0 !important; width: 100% !important; }
    body.is-phone table.mobile-cards thead,
    body.is-phone table.mobile-cards tfoot,
    body.is-phone table.mobile-cards td:empty,
    body.is-phone table.mobile-cards td.checkbox-cell { display: none; }
    body.is-phone table.mobile-cards tr {
        display: flex;
        flex-direction: column;
        margin: 0 0 10px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(127, 127, 127, .25) !important;
        border-radius: 10px;
        background: rgba(127, 127, 127, .06) !important;
    }
    body.is-phone table.mobile-cards td {
        border: 0 !important;
        padding: 3px 0 !important;
        width: auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px 10px;
        align-items: baseline;
        justify-content: space-between;
        text-align: right !important;
        white-space: normal !important;
        max-width: none !important;
    }
    body.is-phone table.mobile-cards td::before {
        content: attr(data-label);
        flex: 0 0 34%;
        color: #9ca3af;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .02em;
        text-align: left;
    }
    /* The name leads the card, wherever its column sits in the table. */
    body.is-phone table.mobile-cards td.mobile-card-title {
        order: -1;
        display: block !important;
        margin-bottom: 4px;
        font-size: 15px;
        font-weight: 600;
        text-align: left !important;
    }
    body.is-phone table.mobile-cards td.mobile-card-title::before { content: none; }
    /* A line with nothing in it isn't worth a row on a card. */
    body.is-phone table.mobile-cards td[data-label=""]:not(.mobile-card-title),
    body.is-phone table.mobile-cards td.mobile-card-empty:not(.mobile-card-title) { display: none !important; }
    body.is-phone table.mobile-cards .list-progress { min-width: 90px; }
    /* Page numbers wrap instead of marching off the side. */
    body.is-phone .dataTables_paginate .pagination {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
    }
    body.is-phone .dataTables_paginate { width: 100%; }

    /* ── A board's Kanban, one column at a time ─────────────────────── */
    .mobile-column-picker {
        display: flex;
        gap: 6px;
        margin: 4px 0 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-column-picker:empty { display: none; }
    .mobile-column-chip {
        flex: 0 0 auto;
        padding: 7px 12px;
        border: 1px solid rgba(127, 127, 127, .35);
        border-radius: 999px;
        background: transparent;
        color: inherit;
        font-size: 13px;
        white-space: nowrap;
    }
    .mobile-column-chip.is-here {
        border-color: var(--primary-bg-color, #d20007);
        background: var(--primary-bg-color, #d20007);
        color: #fff;
    }
    body.is-phone .mobile-column-hidden { display: none !important; }
    /* The card menu's list of columns to move to (phones only). */
    .quick-actions-menu .quick-actions-heading {
        padding: 6px 12px 2px;
        color: #9ca3af;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .02em;
    }
    body.is-phone .task-kanban-board { display: block; overflow: visible !important; }
    body.is-phone .task-kanban-column-wrapper { flex: 1 1 auto; width: 100%; }
    body.is-phone .kanban-hscroll-track { display: none; }
    /* The stage columns stack on a phone, so the strip they sit in has nothing
       left to scroll sideways - and shouldn't shift the page by doing it. */
    body.is-phone .horizontal-scrollable > .row { margin-left: 0; margin-right: 0; }
    /* The tab strip scrolls rather than wrapping into three rows. */
    /* Views measure themselves against the desktop chrome; on a phone the
       page itself scrolls. */
    body.is-phone .tab-content { height: auto !important; overflow: visible !important; }

    /* The note editor's buttons wrap onto a second line instead of hiding
       half of them behind a sideways scroll nobody sees. */
    body.is-phone .tox .tox-toolbar--scrolling,
    body.is-phone .tox .tox-toolbar__primary {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }

    /* ── The task window as a sheet, not a box in a box ─────────────── */
    body.is-phone .modal-dialog {
        max-width: 100%;
        width: 100%;
        margin: 0;
    }
    body.is-phone .modal-dialog-centered { align-items: stretch; }
    body.is-phone .modal-content {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }
    body.is-phone .task-modal-body { max-height: none; padding: 14px; }
    /* One part of the task at a time, chosen from a row that stays put at the
       top of the sheet. */
    .mobile-sheet-tabs {
        display: flex;
        gap: 6px;
        position: sticky;
        top: 0;
        z-index: 3;
        margin: -14px -14px 12px;
        padding: 10px 14px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: inherit;
        border-bottom: 1px solid rgba(127, 127, 127, .2);
    }
    .mobile-sheet-tab {
        flex: 0 0 auto;
        padding: 7px 12px;
        border: 1px solid rgba(127, 127, 127, .35);
        border-radius: 999px;
        background: transparent;
        color: inherit;
        font-size: 13px;
        white-space: nowrap;
    }
    .mobile-sheet-tab.is-here {
        border-color: var(--primary-bg-color, #d20007);
        background: var(--primary-bg-color, #d20007);
        color: #fff;
    }
    body.is-phone .mobile-part-hidden { display: none !important; }
    /* Nothing inside the sheet scrolls on its own: the sheet is the scroll. */
    body.is-phone .subtasks-list,
    body.is-phone .notes-feed,
    body.is-phone .document-also-file,
    body.is-phone .task-activity-log {
        max-height: none !important;
        overflow: visible !important;
    }
    /* The title gets the width; what it is and who it's for go underneath,
       rather than squeezing the name into one word per line. */
    body.is-phone .task-modal-header { padding: 12px 14px; flex-wrap: wrap; row-gap: 8px; }
    body.is-phone .task-modal-header > .d-flex { flex: 1 1 0; flex-wrap: wrap; row-gap: 6px; min-width: 0; }
    /* Close stays on the first line, next to the title. The theme leaves the
       button without a mark of its own, which a full-screen sheet can't
       afford: there is no outside to tap. */
    body.is-phone .modal-header .btn-close {
        align-self: flex-start;
        margin: 0 0 0 auto;
        opacity: .9;
    }
    body.is-phone .modal-header .btn-close::before {
        content: '\00d7';
        font-size: 24px;
        line-height: 1;
    }
    body.is-phone .task-modal-header .modal-title {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 0 !important;
        font-size: 1.05rem;
    }
    body.is-phone .task-modal-header .task-title-display { word-break: break-word; }
    body.is-phone .task-modal-header .task-modal-meta {
        flex: 1 1 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    body.is-phone #taskRequestUpdateBtn { order: 3; flex: 1 1 100%; margin-right: 0 !important; }
    body.is-phone .task-left-column,
    body.is-phone .task-right-column { padding-left: 0; padding-right: 0; }
    /* A section's buttons sit under its name rather than crowding across it. */
    body.is-phone .task-section-header {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    body.is-phone .task-section-header > .d-flex { width: 100%; }
    body.is-phone .task-section-header .btn { flex: 1 1 auto; }
    /* Save, Complete and Archive stay in reach however long the task is. */
    body.is-phone .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: inherit;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0));
    }
    body.is-phone .task-modal-footer .justify-content-between { flex-wrap: wrap; gap: 8px; }
    body.is-phone .task-modal-footer #taskCreatedInfo { display: none; }
    body.is-phone .task-modal-footer .justify-content-between > div:last-child {
        display: flex;
        gap: 8px;
        width: 100%;
    }
    body.is-phone .task-modal-footer .justify-content-between > div:last-child .btn {
        flex: 1 1 0;
        margin: 0 !important;
    }

    /* The search box and the buttons beside it wrap instead of running off
       the side of the screen. */
    body.is-phone .toolbar-right {
        flex-wrap: wrap;
        row-gap: 8px;
        width: 100%;
    }
    body.is-phone .toolbar-right .search-wrapper { flex: 1 1 100%; }

    /* ── Your Tasks: the counts at a glance, not a screen each ──────── */
    /* Sections are a fixed height on a desktop so the columns line up; in a
       single column that leaves an empty section holding a screenful of
       nothing, so each one is as tall as what it holds and the page scrolls. */
    body.is-phone .sections-grid > .task-section { height: auto !important; }
    body.is-phone .sections-grid > .task-section > .task-section-body {
        max-height: none;
        overflow: visible;
    }
    /* A row's board, who has it and when it's due sit under the name rather
       than squeezing the name out of the row. */
    body.is-phone .task-row { flex-wrap: wrap; row-gap: 6px; }
    body.is-phone .task-row-title { flex: 1 1 auto; min-width: 0; white-space: normal; }
    body.is-phone .task-row-meta {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
        justify-content: flex-start;
    }
    body.is-phone .row > *:has(> .summary-card) { width: 50%; margin-bottom: 8px !important; }
    body.is-phone .summary-card .card-body { padding: 10px 6px !important; }
    body.is-phone .summary-card-icon { font-size: 14px; line-height: 1; }
    body.is-phone .summary-card-count { font-size: 22px; }
    body.is-phone .summary-card-label { font-size: 11px; }

    /* ── Your profile: nothing floating over anything else ──────────── */
    /* The buttons and the picture are placed by hand for a wide screen, which
       lands them on top of each other at this width. */
    body.is-phone #user-profile-actions-container {
        position: static;
        width: 100%;
        margin-bottom: 8px;
    }
    body.is-phone #user-profile-actions-container .text-end {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        text-align: left !important;
    }
    body.is-phone #user-profile-actions-container .btn { flex: 1 1 auto; }
    body.is-phone .widget-user .widget-user-image {
        position: static;
        margin: 12px 0 0;
        text-align: center;
    }
    body.is-phone .widget-user .user-wideget-footer { padding-top: 10px; }

    /* ── Small grids of numbers scroll rather than spill ────────────── */
    /* A handful of figures per row reads better as a table than as cards, so
       these keep their shape and scroll sideways inside their own box. */
    body.is-phone .dw-table,
    body.is-phone .kpi-table,
    body.is-phone .report-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Configure Columns ──────────────────────────────────────────── */
    /* A column's name, where it sits on a sprint board and whether it is
       tracked share one line on a desktop; here they stack. */
    body.is-phone #columnsModal .column-step-summary {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 10px;
    }
    body.is-phone #columnsModal .column-step-summary > * { flex: 1 1 100%; }
    /* The name keeps the remove button beside it, and the switch keeps its
       words on one line. */
    body.is-phone #columnsModal .col-inline-head {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }
    body.is-phone #columnsModal .col-inline-name { flex: 1 1 0; min-width: 0; }
    body.is-phone #columnsModal .column-step-switch { flex-wrap: wrap; row-gap: 6px; }
    body.is-phone #columnsModal .column-step-switch label { margin-bottom: 0; }

    /* ── Anything a thumb has to hit ────────────────────────────────── */
    body.is-phone .btn,
    body.is-phone .filter-pill,
    body.is-phone .nav-link { min-height: 40px; }
    body.is-phone .main-container.container,
    body.is-phone .main-container.container-fluid { padding-left: 12px; padding-right: 12px; }
}