/*
 * Bandit Office responsive layout system
 * 2026-09-07
 *
 * Goal: make the app usable on phones, 8-inch rugged tablets, normal tablets,
 * laptops, and wide desktops without showing panel move arrows as the dominant UI.
 * This file is safe overlay CSS loaded after the main inline layout stylesheet.
 */

:root {
    --bo-phone-max: 699px;
    --bo-tablet-min: 700px;
    --bo-tablet-max: 1180px;
    --bo-desktop-min: 1181px;
    --bo-touch-target: 48px;
    --bo-mobile-bar: 76px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

button,
.btn,
.quick-action,
.nav-link,
input,
select,
textarea,
.result-choice,
.severity-chip,
.camera-action {
    touch-action: manipulation;
}

.table-wrap {
    -webkit-overflow-scrolling: touch;
}

/* Panel layout controls are useful on desktop, but on touch devices they create
   the “bunch of arrows” effect. Hide move/drag arrows on touch and compact UIs. */
@media (pointer: coarse), (max-width: 1180px) {
    .panel-layout-controls {
        display: none !important;
    }

    .panel-layout-header {
        grid-template-columns: 1fr !important;
    }
}

/* Phones: single-column app, drawer navigation, large touch targets, no route-sprawl chrome. */
@media (max-width: 699px) {
    .wrap {
        width: 100%;
        max-width: 100%;
        padding: 10px !important;
    }

    .shell-head {
        position: sticky;
        top: 0;
        z-index: 140;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        margin: -10px -10px 12px !important;
        padding: 8px 10px !important;
        background: color-mix(in srgb, var(--bg) 96%, #000 4%);
        border-bottom: 1px solid color-mix(in srgb, var(--card-border) 85%, transparent);
        backdrop-filter: blur(16px);
    }

    .brand-chip {
        min-width: 0;
    }

    .brand-logo {
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
    }

    .brand-name {
        font-size: .94rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 48vw;
    }

    .brand-sub,
    .head-search,
    .head-actions .quick-action:not(.alert-action):not(.alerts-action),
    .head-actions .offline-pill {
        display: none !important;
    }

    .head-actions {
        gap: 7px !important;
        flex-wrap: nowrap !important;
    }

    .head-actions .alert-action,
    .head-actions .alerts-action,
    .nav-toggle {
        width: var(--bo-touch-target) !important;
        min-width: var(--bo-touch-target) !important;
        height: var(--bo-touch-target) !important;
        min-height: var(--bo-touch-target) !important;
        padding: 0 !important;
        border-radius: 15px !important;
    }

    .nav-toggle {
        display: inline-flex !important;
        font-size: 0 !important;
    }

    .nav-toggle::before {
        content: '☰';
        font-size: 1.45rem;
        line-height: 1;
    }

    .app-shell {
        display: block !important;
    }

    .sidebar {
        position: static !important;
        width: 100% !important;
        z-index: auto !important;
    }

    .nav {
        display: grid !important;
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: min(92vw, 390px) !important;
        max-width: 390px !important;
        height: 100dvh !important;
        overflow: auto !important;
        z-index: 220 !important;
        padding: 18px 14px calc(18px + env(safe-area-inset-bottom)) !important;
        border-radius: 0 26px 26px 0 !important;
        transform: translateX(-112%);
        transition: transform .22s ease;
    }

    .nav.is-open {
        transform: translateX(0);
    }

    .nav:not(.is-open) {
        display: grid !important;
        pointer-events: none;
    }

    .sidebar.is-open::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 210;
        background: rgba(2, 6, 23, .62);
        backdrop-filter: blur(10px);
    }

    .nav-group-title,
    .nav-link .label,
    .account-mini {
        opacity: 1 !important;
        max-height: none !important;
        transform: none !important;
    }

    .nav-link {
        min-height: 52px !important;
        white-space: normal !important;
    }

    .page-hero,
    .split,
    .split-equal,
    .form-grid,
    .inspection-summary-grid,
    .progress-graph-with-dial {
        grid-template-columns: 1fr !important;
    }

    .page-hero {
        padding: 18px !important;
        align-items: start !important;
    }

    .card {
        padding: 16px !important;
        border-radius: 18px !important;
    }

    .section-head,
    .hero-actions,
    .actions,
    .header-actions {
        align-items: stretch !important;
    }

    .section-head > *,
    .hero-actions > *,
    .actions > *,
    .header-actions > * {
        min-width: 0;
    }

    .btn,
    button,
    input[type=submit] {
        min-height: var(--bo-touch-target);
    }
}

/* Tablets: especially rugged 8-inch tablets. Keep navigation stable and give the
   inspection workspace a split pane rather than phone-style bottom docks. */
@media (min-width: 700px) and (max-width: 1180px) {
    .wrap {
        max-width: 100%;
        padding: 14px !important;
    }

    .shell-head {
        grid-template-columns: auto minmax(220px, 1fr) auto !important;
        gap: 12px !important;
    }

    .brand-logo {
        width: 58px !important;
        height: 58px !important;
    }

    .head-actions {
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .head-actions .quick-action {
        min-height: 44px !important;
        padding: 9px 11px !important;
    }

    .head-actions .quick-action span:last-child {
        display: none;
    }

    .app-shell {
        grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .sidebar {
        width: auto !important;
        position: sticky !important;
        top: 12px !important;
    }

    .sidebar:hover,
    .sidebar.is-open {
        width: auto !important;
    }

    .nav {
        position: static !important;
        display: grid !important;
        width: 100% !important;
        transform: none !important;
        padding: 12px !important;
        border-radius: 20px !important;
        max-height: calc(100dvh - 28px);
        overflow: auto !important;
    }

    .nav-group-title,
    .nav-link .label,
    .account-mini {
        opacity: 1 !important;
        max-height: none !important;
        transform: none !important;
    }

    .nav-link {
        grid-template-columns: 24px minmax(0, 1fr) !important;
        min-height: 46px !important;
        white-space: normal !important;
    }

    .nav-toggle {
        display: none !important;
    }

    .split,
    .split-equal {
        grid-template-columns: 1fr !important;
    }

    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .page-hero {
        padding: 20px !important;
    }

    .card {
        padding: 18px !important;
    }
}

/* Desktop keeps the existing two-column shell but tightens overflow behavior. */
@media (min-width: 1181px) {
    .main-area,
    .page-shell,
    .card,
    .table-wrap {
        min-width: 0;
    }

    .split {
        grid-template-columns: minmax(0, 1.45fr) minmax(320px, .95fr) !important;
    }
}

@media (min-width: 1500px) {
    .wrap {
        max-width: min(96vw, 1880px) !important;
    }
}