/**
 * ivl-responsive-all.css
 * Comprehensive responsive fixes for ALL Expedite Vaults & Logistics pages.
 * Covers: public marketing, vault client portal, admin/vault dashboard.
 * Load after all other stylesheets. Scoped with specific selectors – safe to include everywhere.
 */

/* ══════════════════════════════════════════════════════════════════
   GLOBAL SAFEGUARDS
══════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    min-width: 0;
    overflow-x: hidden;
}

/* Media: never exceed their container */
img, svg, video, canvas, embed, iframe, object {
    max-width: 100%;
    height: auto;
}

/* Long strings in all contexts */
h1, h2, h3, h4, h5, h6, p, li, td, th, dt, dd, span, label {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Form controls: inherit typography and never overflow their container */
input, select, textarea, button {
    max-width: 100%;
    font: inherit;
}

/* ══════════════════════════════════════════════════════════════════
   PUBLIC MARKETING PAGES  (body.ivl-pub-home)
══════════════════════════════════════════════════════════════════ */

/* ── Utilbar: hide on mobile (hamburger drawer covers all nav) ── */
@media (max-width: 1023px) {
    .ivl-pub-utilbar {
        display: none !important;
    }
}

/* ── Masthead row: guard against very small screens (< 360px) ── */
@media (max-width: 767px) {
    .ivl-pub-masthead__brand .ivl-pub-masthead__logoimg {
        height: 2.8rem !important;
        width: auto !important;
    }
}

@media (max-width: 480px) {
    .ivl-pub-masthead__brand .ivl-pub-masthead__logoimg {
        height: 2.5rem !important;
    }
}

@media (max-width: 400px) {
    .ivl-pub-masthead__row {
        padding-left: 0 !important;
        min-height: 2.25rem;
    }
    .ivl-pub-masthead__brand {
        width: min(13rem, calc(100% - 2.75rem)) !important;
        max-width: calc(100% - 2.75rem) !important;
        padding-left: 0.75rem !important;
    }
    .ivl-pub-masthead__brand .ivl-pub-masthead__logoimg {
        height: 2.3rem !important;
    }
    .ivl-pub-menu-btn {
        margin-right: 0.35rem !important;
    }
}

/* Header overflow guards (marketing shell) */
.ivl-pub-header-shell,
.ivl-pub-masthead,
.ivl-pub-masthead__row,
.ivl-pub-masthead__nav-wrap,
.ivl-pub-masthead__nav,
.ivl-pub-masthead__nav-list,
.ivl-pub-masthead__brand,
.ivl-pub-utilbar,
.ivl-pub-utilbar__row,
.ivl-pub-utilbar__cluster {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .ivl-pub-masthead__row {
        padding-left: max(0.65rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.65rem, env(safe-area-inset-right, 0px));
    }
}

/* ── Hero: align with homepage mobile hero (matches public-marketing-home ≤767) ── */
@media (max-width: 480px) {
    .ivl-pub-hero-split {
        margin-top: 0;
        min-height: clamp(26rem, 82vh, 38rem);
    }
    .ivl-pub-hero-split__overlay {
        padding: 0 !important;
    }
    .ivl-pub-hero-split__card {
        margin-top: -0.625rem !important;
        padding: 1.55rem clamp(1rem, 4.8vw, 1.4rem) max(1.05rem, env(safe-area-inset-bottom, 0px)) !important;
        max-width: none !important;
        width: 100% !important;
        border-radius: 0.5rem 0.5rem 0 0 !important;
    }
    .ivl-pub-hero-split h1 {
        font-size: clamp(1.32rem, 6.5vw, 1.58rem) !important;
    }
    .ivl-pub-hero-split__lede {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }
}

/* ── Track strip: full-width form on mobile ── */
@media (max-width: 599px) {
    .ivl-pub-track-strip__form {
        max-width: 100% !important;
    }
    .ivl-pub-track-strip__shortcuts {
        border-left: none !important;
        padding-left: 0 !important;
        max-width: 100% !important;
    }
    .ivl-pub-track-strip__form-wrap {
        width: 100%;
    }
}

/* Tiny phones: avoid cramped 5-column shortcut strip and preserve readability */
@media (max-width: 430px) {
    .ivl-pub-track-strip__shortcuts:not(.ivl-pub-track-strip__shortcuts--three) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .ivl-pub-track-strip__shortcuts:not(.ivl-pub-track-strip__shortcuts--three) .ivl-pub-track-strip__shortcut {
        min-height: 4.35rem;
    }
    .ivl-pub-track-strip__shortcuts:not(.ivl-pub-track-strip__shortcuts--three) .ivl-pub-track-strip__shortcut-txt {
        white-space: normal;
        line-height: 1.2;
    }
}

/* ── Info banner: smaller padding on mobile ── */
@media (max-width: 480px) {
    .ivl-pub-infobanner {
        padding: 0.5rem 1rem !important;
    }
    .ivl-pub-infobanner__inner {
        font-size: 0.8125rem !important;
    }
}

/* ── Z-section blocks: single column on very small screens ── */
@media (max-width: 479px) {
    .ivl-pub-zblock__slant {
        clip-path: none !important;
    }
}

/* ── Quick tiles grid: 2-col on mobile, already defined; guard 1-col at 360px ── */
@media (max-width: 400px) {
    .ivl-pub-quick__grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Featured grid: already 1-col at <768px; ensure card images are visible ── */
.ivl-pub-featured__card img {
    width: 100%;
    height: clamp(8rem, 22vw, 11rem);
    object-fit: cover;
}

/* Public marketing typography/card consistency across breakpoints */
.ivl-pub-home .ivl-pub-zblock__copy p,
.ivl-pub-home .ivl-pub-updates__card p,
.ivl-pub-home .ivl-pub-featured__body p,
.ivl-pub-home .ivl-pub-carousel__cap,
.ivl-pub-home .ivl-pub-track-strip__shortcut-txt {
    font-size: clamp(0.82rem, 1.1vw, 0.95rem);
    line-height: 1.45;
}

.ivl-pub-home .ivl-pub-updates__card .ivl-pub-updates__title,
.ivl-pub-home .ivl-pub-zblock__slant-title,
.ivl-pub-home .ivl-pub-carousel-section__title,
.ivl-pub-home .ivl-pub-zsection__page-title {
    line-height: 1.2;
}

.ivl-pub-home .ivl-pub-updates__grid,
.ivl-pub-home .ivl-pub-zsection__list,
.ivl-pub-home .ivl-pub-featured__grid {
    align-items: stretch;
}

.ivl-pub-home .ivl-pub-updates__card,
.ivl-pub-home .ivl-pub-featured__card,
.ivl-pub-home .ivl-pub-zblock {
    height: 100%;
}

/* Keep card actions/titles from colliding on small widths */
@media (max-width: 767px) {
    .ivl-pub-home .ivl-pub-updates__card {
        padding: 0.95rem 0.9rem 1rem !important;
    }

    .ivl-pub-home .ivl-pub-updates__card .ivl-pub-updates__title {
        font-size: clamp(0.95rem, 4.3vw, 1.1rem) !important;
    }

    .ivl-pub-home .ivl-pub-zblock__copy p,
    .ivl-pub-home .ivl-pub-updates__card p {
        font-size: 0.88rem !important;
    }
}

/* Common public cards/sections: prevent content clipping in narrow columns */
.ivl-pub-updates__card,
.ivl-pub-featured__card,
.ivl-pub-zblock,
.ivl-pub-minibanner__inner > * {
    min-width: 0;
}

/* Keep section gutters consistent from small phones to desktop */
.ivl-pub-track-strip,
.ivl-pub-infobanner,
.ivl-pub-zsection,
.ivl-pub-carousel-section,
.ivl-pub-minibanner,
.ivl-pub-updates,
.ivl-pub-alertstrip,
.ivl-pub-stats {
    padding-left: clamp(0.75rem, 3.5vw, 1.25rem);
    padding-right: clamp(0.75rem, 3.5vw, 1.25rem);
}

/* ── Stats strip: 2-col on mobile (already defined), guard 1-col at 360px ── */
@media (max-width: 400px) {
    .ivl-pub-stats__grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Bottom CTA buttons: stack on mobile ── */
@media (max-width: 480px) {
    .ivl-pub-bottom-cta__btns {
        flex-direction: column !important;
    }
    .ivl-pub-bottom-cta__btns a {
        width: 100% !important;
    }
}

/* ── Footer: single column on small screens ── */
@media (max-width: 599px) {
    .ivl-pub-footer__grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* ── Footer legal: wrap on mobile ── */
@media (max-width: 599px) {
    .ivl-pub-footer__legal {
        font-size: 0.6875rem !important;
    }
}

/* ── Marketing subpages: panels, heroes, contact split (services, contact, offices, etc.) ── */
body.ivl-pub-home .ivl-pub-subpage,
body.ivl-pub-home .ivl-pub-subpage__inner,
body.ivl-pub-home .ivl-pub-panel,
body.ivl-pub-home .ivl-pub-contact-split,
body.ivl-pub-home .ivl-pub-subpage-hero__inner {
    min-width: 0;
}

#app-content {
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    body.ivl-pub-home .ivl-pub-subpage {
        padding-top: 1.75rem;
        padding-bottom: 2.5rem;
        padding-left: clamp(0.65rem, 3.5vw, 1rem);
        padding-right: clamp(0.65rem, 3.5vw, 1rem);
    }

    body.ivl-pub-home .ivl-pub-panel--pad {
        padding: 1.25rem 1rem !important;
    }

    body.ivl-pub-home .ivl-pub-subpage-hero--image .ivl-pub-subpage-hero__inner {
        padding-left: clamp(0.75rem, 4vw, 1rem);
        padding-right: clamp(0.75rem, 4vw, 1rem);
    }

    body.ivl-pub-home .ivl-pub-subpage-hero h1 {
        font-size: clamp(1.28rem, 6vw, 1.85rem) !important;
        line-height: 1.15 !important;
    }

    body.ivl-pub-home .ivl-pub-subpage-hero p {
        font-size: clamp(0.88rem, 3.2vw, 1rem) !important;
    }

    body.ivl-pub-home .ivl-pub-subpage-hero p.ivl-pub-subpage-hero__fine {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: min(26.5rem, calc(100% - 0.75rem)) !important;
        padding-left: clamp(0.35rem, 3vw, 0.85rem);
        padding-right: clamp(0.35rem, 3vw, 0.85rem);
    }
}

@media (max-width: 599px) {
    .ivl-pub-footer__bottom {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1rem !important;
    }

    .ivl-pub-footer__social {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

/* Subpage tables (offices, pricing, etc.) */
body.ivl-pub-home .ivl-pub-subpage table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* Public tracking layout: band + results never wider than viewport */
.ivl-tracking-main,
.ivl-tracking-page-inner,
.ivl-tracking-results-block,
.ivl-tracking-content-band {
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .ivl-tracking-promo__left {
        padding: 1rem 1rem !important;
        min-height: 0;
    }

    .ivl-tracking-promo__right {
        padding: 1rem !important;
    }

    .ivl-tracking-page-title {
        margin-bottom: 1rem !important;
    }
}

/* Billing shell: tighter gutters on small phones */
@media (max-width: 640px) {
    body.ivl-vault-billing-theme .ivl-bill-ui-hero__inner,
    body.ivl-vault-billing-theme .ivl-bill-ui-shell__inner {
        padding-left: clamp(0.65rem, 3.2vw, 1rem) !important;
        padding-right: clamp(0.65rem, 3.2vw, 1rem) !important;
    }

    body.ivl-vault-billing-theme .ivl-bill-ui-table-wrap {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
}

/* Standalone 2FA / forgot-password: respect notches over plain 1.5rem padding */
body.ivl-vault-twofa-theme {
    padding-top: max(1.25rem, env(safe-area-inset-top, 0px)) !important;
    padding-right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(1.25rem, env(safe-area-inset-left, 0px)) !important;
}

/* ── Tables in public marketing pages (exclude client vault portal: tables stay <table> + wrapper scroll) ── */
.ivl-pub-home:not(.ivl-vault-user-shell) table,
.ivl-pub-home:not(.ivl-vault-user-shell) .ivl-pro-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* ── Drawer: ensure it doesn't go beyond viewport ── */
.ivl-pub-drawer__panel {
    max-width: min(20rem, 96vw) !important;
}

/* ── Carousel: touch-friendly ── */
.ivl-pub-carousel__viewport {
    touch-action: pan-y;
}

/* ── Alert strip: pad on mobile ── */
@media (max-width: 480px) {
    .ivl-pub-alertstrip__inner {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   ADMIN VAULT HEADER  (.ivl-adm-utilbar, .ivl-adm-masthead)
══════════════════════════════════════════════════════════════════ */

/* Admin brand palette unification (dashboards + admin vault pages) */
body.ivl-admin-shell {
    --color-primary: #4d148c;
    --color-on-primary: #ffffff;
    --color-primary-container: #5a24a8;
    --color-secondary: #ff6600;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #cc5200;
    --color-outline: #9a7db8;
    --color-outline-variant: #d9cdef;
}

/* Admin login keeps high contrast on dark backdrop */
body.ivl-login-page {
    --color-primary: #8b5fd6;
    --color-on-primary: #ffffff;
    --color-primary-container: #4d148c;
    --color-secondary: #ff6600;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #cc5200;
}

/* ── Utilbar: wrap on tablet; hide date on mobile ── */
@media (max-width: 900px) {
    .ivl-adm-utilbar {
        flex-wrap: wrap !important;
        padding: 0.25rem 1rem !important;
        gap: 0.4rem 0.75rem !important;
    }
    /* Hide date item (first span) on tablet */
    .ivl-adm-utilbar > span:first-child:not(.ivl-adm-utilbar__item--strong) {
        display: none !important;
    }
    .ivl-adm-utilbar > span.ivl-adm-utilbar__sep:first-of-type {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .ivl-adm-utilbar {
        justify-content: space-between !important;
        padding: 0.2rem 0.75rem !important;
    }
    /* Keep only admin name + sign out on very small screens */
    .ivl-adm-utilbar > span.ivl-adm-utilbar__sep {
        display: none !important;
    }
    /* Hide date and "Logistics admin" link, keep admin name + sign-out */
    .ivl-adm-utilbar > span:not(.ivl-adm-utilbar__item--strong) {
        display: none !important;
    }
    .ivl-adm-utilbar > a:not(.ivl-adm-utilbar__item--signout) {
        display: none !important;
    }
}

/* ── Masthead: reduce logo slot on mobile ── */
@media (max-width: 767px) {
    /* Keep admin vault header pinned without overlaying page content */
    body.ivl-admin-shell header.ivl-vault-app-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 120 !important;
    }
    .ivl-adm-masthead {
        --adm-logo-slot: 10.75rem !important;
        --adm-slant: 6px !important;
    }
    /* Keep brand text visible and readable on mobile */
    .ivl-adm-masthead__brand {
        font-size: 0.82rem !important;
        letter-spacing: 0.01em !important;
        gap: 0.45rem !important;
        left: 0.6rem !important;
        width: 9.9rem !important;
        justify-content: flex-start !important;
    }
    .ivl-adm-masthead__brand-tile {
        font-size: initial !important;
        flex-shrink: 0;
    }
    /* Nav: smaller pills */
    .ivl-adm-masthead__nav {
        padding: 0.2rem 0.4rem !important;
        gap: 0.2rem !important;
    }
    .ivl-adm-nav__link {
        font-size: 0.68rem !important;
        padding: 0.28rem 0.45rem !important;
        clip-path: none !important;
        border-radius: 0.2rem !important;
    }
}

@media (max-width: 400px) {
    .ivl-adm-masthead {
        --adm-logo-slot: 9.25rem !important;
    }
    .ivl-adm-masthead__brand {
        left: 0.45rem !important;
        width: 8.4rem !important;
        font-size: 0.75rem !important;
    }
    .ivl-adm-nav__link {
        font-size: 0.62rem !important;
        padding: 0.25rem 0.35rem !important;
    }
}

@media (max-width: 767px) {
    .ivl-adm-masthead__nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        max-width: 100%;
    }
    .ivl-adm-masthead__nav::-webkit-scrollbar {
        display: none;
    }
}

/* ── Admin main content: prevent overflow ── */
body.ivl-admin-shell {
    overflow-x: hidden;
}

body.ivl-admin-shell main {
    overflow-x: hidden;
    min-width: 0;
}

/* Marketing-shell admin (logistics + vault admin): main column fits viewport, no horizontal bleed */
body.ivl-admin-shell.ivl-vault-user-shell #app-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /*
     * unified-glass-theme sets #app-content { z-index: 1 } so portal content sits above the page
     * backdrop. That traps fixed .modal-backdrop / dialogs inside a context below the sticky
     * marketing header (.ivl-pub-header-shell, z-index 50), so modal tops appear “under” the
     * header until layout scroll changes overlap. Reset stacking here so fixed overlays use
     * their own z-index (e.g. z-50 / z-110) above the masthead and below the mobile drawer (60).
     */
    z-index: auto;
}

body.ivl-admin-shell.ivl-vault-user-shell .ivl-pro-header__inner {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.ivl-admin-shell.ivl-vault-user-shell .ivl-pro-header__inner > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

body.ivl-admin-shell.ivl-vault-user-shell .ivl-pro-wrap {
    max-width: 100%;
    box-sizing: border-box;
}

body.ivl-admin-shell.ivl-vault-user-shell main.ivl-pro-main {
    max-width: 100%;
    box-sizing: border-box;
}

/* ── Admin pro header on mobile ── */
@media (max-width: 640px) {
    body.ivl-admin-shell .ivl-pro-header {
        clip-path: none !important;
        padding-bottom: 1.25rem !important;
        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    }
    body.ivl-admin-shell .ivl-pro-header__inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    body.ivl-admin-shell .ivl-pro-header__actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    /* Only header CTAs — avoid forcing min-width on every .ivl-pro-btn (tables, modals, panels) */
    body.ivl-admin-shell .ivl-pro-header__actions .ivl-pro-btn {
        flex: 1 1 calc(50% - 0.25rem) !important;
        justify-content: center !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ── Admin KPI strip: responsive on mobile ── */
@media (max-width: 640px) {
    body.ivl-admin-shell .ivl-pro-kpi-strip {
        padding: 0.75rem 1rem !important;
    }
    body.ivl-admin-shell .ivl-pro-kpi-strip__inner {
        gap: 0.65rem !important;
    }
}

/* ── Admin wrap: reduce padding on mobile ── */
@media (max-width: 640px) {
    body.ivl-admin-shell .ivl-pro-wrap {
        padding: 1rem 1rem 0 !important;
    }
}

/* ── Admin panel head: wrap title + action on mobile ── */
@media (max-width: 640px) {
    body.ivl-admin-shell .ivl-pro-panel__head {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    body.ivl-admin-shell .ivl-pro-panel__title-wrap {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

/* ── Admin modals (ivl-pro-modal-backdrop): bottom sheet + scroll body on mobile ── */
@media (max-width: 640px) {
    body.ivl-admin-shell .ivl-pro-modal-backdrop {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        padding-left: max(0px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0px, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
    body.ivl-admin-shell .ivl-pro-modal {
        max-width: 100% !important;
        width: 100% !important;
        max-height: min(92dvh, 94vh, 100svh - 0.5rem) !important;
        border-radius: 0.75rem 0.75rem 0 0 !important;
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    body.ivl-admin-shell .ivl-pro-modal--lg {
        max-width: 100% !important;
    }
    body.ivl-admin-shell .ivl-pro-modal__body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    body.ivl-admin-shell .ivl-pro-modal__foot {
        flex-wrap: wrap !important;
        justify-content: stretch !important;
        gap: 0.5rem !important;
    }
    body.ivl-admin-shell .ivl-pro-modal__foot .ivl-pro-btn {
        flex: 1 1 calc(50% - 0.25rem) !important;
        min-width: 0 !important;
        justify-content: center !important;
    }
}

/* ── Admin table: horizontal scroll (wrapper only — never display:block on <table>) ── */
body.ivl-admin-shell .ivl-pro-table-scroll {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Inline overflow wrappers (many vault admin pages use style="overflow-x:auto" instead of class) */
body.ivl-admin-shell .ivl-pro-panel [style*="overflow-x:auto"],
body.ivl-admin-shell .ivl-pro-panel [style*="overflow-x: auto"] {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.ivl-admin-shell .ivl-pro-panel [style*="overflow-x:auto"] .ivl-pro-table,
body.ivl-admin-shell .ivl-pro-panel [style*="overflow-x: auto"] .ivl-pro-table {
    display: table !important;
    min-width: 100%;
    width: auto;
}

body.ivl-admin-shell [style*="overflow-x:auto"],
body.ivl-admin-shell [style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
}

/* ── Admin vault: registry tables in panel (mobile scroll + wrapping headers; exclude dashboard recent tables) ── */
@media (max-width: 640px) {
    body.ivl-admin-shell .ivl-pro-panel .overflow-x-auto:not(.flex) .ivl-pro-table:not(.ivl-admin-dash-recent-table) {
        min-width: 52rem;
        width: auto;
    }

    body.ivl-admin-shell .ivl-pro-panel .overflow-x-auto:not(.flex) .ivl-pro-table:not(.ivl-admin-dash-recent-table) thead th {
        white-space: normal !important;
        word-break: break-word;
        line-height: 1.25;
        vertical-align: bottom;
    }

    body.ivl-admin-shell .ivl-pro-panel .overflow-x-auto:not(.flex) .ivl-pro-table:not(.ivl-admin-dash-recent-table) tbody td {
        vertical-align: top;
    }

    body.ivl-admin-shell .ivl-pro-panel .overflow-x-auto:not(.flex) .ivl-pro-table:not(.ivl-admin-dash-recent-table) td.r .flex {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 0.35rem !important;
        max-width: 100%;
    }

    body.ivl-admin-shell .ivl-pro-panel .overflow-x-auto:not(.flex) .ivl-pro-table:not(.ivl-admin-dash-recent-table) td .flex.items-center.gap-3 {
        align-items: flex-start;
        min-width: 0;
    }
}

/* ── Admin chart cards: stack on mobile ── */
@media (max-width: 1024px) {
    body.ivl-admin-shell .ivl-pro-grid-main {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    body.ivl-admin-shell .ivl-pro-card-grid--2,
    body.ivl-admin-shell .ivl-pro-card-grid--3,
    body.ivl-admin-shell .ivl-pro-card-grid--4 {
        grid-template-columns: 1fr !important;
    }
}

/* Vault admin dashboard: recent clients / invoices panels fill grid track (no phantom right gap) */
body.ivl-admin-shell .ivl-pro-card-grid--2 > .ivl-pro-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    body.ivl-admin-shell .ivl-admin-dash-recent-table {
        table-layout: fixed;
        width: 100% !important;
    }

    body.ivl-admin-shell .ivl-admin-dash-recent-table th:last-child,
    body.ivl-admin-shell .ivl-admin-dash-recent-table td:last-child {
        width: 4.75rem;
        text-align: right;
        white-space: nowrap;
    }

    body.ivl-admin-shell .ivl-admin-dash-recent-table .ivl-pro-btn {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* ── Admin dashboard aside card: fill width on mobile ── */
@media (max-width: 1024px) {
    body.ivl-admin-shell .ivl-dash-console-aside-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── Admin chart card: min-height on mobile ── */
@media (max-width: 640px) {
    body.ivl-admin-shell .ivl-vpro-chart-card {
        min-width: 0 !important;
    }
    body.ivl-admin-shell .ivl-vpro-chart-card__chart-wrap {
        min-height: 8rem !important;
    }
    body.ivl-admin-shell .ivl-vpro-chart-card__head {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    body.ivl-admin-shell .ivl-vpro-chart-card__period-btns {
        margin-left: auto !important;
    }
}

/* ── Admin vault dashboard: card/text/section consistency on all devices ── */
body.ivl-admin-shell .ivl-pro-main,
body.ivl-admin-shell .ivl-pro-wrap,
body.ivl-admin-shell .ivl-pro-panel,
body.ivl-admin-shell .ivl-pro-kpi,
body.ivl-admin-shell .ivl-pro-header__inner {
    min-width: 0;
}

body.ivl-admin-shell .ivl-pro-wrap {
    padding-left: clamp(0.75rem, 3vw, 1.5rem);
    padding-right: clamp(0.75rem, 3vw, 1.5rem);
}

body.ivl-admin-shell .ivl-pro-header {
    padding-left: clamp(0.75rem, 3vw, 1.5rem);
    padding-right: clamp(0.75rem, 3vw, 1.5rem);
}

body.ivl-admin-shell .ivl-pro-panel__title,
body.ivl-admin-shell .ivl-pro-header__title {
    line-height: 1.2;
    overflow-wrap: anywhere;
}

body.ivl-admin-shell .ivl-pro-header__sub,
body.ivl-admin-shell .ivl-pro-kpi__sub,
body.ivl-admin-shell .ivl-pro-table td,
body.ivl-admin-shell .ivl-pro-table th {
    overflow-wrap: anywhere;
}

body.ivl-admin-shell .ivl-pro-card-grid--2 > *,
body.ivl-admin-shell .ivl-pro-card-grid--3 > *,
body.ivl-admin-shell .ivl-pro-card-grid--4 > * {
    min-width: 0;
}

@media (max-width: 1024px) {
    body.ivl-admin-shell .ivl-pro-header__title {
        font-size: clamp(1.2rem, 3.8vw, 1.7rem);
    }

    body.ivl-admin-shell .ivl-pro-header__sub {
        font-size: clamp(0.82rem, 2.1vw, 0.95rem);
    }
}

@media (max-width: 767px) {
    body.ivl-admin-shell .ivl-pro-kpi__label {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
    }

    body.ivl-admin-shell .ivl-pro-kpi__value {
        font-size: clamp(1rem, 4.5vw, 1.3rem) !important;
        line-height: 1.1 !important;
    }

    body.ivl-admin-shell .ivl-pro-kpi__sub {
        font-size: 0.75rem !important;
        line-height: 1.35 !important;
    }

    body.ivl-admin-shell .ivl-pro-table {
        font-size: 0.78rem !important;
    }

    body.ivl-admin-shell .ivl-pro-table:not(.ivl-log-shipments-table) thead th {
        white-space: nowrap;
        font-size: 0.62rem !important;
    }

    /* Logistics “All shipments” table uses its own wrapping + mobile card layout */
    body.ivl-admin-shell .ivl-log-shipments-table thead th {
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    body.ivl-admin-shell .ivl-pro-btn {
        white-space: normal !important;
        text-align: center !important;
    }
}

@media (max-width: 520px) {
    body.ivl-admin-shell .ivl-pro-panel__head {
        align-items: flex-start !important;
    }

    body.ivl-admin-shell .ivl-pro-panel__title-wrap {
        width: 100% !important;
    }

    body.ivl-admin-shell .ivl-pro-header__actions,
    body.ivl-admin-shell .ivl-pro-panel__head .ivl-pro-btn {
        width: 100% !important;
    }

    body.ivl-admin-shell .ivl-pro-header__actions .ivl-pro-btn,
    body.ivl-admin-shell .ivl-pro-panel__head .ivl-pro-btn {
        flex: 1 1 100% !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    body.ivl-admin-shell .ivl-pro-table th,
    body.ivl-admin-shell .ivl-pro-table td {
        padding: 0.5rem 0.55rem !important;
    }
}

/* Admin app modals (estates, appraisals, etc.) */
@media (max-width: 640px) {
    body.ivl-admin-shell .ivl-app-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(92dvh, 94vh, 100svh - 0.5rem) !important;
        border-radius: 0.75rem 0.75rem 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
    }

    body.ivl-admin-shell .ivl-app-modal__head,
    body.ivl-admin-shell .ivl-app-modal__body,
    body.ivl-admin-shell .ivl-app-modal__footer {
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }

    body.ivl-admin-shell .ivl-app-modal__head {
        flex-shrink: 0 !important;
    }

    body.ivl-admin-shell .ivl-app-modal__body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.ivl-admin-shell .ivl-app-modal__footer {
        flex-shrink: 0 !important;
        flex-wrap: wrap !important;
    }

    body.ivl-admin-shell .ivl-app-modal__body .ivl-pro-form-row--2,
    body.ivl-admin-shell .ivl-app-modal__body .ivl-pro-form-row--3 {
        grid-template-columns: 1fr !important;
    }

    body.ivl-admin-shell .ivl-confirm-modal__card {
        width: min(100%, 30rem) !important;
        margin: 0.75rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   ADMIN LOGISTICS DASHBOARD  (admin/dashboard.php, main.dashboard-main-inner)
   Chart, filters, table scroll, footer, toasts — logistics-only scope
══════════════════════════════════════════════════════════════════ */

body.ivl-admin-shell main.dashboard-main-inner {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Logistics dashboard: chart area never wider than panel */
body.ivl-admin-shell main.dashboard-main-inner .ivl-pro-panel__body:has(#shipmentChart) {
    position: relative;
    overflow: hidden;
}

body.ivl-admin-shell main.dashboard-main-inner #shipmentChart {
    max-width: 100%;
    box-sizing: border-box;
}

body.ivl-admin-shell main.dashboard-main-inner #toast-container {
    top: max(0.75rem, env(safe-area-inset-top, 0px));
    right: max(0.75rem, env(safe-area-inset-right, 0px));
}

@media (max-width: 767px) {
    body.ivl-admin-shell main.dashboard-main-inner .ivl-pro-panel__body:has(#shipmentChart) {
        height: min(16rem, 44vh) !important;
        min-height: 10.5rem;
    }
}

@media (max-width: 640px) {
    body.ivl-admin-shell main.dashboard-main-inner .ivl-pro-panel > div[style*="background:#f8fafc"] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    body.ivl-admin-shell main.dashboard-main-inner #filter-form {
        gap: 0.65rem;
    }

    body.ivl-admin-shell main.dashboard-main-inner .ivl-pro-panel div[style*="overflow-x:auto"],
    body.ivl-admin-shell main.dashboard-main-inner .ivl-pro-panel div[style*="overflow-x: auto"] {
        overscroll-behavior-x: contain;
    }
}

@media (max-width: 480px) {
    body.ivl-admin-shell main.dashboard-main-inner footer {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0.35rem !important;
    }
}

/* Logistics modals: .modal-backdrop + .ivl-pro-modal (only admin/dashboard.php) */
@media (max-width: 640px) {
    body.ivl-admin-shell .modal-backdrop:has(.modal-content.ivl-pro-modal) {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    body.ivl-admin-shell .modal-backdrop .modal-content.ivl-pro-modal {
        width: 100% !important;
        max-width: 100% !important;
        /* Auto height + cap: bottom sheet should not force 90vh (clips top on short viewports) */
        height: auto !important;
        max-height: min(92dvh, 94vh, 100svh - 0.5rem) !important;
        border-radius: 0.75rem 0.75rem 0 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    body.ivl-admin-shell .modal-backdrop .modal-content.ivl-pro-modal .ivl-pro-modal__body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Admin shell: Tailwind .modal-backdrop (vault pages) — centered + insets; exclude logistics .ivl-pro-modal sheets ── */
@media (max-width: 640px) {
    body.ivl-admin-shell .modal-backdrop:not(.hidden):not(:has(.modal-content.ivl-pro-modal)) {
        align-items: center !important;
        justify-content: center !important;
        padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    }

    body.ivl-admin-shell .modal-backdrop:not(.hidden):not(:has(.modal-content.ivl-pro-modal)) > div:first-child:not(.modal-content.ivl-pro-modal) {
        width: min(100%, calc(100vw - 1.5rem)) !important;
        max-width: min(52rem, calc(100vw - 1.5rem)) !important;
        max-height: min(90dvh, 92vh, 100svh - 1.25rem) !important;
        border-radius: 0.85rem !important;
        margin: 0 !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Customers page: .ivl-modal (legacy) — center + insets so dialogs clear sticky marketing header ── */
@media (max-width: 640px) {
    body.ivl-admin-shell .ivl-modal.open {
        align-items: center !important;
        justify-content: center !important;
        padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    }

    body.ivl-admin-shell .ivl-modal.open .ivl-modal-box {
        width: min(100%, calc(100vw - 1.5rem)) !important;
        max-width: min(56rem, calc(100vw - 1.5rem)) !important;
        max-height: min(90dvh, 92vh, 100svh - 1.25rem) !important;
        border-radius: 0.85rem !important;
        min-height: 0 !important;
    }

    body.ivl-admin-shell .ivl-modal.open .ivl-modal-body {
        min-height: 0 !important;
    }

    body.ivl-admin-shell .ivl-modal-footer {
        flex-wrap: wrap !important;
    }
}

/* ── Confirm overlays (.ivl-confirm-modal) + vault JS confirm ── */
@media (max-width: 640px) {
    body.ivl-admin-shell .ivl-confirm-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    }

    body.ivl-admin-shell .ivl-confirm-modal__card {
        width: min(100%, calc(100vw - 1.5rem)) !important;
        max-width: min(28rem, calc(100vw - 1.5rem)) !important;
        border-radius: 0.85rem !important;
        margin: 0 !important;
    }

    #vault-confirm-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    }

    #vault-confirm-content {
        width: min(100%, calc(100vw - 1.5rem)) !important;
        max-width: min(26rem, calc(100vw - 1.5rem)) !important;
        border-radius: 0.85rem !important;
        max-height: min(88dvh, 90vh, 100svh - 1.25rem) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #vault-confirm-content > div:last-child {
        flex-direction: column !important;
    }

    #vault-confirm-content > div:last-child button {
        width: 100% !important;
    }
}

/* ── Invoices / payments: fixed shell — center card + safe insets (clear sticky marketing header) ── */
@media (max-width: 640px) {
    body.ivl-admin-shell #create-invoice-modal:not(.hidden),
    body.ivl-admin-shell #record-payment-modal:not(.hidden),
    body.ivl-admin-shell #proof-modal:not(.hidden) {
        padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    }

    body.ivl-admin-shell #create-invoice-modal:not(.hidden) > div,
    body.ivl-admin-shell #record-payment-modal:not(.hidden) > div,
    body.ivl-admin-shell #proof-modal:not(.hidden) > div {
        align-items: center !important;
        justify-content: center !important;
        min-height: 100% !important;
        padding: 0 !important;
    }

    body.ivl-admin-shell #create-invoice-modal .ivl-inv-modal,
    body.ivl-admin-shell #record-payment-modal .ivl-inv-modal,
    body.ivl-admin-shell #record-payment-modal .ivl-pay-modal {
        max-height: min(90dvh, 92vh, 100svh - 1.25rem) !important;
        border-radius: 0.85rem !important;
        width: min(100%, calc(100vw - 1.5rem)) !important;
    }

    body.ivl-admin-shell #proof-modal .max-w-3xl {
        max-height: min(90dvh, 92vh, 100svh - 1.25rem) !important;
        border-radius: 0.85rem !important;
        width: min(100%, calc(100vw - 1.5rem)) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   VAULT CLIENT PORTAL  (body.ivl-vault-portal-theme, .ivl-vault-console, .ivl-vault-subpage)
══════════════════════════════════════════════════════════════════ */

/* ── Portal overflow prevention ── */
body.ivl-vault-portal-theme,
body.ivl-vault-app-theme {
    overflow-x: hidden;
}

body.ivl-vault-portal-theme main,
body.ivl-vault-app-theme main {
    overflow-x: hidden;
    min-width: 0;
}

/* ── Portal top bar (ivl-bar): fine-tune on very small screens ── */
@media (max-width: 360px) {
    .ivl-bar__logo-wrap {
        max-width: min(15rem, 78vw) !important;
        padding: 0 0.6rem !important;
    }
    .ivl-bar__logo-wrap img {
        height: 38px !important;
    }
    .ivl-bar__avatar-initials {
        font-size: 0.55rem !important;
        width: 22px !important;
        height: 22px !important;
    }
}

@media (max-width: 640px) {
    .ivl-bar__logo-wrap {
        max-width: min(16rem, 80vw) !important;
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: 0.5rem !important;
    }
    .ivl-bar__nav-link {
        padding: 0 0.65rem !important;
        font-size: 0.66rem !important;
    }
}

/* ── Portal sub-page header: remove clip-path & fix padding on mobile ── */
@media (max-width: 640px) {
    .ivl-pro-header {
        clip-path: none !important;
        padding: 1.25rem 1rem !important;
    }
    .ivl-pro-header__inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    .ivl-pro-header__actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .ivl-pro-header__actions .ivl-pro-btn {
        flex: 1 1 calc(50% - 0.25rem) !important;
        justify-content: center !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ── Vault pro wrap: reduce padding on mobile ── */
@media (max-width: 640px) {
    .ivl-vault-portal-theme .ivl-pro-wrap,
    .ivl-vault-app-theme .ivl-pro-wrap {
        padding: 1rem 1rem 0 !important;
    }
    .ivl-vault-portal-theme .ivl-pro-kpi-strip,
    .ivl-vault-app-theme .ivl-pro-kpi-strip {
        padding: 0.75rem 1rem !important;
    }
}

/* ── Vault dashboard: less space between welcome row and Total vault value when stacked ── */
@media (max-width: 768px) {
    body.ivl-vault-console .ivl-dash-console-hero__top {
        margin-bottom: 0.875rem !important;
    }
}

/* ── Vault dashboard console hero: compact on mobile ── */
@media (max-width: 640px) {
    body.ivl-vault-console .ivl-dash-console-hero__inner {
        padding: 1.25rem 1rem 1.5rem !important;
    }
    body.ivl-vault-console .ivl-dash-console-hero__top {
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    body.ivl-vault-console .ivl-dash-console-hero__title {
        font-size: clamp(1.2rem, 6vw, 1.65rem) !important;
    }
    body.ivl-vault-console .ivl-dash-console-hero__actions {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    body.ivl-vault-console .ivl-dash-console-btn {
        flex: 1 1 auto !important;
        justify-content: center !important;
        min-width: 7rem !important;
    }
    body.ivl-vault-console .ivl-dash-console-hero__value-block {
        max-width: 100% !important;
    }
    body.ivl-vault-console .ivl-dash-console-hero__amount {
        font-size: clamp(1.4rem, 7vw, 2rem) !important;
    }
    body.ivl-vault-console .ivl-dash-console-shell__inner {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ── Flash message: compact on mobile ── */
@media (max-width: 640px) {
    body.ivl-vault-console .ivl-dash-console-flash-wrap {
        padding: 0.5rem 0.75rem 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   CLIENT USER DASHBOARD  (vault/dashboard.php, body.ivl-vault-console)
   Cards, typography, sections, tables, aside — all viewports
══════════════════════════════════════════════════════════════════ */

body.ivl-vault-console .ivl-dashboard-main {
    min-width: 0;
    width: 100%;
}

body.ivl-vault-console .ivl-dash-console-split__main,
body.ivl-vault-console .ivl-dash-console-split__aside {
    min-width: 0;
}

body.ivl-vault-console .ivl-dash-console-shell__inner {
    padding-left: clamp(0.75rem, 3vw, 2rem);
    padding-right: clamp(0.75rem, 3vw, 2rem);
}

body.ivl-vault-console .ivl-dash-console-hero__inner {
    padding-left: clamp(0.75rem, 3vw, 2rem);
    padding-right: clamp(0.75rem, 3vw, 2rem);
}

body.ivl-vault-console .ivl-dash-console-flash-wrap {
    padding-left: clamp(0.75rem, 3vw, 2rem);
    padding-right: clamp(0.75rem, 3vw, 2rem);
}

@media (max-width: 1024px) {
    body.ivl-vault-console .ivl-dash-console-split__aside {
        width: 100%;
        max-width: 100%;
    }

    body.ivl-vault-console .ivl-vpro-chart-card,
    body.ivl-vault-console .ivl-dash-console-aside-card {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    body.ivl-vault-console .ivl-dash-console-hero__tagline {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    body.ivl-vault-console .ivl-dash-console-hero__date {
        white-space: normal !important;
        line-height: 1.35 !important;
        font-size: 0.7rem !important;
    }

    body.ivl-vault-console .ivl-dash-console-snapshot__cell dd {
        font-size: clamp(0.85rem, 3.8vw, 0.95rem) !important;
        line-height: 1.35 !important;
    }

    body.ivl-vault-console .ivl-dash-console-snapshot__cell dt {
        font-size: 0.6rem !important;
    }

    body.ivl-vault-console .ivl-dash-console-h2 {
        font-size: clamp(1rem, 4vw, 1.125rem) !important;
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.ivl-vault-console .ivl-dash-console-intro {
        font-size: clamp(0.8125rem, 3.2vw, 0.9rem) !important;
        max-width: 100% !important;
    }

    body.ivl-vault-console .ivl-dash-console-empty {
        font-size: 0.8125rem !important;
        line-height: 1.45 !important;
    }

    body.ivl-vault-console .ivl-dash-console-table-wrap {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    body.ivl-vault-console .ivl-dash-console-table tbody th,
    body.ivl-vault-console .ivl-dash-console-table tbody td {
        font-size: clamp(0.75rem, 2.8vw, 0.8125rem) !important;
    }

    body.ivl-vault-console .ivl-dash-console-table thead th {
        font-size: 0.58rem !important;
        padding: 0.5rem 0.55rem !important;
    }

    body.ivl-vault-console .ivl-dash-console-pill {
        white-space: normal !important;
        text-align: center !important;
        max-width: 100% !important;
        line-height: 1.2 !important;
    }

    body.ivl-vault-console .ivl-dash-console-panel__foot {
        text-align: center !important;
    }

    body.ivl-vault-console .ivl-vpro-chart-card__head {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }

    body.ivl-vault-console .ivl-vpro-chart-card__period-btns {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        width: 100% !important;
        margin-top: 0.25rem !important;
    }

    body.ivl-vault-console .ivl-vpro-chart-card__title {
        font-size: clamp(0.88rem, 3.5vw, 0.95rem) !important;
    }

    body.ivl-vault-console .ivl-vpro-chart-card__subtitle {
        font-size: clamp(0.62rem, 2.5vw, 0.6875rem) !important;
        line-height: 1.35 !important;
    }

    body.ivl-vault-console .ivl-dash-console-aside-link {
        white-space: normal !important;
        text-align: right !important;
        line-height: 1.25 !important;
    }

    body.ivl-vault-console .ivl-dash-console-aside-muted,
    body.ivl-vault-console .ivl-dash-console-aside-lede {
        font-size: clamp(0.75rem, 3vw, 0.8125rem) !important;
    }

    body.ivl-vault-console .ivl-dash-console-dist {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    body.ivl-vault-console .ivl-dash-console-hero__actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.ivl-vault-console .ivl-dash-console-btn {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }

    body.ivl-vault-console .ivl-dash-console-search input {
        font-size: 1rem !important;
    }

    body.ivl-vault-console .ivl-vpro-chart-card__foot {
        justify-content: center !important;
    }

    body.ivl-vault-console .ivl-vpro-chart-card__foot-link {
        text-align: center !important;
        justify-content: center !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    body.ivl-vault-console .ivl-dash-console-section {
        margin-bottom: 1.5rem;
    }

    body.ivl-vault-console .ivl-dash-console-intro {
        font-size: 0.9rem;
    }
}

/* ── User dashboard footers: solid surfaces + ink (avoid washed / inherited theme colors) ── */
body.ivl-vault-console .ivl-dash-console-foot {
    color: #475569 !important;
}

/* ── Vault panel: ensure overflow safe ── */
.ivl-pro-panel {
    min-width: 0;
}

.ivl-pro-panel__body {
    min-width: 0;
    overflow: hidden;
}

/* ── Vault tables: horizontal scroll (client portal / console — NOT admin shell; admin uses .overflow-x-auto wrappers + real <table>) ── */
.ivl-vault-portal-theme:not(.ivl-admin-shell) .ivl-pro-table,
.ivl-vault-app-theme:not(.ivl-admin-shell) .ivl-pro-table,
.ivl-dash-console-table-wrap,
.ivl-vdash-holdings__scroll,
.ivl-vdash-ship__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    width: 100%;
}

/* Admin vault: keep <table> display so columns align; horizontal scroll lives on .overflow-x-auto */
body.ivl-admin-shell.ivl-vault-portal-theme .ivl-pro-table,
body.ivl-admin-shell.ivl-vault-app-theme .ivl-pro-table {
    display: table !important;
    overflow-x: visible;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* ── Vault client portal modals: bottom sheet + safe area + scroll body ── */
@media (max-width: 640px) {
    .ivl-vault-portal-theme .ivl-pro-modal-backdrop,
    .ivl-vault-app-theme .ivl-pro-modal-backdrop {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        padding-left: max(0px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0px, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
    .ivl-vault-portal-theme .ivl-pro-modal,
    .ivl-vault-app-theme .ivl-pro-modal {
        max-width: 100% !important;
        width: 100% !important;
        max-height: min(92dvh, 94vh, 100svh - 0.5rem) !important;
        border-radius: 0.75rem 0.75rem 0 0 !important;
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .ivl-vault-portal-theme .ivl-pro-modal--lg,
    .ivl-vault-app-theme .ivl-pro-modal--lg {
        max-width: 100% !important;
    }
    .ivl-vault-portal-theme .ivl-pro-modal__body,
    .ivl-vault-app-theme .ivl-pro-modal__body {
        padding: 1rem !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .ivl-vault-portal-theme .ivl-pro-modal__foot,
    .ivl-vault-app-theme .ivl-pro-modal__foot {
        flex-wrap: wrap !important;
    }
}

/* ── Vault subpage KPI: guard very small screens ── */
@media (max-width: 400px) {
    .ivl-vault-subpage .ivl-pro-kpi {
        grid-template-columns: 2.5rem minmax(0, 1fr) !important;
        column-gap: 0.75rem !important;
        padding: 0.75rem 0.875rem !important;
    }
    .ivl-vault-subpage .ivl-pro-kpi__value {
        font-size: 1rem !important;
    }
}

/* ── Vault form rows: single column on mobile (already in vault-pages-pro.css, but extra guard) ── */
@media (max-width: 640px) {
    .ivl-pro-form-row--2,
    .ivl-pro-form-row--3 {
        grid-template-columns: 1fr !important;
    }
}

/* ── Vault card grids: 1-col at very small screens ── */
@media (max-width: 480px) {
    .ivl-pro-card-grid--2 {
        grid-template-columns: 1fr !important;
    }
}

/* ── Certificate cards grid: 2→1 on mobile ── */
@media (max-width: 480px) {
    .ivl-pro-card-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Vault vdash top nav: smaller on mobile ── */
@media (max-width: 480px) {
    .ivl-vdash-topnav {
        padding: 0.5rem 0.75rem 0.15rem !important;
        gap: 0.3rem !important;
    }
    .ivl-vdash-topnav__link {
        font-size: 0.68rem !important;
        padding: 0.35rem 0.55rem !important;
    }
}

/* ── Vault pro tabs: scroll on mobile ── */
.ivl-pro-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
}
.ivl-pro-tabs::-webkit-scrollbar {
    display: none;
}

/* ── Desktop Quick Tools hardening (fix broken panel/grid) ── */
@media (min-width: 1024px) {
    .ivl-pub-masthead__nav-list > .ivl-pub-navitem--quicktools {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex;
        align-items: stretch;
    }

    /* Outer group: no clip-path — mega panel is a direct child. Tab slant + navy live on .qt-led */
    .ivl-pub-masthead__nav-list > .ivl-pub-navitem--quicktools .ivl-pub-masthead__qt-group {
        width: 100%;
        height: 100%;
        min-width: 0;
        justify-content: center;
        overflow: visible;
    }

    .ivl-pub-masthead__nav-list > .ivl-pub-navitem--quicktools .ivl-pub-masthead__qt-led {
        width: 100%;
        justify-content: center;
        min-width: 0;
        background: #003366;
    }

    .ivl-pub-masthead__nav-list > .ivl-pub-navitem--quicktools .ivl-pub-masthead__qt {
        width: 100%;
        justify-content: center;
        clip-path: polygon(
            var(--ivl-qt-slant) 0,
            100% 0,
            calc(100% - var(--ivl-qt-slant)) 100%,
            0 100%
        );
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    .ivl-pub-masthead__qt-group {
        position: relative;
    }

    .ivl-pub-qt-panel {
        left: 0 !important;
        right: auto !important;
        width: clamp(46rem, 72vw, 68rem) !important;
        max-width: calc(100vw - 1.5rem) !important;
    }

    .ivl-pub-qt-panel__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0.35rem 0.55rem !important;
    }

    .ivl-pub-qt-panel__tile {
        min-height: 6rem;
    }

    .ivl-pub-qt-panel__label {
        display: block;
        max-width: none !important;
        color: #003366;
        font-size: 0.8rem;
        text-align: center;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        line-height: 1.25;
    }
}

@media (min-width: 1024px) and (max-width: 1240px) {
    .ivl-pub-qt-panel__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* ── Tablet landscape tuning (768px–1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .ivl-pub-hero-split {
        min-height: clamp(26rem, 64vh, 34rem);
    }

    .ivl-pub-hero-split h1 {
        font-size: clamp(1.75rem, 3.2vw, 2.2rem);
    }

    .ivl-pub-hero-split__lede {
        font-size: 0.98rem;
    }

    .ivl-pub-track-strip__inner {
        gap: 1.1rem;
    }

    .ivl-pub-track-strip__shortcuts:not(.ivl-pub-track-strip__shortcuts--three) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .ivl-pub-track-strip__shortcuts--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .ivl-pub-zsection__list,
    .ivl-pub-updates__grid,
    .ivl-pub-featured__grid {
        gap: 1rem;
    }

    .ivl-pub-updates__card,
    .ivl-pub-featured__card,
    .ivl-pub-zblock__copy {
        font-size: 0.95rem;
    }

    .ivl-pub-carousel {
        padding: 0 clamp(2rem, 4.5vw, 2.5rem);
    }

    .ivl-pub-home .ivl-pub-updates__card .ivl-pub-updates__title {
        font-size: clamp(0.98rem, 1.45vw, 1.08rem);
    }

    .ivl-pub-home .ivl-pub-zblock__copy p,
    .ivl-pub-home .ivl-pub-updates__card p {
        font-size: clamp(0.9rem, 1.2vw, 0.97rem);
    }
}

/* ── Vault activity feed: wrap on mobile ── */
@media (max-width: 480px) {
    .ivl-pro-activity {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    .ivl-pro-activity__amount {
        margin-left: auto !important;
    }
}

/* ── Vault info rows: stack on mobile ── */
@media (max-width: 480px) {
    .ivl-pro-info-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.25rem !important;
    }
    .ivl-pro-info-value {
        text-align: left !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   TRACKING PAGE  (track/tracking.php)
══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* Tracking pages often have tables that need scroll */
    .ivl-pub-track-wrap table,
    .tracking-results table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════
   VAULT LOGIN PAGES
══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .ivl-vault-login-wrap,
    .ivl-login-card {
        padding: 1.25rem 1rem !important;
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    /* Login page: the portal signin */
    .ivl-vault-signin {
        padding: 1rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   ALL PAGES: OVERFLOW-X DISCIPLINE
══════════════════════════════════════════════════════════════════ */

/* Any table without an explicit wrapper: make it scrollable */
.ivl-pro-panel table,
.ivl-admin-shell table {
    min-width: 0;
}

/* Ensure panels in tight grid cols don't overflow */
.ivl-pro-card-grid > *,
.ivl-pro-grid-main > * {
    min-width: 0;
    overflow: hidden;
}

/* Forms: inputs always fill their container */
.ivl-pro-input,
.ivl-pro-select,
.ivl-pro-textarea {
    max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD FOOTER  (.ivl-dashboard-footer, .ivl-pub-footer)
══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .ivl-dashboard-footer {
        text-align: center !important;
        padding: 1rem !important;
        font-size: 0.75rem !important;
    }
    .ivl-dashboard-footer > * {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   PREMIUM SCROLLBAR: disable on touch devices (saves space)
══════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

/* ══════════════════════════════════════════════════════════════════
   PRINT: ensure all content is visible
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   CLIENT VAULT PORTAL (logged-in user shell, not admin)
   #app-content stacking, wide registry tables, Tailwind modals
══════════════════════════════════════════════════════════════════ */

body.ivl-vault-user-shell:not(.ivl-admin-shell) #app-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    z-index: auto;
}

body.ivl-vault-user-shell:not(.ivl-admin-shell) main.ivl-pro-main,
body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-dashboard-main {
    overflow-x: hidden;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-dash-console-table-wrap,
body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-assets-ui-table-wrap,
body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-bill-ui-table-wrap,
body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-appraisal-ui-table-wrap,
body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-user-billing-ledger-scroll,
body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-user-assets-registry-scroll,
body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-user-appraisal-registry-scroll,
body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-user-ship-manifest-scroll {
    overscroll-behavior-x: contain;
}

body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-ship-ui-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    box-sizing: border-box;
}

/*
 * Wide horizontal-scroll tables (dashboard ledger, billing, shipment manifest).
 * Omit .ivl-assets-ui-table / .ivl-appraisal-ui-table: vault-assets-layout and
 * vault-appraisal-layout use display:block card rows below 768px — forcing
 * display:table !important breaks that layout.
 */
body.ivl-vault-user-shell:not(.ivl-admin-shell) table.ivl-dash-console-table,
body.ivl-vault-user-shell:not(.ivl-admin-shell) table.ivl-bill-ui-table,
body.ivl-vault-user-shell:not(.ivl-admin-shell) table.ivl-ship-ui-table {
    display: table !important;
    width: auto;
    min-width: 100%;
    max-width: none;
    overflow-x: visible;
}

@media (max-width: 640px) {
    body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-dash-console-table-wrap table.ivl-dash-console-table,
    body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-bill-ui-table-wrap table.ivl-bill-ui-table,
    body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-ship-ui-table-wrap table.ivl-ship-ui-table {
        min-width: 48rem;
        width: auto;
    }

    body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-dash-console-table thead th,
    body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-bill-ui-table thead th,
    body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-ship-ui-table thead th {
        white-space: normal !important;
        word-break: break-word;
        line-height: 1.25;
        vertical-align: bottom;
    }

    body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-dash-console-table tbody th,
    body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-dash-console-table tbody td,
    body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-bill-ui-table tbody td,
    body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-ship-ui-table tbody td {
        vertical-align: top;
    }

    body.ivl-vault-user-shell:not(.ivl-admin-shell) .ivl-bill-ui-table td.r .flex {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 0.35rem !important;
        max-width: 100%;
    }
}

/* Tailwind .modal-backdrop (pay / contact): centered card + safe area — same idea as admin vault */
@media (max-width: 640px) {
    body.ivl-vault-user-shell:not(.ivl-admin-shell) .modal-backdrop:not(.hidden):not(:has(.modal-content.ivl-pro-modal)) {
        align-items: center !important;
        justify-content: center !important;
        padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    }

    body.ivl-vault-user-shell:not(.ivl-admin-shell) .modal-backdrop:not(.hidden):not(:has(.modal-content.ivl-pro-modal)) > div.relative {
        width: min(100%, calc(100vw - 1.5rem)) !important;
        max-width: min(52rem, calc(100vw - 1.5rem)) !important;
        max-height: min(90dvh, 92vh, 100svh - 1.25rem) !important;
        border-radius: 0.85rem !important;
        margin: 0 !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media print {
    .ivl-pub-utilbar,
    .ivl-pub-header-shell,
    .ivl-pub-drawer,
    .ivl-adm-utilbar,
    .ivl-adm-masthead,
    .ivl-vault-portal-chrome,
    .ivl-bar,
    nav,
    footer.ivl-dashboard-footer {
        display: none !important;
    }
    body {
        overflow: visible !important;
    }
    * {
        overflow: visible !important;
    }
    table {
        display: table !important;
        page-break-inside: auto;
    }
    tr {
        page-break-inside: avoid;
    }
}