/*
 * Global content rules for phones and tablets (docs/MOBILE.md 4.2 - 4.9).
 * Loaded last by template/head.php, after css/shell.css, so it sits on top of
 * style.css and the template. Page CSS loaded later still wins on equal
 * specificity, which is why the floors below are scoped under #content.
 *
 * Breakpoints: 575.98 / 767.98 / 991.98 / 1199.98 (max-width) only.
 * Nothing in this file changes a desktop pointer at 1200px and up, except the
 * two 4.2 content-box rules, which only act on content that overflows.
 */

/* --------------------------------------------------------------------------
   4.2 Content box
   -------------------------------------------------------------------------- */
#content { overflow-wrap: break-word; }
#content iframe,
#content video { max-width: 100%; }
@media (max-width: 1199.98px) {
    /* dark.css sets .content { width: 100vw } under 768px. */
    .main > .content { width: auto; max-width: 100%; }
}

/* --------------------------------------------------------------------------
   4.3 Tab strips and subnav sheets
   One scrolling row per strip, edge fades as overlays on .vh-subnav (a mask
   on the strip would hide the dropdown sheets that live inside it).
   js/shell.js sets data-vt-fade="start|end|both" while a strip overflows and
   keeps the active tab in view.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .vh-subnav { position: relative; --vt-strip-h: 44px; }
    .vh-subnav-tabs {
        flex-wrap: nowrap !important;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .vh-subnav-tabs::-webkit-scrollbar { display: none; }
    .vh-subnav-tab { flex: 0 0 auto; min-height: 44px; }

    .vh-subnav[data-vt-fade]::before,
    .vh-subnav[data-vt-fade]::after {
        content: "";
        position: absolute;
        top: 0;
        height: var(--vt-strip-h);
        width: 20px;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        transition: opacity .15s;
    }
    .vh-subnav[data-vt-fade]::before { left: 0; background: linear-gradient(90deg, var(--card, #151516), transparent); }
    .vh-subnav[data-vt-fade]::after { right: 0; background: linear-gradient(270deg, var(--card, #151516), transparent); }
    .vh-subnav[data-vt-fade="start"]::before,
    .vh-subnav[data-vt-fade="both"]::before,
    .vh-subnav[data-vt-fade="end"]::after,
    .vh-subnav[data-vt-fade="both"]::after { opacity: 1; }
    /* The actions keep a solid edge above the right fade. */
    .vh-subnav-actions { position: relative; z-index: 3; background: var(--card, #151516); }

    /* Icon variant (profile chrome): 64px cells with the full label. */
    .vh-subnav.is-icons { --vt-strip-h: 64px; }
    .vh-subnav.is-icons .vh-subnav-tabs { padding: 0; }
    .vh-subnav.is-icons .vh-subnav-tab,
    .vh-subnav.is-icons .vh-subnav-tabs > .vh-subnav-dd { flex: 1 0 auto; min-width: 72px; }
    .vh-subnav.is-icons .vh-subnav-dd > .vh-subnav-tab { width: 100%; }
    .vh-subnav.is-icons .vh-subnav-tab { height: 64px; padding: 0 12px; font-size: 1.1rem; }
    .vh-subnav.is-icons .vh-subnav-tab::after {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        padding: 0;
        transform: none !important;
        font-size: var(--vt-fs-floor);
        letter-spacing: .08em;
    }

    /* Dropdowns (Employees, Staff) open as bottom sheets: only .open (the
       app.js click handler) shows them, never hover or focus. A fixed
       backdrop eats the dismissing tap. */
    .vh-subnav .vh-subnav-dd:hover .vh-subnav-menu,
    .vh-subnav .vh-subnav-dd:focus-within .vh-subnav-menu {
        opacity: 0;
        visibility: hidden;
    }
    .vh-subnav .vh-subnav-dd.open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1046;
        background: rgba(9, 9, 10, .72);
    }
    .vh-subnav .vh-subnav-dd.open .vh-subnav-menu,
    .vh-subnav.is-icons .vh-subnav-dd.open .vh-subnav-menu {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1047;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: min(75vh, 560px);
        max-height: min(75dvh, 560px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: .5rem .5rem calc(.75rem + var(--vt-safe-b, 0px));
        border: 0;
        border-top: 2px solid #ff9900;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .vh-subnav-menu-item { min-height: 48px; font-size: .875rem; }
    .vh-subnav-menu-title { font-size: var(--vt-fs-floor); }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .vh-subnav .vh-subnav-dd.open .vh-subnav-menu,
    .vh-subnav.is-icons .vh-subnav-dd.open .vh-subnav-menu {
        width: min(480px, 92vw);
        margin: 0 auto;
    }
}
@media (max-width: 767.98px) {
    /* Phones: icon tabs become 48px rows with the icon left of the label. */
    .vh-subnav.is-icons { --vt-strip-h: 48px; margin: .6rem .75rem 0; }
    .vh-subnav.is-icons .vh-subnav-tab,
    .vh-subnav.is-icons .vh-subnav-tabs > .vh-subnav-dd { flex: 0 0 auto; min-width: 0; }
    .vh-subnav.is-icons .vh-subnav-tab {
        height: 48px;
        flex-direction: row;
        gap: 8px;
        padding: 0 14px;
        font-size: 1rem;
        background-image: none;
    }
    .vh-subnav.is-icons .vh-subnav-tab::before { left: 14px; right: 14px; }

    /* Plain subnav: tabs on one row, actions on a second, right-aligned. */
    .vh-subnav:not(.is-icons) { flex-wrap: wrap; padding: 0 .75rem; }
    .vh-subnav:not(.is-icons) .vh-subnav-tabs { flex: 1 1 100%; }
    .vh-subnav:not(.is-icons) .vh-subnav-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
        padding: .4rem 0;
        border-top: 1px solid rgba(255, 255, 255, .06);
    }
}

/* Opt-in strip for page tab and pill rows: add vt-strip to the container.
   No dropdowns inside (the mask would hide them). */
@media (max-width: 1199.98px) {
    .vt-strip {
        display: flex;
        flex-wrap: nowrap !important;
        gap: .4rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding-inline: 12px;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    }
    .vt-strip::-webkit-scrollbar { display: none; }
    .vt-strip > * { flex: 0 0 auto; min-height: 44px; }
    /* Boxed segmented controls keep their borders: no edge fade. */
    .vt-strip.no-fade { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 1199.98px) and (pointer: fine) {
    .vh-subnav-tabs, .vt-strip { scrollbar-width: thin; }
}

/* Touch browsers keep :hover on the last tapped point, and the strip scrolls
   under it, so a hover look equal to the active look marks a second tab.
   Without a hovering pointer only .active and keyboard focus are drawn. */
@media (hover: none) {
    .vh-subnav-tab:hover:not(.active) { color: rgba(224, 224, 224, 0.65); }
    .vh-subnav.is-icons .vh-subnav-tab:hover:not(.active):not(:focus-visible) {
        background-color: transparent;
        color: rgba(224, 224, 224, 0.65);
    }
    .vh-subnav.is-icons .vh-subnav-tab:hover:not(.active):not(:focus-visible)::before { transform: scaleX(0); }
}

/* --------------------------------------------------------------------------
   4.4 Forms: 16px fields on touch (iOS zooms on anything smaller)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px), (any-pointer: coarse) {
    #content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
    #content select,
    #content textarea,
    .modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
    .modal select,
    .modal textarea,
    .offcanvas input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
    .offcanvas select,
    .offcanvas textarea,
    .select2-search__field { font-size: 16px !important; }
}
@media (any-pointer: coarse) {
    #content .form-control:not(textarea),
    #content .form-select,
    .modal .form-control:not(textarea),
    .modal .form-select { min-height: 44px; }
    /* The label is the hit area: padded to a 44px row. */
    #content .form-check { min-height: 44px; }
    #content .form-check-label { padding-block: .7rem; }
    #content .form-check-input { margin-top: .95rem; }
    #content .form-switch { padding-left: 3.1em; }
    #content .form-switch .form-check-input { width: 2.5em; height: 1.35em; margin-left: -3.1em; margin-top: .85rem; }
}

/* --------------------------------------------------------------------------
   4.5 Tap targets (shared classes only)
   -------------------------------------------------------------------------- */
@media (any-pointer: coarse) {
    #content .btn { min-height: 44px; }
    #content .btn.btn-sm,
    #content .btn-group-sm > .btn { min-height: 36px; }
    #content a.btn,
    #content label.btn { display: inline-flex; align-items: center; justify-content: center; }
    #content .pagination .page-link,
    #content .pages { min-width: 40px; min-height: 40px; }
    /* Display at low specificity, so a page rule that hides a pager button
       (first / last arrows on narrow screens) still wins. */
    :where(#content) .pagination .page-link,
    :where(#content) .pages { display: inline-flex; align-items: center; justify-content: center; }
    .dropdown-item { min-height: 44px; display: flex; align-items: center; }
    .btn-close { box-sizing: border-box; width: 44px; height: 44px; padding: 0 !important; background-size: 14px; }
    .vh-subnav-cta { min-height: 40px; }
    .vh-subnav-icon-btn { width: 40px; height: 40px; }
    .topbar .unit-switch .unit-opt { min-height: 32px; min-width: 32px; }
    .lang-item { min-height: 48px; }
    .vtl-confirm-btn { min-height: 44px; }
    .ck.ck-toolbar .ck-button { min-width: 40px; min-height: 40px; }
    /* helpPanel() (app/Helpers/help_helper.php) emits its own <style> inside
       the page, so these are scoped under #content to win over it. */
    #content .vh-help-wrap > summary { min-height: 44px; }
    #content .vh-help-wiki { min-height: 44px; justify-content: center; }
    /* Driver and company names (Markup::username / companyname) are inline
       links inside a sentence or a row. Inline padding grows the hit area to
       about 40px without moving a single line of layout. */
    :where(#content) :is(.vtcname-span, [class*="username-"]) > a { padding-block: 10px; }
}

/* --------------------------------------------------------------------------
   4.6 Tables
   -------------------------------------------------------------------------- */
.vt-scroll-x {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.vt-scroll-x:focus-visible { outline: 2px solid #ff9900; outline-offset: 2px; }
@media (max-width: 767.98px) {
    :where(#content) th,
    :where(#content) td { padding: .5rem; font-variant-numeric: tabular-nums; }

    /* Opt-in stacked table: markup adds role="table|row|cell" and data-label. */
    .vt-table-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .vt-table-stack,
    .vt-table-stack tbody,
    .vt-table-stack tr,
    .vt-table-stack td { display: block; width: 100%; }
    .vt-table-stack tr {
        padding: .6rem .75rem;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }
    .vt-table-stack td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .2rem 0;
        border: 0;
        text-align: right;
    }
    .vt-table-stack td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font: 600 var(--vt-fs-floor)/1.6 'IBM Plex Mono', ui-monospace, monospace;
        letter-spacing: .08em;
        text-transform: uppercase;
        text-align: left;
        color: rgba(224, 224, 224, .62);
    }
}

/* --------------------------------------------------------------------------
   4.7 Grids, cards, segmented controls
   -------------------------------------------------------------------------- */
.vt-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--vt-grid-min, 260px), 100%), 1fr));
}
.vt-seg { display: flex; }
.vt-seg > * { flex: 1 1 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 575.98px) {
    .vt-seg { width: 100%; }
    :where(#content) .card-body { padding: 1rem; }
    :where(#content) .card-header { padding: .75rem 1rem; }
}

/* --------------------------------------------------------------------------
   4.8 Modals as bottom sheets (under 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .modal-dialog:not([class*="modal-fullscreen"]) {
        display: flex;
        align-items: flex-end;
        min-height: 100%;
        max-width: none;
        margin: 0;
    }
    .modal-dialog-centered:not([class*="modal-fullscreen"]) { min-height: 100%; align-items: flex-end; }
    .modal.fade .modal-dialog:not([class*="modal-fullscreen"]) { transform: translateY(24px); }
    .modal.show .modal-dialog:not([class*="modal-fullscreen"]) { transform: none; }
    .modal-dialog:not([class*="modal-fullscreen"]) .modal-content {
        width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        overflow: hidden;
        border: 0;
        border-top: 2px solid #ff9900;
        border-radius: 0;
        padding-bottom: var(--vt-safe-b, 0px);
    }
    .modal-dialog:not([class*="modal-fullscreen"]) .modal-body { overflow-y: auto; overscroll-behavior: contain; }
    .modal-dialog-scrollable:not([class*="modal-fullscreen"]) { height: auto; max-height: none; }
    .modal-footer { flex-wrap: nowrap; gap: .5rem; }
    .modal-footer > * { margin: 0; }
    .modal-footer > .btn { flex: 1 1 0; min-height: 44px; }
    .modal-header .btn-close { margin: -.5rem -.5rem -.5rem auto; }
}

/* --------------------------------------------------------------------------
   4.9 Typography floor for shared labels (below 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    #sidebar .sidebar-header { font-size: var(--vt-fs-floor) !important; }
    #sidebar .sidebar-tail-tag,
    .vh-subnav-badge,
    .lang-item .lang-code,
    .vh-subnav-cta,
    .topbar .unit-switch .unit-opt { font-size: var(--vt-fs-floor); }
    #content .vh-ch,
    #content .vh-wrap.profile .vh-card-h,
    #content .vh-wrap.awards .vh-card-h,
    #content .vh-wrap.rep .vh-card-h,
    #content .pf-st-card-h,
    #content .an-card-h,
    #content .ins-card-h,
    #content .oj-card-h,
    #content .vh-wrap.profile .vh-card-title .count,
    #content .vh-wrap.awards .vh-card-title .count,
    #content .vh-wrap.rep .vh-card-title .count { font-size: max(var(--vt-fs-floor), .66rem); }
}
@media (max-width: 767.98px) {
    #content .vh-ch,
    #content .vh-wrap.profile .vh-card-h,
    #content .vh-wrap.awards .vh-card-h,
    #content .vh-wrap.rep .vh-card-h,
    #content .pf-st-card-h,
    #content .an-card-h,
    #content .ins-card-h,
    #content .oj-card-h { letter-spacing: .08em; }
}