:root { font-family: Inter, system-ui, sans-serif; color: #172033; background: #f3f5f8; }
* { box-sizing: border-box; }
body { margin: 0; }
header { height: 64px; padding: 0 5%; background: #fff; border-bottom: 1px solid #e3e7ed; display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: #df1738; color: #fff; }
main { width: min(1180px, 92%); margin: 38px auto; }
h1, h2 { margin-top: 0; }
h1 { margin-bottom: 6px; }
h2 { font-size: 19px; }
p { color: #667085; margin-top: 0; }
.card { background: #fff; border: 1px solid #e3e7ed; border-radius: 14px; padding: 24px; box-shadow: 0 4px 16px rgba(16, 24, 40, .04); }
.login-card { max-width: 430px; margin: 8vh auto; }
.dashboard-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 22px; }
form { display: grid; gap: 15px; }
label { display: grid; gap: 6px; font-size: 14px; font-weight: 650; }
input, select, textarea { width: 100%; padding: 11px 12px; border: 1px solid #cfd5df; border-radius: 8px; font: inherit; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid #df173833; border-color: #df1738; }
button { cursor: pointer; border: 0; border-radius: 8px; padding: 12px 16px; color: #fff; background: #df1738; font-weight: 700; }
button.quiet { color: #344054; background: #eef1f5; }
.hidden { display: none !important; }
.error { color: #b42318; margin-top: 12px; }
.success { margin-top: 14px; padding: 12px; border-radius: 8px; background: #ecfdf3; color: #067647; }
.integration-note { display: flex; gap: 16px; align-items: flex-start; border-left: 4px solid #df1738; }
.integration-note h2 { margin-bottom: 8px; }
.integration-note p { margin-bottom: 0; line-height: 1.55; }
.bell { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 10px; background: #fff0f2; font-size: 22px; }
.trucks-card { margin-top: 22px; }
.directory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.list { display: grid; gap: 10px; }
.truck-row { display: flex; justify-content: space-between; gap: 12px; padding: 13px; border-radius: 9px; background: #f7f8fa; }
.truck-row span { color: #667085; }
.phone { color: #175cd3; font-weight: 700; text-decoration: none; align-self: center; }
.edit-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(140px, 1.4fr) auto; align-items: center; gap: 10px; padding: 12px; border-radius: 9px; background: #f7f8fa; }
.add-form { grid-template-columns: 1fr 1.3fr auto; margin-bottom: 16px; }
.add-driver-form { grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
.add-driver-form button { grid-column: 1 / -1; }
.row-actions { display: flex; gap: 6px; }
button.danger { background: #fee4e2; color: #b42318; font-size: 18px; }
.edit-row span { color: #667085; font-size: 13px; }
button.small { padding: 10px 12px; }
.floating-message { position: fixed; right: 24px; bottom: 24px; box-shadow: 0 8px 30px rgba(0,0,0,.15); }
.notifications { margin-top: 22px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #eaecf0; white-space: nowrap; }
th { color: #667085; }
.status { display: inline-block; border-radius: 20px; padding: 4px 9px; font-weight: 700; }
.pending { background: #fff6df; color: #93370d; }
.acknowledged { background: #dcfae6; color: #067647; }
.fallback_due { background: #fee4e2; color: #b42318; }
.empty { padding: 28px 0; color: #667085; text-align: center; }
@media (max-width: 760px) { main { margin-top: 22px; } .integration-note { padding: 18px; } .directory-grid { grid-template-columns: 1fr; gap: 0; } .edit-row, .add-form, .add-driver-form { grid-template-columns: 1fr; } .add-driver-form button { grid-column: auto; } }