body {
	background: #281b34 url('../images/bg.png') repeat fixed top left;
    font-family: "Oxanium", sans-serif;
	font-size:12pt;
	color:#fff;
    text-shadow: 1px 1px 1px #000000;
}

a, a:active, a:visited {
	text-decoration:underline;
	color:#fff;
}

a:hover {
	color:#7c0fa0;
}

input { display: block;     border:1px solid #584d63;
	background:#3c3840;
    padding:10px;
	color:#fff;  box-sizing: border-box; }
button {	
    border:1px solid #584d63;
	background:#3c3840;
    padding:10px;
	color:#fff; 
    cursor: pointer; 
}
h2 {
    margin:0;
    padding:0;
}
.error { color: red; }
.success { color: green; }
.toggle { margin-top: 15px; }


#main_container {
    width:auto;
    max-width: 1200px !important;
    margin: 20px auto;
}

.content_container {
    margin:20px auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    padding:10px;
	overflow:hidden;
	background:#45404a;
    border-top:3px solid #322a3a;
}


table {
    width: 100%;
    background: #3c3840;
    border:1px solid #584d63;
    border-spacing: 5px;
}

table tr th, table tr td {
    border:1px solid #584d63;
	background:#45404a;
    font-size: 14pt;
    padding:5px;
}

/* ── Navigation ── */
.site-nav {
    background: #45404a;
    border: 1px solid #584d63;
    margin-bottom: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    position: relative;
}

.site-nav .nav-toggle {
    display: none;
    width: 100%;
    padding: 11px 14px;
    text-align: left;
    font-family: inherit;
    font-size: 11pt;
    font-weight: bold;
    background: transparent;
    border: none;
    color: #d4c6e0;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px #000;
}

.site-nav .nav-toggle:hover {
    background: #3c3840;
}

.nav-hamburger {
    font-size: 14pt;
    line-height: 1;
}

.nav-caret {
    margin-left: auto;
    font-size: 9pt;
    opacity: 0.6;
    transition: transform 0.2s;
}

.site-nav .nav-toggle[aria-expanded="true"] .nav-caret {
    transform: rotate(180deg);
}

.site-nav .nav-links {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav .nav-links li a,
.site-nav .nav-links li a:visited {
    display: block;
    padding: 9px 16px;
    color: #c0b0d0;
    text-decoration: none;
    font-size: 10pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-right: 1px solid #584d63;
    transition: background 0.15s, color 0.15s;
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
}

.site-nav .nav-links li a:hover {
    background: #3c3840;
    color: #d4c6e0;
}

.site-nav .nav-links li.active > a {
    background: #5b2d8e;
    color: #fff;
    border-right-color: #7c0fa0;
}

/* ── Admin nav accent ── */
.admin-nav {
    border-color: #5e3a1a;
    background: #352618;
}

.admin-nav .nav-links li a,
.admin-nav .nav-links li a:visited {
    border-right-color: #5e3a1a;
    color: #d4b896;
}

.admin-nav .nav-links li a:hover {
    background: #2b1e10;
    color: #ffcc99;
}

.admin-nav .nav-links li.active > a {
    background: #893800;
    color: #fff;
    border-right-color: #c55200;
}

.admin-badge {
    display: inline-block;
    background: #893800;
    color: #ffcc99;
    font-size: 7pt;
    font-weight: bold;
    padding: 1px 5px;
    letter-spacing: 1px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 2px;
}

.admin-nav .nav-toggle {
    color: #d4b896;
}

/* Dashboard */
.dashboard-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.stat-card {
    flex: 1 1 calc(25% - 10px);
    min-width: 140px;
    background: #3c3840;
    border: 1px solid #584d63;
    padding: 12px;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.stat-card-wide {
    flex: 1 1 calc(50% - 10px);
}

.stat-value {
    font-size: 20pt;
    font-weight: bold;
    color: #d4c6e0;
}

.stat-value-sm {
    font-size: 16pt;
    font-weight: bold;
    color: #d4c6e0;
}

.stat-label {
    font-size: 10pt;
    color: #a091af;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.stat-detail {
    font-size: 11pt;
    color: #c0b0d0;
    margin-top: 4px;
}

.progress-bar {
    background: #2a2430;
    border: 1px solid #584d63;
    height: 20px;
    width: 100%;
    position: relative;
}

.progress-fill {
    background: #7c0fa0;
    height: 100%;
    color: #fff;
    font-size: 9pt;
    line-height: 20px;
    text-align: center;
    min-width: 30px;
    transition: width 0.3s ease;
}

/* Trip Manager */
.trip-status-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 9pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 2px;
}

.status-transit {
    background: #5b2d8e;
    border: 1px solid #6a4e8d;
    color: #d4c6e0;
}

.status-planned {
    background: #3c3840;
    border: 1px solid #584d63;
    color: #a091af;
}

.status-completed {
    background: #2d5e3a;
    border: 1px solid #3d8a50;
    color: #a8e6b8;
}

.status-cancelled {
    background: #5e2d2d;
    border: 1px solid #8a3d3d;
    color: #e6a8a8;
}

.progress-bar-lg {
    height: 28px;
}

.progress-bar-lg .progress-fill {
    font-size: 11pt;
    line-height: 28px;
    font-weight: bold;
}

.trip-progress-section {
    margin: 15px 0;
}

.stop-reached td {
    border-left: 3px solid #7c0fa0;
}

.stop-pickup {
    color: #a8c6e6;
}

.stop-delivery {
    color: #a8e6b8;
}

fieldset {
    border: 1px solid #584d63;
    padding: 10px;
    margin: 10px 0;
}

fieldset legend {
    color: #d4c6e0;
    padding: 0 6px;
}

/* Trip Create Form */
.trip-form-section {
    background: #3c3840;
    border: 1px solid #584d63;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.trip-form-section h3 {
    margin-top: 0;
    color: #d4c6e0;
    border-bottom: 1px solid #584d63;
    padding-bottom: 6px;
}

.broker-contract-card {
    transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.broker-contract-card-muted {
    background: #343139;
    border-color: #4c4456;
    opacity: 0.72;
}

.broker-contract-card-muted:hover {
    opacity: 0.88;
}

.trip-form-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.trip-card {
    display: block;
    flex: 1 1 calc(50% - 10px);
    min-width: 250px;
    background: #45404a;
    border: 2px solid #584d63;
    padding: 10px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.trip-card:hover {
    border-color: #7c0fa0;
}

.trip-card input[type="radio"] {
    display: none;
}

.trip-card-title {
    font-size: 13pt;
    font-weight: bold;
    color: #d4c6e0;
    display: inline;
}

.trip-card-stats {
    margin-top: 6px;
    display: flex;
    gap: 12px;
    font-size: 10pt;
    color: #a091af;
}

.trip-card-location {
    font-size: 10pt;
    color: #c0b0d0;
    margin-top: 4px;
}

.trip-card-assignments {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.trip-tag {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9pt;
    border-radius: 2px;
}

.tag-ok {
    background: #2d5e3a;
    border: 1px solid #3d8a50;
    color: #a8e6b8;
}

.tag-warn {
    background: #5e4d2d;
    border: 1px solid #8a7a3d;
    color: #e6dda8;
}

.tag-neutral {
    background: #3c3840;
    border: 1px solid #584d63;
    color: #a091af;
}

.trip-form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.trip-form-field {
    flex: 1 1 calc(50% - 12px);
    min-width: 200px;
}

.trip-form-field label {
    display: block;
    font-size: 10pt;
    color: #a091af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.trip-form-field select {
    width: 100%;
    padding: 8px;
    background: #45404a;
    border: 1px solid #584d63;
    color: #fff;
    font-size: 11pt;
}

.trip-warn {
    color: #e6dda8;
    font-size: 10pt;
}

.trip-summary {
    background: #45404a;
    border: 1px solid #584d63;
    padding: 10px;
}

.jobs-dispatch-panel {
    position: sticky;
    top: 12px;
    z-index: 2;
}

.jobs-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.jobs-summary-title {
    font-size: 11pt;
    font-weight: bold;
    color: #e4d8f2;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.jobs-summary-route {
    color: #b4a4c8;
    font-size: 9pt;
    margin-top: 2px;
}

.jobs-summary-topline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
}

.jobs-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.jobs-summary-stat {
    background: #45404a;
    border: 1px solid #5d5468;
    padding: 8px 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.jobs-summary-stat strong {
    display: block;
    color: #efe6fb;
    font-size: 11pt;
}

.jobs-summary-stat-compact {
    padding: 6px 8px;
    min-width: 0;
}

.jobs-summary-stat-compact strong {
    font-size: 10pt;
}

.jobs-summary-stat-status strong {
    font-weight: bold;
}

.jobs-summary-status-ok {
    color: #ddd0f0;
}

.jobs-summary-status-danger {
    color: #e5c5d5;
}

.jobs-summary-stat small {
    display: block;
    color: #a091af;
    font-size: 8.5pt;
    margin-top: 3px;
}

.jobs-summary-label {
    display: block;
    color: #a091af;
    font-size: 8.5pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.jobs-summary-meta {
    color: #b4a4c8;
    font-size: 8.8pt;
    margin-bottom: 8px;
}

.jobs-summary-chip-row,
.cargo-flag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.jobs-summary-chip,
.cargo-flag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 8.5pt;
    font-weight: bold;
    letter-spacing: 0.2px;
    border-radius: 2px;
}

.jobs-summary-chip-ok,
.cargo-flag-ok {
    background: #2d5e3a;
    border: 1px solid #3d8a50;
    color: #a8e6b8;
}

.jobs-summary-chip-warn,
.cargo-flag-warn {
    background: #5e4d2d;
    border: 1px solid #8a7a3d;
    color: #e6dda8;
}

.jobs-summary-chip-danger,
.cargo-flag-danger {
    background: #5e2d2d;
    border: 1px solid #8a3d3d;
    color: #e6a8a8;
}

.jobs-summary-chip-neutral,
.cargo-flag-neutral {
    background: #3c3840;
    border: 1px solid #584d63;
    color: #c7bad6;
}

.jobs-summary-note {
    margin: 8px 0 0;
    color: #b19bc7;
}

#jobs_trip_summary .jobs-summary-chip-neutral,
#contract_trip_summary .jobs-summary-chip-neutral {
    background: #45404a;
    border: 1px solid #5d5468;
    color: #d4c6e0;
}

#jobs_trip_summary .jobs-summary-chip-ok,
#contract_trip_summary .jobs-summary-chip-ok {
    background: #4c4358;
    border: 1px solid #6f6286;
    color: #e2d7f2;
}

#jobs_trip_summary .jobs-summary-chip-warn,
#contract_trip_summary .jobs-summary-chip-warn {
    background: #594a42;
    border: 1px solid #7a6254;
    color: #e4cfba;
}

#jobs_trip_summary .jobs-summary-chip-danger,
#contract_trip_summary .jobs-summary-chip-danger {
    background: #533c48;
    border: 1px solid #7b5366;
    color: #ebc8d8;
}

.jobs-summary-tools {
    margin-top: 8px;
}

.jobs-summary-blockers {
    margin-top: 10px;
    background: rgba(94, 45, 45, 0.35);
    border: 1px solid #8a3d3d;
    padding: 8px 10px;
}

.jobs-summary-blockers-title {
    color: #f1c2c2;
    font-weight: bold;
    margin-bottom: 6px;
    text-transform: uppercase;
    font-size: 8.5pt;
    letter-spacing: 0.5px;
}

.jobs-summary-blockers ul {
    margin: 0;
    padding-left: 18px;
}

.jobs-summary-blockers li {
    color: #f0d2d2;
    font-size: 9pt;
    margin-bottom: 4px;
}

.contract-step-label {
    display: inline-block;
    padding: 2px 8px;
    margin-bottom: 8px;
    font-size: 8.5pt;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: #3c3840;
    border: 1px solid #584d63;
    color: #c7bad6;
}

.contract-builder-steps {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.2fr);
    gap: 12px;
    margin-top: 12px;
}

.contract-builder-step {
    background: rgba(160,145,175,0.08);
    border: 1px solid rgba(160,145,175,0.18);
    padding: 12px;
}

.contract-builder-step h4 {
    margin: 0 0 6px;
    color: #e4d8f2;
    font-size: 11pt;
}

.contract-step-note,
.contract-builder-summary-note {
    color: #a091af;
    font-size: 9pt;
    line-height: 1.45;
    margin: 0;
}

.contract-builder-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.contract-builder-field {
    display: block;
    font-size: 9pt;
    color: #c7bad6;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.contract-builder-field input,
.contract-builder-field select {
    width: 100%;
    margin-top: 5px;
    padding: 8px;
    background: #45404a;
    border: 1px solid #584d63;
    color: #fff;
    font-size: 10pt;
}

.contract-warning-box {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(94, 45, 45, 0.18);
    border: 1px solid rgba(138, 61, 61, 0.55);
    color: #e8d7d7;
    font-size: 8.8pt;
    line-height: 1.45;
}

.contract-builder-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 900px) {
    .contract-builder-steps {
        grid-template-columns: 1fr;
    }
}

#cargo_table tfoot {
    background: #3c3840;
}

#cargo_table tfoot td {
    border-top: 2px solid #7c0fa0;
}

/* Cargo Market */
.cargo-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #584d63;
}

.cargo-tab {
    padding: 8px 18px;
    font-size: 10pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a091af;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.cargo-tab:hover {
    color: #d4c6e0;
    border-bottom-color: #7c0fa0;
}

.cargo-tab-active {
    color: #d4c6e0;
    border-bottom-color: #7c0fa0;
}

.cargo-tab-count {
    background: #584d63;
    color: #c0b0d0;
    padding: 1px 6px;
    font-size: 9pt;
    margin-left: 4px;
    border: 1px solid #6a5d76;
    border-radius: 2px;
}

.cargo-tab-count-ok,
.cargo-tab-count-warn,
.cargo-tab-count-danger {
    padding: 1px 6px;
    font-size: 9pt;
    margin-left: 4px;
    border-radius: 2px;
}

.cargo-tab-count-ok {
    background: #2d5e3a;
    border: 1px solid #3d8a50;
    color: #a8e6b8;
}

.cargo-tab-count-warn {
    background: #5e4d2d;
    border: 1px solid #8a7a3d;
    color: #e6dda8;
}

.cargo-tab-count-danger {
    background: #5e2d2d;
    border: 1px solid #8a3d3d;
    color: #e6a8a8;
}

.jobs-header-alert {
    color: #a091af;
    font-size: 9pt;
}

.jobs-header-alert-warn {
    color: #e6dda8;
}

.jobs-header-alert-danger {
    color: #e6a8a8;
    font-weight: bold;
}

.jobs-header-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.jobs-header-card {
    min-width: 0;
    padding: 9px 10px;
}

.jobs-header-card .stat-label {
    margin-bottom: 2px;
    font-size: 9pt;
    letter-spacing: 0.7px;
}

.jobs-header-card .stat-value-sm {
    font-size: 14pt;
}

.jobs-header-card .stat-detail {
    margin-top: 2px;
    line-height: 1.35;
}

.jobs-header-card .stat-detail {
    font-size: 9pt;
    margin-top: 2px;
    line-height: 1.3;
}

.manager-header-grid {
    gap: 8px;
    margin-bottom: 12px;
}

.manager-header-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.manager-header-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.manager-header-card {
    min-width: 0;
    padding: 9px 10px;
}

.manager-header-card .stat-label {
    margin-bottom: 2px;
    font-size: 9pt;
    letter-spacing: 0.7px;
}

.manager-header-card .stat-value,
.manager-header-card .stat-value-sm {
    font-size: 14pt;
}

.manager-header-card .stat-detail {
    font-size: 9pt;
    margin-top: 2px;
    line-height: 1.3;
}

.manager-header-card .progress-bar {
    margin-top: 4px !important;
    height: 16px;
}

.company-header-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.company-header-title {
    font-size: 18pt;
    font-weight: bold;
    color: #d4c6e0;
}

.company-header-location {
    font-size: 10pt;
    color: #a091af;
}

.company-header-level {
    margin-left: auto;
}

@media (max-width: 900px) {
    .jobs-header-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .manager-header-grid-4,
    .manager-header-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.jobs-trip-progress {
    margin-bottom: 6px;
}

.jobs-trip-progress-bar {
    width: 100%;
    max-width: 140px;
    height: 7px;
    background: #2a2430;
    border: 1px solid #584d63;
    overflow: hidden;
}

.jobs-trip-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c0fa0, #a44ce0);
}

.jobs-trip-progress-text {
    margin-top: 3px;
    font-size: 8.5pt;
    color: #c7bad6;
}

.jobs-broker-preview-card {
    padding: 12px;
    border: 1px solid rgba(160,145,175,0.18);
    background: rgba(160,145,175,0.06);
}

.jobs-broker-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.jobs-broker-preview-route {
    margin-top: 6px;
    color: #d6cae4;
    font-size: 9.5pt;
}

.jobs-page-intro {
    margin-bottom: 18px;
}

.jobs-page-intro h2 {
    margin-top: 0;
}

.jobs-page-intro-copy {
    margin-bottom: 0;
}

.jobs-flash-banner {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #5d5468;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
}

.jobs-flash-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
    pointer-events: none;
}

.jobs-flash-banner-success {
    background: linear-gradient(135deg, #4a4358, #544965 45%, #3f5a4b 100%);
    border-color: #6c8a73;
    box-shadow: 0 0 0 1px rgba(168, 230, 184, 0.12), 0 10px 24px rgba(61, 138, 80, 0.18);
}

.jobs-flash-banner-error {
    background: linear-gradient(135deg, #4a3d4a, #533f52 45%, #5c4147 100%);
    border-color: #8a5d68;
    box-shadow: 0 0 0 1px rgba(235, 200, 216, 0.12), 0 10px 24px rgba(123, 83, 102, 0.2);
}

.jobs-flash-kicker {
    font-size: 8.5pt;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #f1e8fb;
    margin-bottom: 4px;
    font-weight: bold;
}

.jobs-flash-body {
    color: #fff;
    font-size: 12pt;
    font-weight: bold;
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.jobs-section-header-tight {
    margin-bottom: 8px;
}

.jobs-driver-section,
.jobs-run-planner-section,
.jobs-cargo-step {
    padding: 10px;
}

.jobs-driver-shell {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

.jobs-driver-select-field {
    min-width: 0;
}

.jobs-driver-rig-summary {
    padding: 8px 10px;
    background: #45404a;
    border: 1px solid #5d5468;
    min-height: 44px;
}

.jobs-driver-rig-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.jobs-driver-rig-driver {
    color: #efe6fb;
    font-size: 10pt;
    font-weight: bold;
}

.jobs-driver-rig-assets {
    color: #cdbfe0;
    font-size: 9pt;
}

.jobs-driver-rig-trailer {
    margin-top: 4px;
    color: #b9abca;
    font-size: 8.5pt;
}

.jobs-driver-rig-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.jobs-driver-rig-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    background: #3c3840;
    border: 1px solid #5d5468;
    color: #c7bad6;
    font-size: 8.5pt;
}

.jobs-run-planner-grid {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.jobs-run-summary-panel {
    margin-bottom: 12px;
}

.jobs-run-panel {
    padding: 8px 10px;
    background: #3c3840;
    border-color: #5d5468;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.jobs-load-plan-panel-inline {
    margin-top: 0;
}

.jobs-run-route-panel {
}

.jobs-run-summary {
    margin: 0;
}

.jobs-run-route {
    padding-top: 0;
}

.jobs-route-panel-inline {
    position: static;
    height: auto;
}

.jobs-run-summary-col {
    display: grid;
    gap: 10px;
}

.jobs-dispatch-panel-inline {
    position: static;
    top: auto;
}

.jobs-run-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.jobs-run-actions .ui-empty-action {
    margin-right: auto;
}

.jobs-run-actions button {
    margin-left: auto;
}

.jobs-planner-submit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.jobs-planner-submit-note {
    margin: 0;
    color: #c0b0d0;
}

.jobs-card-grid-spaced {
    margin-bottom: 18px;
}

.jobs-summary-grid-3 .stat-card {
    min-width: 0;
}

.jobs-summary-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.jobs-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.jobs-section-header h3 {
    margin: 0;
}

.jobs-section-subcopy {
    margin: 4px 0 0;
}

.jobs-section-link {
    font-size: 0.9em;
}

.jobs-empty-copy {
    margin: 0;
}

.jobs-hidden-note {
    display: none;
}

.jobs-driver-match {
    margin-top: 10px;
    background: #3c3840;
    border: 1px solid #584d63;
    padding: 10px;
}

.jobs-driver-match-title {
    color: #d9cdee;
    font-size: 9pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.jobs-driver-match-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.jobs-driver-match-card {
    background: #2a2430;
    border: 1px solid #4f445b;
    padding: 9px;
}

.jobs-driver-match-card-best {
    border-color: #3d8a50;
}

.jobs-driver-match-card-active {
    box-shadow: inset 0 0 0 1px #7c0fa0;
}

.jobs-driver-match-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: start;
}

.jobs-driver-match-name {
    color: #efe6fb;
    font-weight: bold;
}

.jobs-driver-match-subline {
    margin-top: 2px;
    color: #a091af;
    font-size: 8.5pt;
}

.jobs-fit-badges {
    margin-top: 5px;
    gap: 4px;
}

.jobs-fit-badges .cargo-flag {
    padding: 1px 6px;
    font-size: 8pt;
}

.jobs-autofill-note {
    margin: 6px 0 0;
}

.jobs-combo-pref-note {
    font-weight: bold;
}

.jobs-combo-pref-note-kept {
    color: #a8e6b8;
}

.jobs-combo-pref-note-partial {
    color: #e6dda8;
}

.jobs-combo-pref-note-override {
    color: #e6b9a8;
}

.jobs-driver-match-score {
    color: #d9cdee;
    font-size: 11pt;
    font-weight: bold;
}

.jobs-driver-match-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.jobs-driver-reason {
    display: inline-block;
    padding: 2px 7px;
    background: #332d3a;
    border: 1px solid #584d63;
    color: #c7bad6;
    font-size: 8.2pt;
}

.jobs-driver-match-actions {
    margin-top: 8px;
}

.jobs-driver-pick-btn {
    width: 100%;
}

.jobs-driver-match-note,
.jobs-driver-match-empty {
    margin-top: 8px;
    color: #b19bc7;
    font-size: 9pt;
}

.jobs-warning-stack {
    margin-top: 6px;
}

.jobs-vertical-gap-sm {
    margin-top: 10px;
}

.jobs-inline-label {
    display: inline;
}

.jobs-inline-form {
    display: inline;
}

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

.jobs-table-wrap-wide table {
    min-width: 760px;
}

.jobs-table-zero-margin {
    margin: 0;
}

.jobs-check-col {
    width: 30px;
}

.jobs-align-right {
    text-align: right;
}

.cargo-action-note-inline {
    max-width: none;
    margin-top: 4px;
}

.jobs-preview-stack {
    margin-top: 10px;
    display: grid;
    gap: 10px;
}

.jobs-top-gap-xs {
    margin-top: 4px;
}

.jobs-trip-type-badge {
    background: #2d4a6e;
    color: #7eb8f0;
    border-color: #3a6a9e;
    font-size: 8pt;
    margin-top: 3px;
}

.jobs-flag-offset {
    margin-top: 4px;
}

.jobs-route-warehouse {
    color: #7eb8f0;
}

.jobs-muted-emphasis {
    color: #a091af;
}

.jobs-muted-text {
    color: #a091af;
}

.jobs-deadhead-note {
    color: #a08bbf;
    font-size: 8pt;
}

.jobs-refuel-note {
    color: #e9a040;
}

.ui-empty-state {
    text-align: left;
}

.ui-empty-title {
    margin: 0 0 4px;
    color: #e4d8f2;
    font-size: 12pt;
}

.ui-empty-copy {
    margin: 0;
    color: #c0b0d0;
    line-height: 1.45;
}

.ui-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.ui-empty-action {
    display: inline-block;
    padding: 5px 10px;
    background: #45404a;
    border: 1px solid #5d5468;
    color: #d4c6e0;
    text-decoration: none;
    font-size: 9pt;
    border-radius: 2px;
}

.ui-empty-action:hover {
    border-color: #7c0fa0;
    color: #fff;
}

.ui-section-shell {
    margin-bottom: 12px;
}

.ui-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.ui-section-head-meta {
    margin-top: 4px;
}

.ui-muted-note {
    color: #a091af;
    font-size: 8.8pt;
    line-height: 1.4;
}

.ui-inline-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ui-compact-select {
    max-width: 220px;
    font-size: 0.85em;
}

.ui-inline-note {
    font-size: 0.8em;
    color: #a89ab4;
}

.ui-inline-note-warn {
    color: #e6dda8;
}

.ui-inline-note-danger {
    color: #e6a8a8;
}

.ui-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ui-top-gap-md {
    margin-top: 12px;
}

.ui-top-gap-xs {
    margin-top: 2px;
}

.ui-inline-picker .broker-picker-hint,
.ui-inline-picker .broker-form-note {
    flex: 1 1 100%;
}

.cargo-table {
    width: 100%;
    border-collapse: collapse;
}

.cargo-table thead th {
    background: #3c3840;
    border: 1px solid #584d63;
    padding: 6px 8px;
    text-align: left;
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a091af;
}

.cargo-table thead th a {
    color: #a091af;
    text-decoration: none;
}

.cargo-table thead th a:hover {
    color: #d4c6e0;
}

.cargo-table tbody td {
    border: 1px solid #584d63;
    padding: 6px 8px;
    font-size: 10pt;
    vertical-align: middle;
}

.cargo-table tbody tr:hover {
    background: #45404a;
}

.cargo-table tbody tr.jobs-cargo-goal-row {
    background: #42384a;
}

.cargo-table tbody tr.jobs-cargo-goal-best {
    background: #3f4636;
}

.jobs-cargo-goal-cues {
    margin-top: 4px;
}

.jobs-cargo-driver-cue {
    margin-top: 3px;
    font-size: 8.5pt;
}

.jobs-cargo-goal-note {
    margin-top: 8px;
}

.cargo-name-link {
    color: #d4c6e0;
    font-weight: bold;
    text-decoration: none;
}

.cargo-name-link:hover {
    color: #7c0fa0;
}

.cargo-desc {
    color: #a091af;
    font-size: 9pt;
}

.cargo-route {
    white-space: nowrap;
}

.cargo-route-from {
    color: #a8c6e6;
}

.cargo-route-to {
    color: #a8e6b8;
}

.cargo-route-arrow {
    color: #584d63;
    margin: 0 3px;
}

.cargo-payout {
    font-weight: bold;
    color: #a8e6b8;
}

.cargo-special-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9pt;
    font-weight: bold;
    background: #5e4d2d;
    border: 1px solid #8a7a3d;
    color: #e6dda8;
}

.cargo-exp-critical {
    color: #e66;
    font-weight: bold;
}

.cargo-exp-warn {
    color: #e5a020;
}

.cargo-exp-normal {
    color: #cba640;
}

.cargo-exp-safe {
    color: #a091af;
}

.cargo-accept-btn,
.cargo-drop-btn,
.cargo-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 1px 12px 0;
    border-radius: 0;
    border: 1px solid #5d5468;
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 18px rgba(12,8,18,0.22);
    cursor: pointer;
    color: #f3ecfa;
    font-size: 9pt;
    font-weight: bold;
    font-family: inherit;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: middle;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
    appearance: none;
}

.cargo-accept-btn {
    background: #2d5e3a;
    border-color: #3d8a50;
}

.cargo-accept-btn:hover {
    background: #3d8a50;
    border-color: #55a869;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 20px rgba(12,8,18,0.26);
}

.cargo-drop-btn {
    background: #5e2d2d;
    border-color: #8a3d3d;
}

.cargo-drop-btn:hover {
    background: #8a3d3d;
    border-color: #ab5757;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 20px rgba(12,8,18,0.26);
}

.cargo-action-btn {
    background: #45404a;
    border-color: #5d5468;
}

.cargo-action-btn:hover {
    background: #5b5263;
    border-color: #7b7290;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 20px rgba(12,8,18,0.26);
}

.cargo-action-btn-primary {
    background: #2d5e3a;
    border-color: #3d8a50;
    color: #f3ecfa;
}

.cargo-action-btn-primary:hover {
    background: #3d8a50;
    border-color: #55a869;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 20px rgba(12,8,18,0.26);
}

.cargo-action-link {
    color: #a091af;
    font-size: 9pt;
    margin-left: 6px;
}

.cargo-action-link:hover {
    color: #d4c6e0;
}

.cargo-action-note {
    margin-top: 6px;
    color: #a091af;
    font-size: 8.5pt;
    line-height: 1.35;
    max-width: 220px;
}

.cargo-action-note-warn {
    color: #e6dda8;
}

.cargo-market-table tbody td {
    vertical-align: top;
    padding: 5px 6px;
}

.cargo-market-table .cargo-route {
    white-space: normal;
}

.cargo-market-main {
    min-width: 210px;
}

.cargo-market-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cargo-market-icon {
    color: #c0b0d0;
    font-size: 10pt;
}

.cargo-flag-economy {
    background: #2d3d5e;
    border: 1px solid #3d5a8a;
    color: #a8c4e6;
}

.cargo-market-economy-context {
    font-size: 8.5pt;
    color: #8899bb;
    margin-bottom: 3px;
}

.cargo-market-desc {
    margin-top: 2px;
}

.cargo-market-flags {
    margin-top: 6px;
    gap: 4px;
}

.cargo-market-flags .cargo-flag {
    padding: 1px 7px;
    font-size: 8pt;
}

.cargo-market-action {
    min-width: 130px;
}

.cargo-market-form {
    margin: 0;
}

.cargo-market-note {
    margin-top: 5px;
    max-width: 150px;
    line-height: 1.25;
}

.market-lane-pulse {
    margin-bottom: 12px;
}

.market-lane-pulse-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.market-lane-pulse-head h3 {
    margin-bottom: 4px;
}

.market-lane-pulse-copy {
    margin: 0;
    color: #a091af;
    font-size: 8.8pt;
    line-height: 1.35;
    max-width: 620px;
}

.market-lane-pulse-score {
    color: #d8cbe3;
    font-size: 9pt;
    font-weight: bold;
    white-space: nowrap;
}

.market-lane-pulse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.market-lane-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #43394f;
    padding: 10px 12px;
}

.market-lane-card-hot {
    border-color: #3d8a50;
    background: rgba(61, 138, 80, 0.08);
}

.market-lane-card-title {
    color: #e4d6ef;
    font-size: 8.6pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.market-lane-row + .market-lane-row {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.market-lane-route {
    color: #f3eef8;
    font-size: 9pt;
    line-height: 1.3;
}

.market-lane-meta {
    margin-top: 2px;
    color: #a091af;
    font-size: 8.1pt;
    line-height: 1.3;
}

.cargo-market-subline {
    margin-top: 3px;
    color: #a091af;
    font-size: 8.4pt;
    line-height: 1.25;
}

.cargo-market-timing {
    min-width: 105px;
}

.cargo-market-timing-label {
    color: #8f82a0;
    font-size: 8pt;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 5px;
}

.cargo-my-table tbody td {
    vertical-align: top;
    padding: 5px 6px;
}

.cargo-my-main {
    min-width: 190px;
}

.cargo-my-subline {
    margin-top: 3px;
    color: #a091af;
    font-size: 8.4pt;
    line-height: 1.25;
}

.cargo-my-state-line {
    color: #b9abc8;
}

.cargo-my-timing {
    min-width: 96px;
}

.cargo-my-status {
    min-width: 110px;
}

.cargo-my-actions {
    min-width: 145px;
}

.cargo-my-note {
    margin-top: 5px;
    max-width: 150px;
    line-height: 1.25;
}

.cargo-my-link-strong {
    color: #8dc88d;
}

.cargo-my-link-alt {
    color: #7eb8f0;
}

@media (max-width: 900px) {
    .jobs-section-header {
        align-items: flex-start;
    }

    .jobs-table-wrap-wide table {
        min-width: 680px;
    }

    .cargo-tabs {
        flex-wrap: wrap;
    }

    .cargo-market-main {
        min-width: 190px;
    }

    .cargo-my-main {
        min-width: 175px;
    }
}

.cargo-deleted {
    color: #8a3d3d;
    font-size: 9pt;
}

.cargo-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: #3c3840;
    border: 1px solid #584d63;
}
.cargo-filter-bar label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9pt;
    color: #c0b0d0;
}
.cargo-filter-bar select {
    padding: 4px 8px;
    border: 1px solid #584d63;
    background: #45404a;
    color: #e0e0e0;
    font-size: 9pt;
}
.cargo-filter-clear {
    font-size: 9pt;
    color: #c0b0d0;
    text-decoration: underline;
}
.cargo-filter-clear:hover {
    color: #7c0fa0;
}
.cargo-filter-apply {
    padding: 4px 14px;
    border: 1px solid #584d63;
    background: #5b2d8e;
    color: #fff;
    font-size: 9pt;
    cursor: pointer;
}
.cargo-filter-apply:hover {
    background: #7c0fa0;
}

.cargo-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.cargo-pagination a {
    display: inline-block;
    padding: 4px 10px;
    background: #3c3840;
    border: 1px solid #584d63;
    color: #c0b0d0;
    text-decoration: none;
    font-size: 10pt;
}

.cargo-pagination a:hover {
    background: #584d63;
    color: #d4c6e0;
}

.cargo-page-current {
    display: inline-block;
    padding: 4px 10px;
    background: #7c0fa0;
    border: 1px solid #5f4b7c;
    color: #fff;
    font-weight: bold;
    font-size: 10pt;
}

.cargo-page-info {
    color: #a091af;
    font-size: 9pt;
    margin-left: 8px;
}

.cargo-detail-table {
    width: 100%;
    border-collapse: collapse;
}

.cargo-detail-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #584d63;
    font-size: 10pt;
    vertical-align: top;
}

.cargo-detail-label {
    color: #a091af;
    font-weight: bold;
    width: 140px;
    text-transform: uppercase;
    font-size: 9pt;
    letter-spacing: 0.5px;
}

.cargo-log-table tbody td {
    font-size: 9pt;
}

/* ── Header Stats Bar ── */
.hdr-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 14px;
    background: linear-gradient(180deg, #403848 0%, #332b3c 100%);
    border: 1px solid #4a3f57;
    border-top: 2px solid #7c0fa0;
    margin-bottom: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(167, 139, 250, 0.07);
}

.hdr-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.hdr-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #9a20c4;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(124, 15, 160, 0.55);
}

.hdr-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #584d63;
    color: #d4c6e0;
    font-weight: bold;
    font-size: 14pt;
}

.hdr-name-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hdr-username {
    color: #ecdff8;
    font-weight: bold;
    font-size: 10pt;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-company {
    color: #a091af;
    font-size: 8pt;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-company-meta {
    color: #84768f;
    font-size: 7pt;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-stats {
    display: flex;
    gap: 8px;
    flex: 1;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    min-width: 0;
}

.hdr-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 2px 0 2px 10px;
    border-left: 1px solid #584d63;
}

.hdr-stat-label {
    font-size: 7pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a091af;
}

.hdr-stat-value {
    font-size: 11pt;
    font-weight: bold;
    color: #d4c6e0;
    transition: color 0.15s;
}
.hdr-stat:hover .hdr-stat-value {
    color: #f0e7f8;
}

.hdr-funds {
    color: #a8e6b8;
    font-size: 13pt;
    text-shadow: 0 0 10px rgba(168, 230, 184, 0.35);
}

.hdr-stat-sub {
    font-size: 8pt;
    color: #a091af;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-stat-time {
    border-left-color: #6a5f75;
    align-items: center;
    text-align: center;
}

.hdr-stat-funds {
    background: rgba(168, 230, 184, 0.07);
    border: 1px solid rgba(168, 230, 184, 0.18) !important;
    border-radius: 5px;
    padding: 4px 12px;
}

.hdr-stat-funds .hdr-stat-sub {
    color: #9ec6a7;
}

.hdr-stat-value.rep-tier-badge {
    padding-left: 0;
}

.hdr-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

.hdr-action-link {
    color: #a091af;
    text-decoration: none;
    font-size: 16pt;
    line-height: 1;
    transition: color 0.15s;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.hdr-action-link:hover {
    color: #d4c6e0;
}

.hdr-action-link-alert {
    color: #ffe39a;
    position: relative;
}

.hdr-action-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #d04b36;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.hdr-logout:hover {
    color: #e66;
}

/* ============================================================
   XP & Leveling System
   ============================================================ */

/* Header XP bar */
.hdr-stat-xp {
    min-width: 120px;
    flex: 0 0 120px;
}

.hdr-xp-bar {
    width: 100%;
    height: 6px;
    background: #2a2430;
    border-radius: 3px;
    overflow: hidden;
    margin: 2px 0;
}

.hdr-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c5cbf, #a78bfa);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Header level-up glow animation */
.hdr-leveled-up {
    animation: hdr-level-glow 1.5s ease-in-out 2;
}

.hdr-leveled-up.hdr-glow-done {
    animation: none;
}

@keyframes hdr-level-glow {
    0%, 100% { background: transparent; }
    50% { background: rgba(167, 139, 250, 0.25); box-shadow: 0 0 12px rgba(167, 139, 250, 0.5); border-radius: 4px; }
}

/* Level-up flash banner */
.level-up-banner {
    background: linear-gradient(90deg, #2d2040, #3d2b5a);
    border: 1px solid #7c5cbf;
    padding: 10px 16px;
    margin: 0 0 2px 0;
    text-align: center;
    color: #e2d6f0;
    font-size: 10pt;
    animation: banner-fade-in 0.5s ease;
}

.level-up-perks {
    margin-left: 8px;
    color: #a091af;
}

.level-up-perk-name {
    color: #a78bfa;
    font-weight: bold;
}

@keyframes banner-fade-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dashboard XP bar */
.dash-xp-bar {
    width: 100%;
    height: 10px;
    background: #2a2430;
    border: 1px solid #584d63;
    border-radius: 5px;
    overflow: hidden;
    margin: 8px 0 4px 0;
}

.dash-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c5cbf, #a78bfa);
    border-radius: 5px;
    transition: width 0.4s ease;
}

/* Perks grid */
.perks-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.perk-card {
    flex: 1 1 calc(33.333% - 8px);
    min-width: 200px;
    padding: 10px 12px;
    border: 1px solid #584d63;
    background: #3c3840;
}

.perk-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.perk-icon {
    font-size: 12pt;
}

.perk-name {
    font-weight: bold;
    font-size: 10pt;
    color: #d4c6e0;
}

.perk-desc {
    font-size: 9pt;
    color: #a091af;
    margin-bottom: 4px;
}

.perk-level {
    font-size: 8pt;
    color: #8a7a9a;
}

/* Perk states */
.perk-unlocked {
    border-color: #4a9e5a;
    background: #2a3a2e;
}

.perk-unlocked .perk-icon {
    color: #6fcf7f;
}

.perk-unlocked .perk-name {
    color: #a8e6b8;
}

.perk-unlocked .perk-level {
    color: #6fcf7f;
}

.perk-next {
    border-color: #7c5cbf;
    background: #32284a;
}

.perk-next .perk-icon {
    color: #a78bfa;
}

.perk-next .perk-level {
    color: #a78bfa;
    font-weight: bold;
}

.perk-locked {
    opacity: 0.5;
}

.perk-locked .perk-icon {
    color: #6a5a7a;
}

/* Cargo market — locked special cargo */
.cargo-locked-label {
    font-size: 8pt;
    color: #a091af;
    font-style: italic;
}

/* ── REPUTATION TIER BADGES ── */
.rep-tier-badge {
    font-weight: bold;
    font-size: 9pt;
}

/* Tier-up banner (similar to level-up banner) */
.rep-tier-up-banner {
    background: linear-gradient(90deg, #2d3040, #3d4a5a);
    border: 1px solid #5b9bd5;
    padding: 10px 16px;
    margin: 0 0 2px 0;
    text-align: center;
    color: #e2e6f0;
    font-size: 10pt;
    animation: banner-fade-in 0.5s ease;
}
.rep-tier-up-banner strong {
    color: #ffd54f;
}
.rep-tier-name {
    font-weight: bold;
}

/* Truck / Trailer asset thumbnails */
.asset-thumb {
    width: 80px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #584d63;
    background: #3c3840;
    vertical-align: middle;
}
.no-image {
    display: inline-block;
    width: 80px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 9pt;
    color: #888;
    background: #3c3840;
    border-radius: 4px;
    border: 1px solid #584d63;
    vertical-align: middle;
}

/* Fleet Manager */
.fleet-tab-nav {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #584d63;
}

.fleet-tab-nav a {
    padding: 8px 20px;
    color: #a091af;
    text-decoration: none;
    font-weight: bold;
    font-size: 11pt;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.fleet-tab-nav a:hover {
    color: #d4c6e0;
}

.fleet-tab-nav a.fleet-tab-active {
    color: #d4c6e0;
    border-bottom-color: #7c0fa0;
}

.fleet-sub-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
}

.fleet-sub-tabs a {
    padding: 5px 14px;
    color: #a091af;
    text-decoration: none;
    font-size: 10pt;
    background: #3c3840;
    border: 1px solid #584d63;
    border-bottom: none;
    transition: background 0.15s, color 0.15s;
}

.fleet-sub-tabs a:hover {
    color: #d4c6e0;
}

.fleet-sub-tabs a.fleet-sub-active {
    background: #45404a;
    color: #d4c6e0;
    border-bottom: 1px solid #45404a;
}

.fleet-section {
    margin-bottom: 20px;
}

.fleet-section h2 {
    margin: 0 0 10px 0;
    color: #d4c6e0;
    font-size: 14pt;
    border-bottom: 1px solid #584d63;
    padding-bottom: 6px;
}

.fleet-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fleet-list-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.fleet-list-table thead th {
    background: #3c3840;
    border: 1px solid #584d63;
    color: #8f7da1;
    font-size: 8pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
    text-align: left;
    padding: 5px 6px;
}

.fleet-list-table td {
    padding: 4px 6px;
    border: 1px solid #584d63;
    vertical-align: middle;
}

.fleet-list-table tbody tr:hover {
    background: #45404a;
}

.fleet-list-main {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.fleet-list-thumb {
    width: 200px;
    min-width: 200px;
    height: 110px;
    background: #2a2430;
    border: 1px solid #584d63;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.fleet-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fleet-list-thumb-empty {
    color: #8d7c9d;
    font-size: 7.5pt;
    text-align: center;
    line-height: 1.2;
}

.fleet-list-main-copy {
    min-width: 0;
}

.fleet-list-name {
    color: #d4c6e0;
    font-weight: bold;
    font-size: 9.5pt;
    line-height: 1.2;
}

.fleet-list-subtext {
    margin-top: 1px;
    color: #a091af;
    font-size: 8pt;
    line-height: 1.2;
}

.fleet-list-stack,
.fleet-list-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.fleet-list-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #cbb8dc;
    font-size: 8.8pt;
    line-height: 1.3;
}

.fleet-list-label {
    color: #8f7da1;
    font-size: 7.5pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.fleet-list-meter + .fleet-list-meter {
    margin-top: 4px;
}

.fleet-list-meter-label {
    color: #a091af;
    font-size: 8pt;
    margin-bottom: 2px;
}

.fleet-list-meter .progress-bar {
    height: 12px;
}

.fleet-list-location {
    color: #c0b0d0;
    font-size: 8.8pt;
    line-height: 1.35;
    min-width: 120px;
}

.fleet-list-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 170px;
    align-items: center;
}

.fleet-list-actions form {
    display: inline-flex;
    margin: 0;
}

.fleet-list-actions .fleet-card-action,
.fleet-list-actions .fleet-card-action-combo {
    display: inline-flex;
}

.fleet-list-actions button,
.fleet-list-actions .fleet-btn {
    padding: 2px 5px;
    font-size: 8.5pt;
    font-family: inherit;
    line-height: normal;
    background: #4b3a63;
    color: #f1e8ff;
    border: 1px solid #7f508e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.28);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    width: auto;
    text-align: center;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    transition: background 0.15s, border-color 0.15s;
}

.fleet-list-actions button:hover,
.fleet-list-actions .fleet-btn:hover {
    background: #6a38a6;
    border-color: #7f68a3;
    color: #ffffff;
}

.fleet-list-actions .fleet-card-action-combo {
    display: inline-flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
}

.fleet-list-actions select {
    width: auto;
    max-width: 150px;
    padding: 2px 4px;
    font-size: 8.5pt;
    background: #45404a;
    color: #d4c6e0;
    border: 1px solid #584d63;
    box-sizing: border-box;
}

/* =========================================================
   Fleet Manager — fm- component system
   ========================================================= */

.fm-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.fm-section-head h2 { margin: 0; }
.fm-section-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fm-chip { display: inline-block; padding: 1px 7px; font-size: 8pt; border-radius: 10px; font-weight: bold; line-height: 1.5; }
.fm-chip-total   { background: #3c3840; border: 1px solid #584d63; color: #a091af; }
.fm-chip-ok      { background: #1e4028; border: 1px solid #2d6a35; color: #7de898; }
.fm-chip-transit { background: #3a1a60; border: 1px solid #5b2d8e; color: #c0a0f0; }
.fm-chip-warn    { background: #4a3c1e; border: 1px solid #7a6a30; color: #e0c060; }

/* Table column widths */
.fm-table .fm-th-vehicle { min-width: 170px; width: 22%; }
.fm-table .fm-th-status  { width: 18%; min-width: 145px; }
.fm-table .fm-th-specs   { width: 18%; min-width: 150px; }
.fm-table .fm-th-assign  { width: 20%; min-width: 160px; }
.fm-table .fm-th-actions { width: 22%; min-width: 180px; }

/* Location line inside vehicle cell */
.fm-location {
    margin-top: 3px;
    color: #7a6a8a;
    font-size: 7.5pt;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status cell extras */
.fm-listing-tag {
    margin-top: 5px;
    font-size: 8pt;
    line-height: 1.4;
    padding: 3px 6px;
    border-radius: 2px;
}
.fm-listing-sale  { background: #2a3c1e; border: 1px solid #3d6a2a; color: #9de070; }
.fm-listing-lease { background: #2e2a40; border: 1px solid #5040a0; color: #b0a0e0; }
.fm-listing-price { font-weight: bold; font-size: 9pt; }
.fm-lease-timer   { color: #a0d0a0; font-size: 8pt; }
.fm-lease-expired { color: #e06060; font-weight: bold; font-size: 8pt; }
/* Specs grid — 2-column inside specs cell */
.fm-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px 6px;
    color: #cbb8dc;
    font-size: 8pt;
    line-height: 1.35;
    margin-bottom: 4px;
}

/* Progress bars */
.fm-bars { display: flex; flex-direction: column; gap: 3px; }
.fm-bar-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fm-bar-label {
    color: #8f7da1;
    font-size: 7.5pt;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    width: 26px;
    flex-shrink: 0;
}
.fm-bar-track {
    flex: 1;
    background: #2a2430;
    border: 1px solid #584d63;
    height: 6px;
    min-width: 40px;
    position: relative;
    overflow: hidden;
}
.fm-bar-fill    { height: 100%; transition: width 0.3s ease; }
.fm-fill-good   { background: #2d7a3a; }
.fm-fill-warn   { background: #7a6b10; }
.fm-fill-danger { background: #7a1f1f; }
.fm-bar-val { color: #a091af; font-size: 7.5pt; width: 34px; flex-shrink: 0; text-align: right; }

/* Assignment cell */
.fm-assign-row { display: flex; align-items: center; gap: 4px; font-size: 8pt; line-height: 1.3; margin-bottom: 1px; flex-wrap: wrap; }
.fm-assign-icon { font-size: 9pt; flex-shrink: 0; }
.fm-assign-ok   { color: #a8e6b8; }
.fm-assign-none { color: #6a5a7a; font-style: italic; }
.fm-assign-warn { color: #e6dda8; }
.fm-assign-sub  { color: #7a6a8a; font-size: 7.5pt; }
.fm-inline-action { display: inline; margin: 0; padding: 0; }
.fm-btn-xs { font-size: 7pt !important; padding: 1px 5px !important; line-height: 1.4 !important; }

/* Row attention highlight */
.fm-row-attention       { background: rgba(80, 30, 10, 0.18); }
.fm-row-attention:hover { background: rgba(80, 30, 10, 0.28); }

/* Actions cell */
.fm-td-actions { vertical-align: top !important; padding-top: 5px !important; }
.fm-util-group,
.fm-manage-group {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: flex-start;
}
.fm-util-group { margin-bottom: 3px; }
.fm-action-form { display: inline-flex; margin: 0; }
.fm-combo-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.fm-select {
    padding: 2px 4px;
    font-size: 8pt;
    background: #45404a;
    color: #d4c6e0;
    border: 1px solid #584d63;
    max-width: 140px;
}

/* fm- button system */
.fm-btn {
    display: inline-block;
    padding: 3px 7px;
    font-size: 8.5pt;
    font-family: inherit;
    line-height: normal;
    cursor: pointer;
    text-decoration: none;
    border-radius: 2px;
    white-space: nowrap;
    border: 1px solid;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    transition: background 0.12s, border-color 0.12s;
}
.fm-btn-primary               { background: #5b2d8e; border-color: #7c0fa0; color: #e8d8f8; }
.fm-btn-primary:hover         { background: #7c0fa0; border-color: #a020c0; color: #fff; }
.fm-btn-util                  { background: #3c3840; border-color: #584d63; color: #c0b0d0; }
.fm-btn-util:hover            { background: #45404a; border-color: #7c6a8a; color: #d4c6e0; }
.fm-btn-warn                  { background: #5e4d2d; border-color: #8a7a3d; color: #e6dda8; }
.fm-btn-warn:hover            { background: #6e5a35; border-color: #a09048; color: #f5ecb8; }
.fm-btn-subtle                { background: #342f3a; border-color: #4e4460; color: #9080a8; }
.fm-btn-subtle:hover          { background: #403a4a; border-color: #6a58a0; color: #c0b0d8; }

/* Form panels (sell / lease / rename) */
.fm-form-panel { border-left: 3px solid #7c0fa0; }
.fm-form-panel h3 { color: #c0a8e0; font-size: 11pt; margin-bottom: 10px; }
.fm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin-bottom: 10px;
}
.fm-form-row   { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.fm-form-label { color: #9080a0; font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.4px; }
.fm-form-input-wrap { display: flex; align-items: center; gap: 0; }
.fm-input-prefix {
    background: #2e2a35;
    border: 1px solid #584d63;
    border-right: none;
    color: #a091af;
    padding: 5px 6px;
    font-size: 10pt;
    line-height: 1;
}
.fm-input {
    background: #45404a;
    border: 1px solid #584d63;
    color: #d4c6e0;
    padding: 5px 8px;
    font-size: 10pt;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}
.fm-form-input-wrap .fm-input { flex: 1; min-width: 0; }
.fm-form-hint    { color: #7a6890; font-size: 8pt; margin-top: 1px; }
.fm-form-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.fm-form-actions .fm-btn { padding: 6px 16px; font-size: 10pt; }

.fleet-card {
    width: 100%;
    background: #3c3840;
    border: 1px solid #584d63;
    padding: 0;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: stretch;
    transition: border-color 0.15s, background 0.15s;
}

.fleet-card:hover {
    border-color: #7c0fa0;
    background: #413b46;
}

.fleet-card-image {
    width: 118px;
    min-width: 118px;
    height: auto;
    overflow: hidden;
    background: #2a2430;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #584d63;
}

.fleet-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fleet-card-image .no-image {
    width: 100%;
    height: 100%;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    border: none;
    font-size: 8.5pt;
    color: #8d7c9d;
}

.fleet-card-body {
    padding: 7px 9px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    flex: 1;
    min-width: 0;
    align-items: start;
}

.fleet-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    grid-column: 1;
}

.fleet-card-header > div:first-child {
    min-width: 0;
}

.fleet-card-title {
    font-size: 11pt;
    font-weight: bold;
    color: #d4c6e0;
    letter-spacing: 0.15px;
    line-height: 1.2;
}

.fleet-card-subtitle {
    font-size: 8.5pt;
    color: #a091af;
    line-height: 1.25;
}

.fleet-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 8.5pt;
    color: #a091af;
    grid-column: 1;
}

.fleet-card-stats span {
    padding: 0;
    border: none;
    background: transparent;
    white-space: nowrap;
}

.fleet-card-bar {
    margin: 1px 0;
    max-width: 360px;
    grid-column: 1;
}

.fleet-card-bar-label {
    font-size: 8pt;
    color: #a091af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.fleet-card-bar .progress-bar {
    height: 14px;
}

.fleet-card-location {
    font-size: 8.5pt;
    color: #c0b0d0;
    line-height: 1.3;
    grid-column: 1;
}

.fleet-card-assignments {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    grid-column: 1;
}

.fleet-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.fleet-card-actions {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 4px;
    align-items: stretch;
    justify-content: flex-start;
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: stretch;
    min-width: 122px;
    margin-top: 0;
    padding-top: 0;
    padding-left: 10px;
    border-top: none;
    border-left: 1px solid #584d63;
}

.fleet-card-actions form {
    display: flex;
    margin: 0;
}

.fleet-card-actions .fleet-card-action {
    flex: 0 0 auto;
}

.fleet-card-actions button,
.fleet-card-actions .fleet-btn {
    padding: 2px 5px;
    font-size: 8.5pt;
    font-family: inherit;
    line-height: normal;
    background: #4b3a63;
    color: #f1e8ff;
    border: 1px solid #7f508e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.28);
    cursor: pointer;
    text-decoration: none;
    text-shadow: inherit;
    display: block;
    width: 100%;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    transition: background 0.15s, border-color 0.15s;
    box-sizing: border-box;
}

.fleet-card-actions button:hover,
.fleet-card-actions .fleet-btn:hover {
    background: #6a38a6;
    border-color: #7f68a3;
    color: #ffffff;
}

.fleet-card-actions select {
    padding: 2px 4px;
    font-size: 8.5pt;
    background: #45404a;
    color: #d4c6e0;
    border: 1px solid #584d63;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.fleet-card-locked {
    opacity: 0.55;
}

.fleet-card-note {
    font-size: 8.5pt;
    color: #a89ab4;
    font-style: italic;
}

.status-available {
    background: #2d5e3a;
    border: 1px solid #3d8a50;
    color: #a8e6b8;
}

.status-on-trip {
    background: #5b2d8e;
    border: 1px solid #7c0fa0;
    color: #d4c6e0;
}

.status-for-sale {
    background: #5e4d2d;
    border: 1px solid #8a7a3d;
    color: #e6dda8;
}

.fleet-listing-form {
    background: #3c3840;
    border: 1px solid #584d63;
    padding: 12px;
    margin-top: 12px;
}

.fleet-listing-form h3 {
    margin-top: 0;
    color: #d4c6e0;
}

.fleet-rename-inline {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.fleet-rename-inline input[type="text"] {
    width: 80px;
    padding: 2px 6px;
    font-size: 9pt;
    background: #45404a;
    color: #d4c6e0;
    border: 1px solid #584d63;
}

.fleet-empty {
    padding: 30px;
    text-align: center;
    color: #a091af;
    background: #3c3840;
    border: 1px solid #584d63;
}

.fleet-context-banner {
    margin: 0 0 12px;
    padding: 10px 12px;
    background: rgba(91, 45, 142, 0.18);
    border: 1px solid rgba(124, 15, 160, 0.45);
}

.fleet-context-title {
    color: #e2d5f0;
    font-weight: bold;
    margin-bottom: 4px;
}

.fleet-context-copy {
    color: #cbb8dc;
    line-height: 1.45;
}

.fleet-section-intro {
    margin-bottom: 12px;
}

.fleet-section-intro h2,
.fleet-section-intro h3 {
    margin: 0 0 4px;
}

.fleet-section-copy {
    margin: 0;
    color: #c0b0d0;
    line-height: 1.45;
}

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

.fleet-inline-form {
    display: inline;
}

.fleet-trait-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.fleet-muted-inline {
    display: inline-block;
    margin-top: 5px;
    color: #a091af;
}

.fleet-fit-badges {
    margin-top: 5px;
    gap: 4px;
}

.fleet-fit-badges-compact {
    margin-top: 4px;
}

.fleet-fit-badges .cargo-flag {
    padding: 1px 6px;
    font-size: 8pt;
}

.fm-recent-badges .cargo-flag {
    font-size: 7.25pt;
    padding: 1px 5px;
}

.fm-recent-subline {
    font-size: 7pt;
    line-height: 1.15;
    margin-top: 3px;
    color: #847492;
}

.fm-fit-note {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 7px;
    font-size: 8pt;
    font-weight: bold;
    border: 1px solid;
    border-radius: 2px;
}

.fm-fit-note-good {
    background: #2d5e3a;
    border-color: #3d8a50;
    color: #a8e6b8;
}

.fm-fit-note-warn {
    background: #5e4d2d;
    border-color: #8a7a3d;
    color: #e6dda8;
}

.fleet-recruit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.fleet-recruit-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: #2a2430;
    border: 1px solid #584d63;
}

.fleet-recruit-name {
    font-size: 12pt;
    font-weight: bold;
    color: #ece1f7;
}

.fleet-recruit-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.fleet-recruit-copy {
    color: #b7a8c6;
    font-size: 9pt;
    line-height: 1.4;
    min-height: 38px;
}

.fleet-recruit-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.fleet-custom-hire {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}

.company-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    align-items: start;
}

.company-action-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: #45404a;
    border: 1px solid #584d63;
}

.company-action-form-compact {
    justify-content: center;
    align-items: center;
}

.company-action-form-compact .company-action-button {
    width: auto;
}

.company-action-field {
    flex: 0 0 auto;
}

.company-action-label {
    display: block;
    font-size: 9pt;
    color: #a091af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.company-action-control {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    box-sizing: border-box;
    background: #3c3840;
    border: 1px solid #584d63;
    color: #fff;
    font-size: 10pt;
    font-family: inherit;
}

.company-action-button {
    min-height: 34px;
    padding: 6px 12px;
    box-sizing: border-box;
    background: #4b3a63;
    color: #f1e8ff;
    border: 1px solid #6a5d76;
    font-size: 10pt;
    font-family: inherit;
    cursor: pointer;
}

.company-action-button:hover {
    background: #6a38a6;
    border-color: #7f68a3;
    color: #fff;
}

.company-action-button-danger {
    background: #4a3020;
    border-color: #8a4010;
    color: #f3d5c4;
}

.company-action-button-danger:hover {
    background: #6a3a1f;
    border-color: #a85a1f;
    color: #fff;
}

.company-list-count {
    color: #a091af;
    font-size: 10pt;
}

.company-list-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.company-list-table thead th {
    background: #45404a;
    border: 1px solid #584d63;
    color: #a091af;
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}

.company-list-table th,
.company-list-table td {
    padding: 7px 9px;
    border: 1px solid #584d63;
    vertical-align: middle;
}

.company-list-table th {
    text-align: left;
}

.company-list-table tbody tr:hover {
    background: #45404a;
}

.company-list-name {
    color: #d4c6e0;
    font-weight: bold;
}

.company-list-location {
    color: #c0b0d0;
}

.company-list-subtext {
    margin-top: 3px;
    color: #a091af;
    font-size: 8.5pt;
}

.company-list-table .company-col-right {
    text-align: right;
}

.company-list-table .company-col-center {
    text-align: center;
}

.company-list-note {
    color: #a091af;
    font-size: 8pt;
    line-height: 1.3;
}

.admin-industry-flags {
    justify-content: center;
}

.admin-industry-stock-table {
    margin-top: 12px;
}

.company-list-action {
    display: inline-block;
    padding: 3px 10px;
    background: #4b3a63;
    color: #f1e8ff;
    border: 1px solid #6a5d76;
    font-size: 9pt;
    text-decoration: none;
}

.company-list-action:hover {
    background: #6a38a6;
    border-color: #7f68a3;
    color: #fff;
}

.company-status-active {
    display: inline-block;
    padding: 2px 8px;
    background: #2d4a6e;
    border: 1px solid #3a6a9e;
    color: #9ed0ff;
}

.company-status-off {
    display: inline-block;
    padding: 2px 8px;
    background: #3c3840;
    border: 1px solid #584d63;
    color: #a091af;
}

.company-list-progress {
    margin-top: 2px;
    margin-left: auto;
    max-width: 90px;
    height: 8px;
}

.company-list-footer-link {
    display: inline-block;
    margin-top: 10px;
}

/* ============================================================
   Mobile / Responsive
   ============================================================ */

/* Tablet: compress header stats */
@media (max-width: 860px) {
    #main_container {
        margin: 10px auto;
        padding: 0 8px;
    }

    .hdr-stats {
        gap: 10px;
        justify-content: flex-start;
    }

}

/* Mobile: hamburger nav, stacked header */
@media (max-width: 640px) {
    /* Nav: show hamburger, hide links by default */
    .site-nav .nav-toggle {
        display: flex;
    }

    .site-nav .nav-links {
        display: none;
        flex-direction: column;
        border-top: 1px solid #584d63;
    }

    .admin-nav .nav-links {
        border-top-color: #5e3a1a;
    }

    .site-nav .nav-links.nav-open {
        display: flex;
    }

    .site-nav .nav-links li a,
    .site-nav .nav-links li a:visited {
        border-right: none;
        border-bottom: 1px solid #403c44;
        padding: 13px 18px;
        font-size: 11pt;
    }

    .admin-nav .nav-links li a,
    .admin-nav .nav-links li a:visited {
        border-bottom-color: #4a2e18;
    }

    .site-nav .nav-links li.active > a {
        border-bottom-color: #7c0fa0;
    }

    .admin-nav .nav-links li.active > a {
        border-bottom-color: #c55200;
    }

    /* Header bar: wrap to two rows */
    .hdr-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 10px;
    }

    .hdr-identity {
        flex: 0 0 auto;
    }

    .hdr-actions {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .hdr-stats {
        width: 100%;
        gap: 6px;
        border-top: 1px solid #584d63;
        padding-top: 8px;
        justify-content: flex-start;
    }

    .hdr-stat {
        align-items: flex-start;
        text-align: left;
        min-width: calc(50% - 6px);
        padding: 2px 0 2px 10px;
    }

    .hdr-stat-time {
        align-items: flex-start;
        text-align: left;
    }

    .hdr-stat-funds {
        min-width: calc(50% - 6px);
    }

    /* Content container full-width */
    .content_container {
        padding: 8px;
    }

    /* Tables: allow horizontal scroll */
    .content_container {
        overflow-x: auto;
    }

    table {
        min-width: 500px;
    }

    /* Fleet cards: single column */
    .fleet-card {
        grid-template-columns: 1fr;
    }

    .fleet-card-image {
        width: 100%;
        min-width: 0;
        min-height: 110px;
        border-right: none;
        border-bottom: 1px solid #584d63;
    }

    .fleet-card-body {
        grid-template-columns: 1fr;
    }

    .fleet-card-header,
    .fleet-card-stats,
    .fleet-card-bar,
    .fleet-card-location,
    .fleet-card-assignments {
        grid-column: auto;
    }

    .fleet-card-actions {
        grid-column: auto;
        grid-row: auto;
        min-width: 0;
        padding-left: 0;
        padding-top: 6px;
        border-left: none;
        border-top: 1px solid #584d63;
        flex-direction: row;
        align-items: center;
    }

    .fleet-list-actions {
        min-width: 0;
    }

    /* Trip form cards: single column */
    .trip-card {
        flex: 1 1 100%;
    }

    /* Stat cards: two columns */
    .stat-card {
        flex: 1 1 calc(50% - 10px);
    }
}

/* ── Admin: Settings Panel ────────────────────────────────────────────── */
.admin-businesses-tabs {
    margin-bottom: 8px;
}

.admin-page-note {
    color: #a091af;
    margin: 0 0 14px;
    line-height: 1.5;
}

.admin-tool-heading {
    margin: 0;
}

.admin-tool-heading-note {
    color: #a091af;
    margin: 6px 0 0;
    line-height: 1.5;
}

.admin-embedded-section-header p {
    color: #a091af;
    line-height: 1.5;
}

.admin-tool-hero {
    display: grid;
    grid-template-columns: minmax(280px, 1.4fr) minmax(320px, 1fr);
    gap: 16px;
    align-items: start;
}

.admin-tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.admin-tool-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-tool-kpi-card {
    background: #332d39;
    border: 1px solid #4a4056;
    padding: 12px 14px;
}

.admin-tool-kpi-value {
    color: #f0e7f8;
    font-size: 16pt;
    font-weight: bold;
    margin-top: 6px;
}

.admin-tool-note {
    color: #a091af;
    line-height: 1.5;
    margin: 0 0 10px;
}

.admin-inline-form {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.admin-inline-note {
    display: inline-block;
    margin: 0;
    max-width: 560px;
}

.admin-tool-table-wrap {
    overflow-x: auto;
}

.admin-alert {
    padding: 10px 14px;
    margin-bottom: 12px;
}

.admin-alert-error {
    background: #4a1c1c;
    border: 1px solid #8a3d3d;
    color: #e6a8a8;
}

.admin-alert-success {
    background: #1c3a25;
    border: 1px solid #3d8a50;
    color: #a8e6b8;
}

.admin-card {
    background: #3c3840;
    border: 1px solid #584d63;
    padding: 16px;
    margin-bottom: 16px;
}

.admin-card-soft {
    background: #403b46;
}

.admin-card-warm {
    background: #433f36;
}

.admin-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.admin-section-header h3 {
    margin: 0;
}

.admin-section-count {
    color: #a091af;
    font-weight: normal;
    font-size: 10pt;
}

.admin-section-note {
    margin: 4px 0 0;
}

.admin-empty-state {
    margin: 0;
    padding: 10px 12px;
    border: 1px dashed rgba(171, 146, 209, 0.22);
    border-radius: 6px;
    color: #b9a9c9;
    background: rgba(33, 24, 44, 0.22);
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th {
    border: 1px solid #5d5169;
    padding: 8px;
    background: #2c2632;
    color: #d4c6e0;
    text-align: left;
}

.admin-table td {
    border: 1px solid #5d5169;
    padding: 8px;
    vertical-align: top;
}

.admin-table td.admin-center,
.admin-table th.admin-center {
    text-align: center;
}

.admin-table td.admin-right,
.admin-table th.admin-right {
    text-align: right;
}

.admin-row-deleted {
    opacity: 0.7;
}

.admin-row-muted {
    opacity: 0.5;
}

.admin-row-warning {
    background: #494332;
}

.admin-row-danger {
    background: #493238;
}

.admin-row-soft {
    background: #403b46;
}

.admin-text-danger {
    color: #ff8f8f;
}

.admin-text-success {
    color: #8fd6a0;
}

.admin-text-muted {
    color: #a091af;
}

.admin-text-subtle {
    color: #8d8098;
    font-size: 0.9em;
}

.admin-inline-action {
    display: inline;
}

.admin-inline-action button {
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.admin-action-danger {
    color: #ff8f8f;
}

.admin-action-success {
    color: #8fd6a0;
}

.admin-action-dark {
    color: #f2b3b3;
}

.admin-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d4c6e0;
}

.admin-checkbox-row input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.admin-form-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.admin-range-inputs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.admin-input-sm {
    width: 70px;
}

.admin-input-md {
    width: 220px;
}

.admin-reference-toggle {
    border: 1px solid #4a4056;
    background: #2a2430;
}

.admin-reference-toggle summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 14px;
    color: #d4c6e0;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-reference-toggle summary::-webkit-details-marker {
    display: none;
}

.admin-reference-toggle summary::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #3a3243;
    color: #d4c6e0;
    font-size: 12px;
    flex: 0 0 18px;
}

.admin-reference-toggle[open] summary::before {
    content: '-';
}

.admin-reference-body {
    padding: 0 14px 14px;
}

.admin-reference-note,
.admin-reference-summary-note {
    color: #a091af;
    font-size: 9pt;
    font-weight: normal;
}

.admin-reference-note {
    margin: 8px 0 0;
}

.admin-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    margin: 8px 0 12px;
}

.admin-list-search {
    min-width: 220px;
    width: 320px;
    max-width: 100%;
}

.admin-list-status {
    color: #a091af;
    font-size: 9pt;
}

.admin-filter-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 12px;
}

.admin-filter-chip {
    background: #2a2430;
    border: 1px solid #4a4056;
    color: #cbb8dc;
    padding: 5px 11px;
    font-size: 9pt;
    cursor: pointer;
}

.admin-filter-chip:hover {
    border-color: #7c0fa0;
    color: #fff;
}

.admin-filter-chip-active {
    background: #3a3243;
    border-color: #7c0fa0;
    color: #f0e7f8;
}

.admin-table-actions {
    white-space: nowrap;
}

.admin-table-actions a,
.admin-table-actions form {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
}

.admin-table-actions a:last-child,
.admin-table-actions form:last-child {
    margin-right: 0;
}

.admin-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid #4a4056;
    background: #2a2430;
    color: #d4c6e0;
    font-size: 8.5pt;
    line-height: 1.2;
}

.admin-chip-neutral {
    border-color: #4a4056;
    color: #cbb8dc;
}

.admin-chip-ok {
    border-color: #4c7558;
    color: #a8e6b8;
}

.admin-chip-warn {
    border-color: #7b6740;
    color: #e7d28f;
}

.admin-chip-danger {
    border-color: #7d4b4b;
    color: #f0b2b2;
}

.admin-fleet-hero {
    margin-bottom: 14px;
}

.admin-fleet-tab-nav {
    margin-bottom: 10px;
}

.fleet-tab-count {
    display: inline-block;
    min-width: 22px;
    margin-left: 6px;
    padding: 1px 6px;
    background: #2a2430;
    border: 1px solid #4a4056;
    color: #cbb8dc;
    font-size: 8.5pt;
    text-align: center;
}

.fleet-tab-nav a.fleet-tab-active .fleet-tab-count {
    color: #f0e7f8;
    border-color: #7c0fa0;
}

.admin-fleet-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.admin-fleet-panel h3 {
    margin-bottom: 4px;
}

.admin-fleet-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-fleet-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 12px;
}

.admin-fleet-form-grid > label,
.admin-fleet-form-static {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.admin-fleet-form-grid input:not([type="checkbox"]):not([type="hidden"]),
.admin-fleet-form-grid select,
.admin-fleet-form-grid textarea {
    width: 100%;
    min-width: 0;
}

.admin-entity-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-entity-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 12px;
}

.admin-entity-form-grid > label,
.admin-entity-form-static {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.admin-entity-form-grid input:not([type="checkbox"]):not([type="hidden"]),
.admin-entity-form-grid select,
.admin-entity-form-grid textarea {
    width: 100%;
    min-width: 0;
}

.admin-entity-form-static {
    padding: 10px 12px;
    border: 1px solid rgba(171, 146, 209, 0.18);
    background: rgba(40, 28, 54, 0.32);
    border-radius: 6px;
    color: #d9cae8;
}

.admin-entity-form-grid-wide {
    grid-column: span 2;
}

.admin-entity-form-grid-full {
    grid-column: 1 / -1;
}

.admin-entity-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.admin-entity-form-note {
    margin: 0;
    font-size: 10pt;
    color: #a091af;
    line-height: 1.4;
}

.admin-fleet-form-static {
    padding: 10px 12px;
    border: 1px solid rgba(171, 146, 209, 0.18);
    background: rgba(40, 28, 54, 0.32);
    border-radius: 6px;
    color: #d9cae8;
}

.admin-fleet-form-grid-wide {
    grid-column: span 2;
}

.admin-fleet-form-grid-full {
    grid-column: 1 / -1;
}

.admin-fleet-fieldset {
    margin: 0;
    padding: 12px 14px;
}

.admin-fleet-fieldset legend {
    font-weight: bold;
}

.admin-fleet-input-full {
    width: 100%;
    min-width: 0;
}

.admin-fleet-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d4c6e0;
    font-weight: bold;
}

.admin-fleet-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.admin-fleet-form-compact {
    gap: 8px;
}

.admin-fleet-fieldset-compact {
    padding: 10px 12px;
}

.admin-fleet-compact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 12px;
}

.admin-fleet-compact-grid-top {
    grid-template-columns: 1fr 1.5fr 120px;
}

.admin-fleet-compact-item {
    padding: 0;
    border-bottom: none;
    gap: 3px;
}

.admin-fleet-compact-item-wide {
    grid-column: span 2;
}

.admin-fleet-preset-summary {
    margin-top: 6px;
    line-height: 1.35;
}

.admin-fleet-compact-toggle {
    margin-top: 2px;
}

.admin-fleet-query-toolbar {
    margin-top: 10px;
}

.admin-fleet-toolbar-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-fleet-filter-select {
    width: 180px;
}

.admin-fleet-toolbar-actions {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.admin-fleet-list-summary {
    color: #a091af;
    font-size: 9.5pt;
    margin-bottom: 12px;
}

.admin-fleet-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-fleet-list-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    background: #332d39;
    border: 1px solid #4a4056;
    padding: 12px 14px;
}

.admin-fleet-list-media {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.admin-fleet-list-thumb {
    width: 96px;
    height: 64px;
    object-fit: cover;
    border: 1px solid #584d63;
    background: #2a2430;
}

.admin-fleet-list-thumb-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.admin-fleet-list-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.admin-fleet-list-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.admin-fleet-list-title {
    color: #f0e7f8;
    font-size: 12pt;
    font-weight: bold;
}

.admin-fleet-list-subtitle {
    color: #a091af;
    font-size: 9.5pt;
}

.admin-fleet-list-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.admin-fleet-list-badge {
    display: inline-block;
    padding: 2px 7px;
    background: #2a2430;
    border: 1px solid #4a4056;
    color: #d4c6e0;
    font-size: 8.5pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-fleet-list-badge-status {
    border-color: #7c0fa0;
}

.admin-fleet-list-meta,
.admin-fleet-list-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: #cbb8dc;
    font-size: 9.5pt;
}

.admin-fleet-list-label {
    color: #8f7da1;
    font-size: 8.5pt;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-right: 4px;
}

.admin-fleet-list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.admin-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.admin-pagination a,
.admin-pagination-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 6px 10px;
    background: #2a2430;
    border: 1px solid #4a4056;
    color: #d4c6e0;
    text-decoration: none;
}

.admin-pagination a:hover {
    border-color: #7c0fa0;
    color: #fff;
}

.admin-pagination-active {
    border-color: #7c0fa0 !important;
    color: #fff !important;
}

.admin-pagination-disabled {
    color: #7e7288;
}

.settings-hero {
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) minmax(320px, 1fr);
    gap: 18px;
    align-items: start;
}

.settings-hero-copy p {
    color: #a091af;
    line-height: 1.5;
}

.settings-highlight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.settings-highlight-grid-compact {
    margin-bottom: 12px;
}

.settings-highlight-grid-flush {
    margin-bottom: 0;
}

.settings-highlight-grid-spaced {
    margin-bottom: 14px;
}

.admin-dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.admin-dash-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.settings-highlight-card {
    background: #332d39;
    border: 1px solid #4a4056;
    padding: 12px 14px;
}

.settings-highlight-label {
    font-size: 8.5pt;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #8f7da1;
    font-weight: bold;
}

.settings-highlight-value {
    font-size: 16pt;
    color: #f0e7f8;
    font-weight: bold;
    margin-top: 6px;
}

.settings-highlight-detail {
    font-size: 9pt;
    color: #a091af;
    margin-top: 4px;
}

.admin-heading-meta {
    color: #a091af;
    font-weight: normal;
    font-size: 10pt;
}

.settings-live-impact {
    background: #352f3b;
    border: 1px solid #5a4860;
}

.settings-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 12px;
}

.settings-impact-list {
    margin: 8px 0 0;
    padding-left: 18px;
    color: #cbb8dc;
    line-height: 1.5;
}

.settings-impact-list li + li {
    margin-top: 6px;
}

.settings-tab-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(34, 29, 40, 0.97);
    backdrop-filter: blur(8px);
    flex-wrap: wrap;
    padding-top: 4px;
}

.settings-tab-panel {
    display: none;
}
.settings-tab-panel.active {
    display: block;
}

.settings-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(280px, 1fr);
    gap: 18px;
    align-items: start;
}

.settings-search-block,
.settings-toolbar-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.settings-search-input {
    width: 100%;
    min-width: 0;
}

.settings-search-clear {
    background: #2a2430;
    border: 1px solid #584d63;
    color: #d4c6e0;
    padding: 7px 12px;
    cursor: pointer;
}

.settings-search-clear:hover {
    border-color: #7c0fa0;
    color: #fff;
}

.settings-current-tab {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-tab-summary-text {
    color: #d4c6e0;
    font-size: 10pt;
    line-height: 1.4;
}

.hdr-action-link-urgent {
    border-color: #8c1f1f;
    background: linear-gradient(180deg, #5f1d1d 0%, #3f1414 100%);
    box-shadow: 0 0 0 1px rgba(255, 150, 120, 0.12), 0 0 14px rgba(180, 50, 40, 0.28);
}

.hdr-action-link-urgent .hdr-action-badge {
    background: #ffb86c;
    color: #341a10;
}

.decision-urgent-banner {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    background: linear-gradient(180deg, #4c1e20 0%, #341517 100%);
    border: 1px solid #7a3236;
    box-shadow: 0 2px 10px rgba(0,0,0,0.45);
    padding: 14px 16px;
    margin: 0 0 12px;
}

.decision-urgent-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.decision-urgent-label {
    color: #ffbe88;
    font-size: 8.5pt;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    margin-bottom: 4px;
}

.decision-urgent-title {
    color: #fff1dc;
    font-size: 14pt;
    font-weight: bold;
}

.decision-urgent-body {
    color: #f0d5d0;
    font-size: 10pt;
    line-height: 1.5;
    margin-top: 6px;
}

.decision-urgent-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 8px;
    font-size: 9pt;
    color: #d8b1aa;
}

.decision-urgent-meta a {
    color: #ffd9b3;
    text-decoration: underline;
}

.decision-urgent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.decision-queue-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.decision-modal-open {
    overflow: hidden;
}

.decision-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
}

.decision-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 9, 17, 0.72);
    backdrop-filter: blur(6px);
}

.decision-modal-panel {
    position: relative;
    z-index: 1;
    width: min(680px, calc(100vw - 28px));
    margin: 6vh auto 0;
    background: linear-gradient(180deg, #3d313f 0%, #2a242f 100%);
    border: 1px solid #64516a;
    box-shadow: 0 16px 36px rgba(0,0,0,0.48);
    padding: 18px 18px 16px;
}

.decision-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 5px 9px;
    min-width: 0;
    font-size: 14pt;
    line-height: 1;
}

.decision-modal-kicker {
    color: #ffbe88;
    font-size: 8.5pt;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    margin-bottom: 6px;
}

.decision-modal-title {
    margin: 0;
    color: #fff1dc;
}

.decision-modal-body {
    color: #e0d1e6;
    line-height: 1.55;
    margin: 12px 0 10px;
}

.decision-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 9pt;
    color: #bca9c8;
    margin-bottom: 10px;
}

.decision-modal-meta a {
    color: #e7d2ff;
}

.decision-modal-note {
    background: #312933;
    border: 1px solid #4d4255;
    color: #cebcd9;
    padding: 8px 10px;
    margin-top: 8px;
    font-size: 9pt;
    line-height: 1.5;
}

.decision-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

@media (max-width: 720px) {
    .decision-urgent-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .decision-urgent-actions {
        justify-content: stretch;
    }

    .decision-urgent-actions > * {
        flex: 1 1 auto;
    }

    .decision-modal-panel {
        margin-top: 2vh;
        width: calc(100vw - 18px);
        padding: 16px 14px 14px;
    }
}

.settings-jump-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-jump-links a {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: #2a2430;
    border: 1px solid #4a4056;
    color: #cbb8dc;
    text-decoration: none;
    font-size: 9pt;
}

.settings-jump-links a:hover {
    color: #fff;
    border-color: #7c0fa0;
}

.settings-search-status {
    margin: 10px 0 0;
    padding: 10px 12px;
    background: rgba(42, 36, 48, 0.9);
    border: 1px solid #3d3448;
    color: #a091af;
    font-size: 9pt;
}

.settings-section-card {
    scroll-margin-top: 90px;
}

.settings-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}
.settings-section-grid-wide {
    grid-column: 1 / -1;
}

.setting-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid #3d3448;
}
.setting-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.setting-label {
    display: block;
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a091af;
    font-weight: bold;
    margin-bottom: 2px;
}

.setting-note {
    font-size: 9pt;
    color: #6a5a7a;
    margin: 3px 0 0 0;
    line-height: 1.4;
}

.settings-note-tight {
    margin-top: 0;
}

@media (max-width: 860px) {
    .admin-tool-hero,
    .admin-tool-grid,
    .admin-fleet-summary,
    .settings-hero,
    .settings-toolbar,
    .settings-impact-grid,
    .settings-section-grid {
        grid-template-columns: 1fr;
    }

    .admin-tool-kpi-grid,
    .settings-highlight-grid,
    .settings-lane-kpi-grid {
        grid-template-columns: 1fr;
    }

    .settings-lane-toolbar,
    .settings-lane-filter-grid {
        grid-template-columns: 1fr;
    }

    .settings-lane-toolbar {
        display: grid;
        align-items: stretch;
    }

    .admin-dash-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-dash-two-col {
        grid-template-columns: 1fr;
    }

    .admin-fleet-list-row {
        grid-template-columns: 1fr;
    }

    .admin-fleet-list-media {
        justify-content: flex-start;
    }

    .admin-fleet-toolbar-actions {
        align-items: flex-start;
    }

    .admin-fleet-compact-grid,
    .admin-fleet-compact-grid-top,
    .admin-fleet-form-grid,
    .admin-entity-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-fleet-compact-item-wide,
    .admin-fleet-form-grid-wide,
    .admin-entity-form-grid-wide {
        grid-column: auto;
    }

    .admin-fleet-list-header {
        flex-direction: column;
    }

    .admin-fleet-list-badges {
        justify-content: flex-start;
    }
}

.settings-input,
.settings-select {
    background: #2a2430;
    border: 1px solid #584d63;
    color: #d4c6e0;
    padding: 6px 8px;
    font-size: 11pt;
    width: 120px;
}
.settings-input:focus,
.settings-select:focus {
    outline: none;
    border-color: #7c0fa0;
}
.settings-textarea {
    width: 100%;
    min-height: 220px;
    resize: vertical;
    background: #211c26;
    border: 1px solid #584d63;
    color: #d4c6e0;
    padding: 10px 12px;
    font-size: 9.5pt;
    line-height: 1.45;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.settings-textarea:focus {
    outline: none;
    border-color: #7c0fa0;
}
.settings-input-sm { width: 80px; }
.settings-input-lg { width: 180px; }
.settings-item-full {
    grid-column: 1 / -1;
}

.settings-inline-range {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 2px;
    flex-wrap: wrap;
}

.settings-inline-sep {
    color: #a091af;
}

.settings-inline-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d4c6e0;
    margin-top: 6px;
}

.settings-choice-row {
    display: flex;
    gap: 16px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.settings-choice-label {
    color: #d4c6e0;
    font-size: 11pt;
    cursor: pointer;
}

.settings-two-col-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.settings-group-heading {
    margin: 0 0 8px;
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a091af;
    font-weight: bold;
}

.settings-ref-center {
    text-align: center !important;
}

.settings-ref-right {
    text-align: right !important;
}

.settings-accent-text {
    color: #a78bfa;
}

.settings-muted-value {
    color: #6a5a7a;
}

.settings-tier-cell {
    font-weight: bold;
}

.settings-tier-newcomer {
    color: #888;
}

.settings-tier-reliable {
    color: #5b9bd5;
}

.settings-tier-trusted {
    color: #66bb6a;
}

.settings-tier-respected {
    color: #ab47bc;
}

.settings-tier-renowned {
    color: #ffa726;
}

.settings-tier-legendary {
    color: #ef5350;
}

.settings-reward-text {
    color: #a8e6b8;
}

.settings-json-toggle {
    margin-top: 14px;
}
.settings-lane-analytics {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #3d3448;
}
.settings-lane-analytics-head h4 {
    margin: 0 0 4px;
    color: #d4c6e0;
}
.settings-lane-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin-top: 12px;
}
.settings-lane-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    flex: 1;
}
.settings-lane-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.settings-lane-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.settings-lane-clear {
    color: #b9aac9;
    text-decoration: none;
    font-size: 9pt;
}
.settings-lane-clear:hover {
    color: #efe7f7;
    text-decoration: underline;
}
.settings-lane-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.settings-lane-kpi {
    background: #2a2430;
    border: 1px solid #584d63;
    padding: 10px 12px;
}
.settings-lane-kpi-label {
    color: #a091af;
    font-size: 8pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}
.settings-lane-kpi-value {
    color: #f0e8f8;
    font-size: 15pt;
    font-weight: bold;
    margin-top: 4px;
}
.settings-lane-kpi-detail {
    color: #7b6a8d;
    font-size: 8.5pt;
    margin-top: 4px;
    line-height: 1.35;
}
.settings-lane-table {
    margin-top: 12px;
}
.settings-lane-subline {
    margin-top: 3px;
    color: #8f82a0;
    font-size: 8.3pt;
}
.settings-lane-empty {
    margin-top: 12px;
}
.settings-lane-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
}
.settings-lane-external-form {
    display: none;
}

.settings-preview {
    display: inline-block;
    background: #2a2430;
    border: 1px solid #3d3448;
    color: #8a7a9a;
    padding: 3px 7px;
    font-size: 9pt;
    font-family: monospace;
    margin-top: 3px;
}

.settings-save-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #332d3a;
    border-top: 2px solid #7c0fa0;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    z-index: 100;
}
#settings-form {
    padding-bottom: 70px;
}
.settings-save-notice {
    color: #a8e6b8;
    font-size: 10pt;
}

.settings-save-notice-muted {
    color: #6a5a7a;
}
.settings-save-btn {
    background: #7c0fa0;
    border: 1px solid #9c1fc0;
    color: #fff;
    padding: 10px 28px;
    font-size: 11pt;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.15s;
}
.settings-save-btn:hover {
    background: #9c1fc0;
}

.settings-reference-block h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-reference-block-spaced {
    margin-top: 8px;
}

.settings-ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
}
.settings-ref-table th {
    background: #2a2430;
    border: 1px solid #584d63;
    padding: 5px 8px;
    text-align: left;
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a091af;
}

@media (max-width: 980px) {
    .settings-hero,
    .settings-toolbar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .admin-dash-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Player Dashboard Overhaul ───────────────────────────────────────────── */

.dash-hero-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.dash-hero-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.dash-hero-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 2px solid #7c0fa0;
    object-fit: cover;
    flex-shrink: 0;
}
.dash-hero-avatar-placeholder {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 2px solid #7c0fa0;
    background: #5b2d8e;
    display: flex; align-items: center; justify-content: center;
    font-size: 20pt; font-weight: bold; color: #d4c6e0;
    flex-shrink: 0;
}
.dash-hero-name  { font-size: 14pt; font-weight: bold; color: #d4c6e0; }
.dash-hero-sub   { font-size: 9pt; color: #a091af; margin-top: 3px; }
.dash-hero-stats {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    margin-left: auto;
    align-items: stretch;
}
.dash-hero-stat {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-left: 1px solid #584d63;
    padding: 2px 16px;
    min-width: 58px;
}
.dash-hero-stat-label { font-size: 7pt; text-transform: uppercase; color: #a091af; letter-spacing: 0.7px; }
.dash-hero-stat-value { font-size: 12pt; font-weight: bold; color: #d4c6e0; margin-top: 2px; }
.dash-hero-funds      { color: #a8e6b8 !important; }

/* Active trip cards */
.dash-trip-cards { display: flex; flex-direction: column; gap: 8px; }
.dash-trip-card {
    background: #45404a; border: 1px solid #584d63; padding: 12px 14px;
    display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
    transition: border-color 0.15s;
}
.dash-trip-card:hover { border-color: #7c0fa0; }
.dash-trip-card-left  { flex: 1; min-width: 0; }
.dash-trip-card-route { font-size: 11pt; font-weight: bold; color: #d4c6e0; }
.dash-trip-card-meta  {
    font-size: 9pt; color: #a091af; margin-top: 4px;
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.dash-trip-card-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0;
}

/* Empty / CTA state */
.dash-empty-state { text-align: center; padding: 20px 16px; color: #a091af; }
.dash-empty-state-cta {
    display: inline-block; margin-top: 8px; padding: 8px 20px;
    background: #5b2d8e; color: #d4c6e0; text-decoration: none;
    font-size: 10pt; font-weight: bold; letter-spacing: 0.3px;
}
.dash-empty-state-cta:hover { background: #7c0fa0; color: #fff; }

/* Delivery list */
.dash-delivery-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid #584d63;
}
.dash-delivery-row:last-child { border-bottom: none; }

/* Production / storage fill bar */
.dash-prod-bar { height: 5px; background: #2a2430; border-radius: 3px; overflow: hidden; margin-top: 5px; }
.dash-prod-bar-fill { height: 100%; background: linear-gradient(90deg, #7c5cbf, #a78bfa); border-radius: 3px; }

/* Fleet condition inline bar */
.dash-cond-bar {
    display: inline-block; width: 56px; height: 4px;
    background: #2a2430; border-radius: 2px; overflow: hidden;
    vertical-align: middle; margin-left: 6px;
}
.dash-cond-bar-fill { height: 100%; border-radius: 2px; }
.cond-good { background: #3d8a50; }
.cond-fair { background: #8a7a3d; }
.cond-poor { background: #8a3d3d; }

/* Fleet label rows */
.dash-fleet-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border-bottom: 1px solid #584d63;
}
.dash-fleet-row:last-child { border-bottom: none; }
.dash-fleet-label { color: #a091af; font-size: 9pt; text-transform: uppercase; letter-spacing: 0.7px; }

/* Perk chips */
.dash-perk-strip { display: flex; flex-wrap: wrap; gap: 5px; }
.dash-perk-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
    background: #2a3a2e; border: 1px solid #4a9e5a; font-size: 9pt; color: #a8e6b8;
}
.dash-perk-chip-next { background: #32284a; border-color: #7c5cbf; color: #a78bfa; }

@media (max-width: 700px) {
    .dash-hero-inner  { flex-direction: column; align-items: flex-start; }
    .dash-hero-stats  { margin-left: 0; width: 100%; justify-content: flex-start; }
    .dash-hero-stat   { border-left: none; border-right: 1px solid #584d63; padding: 4px 12px; }
    .dash-trip-card   { flex-direction: column; }
    .dash-delivery-row { flex-wrap: wrap; }
}

@media (max-width: 720px) {
    .settings-section-grid,
    .settings-highlight-grid,
    .settings-two-col-groups {
        grid-template-columns: 1fr;
    }

    .settings-search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-search-clear {
        width: 100%;
    }

    .settings-tab-nav a {
        flex: 1 1 calc(50% - 2px);
        text-align: center;
        padding: 10px 12px;
    }

    .settings-save-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
}
.settings-ref-table td {
    border: 1px solid #584d63;
    padding: 5px 8px;
    vertical-align: middle;
}

.admin-text-xs {
    font-size: 10pt;
}

.admin-table-spaced-top {
    margin-top: 10px;
}

.admin-table-spaced-bottom {
    margin-bottom: 14px;
}

.settings-subheading {
    margin-bottom: 6px;
}
.settings-ref-table tbody tr:hover td {
    background: #45404a;
}
.settings-ref-table tr.ref-row-active td {
    background: #3a3050;
}
.settings-ref-table tr.ref-row-perk td {
    background: #2a2840;
}

.settings-cron-url {
    font-family: monospace;
    font-size: 10pt;
    background: #2a2430;
    border: 1px solid #584d63;
    color: #a8e6b8;
    padding: 8px 12px;
    display: block;
    word-break: break-all;
    margin-top: 4px;
    user-select: all;
    cursor: text;
}

/* Onboarding Panel */
.onboarding-panel {
    background: linear-gradient(135deg, #2a1f3d, #1e1a2e);
    border: 1px solid #5b2d8e;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}
.onboarding-panel h2 {
    margin: 0 0 16px 0;
    color: #d4c6e0;
}
.onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.onboarding-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid transparent;
}
.onboarding-step.step-done {
    border-color: #3d8a50;
    background: rgba(45,94,58,0.15);
}
.onboarding-step.step-next {
    border-color: #7c0fa0;
    background: rgba(91,45,142,0.15);
}
.step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #45404a;
    color: #d4c6e0;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}
.step-done .step-num {
    background: #2d5e3a;
    color: #a8e6b8;
}
.step-next .step-num {
    background: #5b2d8e;
    color: #d4c6e0;
}
.onboarding-step p {
    margin: 4px 0 8px;
    font-size: 10pt;
    color: #a89ab4;
}
.onboarding-btn {
    display: inline-block;
    padding: 6px 14px;
    background: #5b2d8e;
    color: #d4c6e0;
    border-radius: 4px;
    text-decoration: none;
    font-size: 10pt;
}
.onboarding-btn:hover {
    background: #7c0fa0;
}

/* ── Landing / Login page ─────────────────────────────────────────────── */
.landing-wrap {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    padding: 24px 8px;
}
.landing-hero {
    flex: 1 1 55%;
    padding: 8px 0;
}
.landing-logo {
    font-size: 48pt;
    line-height: 1;
    margin-bottom: 8px;
    text-shadow: 0 0 24px #7c0fa0, 1px 1px 2px #000;
}

.landing-logo img {
    width:700px;
    height: auto;
}
.landing-title {
    font-size: 28pt;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #e8d8ff;
    text-shadow: 0 0 16px #7c0fa080, 1px 1px 2px #000;
    letter-spacing: 2px;
}
.landing-tagline {
    font-size: 13pt;
    color: #c0a8e0;
    margin: 0 0 14px 0;
    font-style: italic;
}
.landing-desc {
    font-size: 10.5pt;
    color: #b0a0c8;
    line-height: 1.65;
    margin: 0 0 20px 0;
    max-width: 480px;
}
.landing-features {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 28px;
}
.landing-feature {
    font-size: 10pt;
    color: #c8b8e0;
    background: rgba(124,15,160,0.12);
    border-left: 3px solid #7c0fa0;
    padding: 5px 10px;
}
.landing-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.landing-stat {
    background: #3a3040;
    border: 1px solid #584d63;
    padding: 10px 16px;
    text-align: center;
    min-width: 90px;
}
.landing-stat-val {
    display: block;
    font-size: 16pt;
    font-weight: 700;
    color: #d4a0ff;
    line-height: 1.1;
}
.landing-stat-lbl {
    display: block;
    font-size: 8pt;
    color: #a091af;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.landing-auth {
    flex: 0 0 300px;
    background: #3a3040;
    border: 1px solid #584d63;
    padding: 28px 24px;
}
.landing-auth .error,
.landing-auth .success {
    margin-bottom: 12px;
}
.auth-form h2 {
    margin: 0 0 20px 0;
    font-size: 15pt;
    color: #e8d8ff;
}
.auth-form input {
    width: 100%;
    margin-bottom: 12px;
    border-radius: 4px;
    font-size: 10.5pt;
}
.auth-form button[type="submit"] {
    width: 100%;
    margin-top: 4px;
    padding: 11px;
    background: #7c0fa0;
    border: none;
    font-size: 11pt;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.15s;
}
.auth-form button[type="submit"]:hover {
    background: #9a20c4;
}
.auth-switch {
    margin-top: 16px;
    font-size: 9.5pt;
    color: #a091af;
    text-align: center;
}
.auth-switch a {
    color: #c0a0e0;
}
/* Simple centred wrap for forgot/reset/change-pw pages */
.auth-simple-wrap {
    max-width: 380px;
    margin: 40px auto;
    background: #3a3040;
    border: 1px solid #584d63;
    padding: 28px 24px;
}
.auth-simple-wrap .auth-form input { width: 100%; margin-bottom: 12px; }
.auth-simple-wrap .auth-form button[type="submit"] {
    width: 100%;
    padding: 11px;
    background: #7c0fa0;
    border: none;
    font-size: 11pt;
    color: #fff;
    cursor: pointer;
}
.auth-simple-wrap .auth-form button[type="submit"]:hover { background: #9a20c4; }
@media (max-width: 700px) {
    .landing-wrap { flex-direction: column; }
    .landing-auth { flex: 1 1 100%; width: 100%; box-sizing: border-box; }
    .landing-title { font-size: 20pt; }
}

/* ============================================================
   FEEL-GOOD DASHBOARD ANIMATIONS
   ============================================================ */

/* ── 1. KPI card stagger fade-in ──────────────────────────── */
.kpi-card {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease,
                border-color 0.2s ease, box-shadow 0.2s ease;
}
.kpi-card.kpi-card-visible {
    opacity: 1;
    transform: translateY(0);
}
.kpi-card.kpi-card-visible:hover {
    border-color: #a78bfa !important;
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.25);
    transform: translateY(-2px);
}

/* ── 3. Progress bar shimmer via ::after ─────────────────── */
@keyframes bar-shimmer {
    0%   { left: -60%; }
    100% { left: 120%; }
}
.progress-fill,
.dash-xp-bar-fill,
.dash-prod-bar-fill,
.dash-cond-bar-fill,
.trip-progress-fill {
    position: relative;
    overflow: hidden;
}
.progress-fill::after,
.dash-xp-bar-fill::after,
.dash-prod-bar-fill::after,
.dash-cond-bar-fill::after,
.trip-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%
    );
    animation: bar-shimmer 2.5s ease-in-out infinite;
    pointer-events: none;
}
.trip-progress-fill::after {
    animation-duration: 1.8s;
}

/* ── 4. XP bar pulsing glow (header) ─────────────────────── */
@keyframes xp-bar-pulse {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 8px rgba(167, 139, 250, 0.6), 0 0 16px rgba(124, 91, 191, 0.25); }
}
.hdr-xp-bar-fill {
    animation: xp-bar-pulse 2.2s ease-in-out infinite;
    transition: width 0.6s ease;
}

/* ── 5. XP bar tick marks ─────────────────────────────────── */
.dash-xp-bar-ticked {
    position: relative;
}
.xp-tick {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.22);
    z-index: 2;
    pointer-events: none;
}

/* ── 6. Delivery row slide-in ─────────────────────────────── */
@keyframes delivery-slide-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
.delivery-row-animated {
    opacity: 0;
}
.delivery-row-animated.delivery-visible {
    animation: delivery-slide-in 0.3s ease-out forwards;
}

/* ── 7. Money payout glow ─────────────────────────────────── */
.money-payout {
    text-shadow: 0 0 8px rgba(168, 230, 184, 0.45);
}

/* ── 8. Delivery truck icon ───────────────────────────────── */
.delivery-truck-icon {
    font-size: 9pt;
    opacity: 0.65;
    margin-right: 3px;
}

/* ── 9. Funds flash green ─────────────────────────────────── */
@keyframes funds-flash {
    0%   { text-shadow: none; }
    20%  { text-shadow: 0 0 12px rgba(168, 230, 184, 0.9), 0 0 24px rgba(168, 230, 184, 0.4); color: #c8ffda; }
    60%  { text-shadow: 0 0 6px rgba(168, 230, 184, 0.5); color: #a8e6b8; }
    100% { text-shadow: none; color: #a8e6b8; }
}
.funds-flash-animate {
    animation: funds-flash 1.1s ease-out forwards;
}

/* ── 10. Vehicle condition bar color gradients ──────────────*/
.dash-cond-bar-fill.cond-good {
    background: linear-gradient(90deg, #2d6e3f, #3dbb57);
    box-shadow: 0 0 4px rgba(61, 187, 87, 0.35);
}
.dash-cond-bar-fill.cond-fair {
    background: linear-gradient(90deg, #7a6a1a, #c4aa2c);
    box-shadow: 0 0 4px rgba(196, 170, 44, 0.3);
}
.dash-cond-bar-fill.cond-poor {
    background: linear-gradient(90deg, #7a1a1a, #c42c2c);
    box-shadow: 0 0 4px rgba(196, 44, 44, 0.35);
}

/* ── 11. Active trips pulsing dot ──────────────────────────*/
@keyframes hdr-active-pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(61, 187, 87, 0.5); }
    50%       { opacity: 0.8; transform: scale(0.85); box-shadow: 0 0 0 3px rgba(61, 187, 87, 0); }
}
.hdr-active-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3dbb57;
    animation: hdr-active-pulse 1.6s ease-in-out infinite;
    margin-right: 4px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* ── 12. Jobs — multi-stop route panel & step layout ───────*/
.jobs-step2-layout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.jobs-cargo-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 10px;
}
.jobs-cargo-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #d9cdee;
    font-size: 9pt;
}
.jobs-cargo-filter-note {
    color: #a090b5;
    font-size: 8.5pt;
}
.jobs-cargo-col {
    flex: 1 1 0;
    min-width: 0;
}
.jobs-route-col {
    flex: 0 0 260px;
    width: 260px;
}
.jobs-route-panel {
    background: #3c3840;
    border: 1px solid #5d5468;
    padding: 10px;
    position: sticky;
    top: 10px;
}
.jobs-route-panel.jobs-route-panel-inline {
    position: static;
    top: auto;
    height: auto;
}
.jobs-load-plan-panel {
    margin-top: 10px;
    position: static;
}
.jobs-load-plan-panel.jobs-load-plan-panel-inline {
    margin-top: 0;
}
.jobs-route-panel-title {
    color: #d4c6e0;
    font-size: 9pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #584d63;
}
.jobs-route-panel-title-secondary {
    margin-top: 12px;
}
.jobs-route-panel-empty {
    color: #8a7d99;
    font-size: 9pt;
    margin: 0;
}
.jobs-route-summary {
    margin: 0 0 8px;
    padding: 7px 8px;
    background: #45404a;
    border: 1px solid #5d5468;
}
.jobs-route-summary-line {
    color: #bfb1cc;
    font-size: 8.5pt;
}
.jobs-route-summary-line + .jobs-route-summary-line {
    margin-top: 3px;
}
.jobs-route-stop {
    padding: 6px 8px;
    margin-bottom: 2px;
    border-left: 3px solid #655c71;
    background: #45404a;
}
.jobs-route-stop-pickup  { border-left-color: #7a5ca2; }
.jobs-route-stop-dropoff { border-left-color: #6b6f97; }
.jobs-route-stop-both    { border-left-color: #8b6fae; }
.jobs-route-stop-over    { border-left-color: #7b5366 !important; background: #4a3b45; }
.jobs-route-stop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.jobs-route-stop-city {
    font-weight: bold;
    color: #efe6fb;
    font-size: 9pt;
    flex: 1;
}
.jobs-route-stop-miles {
    color: #8a7d99;
    font-size: 8pt;
    white-space: nowrap;
}
.jobs-route-action {
    font-size: 8pt;
    padding: 1px 0;
    color: #c7bad6;
}
.jobs-route-action-pick { color: #d4c6e0; }
.jobs-route-action-drop { color: #c2c5e2; }
.jobs-route-connector {
    text-align: center;
    color: #4f445b;
    line-height: 1;
    margin: 1px 0;
    font-size: 8pt;
}
.jobs-cap-bar-wrap {
    height: 5px;
    background: #1e1a24;
    border-radius: 3px;
    margin-top: 5px;
    overflow: hidden;
}
.jobs-cap-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.2s ease;
}
.jobs-cap-bar-ok   { background: #6c58a3; }
.jobs-cap-bar-high { background: #8b6fae; }
.jobs-cap-bar-over { background: #7b5366; }
.jobs-cap-bar-label {
    font-size: 8pt;
    color: #8a7d99;
    margin-top: 2px;
}
.jobs-cap-bar-over-label {
    color: #e05050;
    font-weight: bold;
}
.jobs-capacity-header {
    font-size: 9pt;
    color: #a090b5;
    padding: 4px 0 8px;
}
.jobs-load-plan-note {
    color: #a090b5;
    font-size: 8.5pt;
    margin: 0 0 8px;
    line-height: 1.4;
}
.jobs-load-plan-list {
    display: grid;
    gap: 6px;
}
.jobs-load-plan-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px;
    background: #332d3a;
    border: 1px solid #4f445b;
    cursor: grab;
}
.jobs-load-plan-item-ready {
    border-left: 3px solid #3d8a50;
}
.jobs-load-plan-item-blocked {
    border-left: 3px solid #c0392b;
    background: #3b2629;
}
.jobs-load-plan-item-dragging {
    opacity: 0.55;
}
.jobs-load-plan-item-target {
    border-color: #8a6bb7;
    box-shadow: 0 0 0 1px #8a6bb7 inset;
}
.jobs-load-plan-grip {
    color: #8a7d99;
    font-size: 11pt;
    line-height: 1;
    padding-top: 1px;
    user-select: none;
}
.jobs-load-plan-body {
    flex: 1 1 auto;
    min-width: 0;
}
.jobs-load-plan-name {
    color: #efe6fb;
    font-size: 8.8pt;
    font-weight: bold;
}

.jobs-load-plan-ghost-tag {
    color: #a090b5;
    font-size: 7.8pt;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.jobs-load-plan-index {
    color: #8a7d99;
}
.jobs-load-plan-meta {
    color: #b4a7c0;
    font-size: 8pt;
    margin-top: 3px;
    line-height: 1.35;
}
.jobs-load-plan-status {
    color: #87c69c;
    font-size: 8pt;
    margin-top: 4px;
}
.jobs-load-plan-status-bad {
    color: #e5a2a2;
}

.jobs-load-plan-remove {
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #9f8eb3;
    font-size: 14pt;
    line-height: 1;
    cursor: pointer;
}

.jobs-load-plan-remove:hover {
    color: #efe6fb;
}
.jobs-rig-capacity-note {
    font-size: 9pt;
    color: #a090b5;
    margin-top: 6px;
    padding: 6px 8px;
    background: #332d3a;
    border: 1px solid #4f445b;
}
.jobs-summary-notes {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.jobs-summary-notes .jobs-summary-note {
    margin: 0;
}

.jobs-cargo-step-locked .jobs-cargo-toolbar,
.jobs-cargo-step-locked .jobs-cargo-col,
.jobs-cargo-step-locked .jobs-capacity-header {
    opacity: 0.45;
    pointer-events: none;
}
.jobs-cargo-step-locked .jobs-cargo-step-hint {
    display: block;
}
.jobs-cargo-step-hint {
    display: none;
    font-size: 9pt;
    color: #a07030;
    margin-bottom: 8px;
}
.jobs-cargo-hidden {
    display: none;
}
.cargo-table tbody tr.jobs-cargo-incompatible {
    opacity: 0.62;
    background: #31272d;
}
@media (max-width: 860px) {
    .jobs-step2-layout { flex-direction: column; }
    .jobs-route-col { width: 100%; flex: 1 1 auto; }
    .jobs-route-panel { position: static; }
    .jobs-cargo-toolbar { align-items: flex-start; }
    .jobs-summary-topline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .jobs-driver-shell,
    .jobs-run-planner-grid {
        grid-template-columns: 1fr;
    }
    .jobs-planner-submit {
        flex-direction: column;
        align-items: stretch;
    }
    .jobs-run-actions .ui-empty-action,
    .jobs-run-actions button {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ── 13. Trip truck emoji riding progress bar ───────────────*/
.trip-truck-icon {
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11pt;
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(168, 230, 184, 0.5));
    z-index: 2;
}