/* Shared visual system for the PHP application pages. Kept separate from the
   public Three.js planner so both interfaces can evolve independently. */
:root {
    --app-ink: #102039;
    --app-muted: #64748b;
    --app-border: rgba(30, 54, 85, .12);
    --app-cyan: #16c9e7;
    --app-blue: #3678ff;
    --app-purple: #8758ff;
    --app-green: #a8da61;
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    color: var(--app-ink);
    background:
        radial-gradient(ellipse 78% 34% at 8% -4%, rgba(118, 78, 255, .42) 0%, rgba(118, 78, 255, .13) 46%, transparent 72%),
        radial-gradient(ellipse 72% 34% at 96% 20%, rgba(13, 196, 235, .34) 0%, rgba(13, 196, 235, .11) 47%, transparent 72%),
        radial-gradient(ellipse 74% 32% at 18% 62%, rgba(74, 217, 104, .23) 0%, rgba(74, 217, 104, .07) 48%, transparent 74%),
        radial-gradient(ellipse 78% 35% at 90% 92%, rgba(170, 75, 255, .27) 0%, rgba(170, 75, 255, .08) 48%, transparent 74%),
        linear-gradient(180deg, #d9d7ff 0%, #dcecff 27%, #dcf4ee 57%, #e9e1fb 79%, #e4ebf7 100%);
    background-attachment: fixed;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
img, svg, video, canvas { max-width: 100%; }
.card, .row > * { min-width: 0; }
.checkbox-hit-area { display: inline-grid; place-items: center; margin: 0; cursor: pointer; }
.select-all-checkbox .form-check-input {
    width: 1.45rem;
    height: 1.45rem;
    margin: 0;
    cursor: pointer;
}
.document-library-table th,
.document-library-table td { vertical-align: middle; }
.document-file-name {
    display: inline-block;
    max-width: 24rem;
    overflow-wrap: anywhere;
}
.app-main {
    width: 100%;
    padding-right: max(.75rem, env(safe-area-inset-right));
    padding-left: max(.75rem, env(safe-area-inset-left));
}
.app-page-header { min-width: 0; }
.app-page-header h1 { font-weight: 800; letter-spacing: -.025em; }
.app-page-header--action-only { margin-bottom: .75rem !important; }

/* Same polished navigation language as the public Load Fit Check. */
.app-navbar {
    min-height: 76px;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: rgba(9, 20, 40, .95);
    box-shadow: 0 14px 36px rgba(9, 20, 40, .16);
    overflow: visible;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.app-navbar::before { display: none; }
.app-navbar::after {
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--app-purple), var(--app-cyan), var(--app-green), transparent);
    background-size: 180% 100%;
    animation: common-nav-glow 7s linear infinite;
}
@keyframes common-nav-glow { to { background-position: 180% 0; } }
@keyframes home-logo-drive {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-2deg);
        box-shadow: 0 .3rem 1rem rgba(88, 77, 255, .28), 0 0 20px rgba(22, 201, 231, .24);
    }
    48% {
        transform: translate3d(5px, -3px, 0) rotate(2deg);
        box-shadow: -.2rem .65rem 1.4rem rgba(88, 77, 255, .38), 0 0 32px rgba(22, 201, 231, .46);
    }
    62% { transform: translate3d(4px, -1px, 0) rotate(1deg); }
}
@keyframes home-logo-shadow {
    0%, 100% { opacity: .48; transform: scaleX(.78); }
    48% { opacity: .22; transform: translateX(-3px) scaleX(1.12); }
}
.tracking-brand { gap: .7rem; font-size: clamp(1rem, 1.2vw, 1.24rem); letter-spacing: .055em; }
.tracking-brand-mark {
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    border-color: rgba(255, 255, 255, .3);
    border-radius: .8rem;
    color: #08152a;
    background: linear-gradient(145deg, #bcff75, var(--app-cyan));
    box-shadow: 0 0 25px rgba(22, 201, 231, .24);
    transform: none;
}
.is-home .tracking-brand-mark {
    animation: home-logo-drive 2.65s ease-in-out infinite;
    will-change: transform, box-shadow;
}
.is-home .tracking-brand-mark::after {
    position: absolute;
    right: 14%;
    bottom: -.42rem;
    left: 14%;
    height: .28rem;
    border-radius: 50%;
    background: rgba(22, 201, 231, .34);
    filter: blur(4px);
    content: "";
    animation: home-logo-shadow 2.65s ease-in-out infinite;
    pointer-events: none;
}
.tracking-brand:hover .tracking-brand-mark,
.tracking-brand:focus-visible .tracking-brand-mark {
    animation-play-state: paused;
    transform: translateY(-1px);
    box-shadow: 0 0 30px rgba(22, 201, 231, .35);
}
.tracking-brand-copy {
    background: linear-gradient(100deg, #e37bff, #7a78ff 48%, #30dcf4);
    background-size: 100% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: none;
}
.app-nav-links {
    gap: clamp(.35rem, 1vw, 1rem);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}
.main-nav-link {
    padding: .8rem 1rem !important;
    border: 0;
    border-radius: .8rem;
    font-size: 1.04rem;
    font-weight: 850;
    letter-spacing: .015em;
}
.main-nav-link::after {
    right: 1rem;
    bottom: .35rem;
    left: 1rem;
    height: 2px;
    background: linear-gradient(90deg, var(--app-purple), var(--app-cyan));
}
.main-nav-link:hover,
.main-nav-link:focus-visible,
.main-nav-link.active {
    border: 0;
    color: #fff !important;
    background: linear-gradient(110deg, rgba(135, 88, 255, .22), rgba(22, 201, 231, .16));
    transform: translateY(-1px);
    box-shadow: none;
}
.main-nav-link--checker { font-size: 1rem; letter-spacing: .025em; }
.app-nav-action {
    padding: .65rem 1rem;
    border-color: rgba(255, 255, 255, .25);
    border-radius: .75rem;
    background: transparent;
    font-size: .86rem;
}
.app-nav-action:hover,
.app-nav-action:focus-visible {
    border-color: var(--app-cyan);
    color: #fff;
    background: rgba(22, 201, 231, .1);
    box-shadow: none;
}

/* Home overview: cards first, selected-month map next, compact tools last. */
.dashboard-stack {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: stretch;
}
html { -webkit-text-size-adjust: 100%; }

.dashboard-operations-title {
    display: flex;
    grid-column: 3 / 10;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    margin: 0;
    color: #0a1736;
    background: linear-gradient(105deg, #0a1736 0%, #214fbd 48%, #008fae 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(1.25rem, 2vw, 2.2rem);
    font-weight: 950;
    letter-spacing: .055em;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    flex-direction: column;
    gap: .28rem;
}
.dashboard-operations-title span { white-space: nowrap; }
.dashboard-operations-main { font: inherit; }
.dashboard-operations-period {
    font-size: .46em;
    font-weight: 850;
    letter-spacing: .18em;
    text-transform: none;
}
.dashboard-month-control {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 16rem;
    max-width: 100%;
    justify-self: end;
    justify-content: flex-end;
    align-items: stretch;
    flex-direction: column;
    gap: .3rem;
    margin: 0;
}
.dashboard-month-control label {
    color: var(--app-muted);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .035em;
}
.dashboard-month-control .form-control { width: 100%; max-width: 100% !important; }
.dashboard-month-fields { display: flex; align-items: stretch; gap: .45rem; }
.dashboard-month-control input[type="month"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    font: inherit;
}
.dashboard-all-time-button {
    display: inline-flex;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: .55rem .72rem;
    border: 1px solid rgba(37, 99, 235, .24);
    border-radius: .7rem;
    color: #31516b;
    background: rgba(255, 255, 255, .78);
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .045em;
    text-decoration: none;
    white-space: nowrap;
}
.dashboard-all-time-button:hover,
.dashboard-all-time-button:focus-visible,
.dashboard-all-time-button.is-active {
    border-color: transparent;
    color: #fff;
    outline: none;
    background: linear-gradient(115deg, #0891b2, #2563eb);
    box-shadow: 0 .4rem 1rem rgba(37, 99, 235, .2);
}
.dashboard-metrics { grid-column: 1 / -1; grid-row: 2; margin-bottom: 0; }
.dashboard-metrics--public {
    grid-column: 10 / -1;
    justify-self: end;
    width: 16rem;
    min-width: 16rem;
    max-width: 100%;
    margin: 0;
}
.dashboard-metrics--public > .col-auto { width: 100%; padding: 0; }
.dashboard-metrics--public > .col-auto .metric-card { width: 100%; min-width: 0; }
.dashboard-metrics .metric-card {
    height: 100%;
    border: 1px solid rgba(30, 54, 85, .06);
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 .5rem 1.5rem rgba(20, 38, 74, .07);
}
.dashboard-metrics .metric-card::before {
    display: block;
    width: 100%;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, var(--app-purple), var(--app-cyan), var(--app-green));
}
.dashboard-metrics .card-body { padding: 1rem 1.1rem; }
.dashboard-metrics .metric-card .card-body {
    display: flex;
    min-height: 112px;
    flex-direction: column;
}
.metric-hidden-message {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: .55rem;
    color: #69758a;
    font-size: .9rem;
    font-weight: 750;
    letter-spacing: .045em;
    line-height: 1.25;
    text-align: center;
}
.dashboard-metrics .display-6 {
    margin-top: .25rem;
    font-size: clamp(1.45rem, 2.4vw, 2.3rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.dashboard-metrics > .col-auto .metric-card {
    width: max-content;
    min-width: 16rem;
    max-width: 100%;
}
.dashboard-map-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
    margin: 0;
    padding: .6rem 0 1rem;
    overflow: visible;
}
.dashboard-stack--public .dashboard-map-section {
    grid-row: 2;
    padding-top: 0;
}
.dashboard-stack--public .dashboard-action-card { grid-row: auto; }
.dashboard-map-section .usa-map-wrap {
    display: flex;
    width: min(100%, 1120px);
    max-width: 1120px;
    margin-inline: auto;
    justify-content: center;
}
.dashboard-map-section .usa-map-wrap svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin-inline: auto;
}
.dashboard-action-card {
    grid-row: 4;
    grid-column: span 6;
    margin: 0;
    border: 1px solid var(--app-border) !important;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 .4rem 1.3rem rgba(20, 38, 74, .07) !important;
}
.dashboard-settings-alert { grid-row: 4; grid-column: 1 / -1; margin: 0; }
.dashboard-settings-alert ~ .dashboard-ai-card { grid-row: 5; }
.dashboard-action-card .card-body { min-height: 0; padding: .78rem .95rem; }
.dashboard-action-body { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.dashboard-action-copy { flex: 1 1 220px; line-height: 1.25; }
.dashboard-action-copy strong { display: block; margin-bottom: .18rem; font-size: .92rem; }
.dashboard-action-card .btn { flex: 0 0 auto; white-space: nowrap; }
.dashboard-file-name {
    flex: 1 1 11rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-privacy-body {
    display: flex;
    min-height: 58px !important;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}
.dashboard-privacy-title { font-size: .9rem; letter-spacing: .015em; }
.dashboard-privacy-control { display: flex; align-items: center; gap: .65rem; }
.dashboard-privacy-status { padding: .36rem .55rem; font-size: .67rem; letter-spacing: .025em; }
.dashboard-privacy-card .form-switch { min-height: auto; padding-left: 2.75em; }
.dashboard-privacy-card .form-switch .form-check-input {
    width: 2.35em;
    height: 1.25em;
    margin-left: -2.75em;
    cursor: pointer;
}
.dashboard-privacy-card .form-check-input:checked {
    border-color: rgb(74, 217, 104);
    background-color: rgb(74, 217, 104);
}
.dashboard-ai-card .dashboard-action-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55rem;
}
.dashboard-ai-title { font-size: .9rem; font-weight: 800; line-height: 1.2; }
.dashboard-ai-controls { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.dashboard-ai-controls .btn { padding: .42rem .72rem; font-size: .82rem; }
.loads-ai-card {
    width: fit-content;
    max-width: 100%;
}

.admin-required-modal .modal-content {
    background: rgb(255, 66, 69) !important;
}

/* Wide data stays inside an intentional touch-scroll region. */
.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}
.table-responsive > .table { margin-bottom: 0; }
.loads-month-form,
.loads-search-form,
.state-month-control,
.accounting-month-control { max-width: 100%; }
.loads-bulk-actions { max-width: 100%; }
.loads-bulk-actions .form-select { min-width: 145px; }

@media (max-width: 1199.98px) {
    .app-navbar { min-height: 66px; overflow: visible; }
    .app-navbar .navbar-collapse {
        margin-top: .7rem;
        padding: .65rem;
        border: 1px solid rgba(255, 255, 255, .11);
        border-radius: 1rem;
        background: rgba(4, 9, 27, .95);
        box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .22);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }
    .app-nav-links { gap: .2rem; }
    .main-nav-link { padding: .78rem .9rem !important; }
    .app-nav-account { margin-top: .55rem; }
}

@media (max-width: 767.98px) {
    body { background-attachment: scroll; }
    .app-main { max-width: none; padding-top: 1rem !important; padding-bottom: 1.5rem !important; }
    .app-page-header { margin-bottom: 1rem !important; }
    .app-page-header h1 { font-size: 1.45rem; }
    .app-page-header .btn { min-height: 42px; }
    .dashboard-action-card { grid-column: 1 / -1; grid-row: auto; }
    .dashboard-settings-alert,
    .dashboard-settings-alert ~ .dashboard-ai-card { grid-row: auto; }
    .dashboard-operations-title {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: clamp(1.15rem, 4.5vw, 1.6rem);
    }
    .dashboard-month-control { grid-row: 2; width: 100%; justify-self: stretch; }
    .dashboard-metrics,
    .dashboard-metrics--public { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; width: 100%; }
    .dashboard-map-section { grid-row: 4; width: 100%; overflow: visible; }
    .dashboard-stack--public .dashboard-map-section { grid-row: 3; }
    .dashboard-map-section .usa-map-wrap { width: 100%; min-width: 0; max-width: 100%; }
    .table-responsive > .table { min-width: 680px; }
    .loads-month-form { width: 100%; flex-wrap: wrap; justify-content: stretch !important; }
    .loads-month-form > div { width: 100%; text-align: left !important; }
    .loads-month-form .form-control { width: 100%; min-width: 0 !important; }
    .loads-month-form > .btn { flex: 1 1 9rem; }
    .loads-bulk-toolbar { align-items: stretch !important; }
    .loads-bulk-actions { width: 100%; }
    .loads-bulk-actions .form-select { flex: 1 1 100%; width: 100% !important; }
    .loads-bulk-actions .btn { flex: 1 1 auto; min-height: 42px; }
    .state-month-control { align-items: stretch !important; flex-direction: column; }
    .state-month-control .form-control { width: 100%; max-width: none !important; }
    .accounting-topline { align-items: stretch !important; }
    .accounting-topline > div, .accounting-month-control { width: 100%; }
    .accounting-month-control .form-control { width: 100%; }
    .accounting-pay-banner > div { width: 100%; }
    .accounting-pay-banner .text-md-end { text-align: left !important; }
    #loadForm .card-body { padding: 1rem !important; }
    #loadForm .card-footer { display: flex; gap: .6rem; justify-content: flex-end; }
}

@media (max-width: 575.98px) {
    .tracking-brand { gap: .52rem; margin-right: .15rem; font-size: .92rem; letter-spacing: .028em; }
    .tracking-brand-mark { width: 2rem; height: 2rem; border-radius: .65rem; font-size: 1rem; }
    .app-navbar .container-fluid {
        padding-right: max(.75rem, env(safe-area-inset-right)) !important;
        padding-left: max(.75rem, env(safe-area-inset-left)) !important;
    }
    .app-navbar .navbar-toggler { min-width: 42px; min-height: 42px; padding: .34rem .46rem; }
    .main-nav-link, .main-nav-link--checker { font-size: .98rem; white-space: normal; }
    .app-nav-action { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; }
    .app-page-header { align-items: center !important; }
    .app-page-header h1 { font-size: 1.3rem; }
    .dashboard-stack { gap: .75rem; margin-bottom: 1.25rem; }
    .dashboard-month-control { align-items: stretch; flex-direction: column; gap: .35rem; }
    .dashboard-month-control .form-control { width: 100%; max-width: none !important; min-height: 44px; }
    .dashboard-metrics { --bs-gutter-x: .65rem; --bs-gutter-y: .65rem; }
    .dashboard-metrics > [class*="col-"] { width: 100%; }
    .dashboard-metrics .card-body { padding: .8rem; }
    .dashboard-metrics .text-body-secondary { font-size: .72rem !important; line-height: 1.2; }
    .dashboard-metrics .display-6 { font-size: clamp(1.18rem, 6.5vw, 1.65rem); }
    .dashboard-map-section { padding-right: 0; padding-left: 0; }
    .dashboard-map-section .usa-map-wrap { width: 100%; min-width: 0; }
    .dashboard-action-card .card-body { padding: .85rem; }
    .dashboard-action-body { align-items: stretch; }
    .dashboard-action-copy { flex-basis: 100%; }
    .dashboard-action-card .btn { flex: 1 1 8rem; min-height: 44px; }
    .dashboard-privacy-body { min-height: 54px !important; }
    .dashboard-privacy-control { margin-left: auto; }
    .dashboard-ai-controls .btn { flex: 1 1 8rem; }
    .dashboard-ai-controls .dashboard-file-name { flex-basis: 100%; }
    .loads-ai-card { width: 100%; }
    .loads-search-form > div:first-of-type { width: 100%; }
    .loads-search-form .btn { min-height: 42px; }
    .accounting-summary-card .card-body,
    .accounting-detail-card .card-body,
    .accounting-expense-card .card-body { padding: 1rem !important; }
    .accounting-pie-shell { min-height: 285px !important; }
    .accounting-pie { width: min(100%, 290px) !important; }
    .accounting-value-card { padding: .72rem !important; }
    .accounting-value-card .value { font-size: 1rem !important; overflow-wrap: anywhere; }
    .accounting-value-card small { font-size: .7rem; }
    .login-codepen-style {
        padding: max(1rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    }
    .login-panel { max-width: 100%; padding: 1.35rem; }
    input, select, textarea { font-size: 16px !important; }
}

/* USA load lanes: map-only redesign with route animation and touch layouts. */
.dashboard-map-section {
    width: min(1320px, calc(100vw - 1.5rem));
    justify-self: center;
}
.dashboard-map-section .usa-map-panel {
    position: relative;
    width: 100%;
    max-width: 1320px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}
.map-mode-switch {
    position: relative;
    z-index: 6;
    display: grid;
    width: max-content;
    max-width: 100%;
    grid-auto-flow: column;
    grid-auto-columns: minmax(8.25rem, 1fr);
    gap: .25rem;
    margin: 0 auto .35rem;
    padding: .3rem;
    border: 1px solid rgba(70, 113, 148, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 .6rem 1.6rem rgba(30, 78, 112, .1), inset 0 1px 0 #fff;
    backdrop-filter: blur(16px);
}
.map-mode-button {
    min-height: 42px;
    padding: .58rem 1rem;
    border: 0;
    border-radius: 999px;
    color: #52647b;
    background: transparent;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .065em;
    transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.map-mode-button:hover,
.map-mode-button:focus-visible {
    color: #062c44;
    outline: none;
    background: rgba(14, 165, 233, .09);
}
.map-mode-button.active {
    color: #fff;
    background: linear-gradient(115deg, #0891b2, #2563eb 62%, #0f766e);
    box-shadow: 0 .42rem 1rem rgba(14, 116, 144, .24), inset 0 1px 0 rgba(255, 255, 255, .3);
    transform: translateY(-1px);
}
.dashboard-map-section .usa-map-wrap {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border-radius: 1rem;
    overscroll-behavior-x: contain;
}
.dashboard-map-section .usa-map-canvas {
    width: 100%;
    min-width: 0;
    margin: 0 auto;
}
.dashboard-map-section .usa-map-canvas svg {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0 auto;
    overflow: visible;
}
.usa-map-panel[data-map-mode="routes"] .state-shape {
    fill: #dfe9f5 !important;
}
.usa-map-panel[data-map-mode="routes"] .visited-state {
    fill: #cce8e7 !important;
}
.usa-map-panel[data-map-mode="loads"] .state-shape {
    fill: var(--map-load-fill, #dfe7f7) !important;
}
.usa-map-panel[data-map-mode="revenue"] .state-shape {
    fill: var(--map-revenue-fill, #dfe7f7) !important;
}
.usa-map-panel .state-shape {
    stroke: rgba(255, 255, 255, .98) !important;
    stroke-width: 1.2px;
    transition: fill .22s ease, filter .22s ease, opacity .22s ease;
}
.usa-map-panel .state-shape:hover,
.usa-map-panel .state-shape:focus,
.usa-map-panel .state-shape.is-selected {
    fill: #0ea5e9 !important;
    filter: drop-shadow(0 3px 5px rgba(2, 132, 199, .28));
    outline: none;
}
.usa-map-panel .map-state-name { fill: rgba(11, 45, 71, .62); }
.usa-map-panel .map-metric { fill: rgba(11, 35, 58, .68); }
.usa-map-panel .state-label:hover .map-state-name,
.usa-map-panel .state-label:hover .map-metric { fill: #fff; }
.map-route-layer {
    opacity: 1;
    transition: opacity .2s ease;
}
.usa-map-panel[data-map-mode="loads"] .map-route-layer,
.usa-map-panel[data-map-mode="revenue"] .map-route-layer {
    opacity: 0;
    pointer-events: none;
}
.map-route-path {
    fill: none;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 10 9;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 4px rgba(6, 182, 212, .6));
    animation: map-route-dash 2.8s linear infinite;
    transition: stroke-width .2s ease, opacity .2s ease, filter .2s ease;
}
.map-route-group.is-selected .map-route-path {
    stroke-width: 5;
    filter: drop-shadow(0 0 8px rgba(14, 165, 233, .9));
}
.map-route-group--broker .map-route-path {
    animation: none;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 3px rgba(255, 32, 32, .8));
}
.map-route-group--broker .map-route-pin-pulse {
    animation: none;
    opacity: .14;
}
.map-route-tracker {
    pointer-events: none;
    opacity: .95;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, .95)) drop-shadow(0 0 7px currentColor);
}
.map-route-status-tracker {
    stroke: none;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: normal;
    filter: none;
    paint-order: normal;
}
.map-route-completed-tracker {
    fill: #16a34a;
    stroke: none;
    filter: none;
}
.map-route-active-tracker {
    fill: #2563eb;
    stroke: none;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: normal;
    filter: none;
}
.map-route-hit-area {
    fill: none;
    stroke: transparent;
    stroke-width: 20;
    pointer-events: stroke;
    cursor: pointer;
    outline: none;
}
.map-route-hit-area:focus-visible {
    stroke: rgba(14, 165, 233, .18);
}
.map-route-pin { cursor: pointer; }
.map-route-pin-core {
    stroke: rgba(255, 255, 255, .98);
    stroke-width: 2.3;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 5px rgba(3, 105, 161, .75));
}
.map-route-pin-pulse {
    opacity: .2;
    transform-box: fill-box;
    transform-origin: center;
    animation: map-pin-pulse 1.9s ease-out infinite;
}
.map-route-popup {
    --route-accent: #06b6d4;
    position: absolute;
    z-index: 8;
    top: 1rem;
    right: 1.25rem;
    width: min(17rem, calc(100% - 2rem));
    padding: 1.05rem;
    border: 1px solid color-mix(in srgb, var(--route-accent) 65%, white);
    border-radius: 1.15rem;
    color: #f7fbff;
    background: linear-gradient(145deg, rgba(4, 25, 43, .97), rgba(5, 54, 68, .95));
    box-shadow: 0 1.1rem 2.8rem rgba(2, 32, 52, .32), inset 0 1px 0 rgba(255, 255, 255, .13);
    backdrop-filter: blur(18px);
    animation: map-popup-in .22s ease-out both;
}
.map-route-popup-close {
    position: absolute;
    top: .45rem;
    right: .45rem;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .08);
    font-size: 1.4rem;
    line-height: 1;
}
.map-route-popup-close:hover,
.map-route-popup-close:focus-visible { color: #fff; outline: 2px solid var(--route-accent); background: rgba(255, 255, 255, .15); }
.map-route-popup-kicker {
    max-width: calc(100% - 2.25rem);
    color: var(--route-accent);
    font-size: .67rem;
    font-weight: 950;
    letter-spacing: .1em;
}
.map-route-popup-lane {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: .65rem 0 .8rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    font-weight: 950;
    letter-spacing: -.04em;
}
.map-route-popup-arrow { color: var(--route-accent); }
.map-state-popup-heading {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    margin: .58rem 0 .8rem;
    padding-bottom: .72rem;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.map-state-popup-heading strong {
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.25rem);
    font-weight: 950;
    letter-spacing: -.045em;
}
.map-state-popup-heading span {
    min-width: 0;
    overflow: hidden;
    color: #b7d5e2;
    font-size: .82rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-route-popup-grid { display: grid; gap: .52rem; }
.map-route-popup-grid > div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .48rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.map-route-popup-grid > div:last-child { padding-bottom: 0; border-bottom: 0; }
.map-route-popup-grid span { color: #9fc3d3; font-size: .67rem; font-weight: 850; letter-spacing: .055em; }
.map-route-popup-grid strong {
    max-width: 62%;
    overflow: hidden;
    color: #fff;
    font-size: .84rem;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-route-legend {
    position: relative;
    z-index: 5;
    display: flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: .2rem auto 0;
    padding: .48rem .8rem;
    overflow-x: auto;
    border: 1px solid rgba(55, 103, 136, .15);
    border-radius: 999px;
    color: #52647b;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 .4rem 1rem rgba(30, 70, 104, .07);
    font-size: .68rem;
    white-space: nowrap;
    scrollbar-width: none;
}
.map-route-legend::-webkit-scrollbar { display: none; }
.map-route-legend span { display: inline-flex; align-items: center; gap: .35rem; font-weight: 780; }
.map-route-legend strong { color: #12344c; }
.route-legend-dot {
    display: inline-block;
    width: .62rem;
    height: .62rem;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .8);
}
.route-legend-dot--active { background: linear-gradient(135deg, #06b6d4, #2563eb); }
.route-legend-dot--completed { background: linear-gradient(135deg, #22c55e, #16a34a); }
.route-legend-dot--attention { background: linear-gradient(135deg, #fbbf24, #ea580c); }
.map-mobile-hint { display: none; }

@keyframes map-route-dash { to { stroke-dashoffset: -38; } }
@keyframes map-pin-pulse { 0% { opacity: .42; transform: scale(.65); } 80%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes map-popup-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 991.98px) {
    .map-route-popup { top: 5.25rem; right: .8rem; width: 15rem; padding: .9rem; }
    .map-route-popup-lane { font-size: 1.55rem; }
}

@media (max-width: 767.98px) {
    .dashboard-map-section { width: 100%; }
    .dashboard-map-section .usa-map-panel { padding: 0; overflow: visible; border-radius: 0; }
    .map-mode-switch {
        width: 100%;
        grid-auto-columns: minmax(0, 1fr);
        margin-bottom: .5rem;
        border-radius: .85rem;
    }
    .map-mode-button { min-height: 44px; padding: .55rem .35rem; border-radius: .65rem; font-size: .64rem; }
    .dashboard-map-section .usa-map-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        border: 0;
        background: transparent;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #22b8cf rgba(255, 255, 255, .45);
        scrollbar-width: thin;
    }
    .dashboard-map-section .usa-map-canvas { width: 720px; min-width: 720px; }
    .map-mobile-hint {
        display: block;
        margin: .4rem 0 .2rem;
        color: #52647b;
        font-size: .67rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-align: center;
    }
    .map-route-popup {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin: .55rem 0 0;
        animation-name: map-popup-mobile-in;
    }
    .map-route-popup-close { width: 44px; height: 44px; }
    .map-route-popup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .map-route-popup-grid > div { align-items: flex-start; flex-direction: column; gap: .2rem; }
    .map-route-popup-grid strong { max-width: 100%; text-align: left; }
    .map-route-legend { width: 100%; justify-content: flex-start; margin-top: .5rem; border-radius: .75rem; }
}

@media (max-width: 430px) {
    .dashboard-map-section .usa-map-canvas { width: 680px; min-width: 680px; }
    .map-route-popup-grid { grid-template-columns: 1fr; }
}

@keyframes map-popup-mobile-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .map-route-path,
    .map-route-pin-pulse,
    .map-route-popup { animation: none; }
    .map-mode-button,
    .map-route-path,
    .map-route-layer,
    .usa-map-panel .state-shape { transition: none; }
}

@media (max-width: 359.98px) {
    .tracking-brand-copy { font-size: .82rem; }
    .dashboard-metrics > [class*="col-"] { width: 100%; }
    .app-page-header { align-items: stretch !important; flex-direction: column; }
    .app-page-header .btn { width: 100%; }
}

/* Dynamic viewport units prevent iOS/Android browser chrome from clipping login. */
.login-codepen-style {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-height: 660px) {
    .login-codepen-style { place-items: start center; align-content: start; }
    .login-panel { margin-block: auto; padding-block: 1.15rem; }
    .truck-loader { margin-bottom: .8rem; }
    .login-kicker { margin-bottom: .8rem; }
    .login-copy { margin-bottom: .9rem; }
}

@media (max-height: 520px) {
    .truck-loader { display: none; }
    .login-panel h1 { font-size: 1.35rem; }
    .login-copy { margin-bottom: .65rem; }
}

@media (hover: none) and (pointer: coarse) {
    .btn,
    button,
    [role="button"],
    .navbar-toggler,
    .app-nav-action,
    .nav-link,
    .form-control,
    .form-select,
    .login-form input,
    input[type="date"],
    input[type="month"],
    input[type="file"] {
        min-height: 44px !important;
    }
    .btn,
    button,
    [role="button"],
    .navbar-toggler,
    .app-nav-action,
    .nav-link { touch-action: manipulation; }
    .checkbox-hit-area {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }
    .checkbox-hit-area .form-check-input {
        width: 1.45rem;
        height: 1.45rem;
        margin: 0;
    }
    .form-check { min-height: 44px; }
    .form-switch { display: flex; align-items: center; }
    .form-switch .form-check-input {
        width: 3.25rem !important;
        min-width: 3.25rem;
        height: 44px !important;
        min-height: 44px;
        margin-top: 0;
        background-size: 1.45rem 1.45rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }
    .app-navbar::after,
    .truck-loader,
    .truck-loader__smoke,
    .pdf-control-working svg { animation: none !important; }
}