/* ==========================================================================
   BOS Mobile — sidebar drawer, safe-area (PWA), content polish
   Load after custom.css + qadeem-brand.css
   ========================================================================== */

/* Auth pages — Business OS logo on dark card */
body.v2-shell .authentication-wrapper .app-brand-logo img {
    max-width: 220px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* PWA / notched phones */
@supports (padding: env(safe-area-inset-top)) {
    body.v2-shell .tk-cbar {
        padding-top: max(0px, env(safe-area-inset-top));
        min-height: calc(48px + env(safe-area-inset-top));
    }

    body.v2-shell .tk-rail,
    body.v2-shell .tk-panel {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    body.v2-shell .layout-page {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ── Tablet + phone: full off-canvas nav ─────────────────────────────────── */
@media (max-width: 1199.98px) {

    /* Override earlier partial-collapse rules — hide BOTH rail + panel */
    body.v2-shell .tk-rail {
        transform: translateX(-100%);
        transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 1051;
        box-shadow: none;
    }

    body.v2-shell .tk-panel {
        left: var(--rail-w);
        width: min(var(--panel-w), calc(100vw - var(--rail-w) - 12px));
        transform: translateX(calc(-100% - var(--rail-w)));
        transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 1050;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    }

    /* Content uses full width when menu closed */
    body.v2-shell .layout-page {
        padding-left: 0 !important;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    body.v2-shell .content-wrapper {
        max-width: 100%;
        overflow-x: auto;
    }

    /* OPEN state — single source: html.layout-menu-expanded OR body.tk-panel-open */
    html.layout-menu-expanded body.v2-shell .tk-rail,
    body.v2-shell.tk-panel-open .tk-rail {
        transform: translateX(0);
    }

    html.layout-menu-expanded body.v2-shell .tk-panel,
    body.v2-shell.tk-panel-open .tk-panel {
        transform: translateX(0);
    }

    /* Scrim */
    html.layout-menu-expanded body.v2-shell .layout-overlay,
    body.v2-shell.tk-panel-open .layout-overlay {
        display: block !important;
        z-index: 1045;
        opacity: 0.55;
        background: #000;
    }

    body.v2-shell.tk-panel-open,
    html.layout-menu-expanded body.v2-shell {
        overflow: hidden;
        touch-action: none;
    }

    /* Scroll menu items inside panel on short screens */
    body.v2-shell .tk-panel-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100dvh - 120px - env(safe-area-inset-top, 0px));
    }

    /* Burger always visible */
    body.v2-shell .tk-cbar-burger {
        display: inline-flex !important;
    }
}

/* ── Phone ───────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

    body.v2-shell .tk-panel {
        width: min(78vw, 280px);
    }

    body.v2-shell .container-fluid,
    body.v2-shell .container-p-y {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Tables: horizontal scroll instead of squashing */
    body.v2-shell .table-responsive,
    body.v2-shell .bootstrap-table .fixed-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Floating chat / timer — stack above home indicator */
    body.v2-shell .timer-img {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        width: 48px !important;
    }

    body.v2-shell .chat-img {
        right: 68px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        width: 48px !important;
    }

    body.v2-shell .chat-iframe-container {
        left: 8px;
        right: 8px;
        width: auto;
        max-width: calc(100vw - 16px);
        height: min(70dvh, 520px);
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* Modals full-width on phone */
    body.v2-shell .modal-dialog {
        margin: 0.75rem;
        max-width: calc(100vw - 1.5rem);
    }
}

@media (max-width: 480px) {
    body.v2-shell .tk-panel {
        width: min(86vw, 300px);
    }
}