/* ============================================================
   RushRocket Styles — Master Stylesheet
   ============================================================
   Table of Contents:
   1.  Theme Variable (Dark Mode)
   2.  Base & Global Styles
   3.  Logo
   4.  Login Page
   5.  Navigation & Sidebar (Dashboard Layout)
   6.  Content Area
   7.  Footer
   8.  Summary Cards & Headers
   9.  Summary Grid & Tiles
   10. Dashboard Recap (Recent Loads)
   11. Status Badges & Pills
   12. Table Styles (Carriers, Accounting, Customers, Partial Loads)
   13. Privacy Policy & Terms
   14. Load View
       14a. Layout & Containers
       14b. Back Button
       14c. Header & Status
       14d. Cards (Generic)
       14e. Stat Grid
       14f. Parties Grid & Cards
       14g. Legs List & Cards
       14h. Collapsible Styles (Cards, Parties, Legs)
       14i. Right Column / Side Panel
       14j. Tables within Load View
       14k. Tracking Info
       14l. Flags
       14m. Notes
       14n. Badges (Commission)
   15. Load Wizard
   16. Carrier View
   17. Mobile Support
   ============================================================ */


/* ============================================================
   1. THEME VARIABLE — Dark Mode
   ============================================================ */

:root {
    /* Core color, spacing, and typography tokens */
    --bg: #0a0f1a;
    --panel: #111827;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --accent: #60a5fa;
    --accent-hover: #93c5fd;
    --accent-contrast: #08111f;
    --success: #22c55e;
    --warning: #eab308;
    --danger: #ef4444;
    --info: #38bdf8;
    --card: #0f1729;
    --border: #1e293b;
    --border-subtle: #172033;
    --surface-hover: rgba(148, 163, 184, 0.08);
    --surface-active: rgba(96, 165, 250, 0.14);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 28px;
    --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --dashboard-nav-height: 84px;
    /* Legacy aliases used in some inline styles */
    --bg-card: var(--card);
    --border-color: var(--border);
    --text-color: var(--text);
}

/* Accent color themes */
.color-red {
    --accent: #ef4444;
}
.color-green {
    --accent: #22c55e;
}
.color-yellow {
    --accent: #eab308;
}
.color-purple {
    --accent: #9333ea;
}
.color-white {
    --accent: #94a3b8;
}
.color-brown {
    --accent: #b45309;
}

/* Font options */
.font-arial {
    --font: Arial, Helvetica, sans-serif;
}
.font-comic-sans {
    --font: 'Comic Sans MS', 'Comic Sans', cursive;
}
.font-times-new-roman {
    --font: 'Times New Roman', Times, serif;
}

/* Font size options */
.text-size-small {
    --text-sm: 12px;
    --text-md: 14px;
    --text-lg: 18px;
    --text-xl: 25px;
}
.text-size-large {
    --text-sm: 16px;
    --text-md: 18px;
    --text-lg: 23px;
    --text-xl: 32px;
}

html.text-size-small {
    zoom: 0.875;
}

html.text-size-large {
    zoom: 1.125;
}


/* ============================================================
   2. BASE & GLOBAL STYLES
   ============================================================ */

html {
    height: 100%;
    box-sizing: border-box;
    font-size: 16px;
}

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

body {
    min-height: 100vh;
    height: auto;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    font-size: var(--text-md);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
}

h1 {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h3, h4, h5, h6 {
    font-weight: 650;
}

p {
    line-height: 1.7;
}

a {
    color: var(--accent);
    font-weight: bold;
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Consistent, accessible keyboard focus across the application. */
:focus-visible {
    outline: 2px solid var(--accent-hover);
    outline-offset: 2px;
}

button, input, select, textarea {
    font: inherit;
}

/* Keep interactive controls comfortable and visible for keyboard and touch users. */
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
    min-height: 40px;
}

@media (prefers-contrast: more) {
    :root {
        --border: #64748b;
        --muted: #cbd5e1;
    }

    a,
    button,
    input,
    select,
    textarea {
        border-width: 2px;
    }
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

::selection {
    background: var(--accent);
    color: white;
}

/* Custom scrollbar */
::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Fade-in animation for page loads */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

body > .app-layout,
body > .login-box,
body > main.container {
    animation: fadeIn 0.35s ease-out;
}

/* Fade-in animation for collapsible sections */
@keyframes legFadeIn {
    from { opacity: 0; max-height: 0; }
    to   { opacity: 1; max-height: 2000px; }
}

@keyframes inlineSaveFlash {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.75); background-color: rgba(74, 222, 128, 0.22); }
    100% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); background-color: var(--card); }
}

.load-view .inline-save-flash {
    animation: inlineSaveFlash 520ms ease-out;
}

::view-transition-group(inline-editor-panel) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

nav, .login-box, .sidebar, .content, hr {
    background: var(--panel);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark theme subtle refinements */
.filter-controls {
    border-color: var(--border);
}

.filter-group input[type="text"],
.filter-group input[type="date"],
.filter-group input[type="time"],
.filter-group select {
    border-color: var(--border);
}

.filter-group input[type="text"]:hover,
.filter-group input[type="date"]:hover,
.filter-group input[type="time"]:hover,
.filter-group select:hover {
    border-color: var(--accent);
}

.filter-group input[type="text"]:focus,
.filter-group input[type="date"]:focus,
.filter-group input[type="time"]:focus,
.filter-group select:focus {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* Keep native date controls consistent with the other filter fields. */
.filter-group input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    color-scheme: dark;
}

.filter-group input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.75;
    cursor: pointer;
    filter: invert(0.8);
}

.pagination-controls {
    border-color: var(--border);
}

.btn-page {
    border-color: var(--border);
}

.btn-new-load {
    box-shadow: 0 2px 4px color-mix(in srgb, var(--accent) 25%, transparent);
}

.btn-new-load:hover {
    box-shadow: 0 4px 8px rgba(96, 165, 250, 0.3);
}


/* ============================================================
   3. LOGO
   ============================================================ */

.logo {
    display: flex;
    justify-content: left;
    padding: 8px 0;
}

.logo img {
    width: 200px;
    height: auto;
    transition: opacity var(--transition);
}

.logo img:hover {
    opacity: 0.85;
}


/* ============================================================
   4. LOGIN PAGE
   ============================================================ */

.login-welcome {
    font-size: 32px;
    font-weight: bold;
    color: var(--text);
    text-align: center;
    margin: 10px 0 10px 0;
    border: 1px solid var(--border);
    padding: 12px 24px;
    border-radius: var(--radius-md);
}

.login-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    width: 380px;
    margin: auto;
    background-color: var(--card);
    box-shadow: var(--shadow-lg);
}

.login-box h1 {
    margin-top: 0;
    margin-bottom: 24px;
    text-align: center;
    color: var(--text);
    font-size: 28px;
}

.login-box .error-message {
    color: #ef4444;
    font-weight: bold;
    margin: 10px auto;
    text-align: center;
    font-size: 14px;
}

.form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    width: min(100%, 1280px);
}

.form-group label {
    align-self: flex-start;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 14px;
    font-weight: bold;
}

.form-group input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.login-button {
    display: block;
    margin: 32px auto 16px;
    font-family: var(--font);
    border: none;
    border-radius: var(--radius-sm);
    width: 100%;
    height: 44px;
    color: white;
    background-color: var(--accent);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 2px 4px color-mix(in srgb, var(--accent) 25%, transparent);
}

.login-button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

.login-button:active {
    transform: translateY(0);
}


/* ============================================================
   5.  NAVIGATION & SIDEBAR (Dashboard Layout)
   ============================================================ */

body > nav {
    position: sticky;
    top: 0;
    z-index: 5000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 20px;
    font-weight: bold;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

body > nav button {
    display: inline-block;
    margin: 0;
    padding: 10px 24px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: bold;
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    background-color: var(--accent);
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 2px 4px color-mix(in srgb, var(--accent) 25%, transparent);
}

body > nav button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

body > nav button:active {
    transform: translateY(0);
}

/* Account Circle (replaces logout button) */
.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-greeting {
    font-size: 14px;
    font-weight: bold;
    color: var(--text);
}

.account-circle {
    position: relative;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: all var(--transition);
}

.account-circle:hover {
    transform: scale(1.05);
}

.account-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    transition: all var(--transition);
}

.account-dropdown {
    position: absolute;
    top: 44px;
    right: 0;
    width: 160px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 6000;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.account-dropdown.show {
    display: flex;
}

.account-dropdown-item {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: bold;
    color: var(--text);
    text-decoration: none;
    transition: background var(--transition);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.account-dropdown-item:hover {
    background: rgba(96, 165, 250, 0.08);
    color: var(--accent);
}

.account-dropdown-form {
    margin: 0;
    padding: 0;
}

/* App layout wrapper */
.app-layout {
    display: flex;
    background: var(--bg);
    flex: 1;
    padding-left: 60px;
}

/* A transformed ancestor would make the fixed sidebar scroll with this layout. */
body > .app-layout {
    animation: none;
}

.sidebar {
    width: 60px;
    border-right: 1px solid var(--border);
    padding: 20px 0;
    box-sizing: border-box;
    position: fixed;
    top: var(--dashboard-nav-height);
    left: 0;
    height: calc(100vh - var(--dashboard-nav-height));
    z-index: 100;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--panel);
    overflow-x: hidden;
    overflow-y: auto;
    flex-shrink: 0;
}

.sidebar:hover {
    width: 200px;
}

.sidebar ul {
    list-style: none;
    padding: 0 8px;
    margin: 0;
    width: 44px;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar > ul {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    box-sizing: border-box;
}

.sidebar li.sidebar-patchnotes {
    margin-top: auto;
    margin-bottom: 0;
}

.sidebar:hover ul {
    width: 184px;
}

.sidebar li {
    margin-bottom: 24px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    text-decoration: none;
    font-weight: bold;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.nav-item:hover {
    color: var(--accent);
    background: rgba(96, 165, 250, 0.08);
    text-decoration: none;
}

.nav-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.nav-label {
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: 14px;
    color: var(--text);
}

.sidebar:hover .nav-label {
    opacity: 1;
}

/* Keep persistent desktop navigation above page controls; dialogs use 10000+. */
@media (min-width: 1026px) {
    body > nav {
        z-index: 9001;
    }

    .sidebar {
        z-index: 9000;
    }
}


/* ============================================================
   6. CONTENT AREA
   ============================================================ */

.content {
    flex: 1;
    padding: 24px;
    background: var(--bg);
    min-width: 0;
    overflow-x: hidden;
}

/* Clear page hierarchy and consistent content width. */
.content > header,
.content > .list-page-title-row,
.content > .summary-header {
    width: min(100%, 1280px);
    margin-left: auto;
    margin-right: auto;
}

.content > header {
    margin-bottom: var(--space-6);
}

.content > header h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.2;
}

.content > header p,
.page-subtitle {
    margin: var(--space-2) 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.card {
    background: var(--card);
    color: var(--text);
}


/* ============================================================
   7. FOOTER
   ============================================================ */

hr {
    display: none;
}

/* App footer — normal flow, sits at bottom after 100px gap */
.app-footer {
    margin-left: 60px;
    width: calc(100% - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 100px;
    padding: 20px 24px;
    border-top: 1px solid var(--border);
    background: var(--panel);
    flex-wrap: wrap;
}

.login-footer-tc,
.login-footer-pp,
.login-footer-osm,
.login-footer-cr {
    color: var(--muted);
    font-size: 12px;
    padding: 4px 0;
    border: none;
    background: transparent;
    position: static;
}

.login-footer-tc a,
.login-footer-pp a {
    color: var(--accent);
    font-weight: bold;
    text-decoration: none;
}

.login-footer-tc a:hover,
.login-footer-pp a:hover {
    text-decoration: underline;
}

.login-footer-cr {
    margin-left: auto;
}

.version-stamps {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.project-version-stamp,
.database-version-stamp {
    font-size: inherit;
}


/* ============================================================
   8. SUMMARY CARDS & HEADERS
   ============================================================ */

/* Bar between filter controls and sort header, holds the New Load button */
.new-load-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
}

.summary-header {
    margin-bottom: 20px;
}

.summary-card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 16px 28px;
    font-weight: bold;
    font-size: 13px;
    color: var(--muted);
    background: var(--card);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.summary-card-header .card-label {
    font-size: 14px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 1 1 180px;
    cursor: pointer;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
}

.summary-card-header .card-label:first-child {
    justify-content: flex-start;
    flex: 1 1 160px;
    margin-left: 16px;
}



.summary-card-header .card-label:nth-child(2) {
    justify-content: center;
    flex: 0 0 140px;
}

.summary-card-header .card-label:nth-child(3) {
    justify-content: flex-end;
    flex: 1 1 160px;
}

/* ---- Loads page (5 columns) - use grid for perfect alignment ---- */
.partial-loads-box .summary-card-header {
    display: grid;
    grid-template-columns: var(--load-grid-columns, 145px 200px 1fr 1fr 1fr);
    gap: 0;
    padding: 16px 28px;
}

.partial-loads-box .summary-card-header .card-label {
    flex: none;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}
.partial-loads-box .summary-card-header .card-label.sort-header:hover {
    color: var(--accent);
}

.partial-loads-box .summary-card-header .card-label:first-child {
    justify-content: center;
    margin-left: 0;
}

.partial-loads-box .summary-card-header .card-label:nth-child(2) {
    padding-left: 8px;
}

.partial-loads-box .summary-card {
    display: grid;
    grid-template-columns: var(--load-grid-columns, 145px 200px 1fr 1fr 1fr);
    gap: 0;
    min-height: 52px;
    padding: 10px 0;
    min-width: 0;
    overflow: hidden;
}

/* Keep load rows tall and easy to scan without wasting space between cards. */
.partial-loads-box .summary-grid {
    gap: 8px;
    padding-top: 8px;
}

.partial-loads-box .summary-card > * {
    min-width: 0;
    width: auto;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
    text-align: center;
}

/* Load columns must remain single-line; the table scrolls horizontally when needed. */
.partial-loads-box .summary-card-header [data-load-column],
.partial-loads-box .summary-card [data-load-column] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.partial-loads-box .summary-card-header [data-load-column] {
    display: inline-flex;
    flex-wrap: nowrap;
}

/* Keep the identifying load number visible while wide configurations scroll. */
.partial-loads-box [data-load-column="load_number"]:not([hidden]) {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card);
    box-shadow: 7px 0 10px -10px rgba(0, 0, 0, .75);
}

.partial-loads-box .summary-card-header [data-load-column="load_number"] {
    z-index: 4;
}

.partial-loads-box[data-load-density="compact"] .summary-card-header {
    padding-top: 11px;
    padding-bottom: 11px;
}

.partial-loads-box[data-load-density="compact"] .summary-card {
    min-height: 46px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.partial-loads-box[data-load-density="compact"] .summary-card-header [data-load-column],
.partial-loads-box[data-load-density="compact"] .summary-card [data-load-column] {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
}

.partial-loads-box[data-load-density="dense"] .summary-card-header {
    padding-top: 8px;
    padding-bottom: 8px;
}

.partial-loads-box[data-load-density="dense"] .summary-card {
    min-height: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.partial-loads-box[data-load-density="dense"] .summary-card-header [data-load-column],
.partial-loads-box[data-load-density="dense"] .summary-card [data-load-column] {
    padding-left: 3px;
    padding-right: 3px;
    font-size: 11px;
    letter-spacing: 0;
}

.partial-loads-box[data-load-density="dense"] .summary-card .card-load {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 9px;
}

/* Keep the hazmat marker circular when load cards use the grid layout. */
.partial-loads-box .summary-card > .hazmat-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    box-sizing: content-box;
}

.partial-loads-box .summary-card .card-load {
    flex: none;
    min-width: 96px;
    margin-left: 12px;
    padding-right: 4px;
}

.partial-loads-box .summary-card .card-carrier {
    flex: none;
}

.partial-loads-box .summary-card .card-driver {
    flex: none;
}

.partial-loads-box .summary-card .card-num {
    flex: none;
}

.partial-loads-box [data-load-column][hidden] {
    display: none !important;
}

.loads-columns-scroll {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.loads-columns-scroll .summary-header,
.loads-columns-scroll .summary-grid {
    width: max(100%, var(--load-grid-min-width, 875px));
    min-width: 100%;
}

.partial-loads-box .card-customer,
.partial-loads-box .card-csr,
.partial-loads-box .card-tracking,
.partial-loads-box .card-legs {
    min-width: 0;
    overflow: hidden;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keep long origin/destination chains inside the load card. */
.partial-loads-box .card-legs {
    display: block;
    max-width: 100%;
}

.partial-loads-box .card-tracking .tracking-light {
    margin-right: 7px;
}

.btn-edit-load-columns {
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.btn-edit-load-columns:hover,
.btn-edit-load-columns[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-edit-load-columns:focus-visible,
.load-column-editor button:focus-visible,
.load-column-editor input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
    outline-offset: 2px;
}

.load-column-editor {
    width: 100%;
    margin: 0 0 18px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    box-shadow: var(--shadow-md);
}

.load-column-editor[hidden] {
    display: none;
}

.load-column-editor-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.load-column-editor-heading h2 {
    margin: 0 0 4px;
    color: var(--text);
    font-size: 18px;
}

.load-column-editor-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.load-column-density {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.load-column-density legend {
    padding: 0 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.load-column-density label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.load-column-editor-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.load-column-editor-close:hover {
    background: var(--background);
    color: var(--text);
}

.load-column-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    column-gap: 8px;
    row-gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.load-column-section + .load-column-section {
    margin-top: 18px;
}

.load-column-section h3 {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.load-column-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 14px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--background);
    transition: border-color .15s ease, opacity .15s ease, transform .15s ease;
}

.load-column-item.is-dragging {
    opacity: .45;
}

.load-column-drag-placeholder {
    min-height: 48px;
    border: 2px dashed var(--accent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.load-column-item.is-drag-target {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    margin-top: 8px;
    transform: translateY(-4px);
}

.load-column-item label {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.load-column-item label:has(input:disabled) {
    cursor: default;
}

.load-column-drag-handle,
.load-column-move-controls button {
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    cursor: grab;
}

.load-column-drag-handle {
    padding: 4px 2px;
    font-size: 18px;
    letter-spacing: -4px;
}

.load-column-drag-handle:active {
    cursor: grabbing;
}

.load-column-move-controls {
    display: inline-flex;
    gap: 2px;
}

.load-column-move-controls button {
    width: 28px;
    height: 28px;
    padding: 0;
    cursor: pointer;
}

.load-column-drag-handle:hover,
.load-column-move-controls button:hover:not(:disabled) {
    background: var(--card);
    color: var(--accent);
}

.load-column-move-controls button:disabled {
    opacity: .3;
    cursor: default;
}

.load-column-editor-status {
    min-height: 18px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.load-column-editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.load-column-editor-actions > div {
    display: flex;
    gap: 8px;
}

.load-column-editor-actions button {
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--background);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.load-column-editor-actions .btn-column-save {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.load-column-editor-actions button:hover {
    filter: brightness(1.08);
}

/* Carriers page — align header labels with card content */
.carriers-box .summary-card-header {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 16px 28px;
}
.carriers-box .summary-card-header .card-label {
    flex: none;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}
.carriers-box .summary-card-header .card-label.sort-header:hover {
    color: var(--accent);
}
.carriers-box .summary-card-header .card-label:nth-child(1) {
    margin-right: 0;
}

.carriers-box .summary-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    min-height: 52px;
    padding: 10px 28px;
}

.carriers-box .summary-grid {
    gap: 8px;
    padding-top: 8px;
}

.content .carriers-box,
.content .customers-box {
    width: calc(100% + 24px);
    max-width: none;
    margin: 6px -12px;
    padding: 4px 18px 4px 10px;
}

.carriers-box .carrier-list-tools,
.customers-box .carrier-list-tools {
    width: 100%;
    margin: 0 0 14px;
    padding: 10px;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.carrier-filter-primary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.carrier-filter-primary .carrier-search-group {
    flex: 1 1 auto;
    min-width: 180px;
}

.location-filter-primary .load-search-input-wrap {
    flex: 1 1 auto;
    min-width: 180px;
}

.location-filter-primary .load-search-input-wrap input {
    width: 100%;
    min-height: 36px;
    padding: 7px 12px 7px 34px;
    color: var(--text);
    font: 14px var(--font);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}

.carrier-inactive-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    margin: 0;
    padding: 0 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.carrier-inactive-toggle input {
    width: 16px;
    height: 16px;
    margin: 0;
}

@media (max-width: 640px) {
    .carrier-filter-primary {
        flex-wrap: wrap;
    }

    .carrier-filter-primary .carrier-search-group {
        flex-basis: 100%;
    }

    .location-filter-primary .load-search-input-wrap {
        flex-basis: 100%;
    }
}

.carriers-box .summary-card.carrier-inactive {
    background: rgba(127, 29, 29, 0.18);
    border-left: 4px solid #b42318;
    opacity: 0.78;
}
.carriers-box .summary-card > *,
.customers-box .summary-card > *,
.locations-box .summary-card > * {
    width: auto;
    justify-content: center;
    max-width: none;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
    text-align: center;
}
.carriers-box .summary-card .card-value,
.carriers-box .summary-card .card-location,
.carriers-box .summary-card .card-contact,
.carriers-box .summary-card .card-load {
    flex: none;
}
.carriers-box .summary-card .card-value,
.carriers-box .summary-card .card-location,
.carriers-box .summary-card .card-contact {
    justify-self: stretch;
    max-width: none;
}
.carriers-box .summary-card .card-value {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

/* Match the title hover treatment used by the other list pages. */
.carriers-box .load-card-link:hover .summary-card .card-value,
.carriers-box .load-card-link:focus-visible .summary-card .card-value {
    color: var(--accent);
}

.carriers-box .summary-card .card-contact {
    text-align: center;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carriers-box .summary-card .card-location {
    text-align: center;
    align-self: center;
    transform: none;
}
.carriers-box .summary-card .card-load {
    justify-self: center;
    width: 50%;
}

/* Sort indicators */
.sort-indicator {
    display: inline-block;
    margin-left: 4px;
    flex-shrink: 0;
}

.sort-indicator.asc {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--accent);
}

.sort-indicator.desc {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--accent);
}

.sort-header:hover {
    color: var(--accent);
}


/* ============================================================
   9. SUMMARY GRID & TILES
   ============================================================ */

.summary-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 8px;
    padding-bottom: 32px;
}

.load-card-link {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.load-card-link:hover {
    text-decoration: none;
}

.summary-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 6px 28px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    position: relative;
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}

/* Orange hazmat dot on load cards — positioned outside to the left of the card */
.load-warning {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    z-index: 2;
}

.hazmat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f97316;
    box-shadow: 0 0 5px rgba(249, 115, 22, 0.6);
    animation: hazmatPulse 2s ease-in-out infinite;
    flex: 0 0 10px;
}

@keyframes hazmatPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(249, 115, 22, 0.5); }
    50% { box-shadow: 0 0 8px rgba(249, 115, 22, 0.8); }
}

.summary-card .card-load {
    text-align: center;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--accent);
    color: white;
    font-size: 13px;
    font-weight: 600;
    flex: 0 0 120px;
    text-transform: uppercase;
}

.partial-loads-box .summary-card .card-load.status-new {
    background:rgb(61, 143, 210);
}

.partial-loads-box .summary-card .card-load.status-covered {
    background: rgb(61, 143, 210);
}

.partial-loads-box .summary-card .card-load.status-dispatched {
    background: #d6a534;
}

.partial-loads-box .summary-card .card-load.status-in-transit {
    background: #d6a534;
}

.partial-loads-box .summary-card .card-load.status-delivered {
    background: #209d31;
}

.partial-loads-box .summary-card .card-load.status-cancelled {
    background: #8a8788;
}

.summary-card .card-carrier,
.summary-card .card-driver {
    font-size: 14px;
    color: var(--muted);
    flex: 1 1 160px;
    text-align: center;
}

.summary-card .card-num {
    font-size: 14px;
    font-weight: 600;
    flex: 0 0 140px;
    text-align: center;
    white-space: nowrap;
}

/* Customers page — align header labels with card content */
.customers-box .summary-card-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    padding: 16px 28px;
}
.customers-box .summary-card-header .card-label {
    flex: none;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}
.customers-box .summary-card-header .card-label.sort-header:hover {
    color: var(--accent);
}
.customers-box .summary-card-header .card-label:nth-child(1) {
    margin-right: 0;
}

.customers-box .summary-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 6px 28px;
}
.customers-box .summary-card-header {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Keep list column controls aligned to the right on customer and location pages. */
.customers-box .load-layout-toolbar {
    justify-content: flex-end;
}


.customers-box .load-layout-toolbar .btn-edit-load-columns {
    margin-left: auto;
}

.carriers-box .load-layout-toolbar {
    justify-content: flex-end;
}

.carriers-box .load-layout-toolbar .btn-edit-load-columns {
    margin-left: auto;
}
.customers-box:not(.locations-box) .summary-card-header .card-label:first-child,
.customers-box:not(.locations-box) .summary-card .card-value {
    justify-content: center;
    text-align: center;
    padding-left: 50px;
}
.customers-box:not(.locations-box) .summary-card-header .card-label:nth-child(2),
.customers-box:not(.locations-box) .summary-card .card-contact:nth-child(2) {
    justify-content: center;
    text-align: center;
    padding-right: 16px;
}
.customers-box:not(.locations-box) .summary-card-header .card-label:nth-child(3),
.customers-box:not(.locations-box) .summary-card .card-contact:nth-child(3) {
    justify-content: center;
    text-align: center;
    padding-right: 16px;
}
.customers-box .summary-card .card-id,
.customers-box .summary-card .card-value,
.customers-box .summary-card .card-code,
.customers-box .summary-card .card-contact {
    flex: none;
}
.customers-box .summary-card .card-id {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}
.customers-box .summary-card .card-value {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}
.customers-box:not(.locations-box) .summary-card .card-code {
    margin-right: 0;
    justify-self: center;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 4px 20px;
    border-radius: 4px;
    background: var(--accent);
    color: white;
}

/* Locations page — four-column variant using the customer card pattern */
.list-page-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 18px;
    position: relative;
}

.list-page-title-row > div {
    text-align: center;
}

.list-page-title-row h1 {
    margin: 0;
}

.list-page-title-row > .btn-header-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(calc(-50% - 15px));
}

/* Keep the header action anchored while its generic button styles animate. */
.list-page-title-row > .btn-header-right:hover,
.list-page-title-row > .btn-header-right:focus-visible {
    transform: translateY(calc(-50% - 15px));
}

.list-page-title-row > .btn-header-right:active {
    transform: translateY(calc(-50% - 15px));
}

.page-subtitle {
    margin: 6px 0 0;
    color: var(--text-muted);
}

.locations-box .summary-card-header {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    padding: 16px 28px;
}

.locations-box .summary-card-header .card-label {
    text-align: center;
    justify-content: center;
    cursor: pointer;
}

.locations-box .summary-card-header .card-label.sort-header:hover {
    color: var(--accent);
}

.locations-box .summary-card {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    padding: 6px 28px;
}

.locations-box .summary-card .card-value,
.locations-box .summary-card .card-address,
.locations-box .summary-card .card-code,
.locations-box .summary-card .card-state,
.locations-box .summary-card .card-contact {
    flex: none;
    text-align: center;
}

/* City inherits the customer-code badge styling; keep that badge content-sized. */
.locations-box .summary-card .card-code {
    justify-self: center;
    width: auto;
    max-width: 150px;
    padding: 5px 28px;
}

.location-view .location-inline-grid {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.location-view .location-autocomplete-field {
    position: relative;
}

.location-view .location-osm-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    display: none;
    z-index: 1000;
}

.location-view .double-click-edit-hint {
    display: inline-block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
}

.location-view .location-detail-section + .location-detail-section {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.location-view .location-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.location-view .location-section-heading h3 {
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.location-view .location-section-heading span {
    color: var(--muted);
    font-size: 12px;
}

.location-view .location-state-field,
.location-view .location-zip-field {
    max-width: 160px;
}

.location-view .location-contact-action-field {
    position: relative;
}

.location-view .location-quick-action {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.location-view .location-quick-action:hover,
.location-view .location-quick-action:focus-visible {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(96, 165, 250, 0.12);
    color: var(--accent);
    outline: none;
    transform: translateY(-1px);
}

.location-view .is-editing .location-quick-action {
    display: none;
}

.location-view .location-secondary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: 20px;
    margin-top: 20px;
}

.location-view .location-map-card,
.location-view .location-history-card {
    padding: 20px;
}

.location-view .location-map {
    height: 300px;
}

.location-view .location-load-list {
    display: grid;
    gap: 4px;
}

.location-view .location-load-link {
    display: grid;
    gap: 3px;
    padding: 12px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    transition: background 160ms ease, transform 160ms ease;
}

.location-view .location-load-link:hover,
.location-view .location-load-link:focus-visible {
    background: rgba(96, 165, 250, 0.1);
    outline: none;
    transform: translateX(2px);
}

.location-view .location-load-link span {
    color: var(--accent);
    font-weight: 800;
}

.location-view .location-load-link small,
.location-view .location-empty-history {
    color: var(--muted);
    font-size: 12px;
}

/* Location full view — map and concise address/contact profile. */
.location-view .location-name-edit-field {
    display: none;
    position: relative;
    max-width: 560px;
}

.location-view:has(#edit-form.is-editing) .location-name-edit-field {
    display: block;
}

.location-view .location-name-edit-field .edit-val {
    display: block;
    font-size: 28px;
}

.location-view .location-profile-layout {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(340px, 1fr);
    gap: 28px;
    align-items: stretch;
}

.location-view .location-profile-layout > form {
    min-width: 0;
}

.location-view .location-map-panel {
    display: grid;
    grid-template-rows: minmax(280px, 1fr) auto;
    min-width: 0;
}

.location-view .location-map {
    height: 100%;
    min-height: 280px;
}

.location-view .location-detail-section + .location-detail-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 0;
}

.load-view.location-view .location-detail-section .customer-inline-grid {
    grid-template-columns: 1fr;
    gap: 6px;
}

.load-view.location-view .location-detail-section .customer-inline-grid .stat {
    min-height: auto;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.load-view.location-view .location-detail-section .customer-inline-grid .stat:hover {
    border-color: transparent;
}

.location-view .location-detail-section label {
    display: none;
}

.location-view .location-detail-section .view-val {
    display: block;
    color: var(--text);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.35;
}

.location-view .location-city-line .view-val {
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
}

.location-view .location-city-inputs,
.location-view .location-contact-inputs {
    display: none;
    grid-template-columns: minmax(0, 1fr) 90px 105px;
    gap: 8px;
}

.location-view .is-editing .location-city-inputs,
.location-view .is-editing .location-contact-inputs {
    display: grid;
}

.location-view .location-contact-inputs {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.location-view .location-contact-methods {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.location-view .location-contact-methods .location-email-value:empty {
    display: none;
}

.location-view .location-contact-methods .view-val {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 500;
}

.location-view .location-quick-action {
    position: static;
    width: 32px;
    height: 32px;
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(148, 163, 184, 0.09);
    color: var(--text);
    font-size: 15px;
    transform: none;
}

.location-view .location-history-card {
    margin-top: 20px;
    padding: 22px 24px;
}

.location-view .location-history-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.location-view .location-history-heading h2 {
    margin: 0;
    font-size: 18px;
}

.location-view .location-history-heading span {
    color: var(--muted);
    font-size: 13px;
}

.location-view .location-load-link {
    grid-template-columns: minmax(140px, 0.55fr) 1fr;
    align-items: center;
    gap: 14px;
    border: 1px solid transparent;
}

.location-view .location-load-link:hover,
.location-view .location-load-link:focus-visible {
    border-color: rgba(96, 165, 250, 0.2);
    transform: none;
}

.location-view .location-load-link {
    grid-template-columns: minmax(180px, 0.8fr) minmax(170px, 0.7fr) minmax(260px, 1fr);
    padding: 15px 16px;
    text-align: left;
}

.location-view .location-load-primary,
.location-view .location-load-metadata,
.location-view .location-load-dates {
    display: grid;
    align-content: center;
    gap: 4px;
}

.location-view .location-load-primary strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.location-view .location-load-metadata {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 6px;
}

.location-view .location-load-metadata span {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(96, 165, 250, 0.1);
    color: var(--accent);
    font-size: 11px;
    font-weight: 750;
}

.location-view .location-load-metadata span + span {
    background: rgba(148, 163, 184, 0.12);
    color: var(--muted);
}

.location-view .location-load-dates {
    grid-template-columns: repeat(2, max-content);
    justify-content: end;
    gap: 14px;
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 760px) {
    .location-view .location-profile-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .location-view .location-map {
        height: 260px;
    }

    .location-view .location-city-inputs,
    .location-view .location-contact-inputs,
    .location-view .location-load-link {
        grid-template-columns: 1fr;
    }

    .location-view .location-load-dates {
        grid-template-columns: 1fr;
        justify-content: start;
        gap: 3px;
    }
}

.location-view .location-empty-history {
    margin: 14px 0 0;
}

.location-pin-marker {
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #2f80ed;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.32);
}

.location-pin-marker span {
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: #fff;
}

.location-pin-marker::after {
    content: none;
}

@media (max-width: 900px) {
    .location-view .location-secondary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .location-view .location-state-field,
    .location-view .location-zip-field {
        max-width: none;
    }
}

.card-legs,
.card-contact {
    font-size: 14px;
    color: var(--muted);
    flex: 1 1 220px;
    text-align: center;
}


/* ============================================================
   9a. NO RESULTS MESSAGE
   ============================================================ */

.no-results-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: var(--space-8) var(--space-6);
    text-align: center;
    color: var(--muted);
    font-size: 16px;
    background: var(--card);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}

.no-results-message p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.no-results-message::before {
    content: '⌕';
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-3);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--accent);
    font-size: 24px;
    line-height: 1;
}

/* Tables remain usable on narrow screens without forcing the page itself wider. */
.table-wrapper,
.table-responsive,
.dashboard-recap-table {
    max-width: 100%;
}

.table-wrapper,
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ============================================================
   9b. FILTER CONTROLS
   ============================================================ */

.filter-controls {
    display: inline-block;
    width: calc(100% - 202px);
    vertical-align: top;
    box-sizing: border-box;
    padding: 20px 24px;
    margin-bottom: 62px;
    background: var(--card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
    flex: 1;
}

.filter-group label {
    font-size: 12px;
    font-weight: bold;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-group input[type="text"],
.filter-group input[type="date"],
.filter-group select {
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    width: 100%;
    box-sizing: border-box;
    transition: all var(--transition);
}

.filter-group input[type="text"]:hover,
.filter-group input[type="date"]:hover,
.filter-group select:hover {
    border-color: var(--accent);
}

.filter-group input[type="text"]:focus,
.filter-group input[type="date"]:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.filter-group select option {
    background: var(--panel);
    color: var(--text);
}

.filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    min-width: 160px;
    justify-content: flex-end;
}

/* Exact appointment-time fields use the same dimensions as the filter
   dropdowns when the Custom time option is active. */
.filter-controls .filter-group input[type="time"] {
    display: block;
    min-height: 40px;
    padding: 10px 14px;
    margin: 0;
    font-size: 14px;
    font-family: var(--font);
    line-height: 1.2;
    color: var(--text);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}

.filter-controls .filter-group input[type="time"][hidden] {
    display: none;
}

.filter-controls .filter-group input[type="time"]:hover,
.filter-controls .filter-group input[type="time"]:focus {
    border-color: var(--accent);
}

.custom-24-hour-time {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.filter-controls .filter-group input[type="time"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.filter-layout-controls {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.filter-layout-panel {
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    width: 178px;
    min-width: 178px;
    min-height: 0;
    margin: 0 0 62px 12px;
    padding: 16px 18px;
    vertical-align: top;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}

.filter-layout-heading {
    color: var(--muted);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.filter-layout-controls {
    flex-direction: column;
    align-items: stretch;
}

.filter-layout-select,
.btn-filter-layout-save,
.btn-filter-layout-delete {
    width: 100%;
    max-width: none;
    flex: none;
}

/* Loads use a compact command bar instead of the legacy two-card filter form. */
.load-list-tools {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.load-layout-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    margin: 0;
    padding: 5px 8px;
    background: transparent;
    border-color: transparent;
    border-radius: var(--radius-sm);
    box-shadow: none;
    overflow-x: auto;
    /* Keep the toolbar below the New Load modal overlay. The global nav rule
       gives every nav a high stacking level, which otherwise leaves these
       controls visually above the dimmed interface. */
    position: relative;
    z-index: 1;
}

.filter-layout-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.filter-layout-button-group {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--panel);
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.filter-layout-button,
.load-layout-toolbar .btn-filter-layout-delete,
.load-layout-toolbar .btn-filter-layout-save {
    min-height: 36px;
    padding: 8px 16px;
    color: var(--text);
    font: 600 13px/1 var(--font);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
    filter: none;
    transform: none;
    transition: color var(--transition), background var(--transition);
    cursor: pointer;
    white-space: nowrap;
}

.filter-layout-button[aria-pressed="true"] {
    color: white;
    background: transparent;
}

.filter-layout-button-group:has(.filter-layout-button[aria-pressed="true"]) {
    color: white;
    background: var(--accent);
    border-color: var(--accent);
}

.filter-layout-button-group:has(.filter-layout-button[aria-pressed="true"]) .btn-filter-layout-delete {
    color: white;
}

.load-layout-toolbar .btn-filter-layout-delete {
    width: auto;
    min-width: 28px;
    padding: 7px 8px 7px 2px;
    border-left: 0;
    color: var(--muted);
}

.filter-layout-button {
    min-width: 112px;
    letter-spacing: .01em;
}

.load-layout-toolbar .btn-filter-layout-save {
    width: auto;
    margin-left: auto;
    min-height: 34px;
    padding: 7px 16px;
    font-size: 13px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.load-layout-toolbar .btn-edit-load-columns {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 16px;
    color: var(--text);
    font: 600 13px/1 var(--font);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
    filter: none;
    transform: none;
    white-space: nowrap;
}

.load-layout-toolbar .btn-edit-load-columns:hover,
.load-layout-toolbar .btn-edit-load-columns:focus,
.load-layout-toolbar .btn-edit-load-columns:active,
.load-layout-toolbar .btn-edit-load-columns[aria-expanded="true"] {
    color: var(--text);
    background: transparent;
    border-color: var(--border);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
    filter: none;
    transform: none;
}

.filter-layout-button-group:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: var(--accent);
}

.filter-layout-button-group:hover .filter-layout-button,
.filter-layout-button-group:hover .btn-filter-layout-delete {
    color: inherit;
    background: transparent;
    box-shadow: none;
    filter: none;
    transform: none;
}

.load-layout-toolbar .filter-layout-button:focus,
.load-layout-toolbar .filter-layout-button:focus-visible,
.load-layout-toolbar .btn-filter-layout-delete:focus,
.load-layout-toolbar .btn-filter-layout-delete:focus-visible,
.load-layout-toolbar .filter-layout-button:active,
.load-layout-toolbar .btn-filter-layout-delete:active {
    outline: 0;
    box-shadow: none;
    filter: none;
    transform: none;
}

.load-layout-toolbar .btn-filter-layout-save:hover,
.load-layout-toolbar .btn-filter-layout-save:focus,
.load-layout-toolbar .btn-filter-layout-save:active {
    color: var(--text);
    background: transparent;
    border-color: var(--border);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
    filter: none;
    transform: none;
}

/* Keep the command buttons visibly elevated while the New Load flow is open. */
.partial-loads-box .load-layout-toolbar .btn-filter-layout-save:hover,
.partial-loads-box .load-layout-toolbar .btn-filter-layout-save:focus,
.partial-loads-box .load-layout-toolbar .btn-filter-layout-save:active,
.partial-loads-box .load-layout-toolbar .btn-edit-load-columns:hover,
.partial-loads-box .load-layout-toolbar .btn-edit-load-columns:focus,
.partial-loads-box .load-layout-toolbar .btn-edit-load-columns:active {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16) !important;
}

.filter-layout-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.load-list-tools .load-filter-controls {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.load-filter-primary {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.load-filter-primary .filter-group {
    flex: 0 0 auto;
    min-width: 0;
    gap: 3px;
}

.load-filter-primary .filter-search-group {
    flex: 1 1 420px;
}

.filter-status-group {
    width: 150px;
}

.load-search-input-wrap {
    position: relative;
}

.load-search-input-wrap > span {
    position: absolute;
    left: 11px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 17px;
    pointer-events: none;
}

.filter-group input[type="search"] {
    width: 100%;
    min-height: 36px;
    padding: 7px 12px 7px 34px;
    color: var(--text);
    font: 14px var(--font);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}

.filter-group input[type="search"]:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.load-filter-primary .filter-group select,
.load-filter-primary .btn-apply-filters,
.btn-toggle-load-filters,
.load-filter-primary .btn-clear-filters {
    min-height: 36px;
    padding: 7px 12px;
}

.btn-toggle-load-filters {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    padding: 7px;
    color: var(--text);
    font: 600 13px var(--font);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.filter-dropdown-arrow {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    transition: transform var(--transition);
}

.btn-toggle-load-filters[aria-expanded="true"] .filter-dropdown-arrow {
    transform: rotate(180deg);
}

.btn-toggle-load-filters[aria-expanded="true"] {
    border-color: var(--accent);
}

.active-filter-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: middle;
}

.load-advanced-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 8px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--border);
}

.load-advanced-filters[hidden] {
    display: none;
}

.load-advanced-filters .filter-group {
    min-width: 0;
    gap: 3px;
}

.load-list-tools + .new-load-bar {
    margin-top: 0;
}

@media (max-width: 900px) {
    .load-filter-primary {
        flex-wrap: wrap;
    }

    .load-filter-primary .filter-search-group {
        flex-basis: 100%;
    }

    .load-advanced-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 520px) {
    .filter-status-group {
        width: calc(50% - 4px);
    }

    .load-advanced-filters {
        grid-template-columns: 1fr;
    }
}

/* The Loads workspace is intentionally edge-to-edge to maximize table space. */
.content .partial-loads-box {
    width: calc(100% + 24px);
    max-width: none;
    margin: 6px -12px;
    padding: 4px 12px 4px 10px;
}

.partial-loads-box .new-load-bar {
    width: 100%;
}

.partial-loads-box .loads-columns-scroll {
    padding-right: 6px;
    scrollbar-gutter: stable;
}

.partial-loads-box .load-filter-primary {
    align-items: center;
}

.partial-loads-box .load-filter-primary .btn-new-load {
    margin-left: auto;
    flex: 0 0 auto;
}

.locations-box .location-filter-primary {
    align-items: center;
}

.locations-box .location-filter-primary .btn-new-location {
    margin-left: auto;
    flex: 0 0 auto;
}

.filter-actions > .btn-apply-filters {
    order: 3;
}

.filter-actions > .btn-clear-filters {
    order: 4;
}

.filter-layout-select,
.btn-filter-layout-save,
.btn-filter-layout-delete {
    box-sizing: border-box;
    min-height: 30px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.2;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.filter-layout-select {
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
    min-height: 30px;
    height: 30px;
}

.btn-filter-layout-save,
.btn-filter-layout-delete {
    cursor: pointer;
}

.btn-filter-layout-delete:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.equipment-type-picker select {
    width: 100%;
}

.equipment-custom-type {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.equipment-custom-type input {
    flex: 1;
    min-width: 0;
}

.equipment-custom-type button {
    padding: 8px 14px;
    color: white;
    background: var(--accent);
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.btn-apply-filters {
    padding: 10px 22px;
    font-size: 14px;
    font-family: var(--font);
    font-weight: bold;
    color: white;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 2px 4px color-mix(in srgb, var(--accent) 25%, transparent);
}

.btn-apply-filters:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

.btn-apply-filters:active {
    transform: translateY(0);
}

.btn-clear-filters {
    padding: 10px 22px;
    font-size: 14px;
    font-weight: bold;
    color: var(--muted);
    text-decoration: none;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.btn-clear-filters:hover {
    color: var(--text);
    border-color: var(--text);
    background: var(--card);
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-clear-filters:active {
    transform: translateY(0);
}


/* ============================================================
   9c. PAGINATION CONTROLS
   ============================================================ */

.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--card);
    border-radius: var(--radius-md);
    gap: 24px;
}

.pagination-info {
    font-size: 14px;
    color: var(--muted);
}

.pagination-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-page {
    padding: 8px 14px;
    font-size: 14px;
    text-decoration: none;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.btn-page:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-page.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    font-weight: bold;
}

.btn-page:active {
    transform: translateY(0);
}

.page-ellipsis {
    padding: 8px 4px;
    color: var(--muted);
    font-size: 14px;
}

.pagination-page-size {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagination-page-size label {
    font-size: 13px;
    color: var(--muted);
}

#page-size-select {
    padding: 8px 12px;
    font-size: 13px;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}

#page-size-select:hover {
    border-color: var(--accent);
}

#page-size-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}


/* ============================================================
   10. DASHBOARD RECAP (Recent Loads & Customers)
   ============================================================ */

.dashboard-recap-container {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.dashboard-recap-section {
    flex: 0 0 400px;
    max-width: 400px;
    min-width: 300px;
    margin-left:40px;
}

.dashboard-recap-box {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-align: left;
    overflow-x: auto;
}

.dashboard-recap-box h3 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 16px;
    color: var(--text);
    font-weight: bold;
}

.dashboard-recap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.dashboard-recap-table thead tr {
    border-bottom: 2px solid var(--border);
}

.dashboard-recap-table th {
    padding: 8px 6px;
    text-align: left;
    font-size: 11px;
    font-weight: bold;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-recap-table th:nth-child(2) {
    text-align: center;
}

.dashboard-recap-table th:nth-child(3) {
    text-align: right;
}

.dashboard-recap-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
    cursor: pointer;
}

.dashboard-recap-table tbody tr:hover {
    background: rgba(96, 165, 250, 0.04);
}

.dashboard-recap-table td {
    padding: 8px 6px;
    font-size: 12px;
}

.dashboard-recap-table td:first-child {
    font-weight: bold;
    font-size: 12px;
}

.dashboard-recap-table td:first-child a {
    color: var(--accent);
    text-decoration: none;
    font-weight: bold;
}

.dashboard-recap-table td:first-child a:hover {
    text-decoration: underline;
}

.dashboard-recap-table td:nth-child(2) {
    text-align: center;
}

.dashboard-recap-table td:nth-child(3) {
    text-align: right;
    font-size: 13px;
    color: var(--muted);
}

.dashboard-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 4px;
    background: var(--accent);
    color: white;
    font-size: 11px;
    font-weight: bold;
    width: 104px;
    min-width: 104px;
    height: 26px;
    line-height: 1;
    box-sizing: border-box;
    white-space: nowrap;
}


/* ============================================================
   11. STATUS BADGES & PILLS
   ============================================================ */

/* General load-view pills — also used across the app */
.pill {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pill-status {
    background: var(--card);
    border-color: var(--accent);
    color: var(--text);
    padding: 6px 12px;
}

.pill-invoice {
    background: var(--card);
    border-color: var(--border);
    color: var(--text);
}

/* Hazmat pill — orange, appears between status and invoice pills */
.pill-hazmat {
    background: #f97316;
    border-color: #f97316;
    color: white;
    font-size: 12px;
    padding: 4px 10px;
    animation: hazmatPulse 2s ease-in-out infinite;
}

.pill-oversized {
    background: #f97316;
    color: white;
    animation: hazmatPulse 2s ease-in-out infinite;
}

.pill-status.cancelled,
.pill-invoice.cancelled {
    background: #dc3545;
    border-color: #dc3545;
    color: white;
}

.pill-status.rejected,
.pill-invoice.rejected {
    background: #dc3545;
    border-color: #dc3545;
    color: white;
}

.pill-status.pending,
.pill-invoice.pending {
    background: #ffc107;
    border-color: #ffc107;
    color: #333;
}

.pill-status.booked,
.pill-invoice.booked {
    background: #28a745;
    border-color: #28a745;
    color: white;
}


/* ============================================================
   12. TABLE STYLES
   ============================================================ */

/* Analytics & Accounting fragments — reserved for future use */
.analytics-grid,
.accounting-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.analytics-grid .card,
.accounting-grid .card {
    flex: 1;
    min-width: 200px;
    padding: 20px 24px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--muted);
}

.analytics-grid .card strong,
.accounting-grid .card strong {
    color: var(--text);
}

/* Customers & Loads boxes */
.customers-box,
.partial-loads-box,
.carriers-box {
    width: 100%;
    max-width: 1400px;
    margin: 32px auto;
    padding: 28px 48px;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    text-align: center;
}

.customers-box h3,
.partial-loads-box h3 {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
}

.customers-box .table,
.partial-loads-box .table {
    width: 100%;
    border-collapse: collapse;
}

.customers-box .table thead tr,
.partial-loads-box .table thead tr {
    border-bottom: 2px solid var(--border);
}

.customers-box .table th,
.customers-box .table td,
.partial-loads-box .table th,
.partial-loads-box .table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.customers-box .table th,
.partial-loads-box .table th {
    font-size: 12px;
    font-weight: bold;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.customers-box .table tbody tr:hover,
.partial-loads-box .table tbody tr:hover {
    background: rgba(96, 165, 250, 0.04);
}

/* Carrier table */
table.carrier-table {
    width: 100%;
    border-collapse: collapse;
}

table.carrier-table th {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: bold;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
    text-align: left;
}

table.carrier-table td {
    padding: 10px 12px;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

table.carrier-table tbody tr:hover {
    background: rgba(96, 165, 250, 0.04);
}

/* Accounting table */
table.accounting-table {
    width: 100%;
    border-collapse: collapse;
}

table.accounting-table th {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: bold;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
    text-align: left;
}

table.accounting-table td {
    padding: 10px 12px;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

table.accounting-table tbody tr:hover {
    background: rgba(96, 165, 250, 0.04);
}


/* ============================================================
   13. PRIVACY POLICY & TERMS
   ============================================================ */

.container {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 24px 80px;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

.policy {
    line-height: 1.8;
    color: var(--text);
    padding-bottom: 24px;
}

.policy header h1 {
    font-size: 32px;
    text-align: left;
    margin-bottom: 8px;
}

.policy .effective {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 32px;
}

.policy section {
    margin-bottom: 32px;
}

.policy section h2 {
    margin-bottom: 12px;
    font-size: 20px;
}

.policy p {
    margin-bottom: 12px;
}

.policy ul {
    padding-left: 24px;
}

.policy ul li {
    margin-bottom: 6px;
    line-height: 1.6;
}

.policy strong {
    font-weight: bold;
}


/* ============================================================
   14. LOAD VIEW
   ============================================================ */

/* ---------- 14a. Layout & Containers ---------- */

/* Load View Styles */
.load-view {
    padding: 24px;
    max-width: 100%;
    background: var(--bg);
    border-radius: 12px;
    min-width: 0;
    /* Clip horizontal overflow without creating a scroll container that breaks sticky children. */
    overflow-x: clip;
    overflow-y: visible;
}

.load-view.customer-view {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* Carrier View Styles - mirrors load-view */
.carrier-view {
    padding: 24px;
    max-width: 100%;
    background: var(--bg);
}

.carrier-view .container,
.carrier-view.load-view .container {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

.carrier-view .column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.carrier-view .column-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.load-view .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 24px;
    max-width: 1600px;
    margin: 0 auto;
    min-width: 0;
}

.load-view .column {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    overflow: hidden;
}

/* ---------- 14b. Back Button ---------- */

.load-view .back-button-container,
.carrier-view .back-button-container {
    margin-bottom: 24px;
}

.load-view .back-button,
.carrier-view .back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--accent);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.load-view .back-button:hover,
.carrier-view .back-button:hover {
    opacity: 0.85;
}

/* ---------- 14c. Header & Status ---------- */

.load-view .header,
.carrier-view .header {
    margin-bottom: 32px;
    padding: 24px;
    background: var(--card);
    border-radius: var(--radius-md);
    min-width: 0;
    overflow: hidden;
}

.load-view .header-content h1,
.carrier-view .header-content h1 {
    font-size: 32px;
    margin: 0 0 16px 0;
    color: var(--text);
    font-weight: bold;
    letter-spacing: -0.5px;
}

.load-view .status-row,
.carrier-view .status-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.load-view .load-action-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.load-view .load-action-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.load-view .load-action-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: currentColor;
}

.load-view .load-action-chip-blocker {
    color: #fca5a5;
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(248, 113, 113, 0.42);
}

.load-view .load-action-chip-operational {
    color: #fdba74;
    background: rgba(234, 88, 12, 0.14);
    border-color: rgba(251, 146, 60, 0.42);
}

.load-view .load-action-chip-document {
    color: #93c5fd;
    background: rgba(37, 99, 235, 0.14);
    border-color: rgba(96, 165, 250, 0.42);
}

.load-view .load-action-chip-complete {
    color: #86efac;
    background: rgba(22, 163, 74, 0.14);
    border-color: rgba(74, 222, 128, 0.42);
}

@media (max-width: 640px) {
    .load-view .load-action-chips {
        gap: 6px;
    }

    .load-view .load-action-chip {
        max-width: 100%;
        white-space: normal;
    }
}

.load-view .load-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-top: 18px;
}

.load-view .load-overview-grid .card,
.load-view .load-overview-grid .load-map-panel {
    margin-top: 0;
}

.load-view .load-details-card {
    box-sizing: border-box;
    align-self: start;
}

.load-view .load-details-card .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.load-view .load-details-card .csr-search-input,
.load-view .driver-assignment-card .carrier-search-input,
.load-view .driver-assignment-card .driver-search-input {
    box-sizing: border-box;
    max-width: 100%;
    width: 100% !important;
}

.load-view.editing .header,
.load-view.editing .load-details-card {
    overflow: visible;
}

.load-view .status-box,
.carrier-view .status-box {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.load-view .status-text,
.carrier-view .status-text {
    padding: 8px 16px;
    background: var(--card);
    border: 2px solid var(--accent);
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.load-view .status-text.cancelled,
.carrier-view .status-text.cancelled {
    background: #dc3545;
    border-color: #dc3545;
    color: white;
}

/* ---------- 14d. Cards (Generic) ---------- */

.load-view .card,
.carrier-view .card {
    padding: 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: var(--card);
    margin-top: 14px;
    min-width: 0;
    overflow: hidden;
}

.load-view.editing .container {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.7fr);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.load-view.editing .column,
.load-view.editing .card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.load-view.editing .card {
    overflow-wrap: break-word;
}

/* Keep location search results above the edit panel instead of clipping them
   at the panel boundary. */
.load-view.editing .column-side,
.load-view.editing .card,
.load-view.editing .leg-card,
.load-view.editing .leg-body {
    overflow: visible;
}

/* In edit mode, hide the display-only leg details (duplicated in edit fields below) */
.load-view.editing .leg-card .details-list {
    display: none;
}

.load-view .card:hover,
.carrier-view .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* Edit mode - cards get a subtle border highlight */
.load-view.is-editing .card {
    border: 1px solid var(--border);
    transition: border-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.load-view.is-editing .card:has(.edit-val:not(.hidden):not([style*="display: none"])) {
    border-color: rgba(96, 165, 250, 0.25);
    box-shadow: 0 2px 12px rgba(96, 165, 250, 0.06), 0 2px 8px rgba(0,0,0,0.08);
}

.load-view .card h2,
.carrier-view .card h2 {
    font-size: 13px;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
    color: var(--text);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.load-view .card h3,
.carrier-view .card h3 {
    font-size: 16px;
    margin: 0 0 12px 0;
    color: var(--text);
    font-weight: bold;
}

.load-view .card h4,
.carrier-view .card h4 {
    font-size: 14px;
    margin: 0 0 12px 0;
    color: var(--text);
    font-weight: bold;
}

.driver-search-input {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
}

/* ---------- 14e. Stat Grid ---------- */

.load-view .stat-grid,
.carrier-view .stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.load-view .stat,
.carrier-view .stat {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    background: var(--card);
    border-radius: 6px;
    border: 1px solid var(--border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 0;
    overflow: hidden;
    word-break: break-word;
}

.load-view .stat:hover,
.carrier-view .stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Inline-editable load fields are opened with a double-click. Make that
   interaction discoverable instead of relying on users to guess it. */
.load-view:not(.editing) .stat:has(.edit-val, .load-edit-only),
.load-view:not(.editing) .leg-card:has(.edit-val, .load-edit-only),
.load-view:not(.editing) .commission-card:has(.edit-val, .load-edit-only),
.load-view:not(.editing) tr[data-charge-id]:has(.edit-val, .load-edit-only),
.load-view:not(.editing) tr[data-commodity-id]:has(.edit-val, .load-edit-only) {
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.load-view:not(.editing) .stat:has(.edit-val, .load-edit-only):hover,
.load-view:not(.editing) .leg-card:has(.edit-val, .load-edit-only):hover,
.load-view:not(.editing) .commission-card:has(.edit-val, .load-edit-only):hover,
.load-view:not(.editing) tr[data-charge-id]:has(.edit-val, .load-edit-only):hover,
.load-view:not(.editing) tr[data-commodity-id]:has(.edit-val, .load-edit-only):hover {
    border-color: transparent;
    background-color: var(--card);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.load-view:not(.editing) .leg-card:has(.edit-val, .load-edit-only):hover {
    border-color: #3b82f6;
}

/* Highlight the entire driver/carrier section while its content is hovered. */
.load-view:not(.editing) .driver-assignment-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.load-view:not(.editing) .load-details-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.load-view:not(.editing) .driver-assignment-card:has(*:hover) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--card));
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.load-view:not(.editing) .load-details-card:has(*:hover) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--card));
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.load-view:not(.editing) .card:has(> .edit-val):has(*:hover) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--card));
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

/* Keep the hover treatment on the section, not on individual assignment fields. */
.load-view:not(.editing) .driver-assignment-card .stat:hover {
    border-color: transparent;
    background: var(--card);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.load-view:not(.editing) .card:has(> .edit-val) .stat:hover {
    border-color: transparent;
    background: var(--card);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.load-view .double-click-edit-hint {
    display: none;
    margin-left: auto;
    padding: 3px 7px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: 999px;
    background: var(--card);
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    pointer-events: none;
}

.load-view .driver-assignment-card .section-heading-with-hint {
    align-items: center;
    display: flex;
    gap: 1rem;
    margin-bottom: 12px;
}

.load-view .load-details-card .section-heading-with-hint {
    align-items: center;
    display: flex;
    margin-bottom: 6px;
}

.load-view .driver-assignment-card .section-heading-with-hint h2 {
    margin: 0;
}

.load-view .driver-assignment-card .double-click-edit-hint {
    display: none;
    position: absolute;
    top: 10px;
    right: 14px;
}

.load-view .load-details-card .double-click-edit-hint {
    display: none;
    margin-left: auto;
}

.load-view .card:has(> .edit-val) .section-heading-with-hint {
    align-items: center;
    display: flex;
    margin-bottom: 6px;
}

.load-view .card:has(> .edit-val) .double-click-edit-hint {
    display: none;
    margin-left: auto;
    position: absolute;
    top: 10px;
    right: 14px;
}

.load-view:not(.editing) .driver-assignment-card:hover .double-click-edit-hint {
    display: inline-block;
}

.load-view:not(.editing) .load-details-card:hover .double-click-edit-hint {
    display: inline-block;
}

.load-view:not(.editing) .card:has(> .edit-val):hover .double-click-edit-hint {
    display: inline-block;
}

.load-view:not(.editing) .driver-assignment-card .stat:has(.edit-val)::after {
    content: none;
}

.load-view:not(.editing) .leg-card:has(.edit-val, .load-edit-only):hover .double-click-edit-hint {
    display: inline-block;
}

.load-view .stat label,
.carrier-view .stat label {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.load-view .stat span,
.carrier-view .stat span {
    font-size: 13px;
    font-weight: bold;
    color: var(--text);
    word-break: break-word;
    min-width: 0;
    overflow-wrap: break-word;
    display: block;
}

.load-view .customer-inline-edit-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: none;
    margin: 0;
    padding: 0;
}

.load-view.customer-view .header,
.load-view.customer-view .customer-details-card {
    width: 100%;
    box-sizing: border-box;
}

.load-view.customer-view .header {
    border: 1px solid var(--border);
    background: var(--panel);
    box-shadow: var(--shadow-md);
}

.load-view.location-view .header,
.load-view.location-view .customer-details-card {
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

.load-view.location-view .header {
    padding: 18px 24px;
}

.load-view.location-view .customer-details-card {
    padding: 22px 24px;
}

.load-view.location-view .customer-card-heading {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 0;
}

.load-view.location-view .customer-inline-grid {
    gap: 0;
}

.load-view.location-view .customer-inline-grid .stat {
    min-height: 60px;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.load-view.location-view .customer-inline-grid .stat:hover {
    border-color: var(--border);
    box-shadow: none;
}

.load-view.location-view .location-detail-section .customer-inline-grid {
    gap: 8px;
}

.load-view.location-view .location-detail-section .customer-inline-grid .stat {
    min-height: 68px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 10px;
    background: rgba(15, 23, 41, 0.42);
}

.load-view.location-view .location-detail-section .customer-inline-grid .stat:hover {
    border-color: rgba(96, 165, 250, 0.42);
    box-shadow: none;
}

.load-view.location-view .customer-inline-edit-form input.edit-val {
    border-radius: 4px;
}

.load-view.customer-view .header-content h1 {
    text-align: left;
}

.load-view .customer-details-card {
    padding: 28px;
    border: 1px solid var(--border);
    background: var(--panel);
    box-shadow: var(--shadow-md);
}

.load-view .customer-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.load-view .customer-card-heading h2 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 22px;
    letter-spacing: -0.02em;
    text-transform: none;
}

.load-view .eyebrow {
    margin: 0 0 4px 0;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.load-view .customer-id-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 999px;
    background: rgba(96, 165, 250, 0.1);
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.load-view .customer-inline-grid {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
}

.load-view .customer-inline-grid .stat {
    min-height: 74px;
    padding: 16px;
    background: rgba(15, 23, 41, 0.84);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.load-view .customer-inline-grid .stat:hover {
    border-color: rgba(96, 165, 250, 0.42);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.load-view .customer-inline-grid .stat label {
    margin-bottom: 8px;
}

.load-view .customer-inline-grid .stat span {
    font-size: 15px;
    line-height: 1.35;
}

.load-view .customer-inline-grid .customer-primary-stat {
    grid-column: span 2;
}

.load-view .customer-inline-grid .customer-primary-stat span {
    font-size: 20px;
    letter-spacing: -0.02em;
}

/* Carrier inline grid — matches customer/location inline edit pattern */
.load-view .carrier-inline-grid {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.load-view .carrier-inline-grid .customer-primary-stat {
    grid-column: span 2;
}

.load-view .carrier-inline-grid .customer-primary-stat span {
    font-size: 20px;
    letter-spacing: -0.02em;
}

.load-view .customer-inline-edit-form .edit-val {
    display: none;
}

.load-view .customer-inline-edit-form.is-editing .view-val {
    display: none;
}

.load-view .customer-inline-edit-form.is-editing .edit-val {
    display: block;
}

.load-view .customer-inline-edit-form input.edit-val,
.load-view .customer-inline-edit-form textarea.edit-val,
.load-view .customer-inline-edit-form textarea.customer-notes-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(96, 165, 250, 0.34);
    border-radius: 10px;
    background: rgba(10, 15, 26, 0.92);
    color: var(--text);
    font: inherit;
    font-weight: 700;
}

.load-view .customer-inline-edit-form input.edit-val:focus,
.load-view .customer-inline-edit-form textarea.edit-val:focus,
.load-view .customer-inline-edit-form textarea.customer-notes-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.load-view .customer-inline-edit-form input[type="checkbox"].edit-val {
    width: auto;
    margin-top: 4px;
}

.load-view .customer-notes-panel {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: 20px;
    padding: 20px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: rgba(15, 23, 41, 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.load-view .customer-notes-heading h3 {
    margin: 0 0 6px 0;
    color: var(--text);
    font-size: 18px;
}

.load-view .customer-notes-heading span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.load-view .customer-note-field {
    min-width: 0;
    padding: 16px;
    border: 1px dashed rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    background: rgba(10, 15, 26, 0.48);
}

.load-view .customer-note-field p {
    margin: 0;
    min-height: 88px;
    color: var(--text);
    white-space: pre-wrap;
}

.load-view .customer-note-field p:empty::before {
    content: "No customer notes yet.";
    color: var(--muted);
    font-style: italic;
}

.load-view .customer-note-field textarea {
    min-height: 180px;
    resize: vertical;
}

@media (max-width: 1200px) {
    .load-view .customer-inline-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 760px) {
    .load-view .customer-card-heading,
    .load-view .customer-notes-panel {
        grid-template-columns: 1fr;
    }

    .load-view .customer-card-heading {
        flex-direction: column;
    }

    .load-view .customer-inline-grid,
    .load-view .customer-inline-grid .customer-primary-stat {
        grid-template-columns: 1fr;
        grid-column: span 1;
    }
}

/* Edit mode — field transitions */
.load-view .edit-val,
.load-view .load-edit-only {
    transition: opacity 0.25s ease, transform 0.2s ease;
}

/* Edit-mode inputs & selects — clean, consistent, elevated */
.load-view select.edit-val,
.load-view textarea.edit-val,
.load-view input.edit-val,
.load-view .leg-edit-fields select,
.load-view .leg-edit-fields input:not([type="checkbox"]),
.load-view .leg-edit-fields textarea,
.load-view #edit-csr-search,
.load-view .csr-search-input,
.load-view #edit-carrier-search,
.load-view #edit-driver-id,
.load-view .driver-search-input,
.load-view input.edit-val.leg-bol,
.load-view input.edit-val.leg-reference,
.load-view input.edit-val.leg-tender,
.load-view input.edit-val.leg-po {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 13px;
    font-family: var(--font);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.load-view select.edit-val[multiple] {
    width: 100%;
}

.load-view select.edit-val:focus,
.load-view textarea.edit-val:focus,
.load-view .leg-edit-fields select:focus,
.load-view .leg-edit-fields input:not([type="checkbox"]):focus,
.load-view .leg-edit-fields textarea:focus,
.load-view #edit-csr-search:focus,
.load-view .csr-search-input:focus,
.load-view #edit-carrier-search:focus,
.load-view #edit-driver-id:focus,
.load-view .driver-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.load-view select.edit-val option,
.load-view .leg-edit-fields select option {
    background: var(--panel);
    color: var(--text);
}

/* Charge/commission edit fields */
.load-view .charge-type-display input,
.load-view .charge-amount-display input {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 13px;
    font-family: var(--font);
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.load-view .charge-type-display input:focus,
.load-view .charge-amount-display input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* ---------- 14f. Parties Grid & Cards ---------- */

.load-view .parties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 20px;
    min-width: 0;
}

.load-view .party-card {
    padding: 20px;
    background: var(--card);
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.load-view .party-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.load-view .party-card h3 {
    font-size: 16px;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent);
    color: var(--accent);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.load-view .party-card dl,
.carrier-view .party-card dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.load-view .party-card dl > div,
.carrier-view .party-card dl > div {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s ease;
    min-width: 0;
    overflow: hidden;
}

.load-view .party-card dl > div:hover,
.carrier-view .party-card dl > div:hover {
    background: rgba(0,0,0,0.02);
}

.load-view .party-card dl > div:last-child,
.carrier-view .party-card dl > div:last-child {
    border-bottom: none;
}

.load-view .party-card dt,
.carrier-view .party-card dt {
    font-size: 11px;
    font-weight: bold;
    color: var(--muted);
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.load-view .party-card dt::after,
.carrier-view .party-card dt::after {
    content: ":";
}

.load-view .party-card dd,
.carrier-view .party-card dd {
    font-size: 14px;
    margin: 0;
    color: var(--text);
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Party card "Assignments" edit section */
.load-view .party-card.load-edit-only {
    border: 1.5px dashed rgba(96, 165, 250, 0.3);
    background: rgba(96, 165, 250, 0.03);
}

.load-view .party-card.load-edit-only h3 {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.load-view .party-card.load-edit-only dl > div {
    border-bottom-color: rgba(96, 165, 250, 0.12);
}

.load-view .party-card.load-edit-only dt {
    color: var(--accent);
}

/* Edit-mode search inputs inside parties */
.load-view .party-card input[type="text"].csr-search-input,
.load-view .party-card input#edit-csr-search,
.load-view .party-card input#edit-carrier-search {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.load-view .party-card input[type="text"].csr-search-input:focus,
.load-view .party-card input#edit-csr-search:focus,
.load-view .party-card input#edit-carrier-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* Driver dropdown in edit mode */
.load-view .party-card select#edit-driver-id {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.load-view .party-card select#edit-driver-id option {
    background: var(--panel);
    color: var(--text);
}

.carrier-view .parties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
    gap: 24px;
}

/* Driver assignments are easier to scan and expand as full-width rows than
   as tiled cards. */
.carrier-view .parties-grid.driver-rows {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.carrier-view .party-card {
    padding: 24px;
    background: var(--card);
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.carrier-view .driver-rows .party-card {
    padding: 14px 18px;
}

.carrier-view .driver-rows .party-card:hover {
    transform: none;
}

.carrier-view .party-card.editing {
    grid-column: 1 / -1;
}

.carrier-view .party-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.carrier-view .party-card h3 {
    font-size: 16px;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent);
    color: var(--accent);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---------- 14g. Legs List & Cards ---------- */

.load-view .legs-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.load-view .leg-card {
    padding: 14px;
    background: var(--card);
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    min-width: 0;
    overflow: hidden;
}

.load-view .leg-card.leg-reordered {
    transform: translateY(-4px) scale(1.01);
    border-color: var(--accent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 28%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.load-view .leg-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    border-color: #3b82f6;
}

.load-view .leg-card .leg-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid var(--accent);
    flex-wrap: wrap;
    min-width: 0;
    overflow: hidden;
}

.load-view .leg-card .leg-header h3 {
    font-size: 16px;
    margin: 0;
    color: var(--text);
    font-weight: bold;
}

.load-view .leg-reorder-controls {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.load-view .leg-reorder-controls .btn {
    min-width: 30px;
    padding: 4px 8px;
    line-height: 1;
}

.load-view .leg-reorder-controls .btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

.load-view .leg-card .leg-type {
    padding: 4px 12px;
    border-radius: 4px;
    background: var(--accent);
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.load-view .leg-card .leg-status {
    padding: 4px 12px;
    border-radius: 4px;
    background: var(--muted);
    color: var(--bg);
    font-size: 12px;
    font-weight: bold;
}

.load-view .leg-card .po-badge {
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--panel);
    color: var(--text);
    font-size: 12px;
    font-family: monospace;
    font-weight: bold;
}

.load-view .leg-card .leg-summary-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.load-view .leg-card .leg-summary-appt {
    font-size: 11px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.load-view .leg-card .leg-section {
    margin-bottom: 20px;
    max-width: 100%;
    min-width: 0;
}

.load-view .leg-card .leg-section:last-child {
    margin-bottom: 0;
}

.load-view .leg-card .leg-section h4 {
    font-size: 13px;
    margin: 0 0 10px 0;
    color: var(--text);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

.load-view .leg-card .location-list > div,
.load-view .leg-card .details-list > div {
    display: grid;
    grid-template-columns: minmax(80px, 130px) 1fr;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    min-width: 0;
    overflow: hidden;
}

.load-view .leg-card .location-list > div:last-child,
.load-view .leg-card .details-list > div:last-child {
    border-bottom: none;
}

.load-view .leg-card .location-list dt,
.load-view .leg-card .details-list dt {
    font-size: 11px;
    font-weight: bold;
    color: var(--muted);
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.load-view .leg-card .location-list dt::after,
.load-view .leg-card .details-list dt::after {
    content: ":";
}

.load-view .leg-card .location-list dd,
.load-view .leg-card .details-list dd {
    font-size: 13px;
    margin: 0;
    color: var(--text);
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.load-view .leg-card .tz-label {
    color: #888;
    font-size: 0.85em;
}

.load-view .leg-card .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.load-view .leg-card .table thead tr {
    color: var(--text);
}

.load-view .leg-card .table th,
.load-view .leg-card .table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.load-view .leg-card .table tbody tr:last-child td {
    border-bottom: none;
}

.load-view .leg-card .table tbody tr:hover {
    background: rgba(0,0,0,0.03);
}

/* Leg edit fields — clean grid layout */
.load-view .leg-edit-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    padding: 16px;
    margin-top: 12px;
    background: rgba(10, 15, 26, 0.5);
    border-radius: 8px;
    border: 1px dashed rgba(96, 165, 250, 0.2);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.load-view .leg-edit-fields label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 0;
}

.load-view .leg-edit-fields label:has(textarea) {
    grid-column: 1 / -1;
}

.load-view .datetime-edit-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 6px;
    width: 100%;
}

.load-view .datetime-edit-controls input,
.load-view .datetime-edit-controls select {
    min-width: 0;
    width: 100%;
}

.load-view .leg-edit-fields input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Remove leg button in edit mode */
.load-view .remove-leg-btn {
    margin-left: auto;
    padding: 4px 12px;
    background: rgba(220, 53, 69, 0.15);
    color: #ef4444;
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.load-view .remove-leg-btn:hover {
    background: rgba(220, 53, 69, 0.25);
}

/* Route heading and always-available add-stop action */
.load-view .route-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.load-view .route-section-heading .add-leg-btn {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    padding: 0;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.load-view .route-section-heading .add-leg-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Commodity edit fields inside load-view leg cards */
.load-view .commodities-table input.edit-val {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 4px 6px;
    font-weight: 600;
    font-size: 12px;
    font-family: var(--font);
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.load-view .commodities-table input.edit-val:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.load-view .commodities-edit-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

/* ---------- Cargo column (view + edit) ---------- */

/* Cargo badges in view mode — compact colored pills */
.load-view .commodities-table td .view-val {
    font-size: 11px;
    line-height: 1.3;
}

.load-view .commodities-table th:nth-child(7),
.load-view .commodities-table td:nth-child(7) {
    width: 1%;
    white-space: nowrap;
}

.load-view .card .table.commodities-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.load-view .card .table.commodities-table th,
.load-view .card .table.commodities-table td {
    overflow: hidden;
}

.load-view .card .table.commodities-table th:nth-child(1) { width: 10%; }
.load-view .card .table.commodities-table th:nth-child(2) { width: 20%; }
.load-view .card .table.commodities-table th:nth-child(3) { width: 8%; }
.load-view .card .table.commodities-table th:nth-child(4) { width: 6%; }
.load-view .card .table.commodities-table th:nth-child(5) { width: 8%; }
.load-view .card .table.commodities-table th:nth-child(6) { width: 22%; }
.load-view .card .table.commodities-table th:nth-child(7) { width: 20%; white-space: nowrap; }

/* Commodities — remove row dividers, single border on table */
.load-view .card .table.commodities-table th,
.load-view .card .table.commodities-table td {
    border-bottom: none !important;
}

/* Match the table-header column widths so each value sits under its header. */
.commodity-view-grid {
    display: grid;
    grid-template-columns: 10fr 20fr 8fr 6fr 8fr 22fr 20fr;
    gap: 0;
    text-align: center;
    width: calc(100% + 16px);
    margin-left: -8px;
    min-width: 0;
    overflow: hidden;
}

/* Center both the internal labels and values inside their matching grid columns. */
.commodity-view-grid > * {
    min-width: 0;
    justify-self: center;
}

/* Nudge only the Cargo header to match its visual column position. */
.commodities-table thead th:nth-child(7) {
    position: relative;
    left: 40px;
}

/* Cargo badges inside commodity view grid */
.cargo-badges-inline {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}

.cargo-badges-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-right: 4px;
}

/* Compact cargo indicator badges */
.cargo-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
}

.cargo-badge.haz { background: #f97316; color: white; }
.cargo-badge.temp { background: #60a5fa; color: white; }
.cargo-badge.liquid { background: #06b6d4; color: white; }
.cargo-badge.bulk { background: #8b5cf6; color: white; }
.cargo-badge.fragile { background: #f59e0b; color: #333; }
.cargo-badge.oversized { background: #ef4444; color: white; }
.cargo-badge.standard { color: var(--muted); font-size: 11px; font-weight: 400; }

/* In edit mode, stack commodities vertically instead of a wide table */
.load-view.editing .commodities-table thead {
    display: none;
}

.load-view.editing .commodities-table,
.load-view.editing .commodities-table tbody {
    display: block;
    border: none;
    border-radius: 0;
}

/* Each commodity row in edit mode */
.load-view.editing .commodities-table tr[data-commodity-id] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 10px 12px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

/* Light background tint alternates between commodities */
.load-view.editing .commodities-table tr[data-commodity-id]:nth-child(even) {
    background: rgba(96, 165, 250, 0.03);
}

/* Divider between commodities in edit mode */
.load-view.editing .commodities-table tr[data-commodity-id] + tr[data-commodity-id] {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 0;
}

.load-view.editing .commodities-table tr[data-commodity-id] td {
    border: none;
    padding: 2px 0;
    flex: 0 0 auto;
    display: inline-block;
}

.load-view.editing .commodities-table tr[data-commodity-id] td .view-val {
    display: none !important;
}

.load-view.editing .commodities-table tr[data-commodity-id] td .edit-val {
    display: inline-block !important;
}

/* Constrain commodity edit inputs inside labels */
.load-view.editing .commodities-table tr[data-commodity-id] td .commodity-edit-fields label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--muted);
}

.load-view.editing .commodities-table tr[data-commodity-id] td .commodity-edit-fields input {
    width: 60px !important;
    max-width: 60px !important;
}

.load-view.editing .commodities-table tr[data-commodity-id] td .commodity-edit-fields input.comm-description {
    width: 100px !important;
    max-width: 100px !important;
}

.load-view.editing .commodities-table tr[data-commodity-id] td .commodity-edit-fields input.comm-hazmat-class {
    width: 17px !important;
    max-width: 17px !important;
}

/* Delete button inline in commodity edit */
.delete-commodity-btn-wrap {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 4px;
}

/* Inline cargo edit fields (same bubble as type, hazmat, conditions) */
.commodity-cargo-edit-fields {
    display: block;
    margin-top: 4px;
    padding: 6px 8px;
    background: rgba(96, 165, 250, 0.05);
    border-radius: 6px;
    border: 1px solid var(--border);
    white-space: normal;
}

/* Legacy edit-cargo-row styles (kept for backward compat) */
.edit-cargo-row {
    display: none;
}

.load-view.editing .edit-cargo-row {
    display: block !important;
    background: rgba(96, 165, 250, 0.03);
}

.edit-cargo-row .edit-cargo-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    margin: 4px 0;
    background: transparent;
    border-radius: 6px;
    white-space: normal;
}

/* Inline cargo edit fields inside commodity edit bubble */
.cargo-field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

/* Make cargo labels match the other commodity edit field labels */
.cargo-field-row label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

.cargo-field-row label input[type="checkbox"] {
    margin: 0;
    accent-color: var(--accent);
}

.cargo-field-row label select.comm-cargo-type {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 2px 4px;
    font-weight: 600;
    font-size: 11px;
    font-family: var(--font);
}

.cargo-field-row label input.comm-hazmat-class {
    width: 17px;
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 2px 4px;
    font-weight: 600;
    font-size: 11px;
    font-family: var(--font);
}

.cargo-field-row label select.comm-cargo-type:focus,
.cargo-field-row label input.comm-hazmat-class:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.load-view .commodities-table .edit-val label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}

.load-view .commodities-table .edit-val label input[type="checkbox"] {
    margin: 0;
    accent-color: var(--accent);
}

/* ---------- Cargo fields in wizard ---------- */

.commodity-entry .cargo-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(96, 165, 250, 0.05);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin-top: 4px;
}

.commodity-entry .cargo-fields select.comm-cargo-type {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 3px 5px;
    font-size: 11px;
    font-family: var(--font);
    box-sizing: border-box;
}

.commodity-entry .cargo-fields input.comm-hazmat-class {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 3px 5px;
    font-size: 11px;
    font-family: var(--font);
    width: 55px;
    box-sizing: border-box;
}

.commodity-entry .cargo-fields label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.commodity-entry .cargo-fields label input[type="checkbox"] {
    margin: 0;
    accent-color: var(--accent);
}

/* ---------- 14h. Collapsible Styles ---------- */

/* Card-level collapsible (Flags & Notes, Charges & Commissions) */
.load-view .card-collapsible .collapsible-header,
.carrier-view .card-collapsible .collapsible-header {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
    padding: 20px;
    margin: -20px;
    border-radius: 8px;
}

.load-view .card-collapsible .collapsible-header:hover,
.carrier-view .card-collapsible .collapsible-header:hover {
    background: rgba(255,255,255,0.04);
}

.load-view .card-collapsible .collapsible-header h2,
.carrier-view .card-collapsible .collapsible-header h2 {
    margin: 0;
    font-size: 16px;
    flex-shrink: 0;
}

.load-view .card-collapsible .collapse-icon,
.carrier-view .card-collapsible .collapse-icon {
    font-size: 10px;
    color: var(--muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.load-view .card-collapsible .collapse-icon.open,
.carrier-view .card-collapsible .collapse-icon.open {
    transform: rotate(90deg);
}

.load-view .card-collapsible .card-summary,
.carrier-view .card-collapsible .card-summary {
    font-size: 12px;
    color: var(--muted);
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.load-view .card-collapsible .card-body,
.carrier-view .card-collapsible .card-body {
    animation: legFadeIn 0.2s ease;
    margin-top: 24px;
}

.load-view .card-collapsible .subsection-title,
.carrier-view .card-collapsible .subsection-title {
    font-size: 14px;
    margin: 20px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
    color: var(--text);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Subsection header — used for "Charges" & "Commissions" labels */
.load-view .subsection-header {
    font-size: 14px;
    margin: 20px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
    color: var(--text);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.load-view .card-collapsible .subsection-title:first-child,
.carrier-view .card-collapsible .subsection-title:first-child {
    margin-top: 0;
}

.load-view .charge-sections {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.load-view .charge-section {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
}

.load-view .charge-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.load-view .charge-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.load-view .charge-section-title {
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin: 0;
    text-transform: uppercase;
}

.load-view .charge-section-total {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.load-view .card-collapsible .flags-grid,
.carrier-view .card-collapsible .flags-grid {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.load-view .card-collapsible .notes-grid,
.carrier-view .card-collapsible .notes-grid {
    margin-top: 0;
}

/* Party card collapsible */
.load-view .party-card.party-collapsible .party-header,
.carrier-view .party-card.party-collapsible .party-header {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent);
    margin-bottom: 0;
    transition: background 0.15s ease;
}

.load-view .party-card.party-collapsible .party-header:hover,
.carrier-view .party-card.party-collapsible .party-header:hover {
    background: rgba(255,255,255,0.04);
}

.load-view .party-card.party-collapsible .party-header h3,
.carrier-view .party-card.party-collapsible .party-header h3 {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
    font-weight: bold;
}

.load-view .party-card .party-toggle-icon,
.carrier-view .party-card .party-toggle-icon {
    font-size: 10px;
    color: var(--muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.load-view .party-card .party-toggle-icon.open,
.carrier-view .party-card .party-toggle-icon.open {
    transform: rotate(90deg);
}

.load-view .party-card .party-summary,
.carrier-view .party-card .party-summary {
    font-size: 13px;
    color: var(--muted);
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.load-view .party-card .party-body,
.carrier-view .party-card .party-body {
    animation: legFadeIn 0.2s ease;
    padding-top: 16px;
}

/* Leg card collapsible */
.load-view .leg-card.leg-collapsible .leg-header {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.load-view .leg-card.leg-collapsible .leg-header:hover {
    background: rgba(0,0,0,0.03);
}

.load-view .leg-card .leg-toggle-icon {
    font-size: 10px;
    color: var(--muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.load-view .leg-card .leg-toggle-icon.open {
    transform: rotate(90deg);
}

.load-view .leg-card .leg-summary-location {
    font-size: 13px;
    color: var(--muted);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.load-view .leg-card .leg-body {
    max-width: 100%;
    overflow-x: hidden;
    animation: legFadeIn 0.2s ease;
}

/* ---------- 14i. Right Column / Side Panel ---------- */

.load-view .column-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    overflow: hidden;
}

.carrier-view .column-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---------- 14j. Tables within Load View ---------- */

/* Copies 14j. Tables within Load View */
.load-view .card .table,
.carrier-view .card .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 0;
    table-layout: fixed;
}

.load-view .card .table thead tr,
.carrier-view .card .table thead tr {
    color: var(--text);
}

.load-view .card .table th,
.load-view .card .table td,
.carrier-view .card .table th,
.carrier-view .card .table td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.load-view .card .table tbody tr:last-child td,
.carrier-view .card .table tbody tr:last-child td {
    border-bottom: none;
}

.load-view .card .table tbody tr:hover,
.carrier-view .card .table tbody tr:hover {
    background: rgba(0,0,0,0.03);
}

table th {
    font-size: 12px;
    color: var(--text);
    text-transform: uppercase;
    background: none;
}

.load-view .card .total-line {
    margin-top: 16px;
    padding: 12px 16px;
    border-top: 2px solid var(--accent);
    text-align: right;
    font-size: 14px;
    background: rgba(96, 165, 250, 0.04);
    border-radius: 0 0 6px 6px;
}

.load-view .card .total-line strong {
    color: var(--accent);
    font-weight: bold;
}

/* Charges table edit mode - inline edits */
.load-view .card .table.charges-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-top: 12px;
}

.load-view .card .table.charges-table thead tr {
    background: rgba(96, 165, 250, 0.08);
    color: var(--text);
}

.load-view .card .table.charges-table thead th {
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--accent);
}

.load-view .card .table.charges-table thead th:first-child {
    border-radius: 6px 0 0 0;
}

.load-view .card .table.charges-table thead th:last-child {
    border-radius: 0 6px 0 0;
}

.load-view .card .table.charges-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
}

.load-view .card .table.charges-table tbody tr:hover {
    background: rgba(96, 165, 250, 0.04);
}

.load-view .card .table.charges-table td {
    padding: 8px;
    vertical-align: middle;
    font-size: 13px;
}

.load-view .card .table.charges-table td input[type="number"],
.load-view .card .table.charges-table td input[type="text"] {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 13px;
    font-family: var(--font);
    width: auto;
    min-width: 80px;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.load-view .card .table.charges-table th:nth-child(2),
.load-view .card .table.charges-table td:nth-child(2) {
    min-width: 160px;
}

.load-view .card .table.charges-table td .charge-amount {
    width: 140px !important;
}

.load-view .card .table.charges-table td input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* Keep charge and commission amounts clean while retaining numeric validation. */
.load-view .charges-table input[type="number"],
.load-view .commission-card input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.load-view .charges-table input[type="number"]::-webkit-inner-spin-button,
.load-view .charges-table input[type="number"]::-webkit-outer-spin-button,
.load-view .commission-card input[type="number"]::-webkit-inner-spin-button,
.load-view .commission-card input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.load-view .card .table.charges-table td select.charge-type {
    appearance: none;
    background-color: color-mix(in srgb, var(--accent) 10%, var(--panel));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
    background-position: right 11px center;
    background-repeat: no-repeat;
    background-size: 12px 8px;
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
    border-radius: 999px;
    padding: 6px 32px 6px 12px;
    min-width: 124px;
    font-weight: 700;
    font-size: 13px;
    font-family: var(--font);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.load-view .card .table.charges-table td select.charge-type:hover {
    background-color: color-mix(in srgb, var(--accent) 16%, var(--panel));
    border-color: var(--accent);
}

.load-view .card .table.charges-table td select.charge-type:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.load-view .card .table.charges-table td select.charge-type option {
    background: var(--panel);
    color: var(--text);
}

.load-view .card .table.charges-table td .charge-party-radios {
    display: inline-flex;
    gap: 12px;
    align-items: center;
}

.load-view .card .table.charges-table td .charge-party-radios label {
    font-size: 12px;
    color: var(--text);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.load-view .card .table.charges-table td .charge-party-radios input[type="radio"] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* Delete charge button */
.load-view .delete-charge-btn {
    padding: 4px 10px;
    background: rgba(220, 53, 69, 0.15);
    color: #ef4444;
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 30px;
}

.load-view .delete-charge-btn:hover {
    background: rgba(220, 53, 69, 0.25);
}

.add-charge-btn,
.add-commission-btn {
    background: transparent;
    color: var(--accent);
    border: 1.5px dashed var(--accent);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.add-charge-btn:hover,
.add-commission-btn:hover {
    background: rgba(96, 165, 250, 0.08);
    border-style: solid;
}

/* ---------- 14k. Tracking Info ---------- */

.load-view .tracking-info,
.carrier-view .tracking-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.load-view .tracking-item,
.carrier-view .tracking-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.load-view .tracking-item:last-child,
.carrier-view .tracking-item:last-child {
    border-bottom: none;
}

.load-view .tracking-item label,
.carrier-view .tracking-item label {
    font-size: 12px;
    color: var(--muted);
}

.load-view .tracking-item span,
.carrier-view .tracking-item span {
    font-size: 13px;
    color: var(--text);
}

/* ---------- 14l. Flags ---------- */

.load-view .flags-grid,
.carrier-view .flags-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.load-view .flag,
.carrier-view .flag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: var(--card);
    border-radius: 6px;
    border: 1px solid var(--border);
    min-width: 0;
    overflow: hidden;
}

.load-view .flag label,
.carrier-view .flag label {
    font-size: 14px;
    font-weight: bold;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.load-view .flag span,
.carrier-view .flag span {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

.load-view .flag span.yes,
.carrier-view .flag span.yes {
    background: #28a745;
    color: white;
}

.load-view .flag span.no,
.carrier-view .flag span.no {
    background: #dc3545;
    color: white;
}

/* ---------- 14m. Notes ---------- */

.load-view .notes-grid,
.carrier-view .notes-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.load-view .note,
.carrier-view .note {
    padding: 16px;
    background: var(--card);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.load-view .note h3,
.carrier-view .note h3 {
    font-size: 14px;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    color: var(--accent);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.load-view .note textarea,
.carrier-view .note textarea {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: var(--font);
    width: 100%;
    min-height: 60px;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.load-view .note textarea:focus,
.carrier-view .note textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.load-view .note p:empty::before,
.carrier-view .note p:empty::before {
    content: "No notes available";
    color: var(--muted);
    font-style: italic;
}

/* ---------- 15n. Notes Section (Customers & Carriers) ---------- */

.load-view .notes-section,
.carrier-view .notes-section {
    margin-top: 0;
}

.load-view .notes-section h3,
.carrier-view .notes-section h2 {
    margin-bottom: 12px;
}

.load-view .notes-content,
.carrier-view .notes-content {
    padding: 16px;
    background: var(--card);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.load-view .notes-content p,
.carrier-view .notes-content p {
    margin: 0;
    font-size: 14px;
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
}

.load-view .notes-content .notes-empty,
.carrier-view .notes-content .notes-empty {
    color: var(--muted);
    font-style: italic;
}

/* ---------- 14n. Badges (Commission) ---------- */

.load-view .badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--accent);
    color: white;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.load-view .badge.pending {
    background: #ffc107;
    color: #333;
}

.load-view .badge.completed {
    background: #28a745;
    color: white;
}

.load-view .badge.processing {
    background: #17a2b8;
    color: white;
}

/* ============================================================
   15. LOAD WIZARD
   ============================================================ */

#load-wizard-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Keep wizard controls above dashboard navigation and the open sidebar. */
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

#load-wizard-modal {
    background: var(--panel);
    color: var(--text);
    font-family: var(--font);
    padding: 26px;
    border-radius: var(--radius-lg);
    width: min(1180px, calc(100vw - 48px));
    max-width: 98%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
}

/* Settings page */
.settings-section {
    margin-top: 32px;
}

.settings-fragment .fragment-body {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(320px, 460px);
    column-gap: 28px;
    align-items: start;
}

.settings-fragment .settings-preview-section {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 32px;
}

@media (max-width: 760px) {
    .settings-fragment .fragment-body {
        display: block;
    }

    .settings-fragment .settings-preview-section {
        margin-top: 32px;
    }
}

.settings-section h2 {
    margin: 0 0 6px;
    font-size: 18px;
    color: var(--text);
}

.settings-section p {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--muted);
}

.accent-dropdown {
    padding: 8px 12px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    outline: none;
    min-width: 180px;
    transition: border-color var(--transition);
}

.accent-dropdown:hover,
.accent-dropdown:focus {
    border-color: var(--accent);
}

.settings-commission-fields {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.settings-contact-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 16px;
}

.settings-contact-field {
    min-width: 0;
}

.settings-contact-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.settings-contact-field .form-control::placeholder {
    color: var(--muted);
    opacity: 1;
}

.settings-contact-field .form-control[readonly] {
    background: var(--panel);
    color: var(--muted);
}

.settings-contact-field .form-control:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.settings-contact-fields > .btn {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
    white-space: normal;
}

.settings-commission-value-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
}

#default-commission-value {
    width: 120px;
    padding: 8px 10px;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

#default-commission-value:focus {
    border-color: var(--accent);
}

.settings-save-status {
    min-height: 20px;
    margin-top: 10px;
}

.settings-save-status.is-success {
    color: var(--success);
}

.settings-save-status.is-error {
    color: var(--danger);
}

@media (max-width: 560px) {
    .settings-commission-fields {
        align-items: stretch;
        flex-direction: column;
    }

    #default-commission-value {
        width: 100%;
    }
}

.settings-load-preview {
    max-width: 460px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 18%, transparent);
    font-family: var(--font);
}

.settings-load-preview-header,
.settings-load-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-load-status,
.settings-load-link {
    color: var(--accent);
    font-weight: 700;
}

.settings-load-status {
    font-size: 12px;
    letter-spacing: 0.04em;
}

.settings-load-number,
.settings-load-route,
.settings-load-preview-footer {
    color: var(--muted);
}

.settings-load-title {
    font-size: 17px;
}

.settings-load-route {
    font-size: 14px;
}

.settings-load-preview-footer {
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 12px;
}

#load-wizard-modal h2 {
    margin: 0;
    font-size: 22px;
}

#wizard-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

#wizard-close:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text);
}

.wizard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-shrink: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

#wizard-steps {
    overflow: visible;
    flex: 1;
    padding-right: 4px;
}

.wizard-step {
    animation: fadeIn 0.25s ease;
}

.wizard-step h3 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: bold;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wizard-step .form-group {
    margin-bottom: 12px;
    position: relative;
}

.wizard-step .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: bold;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.wizard-step .form-group input,
.wizard-step .form-group select,
.wizard-step .form-group textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    margin-bottom: 0;
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.load-location-search-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.load-location-search-row > input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}

.load-location-search-row > button {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 8px 12px;
    white-space: nowrap;
}

.wizard-step .form-group input:focus,
.wizard-step .form-group select:focus,
.wizard-step .form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.wizard-step .form-group textarea {
    min-height: 76px;
    height: 76px;
    resize: vertical;
}

.wizard-step .form-help {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
}

.wizard-step .form-group select[multiple],
.load-view select[multiple] {
    min-height: 180px;
}

.wizard-step .form-group select[multiple] option,
.load-view select[multiple] option {
    cursor: pointer;
    padding: 6px 8px;
}

.wizard-step .form-group button {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    font-family: var(--font);
    transition: all var(--transition);
}

.wizard-step .form-group button:hover {
    filter: brightness(1.1);
}

.wizard-step .form-group button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Appointment time grid (date + military time) */
.appt-grid {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 110px;
    gap: 8px;
}
.appt-grid input,
.appt-grid select {
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
}

.wizard-step .search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1100;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel);
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
}

.wizard-search-osm-action {
    display: flex;
    justify-content: center;
    padding: 6px 8px 8px;
}

.wizard-step .search-result-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    transition: background var(--transition);
}

.wizard-search-section + .wizard-search-section {
    border-top: 2px solid var(--border);
}

.wizard-search-section-title {
    padding: 8px 12px;
    background: rgba(96, 165, 250, 0.08);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wizard-search-existing strong,
.wizard-search-new strong {
    color: var(--text);
}

.wizard-search-existing small,
.wizard-search-new small,
.wizard-search-empty {
    color: var(--muted);
    font-size: 12px;
}

.wizard-search-new {
    background: rgba(34, 197, 94, 0.035);
}

.wizard-search-empty {
    padding: 12px 14px;
}

.wizard-location-verify-overlay {
    position: fixed;
    inset: 0;
    /* This dialog is opened from inside the load wizard, whose overlay is
       already above navigation. Keep the confirmation action above both. */
    z-index: 10200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(4px);
}

.wizard-location-verify-modal {
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--panel);
    box-shadow: var(--shadow-lg);
    padding: 22px;
}

.wizard-location-verify-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.wizard-location-verify-header h3 {
    margin: 0;
}

.wizard-location-verify-kicker {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wizard-location-verify-close {
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    padding: 6px 10px;
}

.wizard-location-verify-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 14px;
}

.wizard-location-verify-grid label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.wizard-location-verify-grid input {
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
}

.wizard-location-verify-grid input[readonly] {
    opacity: 0.78;
    cursor: not-allowed;
}

.wizard-location-verify-meta {
    margin-top: 14px;
    color: var(--muted);
    font-size: 12px;
}

.wizard-location-verify-error {
    min-height: 18px;
    margin: 10px 0 0;
    color: #ef4444;
    font-size: 12px;
    font-weight: 700;
}

.wizard-location-verify-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

@media (max-width: 560px) {
    .wizard-location-verify-overlay {
        padding: 12px;
    }

    .wizard-location-verify-grid {
        grid-template-columns: 1fr;
    }
}

.commodity-type-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
}

.commodity-type-picker select,
.commodity-type-picker input {
    width: 100%;
    box-sizing: border-box;
}

/* Commodity type uses the same field treatment as the other wizard inputs. */
.wizard-step .commodity-type-picker select.comm-type-select {
    min-height: 42px;
    padding: 9px 12px;
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 14px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.wizard-step .commodity-type-picker select.comm-type-select:hover {
    border-color: var(--accent);
}

.wizard-step .commodity-type-picker select.comm-type-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.wizard-step .commodity-type-picker input.comm-type-custom {
    min-height: 42px;
    padding: 9px 12px;
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 14px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.wizard-step .commodity-type-picker input.comm-type-custom:hover {
    border-color: var(--accent);
}

.wizard-step .commodity-type-picker input.comm-type-custom:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* Keep the verification action anchored while hovering. The global primary
   button hover rule is positioned for header buttons and makes this button
   jump out of reach. */
.wizard-location-verify-actions .wizard-location-verify-confirm:hover {
    transform: none !important;
}

.wizard-location-verify-actions .wizard-location-verify-confirm:active {
    transform: none !important;
}

/* Wizard leg entry buttons */
.leg-entry {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, rgba(96, 165, 250, 0.045), transparent 120px),
        var(--card);
    box-shadow: var(--shadow-sm);
}

.leg-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--transition);
}



.leg-entry-header[aria-expanded="false"] {
    border-bottom: 0;
}

.leg-entry-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.leg-entry-title strong {
    white-space: nowrap;
    color: var(--text);
}

.leg-toggle-icon {
    color: var(--accent);
    font-size: 10px;
    transition: transform var(--transition);
}

.leg-toggle-icon.open {
    transform: rotate(90deg);
}

.leg-entry-summary {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leg-entry-body {
    padding: 14px;
    animation: legFadeIn 0.2s ease;
}

.wizard-leg-grid {
    display: grid;
    gap: 12px;
    align-items: start;
}

.wizard-leg-grid-main {
    grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.3fr);
}

.wizard-leg-grid-appointments {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
}

.wizard-leg-grid-references {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.wizard-step .form-group.wizard-field-error label {
    color: #b42318;
}
.wizard-step .form-group.wizard-field-error input,
.wizard-step .form-group.wizard-field-error select,
.wizard-step .form-group.wizard-field-error .leg-type-toggle,
.wizard-step .form-group.wizard-field-error .leg-type-btn {
    border-color: #d92d20 !important;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.16) !important;
}
.wizard-step .form-group.wizard-field-error::after {
    display: block;
    margin-top: 5px;
    color: #b42318;
    content: 'Required — complete this field to continue.';
    font-size: 0.82rem;
}

.leg-type-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.leg-type-group .leg-type-toggle,
.leg-type-group .leg-type-btn {
    min-height: 42px;
}

.commodity-section {
    margin-top: 4px;
    padding: 12px;
    border: 1px dashed rgba(148, 163, 184, 0.25);
    border-radius: var(--radius-sm);
    background: rgba(10, 15, 26, 0.35);
}

.commodity-section > strong {
    display: block;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.commodity-entry {
    display: grid;
    grid-template-columns: minmax(140px, 1.2fr) repeat(6, minmax(82px, 0.7fr)) auto;
    gap: 8px;
    align-items: start;
    margin-bottom: 10px;
}

.commodity-entry textarea.comm-description {
    grid-column: 1 / -2;
    min-height: 58px;
    height: 58px;
}

.commodity-entry .btn-remove-comm {
    min-height: 40px;
}

#wiz-add-leg {
    margin-top: 2px;
    padding: 10px 18px;
    border: 1px solid rgba(96, 165, 250, 0.45);
    border-radius: var(--radius-sm);
    background: rgba(96, 165, 250, 0.12);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all var(--transition);
}

#wiz-add-leg:hover {
    background: var(--accent);
    color: white;
    transform: translateY(-1px);
}

.btn-remove-leg {
    background: #f44336;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: filter var(--transition);
}
.btn-remove-leg:hover {
    filter: brightness(1.15);
}

.leg-type-btn {
    padding: 9px 10px;
    background: #555;
    color: white;
    border: 1px solid #777;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    transition: background var(--transition);
}
.leg-type-btn.leg-pickup-btn.selected,
.leg-type-btn.leg-delivery-btn.selected {
    background: #4caf50;
}

.btn-add-commodity {
    margin-top: 5px;
    padding: 8px 16px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: filter var(--transition);
}

@media (max-width: 980px) {
    .wizard-leg-grid-main,
    .wizard-leg-grid-appointments,
    .wizard-leg-grid-references,
    .commodity-entry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commodity-entry textarea.comm-description {
        grid-column: 1 / -1;
    }
}
.btn-add-commodity:hover {
    filter: brightness(1.1);
}

.btn-remove-comm {
    background: #f44336;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: filter var(--transition);
}
.btn-remove-comm:hover {
    filter: brightness(1.15);
}


/* ============================================================
   17. MOBILE SUPPORT
   ============================================================ */

/* --- Sidebar toggle button --- */
.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    font-size: 24px;
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    line-height: 1;
}

.sidebar-toggle:hover {
    background: rgba(96, 165, 250, 0.08);
}

/* Sidebar overlay backdrop */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 6999;
}

.sidebar-backdrop.show {
    display: block;
}

/* Mobile sidebar open state — overlays the content */
.sidebar.open {
    width: 220px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    z-index: 7000;
    box-shadow: var(--shadow-lg);
}

.sidebar.open ul {
    width: 204px;
}

.sidebar.open .nav-label {
    opacity: 1;
}

/* --- Touch-friendly tap targets --- */
.nav-item,
.btn-page,
.account-circle,
.sidebar-toggle,
.filter-actions button,
.filter-actions a,
.pagination-page-size select,
#page-size-select,
summary-card .card-load,
.card-code,
.dashboard-recap-table tbody tr,
.summary-card {
    cursor: pointer;
}

/* Prevent text-size auto-adjust on landscape phones */
html {
    -webkit-text-size-adjust: 100%;
}

/* --- Tablet (≤ 1024px) --- */
@media (max-width: 1024px) {
    .load-view .container,
    .carrier-view .container {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .load-view .column-side,
    .carrier-view .column-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .customers-box,
    .partial-loads-box,
    .carriers-box {
        padding: 20px 16px;
    }

    /* Dashboard recap boxes shrink on mobile */
    .dashboard-recap-container {
        gap: 16px;
    }
    .dashboard-recap-section {
        flex: 0 0 50%;
        max-width: 50%;
        min-width: 0;
        margin-left: 0;
    }

    /* Load view header h1 smaller */
    .load-view .header-content h1 {
        font-size: 26px;
    }

    /* Stat grid wraps to single column on narrow screens */
    .load-view .stat-grid {
        grid-template-columns: 1fr;
    }

    /* Ensure all flex/grid children can shrink */
    .load-view .card,
    .load-view .stat,
    .load-view .column,
    .load-view .header {
        min-width: 0;
    }

    /* Charges & commission tables scroll */
    .load-view .card .table.charges-table,
    .load-view .card .table.commodities-table {
        display: block;
        overflow-x: auto;
    }

    /* Leg header wraps to prevent overflow */
    .load-view .leg-card .leg-header {
        flex-wrap: wrap;
    }

    .load-view .leg-card .leg-summary-location {
        width: 100%;
        white-space: normal;
    }

    .load-view .leg-card .leg-summary-appt {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Commissions grid stack */
    .load-view .commissions-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Phone (≤ 768px) --- */
@media (max-width: 1025px) {

    h1 {
        font-size: 24px;
    }

    /* Show hamburger, hide hover-expand sidebar */
    .sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
        margin-top: -5px;
    }

    .sidebar {
        display: none;
        position: fixed;
        top: env(safe-area-inset-top);
        left: env(safe-area-inset-left);
        width: 260px;
        height: calc(100dvh - env(safe-area-inset-top));
        z-index: 100;
        box-shadow: var(--shadow-lg);
        transition: none;
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sidebar.open {
        display: block;
    }

    .sidebar ul {
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .sidebar:hover {
        width: 260px;
    }

    .sidebar:hover ul {
        width: 100%;
    }

    .sidebar .nav-label {
        opacity: 1;
    }

    .sidebar-trigger {
        display: none;
    }

    .app-layout {
        flex-direction: column;
        padding-left: 0;
    }

    /* Nav bar */
    body > nav {
        padding: max(4px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
        gap: 8px;
    }

    .logo img {
        width: 140px;
    }

    .user-greeting {
        display: none;
    }

    /* Content area */
    .content {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 24px 16px;
    }

    /* Keep the new desktop hierarchy from adding side gaps on phones. */
    .content > header,
    .content > .list-page-title-row,
    .content > .summary-header,
    .new-load-bar {
        width: 100%;
        max-width: none;
    }

    .content > header {
        margin-bottom: var(--space-4);
    }

    .content > header h1 {
        font-size: 24px;
    }

    .list-page-title-row {
        margin-bottom: var(--space-4);
        padding: 0 44px;
    }

    .new-load-bar {
        margin-bottom: var(--space-3);
    }

    .app-layout {
        overflow-x: hidden;
    }

    .partial-loads-box,
    .carriers-box,
    .locations-box,
    .dashboard-recap-box {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    .summary-card-header,
    .summary-card {
        width: 100%;
        box-sizing: border-box;
    }

    .summary-grid {
        width: 100%;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
    }

    /* Login */
    .login-box {
        width: 90%;
        max-width: 380px;
        padding: 24px 20px;
    }

    .login-welcome {
        font-size: 24px;
        padding: 10px 16px;
        margin: 10px 16px;
    }

    /* Keep filters compact while preserving readable control widths. */
    .filter-controls {
        padding: 14px 16px;
        margin-bottom: 40px;
    }

    .filter-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 8px;
    }

    .filter-group {
        min-width: 0;
        gap: 4px;
    }

    .filter-group label {
        font-size: 10px;
    }

    .filter-group input[type="text"],
    .filter-group input[type="date"],
    .filter-group select {
        padding: 7px 10px;
        font-size: 13px;
    }

    .filter-actions {
        grid-column: 1 / -1;
        min-width: 0;
        justify-content: stretch;
        gap: 8px;
    }

    .filter-layout-controls {
        flex: 1 0 100%;
        justify-content: stretch;
    }

    .filter-layout-select,
    .btn-filter-layout-save,
    .btn-filter-layout-delete {
        flex: 0 0 auto;
        min-width: 0;
    }

    .filter-actions .btn-apply-filters,
    .filter-actions .btn-clear-filters {
        flex: 1;
        text-align: center;
        padding: 7px 14px;
        font-size: 13px;
    }

    /* Summary cards stack vertically*/
    .summary-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 14px;
        gap: 4px;
    }

    .summary-card .card-load {
        flex: none;
        width: auto;
        max-width: none;
        margin-left: 0;
        text-align: center;
        padding: 6px 10px;
        font-size: 10px;
    }

    .customers-box .summary-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 14px;
        gap: 4px;
    }

    .customers-box .summary-card .card-value,
    .customers-box .summary-card .card-code,
    .customers-box .summary-card .card-contact {
        width: 100%;
        text-align: left;
    }

    .customers-box .summary-card .card-code {
        margin-right: 0;
        max-width: none;
        display: inline-block;
        width: auto;
        padding: 4px 10px;
    }

    .partial-loads-box .summary-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 14px;
        gap: 4px;
    }

    .partial-loads-box .summary-card .card-carrier,
    .partial-loads-box .summary-card .card-num {
        padding-left: 0;
    }

    .summary-card .card-carrier,
    .summary-card .card-driver,
    .card-num,
    .card-value,
    .card-code,
    .card-legs,
    .card-contact {
        font-size: 13px;
        padding: 4px 0;
    }

    .summary-card .card-carrier,
    .summary-card .card-driver,
    .summary-card .card-num,
    .card-value,
    .card-legs,
    .card-contact {
        flex: none;
        width: 100%;
        text-align: left;
    }

    .summary-card .card-load,
    .summary-card .card-carrier,
    .summary-card .card-driver,
    .summary-card .card-num,
    .summary-card .card-value,
    .summary-card .card-code,
    .summary-card .card-legs,
    .summary-card .card-contact,
    .summary-card .card-location {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    /* Hazmat dot — move inside card top-right corner on mobile to avoid clipping */
    .hazmat-dot {
        left: auto;
        right: 6px;
        top: 6px;
        transform: none;
    }

    .carriers-box .summary-card,
    .carriers-box .summary-card-header {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(72px, .7fr);
        gap: 8px;
        align-items: center;
    }

    .partial-loads-box .summary-card,
    .partial-loads-box .summary-card-header {
        display: grid;
        grid-template-columns: var(--load-grid-columns, minmax(80px, .7fr) minmax(90px, 1.1fr) repeat(3, minmax(0, 1fr)));
        gap: 8px;
        align-items: center;
    }

    .carriers-box .summary-card > *,
    .partial-loads-box .summary-card > *,
    .carriers-box .summary-card-header > *,
    .partial-loads-box .summary-card-header > * {
        min-width: 0;
        width: auto;
        margin-left: 0;
        margin-right: 0;
        padding-left: 4px;
        padding-right: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .partial-loads-box .summary-card-header .card-label,
    .partial-loads-box .summary-card > * {
        text-align: center;
    }

    .loads-columns-scroll {
        margin-bottom: 4px;
        padding-bottom: 4px;
    }

    .loads-columns-scroll .summary-header,
    .loads-columns-scroll .summary-grid {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .partial-loads-box .summary-card,
    .partial-loads-box .summary-card-header {
        grid-template-columns: repeat(var(--load-column-count, 5), minmax(0, 1fr));
        gap: 2px;
    }

    .partial-loads-box .summary-card-header > *,
    .partial-loads-box .summary-card > * {
        min-width: 0;
        padding-left: 2px;
        padding-right: 2px;
        font-size: 11px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .partial-loads-box .summary-card .card-load {
        min-width: 0;
        margin-left: 2px;
        padding-left: 3px;
        padding-right: 3px;
        font-size: 10px;
    }

    .load-column-editor {
        width: 100%;
        margin-bottom: 14px;
        padding: 16px;
    }

    .load-column-list {
        grid-template-columns: 1fr;
    }

    .carriers-box .summary-card .card-contact,
    .carriers-box .summary-card .card-load,
    .partial-loads-box .summary-card .card-num {
        justify-self: stretch;
        text-align: center;
    }

    .customers-box .summary-card,
    .customers-box .summary-card-header {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(44px, .8fr) minmax(72px, 1.1fr) minmax(0, 1.3fr);
        gap: 0;
        align-items: center;
    }

    .locations-box .summary-card,
    .locations-box .summary-card-header {
        grid-template-columns: 1.2fr 2fr 1fr .7fr 1.2fr;
    }

    .locations-box .summary-card,
    .locations-box .summary-card-header {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(56px, .6fr) minmax(0, 1.2fr);
        gap: 8px;
        align-items: center;
    }

    .customers-box .summary-card > *,
    .locations-box .summary-card > *,
    .customers-box .summary-card-header > *,
    .locations-box .summary-card-header > * {
        min-width: 0;
        width: auto;
        margin-left: 0;
        margin-right: 0;
        padding-left: 4px;
        padding-right: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .customers-box .summary-card .card-code {
        justify-self: stretch;
        width: auto;
        text-align: center;
    }

    .customers-box:not(.locations-box) .summary-card .card-value {
        padding-left: 4px;
        text-align: center;
    }

    .customers-box:not(.locations-box) .summary-card-header .card-label:first-child {
        justify-content: center;
        padding-left: 4px;
        text-align: center;
    }

    .locations-box .summary-card .card-code {
        justify-self: stretch;
        width: auto;
        padding-left: 4px;
        padding-right: 4px;
        text-align: center;
    }

    .summary-card-header {
        display: none;
    }

    /* Dashboard recap full width */
    .dashboard-recap-section {
        flex: 0 0 50%;
        max-width: 50%;
        min-width: 0;
        margin-left: 0;
    }

    .dashboard-recap-container {
        flex-direction: column;
        gap: 16px;
    }

    /* Pagination wraps */
    .pagination-controls {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        text-align: center;
        padding: 12px;
    }

    .pagination-buttons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .pagination-buttons .btn-page {
        min-height: 44px;
        min-width: 44px;
        padding: 8px 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .pagination-info {
        font-size: 12px;
    }

    .pagination-page-size {
        justify-content: center;
        min-height: 44px;
    }

    /* Account dropdown full-width on mobile */
    .account-dropdown {
        position: fixed;
        top: auto;
        right: 12px;
        width: 200px;
    }

    /* Tables — horizontal scroll on small screens */
    .customers-box,
    .partial-loads-box,
    .carriers-box,
    .accounting-fragment {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.carrier-table,
    table.accounting-table,
    .customers-box .table,
    .partial-loads-box .table {
        min-width: 500px;
    }

    .load-view .card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .load-view .card .table-wrapper table {
        min-width: 400px;
    }

    /* Footer */
    .app-footer {
        margin-left: 0;
        width: 100%;
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .login-footer-cr {
        margin-left: 0;
    }

    .database-version-stamp {
        margin-left: 0;
    }

    /* Load view */
    .load-view .header-content h1 {
        font-size: 24px;
    }

    .load-view .stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Carrier and customer stat grids — single column */
    .carrier-view .stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Edit carrier form single column */
    .carrier-view .edit-carrier-form .stat-grid {
        grid-template-columns: 1fr;
    }

    .carrier-view .form-buttons {
        flex-direction: column;
    }

    .carrier-view .form-buttons .btn-primary,
    .carrier-view .form-buttons .btn-secondary {
        width: 100%;
        max-width: 150px;
        text-align: center;
    }

    /* Back button with edit button — stack */
    .carrier-view .back-button-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .carrier-view .back-button-container .back-button {
        text-align: center;
        max-width: 140px;
    }

    .carrier-view .back-button-container #edit_carrier_btn {
        float: none !important;
        width: 100%;
        max-width: 180px;
    }

    /* Keep the load action bar visible while scrolling on mobile too. */
    .load-view .back-button-container {
        position: sticky !important;
        top: 0;
        z-index: 950 !important;
        background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
        backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid var(--border) !important;
        padding-top: 8px !important;
        padding-bottom: 10px !important;
        margin-bottom: 16px;
    }

    .load-view .back-button-container .load-action-buttons {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .load-view .back-button-container .btn-header-right {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .load-view .parties-grid,
    .carrier-view .parties-grid {
        grid-template-columns: 1fr;
    }

    /* Analytics & accounting cards wrap */
    .analytics-grid,
    .accounting-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .analytics-grid .card,
    .accounting-grid .card {
        width: 100%;
        box-sizing: border-box;
    }

    .load-view .column-side,
    .carrier-view .column-sidebar {
        grid-template-columns: 1fr;
    }

    /* Fix editing mode — collapse to single column on mobile */
    .load-view.editing .container {
        grid-template-columns: 1fr;
    }

    /* Leg card headers wrap */
    .load-view .leg-card .leg-header {
        flex-wrap: wrap;
        gap: 6px;
    }

    .load-view .leg-card .leg-summary-location {
        width: 100%;
        white-space: normal;
    }

    .load-view .leg-card .leg-summary-appt {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Party card collapsible - better readability */
    .load-view .party-card.party-collapsible .party-header {
        flex-wrap: wrap;
    }

    .load-view .party-card .party-summary {
        width: 100%;
        white-space: normal;
    }

    .load-view .card .table th,
    .load-view .card .table td {
        padding: 6px 4px;
        font-size: 11px;
    }

    /* Wizard modal */
    #load-wizard-overlay {
        align-items: flex-start;
        padding: max(12px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        box-sizing: border-box;
    }

    #load-wizard-modal {
        width: 100%;
        max-width: none;
        padding: 16px 12px;
        max-height: calc(100dvh - 24px);
        box-sizing: border-box;
        border-radius: var(--radius-md);
    }

    #load-wizard-modal h2 {
        font-size: 19px;
    }

    #wizard-close {
        width: 44px;
        height: 44px;
        padding: 0;
    }

    /* Wizard search results — full width */
    .wizard-step .search-results {
        max-height: 30vh;
    }

    .wizard-actions {
        flex-direction: row;
        justify-content: space-between;
    }

    .wizard-actions button {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        min-height: 44px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .wizard-step .form-group select[multiple] {
        min-height: 140px;
    }

    .wizard-leg-grid-main,
    .wizard-leg-grid-appointments,
    .wizard-leg-grid-references {
        grid-template-columns: 1fr;
    }

    .leg-entry,
    #leg-entry,
    #commodity-entry {
        padding: 12px;
    }

    .leg-entry-header {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }

    .leg-type-toggle {
        width: 100%;
        gap: 6px;
    }

    .leg-type-toggle .leg-type-btn {
        flex: 1;
        min-height: 42px;
    }

    .commodity-entry {
        align-items: stretch;
    }

    .commodity-entry input,
    .commodity-entry select,
    .commodity-entry textarea {
        flex: 1 1 120px;
        min-width: 0;
        width: auto;
    }

    /* Settings */
    .settings-section {
        margin-top: 24px;
    }
}

/* --- Small phone (≤ 480px) --- */
@media (max-width: 480px) {
    .logo img {
        width: 110px;
    }

    .login-welcome {
        font-size: 20px;
    }

    .load-view .stat-grid {
        grid-template-columns: 1fr;
    }

    .carrier-view .stat-grid {
        grid-template-columns: 1fr;
    }

    .content {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 16px;
    }

    .app-layout {
        overflow-x: hidden;
    }

    .load-view {
        padding: 12px;
    }

    .carrier-view {
        padding: 12px;
    }

    /* Privacy / Terms */
    .container {
        padding: 0 16px 60px;
    }

    .policy header h1 {
        font-size: 24px;
    }

    /* No results message */
    .no-results-message {
        padding: 40px 20px;
    }

    /* Filter controls even tighter on small phones */
    .filter-controls {
        padding: 10px 12px;
        margin-bottom: 32px;
    }

    .filter-row {
        gap: 6px;
    }

    .filter-group {
        gap: 3px;
    }

    .filter-group label {
        font-size: 9px;
    }

    .filter-group input[type="text"],
    .filter-group input[type="date"],
    .filter-group select {
        padding: 5px 8px;
        font-size: 12px;
    }

    .filter-actions {
        gap: 6px;
    }

    .filter-actions .btn-apply-filters,
    .filter-actions .btn-clear-filters {
        padding: 5px 10px;
        font-size: 12px;
    }

    .filter-controls {
        margin-bottom: 24px;
    }

    .filter-row {
        grid-template-columns: 1fr;
    }

    .filter-actions {
        grid-column: auto;
    }

    .pagination-controls {
        padding: 10px 8px;
        gap: 8px;
    }

    .pagination-buttons .btn-page[title="First page"],
    .pagination-buttons .btn-page[title="Last page"] {
        display: none;
    }

    .pagination-buttons .btn-page:not([title]):not(.active) {
        display: none;
    }

    .pagination-buttons .btn-page[title="Previous page"],
    .pagination-buttons .btn-page[title="Next page"] {
        flex: 1 1 0;
    }

    /* Summary cards even tighter on small phones */
    .summary-card {
        display: flex;
        padding: 8px 12px;
        gap: 3px;
    }

    .summary-card .card-load {
        padding: 5px 8px;
        font-size: 11px;
        max-width: 80px;
    }

    .summary-card .card-carrier,
    .summary-card .card-driver,
    .card-num,
    .card-value,
    .card-code,
    .card-legs,
    .card-contact {
        font-size: 12px;
        padding: 3px 0;
    }

    /* Wizard steps smaller */
    .wizard-step .form-group {
        margin-bottom: 12px;
    }

    .wizard-step h3 {
        font-size: 16px;
    }

    /* Party cards more compact */
    .load-view .party-card,
    .carrier-view .party-card,
    .load-view .leg-card {
        padding: 14px;
    }
}

.wizard-step .search-result-item:hover {
    background: rgba(96, 165, 250, 0.08);
}



#wiz-cust-selected,
#wiz-csr-selected {
    margin-top: 10px;
    font-weight: bold;
    color: #22c55e;
    font-size: 14px;
}

.wizard-actions {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

#wiz-next-1,
#wiz-next-2,
#wiz-prev-2,
#wiz-next-3,
#wiz-prev-3,
#wiz-prev-4,
#wiz-add-leg {
    background: var(--accent);
    color: white;
    border-radius: var(--radius-sm);
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    font-family: var(--font);
    font-size: 14px;
    cursor: pointer;
    transition: filter var(--transition);
}
#wiz-next-1:hover,
#wiz-next-2:hover,
#wiz-prev-2:hover,
#wiz-next-3:hover,
#wiz-prev-3:hover,
#wiz-prev-4:hover,
#wiz-add-leg:hover {
    filter: brightness(1.1);
}
#wiz-next-1:disabled,
#wiz-next-2:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#wiz-submit {
    background: #22c55e;
    color: white;
    border-radius: var(--radius-sm);
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: filter var(--transition);
}
#wiz-submit:hover {
    filter: brightness(1.1);
}

#leg-entry,
#commodity-entry {
    border: 1px solid var(--border);
    padding: 16px;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    background: var(--card);
}

.leg-entry {
    border: 1px solid var(--border);
    padding: 16px;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    background: var(--bg);
    position: relative;
}

.leg-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.leg-entry-header strong {
    font-size: 15px;
    color: var(--text);
}

.leg-type-toggle {
    display: flex;
    gap: 10px;
}

.commodity-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.commodity-section > strong {
    display: block;
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}

.commodity-entry {
    border-left: 3px solid #22c55e;
    padding: 8px 10px;
    margin: 6px 0;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--card);
    border-radius: 4px;
}

.commodity-entry input {
    width: 90px;
    padding: 6px 8px !important;
    font-size: 12px !important;
    margin-bottom: 0 !important;
}

input.comm-type,
input.comm-weight,
input.comm-pcs,
input.comm-qty,
input.comm-length,
input.comm-width,
input.comm-height
{
    color: var(--muted);
    background: var(--bg);
    font-size: 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    padding: 4px 6px;
}

/* Commodity edit inputs in load page — keep compact inside table cells */
.commodities-table .commodity-edit-fields input {
    width: 80px;
}

.commodities-table .commodity-edit-fields input.comm-description {
    width: 120px;
}

textarea.comm-description {
    width: 100%;
    color: var(--muted);
    background: var(--bg);
    font-size: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    padding: 6px 8px;
    font-family: var(--font);
    resize: vertical;
    box-sizing: border-box;
}

/* Selected customer/CSR display */
.wizard-selected {
    background: var(--card);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wizard-selected span {
    font-size: 14px;
    font-weight: bold;
    color: var(--text);
}

/* ============================================================
   16. CARRIER VIEW SPECIFIC STYLES
   ============================================================ */

/* Driver management forms */
.carrier-view .driver-select-wrapper {
    margin-bottom: 20px;
}

.carrier-view .driver-select-wrapper label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
    color: var(--text);
}

.carrier-view .driver-select-wrapper select {
    width: 100%;
    padding: 10px;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--font);
}

.carrier-view .driver-edit-form,
.carrier-view .driver-create-form {
    margin-top: 16px;
}

.carrier-view .driver-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 20px;
}

.carrier-view .driver-inline-edit-form .driver-form-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.carrier-view .driver-form-grid > div {
    display: flex;
    flex-direction: column;
}

.carrier-view .driver-form-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.carrier-view .driver-card-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;
}

.carrier-view .driver-card-actions .btn-secondary,
.carrier-view .driver-remove-section .btn-danger {
    width: auto;
}

.carrier-view .driver-remove-section {
    margin-top: 12px;
}

.carrier-view .driver-form-grid label,
.carrier-view .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: bold;
    color: var(--text);
}

.carrier-view .driver-form-grid input,
.carrier-view .form-input,
.carrier-view .form-select,
.carrier-view .form-textarea {
    width: 100%;
    padding: 10px;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--font);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.carrier-view .driver-form-grid input:focus,
.carrier-view .form-input:focus,
.carrier-view .form-select:focus,
.carrier-view .form-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
}

.carrier-view .driver-form-grid input::placeholder,
.carrier-view .form-input::placeholder,
.carrier-view .form-textarea::placeholder {
    color: var(--muted);
}

.carrier-view .btn-primary {
    padding: 10px 20px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.carrier-view .btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* ---------- 14o. Load-View Buttons ---------- */

.load-view .btn-primary,
.load-view .btn-success,
.load-view .btn-secondary,
.load-view .btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font);
    line-height: 1.2;
}

.load-view .btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
}

.load-view .btn-primary {
    background: var(--accent);
    color: white;
    box-shadow: 0 1px 3px rgba(96, 165, 250, 0.2);
}

.load-view .btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(96, 165, 250, 0.3);
}

.load-view .btn-success {
    background: var(--success, #22c55e);
    color: white;
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.2);
}

.load-view .btn-success:hover {
    background: #16a34a;
    transform: translateY(-1px);
}

#save-load-btn.btn-success {
    background: #22c55e;
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.2);
}

#save-load-btn.btn-success:hover {
    background: #16a34a;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
}

#track-load-btn.btn-success {
    background: #1a6438;
    box-shadow: 0 1px 3px rgba(20, 83, 45, 0.2);
}

#track-load-btn.btn-success:hover {
    background: #15502c;
    box-shadow: 0 4px 10px rgba(20, 83, 45, 0.3);
}

.load-view .btn-secondary {
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--border);
}

.load-view .btn-secondary:hover {
    background: rgba(148, 163, 184, 0.08);
    color: var(--text);
    border-color: var(--muted);
    transform: translateY(-1px);
}

.load-view .btn-danger {
    background: #dc3545;
    color: white;
}

.load-view .btn-danger:hover {
    background: #c82333;
    transform: translateY(-1px);
}

#cancel-track-btn.btn-danger {
    background: #a32638;
}

#cancel-track-btn.btn-danger:hover {
    background: #861e2e;
}

/* Restore form-control styling for modal inputs inside load-view */
.load-view .form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.load-view .form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* Load-view modal overlay — also global for fixed-position modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--panel);
    padding: 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    width: 500px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-content h3 {
    margin: 0 0 16px 0;
    font-size: 18px;
    color: var(--text);
    font-weight: bold;
}

#add-leg-modal .add-leg-modal-content {
    width: min(900px, calc(100vw - 48px));
    max-width: none;
    box-sizing: border-box;
}

#add-leg-modal .add-leg-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

#add-leg-modal .add-leg-modal-header h3 {
    margin: 0;
}

#add-leg-modal .add-leg-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
}

#add-leg-modal .form-group {
    min-width: 0;
    margin-bottom: 0;
}

#add-leg-modal .form-group > label {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

#add-leg-modal .form-control,
#add-leg-modal .load-location-search-row > button {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
}

#add-leg-modal .add-leg-field-wide {
    grid-column: 1 / -1;
}

#add-leg-modal .add-leg-appointment-controls {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    align-items: center;
    gap: 18px;
}

#add-leg-modal .add-leg-appointment-controls > label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--text);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

#add-leg-modal .add-leg-appointment-controls input {
    margin: 0;
}

#add-leg-modal #leg-delivery-instr-input {
    min-height: 64px;
    resize: vertical;
}

#add-leg-modal #leg-form > .btn-full-width {
    margin-top: 14px;
}

@media (max-width: 700px) {
    #add-leg-modal .add-leg-modal-content {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        padding: 18px;
    }

    #add-leg-modal .add-leg-form-grid {
        grid-template-columns: 1fr;
    }

    #add-leg-modal .add-leg-field-wide {
        grid-column: auto;
    }

    #add-leg-modal .add-leg-appointment-controls {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Carrier and driver assignment wizard */
.assignment-summary {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
    cursor: pointer;
}

.assignment-summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

.assignment-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.assignment-summary-row:last-child {
    border-bottom: 0;
}

.assignment-summary-row > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assignment-summary-row .view-val {
    color: var(--text);
    font-size: 15px;
    font-weight: 750;
}

.assignment-summary-row > span:not(.view-val) {
    color: var(--muted);
    font-size: 13px;
}

.assignment-wizard-overlay {
    z-index: 8300;
    padding: 24px;
    box-sizing: border-box;
}

.assignment-wizard-content {
    background: var(--panel);
    width: min(540px, calc(100vw - 48px));
    max-width: none;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width 180ms ease;
}

.assignment-wizard-overlay.has-carrier .assignment-wizard-content {
    width: min(1380px, calc(100vw - 48px));
}

.assignment-wizard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--border);
}

.assignment-wizard-header h3,
.assignment-wizard-kicker {
    margin: 0;
}

.assignment-wizard-kicker {
    margin-bottom: 4px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.assignment-wizard-grid {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 330px;
}

.assignment-wizard-overlay.has-carrier .assignment-wizard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.assignment-pane {
    min-width: 0;
    padding: 20px 22px 22px;
    background: var(--panel);
}

.assignment-driver-pane {
    border-left: 1px solid var(--border);
}

.assignment-dispatcher-pane {
    border-left: 1px solid var(--border);
}

.assignment-pane-heading,
.assignment-pane-heading > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.assignment-pane-heading {
    justify-content: space-between;
    min-height: 34px;
    margin-bottom: 12px;
}

.assignment-pane-heading h4 {
    margin: 0;
    font-size: 16px;
}

.assignment-new-contact-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, var(--panel));
    color: var(--accent);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.assignment-new-contact-button > span {
    display: inline-grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: 14px;
    line-height: 1;
}

.assignment-new-contact-button:hover,
.assignment-new-contact-button:focus-visible {
    border-color: var(--accent);
    background: var(--accent);
    color: white;
    outline: none;
}

.assignment-new-contact-button:hover > span,
.assignment-new-contact-button:focus-visible > span {
    background: white;
    color: var(--accent);
}

.assignment-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: 12px;
    font-weight: 800;
}

.assignment-selection {
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 230px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assignment-search-label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.assignment-options {
    display: grid;
    gap: 8px;
    max-height: 260px;
    margin-top: 12px;
    overflow-y: auto;
}

.assignment-option {
    display: flex;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color var(--transition), background var(--transition);
}

.assignment-driver-option {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
}

.assignment-driver-option span,
.assignment-pane-help,
.assignment-empty,
.assignment-loading {
    color: var(--muted);
    font-size: 12px;
}

.assignment-pane-help {
    margin: -4px 0 0;
}

.assignment-option:hover,
.assignment-option:focus-visible,
.assignment-option[aria-pressed="true"] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg));
    outline: none;
}

.assignment-wizard-error {
    min-height: 18px;
    margin: 0;
    padding: 0 22px 14px;
    color: var(--danger);
    font-size: 12px;
    font-weight: 700;
}

.assignment-wizard-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 22px 20px;
}

.assignment-balloon {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 8500;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--success) 65%, var(--border));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--success) 18%, var(--panel));
    color: var(--text);
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    font-weight: 800;
}

.assignment-balloon.is-error {
    border-color: color-mix(in srgb, var(--danger) 65%, var(--border));
    background: color-mix(in srgb, var(--danger) 18%, var(--panel));
}

.assignment-wizard-overlay.is-saving .assignment-option {
    opacity: 0.6;
    cursor: wait;
}

.assignment-new-driver-overlay {
    z-index: 8400;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.72);
}

.assignment-new-driver-content {
    width: min(680px, calc(100vw - 48px));
    max-width: none;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.assignment-new-driver-carrier {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.assignment-new-driver-form {
    padding: 20px 22px 22px;
}

.assignment-new-driver-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.assignment-new-driver-grid .form-group {
    margin: 0;
}

.assignment-new-driver-grid label {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.assignment-new-driver-form .assignment-wizard-error {
    padding: 10px 0 4px;
}

@media (max-width: 700px) {
    .assignment-summary-row {
        gap: 8px;
    }

    .assignment-wizard-overlay {
        align-items: flex-start;
        padding: 12px;
    }

    .assignment-wizard-content,
    .assignment-wizard-overlay.has-carrier .assignment-wizard-content {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    .assignment-wizard-overlay.has-carrier .assignment-wizard-grid {
        grid-template-columns: 1fr;
    }

    .assignment-wizard-grid {
        min-height: 0;
    }

    .assignment-driver-pane {
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .assignment-dispatcher-pane {
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .assignment-balloon {
        right: 12px;
        bottom: 12px;
        left: 12px;
        text-align: center;
    }

    .assignment-new-driver-overlay {
        align-items: flex-start;
        padding: 12px;
    }

    .assignment-new-driver-content {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    .assignment-new-driver-grid {
        grid-template-columns: 1fr;
    }
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--muted);
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.modal-close-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text);
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 1024px) {
    .load-view .container {
        grid-template-columns: 1fr;
    }
    .load-view .load-overview-grid {
        grid-template-columns: 1fr;
    }
    .load-view .load-map-panel {
        order: 1;
    }
    .load-view .load-details-card {
        order: 2;
    }
    .load-view .column-main,
    .load-view .column-side {
        order: initial;
    }
}

.btn-new-load {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    font-family: var(--font);
    transition: all var(--transition);
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    width: 40px;
    height: 40px;
    padding: 0 0 5px 0;
    box-sizing: border-box;
}

.btn-new-load::after {
    content: "New Load";
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #e2e8f0;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.btn-new-load:hover::after {
    opacity: 1;
}

.btn-new-load:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}

.btn-new-load:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Create Location button — matches New Load button style */
.btn-new-location::after {
    content: "New Location";
}

.btn-new-location,
.btn-new-location:hover {
    text-decoration: none;
    color: white;
}

.carrier-view .btn-secondary {
    padding: 10px 20px;
    background: var(--muted);
    color: var(--text);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.carrier-view .btn-secondary:hover {
    background: #6b7280;
    transform: translateY(-1px);
}

.carrier-view .btn-danger {
    padding: 8px 16px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.carrier-view .btn-danger:hover {
    background: #c82333;
    transform: translateY(-1px);
}

.search-dropdown {
    display: none;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel);
    width: 100%;
    box-sizing: border-box;
}

/* Global form-control class for inputs, selects, textareas */
.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.btn-full-width {
    width: 100%;
}
.carrier-view .btn-full {
    width: auto;
    padding: 8px 16px;
    margin-top: 16px;
}

.carrier-view .remove-driver-form {
    margin-top: 16px;
}

.carrier-view .driver-remove-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* Pill styles for status */
.carrier-view .pill {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.carrier-view .pill-status {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--text);
}

.carrier-view .pill-status.cancelled {
    background: #dc3545;
    color: white;
}

.carrier-view .pill-invoice {
    background: var(--panel);
    color: var(--text);
}

.carrier-view .pill-invoice.cancelled {
    background: #dc3545;
    color: white;
}

/* Section title for driver management */
.carrier-view .card h4 {
    font-size: 14px;
    margin: 24px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
    color: var(--text);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.carrier-view .card h4:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Edit Existing Driver Box */
.carrier-view .edit-driver-box {
    border: 1px solid white;
    border-radius: 8px;
    padding: 32px;
    margin-bottom: 24px;
}

.carrier-view .edit-driver-box h4 {
    font-size: 14px;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
    color: var(--text);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Create New Driver Box */
.carrier-view .create-driver-box {
    border: 1px solid white;
    border-radius: 8px;
    padding: 32px;
    margin-bottom: 24px;
}

.carrier-view .create-driver-box h4 {
    font-size: 14px;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
    color: var(--text);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Compact, flat carrier detail page. Keep this scoped away from loads and customers. */
.carrier-view {
    padding: 12px;
}

.carrier-view .back-button-container {
    margin-bottom: 12px;
}

.carrier-view.customer-view .header {
    margin-bottom: 12px;
    padding: 16px 18px;
    background: var(--card);
    background-image: none;
    box-shadow: none;
}

.carrier-view .header-content h1 {
    margin-bottom: 5px;
    font-size: 26px;
}

.carrier-view .carrier-header-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.carrier-status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--muted);
}

.carrier-status-dot.is-active {
    background: #2f9e62;
}

.carrier-status-dot.is-inactive {
    background: #b42318;
}

.carrier-view .customer-details-card {
    margin-top: 0;
    padding: 16px 18px;
    background: var(--panel);
    background-image: none;
    box-shadow: none;
}

.carrier-view .customer-card-heading {
    margin-bottom: 6px;
    padding-bottom: 10px;
}

.carrier-view .customer-card-heading h2 {
    font-size: 18px;
}

.carrier-view .customer-inline-edit-form {
    gap: 12px;
}

.carrier-view .customer-inline-grid {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 0;
}

.carrier-view .customer-inline-grid .stat {
    min-height: 0;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.carrier-view .customer-inline-grid .stat:hover,
.carrier-view .card:hover,
.carrier-view .party-card:hover {
    transform: none;
    box-shadow: none;
}

.carrier-view .notes-section {
    margin-top: 4px;
}

.carrier-view .container,
.carrier-view.load-view .container {
    gap: 12px;
}

.carrier-view .column,
.carrier-view .column-sidebar {
    gap: 12px;
}

.carrier-view .card {
    margin-top: 12px;
    padding: 14px;
    background: var(--card);
    background-image: none;
    box-shadow: none;
}

.carrier-view .parties-grid {
    gap: 8px;
}

.carrier-view .driver-rows .party-card {
    padding: 10px 12px;
    border-radius: 6px;
}

.carrier-view .party-card.party-collapsible .party-header {
    padding-bottom: 8px;
    border-bottom-width: 1px;
}

.carrier-view .party-card .party-body {
    padding-top: 10px;
}

.carrier-view .create-driver-box {
    margin-bottom: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.carrier-view .driver-form-grid {
    gap: 12px;
    margin-bottom: 12px;
}

.carrier-view .btn,
.carrier-view button,
.carrier-view .back-button {
    background-image: none;
}

@media (max-width: 1100px) {
    .carrier-view .customer-inline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Edit Carrier Form */
.carrier-view .edit-carrier-form {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--card);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.carrier-view .edit-carrier-form h2 {
    font-size: 16px;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent);
    color: var(--text);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Customer Edit Form Styles */
.pill-edit {
    background-color: var(--accent);
    color: white;
    cursor: pointer;
    border: none;
    font-family: Arial;
    font-weight: bold;
}

.edit-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    max-width: 500px;
    margin: 0 auto;
}

.edit-form .form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0;
}

.edit-form .form-group label {
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--text);
}

.edit-form .form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--muted);
    border-radius: 4px;
    background-color: var(--panel);
    color: var(--text);
}

.edit-form .form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--muted);
    border-radius: 4px;
    background-color: var(--panel);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    resize: vertical;
}

.edit-form .checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.edit-form .checkbox-group input {
    width: auto;
}

.form-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.save-button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.cancel-button {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.carrier-view .form-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 16px;
}

.load-view .form-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 16px;
}

/* Commissions grid layout */
.load-view .commissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

/* Commission card styles */
.load-view .commission-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

.load-view .commission-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.load-view .commission-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.load-view .commission-card .user-name {
    font-weight: bold;
    color: var(--text);
    font-size: 13px;
    line-height: 1.2;
}

.load-view .commission-card .card-body dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.load-view .commission-card .card-body dt {
    font-size: 10px;
    font-weight: bold;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}

.load-view .commission-card .card-body dd {
    font-size: 13px;
    color: var(--text);
    padding-left: 0;
    margin: 0;
}

.load-view .commission-card .card-body dl > div {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.load-view .commission-card .card-body dl > div:last-child {
    border-bottom: none;
}

.load-view .commission-card .card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* Commission edit fields - type select in header */
.load-view .commission-card .card-header select.edit-val.commission-type {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 4px 8px;
    font-weight: 600;
    font-size: 11px;
    font-family: var(--font);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.load-view .commission-card .card-header select.edit-val.commission-type:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.load-view .commission-card .card-header select.edit-val.commission-type option {
    background: var(--panel);
    color: var(--text);
}

/* Commission flat/pct amount inputs */
.load-view .commission-card input.edit-val.commission-flat,
.load-view .commission-card input.edit-val.commission-pct {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 4px 8px;
    font-weight: 600;
    font-size: 12px;
    font-family: var(--font);
    width: 80px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.load-view .commission-card input.edit-val.commission-flat:focus,
.load-view .commission-card input.edit-val.commission-pct:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* Commission status select */
.load-view .commission-card select.edit-val.commission-status {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 4px 8px;
    font-weight: 600;
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.load-view .commission-card select.edit-val.commission-status:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.load-view .commission-card select.edit-val.commission-status option {
    background: var(--panel);
    color: var(--text);
}

/* Delete commission button */
.delete-commission-btn {
    padding: 4px 12px;
    background: rgba(220, 53, 69, 0.15);
    color: #ef4444;
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-commission-btn:hover {
    background: rgba(220, 53, 69, 0.25);
}

/* Search results dropdown styling */
.load-view .search-results,
.load-view .csr-search-results,
.load-view .driver-search-results,
.load-view .edit-leg-location-results,
.load-view .location-osm-results {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
    z-index: 100;
    width: 100%;
    box-sizing: border-box;
}

.load-view .leg-edit-fields > .edit-leg-location-results {
    grid-column: 2 / 3;
    justify-self: stretch;
    position: relative;
    top: auto;
    margin-top: 4px;
    z-index: 1000;
}

/* The carrier/driver search menus open above their inputs so they do not
   fall behind the next stat row or get cut off at the bottom of the card. */
.load-view.editing .stat:has(.carrier-search-results),
.load-view.editing .stat:has(.driver-search-results) {
    position: relative;
    z-index: 1100;
}

.load-view.editing .carrier-search-results,
.load-view.editing .driver-search-results {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    z-index: 1200 !important;
    max-height: none !important;
    overflow-y: visible !important;
}

/* These rules must come after the card defaults: the edit search menu is
   intentionally allowed to extend below the load-details card. */
.load-view.editing .column-main,
.load-view.editing .column-main .card,
.load-view.editing .column-main .stat-grid,
.load-view.editing .column-main .stat:has(.carrier-search-results),
.load-view.editing .column-main .stat:has(.driver-search-results) {
    overflow: visible !important;
}

.load-view .search-result-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    transition: background 0.15s ease;
}

.load-view .search-result-item:last-child {
    border-bottom: none;
}

.load-view .search-result-item:hover {
    background: rgba(96, 165, 250, 0.1);
    color: var(--accent);
}

/* Mobile adjustments */
@media (max-width: 900px) {
    .filter-controls {
        display: block;
        width: 100%;
    }

    .filter-layout-panel {
        display: flex;
        width: 100%;
        min-width: 0;
        margin: -48px 0 62px;
    }

    .load-view .commissions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .load-view .commission-card {
        padding: 12px;
    }
    .load-view .commission-card .user-name {
        font-size: 13px;
    }
}
/* Global primary button — blue pill style */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font);
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--accent) 25%, transparent);
}

.btn-primary:hover {
    filter: brightness(1.1);
    /* Keep buttons in normal document flow; the previous calculation caused
       modal buttons to jump upward when hovered. */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
    text-decoration: none;
    color: white;
}

.btn-primary:active {
    transform: translateY(0);
}

/* Button placed in the back-button-container row */
.btn-header-right {
    float: right;
}

.btn-header-right + .btn-header-right {
    margin-right: 8px;
}

/* Push action buttons to the right as a group in the load view */
.load-view .back-button-container {
    position: sticky;
    top: 0;
    z-index: 950;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 16px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    flex-wrap: wrap;
    min-width: 0;
}

.load-view .back-button-container .load-action-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.load-view .back-button-container .btn-header-right {
    float: none;
}

/* Load fields are edited in place by double-clicking their row or card. */
.load-view .stat:has(.edit-val),
.load-view .charges-table tr[data-charge-id],
.load-view .commission-card[data-can-edit="1"],
.load-view .commodities-table tr[data-commodity-id],
.load-view .leg-card,
.load-view .card:has(> .edit-val) {
    cursor: default;
}

.load-view .stat:has(.edit-val):hover,
.load-view .charges-table tr[data-charge-id]:hover,
.load-view .commission-card[data-can-edit="1"]:hover,
.load-view .commodities-table tr[data-commodity-id]:hover {
    outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 3px;
}

/* The assignment section has its own section-level hover treatment; do not
   draw the generic dashed inline-edit outline around its two pills. */
.load-view:not(.editing) .driver-assignment-card .stat:has(.edit-val):hover {
    outline: none;
    outline-offset: 0;
}

/* The Load Details section has its own section-level hover treatment; do not
   draw the generic dashed inline-edit outline around its pills. */
.load-view:not(.editing) .load-details-card .stat:has(.edit-val):hover {
    outline: none;
    outline-offset: 0;
}

.load-view .inline-editor-active {
    position: relative;
    z-index: 20;
    outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent) !important;
    outline-offset: 4px;
    background: color-mix(in srgb, var(--accent) 5%, var(--card));
}

/* Charge rows and editable commission cards use their existing dashed hover
   cue while edited. Suppress the generic active-editor outline to avoid a
   second border. */
.load-view .charges-table tr[data-charge-id].inline-editor-active,
.load-view .commission-card[data-can-edit="1"].inline-editor-active,
.load-view .charges-commissions-card.inline-editor-active,
.load-view .settings-card.inline-editor-active {
    outline: none !important;
    outline-offset: 0;
}

.load-view .charges-table tr[data-charge-id].inline-editor-active:hover,
.load-view .commission-card[data-can-edit="1"].inline-editor-active:hover {
    outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent) !important;
    outline-offset: 3px;
}

/* Keep the full charge breakdown compact when its card is opened for inline editing. */
.load-view .inline-editor-active .charge-sections {
    gap: 8px;
}

.load-view .inline-editor-active .charge-section-header {
    gap: 8px;
    padding: 6px 8px;
}

.load-view .inline-editor-active .charge-section-heading {
    gap: 6px;
}

.load-view .inline-editor-active .table.charges-table {
    margin-top: 4px;
}

.load-view .inline-editor-active .table.charges-table thead th {
    padding: 6px;
}

.load-view .inline-editor-active .table.charges-table td {
    padding: 5px 6px;
}

.load-view .inline-editor-active .table.charges-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

.load-view .inline-editor-active .table.charges-table td input[type="number"],
.load-view .inline-editor-active .table.charges-table td input[type="text"],
.load-view .inline-editor-active .table.charges-table td select.charge-type {
    padding: 4px 28px 4px 10px;
}

.load-view .inline-editor-active .add-charge-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

.load-view .inline-editor-active .delete-charge-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 50%;
    line-height: 1;
}

.load-view .inline-editor-active.leg-card {
    outline: none !important;
    outline-offset: 0;
}

.load-view .inline-editor-active .leg-edit-fields,
.load-view .inline-editor-active.leg-card .leg-edit-fields {
    display: grid !important;
}

.load-view .inline-editor-active .commodity-edit-fields {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
}

.load-view .inline-editor-active .commodity-edit-fields .delete-commodity-btn-wrap {
    order: 2;
    margin-left: auto;
}

.load-save-balloon {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 220px;
    padding: 13px 12px 13px 18px;
    color: #f8fafc;
    background: #172033;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    font-weight: 650;
    animation: load-save-balloon-in 180ms ease-out;
}

.load-save-balloon::after {
    content: '';
    position: absolute;
    right: 22px;
    bottom: -7px;
    width: 13px;
    height: 13px;
    background: inherit;
    border-right: inherit;
    border-bottom: inherit;
    transform: rotate(45deg);
}

.load-save-balloon-message {
    flex: 1;
}

.load-save-balloon-undo,
.load-save-balloon-dismiss {
    position: relative;
    z-index: 1;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.load-save-balloon-undo {
    padding: 5px 8px;
    color: #93c5fd;
    font: inherit;
}

.load-save-balloon-undo:hover {
    color: #dbeafe;
    text-decoration: underline;
}

.load-save-balloon-dismiss {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #94a3b8;
    font-size: 22px;
    line-height: 24px;
}

.load-save-balloon-dismiss:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.load-save-balloon.is-undoing {
    opacity: 0.78;
}

.load-save-balloon.is-error {
    border-color: #ef4444;
}

@keyframes load-save-balloon-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
    .load-save-balloon {
        right: 14px;
        bottom: 14px;
        left: 14px;
    }
}

/* ============================================================
   19. UTILITY & ACCESSIBILITY
   ============================================================ */

/* Hidden utility — replaces inline style="display:none" */
.hidden {
    display: none !important;
}

/* Loading state for dynamic content */
.content-loading {
    position: relative;
    min-height: 200px;
    pointer-events: none;
    opacity: 0.72;
}

.content-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: content-spin 0.7s linear infinite;
}

@keyframes content-spin {
    to { transform: rotate(360deg); }
}

/* Error message for failed content loads */
.error-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-align: center;
    padding: var(--space-4) var(--space-5);
    color: #fecaca;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: var(--radius-md);
    font-weight: bold;
}

.error-message::before {
    content: '!';
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid currentColor;
    border-radius: 50%;
    flex: 0 0 22px;
}

/* Clickable rows — keyboard accessible */
.clickable-row {
    cursor: pointer;
}

.clickable-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Sidebar — show labels on tap for touch devices */
@media (hover: none) and (pointer: coarse) {
    .sidebar .nav-label {
        opacity: 1;
    }
    .sidebar {
        width: 60px;
    }
    .sidebar:hover {
        width: 60px;
    }
    .sidebar.open {
        width: 260px;
    }
    .sidebar.open .nav-label {
        opacity: 1;
    }
}
.load-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.load-map-panel {
    width: 100%;
    min-width: 0;
}

.load-map-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.load-map-status {
    color: var(--muted);
    font-size: 0.85rem;
}

.load-map {
    width: 100%;
    height: 380px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--bg-body);
    z-index: 0;
}

.map-interaction-frame {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel);
}

.map-interaction-frame > .load-map {
    border: 0;
    border-radius: 0;
}

.load-map:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.map-interaction-frame.is-active {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border-color));
}

.map-interaction-hint {
    margin: 0;
    padding: 0.55rem 0.8rem;
    border-top: 1px solid var(--border-color);
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.map-interaction-frame.is-active > .map-interaction-hint {
    background: var(--surface-active);
    color: var(--text);
}

.leaflet-container img,
.leaflet-container .leaflet-tile {
    max-width: none !important;
    max-height: none !important;
}

.leaflet-container {
    font-family: var(--font) !important;
    background: #aad3df !important;
    overflow: hidden !important;
}

.leaflet-map-pane,
.leaflet-tile-pane,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-marker-pane,
.leaflet-tooltip-pane,
.leaflet-popup-pane {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
}

.leaflet-tile-container,
.leaflet-tile {
    position: absolute !important;
    left: 0;
    top: 0;
}

.leaflet-tile {
    width: 256px !important;
    height: 256px !important;
}

.leaflet-pane.leaflet-tile-pane {
    z-index: 200 !important;
}

.leaflet-pane.leaflet-overlay-pane {
    z-index: 400 !important;
}

.leaflet-pane.leaflet-marker-pane {
    z-index: 700 !important;
}

.leaflet-pane.leaflet-popup-pane {
    z-index: 900 !important;
}

.load-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.75rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.load-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.legend-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    display: inline-block;
}

.legend-dot.pickup {
    background: #27ae60;
}

.legend-dot.delivery {
    background: #f2994a;
}

.legend-line {
    width: 1.5rem;
    height: 0.25rem;
    border-radius: 999px;
    background: #2f80ed;
    display: inline-block;
}

.numbered-stop-marker {
    width: 34px !important;
    height: 34px !important;
    position: relative !important;
    z-index: 750 !important;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

.numbered-stop-marker.pickup {
    background: #27ae60;
}

.numbered-stop-marker.delivery {
    background: #f2994a;
}

.numbered-stop-marker span {
    display: block;
}

.load-map-stop-popup {
    min-width: 190px;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.16), rgba(96, 165, 250, 0.04)), var(--panel);
    color: var(--text);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.load-map-stop-popup-label {
    padding: 7px 10px;
    background: rgba(96, 165, 250, 0.18);
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.load-map-stop-popup-name {
    padding: 10px 10px 4px;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.load-map-stop-popup-address {
    padding: 0 10px 10px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.leaflet-popup-content:has(.load-map-stop-popup) {
    margin: 0;
}

.leaflet-popup-content-wrapper:has(.load-map-stop-popup) {
    padding: 0;
    border-radius: 12px;
    background: transparent;
}

.leaflet-control-zoom a {
    color: #111 !important;
}
.tracking-light {
    display: inline-block;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    margin-right: 0.45rem;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.tracking-light-active {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.9);
}

.tracking-light-near {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.9);
}

.tracking-light-inactive {
    background: #64748b;
    opacity: 0.55;
}
/* Private load documents */
.document-list {
    display: grid;
    gap: 0.65rem;
}

.documents-heading {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.documents-heading h2 {
    margin: 0;
}

.documents-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.documents-card {
    overflow: hidden;
}

.documents-card .document-empty {
    margin: 0.35rem 0 0;
}

.documents-heading-actions .btn {
    box-shadow: var(--shadow-sm);
    font-weight: 700;
}

/* Keep document actions compact without changing the larger load controls. */
.load-view .documents-heading-actions .btn,
.load-view .document-actions .btn {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 13px;
}

.documents-heading-actions .btn-success {
    max-width: none;
}

.public-link-modal-content {
    display: flex;
    flex-direction: column;
    max-width: 720px;
    max-height: min(90vh, 90dvh);
    overflow: hidden;
    padding: 0;
    width: min(92vw, 720px);
}

.public-link-modal-content .document-viewer-header,
.document-upload-content .document-viewer-header,
.carrier-email-modal-content .document-viewer-header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), var(--panel));
    border-bottom-color: var(--border);
}

.public-link-modal-content .document-viewer-header h3,
.document-upload-content .document-viewer-header h3,
.carrier-email-modal-content .document-viewer-header h3 {
    font-size: var(--text-lg);
    letter-spacing: -0.01em;
}

.public-link-modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
}

.public-link-modal-body > .document-empty:first-child {
    margin-top: 0;
}

.document-upload-content {
    max-width: 560px;
    overflow: hidden;
    padding: 0;
    width: min(92vw, 560px);
}

.document-upload-form {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.document-upload-step,
.public-link-create-options,
.carrier-email-options,
.carrier-email-preview,
.document-upload-review,
.new-public-link-result {
    box-shadow: var(--shadow-sm);
}

.document-upload-step {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.9rem;
}

.document-upload-step label,
.carrier-email-options label,
.public-link-create-options label {
    color: var(--text);
    font-size: var(--text-sm);
}

.document-upload-step {
    align-items: flex-start;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 2rem 1fr;
}

.document-upload-step-number {
    align-items: center;
    background: var(--accent, #2563eb);
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.document-upload-step input[type="file"],
.document-upload-step select {
    box-sizing: border-box;
    display: block;
    margin-top: 0.4rem;
    max-width: 100%;
    width: 100%;
}

.document-upload-step input[type="file"],
.document-upload-step select,
.public-link-create-options select,
.carrier-email-options input,
.carrier-email-options select,
.public-link-copy-row input {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    min-height: 40px;
    padding: 0.6rem 0.7rem;
}

.document-upload-step input:focus,
.document-upload-step select:focus,
.public-link-create-options select:focus,
.carrier-email-options input:focus,
.carrier-email-options select:focus,
.public-link-copy-row input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    outline: none;
}

.document-upload-help,
.document-upload-review p {
    color: var(--text-muted, #697386);
    font-size: 0.85rem;
    margin: 0.4rem 0 0;
}

.document-upload-review {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 8px;
    padding: 0.75rem;
}

.document-upload-review strong {
    color: var(--accent-hover);
}

.document-upload-status {
    min-height: 1.25rem;
}

.document-upload-error {
    color: #ef4444 !important;
}

.document-upload-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
    padding-top: 1rem;
}

.document-row {
    align-items: center;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #d8dde6);
    border-radius: 8px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.8rem;
}

.document-info {
    display: grid;
    min-width: 0;
}

.document-info strong {
    overflow-wrap: anywhere;
}

.document-info span,
.document-empty {
    color: var(--text-muted, #697386);
    font-size: 0.85rem;
}

.document-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.4rem;
}

.document-viewer-modal {
    box-sizing: border-box;
    inset: 0;
    height: 100dvh;
    overflow: hidden;
    padding: 1rem;
    width: 100vw;
    z-index: 10000;
}

.document-viewer-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: min(calc(100dvh - 2rem), 1000px);
    max-height: calc(100dvh - 2rem);
    max-width: 1200px;
    overflow: hidden;
    padding: 0;
    width: min(95vw, 1200px);
}

html.document-viewer-open,
html.document-viewer-open body {
    overflow: hidden;
}

.document-viewer-header {
    align-items: center;
    border-bottom: 1px solid var(--border-color, #d8dde6);
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    flex: 0 0 auto;
    min-width: 0;
}

.document-viewer-header h3 {
    margin: 0;
    overflow-wrap: anywhere;
}

.document-viewer-body {
    align-items: center;
    background: #2a2a2a;
    display: flex;
    flex: 1;
    justify-content: center;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    position: relative;
}

.document-viewer-body.pdf-active {
    /* Centering an element taller than its scroll container places its top
       above scroll offset zero, making the first PDF page unreachable. */
    align-items: flex-start;
    justify-content: flex-start;
}

.document-viewer-frame {
    background: #fff;
    border: 0;
    height: 100%;
    width: 100%;
}

.document-viewer-image {
    height: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.document-pdf-pages {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.document-pdf-page {
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
    display: block;
    height: auto;
    max-width: 100%;
}

.document-viewer-status {
    color: #fff;
    font-size: 1rem;
    padding: 2rem;
    text-align: center;
}

.document-viewer-error {
    color: #ffb4b4;
}

@media (max-width: 640px) {
    .load-view .load-details-card .stat-grid {
        grid-template-columns: 1fr;
    }

    .document-viewer-modal {
        padding: 0;
    }

    .document-viewer-content {
        border-radius: 0;
        height: 100dvh;
        max-height: 100dvh;
        max-width: 100vw;
        width: 100vw;
    }

    .document-pdf-pages {
        padding: 0.5rem;
    }

    .document-row {
        align-items: stretch;
        flex-direction: column;
    }

    .documents-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .documents-heading-actions {
        justify-content: stretch;
    }

    .documents-heading-actions .btn {
        flex: 1 1 140px;
        justify-content: center;
    }

    .document-actions .btn {
        flex: 1;
        text-align: center;
    }
}

/* Public driver document portal */
.public-upload-page {
    min-height: 100vh;
    margin: 0;
    color: #e8edf5;
    background: #080d17;
    font-family: var(--font);
}

.public-upload-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
    padding: 60px 0 56px;
}

.public-upload-header {
    grid-column: 1;
    margin-bottom: 0;
    padding: 18px 22px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 18px;
    background: #0b1729;
}

.public-upload-header > div {
    text-align: center;
}

.public-upload-brand { grid-column: 1; min-width: 0; padding-top: 0; }
.public-upload-brand img { display: block; width: 135px; max-width: 100%; height: auto; }
.public-upload-brand .public-upload-eyebrow { margin: 8px 0 0; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; text-align: left; }
.public-upload-header h1 { margin: 5px 0 12px; color: #f8fbff; font-size: clamp(1.8rem, 5vw, 2.55rem); line-height: 1.1; }
.public-upload-header p { margin: 0; color: #aebbd0;}
.public-upload-eyebrow { color: #60a5fa !important; font-size: .73rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.public-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.public-section-heading h2 { margin: 0; }
.public-upload-file-count { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid rgba(96,165,250,.35); border-radius: 999px; background: rgba(96,165,250,.1); color: #93c5fd; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.public-upload-dropzone { display: flex !important; align-items: center; justify-content: center; gap: 7px; min-height: 164px; margin: 10px 0 0 !important; padding: 28px 20px; border: 1.5px dashed rgba(96,165,250,.55); border-radius: 14px; background: #101d30; color: #dbeafe; text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease; flex-direction: column; }
.public-upload-dropzone:hover,
.public-upload-dropzone.is-dragging { border-style: solid; border-color: #93c5fd; background: #142642; }
.public-upload-dropzone-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #60a5fa; color: #08111f; font-size: 25px; font-weight: 900; line-height: 1; }
.public-upload-dropzone strong { font-size: 1rem; }
.public-upload-dropzone span:last-of-type { color: #9eabc0; font-size: .82rem; font-weight: 500; }
.public-upload-dropzone input[type="file"] { display: none; }
.public-selected-files { display: grid; gap: 7px; margin: 10px 0 14px; }
.public-selected-file { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid rgba(148,163,184,.18); border-radius: 9px; background: rgba(10,15,26,.35); }
.public-selected-file > span:last-child { display: grid; min-width: 0; text-align: left; }
.public-selected-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.public-selected-file small { color: #9eabc0; font-size: .75rem; }
.public-selected-file-icon { display: inline-grid; place-items: center; width: 38px; height: 30px; flex: 0 0 38px; border-radius: 6px; background: rgba(96,165,250,.15); color: #93c5fd; font-size: .65rem; font-weight: 900; }
.public-upload-card { transition: border-color .2s ease; }
.public-upload-card:hover { border-color: rgba(96,165,250,.4); }
.public-document-row { transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.public-document-row:hover { border-color: rgba(96,165,250,.45); background: rgba(96,165,250,.07); transform: translateY(-1px); }

.public-upload-card {
    grid-column: 1;
    margin: 0;
    padding: clamp(18px, 4vw, 30px);
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 16px;
    background: #121e32;
}

.public-upload-card h2 { margin-top: 0; color: #f8fbff; line-height: 1.2; }
.public-upload-card p { line-height: 1.6; }
.public-upload-card label { display: block; margin: 18px 0 7px; font-weight: 700; }
.public-upload-card select,
.public-upload-card input[type="file"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    padding: 10px;
    color: #eef4ff;
    border: 1px solid #42516a;
    border-radius: 8px;
    background: #111d30;
}

.public-upload-card .btn { min-height: 42px; }
.public-upload-card #public-upload-submit { background: var(--accent); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 25%, transparent); }
.public-upload-card #public-upload-submit:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }
.public-upload-card #public-upload-submit:disabled { background: #475569; color: #cbd5e1; box-shadow: none; cursor: not-allowed; opacity: .75; }
.public-upload-help { color: #9eabc0; font-size: .9rem; line-height: 1.5; }
.public-upload-status { min-height: 1.4em; margin-top: 12px; color: #93c5fd; font-weight: 700; }
.public-upload-error { color: #fca5a5 !important; }
.public-upload-files { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(148, 163, 184, .22); }
.public-document-list { display: grid; gap: 10px; }
.public-document-row {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border: 1px solid #334158;
    border-radius: 10px;
    background: #0e192a;
}
.public-document-row strong,
.public-document-row span { display: block; overflow-wrap: anywhere; }
.public-document-row span { margin-top: 4px; color: #9eabc0; font-size: .82rem; }
.public-document-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.public-document-empty { color: #9eabc0; }
.public-upload-footer { padding: 15px; color: #8290a6; font-size: .82rem; line-height: 1.5; text-align: center; }
.public-upload-shell > .public-upload-footer { grid-column: 1; width: 100%; }

/* Carrier document-upload email preview */
.carrier-email-modal-content { max-width: 700px; }
.carrier-email-modal-content { width: min(92vw, 700px); padding: 0; overflow-x: hidden; overflow-y: auto; }
.carrier-email-options { display: grid; grid-template-columns: 1fr 180px; gap: 14px; margin: 0; padding: 1rem; background: var(--card); }
.carrier-email-options label { display: grid; gap: 6px; font-weight: 700; }
.carrier-email-preview { border: 1px solid var(--border-color); border-radius: var(--radius-md); margin: 0 1rem 1rem; overflow: hidden; }
.carrier-email-preview > div:first-child { padding: 10px 14px; background: rgba(127, 127, 127, .09); }
.carrier-email-preview-body { padding: 20px; background: #fff; color: #172033; line-height: 1.55; }
.carrier-email-preview-body h2 { color: #123f73; }
.carrier-email-preview-button { display: inline-block; background: #1769aa; color: #fff; padding: 10px 16px; border-radius: 6px; font-weight: 700; }
.carrier-email-preview-note { color: #667085; font-size: .82rem; }
.carrier-email-wizard-options { grid-template-columns: minmax(0, 1fr) 220px; align-items: start; }
.carrier-email-recipient-section { min-width: 0; }
.carrier-email-recipient-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.carrier-email-recipient-heading > label { margin: 0; }
.carrier-email-add-recipient {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    border: 1px solid var(--accent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font: 700 22px/1 system-ui, sans-serif;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.carrier-email-add-recipient:hover {
    border-color: var(--accent-hover);
    background: var(--accent);
    color: #fff;
}
.carrier-email-add-recipient:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
    outline-offset: 2px;
}
.carrier-email-recipient-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 8px; }
.carrier-email-recipient-row:first-child { margin-top: 0; }
.carrier-email-remove-recipient { width: 38px; min-width: 38px; padding: 0; font-size: 20px; line-height: 1; }
.carrier-email-recipient-error { grid-column: 1 / -1; min-height: 0; color: var(--danger); font-size: 12px; }
.carrier-email-recipient-error:empty { display: none; }
.carrier-email-recipient-input[aria-invalid="true"] { border-color: var(--danger); }
.carrier-email-helper { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.carrier-email-delivery-options { display: grid; gap: 14px; }
.carrier-email-options .carrier-email-regenerate-option[hidden] { display: none; }
.carrier-email-options .carrier-email-cc-option { display: flex; grid-template-columns: none; align-items: flex-start; gap: 8px; font-size: 13px; }
.carrier-email-options .carrier-email-cc-option input { width: auto; margin-top: 2px; }
.carrier-email-save-overlay { z-index: 8600; padding: 20px; }
.carrier-email-save-content { width: min(430px, calc(100vw - 40px)); max-width: none; padding: 22px; }
.carrier-email-save-content h3 { margin: 0 0 8px; }
.carrier-email-save-content p { margin: 0 0 14px; color: var(--muted); }
.carrier-email-save-content .document-upload-status { margin-bottom: 10px; }
.carrier-email-success { color: #4ade80 !important; }

#carrier-email-modal .carrier-email-modal-content {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(96vw, 1120px);
    max-width: 1120px;
    height: min(88dvh, 800px);
    max-height: 88dvh;
    overflow: hidden;
}

.carrier-email-wizard-body {
    display: grid;
    grid-template-columns: minmax(330px, 0.9fr) minmax(420px, 1.1fr);
    min-height: 0;
    overflow: hidden;
}

.carrier-email-wizard-left {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--border);
    overflow: hidden;
}

#carrier-email-modal .carrier-email-options {
    grid-template-columns: minmax(0, 1fr) 180px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}

#carrier-email-recipients {
    max-height: 128px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 3px;
}

.carrier-email-document-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 14px;
    overflow: hidden;
}

.carrier-email-drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px 8px;
    min-height: 48px;
    padding: 9px 12px;
    border: 1px dashed color-mix(in srgb, var(--accent) 65%, var(--border));
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    color: var(--text);
    text-align: center;
    cursor: pointer;
}

.carrier-email-drop-zone span {
    color: var(--muted);
    font-size: 12px;
}

.carrier-email-drop-zone.is-dragging,
.carrier-email-drop-zone:focus-visible {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
    outline-offset: 2px;
}

.carrier-email-document-groups {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.carrier-email-document-group {
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card);
    overflow: hidden;
}

.carrier-email-document-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.carrier-email-document-count {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    min-height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    font-size: 12px;
}

.carrier-email-document-list {
    max-height: min(145px, 24dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 10px 8px;
}

.carrier-email-empty-upload {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    flex: 1;
    min-height: 150px;
    border: 1px dashed var(--accent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent);
    cursor: pointer;
}

.carrier-email-empty-upload span {
    max-width: 280px;
    color: var(--muted);
    font-size: 12px;
}

.carrier-email-attachment-total {
    color: var(--muted);
    font-size: 12px;
}

.carrier-email-attachment-total.is-over-limit {
    color: var(--danger);
    font-weight: 700;
}

.carrier-email-wizard-right {
    min-width: 0;
    min-height: 0;
    padding: 14px;
    background: color-mix(in srgb, var(--panel) 70%, #000 5%);
    overflow: hidden;
}

#carrier-email-modal .carrier-email-preview {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    margin: 0;
}

#carrier-email-modal .carrier-email-preview-body {
    overflow-y: auto;
}

.carrier-email-preview-attachments {
    display: grid;
    gap: 4px;
    margin: 18px 0;
    padding: 10px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    background: #f8fafc;
    font-size: 13px;
}

.carrier-email-preview-attachments span {
    color: #475467;
}

.carrier-email-wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 66px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--panel);
}

.carrier-email-wizard-footer .document-upload-status {
    min-width: 0;
    margin: 0;
}

.carrier-email-wizard-footer .document-upload-actions {
    flex: 0 0 auto;
    margin: 0;
}

.carrier-email-upload-queue {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 18px;
    background: var(--panel);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.carrier-email-upload-queue-heading,
.carrier-email-upload-queue-actions,
.carrier-email-name-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.carrier-email-upload-queue-heading {
    justify-content: space-between;
}

.carrier-email-upload-queue-heading div,
.carrier-email-upload-location-options label span {
    display: grid;
}

.carrier-email-upload-queue-heading small,
.carrier-email-upload-location-options small {
    color: var(--muted);
}

.carrier-email-upload-queue > label {
    display: grid;
    gap: 6px;
    font-weight: 700;
}

.carrier-email-name-field input {
    min-width: 0;
    flex: 1;
}

.carrier-email-name-field span {
    color: var(--muted);
}

.carrier-email-upload-scope {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.carrier-email-upload-scope label,
.carrier-email-upload-location-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}

.carrier-email-upload-location-options {
    display: grid;
    gap: 7px;
    max-height: 170px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow-y: auto;
}

.carrier-email-upload-queue-actions {
    justify-content: flex-end;
}

@media (max-width: 820px) {
    #carrier-email-modal .carrier-email-modal-content {
        width: min(96vw, 700px);
        height: 94dvh;
        max-height: 94dvh;
    }
    .carrier-email-wizard-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1.12fr) minmax(0, .88fr);
    }
    .carrier-email-wizard-left {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
    #carrier-email-modal .carrier-email-options {
        grid-template-columns: minmax(0, 1fr) 155px;
    }
}

.carrier-email-modal-content > .document-upload-status,
.carrier-email-modal-content > .document-upload-actions {
    margin-left: 1rem;
    margin-right: 1rem;
}

.carrier-email-modal-content > .document-upload-actions {
    margin-bottom: 1rem;
}

/* Modal actions use the same sizing and color treatment as load-view buttons. */
.document-upload-content .document-upload-actions .btn,
.carrier-email-modal-content .document-upload-actions .btn,
.public-link-modal-content .public-link-modal-body > .btn {
    align-items: center;
    border: 0;
    border-radius: 6px;
    display: inline-flex;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    gap: 6px;
    justify-content: center;
    line-height: 1.2;
    min-height: 38px;
    padding: 8px 16px;
    transition: all 0.2s ease;
}

.document-upload-content .document-upload-actions .btn-success,
.carrier-email-modal-content .document-upload-actions .btn-success {
    background: var(--success, #22c55e);
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.2);
    color: #fff;
}

.document-upload-content .document-upload-actions .btn-success:hover,
.carrier-email-modal-content .document-upload-actions .btn-success:hover {
    background: #16a34a;
    transform: translateY(-1px);
}

.document-upload-content .document-upload-actions .btn-secondary,
.carrier-email-modal-content .document-upload-actions .btn-secondary {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--muted);
}

.document-upload-content .document-upload-actions .btn-secondary:hover,
.carrier-email-modal-content .document-upload-actions .btn-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--muted);
    color: var(--text);
    transform: translateY(-1px);
}

.public-link-create-options { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; padding: 0.8rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.public-link-create-options select { max-width: 150px; }
.new-public-link-result { margin: 14px 0; padding: 14px; border: 1px solid #3b82f6; border-radius: 9px; background: rgba(59, 130, 246, .1); }
.public-link-copy-row { display: flex; gap: 8px; margin-top: 10px; }
.public-link-copy-row input { min-width: 0; flex: 1; }
.public-link-list { display: grid; gap: 8px; margin-top: 14px; }
.public-link-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; }
.public-link-row strong,
.public-link-row span { display: block; }
.public-link-row > div > span { margin-top: 3px; color: var(--text-secondary); font-size: .82rem; }

@media (max-width: 560px) {
    .public-upload-shell { display: block; width: min(100% - 24px, 820px); padding-top: 60px; }
    .public-upload-brand { padding: 0 6px 14px; }
    .public-upload-header {
        grid-template-columns: 1fr;
        gap: 14px;
        align-items: start;
        margin-bottom: 22px;
        padding: 18px;
    }
    .public-upload-header img { width: 108px; }
    .public-upload-brand .public-upload-eyebrow { margin-top: 6px; }
    .public-document-row { align-items: stretch; flex-direction: column; }
    .public-document-actions .btn { flex: 1; text-align: center; }
    .public-link-copy-row { flex-wrap: wrap; }
    .public-link-copy-row input { flex-basis: 100%; }
     .public-link-row { align-items: flex-start; flex-direction: column; }
    .carrier-email-options { grid-template-columns: 1fr; }
    .carrier-email-wizard-options { grid-template-columns: 1fr; }
    .carrier-email-recipient-heading { align-items: flex-start; }
    .public-section-heading { align-items: stretch; flex-direction: column; gap: 10px; }
    .public-upload-file-count { align-self: flex-start; }
}
.rate-signature-shell { max-width: 1100px; }
.rate-signature-section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.rate-signature-section-heading h2 { margin-bottom:0; }
.rate-review-layout { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(290px, .9fr); align-items:start; gap:24px; }
.rate-review-layout .public-ratecon-preview { margin-top:0; }
.rate-review-layout .public-ratecon-preview:only-child { grid-column:1 / -1; }
.carrier-portal-signature-form { min-width:0; }
.rate-confirmation-frame { width:100%; height:min(72vh, 850px); min-height:520px; margin-top:18px; border:1px solid var(--border-color); border-radius:8px; background:#fff; }
.public-ratecon-preview { width:100%; max-height:72vh; overflow:auto; margin-top:18px; padding:10px; border:1px solid var(--border-color); border-radius:8px; background:#667085; box-sizing:border-box; }
.public-ratecon-preview .document-pdf-page { display:block; max-width:100%; height:auto; margin:0 auto 12px; background:#fff; box-shadow:0 2px 8px rgba(16,24,40,.2); }
.rate-signature-canvas-wrap { position:relative; width:100%; margin:8px 0 12px; border:2px solid var(--border-color); border-radius:8px; overflow:hidden; background:#fff; }
#rate-signature-canvas { display:block; width:100%; height:220px; max-width:100%; touch-action:none; overscroll-behavior:contain; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:crosshair; }
.rate-signature-canvas-wrap { touch-action:none; overscroll-behavior:contain; user-select:none; -webkit-user-select:none; }
.rate-signature-line { position:absolute; left:6%; right:6%; bottom:22px; border-top:1px solid #98a2b3; padding-top:3px; color:#667085; font-size:12px; pointer-events:none; }
.rate-signature-consent { display:flex !important; align-items:flex-start; gap:10px; margin:22px 0 !important; font-weight:400 !important; }
.rate-signature-consent input { width:20px; height:20px; flex:0 0 auto; margin-top:2px; }
.signature-drawing-active { overscroll-behavior:none !important; }
html.signature-drawing-active,
body.signature-drawing-active { overflow:hidden !important; touch-action:none !important; }
body.signature-drawing-active { position:fixed !important; left:0; right:0; width:100%; }
.rate-signature-complete { border-top:5px solid #198754; }
.document-signature-status { font-size:12px; font-weight:700; }
.document-signature-status.signed { color:#198754; }
.document-signature-status.pending { color:#9a6700; }
@media (max-width: 700px) {
    .rate-confirmation-frame { height:60vh; min-height:420px; }
    .rate-signature-canvas-wrap { position:relative; left:auto; right:auto; transform:none; contain:layout paint; }
    #rate-signature-canvas { position:relative; left:0; top:0; height:180px; min-height:180px; transform:none; }
    body.rate-signature-page:has(#rate-signature-canvas:active),
    body.public-upload-page:has(#rate-signature-canvas:active) { overscroll-behavior:none; }
    .rate-signature-section-heading { align-items:flex-start; flex-direction:column; }
    .rate-review-layout { grid-template-columns:1fr; }
}
.load-action-history-card {
    grid-column: 1 / -1;
}

.load-action-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.load-action-history-header h2,
.load-action-history-header p {
    margin: 0;
}

.load-action-history-header p {
    margin-top: .25rem;
    color: var(--text-secondary);
}

.load-action-count {
    min-width: 2rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-align: center;
    font-weight: 700;
}

.load-action-history {
    max-height: 34rem;
    overflow-y: auto;
    border-top: 1px solid var(--border-color);
}

.load-action-row {
    display: grid;
    grid-template-columns: minmax(10rem, 12rem) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.load-action-row time,
.load-action-row-content > span {
    color: var(--text-secondary);
    font-size: .85rem;
}

.load-action-row-content {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.load-action-details {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    margin: .45rem 0 0;
}

.load-action-details div {
    display: flex;
    gap: .3rem;
    min-width: 0;
    font-size: .8rem;
}

.load-action-details dt {
    color: var(--text-secondary);
    font-weight: 600;
}

.load-action-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .load-action-row {
        grid-template-columns: 1fr;
        gap: .35rem;
    }
}

/* QuickBooks sandbox connection controls */
.accounting-fragment {
    display: grid;
    gap: 1rem;
    color: var(--text);
}

.accounting-fragment > h1,
.accounting-fragment > p,
.qbo-panel h2,
.qbo-panel p {
    margin: 0;
}

.accounting-fragment > p,
.qbo-panel p {
    color: var(--muted);
}

.qbo-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 45%),
        var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    display: grid;
    gap: 1rem;
}

.qbo-panel h2 {
    color: var(--text);
}

.qbo-panel-heading,
.qbo-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.qbo-status {
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.35rem 0.7rem;
}

.qbo-status-connected {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
    color: #86efac;
}

.qbo-status-disconnected {
    background: rgba(148, 163, 184, 0.08);
    border-color: var(--border);
    color: var(--muted);
}

.qbo-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.8rem;
    margin: 0;
}

.qbo-details > div {
    min-width: 0;
}

.qbo-details dt {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.qbo-details dd {
    color: var(--text);
    margin: 0.2rem 0 0;
    overflow-wrap: anywhere;
}

.qbo-notice {
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 0.75rem 0.9rem;
}

.qbo-notice-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.25);
    color: #86efac;
}

.qbo-notice-info {
    background: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.25);
    color: #7dd3fc;
}

.qbo-notice-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

.qbo-actions {
    justify-content: flex-start;
}

.qbo-actions form {
    margin: 0;
}

.qbo-button {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    font-weight: 700;
    padding: 0.65rem 0.9rem;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.qbo-button:hover:not(:disabled) {
    background: var(--surface-hover);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    color: var(--accent-hover);
    transform: translateY(-1px);
}

.qbo-button:focus-visible,
.invoice-recipient-field input:focus-visible,
.invoice-selection-table input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.qbo-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.qbo-button-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.qbo-button-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
}

.qbo-button-danger {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

.qbo-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.qbo-table {
    border-collapse: collapse;
    width: 100%;
}

.qbo-table th,
.qbo-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.65rem;
    text-align: left;
    vertical-align: middle;
}

.qbo-table th {
    background: rgba(10, 15, 26, 0.5);
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.qbo-table tbody tr {
    transition: background var(--transition);
}

.qbo-table tbody tr:hover {
    background: var(--surface-hover);
}

.accounting-tabs {
    display: flex;
    gap: .35rem;
    width: fit-content;
    max-width: 100%;
    padding: .3rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.accounting-tab {
    color: var(--muted);
    font-weight: 700;
    padding: .58rem .9rem;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.accounting-tab:hover {
    background: var(--surface-hover);
    color: var(--accent-hover);
}

.accounting-tab-active {
    background: var(--surface-active);
    border-color: rgba(96, 165, 250, 0.3);
    color: var(--accent);
}

.accounting-tab-panel {
    display: grid;
    gap: 1rem;
}

.accounting-tab-panel-hidden {
    display: none;
}

.invoice-send-form {
    display: grid;
    gap: 1rem;
}

.invoice-send-options {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.25rem;
    background: rgba(10, 15, 26, 0.42);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin: 0;
    padding: .8rem 1rem;
}

.invoice-send-options legend,
.invoice-recipient-field {
    color: var(--text);
    font-weight: 700;
}

.invoice-send-options legend {
    margin-bottom: .4rem;
}

.invoice-send-options label {
    color: var(--text);
    font-weight: 500;
}

.invoice-send-options input,
.invoice-selection-table input[type="checkbox"] {
    accent-color: var(--accent);
}

.invoice-recipient-field {
    display: grid;
    gap: .35rem;
    max-width: 42rem;
}

.invoice-recipient-field input {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    padding: .65rem .75rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.invoice-recipient-field input::placeholder {
    color: var(--muted);
    opacity: .75;
}

.invoice-recipient-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12);
}

.invoice-recipient-field small,
.invoice-send-submit span {
    color: var(--muted);
    font-weight: 400;
}

.invoice-selection-table input[type="checkbox"] {
    height: 1.1rem;
    width: 1.1rem;
}

.qbo-table details {
    color: var(--muted);
}

.qbo-table summary {
    color: var(--accent);
    cursor: pointer;
}

.invoice-send-submit {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.carrier-verification-table td:first-child,
.carrier-verification-table td:nth-child(2),
.carrier-verification-table td:last-child {
    min-width: 10rem;
}

.carrier-verification-table td > small,
.verification-form small {
    color: var(--muted);
    display: block;
    margin-top: .25rem;
}

.verification-missing {
    color: #fca5a5;
    font-weight: 700;
}

.verification-form {
    display: grid;
    gap: .55rem;
    min-width: 15rem;
}

.verification-form label {
    color: var(--muted);
    display: grid;
    font-size: .78rem;
    gap: .25rem;
}

.verification-form select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    max-width: 18rem;
    padding: .5rem;
}

.verification-form .verification-confirm {
    align-items: center;
    color: var(--text);
    display: flex;
    font-size: .82rem;
    gap: .4rem;
}

.verification-form input[type="checkbox"] {
    accent-color: var(--accent);
    height: 1rem;
    width: 1rem;
}

.carrier-bill-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
}

.carrier-bill-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.carrier-bill-card-warning {
    border-color: rgba(245, 158, 11, .5);
}

.carrier-bill-card > header {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
}

.carrier-bill-card > header div,
.factoring-payment-warning {
    display: grid;
    gap: .2rem;
}

.carrier-bill-card > header span,
.carrier-bill-form small,
.carrier-bill-approval-form small {
    color: var(--muted);
}

.carrier-bill-form,
.carrier-bill-approval-form {
    display: grid;
    gap: .8rem;
}

.carrier-bill-fields,
.carrier-bill-amounts {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.carrier-bill-form label,
.carrier-bill-approval-form label {
    color: var(--text);
    display: grid;
    font-size: .85rem;
    font-weight: 700;
    gap: .3rem;
}

.carrier-bill-form input,
.carrier-bill-form textarea,
.carrier-bill-approval-form textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    padding: .58rem .65rem;
}

.carrier-payee-options {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: .8rem;
}

.carrier-payee-options legend {
    color: var(--text);
    font-weight: 700;
    padding: 0 .3rem;
}

.carrier-payee-options label {
    align-items: start;
    display: grid;
    font-weight: 500;
    gap: .35rem;
    grid-template-columns: auto 1fr;
}

.carrier-payee-options input {
    accent-color: var(--accent);
    margin-top: .2rem;
}

.carrier-payee-options small {
    display: block;
    grid-column: 2;
}

.factoring-payee-option,
.factoring-payment-warning {
    background: rgba(245, 158, 11, .1);
    border: 1px solid rgba(245, 158, 11, .4);
    border-radius: 6px;
    color: #fcd34d !important;
    padding: .65rem;
}

.factoring-payment-warning span {
    color: var(--text);
}

.carrier-bill-summary {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.vendor-match-choice {
    background: rgba(245, 158, 11, .08);
    border: 1px solid rgba(245, 158, 11, .45);
    border-radius: var(--radius-sm);
    display: grid;
    gap: .7rem;
    padding: .9rem;
}

.vendor-match-choice h3,
.vendor-match-choice p {
    margin: 0;
}

.vendor-match-form,
.vendor-match-form fieldset {
    display: grid;
    gap: .65rem;
}

.vendor-match-form fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.vendor-match-form legend {
    color: var(--text);
    font-weight: 700;
    padding: 0 0 .2rem;
}

.vendor-match-option {
    align-items: start;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    display: grid;
    gap: .6rem;
    grid-template-columns: auto 1fr;
    padding: .75rem;
}

.vendor-match-option:has(input:checked) {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.vendor-match-option input {
    accent-color: var(--accent);
    margin-top: .2rem;
}

.vendor-match-option span,
.vendor-match-option small {
    display: grid;
    gap: .2rem;
}

.vendor-match-option small {
    color: var(--muted);
    font-weight: 400;
}

.accounting-check-summary,
.accounting-exception-card > header,
.accounting-exception-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
}

.accounting-check-summary {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .8rem;
}

.accounting-check-summary > div,
.accounting-exception-card > header > div {
    display: grid;
    gap: .2rem;
}

.accounting-check-summary span,
.accounting-exception-card header span,
.accounting-exception-card small,
.accounting-reconciliation-table small,
.resolved-accounting-issues span,
.resolved-accounting-issues small {
    color: var(--muted);
}

.accounting-exception-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    margin-top: 1rem;
}

.accounting-exception-card {
    background: rgba(239, 68, 68, .06);
    border: 1px solid rgba(239, 68, 68, .35);
    border-radius: var(--radius-sm);
    display: grid;
    gap: .7rem;
    padding: .9rem;
}

.accounting-exception-card p {
    margin: 0;
}

.accounting-exception-actions {
    justify-content: flex-start;
}

.accounting-exception-resolution,
.paperwork-issue-report form {
    display: grid;
    gap: .6rem;
}

.accounting-exception-resolution label,
.paperwork-issue-report label {
    color: var(--text);
    display: grid;
    font-size: .85rem;
    font-weight: 700;
    gap: .3rem;
}

.accounting-exception-resolution textarea,
.paperwork-issue-report textarea,
.paperwork-issue-report select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    padding: .55rem .65rem;
}

.accounting-state {
    border-radius: 999px;
    display: inline-block;
    font-size: .76rem;
    font-weight: 800;
    padding: .25rem .5rem;
}

.accounting-state-success {
    background: rgba(34, 197, 94, .13);
    color: #86efac;
}

.accounting-state-warning {
    background: rgba(245, 158, 11, .14);
    color: #fcd34d;
}

.accounting-state-error {
    background: rgba(239, 68, 68, .14);
    color: #fca5a5;
}

.accounting-state-info {
    background: rgba(59, 130, 246, .14);
    color: #93c5fd;
}

.accounting-reconciliation-table td > small {
    display: block;
    margin-top: .3rem;
    max-width: 18rem;
}

.resolved-accounting-issues {
    display: grid;
    gap: .7rem;
    list-style: none;
    margin: .8rem 0 0;
    padding: 0;
}

.resolved-accounting-issues li {
    border-top: 1px solid var(--border);
    display: grid;
    gap: .2rem;
    padding-top: .7rem;
}

.paperwork-issue-report {
    margin-top: .7rem;
}

.paperwork-issue-report summary {
    color: var(--accent);
    cursor: pointer;
    font-weight: 700;
}

.paperwork-issue-report form {
    margin-top: .65rem;
}

.parallel-run-map-form {
    align-items: end;
    display: grid;
    gap: .8rem;
    grid-template-columns: minmax(14rem, 1fr) minmax(14rem, 1fr) auto;
}

.parallel-run-map-form label,
.parallel-run-review-form label {
    display: grid;
    font-size: .85rem;
    font-weight: 700;
    gap: .35rem;
}

.parallel-run-map-form input,
.parallel-run-map-form select,
.parallel-run-review-form textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    padding: .55rem .65rem;
}

.parallel-run-cases {
    display: grid;
    gap: 1rem;
}

.parallel-run-case {
    border-left: 4px solid var(--border);
}

.parallel-run-totals th,
.parallel-run-totals td {
    white-space: nowrap;
}

.parallel-run-review-form {
    display: grid;
    gap: .6rem;
    margin-top: .8rem;
}

.parallel-run-exclude {
    margin-top: .8rem;
}

.parallel-run-exclude summary {
    color: var(--accent);
    cursor: pointer;
    font-weight: 700;
}

@media (max-width: 800px) {
    .parallel-run-map-form {
        align-items: stretch;
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Accounting Upload / Verify Invoices workspace + Send Invoices
   --------------------------------------------------------------------------- */

.accounting-tab-primary {
    font-weight: 700;
}

.accounting-tab-secondary {
    opacity: 0.75;
    font-size: 0.9em;
}

.accounting-tab-badge {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 0.4em;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.8em;
    text-align: center;
}

.accounting-tab-badge-alert {
    background: #c0392b;
}

.ap-upload-form {
    display: grid;
    gap: 12px;
}

.ap-dropzone {
    border: 2px dashed var(--border, #94a3b8);
    border-radius: 10px;
    padding: 24px;
    display: grid;
    gap: 8px;
    justify-items: center;
    text-align: center;
    cursor: pointer;
}

.ap-dropzone-active {
    border-color: var(--accent);
    background: rgba(23, 105, 170, 0.06);
}

.ap-file-list {
    margin: 0;
    padding-left: 20px;
}

.ap-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.ap-page-tile {
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px;
    padding: 8px;
    display: grid;
    gap: 6px;
    font-size: 0.85em;
}

.ap-page-tile:has(.ap-page-check:checked) {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(23, 105, 170, 0.25);
}

.ap-derived-form,
.ap-invoice-form {
    display: grid;
    gap: 12px;
    margin: 12px 0;
}

.ap-derived-fields,
.ap-invoice-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.ap-derived-card {
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px;
    padding: 12px;
    margin: 10px 0;
}

.ap-derived-card header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ap-derived-pages {
    font-size: 0.85em;
    color: var(--muted, #475569);
}

.ap-load-table input[type="number"] {
    width: 110px;
}

.ap-invoice-detail .ap-load-block {
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 12px 0;
}

.ap-classify-grid {
    display: grid;
    gap: 8px;
}

.ap-classify-row {
    display: grid;
    grid-template-columns: 140px repeat(3, auto) 1fr auto;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    padding: 6px 0;
}

.ap-classify-name {
    font-weight: 700;
}

.ap-detail-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.ap-detail-actions form {
    display: grid;
    gap: 8px;
    align-content: start;
}

.ap-issue-list {
    display: grid;
    gap: 8px;
}

.ap-issue-list .inline-form {
    display: inline;
}

.ar-send-form {
    display: grid;
    gap: 14px;
}

.ar-preview {
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px;
    padding: 14px;
    display: grid;
    gap: 10px;
}

.ar-preview label {
    display: grid;
    gap: 4px;
}

.ar-attachments {
    display: grid;
    gap: 4px;
}

.ar-group-note {
    font-weight: 700;
    color: var(--accent);
}

/* Work-item queue + three-column workspace */
.ap-item-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.ap-item-card {
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px;
    padding: 10px 12px;
    display: grid;
    gap: 4px;
    text-decoration: none;
    color: inherit;
}

.ap-item-card:hover,
.ap-item-card-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(23, 105, 170, 0.2);
}

.ap-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.ap-item-actions {
    display: flex;
    gap: 8px;
}

.ap-columns {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(280px, 1.2fr) minmax(280px, 1fr);
    gap: 16px;
    align-items: start;
    margin-top: 14px;
}

@media (max-width: 1100px) {
    .ap-columns {
        grid-template-columns: 1fr;
    }
}

.ap-col {
    min-width: 0;
}

.ap-col-hint {
    color: var(--muted, #475569);
    font-size: 0.85em;
}

.ap-box {
    border: 2px dashed var(--border, #94a3b8);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 8px 0;
    min-height: 64px;
}

.ap-box-filled {
    border-style: solid;
}

.ap-box-over {
    border-color: var(--accent);
    background: rgba(23, 105, 170, 0.06);
}

.ap-box h4 {
    margin: 0 0 6px;
    font-size: 0.9em;
}

.ap-box-pages {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: 0.85em;
}

.ap-box-drop {
    font-size: 0.75em;
    color: var(--muted, #64748b);
    text-align: center;
}

.ap-tray-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 70vh;
    overflow: auto;
    padding: 4px;
}

.ap-tray-tile {
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px;
    padding: 6px;
    display: grid;
    gap: 4px;
    cursor: grab;
    background: var(--panel, #fff);
}

.ap-tray-tile-dragging {
    opacity: 0.5;
}

.ap-tray-frame {
    height: 150px;
    overflow: hidden;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 4px;
    background: #f8fafc;
}

.ap-tray-frame canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0;
    pointer-events: none;
}

.ap-preview-button { display: block; width: 100%; padding: 0; cursor: zoom-in; color: #475569; }
.ap-tray-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ap-box-pages { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.ap-box-pages li { min-width: 0; padding: 5px; border: 1px solid var(--border); border-radius: 6px; }
.ap-box-pages li > span { display: block; overflow-wrap: anywhere; font-size: 12px; margin: 4px 0; }
.ap-box-pages .ap-tray-frame { height: 100px; }
.ap-page-pending { opacity: .65; }
.ap-box[aria-busy="true"] { border-color: var(--accent); }
.ap-box[aria-busy="true"] .ap-page-btn { opacity: .45; cursor: wait; }
.ap-add-selected { margin-top: 6px; padding: 4px 8px; cursor: pointer; }
.ap-workspace-status { min-height: 1.5em; padding: 8px 12px; border-radius: 6px; background: var(--panel); }
.ap-error { color: var(--danger, #b42318); }
.ap-file-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.ap-preview-dialog { width: min(900px, 92vw); max-height: 90vh; border: 1px solid var(--border); border-radius: 10px; }
.ap-preview-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.ap-preview-dialog canvas { display: block; width: 100%; height: auto; margin-top: 8px; }
.ap-page-actions { display: flex; gap: 6px; justify-content: flex-end; }
.ap-box-pages .ap-page-actions { gap: 3px; }
.ap-box-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ap-box-actions > button { flex: 1; min-width: 0; }
.ap-copy-selected { border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; font-size: 12px; padding: 6px; cursor: pointer; margin-top: 6px; }
.ap-box-pages .ap-page-btn { width: 27px; height: 27px; flex-shrink: 0; }
.ap-box-pages [data-page-row] { cursor: grab; user-select: none; }
.ap-box-pages [data-page-row]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ap-load-more { border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--panel); padding: 6px; cursor: pointer; }
.ap-workspace-status:empty { visibility: hidden; }
.ap-col-tray > [data-return-to-tray] { flex-shrink: 0; margin: 0 0 8px; }
.ap-page-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 5px; border: 1px solid var(--border, #cbd5e1); border-radius: 50%; background: var(--panel, white); color: var(--text); cursor: pointer; }
.ap-page-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ap-page-btn-remove { color: #b42318; }
.ap-page-btn:focus-visible, .ap-preview-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-back-link { display: inline-block; margin-bottom: 8px; }
.ap-box { height: 240px; display: flex; flex-direction: column; box-sizing: border-box; }
.ap-box-pages { flex: 1; min-height: 0; overflow-y: auto; align-content: start; overscroll-behavior: contain; }
.ap-box-pages li { align-self: start; }
.ap-box h4, .ap-box-drop, .ap-add-selected { flex-shrink: 0; }
/* Work items own the viewport; scrolling belongs to the panels, never the shell. */
html:has(.accounting-item-page), body:has(.accounting-item-page) { height: 100dvh; min-height: 0; overflow: hidden; }
body:has(.accounting-item-page) > nav { flex-shrink: 0; }
body:has(.accounting-item-page) > .app-layout { flex: 1; min-height: 0; overflow: hidden; }
body:has(.accounting-item-page) > .app-footer { display: none; }
.content:has(.accounting-item-page) { min-height: 0; overflow: hidden; padding: 16px; display: flex; flex-direction: column; }
.accounting-item-page { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.accounting-item-page .qbo-notice { flex: none; margin: 0; padding: 8px 12px; }
.accounting-item-page .ap-item { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.accounting-item-page .ap-item-head { flex: none; align-items: center; gap: 8px; }
.accounting-item-page .ap-item-head > div:first-child { min-width: 0; flex: 1; }
.accounting-item-page .ap-item-head h2 { margin: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accounting-item-page .ap-item-head h2 small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.accounting-item-page .ap-item-head p { margin: 0; font-size: 12px; }
.accounting-item-page .ap-back-link { margin-bottom: 4px; font-size: 13px; }
.accounting-item-page .ap-item-actions { flex-shrink: 0; }
.accounting-item-page .ap-item-actions form { margin: 0; }
.accounting-item-page .ap-item-actions .qbo-button { padding: 8px 12px; font-size: 13px; min-height: 36px; }
.accounting-item-page .ap-workspace-status { flex: none; margin: 0; padding: 7px 10px; font-size: 12px; height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.accounting-item-page .ap-columns { flex: 1; min-height: 0; overflow: hidden; margin: 0; gap: 12px; align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.1fr); }
.accounting-item-page .ap-col { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--panel); }
.accounting-item-page .ap-col > h3 { position: sticky; top: -12px; z-index: 2; background: var(--panel); margin: -12px -12px 10px; padding: 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.accounting-item-page .ap-col-hint { margin: 0 0 10px; font-size: 12px; }
.accounting-item-page .ap-col-tray, .accounting-item-page .ap-col-entry { display: flex; flex-direction: column; overflow: hidden; }
.accounting-item-page .ap-col-tray > h3, .accounting-item-page .ap-col-entry > h3 { flex-shrink: 0; }
.accounting-item-page .ap-entry-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 12px 2px; }
.accounting-item-page .ap-entry-actions { flex: none; border-top: 1px solid var(--border); padding-top: 10px; }
.accounting-item-page .ap-entry-actions button { width: 100%; min-height: 40px; }
.ap-draft-state { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.ap-draft-state .qbo-button { width: auto !important; min-height: 28px !important; padding: 4px 8px; }
.ap-draft-state [hidden] { display: none; }
.ap-draft-issues { list-style: none; margin: 0 0 8px; padding: 0; max-height: 90px; overflow: auto; }
.ap-draft-issues:empty { display: none; }
.ap-draft-issues button { background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; font: inherit; font-size: 12px; padding: 4px 0; min-height: 24px !important; }
.ap-draft-issues button:hover { text-decoration: underline; }
.ap-review-dialog { width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); box-sizing: border-box; padding: 0; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--panel); }
.ap-review-dialog[open] { display: flex; flex-direction: column; }
.ap-review-dialog::backdrop { background: rgb(0 0 0 / 65%); }
.ap-review-dialog header, .ap-review-dialog footer { flex: none; padding: 16px; }
.ap-review-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
.ap-review-dialog h2, .ap-review-dialog h3 { margin: 0; }
.ap-review-body { min-height: 0; overflow: auto; padding: 16px; }
.ap-review-body dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 20px; margin: 0 0 20px; }
.ap-review-body dt { color: var(--muted); }
.ap-review-body dd { margin: 0; overflow-wrap: anywhere; }
.ap-review-body li { margin-bottom: 8px; overflow-wrap: anywhere; }
.ap-review-dialog footer { border-top: 1px solid var(--border); }
.ap-review-dialog footer p { font-size: 12px; color: var(--muted); }
.ap-review-confirm { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.ap-review-dialog [data-invoice-approve] { width: 100%; }
.accounting-item-page .ap-tray-grid { flex: 1; min-height: 0; max-height: none; overflow-y: auto; align-content: start; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); padding: 4px; }
.accounting-item-page .ap-box { height: 260px; background: var(--bg); margin: 0 0 10px; }
.accounting-item-page .ap-box-pages .ap-tray-frame { height: 75px; }
.accounting-item-page .ap-box-pages li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.accounting-item-page .ap-box-filled .ap-box-drop { display: none; }
.accounting-item-page .ap-add-selected, .ap-select-page { border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; font-size: 12px; padding: 6px; cursor: pointer; }
.ap-select-page[aria-pressed=true] { color: var(--accent); border-color: var(--accent); }
.accounting-item-page .ap-add-selected:hover { border-color: var(--accent); }
.accounting-item-page .ap-invoice-form { margin: 0; gap: 14px; }
.accounting-item-page .ap-invoice-form label { display: grid; gap: 5px; min-width: 0; font-size: 12px; color: var(--muted); }
.accounting-item-page .ap-invoice-form input:not([type=checkbox]):not([type=hidden]),
.accounting-item-page .ap-invoice-form select { width: 100%; min-width: 0; height: 38px; box-sizing: border-box; padding: 7px 9px; margin: 0; font: inherit; font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color-scheme: dark; }
.accounting-item-page .ap-invoice-form input:focus, .accounting-item-page .ap-invoice-form select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.accounting-item-page .ap-entry-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; gap: 12px; }
.accounting-item-page .ap-entry-fields label:last-child { grid-column: 1 / -1; }
.accounting-item-page .ap-load-cards { margin: 0; max-height: 200px; }
.accounting-item-page .ap-load-cards p, .accounting-item-page .ap-invoice-form > p { margin: 0; font-size: 12px; }
.accounting-item-page .ap-invoice-form .ap-load-card { grid-template-columns: auto minmax(0, 1fr); align-items: center; color: var(--text); }
.accounting-item-page .ap-load-card-amount { grid-column: 2; }
.accounting-item-page .ap-load-card-main { overflow-wrap: anywhere; }
.ap-panel-tabs { display: none; }
.ap-tray-tile { user-select: none; }
.ap-drag-ghost { position: fixed; z-index: 10000; pointer-events: none; background: var(--accent); color: var(--bg); border-radius: 8px; padding: 8px 14px; box-shadow: var(--shadow-sm); font-size: 13px; }
.ap-preview-dialog { padding: 0; background: var(--panel); color: var(--text); }
.ap-preview-dialog[open] { display: flex; flex-direction: column; }
.ap-preview-dialog > [data-preview-close] { flex: none; align-self: flex-end; margin: 10px; }
.ap-preview-dialog [data-preview-body] { min-height: 0; overflow: auto; overscroll-behavior: contain; background: #fff; }
.ap-preview-dialog canvas { margin: 0; }

/* Final customer email review: fixed frame with a scrollable message body. */
.ar-send-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); color: var(--text); box-shadow: 0 24px 90px #0006; }
.ar-send-dialog[open] { display: flex; flex-direction: column; }
.ar-send-dialog::backdrop { background: #07111dcc; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ar-send-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px; border-bottom: 1px solid var(--border); }
.ar-send-eyebrow { color: #60a5fa; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.ar-send-header h2 { margin: 6px 0; font-size: 23px; }
.ar-send-header p, .ar-send-footer p { color: var(--muted); margin: 0; font-size: 13px; }
.ar-send-close { border: 1px solid var(--border); background: transparent; color: inherit; width: 34px; height: 34px; border-radius: 50%; font-size: 24px; cursor: pointer; flex: none; }
.ar-send-body { overflow: auto; min-height: 0; padding: 24px; overscroll-behavior: contain; }
.ar-send-summary { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.ar-send-summary span, .ar-send-summary small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.ar-send-summary strong { display: block; font-size: 20px; margin-bottom: 5px; overflow-wrap: anywhere; }
.ar-send-summary > div:last-child { text-align: right; flex-shrink: 0; }
.ar-email-card { background: #fff; color: #24334a; border: 1px solid #dce4ed; border-radius: 12px; overflow: hidden; }
.ar-email-card dl { margin: 0; padding: 18px 22px; background: #f6f8fb; border-bottom: 1px solid #e2e8f0; }
.ar-email-card dl > div { display: flex; gap: 16px; margin: 5px 0; }
.ar-email-card dt { width: 55px; flex: none; color: #64748b; font-size: 13px; }
.ar-email-card dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; }
.ar-email-message { padding: 24px 22px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: 14px; }
.ar-send-attachments h3 { font-size: 13px; margin: 22px 0 10px; }
.ar-send-attachments ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.ar-send-attachments li { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 12px; overflow-wrap: anywhere; }
.ar-send-footer { border-top: 1px solid var(--border); padding: 18px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.ar-send-footer > div { display: flex; gap: 10px; }
.ar-send-error { color: #ef4444; }
.ar-send-form [hidden] { display: none !important; }
.ar-selection-tools { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin: 20px 0; }
.ar-search-label { display: grid; gap: 7px; font-size: 12px; color: var(--muted); min-width: min(320px, 100%); }
.ar-search-label input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); color: var(--text); padding: 12px; font: inherit; font-size: 14px; }
.ar-selection-tools > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; }
.ar-selection-tools [data-ar-customer-filter] { color: #60a5fa; }
.ar-load-picker { max-height: 54vh; overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.ar-load-picker th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.ar-ready-table input[type=checkbox] { width: 18px; height: 18px; accent-color: #60a5fa; cursor: pointer; }
.ar-ready-table .ar-row-selected { background: #60a5fa15; }
.ar-selection-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0 0; }
.ar-selection-bar > div { display: grid; gap: 5px; }
.ar-selection-bar span { color: var(--muted); font-size: 13px; }
.ar-selection-bar [data-ar-open] { min-width: 130px; width: auto; margin: 0; }
.ar-package-dialog { width: min(1320px, calc(100vw - 32px)); height: min(900px, calc(100dvh - 32px)); }
.ar-package-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(290px, .85fr) minmax(380px, 1.3fr); overflow: auto; overscroll-behavior: contain; align-items: start; }
.ar-compose, .ar-package-documents { overflow: visible; min-height: 0; min-width: 0; padding: 24px; }
.ar-compose { border-right: 1px solid var(--border); }
.ar-package-body h3 { display: flex; gap: 10px; align-items: center; font-size: 13px; margin: 0 0 10px; color: var(--muted); }
.ar-package-body h3 span { color: var(--text); font-size: 16px; }
.ar-muted { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 8px 0 18px; }
.ar-compose-paper { background: white; color: #24334a; border-radius: 12px; overflow: hidden; margin: 18px 0 10px; border: 1px solid #dce4ed; }
.ar-compose-paper label { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 8px; align-items: center; margin: 0; padding: 12px 16px; font-size: 12px; color: #64748b; border-bottom: 1px solid #e2e8f0; }
.ar-compose-paper input, .ar-compose-paper textarea { font: inherit; font-size: 14px; width: 100%; box-sizing: border-box; background: white; color: #24334a; border: 0; border-radius: 4px; padding: 6px; margin: 0; }
.ar-compose-paper input:focus, .ar-compose-paper textarea:focus { outline: 2px solid #93c5fd; outline-offset: 2px; }
.ar-compose-paper .ar-message-label { display: block; padding: 16px; border: 0; }
.ar-compose-paper textarea { min-height: 190px; resize: vertical; line-height: 1.7; }
.ar-invoice-included, .ar-document-options label { display: flex; align-items: center; gap: 10px; padding: 12px; margin: 8px 0; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; overflow-wrap: anywhere; }
.ar-invoice-included { flex-wrap: wrap; color: #93c5fd; }
.ar-invoice-included span { color: var(--muted); font-size: 11px; }
.ar-document-options input { accent-color: #60a5fa; width: 17px; height: 17px; flex-shrink: 0; }
.ar-document-options label:has(input:not(:checked)) { opacity: .6; }
.ar-doc-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ar-count { border: 1px solid var(--border); border-radius: 20px; padding: 5px 9px; font-size: 11px; white-space: nowrap; }
.ar-document-card { background: #080f1c; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.ar-document-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ar-document-previews .ar-document-card { margin-bottom: 0; }
.ar-document-previews .ar-document-card:has(.ar-page-expanded) { grid-column: 1 / -1; }
.ar-document-card h4 { margin: 0; padding: 14px 16px; font-size: 13px; background: var(--panel); overflow-wrap: anywhere; }
.ar-document-pages { padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ar-document-pages > img, .ar-document-pages figure:only-child, .ar-document-pages .ar-page-expanded { grid-column: 1 / -1; }
.ar-page-toggle { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; background: transparent; }
.ar-page-expanded .ar-page-toggle { cursor: zoom-out; }
.ar-page-toggle:focus-visible { outline: 3px solid #60a5fa; outline-offset: 4px; }
.ar-ready-table [data-ar-row] { cursor: pointer; }
.ar-document-pages figure { margin: 0 0 16px; }
.ar-document-pages canvas, .ar-document-pages img { display: block; width: 100%; height: auto; background: white; border-radius: 3px; }
.ar-document-pages canvas { width: auto; max-width: 100%; max-height: 360px; object-fit: contain; margin: auto; }
.ar-document-pages .ar-page-expanded canvas { width: 100%; max-height: none; }
.ar-document-card h4 { position: sticky; top: -24px; z-index: 1; }
.ar-document-pages figcaption { padding: 9px 0 0; text-align: center; font-size: 11px; color: #94a3b8; }
.ar-package-dialog .ar-send-footer { flex-shrink: 0; }
.ar-legacy { margin-top: 24px; }
.ar-legacy > summary { cursor: pointer; color: var(--muted); padding: 4px; }
@media (max-width: 760px) {
  .ar-document-previews { grid-template-columns: 1fr; }
  .ar-package-body { display: block; overflow: auto; }
  .ar-compose, .ar-package-documents { overflow: visible; padding: 16px; }
  .ar-compose { border-right: 0; border-bottom: 1px solid var(--border); }
  .ar-package-dialog .ar-send-header { padding: 16px; }
  .ar-package-dialog .ar-send-header h2 { font-size: 19px; }
  .ar-package-dialog .ar-send-footer p { display: none; }
}
@media (max-width: 600px) { .ar-send-header, .ar-send-body, .ar-send-footer { padding: 16px; } .ar-send-footer > div { width: 100%; } .ar-send-footer button { flex: 1; } .ar-send-summary strong { font-size: 17px; } }
@media (max-width: 1050px) {
    .content:has(.accounting-item-page) { padding: 8px; }
    .accounting-item-page .ap-item-head { align-items: flex-start; }
    .accounting-item-page .ap-item-actions { flex-wrap: wrap; gap: 4px; }
    .accounting-item-page .ap-item-actions .qbo-button { font-size: 11px; padding: 6px 8px; }
    .accounting-item-page .ap-columns { grid-template-columns: minmax(0, 1fr); }
    .ap-panel-tabs { flex: none; display: flex; gap: 4px; padding: 3px; background: var(--panel); border-radius: 8px; }
    .ap-panel-tabs button { flex: 1; min-width: 0; border: 0; border-radius: 6px; padding: 8px 4px; font: inherit; font-size: 12px; background: transparent; color: var(--muted); cursor: pointer; }
    .ap-panel-tabs button[aria-selected=true] { background: var(--accent); color: var(--bg); font-weight: 600; }
    .ap-item:not([data-active-panel=documents]) .ap-col-boxes,
    .ap-item:not([data-active-panel=pages]) .ap-col-tray,
    .ap-item:not([data-active-panel=details]) .ap-col-entry { display: none; }
}
@media (max-width: 600px) {
    .accounting-item-page .ap-item-head { display: grid; grid-template-columns: minmax(0, 1fr); }
    .accounting-item-page .ap-item-actions { justify-content: flex-end; }
    .accounting-item-page .ap-item-head h2 { font-size: 15px; }
    .accounting-item-page .ap-back-link { white-space: nowrap; }
}

.ap-tray-label {
    font-size: 0.72em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-entry-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.ap-load-cards {
    display: grid;
    gap: 8px;
    margin: 10px 0;
    max-height: 320px;
    overflow: auto;
}

[data-carrier-results][hidden] { display: none; }
[data-carrier-results] button {
    background: var(--surface, #111827);
    text-align: left;
    width: 100%;
    font: inherit;
}
[data-carrier-results] button:hover,
[data-carrier-results] button:focus-visible { border-color: var(--accent); }

.ap-load-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
}

.ap-load-card-on {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(23, 105, 170, 0.2);
}

.ap-load-card-main {
    display: grid;
}

.ap-load-card-main small {
    color: var(--muted, #475569);
}

.ap-load-card-amount input {
    width: 110px;
}

.load-accounting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.load-accounting-grid h3 {
    margin: 0 0 6px;
    font-size: 0.95em;
    text-transform: uppercase;
    color: var(--muted, #475569);
}

/* Carrier driver and dispatcher management */
.carrier-contact-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.carrier-contact-heading h2,
.carrier-contact-heading .eyebrow {
    margin: 0;
}

.carrier-view .carrier-contact-row {
    cursor: default;
    outline: none;
}

.carrier-view .carrier-contact-row:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.carrier-view .carrier-contact-row .party-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

.carrier-view .carrier-contact-row .party-header h3 {
    margin: 0;
    padding: 0;
    border: 0;
}

.carrier-view .carrier-contact-row .driver-details-view {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px 16px;
    margin: 0;
}

.carrier-view .carrier-contact-row .driver-details-view > div {
    min-width: 0;
    border: 0;
}

.carrier-view .carrier-contact-row .driver-details-view dd {
    overflow-wrap: anywhere;
}

.carrier-view .carrier-contact-row.editing {
    border-color: var(--accent);
}

.carrier-view .driver-remove-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.carrier-view .driver-remove-section[hidden],
.carrier-view .remove-confirmation[hidden] {
    display: none;
}

.carrier-view .remove-confirmation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--danger);
    font-weight: 700;
}

.row-edit-error {
    min-height: 1.2em;
    margin: 8px 0;
    color: var(--danger);
}

.carrier-email-documents {
    margin: 16px 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.carrier-email-documents-heading,
.carrier-email-document-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.carrier-email-documents-heading p,
.document-upload-save-options p {
    margin: 4px 0 0;
    color: var(--muted);
}

.carrier-email-document-row {
    padding: 10px 0;
    border-top: 1px solid var(--border);
}

.carrier-email-document-row label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.carrier-email-document-row label span {
    display: grid;
}

.carrier-email-document-row small {
    color: var(--muted);
}

.document-upload-save-options {
    display: grid;
    gap: 12px;
}

.document-save-location-options {
    display: grid;
    gap: 8px;
    min-width: 0;
    max-height: 190px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border: 0;
}

.document-save-location-options legend {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.9rem;
}

.document-save-location-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}

.document-save-location-option:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.document-save-location-option span {
    display: grid;
    min-width: 0;
}

.document-save-location-option small,
.document-save-location-empty {
    color: var(--muted);
}

.document-library-heading,
.document-library-row,
.library-document-preview {
    display: flex;
    align-items: center;
}

.document-library-heading {
    justify-content: space-between;
    gap: 16px;
}

.document-library-heading h2,
.document-library-heading p {
    margin: 0;
}

.document-library-list {
    margin-top: 12px;
}

.document-library-row {
    border-top: 1px solid var(--border);
}

.library-document-preview {
    width: 100%;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.library-document-preview strong {
    color: var(--accent);
}

.library-document-preview span {
    color: var(--muted);
    font-size: .85rem;
}

.carrier-contact-empty {
    margin: 0;
    color: var(--muted);
}

.carrier-contact-modal {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

@media (max-width: 780px) {
    .carrier-view .container,
    .carrier-view.load-view .container {
        grid-template-columns: minmax(0, 1fr);
    }

    .carrier-view .driver-form-grid,
    .carrier-view .driver-inline-edit-form .driver-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .carrier-contact-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Personal dashboard — compact, flat surfaces and a focused card editor. */
.dc-dashboard, .dc-editor { color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.5; }
.dc-dashboard *, .dc-editor * { box-sizing: border-box; }
.dc-dashboard [hidden], .dc-editor [hidden] { display: none !important; }
.dc-dashboard { max-width: 1280px; margin: 8px auto 0; }
.dc-dashboard .dc-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 34px; text-align: left; }
.dc-page-heading h1 { text-align: left; margin: 0; font-size: 28px; font-weight: 650; letter-spacing: -.7px; line-height: 1.25; color: var(--text); }
.dc-icon { width: 16px; height: 16px; display: inline-block; flex: none; vertical-align: middle; }
.dc-dashboard .dc-button, .dc-editor .dc-button { display: inline-flex; width: auto; flex: none; align-items: center; justify-content: center; gap: 7px; min-height: 38px; margin: 0; padding: 8px 13px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.25; text-decoration: none; cursor: pointer; box-shadow: none; transition: background .15s, border-color .15s, color .15s; }
.dc-dashboard .dc-button:hover, .dc-editor .dc-button:hover { background: var(--surface-hover); border-color: var(--muted); }
.dc-dashboard .dc-button-primary, .dc-editor .dc-button-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.dc-dashboard .dc-button-primary:hover, .dc-editor .dc-button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.dc-dashboard .dc-button-small { min-height: 32px; padding: 6px 9px; font-size: 11px; }
.dc-dashboard .dc-button-icon, .dc-editor .dc-button-icon { width: 32px; min-height: 32px; padding: 7px; }
.dc-dashboard .dc-remove-button { background: transparent; border-color: transparent; color: var(--muted); }
.dc-dashboard .dc-remove-button:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: #fca5a5; border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.dc-dashboard .dc-button-danger, .dc-editor .dc-button-danger { background: #321b23; color: #fca5a5; border-color: #653039; }
.dc-dashboard .dc-button-danger:hover, .dc-editor .dc-button-danger:hover { background: #44212b; border-color: #f87171; }
.dc-dashboard button:disabled, .dc-editor button:disabled { opacity: .42; cursor: not-allowed; }
.dc-dashboard :is(button, a, [tabindex]):focus-visible, .dc-editor :is(button, input, select, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dc-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 13px; margin-bottom: 18px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.dc-section-heading > span:first-child { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 600; }
.dc-section-heading .dc-icon { color: var(--muted); width: 14px; height: 14px; }
.dc-dashboard .dashboard-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 408px)); align-items: start; gap: 18px; margin: 0; }
.dc-dashboard .dashboard-load-card { min-width: 0; width: 100%; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: none; }
.dc-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 14px 14px; margin: 0; text-align: left; }
.dc-card-heading-text { min-width: 0; }
.dc-card-heading h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; letter-spacing: -.15px; color: var(--text); }
.dc-card-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.dc-card-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.dc-table-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.dc-load-table { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; font-size: 12px; text-align: left; }
.dc-load-table th { padding: 8px 12px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; background: var(--panel); border: 0; border-block: 1px solid var(--border); }
.dc-load-table td { height: 43px; padding: 9px 12px; color: var(--text); border: 0; border-bottom: 1px solid var(--border-subtle); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.dc-load-table[data-column-count="5"] :is(th, td), .dc-load-table[data-column-count="4"] :is(th, td) { padding-left: 6px; padding-right: 6px; }
.dc-load-table[data-column-count="5"] td, .dc-load-table[data-column-count="4"] td { font-size: 11px; }
.dc-load-table tbody tr:last-child td { border-bottom: 0; }
.dc-load-table tr[data-load-url] { cursor: pointer; }
.dc-load-table tr[data-load-url]:hover td, .dc-load-table tr:focus-within td { background: var(--surface-hover); }
.dc-load-table a { color: var(--text); font-weight: 500; text-decoration: none; }
.dc-load-table a:hover { color: var(--accent); text-decoration: underline; }
.dc-cell-value { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dc-load-table .dc-open-column { width: 28px; padding: 0 10px 0 0; text-align: right; }
.dc-open-column a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 30px; color: var(--muted); }
.dc-open-column .dc-icon { width: 13px; height: 13px; }
.dc-status { max-width: 100%; overflow: hidden; display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 4px; background: #1b293c; color: #b5cff1; font-size: 10px; line-height: 1.3; white-space: nowrap; }
.dc-status::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.dc-status[data-status="delivered"] { background: #172e29; color: #91cbb4; }
.dc-status[data-status="new"] { background: #272737; color: #c3bfdf; }
.dc-status[data-status="cancelled"] { background: #30222b; color: #d8a5b2; }
.dc-tracking { color: var(--muted); }
.dc-tracking.is-active { color: #91cbb4; }
.dc-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; margin: 0; border-top: 1px solid var(--border); font-size: 10px; color: var(--muted); background: transparent; }
.dc-card-footer a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 500; text-decoration: none; }
.dc-card-footer a:hover { color: var(--accent); }
.dc-card-footer .dc-icon { width: 13px; height: 13px; }
.dc-dashboard .dc-empty { height: 148px; padding: 24px; text-align: center; white-space: normal; }
.dc-empty strong, .dc-empty > span { display: block; margin-bottom: 5px; }
.dc-empty > span { color: var(--muted); }
.dc-text-button { width: auto; padding: 3px 0; margin: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 11px; cursor: pointer; }
.dc-text-button:hover { text-decoration: underline; }
.dc-remove-confirm { padding: 14px; border-top: 1px solid #653039; background: #1e1721; font-size: 12px; }
.dc-remove-confirm > p { margin: 0 0 3px; font-weight: 600; }
.dc-remove-confirm > span { color: var(--muted); font-size: 11px; }
.dc-remove-confirm > div { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.dc-remove-confirm [role="alert"] { color: #fca5a5; margin-top: 10px; font-weight: 400; }
.dc-board-empty { padding: 36px 24px; border: 1px dashed var(--border); border-radius: 10px; text-align: center; color: var(--muted); }
.dc-board-empty > .dc-icon { width: 24px; height: 24px; }
.dc-board-empty h2 { color: var(--text); font-size: 15px; }
.dc-board-empty p { font-size: 12px; }
.dc-dashboard-status { min-height: 20px; margin: 16px 0 0; color: var(--accent); font-size: 12px; }
.dc-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Native dialog keeps focus inside the editor and the underlying page inert. */
html.dc-editor-open { overflow: hidden; }
#dashboard-card-editor { width: min(600px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; margin: auto; border: 1px solid #334155; border-radius: 12px; background: var(--card); color: var(--text); overflow: hidden; box-shadow: none; color-scheme: dark; }
#dashboard-card-editor[open] { display: flex; }
#dashboard-card-editor::backdrop { background: rgb(3 7 14 / 76%); backdrop-filter: none; }
.dc-editor-form { display: flex; flex-direction: column; width: 100%; max-height: calc(100dvh - 50px); min-width: 0; margin: 0; padding: 0; gap: 0; }
.dc-editor-heading { display: flex; flex: none; align-items: center; gap: 12px; margin: 0; padding: 20px 24px 18px; background: var(--card); text-align: left; }
.dc-editor-heading-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: var(--panel); }
.dc-editor-heading h2 { margin: 0; color: var(--text); font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.dc-editor-heading p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.dc-editor-heading > button { margin-left: auto !important; color: var(--muted) !important; border-color: transparent !important; background: transparent !important; }
.dc-editor-tabs { display: flex; flex: none; gap: 24px; padding: 0 24px; border-bottom: 1px solid var(--border); }
.dc-editor-tabs [role="tab"] { display: inline-flex; width: auto; align-items: center; gap: 7px; padding: 11px 0; margin: 0 0 -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); background: transparent; cursor: pointer; }
.dc-editor-tabs [aria-selected="true"] { border-bottom-color: var(--accent); color: var(--text); }
.dc-filter-count { min-width: 17px; padding: 0 5px; border-radius: 4px; background: var(--panel); border: 1px solid var(--border); font-size: 10px; line-height: 17px; color: var(--muted); }
.dc-editor-body { height: min(580px, calc(100dvh - 220px)); overflow-y: auto; min-height: 0; padding: 22px 24px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.dc-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; color: var(--text); font-size: 12px; font-weight: 500; }
.dc-editor .dc-field input, .dc-editor .dc-field select { width: 100%; min-width: 0; min-height: 39px; margin: 0; padding: 9px 11px; border: 1px solid #334155; border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; font-size: 12px; font-weight: 400; line-height: 1.5; box-shadow: none; transition: border-color .15s; }
.dc-editor .dc-field select { padding-right: 26px; }
.dc-editor .dc-field input::placeholder { color: #8492a6; opacity: 1; }
.dc-editor .dc-field :is(input, select):focus { border-color: var(--accent); }
.dc-starter-cards { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.dc-starter-cards p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.dc-column-section { margin-top: 23px; }
.dc-field-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.dc-field-heading h3 { margin: 0; color: var(--text); font-size: 12px; font-weight: 600; }
.dc-field-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.dc-column-count { padding: 3px 7px; border-radius: 5px; background: var(--panel); color: var(--muted); border: 1px solid var(--border); font-size: 11px; white-space: nowrap; }
.dc-selected-columns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; min-height: 32px; }
.dc-selected-column { position: relative; touch-action: none; user-select: none; cursor: grab; display: flex; align-items: center; gap: 1px; min-height: 30px; padding: 3px 4px 3px 8px; border: 1px solid #344862; border-radius: 5px; background: #19283c; color: #c6d9f1; font-size: 11px; }
.dc-selected-column > .dc-icon { width: 12px; height: 14px; margin-right: 4px; color: var(--muted); }
.dc-selected-column.is-dragging { opacity: .4; }
.dc-selected-column.dc-drop-before::before, .dc-selected-column.dc-drop-after::after { content: ''; position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--accent); }
.dc-selected-column.dc-drop-before::before { left: -5px; }
.dc-selected-column.dc-drop-after::after { right: -5px; }
.dc-editor .dc-drag-ghost { position: fixed; z-index: 1; pointer-events: none; margin: 0; opacity: 1; border-color: var(--accent); cursor: grabbing; }
.dc-selected-column:active { cursor: grabbing; }
.dc-selected-column > span { margin-right: 4px; }
.dc-editor .dc-chip-button { display: inline-grid; place-items: center; width: 24px; height: 26px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #a6bad4; cursor: pointer; }
.dc-chip-button .dc-icon { width: 12px; height: 12px; }
.dc-editor .dc-chip-button:hover { background: #2a3d57; color: white; }
.dc-editor .dc-chip-button:disabled { opacity: .22; }
.dc-column-search { margin-bottom: 10px; }
.dc-column-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; max-height: 166px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #334155 transparent; padding: 3px; margin: -3px; }
.dc-column-picker > label { display: flex; align-items: center; gap: 7px; min-height: 35px; margin: 0; padding: 7px 9px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); font-size: 11px; cursor: pointer; position: relative; }
.dc-column-picker > label:hover { background: var(--surface-hover); border-color: #40516a; }
.dc-column-picker > label:has(:checked) { background: #18263a; color: #c6d9f1; border-color: #344862; }
.dc-column-picker > label:has(:disabled):not(:has(:checked)) { opacity: .45; cursor: not-allowed; }
.dc-column-picker input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.dc-column-picker label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.dc-choice-check { display: none; margin-left: auto; }
.dc-choice-check .dc-icon { width: 12px; height: 12px; }
.dc-column-picker label:has(:checked) .dc-choice-check { display: inline-flex; }
.dc-no-columns { margin: 10px 0; color: var(--muted); font-size: 12px; }
.dc-layout-preview { margin-top: 20px; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--panel); }
.dc-layout-preview > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.dc-layout-preview [data-preview-title] { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-preview-label { flex: none; font-size: 10px; color: var(--muted); }
.dc-preview-columns { display: flex; min-height: 76px; padding: 10px 12px; gap: 14px; }
.dc-preview-columns > div { flex: 1; min-width: 0; }
.dc-preview-columns span { display: block; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-preview-columns i { display: block; width: 75%; height: 4px; margin-top: 10px; background: #263349; border-radius: 2px; }
.dc-preview-columns i:last-child { width: 55%; }
.dc-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.dc-span-two { grid-column: 1 / -1; }
.dc-layout-import { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.dc-layout-import p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 11px; }
.dc-more-filters { margin-top: 20px; border-block: 1px solid var(--border); }
.dc-more-filters summary { padding: 15px 0; color: var(--text); font-size: 12px; cursor: pointer; }
.dc-more-filters summary > span { margin-left: 8px; color: var(--muted); font-size: 10px; }
.dc-more-filters .dc-filter-grid { padding-bottom: 18px; }
.dc-sort-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
.dc-editor-footer { flex: none; margin: 0; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--panel); }
.dc-editor-footer-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dc-editor-footer-main > div, .dc-discard-confirm > div { display: flex; gap: 8px; }
.dc-save-hint { color: var(--muted); font-size: 11px; }
.dc-editor-error { margin: 0 0 12px; padding: 9px 11px; border: 1px solid #653039; border-radius: 6px; background: #321b23; color: #fca5a5; font-size: 12px; }
.dc-discard-confirm { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.dc-discard-confirm p { margin: 0; font-size: 12px; }
@media (max-width: 650px) {
    .dc-dashboard { margin-top: 0; }
    .dc-dashboard .dc-page-heading { gap: 12px; margin-bottom: 26px; }
    .dc-page-heading h1 { font-size: 24px; }
    .dc-page-heading > .dc-button { padding: 8px 10px; }
    .dc-dashboard .dashboard-card-grid { grid-template-columns: minmax(0, 408px); }
    #dashboard-card-editor { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 10px; }
    .dc-editor-form { height: calc(100dvh - 18px); max-height: calc(100dvh - 18px); }
    .dc-editor-heading { padding: 16px; }
    .dc-editor-tabs { padding: 0 16px; }
    .dc-editor-body { flex: 1; height: auto; padding: 18px 16px; }
    .dc-editor-footer { padding: 14px 16px; }
    .dc-column-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 192px; }
    .dc-column-picker > label { min-height: 40px; }
    .dc-editor .dc-field input, .dc-editor .dc-field select { font-size: 16px; }
    .dc-editor .dc-chip-button { width: 28px; height: 30px; }
    .dc-dashboard .dc-card-actions .dc-button { min-height: 38px; }
    .dc-dashboard .dc-card-actions .dc-button-icon { width: 38px; }
    .dc-save-hint { font-size: 10px; }
    .dc-discard-confirm { flex-direction: column; align-items: stretch; }
    .dc-discard-confirm > div { justify-content: flex-end; }
    .dc-more-filters summary > span { display: block; margin: 4px 0 0 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .dc-dashboard *, .dc-editor * { scroll-behavior: auto; transition: none !important; animation: none !important; }
}

/* Saved-document preview wizard */
.library-preview-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--panel);
    flex: 0 0 auto;
}
.library-preview-page {
    color: var(--muted);
    font-size: 13px;
}
.library-preview-download {
    margin-left: auto;
}
.document-library-viewer .document-viewer-header h3 {
    min-width: 0;
    font-size: 16px;
}
.document-library-viewer .library-document-viewer-close {
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .library-preview-download {
        margin-left: 0;
    }
}

/* Personal document management */
.library-upload { margin-top: 16px; }
.library-upload > summary { width: fit-content; cursor: pointer; }
.library-upload-form {
    display: grid;
    gap: 16px;
    margin-top: 16px;
    padding: 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.library-upload-form label { color: var(--text); font-size: 13px; }
.library-field-hint { color: var(--muted); font-weight: normal; }
.library-upload-form .form-control { min-width: 0; margin-bottom: 8px; }
.library-upload-form input[type="file"]::file-selector-button {
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
    margin-right: 8px;
    cursor: pointer;
}
.library-manage-status { margin-top: 12px; }
.library-manage-status.is-error { color: var(--danger); }
[data-personal-library] .document-library-row { flex-wrap: wrap; gap: 8px; }
[data-personal-library] .library-document-preview { flex: 1; min-width: 0; flex-wrap: wrap; }
[data-personal-library] .library-document-preview strong { overflow-wrap: anywhere; min-width: 0; }
.library-delete-confirmation {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.library-delete-confirmation p { flex-basis: 100%; margin: 0 0 4px; }
.document-library-card .btn-secondary,
.document-library-viewer .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.document-library-card .btn-secondary:hover,
.document-library-viewer .btn-secondary:hover {
    border-color: var(--accent);
    background: var(--surface-hover);
}
.document-library-card .btn-danger {
    padding: 8px 12px;
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--danger);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.document-library-card button:disabled,
.document-library-viewer button:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.library-upload > summary::before { content: '+'; margin-right: 8px; }
.library-upload[open] > summary::before { content: '−'; }
.document-library-card [hidden] { display: none; }

/* Personal library panel, using the dashboard's surfaces and accent tokens. */
.settings-fragment [data-personal-library] {
    grid-column: 1 / -1;
    min-width: 0;
}
.library-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.library-title-line { display: flex; align-items: center; gap: 10px; }
.library-document-copy { display: grid; gap: 5px; min-width: 0; }
.document-library-card[data-personal-library] {
    position: relative;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}
[data-personal-library] .document-library-heading {
    align-items: flex-start;
    justify-content: flex-start;
    padding-right: 150px;
    gap: 14px;
    margin-bottom: 24px;
}
[data-personal-library] .library-heading-copy { min-width: 0; }
[data-personal-library] .library-title-line h2 { font-size: 18px; line-height: 1.5; }
[data-personal-library] .document-library-heading p { margin: 4px 0 0; line-height: 1.5; }
[data-personal-library] .load-action-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    background: var(--bg);
    font-size: 12px;
    font-weight: 600;
}
.library-heading-icon,
.library-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--accent);
    background: var(--bg);
}
.library-heading-icon { width: 44px; height: 44px; }
.library-heading-icon .library-icon { width: 23px; height: 23px; }
[data-personal-library] .library-upload { margin: 0; }
[data-personal-library] .library-upload > summary {
    position: absolute;
    top: 26px;
    right: 24px;
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
    list-style: none;
    gap: 4px;
}
[data-personal-library] .library-upload > summary::-webkit-details-marker { display: none; }
[data-personal-library] .library-upload > summary:hover { background: var(--accent-hover); }
[data-personal-library] .library-upload-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 20px;
    margin: 0 0 20px;
    border-radius: var(--radius-md);
}
.library-upload-intro,
.library-upload-file-field,
.library-upload-submit { grid-column: 1 / -1; min-width: 0; }
.library-upload-intro strong { font-size: 14px; font-weight: 600; }
[data-personal-library] .library-upload-intro p { margin: 4px 0 0; line-height: 1.5; }
.library-upload-field { min-width: 0; }
[data-personal-library] .library-upload-form label { display: block; margin: 0 0 8px; font-weight: 500; }
[data-personal-library] .library-upload-form .form-control {
    margin: 0;
    padding: 10px 12px;
    min-height: 42px;
    font-size: 14px;
    background: var(--panel);
    border-width: 1px;
    color-scheme: dark;
}
.library-upload-submit { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.library-upload-submit > span { color: var(--muted); font-size: 12px; }
[data-personal-library] .library-upload-submit .btn-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-contrast); box-sizing: border-box; width: auto; margin: 0; padding: 10px 16px; font-size: 13px; box-shadow: none; }
[data-personal-library] .library-manage-status:empty { display: none; }
[data-personal-library] .library-manage-status:not(:empty) {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    line-height: 1.5;
}
[data-personal-library] .document-library-list { margin: 0; display: grid; gap: 8px; }
[data-personal-library] .document-library-row {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
    gap: 12px;
    transition: border-color var(--transition);
}
[data-personal-library] .document-library-row:has(.library-document-preview:hover),
[data-personal-library] .document-library-row:focus-within { border-color: var(--accent); }
[data-personal-library] .library-document-preview {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px;
    padding: 12px 0;
    min-height: 68px;
    font-weight: normal;
}
[data-personal-library] .library-file-icon { width: 38px; height: 44px; color: var(--muted); background: var(--panel); border-radius: 6px; }
[data-personal-library] .library-document-copy { flex: 1; gap: 5px; }
[data-personal-library] .library-document-preview strong { color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.45; }
[data-personal-library] .library-document-meta { color: var(--muted); font-size: 12px; line-height: 1.4; }
[data-personal-library] .library-preview-affordance { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-size: 12px; }
.library-preview-affordance .library-icon { width: 14px; height: 14px; }
[data-personal-library] .library-document-delete {
    width: 36px;
    min-height: 36px;
    padding: 8px;
    background: transparent;
    border-color: transparent;
    color: var(--muted);
    flex: 0 0 auto;
}
[data-personal-library] .library-document-delete:hover { color: var(--danger); border-color: var(--danger); background: var(--panel); }
.library-delete-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-personal-library] .library-delete-confirmation { margin: 0 0 8px; background: var(--panel); gap: 10px; padding: 16px; }
[data-personal-library] .library-delete-confirmation p { margin: 0 0 4px; color: var(--text); }
[data-personal-library] .document-empty {
    padding: 32px 20px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
    text-align: center;
}
[data-personal-library] .document-empty > .library-icon { display: block; margin: 0 auto 12px; width: 28px; height: 28px; color: var(--muted); }
[data-personal-library] .document-empty strong { display: block; color: var(--text); font-size: 14px; }
[data-personal-library] .document-empty p { margin: 6px auto 0; max-width: 360px; line-height: 1.5; }
@media (max-width: 600px) {
    .document-library-card[data-personal-library] { padding: 18px; border-radius: var(--radius-md); }
    [data-personal-library] .document-library-heading { padding-right: 0; margin-bottom: 16px; gap: 10px; }
    .library-heading-icon { width: 38px; height: 38px; }
    [data-personal-library] .library-upload > summary { position: static; margin-bottom: 18px; }
    [data-personal-library] .library-upload-form { grid-template-columns: minmax(0, 1fr); padding: 14px; }
    .library-upload-submit { align-items: stretch; flex-direction: column; }
    [data-personal-library] .library-upload-submit .btn-primary { width: 100%; }
    [data-personal-library] .document-library-row { padding: 4px 10px; gap: 4px; }
    [data-personal-library] .library-document-preview { gap: 10px; }
    [data-personal-library] .library-file-icon { width: 30px; height: 38px; }
    [data-personal-library] .library-preview-affordance { display: none; }
    [data-personal-library] .library-document-delete { min-height: 44px; width: 36px; }
    [data-personal-library] .library-upload-form .form-control { font-size: 16px; }
    [data-personal-library] .library-upload-form input[type="file"] { font-size: 13px; }
}
.document-library-card [hidden] { display: none; }

/* Confirm an action in place; preserve keyboard access and the surrounding layout. */
.rr-action-pending {
    width: auto !important;
    min-width: 110px !important;
    height: auto !important;
    white-space: normal !important;
    padding: 8px 12px !important;
    color: var(--warning) !important;
    border: 1px solid var(--warning) !important;
    border-radius: var(--radius-sm);
    background: var(--panel) !important;
    font-size: 13px !important;
}
.rr-inline-action {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    margin: 6px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--text);
    font: 13px/1.5 var(--font);
    text-align: left;
    white-space: normal;
}
.rr-inline-message { flex: 1 1 180px; overflow-wrap: anywhere; }
.rr-inline-action label { flex-basis: 100%; color: var(--muted); }
.rr-inline-action input {
    flex: 1 1 150px;
    min-width: 0;
    max-width: 100%;
    padding: 8px 10px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
.rr-inline-action button,
.rr-action-status button {
    width: auto;
    height: auto;
    padding: 7px 12px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font: 600 13px var(--font);
    cursor: pointer;
}
.rr-inline-action .rr-inline-save { background: var(--accent); color: var(--accent-contrast); }
.rr-action-status {
    position: fixed;
    z-index: 20000;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    width: max-content;
    max-width: min(520px, calc(100vw - 40px));
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--panel);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    font: 14px/1.5 var(--font);
}
.rr-action-status > span { min-width: 0; overflow-wrap: anywhere; }

/* Clickable special-instruction autofills in the load wizard. */
.wizard-instruction-options {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}
#load-wizard-modal .wizard-instruction-option {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-hover);
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    cursor: pointer;
}
#load-wizard-modal .wizard-instruction-option:hover,
#load-wizard-modal .wizard-instruction-option:focus-visible {
    background: var(--surface-active);
    border-color: var(--accent-color, #60a5fa);
}
.load-view .rr-action-pending,
.load-layout-toolbar .rr-action-pending,
.public-upload-page .rr-action-pending {
    color: var(--warning) !important;
    background: var(--panel) !important;
    border-color: var(--warning) !important;
}
.document-row:has(> .rr-inline-action),
.public-document-row:has(> .rr-inline-action) { flex-wrap: wrap; }
.document-row > .rr-inline-action,
.public-document-row > .rr-inline-action { flex-basis: 100%; margin: 0; }
.document-actions:has(.rr-action-pending),
.public-document-actions:has(.rr-action-pending) { align-items: center; flex-wrap: wrap; }
.filter-layout-button-group:has(.rr-inline-action) { flex-wrap: wrap; max-width: 100%; }
.filter-layout-button-group > .rr-inline-action { flex-basis: 100%; }
.rr-inline-validation { flex-basis: 100%; color: var(--danger); }
.rr-inline-validation[hidden] { display: none; }
@media (min-width: 1026px) {
    .sidebar:focus-within,
    .sidebar:has(.rr-action-pending) { width: 200px; }
    .sidebar:focus-within ul,
    .sidebar:has(.rr-action-pending) ul { width: 100%; box-sizing: border-box; }
    .sidebar:focus-within .nav-label,
    .sidebar:has(.rr-action-pending) .nav-label { opacity: 1; }
}
.sidebar:has(.rr-action-pending) { overflow-y: auto; }
.sidebar .rr-inline-action { width: 100%; }

/* Fixed Load Details layout, with independently scrolling choices. */
#load-wizard-modal.wizard-load-details {
    width: min(1060px, calc(100vw - 32px));
    height: min(740px, calc(100dvh - 32px));
    max-height: calc(100dvh - 24px);
    padding: 20px;
    overflow: hidden;
    box-sizing: border-box;
}
.wizard-load-details [hidden] { display: none !important; }
.wizard-load-details .wizard-header { margin-bottom: 12px; padding-bottom: 10px; }
.wizard-load-details #wizard-steps { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.wizard-load-details #step-3 { display: flex !important; flex-direction: column; min-height: 0; flex: 1; }
.wizard-details-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.wizard-load-details .wizard-details-heading h3 { margin: 0; color: var(--text); font-size: 20px; line-height: 1.3; text-transform: none; letter-spacing: 0; }
.wizard-details-heading h3 span { display: block; margin-bottom: 4px; color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.wizard-load-reference { min-width: 0; width: min(320px, 50%); text-align: right; }
.wizard-load-reference label { color: var(--muted); font-size: 11px; }
.wizard-load-details #wiz-load-number { display: block; width: 100%; min-height: 0; height: 24px; padding: 0; border: 0; background: none; color: var(--text); font-size: 12px; text-align: right; text-overflow: ellipsis; }
.wizard-load-details #step-3 > .form-group { margin: 0 0 12px; }
.wizard-load-details #step-3 .form-group > label { font-size: 12px; letter-spacing: .02em; }
.wizard-equipment-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; }
#load-wizard-modal .wizard-equipment-chip { flex: 0 0 auto; min-height: 34px; padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-size: 12px; line-height: 20px; cursor: pointer; }
#load-wizard-modal .wizard-equipment-chip[aria-pressed="true"] { background: var(--surface-active); border-color: var(--accent); color: var(--accent); }
.wizard-load-details .equipment-custom-type { max-width: 390px; margin-top: 6px; }
.wizard-load-details #wiz-custom-equipment { height: 36px; min-height: 36px; padding: 6px 10px; font-size: 12px; }
.wizard-load-details #wiz-add-custom-equipment { min-height: 36px; padding: 6px 16px; background: var(--surface-active); color: var(--accent); border: 1px solid var(--border); font-size: 12px; }
.wizard-load-details .equipment-type-picker + .form-help { margin-top: 6px; color: var(--muted); font-size: 11px; }
.wizard-load-details .wizard-instructions-group { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wizard-load-details #wiz-special-instr { flex: 0 0 72px; min-height: 72px; height: 72px; padding: 10px 12px; resize: none; font-size: 13px; line-height: 1.5; }
.wizard-load-details #wiz-special-instr::placeholder { color: var(--muted); }
.wizard-load-details #wiz-instruction-suggestion { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 12px; }
.wizard-autofill-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-shrink: 0; }
.wizard-autofill-heading strong { font-size: 12px; font-weight: 600; color: var(--text); }
.wizard-autofill-heading > span { font-size: 11px; color: var(--muted); }
.wizard-load-details .wizard-instruction-options { min-height: 0; margin-top: 8px; padding: 2px; overflow-y: auto; overscroll-behavior: contain; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 66px; align-content: start; gap: 8px; }
#load-wizard-modal .wizard-instruction-option { display: flex; align-items: flex-start; gap: 12px; min-width: 0; min-height: 0; height: 66px; padding: 12px; margin: 0; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; line-height: 20px; text-align: left; overflow: hidden; }
.wizard-instruction-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.wizard-instruction-use { flex: 0 0 26px; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; }
#load-wizard-modal .wizard-instruction-option:hover,
#load-wizard-modal .wizard-instruction-option[aria-pressed="true"] { background: var(--surface-active); border-color: var(--accent); }
#load-wizard-modal .wizard-instruction-option[aria-pressed="true"] .wizard-instruction-use { color: var(--accent); }
.wizard-load-details .wizard-actions { flex-shrink: 0; margin-top: 0; padding-top: 14px; border-top: 1px solid var(--border); }
#load-wizard-modal.wizard-load-details #wiz-prev-3 { background: transparent; color: var(--text); border: 1px solid var(--border); }
#load-wizard-modal.wizard-load-details #wiz-next-3 { min-width: 110px; }
@media (max-width: 600px) {
    #load-wizard-modal.wizard-load-details { width: 100%; padding: 14px; height: calc(100dvh - 24px); }
    .wizard-load-details .wizard-header { margin-bottom: 12px; padding-bottom: 8px; }
    .wizard-details-heading { margin-bottom: 12px; }
    .wizard-load-details .wizard-details-heading h3 { font-size: 18px; }
    .wizard-load-details #step-3 > .form-group { margin-bottom: 12px; }
    .wizard-load-details #wiz-special-instr { flex-basis: 64px; min-height: 64px; height: 64px; }
    .wizard-load-details #wiz-instruction-suggestion { margin-top: 10px; }
    .wizard-load-details .wizard-instruction-options { grid-template-columns: minmax(0, 1fr); }
    .wizard-autofill-heading { flex-direction: column; }
}
@media (max-height: 540px) {
    #load-wizard-modal.wizard-load-details { padding: 8px 14px; height: calc(100dvh - 24px); }
    .wizard-load-details .wizard-header { margin-bottom: 4px; padding-bottom: 4px; }
    #load-wizard-modal.wizard-load-details h2 { font-size: 17px; line-height: 24px; }
    .wizard-load-details #wizard-close { width: 26px; height: 26px; min-height: 26px; padding: 0; }
    .wizard-details-heading { margin-bottom: 4px; }
    .wizard-load-details .wizard-details-heading h3 { display: flex; align-items: baseline; gap: 10px; font-size: 16px; }
    .wizard-details-heading h3 span { margin: 0; }
    .wizard-load-reference label { display: none; }
    .wizard-load-details #step-3 > .form-group { margin-bottom: 6px; }
    .wizard-load-details #step-3 .form-group > label { line-height: 14px; margin-bottom: 3px; font-size: 11px; }
    #load-wizard-modal .wizard-equipment-chip { min-height: 28px; padding: 3px 10px; }
    .wizard-load-details .equipment-custom-type { margin-top: 0; }
    .wizard-load-details #wiz-custom-equipment, .wizard-load-details #wiz-add-custom-equipment { min-height: 28px; height: 28px; padding: 3px 10px; }
    .wizard-load-details .equipment-type-picker + .form-help { display: none; }
    .wizard-load-details #wiz-special-instr { flex-basis: 36px; min-height: 36px; height: 36px; padding: 6px 10px; }
    .wizard-load-details #wiz-instruction-suggestion { margin-top: 6px; }
    .wizard-load-details .wizard-instruction-options { margin-top: 4px; }
    .wizard-load-details .wizard-actions { padding-top: 6px; }
    #load-wizard-modal.wizard-load-details .wizard-actions button { min-height: 30px; height: 30px; padding: 4px 12px; line-height: 20px; box-sizing: border-box; }
}

.wizard-load-details #step-3 .wizard-equipment-label { display: flex; align-items: baseline; gap: 12px; }
.wizard-equipment-label > span { color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.wizard-load-details .wizard-instruction-options { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.wizard-load-details .wizard-instruction-options::-webkit-scrollbar { width: 6px; }
.wizard-load-details .wizard-instruction-options::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }

/* CSR choices stay in the wizard beneath the search field. */
#wiz-csr-results.wizard-csr-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 8px;
    max-height: 40dvh;
    overflow-y: auto;
    padding: 2px;
}
#load-wizard-modal .wizard-csr-choice {
    margin: 0;
    padding: 14px 16px;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}
#load-wizard-modal .wizard-csr-choice:hover,
#load-wizard-modal .wizard-csr-choice[aria-pressed="true"] {
    background: var(--surface-active);
    border-color: var(--accent);
}
#wiz-csr-status { color: var(--muted); font-size: 12px; margin: 8px 0; }
#wiz-csr-retry[hidden] { display: none; }

#load-wizard-modal .wizard-csr-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

#wiz-cust-results.wizard-customer-choices {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    max-height: 40dvh;
    overflow-y: auto;
    padding: 2px;
}
#load-wizard-modal .wizard-customer-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 14px 16px;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}
#load-wizard-modal .wizard-customer-choice:hover,
#load-wizard-modal .wizard-customer-choice[aria-pressed="true"] {
    background: var(--surface-active);
    border-color: var(--accent);
}
.wizard-customer-shortcode { color: var(--muted); font-size: 12px; flex-shrink: 0; }
#wiz-cust-status { color: var(--muted); font-size: 12px; margin: 8px 0; }
#wiz-cust-retry[hidden] { display: none; }

/* One consistent frame, heading and footer throughout load creation. */
#load-wizard-modal.wizard-shell {
    width: min(1060px, calc(100vw - 32px));
    height: min(740px, calc(100dvh - 32px));
    max-height: calc(100dvh - 24px);
    padding: 20px;
    overflow: hidden;
    box-sizing: border-box;
}
.wizard-shell [hidden] { display: none !important; }
.wizard-shell .wizard-header { margin-bottom: 12px; padding-bottom: 10px; }
.wizard-shell #wizard-steps { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.wizard-shell .wizard-step { flex-direction: column; min-height: 0; flex: 1; animation: none; }
.wizard-shell .wizard-details-heading { flex-shrink: 0; }
.wizard-shell .wizard-details-heading h3 { margin: 0; color: var(--text); font-size: 20px; line-height: 1.3; text-transform: none; letter-spacing: 0; }
.wizard-shell .wizard-details-heading h3:focus { outline: none; }
.wizard-shell .wizard-step > .form-group { flex-shrink: 0; }
.wizard-shell .wizard-step > .wizard-instructions-group { flex-shrink: 1; }
.wizard-shell #wiz-cust-results, .wizard-shell #wiz-csr-results { flex: 1; min-height: 0; max-height: none; align-content: start; overscroll-behavior: contain; }
.wizard-shell #wiz-cust-selected, .wizard-shell #wiz-csr-selected { flex-shrink: 0; min-height: 22px; margin: 8px 0; color: var(--accent); font-size: 12px; }
.wizard-shell .wizard-actions { flex-shrink: 0; margin-top: 0; padding-top: 14px; border-top: 1px solid var(--border); }
.wizard-shell #step-1 .wizard-actions { justify-content: flex-end; }
#load-wizard-modal.wizard-shell .wizard-actions button { min-width: 110px; }
#load-wizard-modal.wizard-shell .wizard-actions button[id^="wiz-prev"] { background: transparent; color: var(--text); border: 1px solid var(--border); }
.wizard-shell #wiz-legs-container { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
#load-wizard-modal.wizard-shell #wiz-add-leg { align-self: flex-start; flex-shrink: 0; min-height: 36px; margin: 8px 0; padding: 6px 12px; border: 1px solid var(--border); background: var(--surface-active); color: var(--accent); font-size: 12px; }
@media (max-width: 600px) {
    #load-wizard-modal.wizard-shell { width: 100%; padding: 14px; height: calc(100dvh - 24px); }
    .wizard-shell .wizard-header { margin-bottom: 12px; padding-bottom: 8px; }
    .wizard-shell .wizard-details-heading h3 { font-size: 18px; }
}
@media (max-height: 540px) {
    #load-wizard-modal.wizard-shell { padding: 8px 14px; height: calc(100dvh - 24px); }
    .wizard-shell .wizard-header { margin-bottom: 4px; padding-bottom: 4px; }
    #load-wizard-modal.wizard-shell h2 { font-size: 17px; line-height: 24px; }
    .wizard-shell #wizard-close { width: 26px; height: 26px; min-height: 26px; padding: 0; }
    .wizard-shell .wizard-details-heading h3 { display: flex; align-items: baseline; gap: 10px; font-size: 16px; }
    .wizard-shell .wizard-actions { padding-top: 6px; }
    #load-wizard-modal.wizard-shell .wizard-actions button { min-height: 30px; height: 30px; padding: 4px 12px; line-height: 20px; box-sizing: border-box; }
}
.wizard-shell #wiz-legs-container .leg-entry { min-width: 0; padding: 0; }
.wizard-shell .wizard-leg-grid > .form-group { min-width: 0; }
.wizard-shell .appt-grid { grid-template-columns: minmax(0, 1fr) 100px; }
.wizard-shell .appt-grid > * { min-width: 0; }
@media (max-width: 760px) {
    .wizard-shell .wizard-leg-grid { grid-template-columns: minmax(0, 1fr); }
    .wizard-shell .leg-entry-body { padding: 12px; }
    .wizard-shell .leg-type-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wizard-shell .leg-type-btn { min-width: 0; }
    .wizard-shell .leg-entry-header { padding: 10px 12px; }
    .wizard-shell .load-location-search-row { flex-wrap: wrap; }
    .wizard-shell .load-location-search-row > input { flex-basis: 100%; }
    .wizard-shell .load-location-search-row > button { flex: 1; }
}

/* Patchnotes */
.patchnotes-fragment {
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(8px, 2vw, 24px);
}
.patchnotes-fragment .patchnotes-header { margin-bottom: 24px; }
.patchnotes-fragment h1 { margin: 0; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.025em; }
.patchnotes-fragment .patchnotes-releases { padding: 0; }
.patchnotes-fragment article {
    padding: clamp(20px, 4vw, 40px);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
}
.patchnotes-fragment h2 { margin: 0 0 28px; color: var(--muted); font-size: 16px; font-weight: 500; }
.patchnotes-fragment h3 { margin: 28px 0 12px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text); font-size: 17px; line-height: 1.5; }
.patchnotes-fragment h2 + h3 { margin-top: 0; padding-top: 0; border-top: 0; }
.patchnotes-fragment ul { margin: 0; padding-left: 20px; list-style: disc; }
.patchnotes-fragment li { margin-bottom: 10px; padding-left: 4px; color: var(--text); font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.patchnotes-fragment li::marker { color: var(--muted); }
.patchnotes-fragment li:last-child { margin-bottom: 0; }

.organization-settings-fields {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.organization-settings-fields legend {
    font-weight: 600;
    margin-bottom: 16px;
}

.organization-settings-fields > .btn {
    margin-top: 16px;
}