:root {
    --header-color: #0d4d8b;
    --background-color: #edf4fb;
    --card-color: #ffffff;
    --button-color: #0f6ad6;
    --text-color: #12263f;
    --radius: 14px;
    --shadow: 0 16px 32px rgba(17, 31, 52, 0.08);
    --font-family: Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: #edf4fb;
    font-family: var(--font-family);
    color: var(--text-color);
}

.hub-header {
    background: #0d4d8b;
    color: #fff;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hub-header h1 {
    margin: 0;
    font-size: 22px;
}

.hub-header a, .hub-header button {
    color: #fff;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.18);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

.hub-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 20px 0;
}

.hub-nav a {
    text-decoration: none;
    color: #123254;
    background: #fff;
    border: 1px solid #d5e3f2;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 700;
}

.hub-nav a.active {
    background: #0f6ad6;
    color: #fff;
    border-color: #0f6ad6;
}

.hub-main { padding: 20px; max-width: 1180px; margin: 0 auto; }

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border: 1px solid #dce7f3;
    border-radius: 16px;
    padding: 18px 16px 16px;
    text-decoration: none;
    color: inherit;
    min-height: 168px;
    box-shadow: var(--shadow);
}

.tile:hover { border-color: #0f6ad6; }

.tile-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #e8f1fb;
    color: #0d4d8b;
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 800;
}

.tile strong { font-size: 16px; }
.tile span { color: #5b6d82; font-size: 13px; line-height: 1.4; }
.tile em { font-style: normal; font-size: 22px; font-weight: 800; color: #0f6ad6; }

.panel {
    background: #fff;
    border: 1px solid #dce7f3;
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow);
}

.panel h2 { margin: 0 0 6px; }
.panel p.lead { margin: 0 0 16px; color: #5b6d82; }

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

label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
input, select, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #c9d7e6;
    border-radius: 8px;
    font: inherit;
}

button.btn, .btn {
    background: var(--button-color);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
}

button.btn.secondary { background: #5b6d82; }
button.btn.danger { background: #b42318; }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.record-list { display: grid; gap: 10px; margin-top: 16px; }

.record {
    border: 1px solid #dce7f3;
    border-radius: 12px;
    padding: 12px;
}

.record h3 { margin: 0 0 6px; font-size: 16px; }
.record p { margin: 0 0 8px; color: #5b6d82; font-size: 13px; white-space: pre-wrap; }

.status { font-size: 12px; font-weight: 800; text-transform: uppercase; }

.type-choices { display: grid; gap: 8px; margin-bottom: 12px; }
.type-choice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid #dce7f3;
    border-radius: 10px;
    padding: 10px;
}
.type-choice input { width: auto; margin-top: 3px; }
.owner-fields { display: none; }
.owner-fields.show { display: block; }

.notice { color: #9a3412; background: #fff7ed; border: 1px solid #fdba74; padding: 10px; border-radius: 8px; margin-bottom: 12px; }
.status-line { margin: 8px 0; min-height: 1.2em; }
.map-frame { width: 100%; height: 280px; border: 1px solid #dce7f3; border-radius: 12px; margin: 12px 0; }
.record.selected { border-color: #0f6ad6; }

.driver-form .hub-main { max-width: 1480px; padding: 8px 10px 16px; }
.driver-form .panel { padding: 8px; border-radius: 4px; }
.driver-form .panel h2 { margin: 0 0 6px; font-size: 16px; }
.driver-form .panel p.lead { display: none; }
.driver-form input, .driver-form select, .driver-form textarea {
    padding: 2px 5px;
    min-height: 22px;
    border-radius: 2px;
    font-size: 12px;
}
.driver-form label { font-size: 11px; margin: 0; font-weight: 600; }
.driver-form .btn { padding: 4px 10px; border-radius: 3px; font-size: 12px; }
.picker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}
.picker-row .field { display: flex; align-items: center; gap: 6px; flex: 1 1 360px; }
.picker-row select { max-width: 360px; }
.emp-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 6px; font-size: 12px; }
.emp-row label { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.emp-row input { width: auto; min-height: 0; }
.owner-inline { display: none; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 8px; align-items: center; margin: 0 0 6px; }
.owner-inline.show { display: grid; }
.driver-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 4px 0 0;
    border-bottom: 1px solid #8fa0b0;
}
.driver-tabs a, .driver-tabs button {
    display: inline-block;
    border: 1px solid #8fa0b0;
    border-bottom: 0;
    background: #cfd8e0;
    color: #12263f;
    padding: 4px 10px;
    margin: 0 1px 0 0;
    border-radius: 3px 3px 0 0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
.driver-tabs a.active, .driver-tabs button.active { background: #ececec; position: relative; top: 1px; }
.tab-panel {
    display: none;
    padding: 6px;
    border: 1px solid #8fa0b0;
    border-top: 0;
    background: #ececec;
    min-height: 420px;
}
.tab-panel.active,
.tab-panel.active[hidden] { display: block !important; }
#chargeForm,
#chargeForm[hidden] { display: block !important; }
.driver-sheet {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
@media (max-width: 1200px) { .driver-sheet { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .driver-sheet { grid-template-columns: 1fr; } }
.fieldset {
    border: 1px solid #8fa0b0;
    border-radius: 3px;
    background: #e6e6e6;
    padding: 6px 8px 8px;
    margin: 0;
    min-width: 0;
}
.fieldset legend { font-weight: 800; font-size: 12px; padding: 0 4px; }
.compact-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 3px 6px; align-items: center; margin-bottom: 3px; }
.compact-row label { text-align: right; }
.inline-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.zip-row { display: grid; grid-template-columns: 118px 52px minmax(0, 1fr); gap: 3px 6px; align-items: center; margin-bottom: 3px; }
.zip-row label { text-align: right; }
.check-row { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; margin: 3px 0 3px 118px; }
.check-row input { width: auto; min-height: 0; }
.warn-label { color: #9a3412; }
.endorsement-table { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; }
.endorsement-table th, .endorsement-table td { border: 1px solid #b7c4d0; padding: 2px 4px; }
.endorsement-table input { padding: 2px 4px; min-height: 20px; }
.tab-page { max-width: 720px; }
.tab-page textarea { min-height: 280px; }
.tab-page #chargeNotes { min-height: 64px; }
.charge-file-hint { margin: 0 0 8px 118px; font-size: 11px; color: #5b6d82; }
.charge-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 8px 118px; }
.charge-files.saved { margin-left: 0; }
.charge-file {
    display: grid;
    gap: 4px;
    width: 140px;
    padding: 6px;
    background: #fff;
    border: 1px solid #b7c4d0;
    font-size: 11px;
}
.charge-file img { width: 100%; height: 90px; object-fit: contain; background: #f4f7fb; }
.charge-file a { color: #0d4d8b; font-weight: 700; word-break: break-word; }
.tab-page .fieldset { margin-bottom: 6px; }
.truck-sheet {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr 1fr;
    gap: 6px;
    align-items: start;
}
.truck-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fleet-scan-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 8px;
    padding: 8px;
    background: #e8f1fb;
    border: 1px solid #b7c4d0;
    border-radius: 4px;
    font-size: 12px;
}
.fleet-scan-bar strong { font-size: 12px; }
.fleet-scan-status { color: #5b6d82; flex: 1 1 240px; }
.fleet-scan-status.warn { color: #9a3412; font-weight: 700; }
.fleet-scan-status.error { color: #b42318; font-weight: 700; }
@media (max-width: 1100px) { .truck-sheet { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .truck-sheet { grid-template-columns: 1fr; } }
.trailer-form .hub-header,
.truck-form .hub-header { padding: 6px 10px; }
.trailer-form .hub-header h1,
.truck-form .hub-header h1 { font-size: 15px; }
.trailer-form .hub-nav,
.truck-form .hub-nav { padding: 4px 8px 0; }
.trailer-form .hub-nav a,
.truck-form .hub-nav a { padding: 3px 8px; font-size: 12px; }
.trailer-form .hub-main,
.truck-form .hub-main { max-width: none; padding: 4px 8px 8px; }
.trailer-form .panel,
.truck-form .panel { padding: 4px; }
.trailer-form .panel h2,
.truck-form .panel h2 { font-size: 14px; margin: 0 0 4px; }
.trailer-form .tab-panel,
.truck-form .tab-panel { min-height: 0 !important; padding: 4px; }
.trailer-form .compact-row,
.truck-form .compact-row { grid-template-columns: 58px minmax(0, 1fr); margin-bottom: 1px; gap: 1px 3px; }
.trailer-form .zip-row,
.truck-form .zip-row { grid-template-columns: 58px 1fr 36px; gap: 1px 3px; margin-bottom: 1px; }
.trailer-form .check-row,
.truck-form .check-row { margin: 1px 0; }
.trailer-form .fieldset,
.truck-form .fieldset { padding: 1px 4px 3px; }
.trailer-form .fieldset legend,
.truck-form .fieldset legend { font-size: 11px; }
.trailer-form input, .trailer-form select, .trailer-form textarea,
.truck-form input, .truck-form select, .truck-form textarea { min-height: 18px; padding: 0 3px; font-size: 11px; }
.trailer-sheet,
.truck-form .truck-sheet {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    align-items: start;
}
.trailer-sheet .span-2,
.truck-form .truck-sheet .span-2 { grid-column: span 2; }
.trailer-form .pair-grid,
.truck-form .pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 6px; }
.trailer-form .inline-checks,
.truck-form .inline-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 1px 0;
    font-size: 11px;
    font-weight: 600;
    align-items: center;
}
.trailer-form .inline-checks input,
.truck-form .inline-checks input { width: auto; min-height: 0; }
.trailer-form #comments,
.truck-form #comments { min-height: 36px; height: 36px; }
.trailer-form .tab-page,
.truck-form .tab-page { max-width: none; }
.trailer-form .tab-page textarea,
.truck-form .tab-page textarea { min-height: 80px; }
.trailer-form .row-actions,
.truck-form .row-actions { margin-top: 4px; }
.trailer-form #componentRows tr td:last-child { width: 64px; }
@media (max-width: 1100px) {
    .trailer-sheet,
    .truck-form .truck-sheet { grid-template-columns: 1fr 1fr; }
    .trailer-sheet .span-2,
    .truck-form .truck-sheet .span-2 { grid-column: span 1; }
}
@media (max-width: 720px) {
    .trailer-sheet,
    .truck-form .truck-sheet,
    .trailer-form .pair-grid,
    .truck-form .pair-grid { grid-template-columns: 1fr; }
}