:root { --ink: #18333b; --muted: #60757b; --paper: #f7f5ef; --panel: #ffffff; --line: #d8e0dc; --teal: #087c78; --teal-dark: #075b5a; --sun: #f5b642; --coral: #e36d55; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Georgia, "Times New Roman", serif; }
.topbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 14px max(5vw, 28px); background: var(--ink); color: white; }
.brand { color: white; text-decoration: none; display: grid; line-height: 1; gap: 5px; letter-spacing: 0; }.brand span, .eyebrow { font: 700 11px/1.1 Arial, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }.brand strong { font-size: 22px; }
nav { display: flex; align-items: center; gap: 22px; } nav a, .desktop-link { color: white; font: 700 13px Arial, sans-serif; text-decoration: none; } nav .new-load-button { padding: 10px 14px; border: 1px solid var(--sun); border-radius: 3px; background: var(--sun); color: var(--ink); } nav .new-load-button:hover { background: #ffd16a; border-color: #ffd16a; } .desktop-link { border: 1px solid #71909a; border-radius: 3px; background: transparent; padding: 9px 12px; cursor: pointer; }
.login-page { max-width: 400px; margin: 12vh auto 0; padding: 0 20px; }.login-form { display: grid; gap: 12px; padding: 34px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }.login-form h1 { margin: 0 0 10px; font-size: 26px; }.login-form label { font: 700 12px Arial, sans-serif; color: var(--muted); text-transform: uppercase; }.login-form input { width: 100%; padding: 10px; border: 1px solid #bdcbc5; border-radius: 3px; font: 15px Arial, sans-serif; }.login-form button { margin-top: 10px; padding: 13px; border: 0; border-radius: 3px; color: white; background: var(--teal); cursor: pointer; font: 700 14px Arial, sans-serif; }.login-form button:hover { background: var(--teal-dark); }.login-form .error { margin: 0; padding: 10px; border-radius: 3px; background: #f8dfda; color: #963d30; font: 13px Arial, sans-serif; }
main { max-width: 1280px; margin: auto; padding: 48px max(5vw, 28px) 72px; }.masthead, .detail-header { display: flex; justify-content: space-between; gap: 30px; align-items: end; padding: 10px 0 42px; border-bottom: 1px solid var(--line); }.eyebrow { margin: 0 0 10px; color: var(--teal); }.masthead h1, .detail-header h1 { margin: 0; max-width: 700px; font-size: clamp(36px, 5vw, 66px); line-height: .98; font-weight: 600; }.intro { color: var(--muted); max-width: 590px; font: 18px/1.5 Arial, sans-serif; }.metric { min-width: 140px; display: grid; gap: 5px; border-left: 5px solid var(--sun); padding-left: 18px; }.metric strong { font-size: 46px; }.metric span, .section-title > span, .assignment span, .assignment small { font: 13px Arial, sans-serif; color: var(--muted); }
.content-grid, .detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; padding-top: 34px; }.detail-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr); }.section-title { display: flex; align-items: end; justify-content: space-between; margin-bottom: 15px; }.section-title h2, .side-panel h2, .info-panel h2, .update-panel h2 { margin: 0; font-size: 26px; }
.load-list { border-top: 2px solid var(--ink); }.load-card { position: relative; display: grid; grid-template-columns: 145px minmax(230px, 1fr) 220px 52px; gap: 18px; align-items: center; padding: 22px 8px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: background .16s ease, padding .16s ease; }.load-card:hover { background: #e7f2ee; padding-left: 15px; }.load-id { display: grid; gap: 8px; }.load-id strong { font: 700 16px Arial, sans-serif; }.status { width: fit-content; padding: 4px 7px; border-radius: 3px; background: #d9ece8; color: var(--teal-dark); font: 700 10px Arial, sans-serif; text-transform: uppercase; }.status-in-transit { background: #fff0c9; color: #8a5b00; }.status-delivered { background: #d9e8f8; color: #14588d; }.status-cancelled { background: #f8dfda; color: #963d30; }.route { display: grid; gap: 3px; font-size: 18px; }.route b, .detail-header h1 span { color: var(--coral); font: 700 12px Arial, sans-serif; text-transform: uppercase; }.schedule { display: grid; gap: 7px; color: var(--muted); font: 11px Arial, sans-serif; }.schedule strong { display: block; margin-top: 2px; color: var(--ink); font-size: 13px; }.chevron { color: var(--teal); font: 700 12px Arial, sans-serif; }
.side-panel, .info-panel, .update-panel { padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }.side-panel + .side-panel { margin-top: 18px; }.side-panel ul { padding: 0; margin: 18px 0 0; list-style: none; }.side-panel li { display: flex; justify-content: space-between; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); font: 13px Arial, sans-serif; }.side-panel li span { color: var(--muted); text-align: right; }.back { display: inline-block; margin-bottom: 28px; color: var(--teal); font: 700 13px Arial, sans-serif; text-decoration: none; }.assignment { display: grid; gap: 5px; min-width: 170px; border-left: 4px solid var(--sun); padding-left: 16px; }.assignment strong { font-size: 24px; }.route strong { display: block; margin-bottom: 3px; color: var(--teal-dark); font: 700 13px Arial, sans-serif; }
dl { margin: 20px 0 0; } dl div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); } dt { color: var(--muted); font: 12px Arial, sans-serif; text-transform: uppercase; } dd { margin: 0; font: 16px Arial, sans-serif; }.notes { padding: 14px; background: #f0f5f1; color: var(--muted); font: 14px/1.5 Arial, sans-serif; }.update-panel { border-top: 5px solid var(--teal); }.update-panel > label, .form-grid label { display: grid; gap: 7px; margin-top: 18px; font: 700 12px Arial, sans-serif; color: var(--muted); text-transform: uppercase; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } input, select { width: 100%; padding: 10px; border: 1px solid #bdcbc5; border-radius: 3px; color: var(--ink); background: white; font: 15px Arial, sans-serif; } .save { width: 100%; margin-top: 24px; padding: 13px; border: 0; border-radius: 3px; color: white; background: var(--teal); cursor: pointer; font: 700 14px Arial, sans-serif; }.save:hover { background: var(--teal-dark); }.message { margin-bottom: 20px; padding: 13px; border-radius: 3px; font: 14px Arial, sans-serif; }.message.success { background: #d9ece8; color: var(--teal-dark); }.message.error { background: #f8dfda; color: #963d30; }.empty { color: var(--muted); font: 15px Arial, sans-serif; }
 .update-panel h3 { margin: 26px 0 -2px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 19px; }
@media (max-width: 860px) { .topbar, .masthead, .detail-header { align-items: flex-start; flex-direction: column; }.content-grid, .detail-grid { grid-template-columns: 1fr; }.load-card { grid-template-columns: 1fr 40px; }.route, .schedule { grid-column: 1; }.chevron { grid-column: 2; grid-row: 1; }.metric { min-width: 0; }.detail-header h1 { font-size: 42px; } }
@media (max-width: 520px) { main { padding-top: 32px; }.topbar { gap: 16px; }.topbar nav { gap: 12px; }.topbar nav a { display: none; }.masthead h1 { font-size: 38px; }.form-grid { grid-template-columns: 1fr; } dl div { grid-template-columns: 1fr; gap: 5px; } }
.text-action { color: var(--teal); font: 700 13px Arial, sans-serif; text-decoration: none; }.form-header { margin-bottom: 28px; }.form-header h1 { margin: 0; font-size: 46px; }.form-header p:last-child { color: var(--muted); font: 16px Arial, sans-serif; }.timesheet-form { max-width: 850px; }.timesheet-form section { margin-bottom: 18px; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }.timesheet-form h2 { margin: 0 0 16px; font-size: 24px; }.two-wide { grid-template-columns: 1fr 1fr; }.timesheet-form label { display: grid; gap: 7px; font: 700 12px Arial, sans-serif; color: var(--muted); text-transform: uppercase; }.timesheet-form textarea { resize: vertical; }.field-error { color: #963d30; font: 12px Arial, sans-serif; text-transform: none; }
.timesheet-heading { display: flex; justify-content: space-between; gap: 28px; align-items: end; padding-bottom: 30px; border-bottom: 1px solid var(--line); }.timesheet-heading h1 { margin: 0; font-size: 46px; }.timesheet-heading p:last-child { margin: 8px 0 0; color: var(--muted); font: 16px Arial, sans-serif; }.driver-picker { min-width: 230px; }.driver-picker label { display: block; margin-bottom: 7px; color: var(--muted); font: 700 11px Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; }.timesheet-summary { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)) auto; gap: 1px; margin: 28px 0; background: var(--line); border: 1px solid var(--line); }.timesheet-summary > div { display: grid; gap: 5px; padding: 20px; background: var(--panel); }.timesheet-summary span { color: var(--muted); font: 11px Arial, sans-serif; text-transform: uppercase; }.timesheet-summary strong { font-size: 28px; }.inline-action { align-self: stretch; width: auto; margin: 0; display: grid; place-items: center; padding: 18px 25px; text-decoration: none; }.timesheet-table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); }table { width: 100%; border-collapse: collapse; min-width: 850px; font: 14px Arial, sans-serif; }th { padding: 13px 16px; background: #e7f2ee; color: var(--teal-dark); font-size: 11px; letter-spacing: .5px; text-align: left; text-transform: uppercase; }td { padding: 15px 16px; border-top: 1px solid var(--line); } .empty-table { padding: 34px; text-align: center; color: var(--muted); }
@media (max-width: 700px) { .timesheet-heading { align-items: stretch; flex-direction: column; }.driver-picker { min-width: 0; }.timesheet-summary { grid-template-columns: 1fr 1fr; }.inline-action { grid-column: span 2; }.timesheet-heading h1 { font-size: 38px; } }