/* ==========================================================================
   BJAS mobile shell V18 — app-style home grid + hamburger drawer.

   Self-contained: this module owns every element it styles (tile grid,
   hamburger, drawer). The legacy bottom tab bar and the old two-section
   shortcut layout were removed from bjas_clean_refactor_v9.css rather than
   overridden, so nothing here needs !important to win.
   ========================================================================== */

@media (max-width: 820px) {
    body[data-has-app-shell="1"]:not(.pos-shell):not(.pos-clean-shell):not(.pos-tool-shell) {
        --bjas-mobile-shell-v18-ready: 1;
    }

    body.bjas-mobile-task-v17 {
        --shell-ink: #14294a;
        --shell-muted: #64748b;
        --shell-line: #e4eaf3;
        --shell-card: #ffffff;
        --shell-tint: #eef3fb;
        --shell-primary: #14294a;
        --shell-radius: 18px;
    }

    /* -- Hamburger ---------------------------------------------------- */

    body.bjas-mobile-task-v17 .bjas-mobile-task-topbar__burger {
        flex: 0 0 36px;
        min-width: 36px;
        max-width: 36px;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--shell-line);
        border-radius: 11px;
        background: var(--shell-card);
        color: var(--shell-ink);
        cursor: pointer;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-topbar__burger svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-topbar__burger[aria-expanded="true"] {
        border-color: var(--shell-primary);
        background: var(--shell-primary);
        color: #ffffff;
    }

    /* -- Home tile grid (approved app model) --------------------------- */

    body.workspace-gateway-v113.bjas-mobile-task-v17 .gateway-mobile-tile-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 10px;
        margin: 4px 0 0;
        padding: 0;
    }

    body.workspace-gateway-v113.bjas-mobile-task-v17 .gateway-mobile-tile {
        min-width: 0;
        display: grid;
        justify-items: center;
        gap: 7px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--shell-ink);
        text-decoration: none;
    }

    body.workspace-gateway-v113.bjas-mobile-task-v17 .gateway-mobile-tile-art {
        width: 100%;
        aspect-ratio: 1 / 1;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid var(--shell-line);
        border-radius: var(--shell-radius);
        background: linear-gradient(160deg, #f7faff 0%, var(--shell-tint) 100%);
        box-shadow: 0 2px 10px rgb(20 41 72 / 6%);
    }

    body.workspace-gateway-v113.bjas-mobile-task-v17 .gateway-mobile-tile-art img {
        width: 46%;
        height: 46%;
        object-fit: contain;
    }

    body.workspace-gateway-v113.bjas-mobile-task-v17 .gateway-mobile-tile-label {
        display: -webkit-box;
        overflow: hidden;
        color: var(--shell-ink);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.25;
        text-align: center;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.workspace-gateway-v113.bjas-mobile-task-v17 .gateway-mobile-tile:active .gateway-mobile-tile-art {
        transform: scale(.97);
    }

    body.workspace-gateway-v113.bjas-mobile-task-v17 .gateway-mobile-colophon {
        margin: 22px 0 0;
        color: var(--shell-muted);
        font-size: 10.5px;
        text-align: center;
    }

    /* -- Drawer ------------------------------------------------------- */

    body.bjas-mobile-task-v17 .bjas-mobile-task-backdrop {
        position: fixed;
        z-index: 9200;
        inset: 0;
        background: rgb(9 20 38 / 45%);
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-backdrop[hidden] {
        display: none;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-sheet {
        position: fixed;
        z-index: 9300;
        inset: 0 0 0 auto;
        width: min(88vw, 380px);
        display: flex;
        flex-direction: column;
        padding: calc(10px + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom);
        background: var(--shell-card);
        box-shadow: -12px 0 34px rgb(9 20 38 / 18%);
        transform: translateX(100%);
        transition: transform .22s ease;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-sheet.is-open {
        transform: translateX(0);
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-sheet[hidden] {
        display: none;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-sheet__handle {
        display: none;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-sheet__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 14px 12px;
        border-bottom: 1px solid var(--shell-line);
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-sheet__head small {
        display: block;
        color: var(--shell-muted);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-sheet__head h2 {
        margin: 3px 0 0;
        color: var(--shell-ink);
        font-size: 16px;
        font-weight: 800;
        line-height: 1.2;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-sheet__close {
        width: 34px;
        height: 34px;
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--shell-line);
        border-radius: 10px;
        background: var(--shell-card);
        color: var(--shell-ink);
        cursor: pointer;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-sheet__close svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-search {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 12px 14px 0;
        padding: 0 11px;
        border: 1px solid var(--shell-line);
        border-radius: 11px;
        background: var(--shell-tint);
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-search svg {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        fill: none;
        stroke: var(--shell-muted);
        stroke-width: 2;
        stroke-linecap: round;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-search input {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        border: 0;
        background: none;
        color: var(--shell-ink);
        font: inherit;
        font-size: 13px;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-search input:focus {
        outline: none;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-sheet__content {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
        -webkit-overflow-scrolling: touch;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-menu-group + .bjas-mobile-menu-group {
        margin-top: 16px;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-menu-group[hidden] {
        display: none;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-menu-group h3 {
        margin: 0 0 7px;
        color: var(--shell-muted);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-menu-group__list {
        display: grid;
        gap: 6px;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-menu-card {
        min-height: 46px;
        display: grid;
        align-items: center;
        grid-template-columns: 30px minmax(0, 1fr) 16px;
        gap: 10px;
        padding: 7px 10px;
        border: 1px solid var(--shell-line);
        border-radius: 11px;
        background: var(--shell-card);
        color: var(--shell-ink);
        text-decoration: none;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-menu-card[hidden] {
        display: none;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-menu-card--home {
        margin-bottom: 14px;
        border-color: var(--shell-primary);
        background: var(--shell-primary);
        color: #ffffff;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-menu-card--home .bjas-mobile-menu-card__chevron {
        color: rgb(255 255 255 / 70%);
    }

    body.bjas-mobile-task-v17 .bjas-mobile-menu-card.is-active {
        border-color: var(--shell-primary);
        background: var(--shell-tint);
    }

    body.bjas-mobile-task-v17 .bjas-mobile-menu-card svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-menu-card__copy strong {
        display: block;
        overflow: hidden;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.bjas-mobile-task-v17 .bjas-mobile-menu-card__chevron {
        color: var(--shell-muted);
    }

    body.bjas-mobile-task-v17 .bjas-mobile-task-search-empty {
        padding: 18px 6px;
        color: var(--shell-muted);
        font-size: 12px;
        text-align: center;
    }

    body.bjas-mobile-task-v17.bjas-mobile-sheet-open {
        overflow: hidden;
    }
}

/* Narrow phones: the grid stays three across, the tiles just get tighter. */
@media (max-width: 500px) {
    body.workspace-gateway-v113.bjas-mobile-task-v17 .gateway-mobile-tile-grid {
        gap: 12px 8px;
    }

    body.workspace-gateway-v113.bjas-mobile-task-v17 .gateway-mobile-tile-art {
        border-radius: 15px;
    }

    body.workspace-gateway-v113.bjas-mobile-task-v17 .gateway-mobile-tile-label {
        font-size: 10px;
    }
}

@media (max-width: 420px) {
    body.bjas-mobile-task-v17:not(.workspace-gateway-v113) .bjas-mobile-task-topbar__avatar {
        display: none !important;
    }
}

@media (max-width: 360px) {
    body.workspace-gateway-v113.bjas-mobile-task-v17 .gateway-mobile-tile-grid {
        gap: 10px 7px;
    }

    body.workspace-gateway-v113.bjas-mobile-task-v17 .gateway-mobile-tile-label {
        font-size: 9.5px;
    }
}

@media print {
    .bjas-mobile-task-backdrop,
    .bjas-mobile-task-sheet {
        display: none !important;
    }
}