:root {
  --ink: #090b0a;
  --muted: #56615a;
  --line: #cfd9d2;
  --green: #27734c;
  --cream: #f4f8f5;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Arial, sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
}
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.primary,
.outline {
  min-height: 44px;
  height: auto;
  border-radius: 8px;
  padding: 0 16px;
  border: 1px solid var(--line);
  font-weight: 800;
  cursor: pointer;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
}
.primary {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
.outline {
  background: white;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand > span {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--green);
  color: white;
  display: grid;
  place-items: center;
}
.brand svg {
  width: 25px;
}
.brand small {
  display: block;
  color: #96a89f;
  font-size: 11px;
  margin-top: 3px;
}
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
}
.login-brand {
  background: #090b0a;
  color: white;
  padding: 70px clamp(35px, 7vw, 110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-brand h1 {
  font: 700 clamp(42px, 5vw, 68px)/1.04 Georgia;
  margin: 75px 0 24px;
}
.login-brand > p {
  color: #bdc8c2;
  font-size: 18px;
  line-height: 1.7;
  max-width: 520px;
}
.login-points {
  display: grid;
  gap: 17px;
  margin-top: 40px;
}
.login-points span {
  display: flex;
  gap: 13px;
  align-items: center;
}
.login-points svg {
  width: 21px;
  color: #38a868;
}
.login-card {
  display: grid;
  place-items: center;
  padding: 30px;
}
.login-box {
  width: min(430px, 100%);
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 38px;
  box-shadow: 0 20px 70px #26352d14;
}
.login-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e7f3eb;
  color: var(--green);
  display: grid;
  place-items: center;
}
.login-icon svg {
  width: 24px;
}
.login-box h2,
.modal h2 {
  font: 700 28px Georgia;
  margin: 18px 0 8px;
}
.login-box > p,
.modal > p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.login-box form,
.driver-admin form {
  display: grid;
  gap: 16px;
  margin-top: 25px;
}
.login-box label,
.driver-admin label,
.modal label {
  font-size: 12px;
  font-weight: 800;
}
.login-box input,
.driver-admin input,
.driver-admin select,
.modal input,
.modal select,
.modal textarea {
  display: block;
  width: 100%;
  height: 46px;
  border: 1px solid #d8dfda;
  border-radius: 8px;
  padding: 0 12px;
  margin-top: 7px;
}
.login-box .stay-logged-in {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.login-box .stay-logged-in input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: var(--green);
}
.login-box .stay-logged-in span {
  display: grid;
  gap: 3px;
}
.login-box .stay-logged-in small {
  color: var(--muted);
  font-weight: 500;
  line-height: 1.35;
}
.login-submit {
  width: 100%;
}
.login-error,
.login-success {
  padding: 11px;
  border-radius: 7px;
  background: #f9e8e5;
  color: #9f433b;
  font-size: 12px;
}
.login-success {
  background: #e8f4ec;
  color: #27734c;
}
.login-switch {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
}
.login-switch button {
  border: 0;
  background: none;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.driver-page {
  min-height: 100vh;
}
.driver-page > header {
  height: 78px;
  background: white;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(18px, 5vw, 60px);
}
.driver-content {
  width: min(720px, 100%);
  margin: auto;
  padding: 55px 20px;
}
.eyebrow {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--green);
}
.driver-content > h1 {
  font: 700 38px Georgia;
  margin: 8px 0;
}
.sub {
  color: var(--muted);
}
.assigned {
  background: #090b0a;
  color: white;
  border-radius: 16px;
  padding: 25px;
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 32px 0 18px;
}
.assigned > span {
  width: 58px;
  height: 58px;
  border-radius: 13px;
  background: var(--green);
  color: white;
  display: grid;
  place-items: center;
}
.assigned svg {
  width: 34px;
}
.assigned div {
  flex: 1;
}
.assigned small {
  color: #aab9b1;
  font-size: 9px;
}
.assigned h2 {
  margin: 6px 0;
  font: 700 22px Georgia;
}
.assigned p {
  margin: 0;
  color: #aab9b1;
  font-size: 11px;
}
.assigned em {
  font-style: normal;
  background: #e7f3eb;
  color: var(--green);
  border-radius: 20px;
  padding: 6px 10px;
  font-size: 10px;
}
.driver-actions {
  display: grid;
  gap: 12px;
}
.driver-actions > button {
  border: 1px solid var(--line);
  background: white;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.driver-actions > button > span {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  background: #e7f3eb;
  color: var(--green);
  display: grid;
  place-items: center;
}
.driver-actions svg {
  width: 23px;
}
.driver-actions div {
  flex: 1;
}
.driver-actions small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
}
.driver-actions strong {
  font-size: 25px;
  color: #9ca59f;
}
.driver-help {
  background: #fff7e8;
  border: 1px solid #f0d9a9;
  border-radius: 11px;
  padding: 18px;
  margin-top: 18px;
}
.driver-help p {
  margin: 6px 0 0;
  color: #77623c;
  font-size: 12px;
}
.driver-special {
  display: grid;
  gap: 7px;
  background: #fff7e8;
  border: 1px solid #f0d9a9;
  border-radius: 11px;
  padding: 16px;
  margin-bottom: 18px;
}
.driver-special span {
  background: white;
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 12px;
  color: #77623c;
}
.time-clock {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: white;
  border: 1px solid var(--line);
  border-left: 5px solid var(--green);
  border-radius: 12px;
  padding: 18px;
  margin: 20px 0;
}
.time-clock small {
  color: var(--green);
  font-weight: 900;
}
.time-clock h2 {
  margin: 4px 0;
  font: 700 22px Georgia;
}
.time-clock span {
  font-size: 10px;
  color: var(--muted);
}
.time-clock > div:last-child {
  display: flex;
  gap: 8px;
}
.timesheets > article {
  display: grid;
  grid-template-columns: 1fr 120px 140px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 14px 0;
}
.timesheets small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.timesheets article > strong {
  text-align: right;
}
.timesheets article > span {
  text-align: right;
  font-size: 10px;
  color: var(--green);
  font-weight: 900;
}
.timesheets article.overtime {
  background: #fff4e5;
}
.timesheets article.overtime > span {
  color: #9b3028;
}
.time-events article {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding: 12px 2px;
}
.time-events article > div:first-child {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 130px 220px;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.time-events article span {
  text-transform: capitalize;
}
.time-events article small {
  color: var(--muted);
  text-align: right;
}
.time-event-actions {
  display: flex;
  gap: 8px;
}
.time-event-actions button {
  padding: 8px 12px;
}
.hours-total {
  display: grid;
  gap: 5px;
  background: #e8f4ec;
  color: var(--green);
  border-radius: 10px;
  padding: 16px;
  margin: 18px 0;
}
.hours-total strong {
  font: 700 26px Georgia;
}
.hours-total.overtime {
  background: #fff4e5;
  color: #9b3028;
}
.daily-hours {
  display: grid;
  gap: 7px;
}
.daily-hours article {
  display: grid;
  grid-template-columns: 1fr 90px 100px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
}
.daily-hours small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}
.daily-hours article > strong,
.daily-hours article > span {
  text-align: right;
}
.daily-hours article > span {
  font-size: 10px;
  color: var(--muted);
}
.driver-time-history p {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 9px 2px;
  margin: 0;
  text-transform: capitalize;
  font-size: 12px;
}
.driver-time-history span {
  color: var(--muted);
}
.office-shell > aside {
  position: fixed;
  inset: 0 auto 0 0;
  width: 250px;
  background: #090b0a;
  color: white;
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
}
.office-shell aside nav {
  display: grid;
  gap: 6px;
  margin-top: 35px;
}
.office-shell aside nav button {
  border: 0;
  background: none;
  color: #aebbb4;
  border-radius: 8px;
  padding: 14px;
  text-align: left;
  font-weight: 800;
}
.office-shell aside nav button.active {
  background: var(--green);
  color: white;
}
.profile {
  margin-top: auto;
  border-top: 1px solid #344139;
  padding-top: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.profile i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #d8e8dc;
  color: var(--green);
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 800;
}
.profile small {
  display: block;
  color: #95a89e;
  font-size: 10px;
}
.office-main {
  margin-left: 250px;
  padding: 35px 42px;
}
.office-main > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}
.office-main h1 {
  font: 700 32px Georgia;
  margin: 0;
}
.office-main header p {
  color: var(--muted);
  font-size: 13px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.metrics article,
.panel,
.truck-grid article {
  background: white;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 20px;
}
.metrics small {
  color: var(--muted);
}
.metrics strong {
  display: block;
  font: 700 28px Georgia;
  margin: 8px 0;
}
.metrics p {
  margin: 0;
  color: var(--green);
  font-size: 11px;
}
.panel {
  margin-top: 18px;
}
.panel > h2 {
  font: 700 20px Georgia;
}
.attention {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 15px 0;
}
.attention > b {
  background: #eef1ee;
  border-radius: 5px;
  padding: 6px;
}
.attention > div {
  flex: 1;
}
.attention small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.attention em {
  font-style: normal;
  background: #fbf0da;
  color: #94651e;
  border-radius: 20px;
  padding: 5px 9px;
  font-size: 10px;
}
.attention em.danger {
  background: #f7e7e4;
  color: #a2453d;
}
.truck-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.truck-grid article > span {
  height: 100px;
  background: #eef2ef;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #81938a;
}
.truck-grid svg {
  width: 62px;
}
.truck-grid article > small {
  display: block;
  color: var(--green);
  font-weight: 800;
  margin-top: 15px;
}
.truck-grid h2 {
  font: 700 17px Georgia;
}
.truck-grid p {
  color: var(--muted);
}
.truck-grid footer {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 11px;
}
.driver-admin {
  max-width: 800px;
}
.driver-admin form {
  grid-template-columns: 1fr 1fr;
}
.driver-admin form .primary,
.driver-admin .form-error {
  grid-column: 1/-1;
}
.form-error {
  color: #a2453d;
}
.security-note {
  background: #eef5f0;
  border-radius: 9px;
  padding: 16px;
  margin-top: 22px;
}
.security-note p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.backdrop {
  position: fixed;
  inset: 0;
  background: #0d1812bf;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
}
.modal {
  width: min(590px, 100%);
  background: white;
  border-radius: 15px;
  padding: 28px;
  position: relative;
}
.close {
  position: absolute;
  right: 17px;
  top: 12px;
  border: 0;
  background: none;
  font-size: 28px;
}
.modal form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 22px;
}
.modal textarea {
  height: 90px;
  padding: 11px;
}
.modal .full,
.form-actions {
  grid-column: 1/-1;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: #183d2a;
  color: white;
  border-radius: 9px;
  padding: 14px 18px;
  display: flex;
  gap: 9px;
  z-index: 30;
}
.toast svg {
  width: 18px;
}
.toast.error-toast {
  background: #8f332c;
}
.notice-card {
  background: white;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 10px;
  padding: 15px 17px;
  margin-bottom: 14px;
  display: grid;
  gap: 4px;
}
.notice-card span {
  font-size: 13px;
  color: var(--green);
  font-weight: 800;
}
.notice-card small {
  color: var(--muted);
}
.modal.wide {
  width: min(760px, 100%);
  max-height: 92vh;
  overflow: auto;
}
.message-center {
  display: grid;
  gap: 12px;
}
.message-center > label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}
.message-center select {
  width: 100%;
}
.message-thread {
  min-height: 260px;
  max-height: 48vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #f4f6f3;
  border-radius: 12px;
}
.message-thread article {
  align-self: flex-start;
  max-width: 82%;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px 12px 12px 3px;
  padding: 10px 12px;
}
.message-thread article.mine {
  align-self: flex-end;
  background: #e8f4ec;
  border-color: #bdd9c6;
  border-radius: 12px 12px 3px 12px;
}
.message-thread article p {
  margin: 5px 0;
  white-space: pre-wrap;
}
.message-thread article small {
  color: var(--muted);
}
.message-center form {
  grid-template-columns: 1fr 150px;
  align-items: end;
}
.message-center form .full:first-child {
  grid-column: 1;
}
.message-center form .primary.full {
  grid-column: 2;
}
.message-center textarea {
  min-height: 76px;
}
.account-editor {
  max-width: 560px;
}
.profile-photo {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.profile-photo > div:last-child {
  display: grid;
  gap: 5px;
  flex: 1;
}
.profile-photo small,
.preference small {
  display: block;
  color: var(--muted);
}
.avatar-preview {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 0 0 86px;
  background: var(--gold);
  color: #243229;
  font-size: 34px;
  font-weight: 900;
}
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.file-button {
  width: fit-content;
  margin-top: 5px;
  cursor: pointer;
}
.file-button input {
  display: none;
}
.preference {
  display: flex !important;
  align-items: flex-start;
  gap: 12px !important;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.preference input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.push-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f9f6;
}
.push-setting small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}
.driver-editor {
  grid-template-columns: minmax(170px, 1.4fr) 105px 90px 105px 120px;
}
.driver-editor input,
.driver-editor select {
  width: 100%;
}
.message-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.message-button b {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #a72f27;
  color: white;
  font-size: 11px;
}
.checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #f7f8f5;
  padding: 12px;
  border-radius: 9px;
}
.checklist label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
}
.checklist label select {
  width: 145px;
  margin: 0;
  height: 37px;
}
.checklist-heading {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 5px 2px;
}
.checklist-heading small {
  color: var(--muted);
  font-weight: normal;
}
.equipment-heading {
  border-top: 2px solid var(--line);
  margin-top: 6px;
  padding-top: 14px;
}
.unsafe {
  display: flex !important;
  align-items: center;
  gap: 10px;
  background: #fff0ed;
  border: 1px solid #e7b8b1;
  padding: 13px;
  border-radius: 8px;
  color: #963f37;
}
.unsafe input {
  width: 20px;
  height: 20px;
  margin: 0;
}
.unsafe small {
  display: block;
  font-weight: normal;
  margin-top: 3px;
}
.install-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 12;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: white;
  padding: 13px 18px;
  font-weight: 900;
  box-shadow: 0 9px 30px #17211c33;
  cursor: pointer;
}
.install-fab span {
  font-size: 18px;
  margin-right: 6px;
}
.install-modal {
  width: min(520px, 100%);
}
.install-steps {
  display: grid;
  gap: 10px;
  margin: 22px 0;
}
.install-steps section {
  background: #f2f5f2;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px;
}
.install-steps p {
  color: var(--muted);
  line-height: 1.55;
  margin: 6px 0 0;
  font-size: 13px;
}
@media (max-width: 800px) {
  .special-equipment-list {
    grid-template-columns: 1fr !important;
  }
  .equipment-grid,
  .equipment-summary,
  .shared-equipment > div:last-child {
    grid-template-columns: 1fr;
  }
  .equipment-card ul {
    grid-template-columns: 1fr;
  }
  .login-page {
    grid-template-columns: 1fr;
  }
  .login-brand {
    display: none;
  }
  .login-card {
    min-height: 100vh;
  }
  .office-shell > aside {
    position: static;
    width: auto;
    padding: 18px;
  }
  .office-shell aside nav {
    display: flex;
    margin-top: 18px;
  }
  .profile {
    display: none;
  }
  .office-main {
    margin: 0;
    padding: 22px 14px;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .truck-grid {
    grid-template-columns: 1fr;
  }
  .driver-admin form,
  .modal form {
    grid-template-columns: 1fr;
  }
  .driver-admin form .primary,
  .driver-admin .form-error,
  .modal .full,
  .form-actions {
    grid-column: 1;
  }
  .assigned em {
    display: none;
  }
  .checklist {
    grid-template-columns: 1fr;
  }
  .checklist label select {
    width: 125px;
  }
  .modal.wide {
    padding: 20px;
  }
}
.metrics button,
.truck-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 20px;
  color: inherit;
}
.metrics button {
  text-align: left;
  cursor: pointer;
}
.metrics button:hover,
.truck-card:hover {
  border-color: var(--green);
  transform: translateY(-1px);
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-head h2 {
  font: 700 20px Georgia;
}
.link-button {
  border: 0;
  background: none;
  color: var(--green);
  font-weight: 800;
  cursor: pointer;
}
.row-button {
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  text-align: left;
  cursor: pointer;
}
.toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
.truck-card {
  text-align: left;
  cursor: pointer;
  transition: 0.15s;
}
.truck-card > span {
  height: 100px;
  background: #eef2ef;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #81938a;
}
.truck-card > small {
  display: block;
  color: var(--green);
  font-weight: 800;
  margin-top: 15px;
}
.truck-card footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.truck-card > i {
  display: block;
  color: var(--green);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  margin-top: 12px;
}
.two-column {
  display: grid;
  grid-template-columns: minmax(330px, 0.85fr) minmax(420px, 1.15fr);
  gap: 18px;
}
.two-column > .panel {
  margin-top: 0;
}
.created-card {
  background: #e8f4ec;
  border: 1px solid #b9d9c3;
  border-radius: 10px;
  padding: 17px;
  margin-top: 20px;
  display: grid;
  gap: 6px;
}
.created-card strong {
  font: 700 20px Georgia;
}
.created-card p {
  margin: 0;
}
.created-card code {
  font-size: 16px;
  font-weight: 900;
  color: var(--green);
}
.created-card small {
  color: var(--muted);
}
.driver-row {
  display: grid;
  grid-template-columns: 1fr 135px 70px;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.driver-row small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.driver-row select {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.quick-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.quick-form label {
  font-size: 12px;
  font-weight: 800;
}
.quick-form input,
.quick-form select,
.quick-form textarea {
  display: block;
  width: 100%;
  height: 43px;
  border: 1px solid #d8dfda;
  border-radius: 8px;
  padding: 0 11px;
  margin-top: 6px;
}
.quick-form textarea {
  height: 75px;
  padding: 10px;
}
.quick-form .full,
.quick-form .primary {
  grid-column: 1/-1;
}
.data-list article {
  display: grid;
  grid-template-columns: 70px 1fr 120px;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 13px 0;
}
.data-list article > b {
  background: #eef2ef;
  border-radius: 6px;
  padding: 7px;
  text-align: center;
}
.data-list p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.data-list article > span {
  text-align: right;
  text-transform: capitalize;
  font-weight: 800;
  font-size: 12px;
}
.data-list article > span small {
  display: block;
  color: var(--muted);
  font-weight: normal;
  margin-top: 4px;
}
.repair-search {
  min-width: min(330px, 100%);
}
.repair-search > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.repair-search input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 12px;
  background: #fff;
}
.repair-history-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.repair-history-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}
.repair-history-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.repair-history-card header small,
.repair-meta-row b {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.repair-history-card header b {
  display: block;
  margin-top: 3px;
  color: var(--green);
  font-size: 16px;
}
.repair-history-card h3 {
  margin: 14px 0 10px;
  font-size: 17px;
  line-height: 1.3;
}
.repair-cost-date {
  text-align: right;
  white-space: nowrap;
}
.repair-cost-date strong,
.repair-cost-date span {
  display: block;
}
.repair-cost-date span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.repair-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.repair-meta-row > span {
  min-width: 135px;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f3f6f4;
  color: #26342c;
  font-size: 12px;
}
.repair-meta-row b {
  margin-bottom: 3px;
}
.repair-history-card details {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.repair-history-card summary {
  cursor: pointer;
  color: var(--green);
  font-weight: 800;
  font-size: 13px;
}
.repair-history-card details p {
  margin: 10px 0 0;
  color: #34423a;
  white-space: pre-line;
  line-height: 1.55;
}
.edit-repair-button {
  margin-top: 12px;
}
.parts-heading {
  align-items: center;
}
.napa-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  text-decoration: none;
  white-space: nowrap;
}
.part-actions {
  display: flex;
  gap: 6px;
  grid-column: 1 / -1;
  justify-content: flex-end;
}
.part-actions button {
  min-height: 36px;
  padding: 0 10px;
}
.modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.modal-form-grid label {
  display: grid;
  gap: 6px;
  color: #27342c;
  font-size: 13px;
  font-weight: 800;
}
.modal-form-grid input,
.modal-form-grid textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  font: inherit;
}
.modal-form-grid textarea {
  min-height: 140px;
  resize: vertical;
}
.modal-form-grid .full {
  grid-column: 1 / -1;
}
@media (max-width: 680px) {
  .repair-history-card > header {
    display: grid;
  }
  .repair-cost-date {
    text-align: left;
  }
  .repair-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .repair-meta-row > span:first-child {
    grid-column: 1 / -1;
  }
  .repair-search {
    width: 100%;
  }
  .modal-form-grid {
    grid-template-columns: 1fr;
  }
  .modal-form-grid .full {
    grid-column: auto;
  }
  .part-actions {
    justify-content: stretch;
  }
  .part-actions button {
    flex: 1;
  }
}
.parts-table article {
  display: grid;
  grid-template-columns: 1fr 50px 75px 70px;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 13px 0;
}
.parts-table small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.parts-table span {
  font-size: 10px;
  color: var(--green);
  font-weight: 900;
}
.parts-table .low span {
  color: #a2453d;
}
.parts-table em {
  text-align: right;
  font-style: normal;
}
.equipment-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.equipment-summary article {
  background: #090b0a;
  color: white;
  border-radius: 11px;
  padding: 18px;
}
.equipment-summary strong {
  display: block;
  font: 700 28px Georgia;
  color: #45b875;
}
.equipment-summary span {
  font-size: 11px;
  color: #bdc8c2;
}
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.equipment-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 18px;
}
.equipment-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.equipment-card header small {
  color: var(--green);
  font-weight: 900;
}
.equipment-card h2 {
  margin: 3px 0 0;
  font: 700 24px Georgia;
}
.equipment-card header > span {
  font-size: 11px;
  color: var(--muted);
}
.equipment-card > p {
  font-size: 12px;
  color: var(--muted);
}
.kit-tank {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: #fff7e6;
  border: 1px solid #ead7aa;
  border-radius: 8px;
  padding: 10px;
  font-size: 11px;
}
.kit-tank span {
  color: var(--muted);
  text-align: right;
}
.tank-capacity {
  color: var(--green) !important;
  font-weight: 800;
}
.message-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 10px;
  background: #edf1ed;
}
.message-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
}
.message-tabs button.active {
  background: white;
  color: var(--green);
  box-shadow: 0 2px 8px #17211c14;
}
.driver-announcements {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding: 16px;
  border-radius: 14px;
  background: #fff8e8;
  border: 1px solid #ead7aa;
}
.driver-announcements > header,
.driver-announcements article,
.announcement-list article header,
.announcement-list article footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.driver-announcements > header small {
  color: #87651f;
  font-weight: 900;
}
.driver-announcements > header h2 {
  margin: 3px 0 0;
}
.driver-announcements > header > span {
  background: #9b3028;
  color: white;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
}
.driver-announcements article {
  padding: 13px;
  background: white;
  border: 1px solid #eadfca;
  border-radius: 10px;
}
.driver-announcements article.urgent {
  border-left: 5px solid #b33e34;
}
.driver-announcements article.read {
  opacity: 0.72;
}
.driver-announcements article p {
  margin: 6px 0;
  white-space: pre-wrap;
}
.driver-announcements article small {
  color: var(--muted);
}
.announcement-list {
  display: grid;
  gap: 10px;
}
.announcement-list article {
  border: 1px solid var(--line);
  border-left: 5px solid var(--green);
  border-radius: 10px;
  padding: 14px;
}
.announcement-list article.urgent {
  border-left-color: #b33e34;
}
.announcement-list em {
  color: var(--green);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.announcement-list article.urgent em {
  color: #b33e34;
}
.announcement-list p {
  white-space: pre-wrap;
  color: var(--muted);
}
.announcement-list footer span {
  font-size: 11px;
  color: var(--muted);
}
.equipment-card ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.equipment-card li {
  display: flex;
  gap: 7px;
  align-items: center;
  background: #f2f5f2;
  border-radius: 7px;
  padding: 9px;
  font-size: 11px;
}
.equipment-card li > b {
  color: var(--green);
}
.edit-kit {
  width: 100%;
  margin-top: 12px;
}
.truck-kit-editor {
  max-width: 620px;
}
.kit-edit-list {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}
.kit-edit-list > div,
.kit-add-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.kit-edit-list input,
.kit-add-row input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}
.shared-equipment > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.shared-equipment article {
  background: #f2f5f2;
  border-radius: 8px;
  padding: 13px;
}
.shared-equipment small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
}
.special-equipment-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px;
}
.special-equipment-list > article {
  display: grid;
  gap: 8px;
}
.special-equipment-list > article > button {
  width: 100%;
}
.special-equipment-list button {
  display: grid;
  text-align: left;
  border: 1px solid var(--line);
  background: #f2f5f2;
  border-radius: 8px;
  padding: 13px;
  cursor: pointer;
  color: inherit;
}
.special-equipment-list button:hover {
  border-color: var(--green);
}
.special-equipment-list button.assigned-special {
  background: #e8f4ec;
  border-color: #b9d9c3;
}
.special-equipment-list button span {
  margin-top: 9px;
  color: var(--green);
  font-size: 10px;
  font-weight: 900;
}
.add-special {
  margin-top: 18px;
}
.equipment-assignment p {
  color: var(--muted);
}
.empty-state {
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  padding: 35px;
}
.empty-state svg {
  width: 30px;
  color: var(--green);
}
.page-error {
  background: #fff0ed;
  border: 1px solid #e7b8b1;
  color: #963f37;
  border-radius: 8px;
  padding: 12px 15px;
  margin-bottom: 16px;
}
.page-error button {
  float: right;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 900;
}
.staff-row {
  display: grid;
  grid-template-columns: 1fr 130px 105px 70px;
  gap: 9px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.staff-row small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.staff-row select {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 7px;
}
.report-filters {
  background: white;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.report-filters label {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
}
.report-filters select {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 10px;
}
.reports-panel .panel-head > span {
  color: var(--muted);
  font-size: 12px;
}
.report-list > button {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 13px;
  align-items: center;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 15px 5px;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.report-list > button:hover {
  background: #f7f9f7;
}
.report-type {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: #e7f3eb;
  color: var(--green);
  display: grid;
  place-items: center;
}
.report-type svg {
  width: 22px;
}
.report-list strong,
.report-list small {
  display: block;
}
.report-list strong {
  font-size: 13px;
  margin-top: 3px;
}
.report-list small {
  color: var(--muted);
  margin-top: 3px;
}
.report-list i {
  font-style: normal;
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
}
.report-list em {
  font-style: normal;
  color: #9b3028;
  background: #ffebe8;
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 10px;
  font-weight: 900;
}
.unsafe-report {
  background: #fff8f6 !important;
}
.report-detail {
  width: min(760px, 100%);
  max-height: 92vh;
  overflow: auto;
}
.report-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 20px 0;
}
.report-meta span {
  background: #f2f5f2;
  border-radius: 8px;
  padding: 11px;
  font-size: 12px;
}
.report-meta b {
  display: block;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.unsafe-banner {
  display: grid;
  gap: 4px;
  background: #ffebe8;
  border: 1px solid #e6aaa4;
  color: #8e2f28;
  border-radius: 9px;
  padding: 14px;
  margin-bottom: 14px;
}
.unsafe-banner span {
  font-size: 12px;
}
.report-answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.report-answers section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  min-height: 65px;
}
.report-answers small {
  display: block;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 6px;
}
.report-answers strong {
  line-height: 1.35;
}
.report-answers .answer-alert {
  background: #fff4e5;
  border-color: #e7c488;
  color: #8c5c15;
}
.attachment-button,
.full-close {
  width: 100%;
  margin-top: 14px;
}
.delete-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.delete-actions .outline {
  min-width: 130px;
}
.danger-button {
  min-height: 44px;
  border: 1px solid #c85a50;
  border-radius: 8px;
  background: #fff5f3;
  color: #9b3028;
  padding: 0 16px;
  font-weight: 900;
  cursor: pointer;
}
.danger-button:hover {
  background: #ffebe8;
}
.delete-slip {
  width: 100%;
  margin-top: 14px;
}
.defect-details > small {
  display: block;
  color: #8c5c15;
  background: #fff4e5;
  border: 1px solid #e7c488;
  border-radius: 7px;
  padding: 9px;
  margin-top: 7px;
  line-height: 1.4;
}
.defect-details textarea {
  min-height: 120px;
}
.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.alert-button {
  height: 44px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  padding: 0 13px;
  font-weight: 800;
  cursor: pointer;
}
.alert-button b,
.nav-count {
  display: inline-grid;
  place-items: center;
  background: #b33e34;
  color: white;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  margin-left: 5px;
  font-size: 10px;
}
.alert-button.urgent {
  border-color: #d8978f;
  background: #fff5f3;
  color: #9b3028;
}
.nav-count {
  float: right;
}
.urgent-strip {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #9b3028;
  color: white;
  border: 0;
  border-radius: 9px;
  padding: 13px 16px;
  margin-bottom: 16px;
  text-align: left;
  cursor: pointer;
}
.urgent-strip span {
  font-size: 12px;
}
.maintenance-create {
  margin: 0 0 18px;
}
.maintenance-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.board-column > h2 {
  font: 700 20px Georgia;
}
.board-column > h2 span {
  font: 12px Arial;
  background: #dde5df;
  border-radius: 999px;
  padding: 4px 8px;
  margin-left: 5px;
}
.work-card {
  display: block;
  width: 100%;
  background: white;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 10px;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.work-card.urgent {
  border-left-color: #b33e34;
  background: #fff9f8;
}
.work-card header,
.work-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.work-card header em {
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--green);
}
.work-card.urgent header em {
  color: #b33e34;
}
.work-card h3 {
  margin: 12px 0 6px;
}
.work-card p {
  color: var(--muted);
  font-size: 12px;
  white-space: pre-line;
  max-height: 48px;
  overflow: hidden;
}
.work-card footer {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  font-size: 10px;
  color: var(--muted);
}
.work-card footer strong {
  color: var(--green);
}
.board-column.complete {
  opacity: 0.86;
}
.slip-detail {
  background: #f4f6f4;
  border-radius: 8px;
  padding: 10px 13px;
  margin-bottom: 16px;
}
.slip-detail p {
  margin: 4px 0;
  font-size: 12px;
}
.repair-items {
  display: grid;
  gap: 8px;
}
.repair-items label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}
.repair-items label.done {
  background: #edf6f0;
  color: #597065;
}
.repair-items input {
  width: 20px;
  height: 20px;
}
.repair-items span {
  flex: 1;
}
.repair-items small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.repair-notes {
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin: 17px 0;
}
.repair-notes textarea {
  display: block;
  width: 100%;
  min-height: 90px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  margin-top: 6px;
}
.completed-stamp {
  display: grid;
  gap: 4px;
  background: #e8f4ec;
  color: var(--green);
  border-radius: 8px;
  padding: 14px;
  margin-top: 15px;
}
.no-items {
  color: var(--muted);
  font-size: 12px;
}
.alert-center {
  width: min(620px, 100%);
  max-height: 85vh;
  overflow: auto;
}
.alert-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 16px 0 8px;
}
.alert-tabs button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f5f7f5;
  color: var(--ink);
  padding: 11px 12px;
  cursor: pointer;
}
.alert-tabs button.active {
  border-color: var(--green);
  background: #e8f4ec;
  color: var(--green);
  font-weight: 700;
}
.alert-tabs b {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: 5px;
  place-items: center;
  border-radius: 999px;
  background: #b33e34;
  color: white;
  font-size: 11px;
}
.alert-row {
  width: 100%;
  display: grid;
  grid-template-columns: 75px 1fr auto;
  gap: 10px;
  align-items: center;
  background: white;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 14px 4px;
  text-align: left;
  cursor: pointer;
}
.alert-row.read {
  opacity: 0.72;
}
.alert-row.unread span strong::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #b33e34;
}
.alert-row > b {
  font-size: 9px;
  color: var(--green);
}
.alert-row.urgent > b {
  color: #b33e34;
}
.alert-row span strong,
.alert-row span small {
  display: block;
}
.alert-row small {
  color: var(--muted);
  margin-top: 4px;
}
.alert-row i {
  font-style: normal;
  color: var(--green);
  font-size: 11px;
}
.work-orders-test { display: grid; gap: 18px; }
.beta-banner { display: flex; align-items: center; gap: 14px; border: 1px solid #d8b957; border-radius: 12px; background: #fff9df; color: #55430b; padding: 13px 16px; }
.beta-banner b { white-space: nowrap; }
.beta-banner span { font-size: 13px; }
.work-order-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.work-order-tabs button { border: 1px solid var(--line); border-radius: 999px; background: white; padding: 10px 16px; cursor: pointer; }
.work-order-tabs button.active { border-color: var(--green); background: var(--green); color: white; font-weight: 700; }
.work-order-create form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.route-filters { display: grid; grid-template-columns: repeat(2, minmax(180px, 260px)); gap: 12px; margin: 14px 0; }
.route-filters label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.route-filters input, .route-filters select { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 10px; }
.next-stop-callout { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; border-left: 4px solid var(--green); border-radius: 8px; background: #edf6ef; padding: 13px 15px; margin-bottom: 10px; }
.next-stop-callout span { grid-row: 1/3; color: var(--green); font-size: 10px; font-weight: 800; }
.next-stop-callout small { color: var(--muted); }
.route-list, .customer-list, .chemical-list { display: grid; }
.route-stop { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; width: 100%; border: 0; border-top: 1px solid var(--line); background: white; padding: 14px 5px; text-align: left; cursor: pointer; }
.route-stop > strong { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #edf2ee; color: var(--green); }
.route-stop span, .route-stop span small, .route-stop span em { display: block; }
.route-stop span small, .route-stop span em { color: var(--muted); font-size: 12px; font-style: normal; margin-top: 3px; }
.route-stop > i { color: var(--green); font-size: 11px; font-style: normal; text-transform: capitalize; }
.route-stop.completed { opacity: .65; }
.customer-list article, .chemical-list article { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 14px 4px; }
.customer-list article small, .chemical-list article small { display: block; color: var(--muted); margin-top: 4px; }
.customer-list article > span, .chemical-list article > span { color: var(--green); font-size: 12px; text-transform: capitalize; }
.property-checks { display: flex; flex-wrap: wrap; gap: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.property-checks label { display: flex; align-items: center; gap: 7px; }
.property-checks input { width: auto; }
.work-order-preview { width: min(760px, 100%); max-height: 90vh; overflow: auto; }
.stop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.stop-actions a { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: 10px 14px; text-decoration: none; }
.stop-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.stop-summary span { display: grid; gap: 5px; border-radius: 8px; background: #f4f6f4; padding: 11px; text-transform: capitalize; }
.stop-summary b { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.stop-notes { border-left: 3px solid var(--green); background: #f7faf7; padding: 12px 14px; margin: 12px 0; }
.work-order-preview form, .product-entry { display: grid; gap: 10px; }
.work-order-preview form { margin-top: 18px; }
.product-entry { grid-template-columns: 1.4fr 1.4fr .7fr .6fr; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.product-entry input, .product-entry select { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 9px; }
.driver-route-card { display: grid; gap: 12px; border: 1px solid #c9d9ce; border-radius: 16px; background: white; padding: 18px; box-shadow: 0 8px 24px rgba(24, 62, 39, .06); }
.driver-route-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.driver-route-card > header small { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.driver-route-card > header h2 { margin: 4px 0 0; }
.driver-route-card > header > span { border-radius: 999px; background: #edf6ef; color: var(--green); padding: 7px 11px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.driver-route-list { display: grid; }
.driver-route-list button { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; border: 0; border-top: 1px solid var(--line); background: white; padding: 14px 2px; text-align: left; cursor: pointer; }
.driver-route-list button > strong { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--green); color: white; }
.driver-route-list button span, .driver-route-list button span small, .driver-route-list button span em { display: block; min-width: 0; }
.driver-route-list button span small, .driver-route-list button span em { color: var(--muted); font-size: 12px; font-style: normal; margin-top: 3px; overflow-wrap: anywhere; }
.driver-route-list button > i { color: var(--green); font-size: 11px; font-style: normal; font-weight: 800; }
.driver-route-list button.completed { opacity: .65; }
.driver-route-list button.completed > strong { background: #738078; }
.photo-route-launch { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #d9e4dc; border-radius: 10px; background: #f7faf8; padding: 12px; }
.photo-route-launch > div { display: grid; gap: 4px; }
.photo-route-launch small, .photo-scan-head small { color: var(--muted); line-height: 1.45; }
.photo-route-scanner { display: grid; gap: 14px; border-radius: 12px; background: #f7faf8; padding: 15px; }
.driver-route-card .photo-route-scanner { border: 1px solid #d9e4dc; }
.photo-route-panel .panel-head { align-items: center; }
.photo-scan-head > div { display: grid; gap: 4px; }
.photo-scan-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.photo-scan-settings label, .photo-stop-fields label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
.photo-scan-settings input, .photo-scan-settings select, .photo-stop-fields input, .photo-stop-fields textarea { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 10px; color: var(--ink); font: inherit; font-weight: 500; }
.photo-stop-fields textarea { min-height: 82px; resize: vertical; }
.photo-capture-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 2px dashed #aebfb3; border-radius: 12px; background: white; padding: 16px; }
.photo-capture-box > div { display: grid; gap: 5px; }
.photo-capture-box span { color: var(--muted); font-size: 12px; }
.file-button.disabled { cursor: wait; opacity: .65; }
.photo-scan-status { margin: 0; border-radius: 8px; background: #edf6ef; color: var(--green); padding: 10px 12px; font-size: 12px; font-weight: 700; }
.photo-stop-list { display: grid; gap: 12px; }
.photo-stop-list article { display: grid; gap: 12px; border: 1px solid #cad8ce; border-radius: 12px; background: white; padding: 13px; }
.photo-stop-list article.needs-review { border-color: #d49f00; box-shadow: inset 4px 0 #d49f00; }
.photo-stop-top { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 11px; }
.photo-stop-top img { width: 54px; height: 54px; border-radius: 7px; object-fit: cover; background: #edf0ed; }
.photo-stop-top > div:nth-child(2) { display: grid; gap: 3px; }
.photo-stop-top small { color: var(--muted); font-size: 11px; }
.photo-order-buttons { display: flex; gap: 5px; }
.photo-order-buttons button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: white; cursor: pointer; font-weight: 900; }
.photo-order-buttons button:last-child { color: #9d342b; }
.photo-order-buttons button:disabled { cursor: default; opacity: .35; }
.photo-stop-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.photo-stop-fields .full { grid-column: 1/-1; }
.photo-stop-fields label:first-child, .photo-stop-fields label:nth-child(2) { grid-column: span 2; }
.photo-stop-fields .scan-missing { color: #9b3d32; }
.photo-stop-fields .scan-missing input { border-color: #c75b4f; background: #fff7f5; }
.scan-raw { border-top: 1px solid var(--line); padding-top: 10px; }
.scan-raw summary { color: var(--green); cursor: pointer; font-size: 11px; font-weight: 800; }
.scan-raw pre { max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 8px; background: #202622; color: #e6ebe7; padding: 11px; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.photo-route-approval { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-radius: 10px; background: #eaf4ec; padding: 13px; }
.photo-route-approval > div { display: grid; gap: 4px; }
.photo-route-approval span { color: var(--muted); font-size: 12px; }
.work-order-tools { align-items: stretch; }
.import-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0 10px; }
.file-button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.file-button input { display: none; }
.import-status { border-radius: 8px; background: #edf6ef; color: var(--green); padding: 10px 12px; font-weight: 700; }
.import-work-orders > small { display: block; color: var(--muted); line-height: 1.5; }
.import-center { display: grid; gap: 18px; }
.import-center h3 { margin: 4px 0 -6px; font-size: 15px; }
.import-kind { display: flex; flex-wrap: wrap; gap: 8px; }
.import-kind button { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 10px 14px; cursor: pointer; }
.import-kind button.active { border-color: var(--green); background: #edf6ef; color: var(--green); font-weight: 800; }
.import-dropzone { display: grid; justify-items: start; gap: 7px; border: 2px dashed #b9c9bd; border-radius: 12px; background: #f8faf8; padding: 26px; }
.import-dropzone > span, .import-summary span, .import-approval span { color: var(--muted); font-size: 12px; }
.import-summary, .import-approval { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; }
.import-summary > div, .import-approval > div { display: grid; gap: 4px; }
.column-mapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.column-mapper label { display: grid; gap: 5px; }
.column-mapper label span { color: var(--muted); font-size: 11px; font-weight: 800; }
.column-mapper select { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 10px; }
.import-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.import-counts span { display: flex; align-items: baseline; gap: 7px; border-radius: 8px; background: #edf6ef; color: var(--green); padding: 11px 13px; font-size: 12px; }
.import-counts b { font-size: 20px; }
.import-counts .warning { background: #fff7db; color: #745800; }
.import-counts .error { background: #fff0ed; color: #a43c31; }
.import-warning { border-left: 4px solid #d49f00; background: #fff7db; color: #5f4900; padding: 11px 13px; margin: 0; }
.import-preview { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.import-preview table { width: 100%; border-collapse: collapse; font-size: 12px; }
.import-preview th, .import-preview td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.import-preview th { background: #f4f6f4; color: var(--muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.import-preview tr:last-child td { border-bottom: 0; }
.import-preview .row-error td:last-child { color: #a43c31; font-weight: 700; }
.import-preview > small { display: block; color: var(--muted); padding: 10px 12px; }
.import-approval { border-color: #a9c5b1; background: #f3f8f4; }
.import-approval button:disabled { cursor: not-allowed; opacity: .55; }
.test-driver-access article { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 12px 0; }
.test-driver-access article:first-of-type { margin-top: 10px; }
.test-driver-access article small { display: block; color: var(--muted); margin-top: 3px; }
.invoice-sheet { display: grid; gap: 16px; border: 1px solid var(--line); border-radius: 12px; background: white; padding: 22px; margin-top: 18px; }
.invoice-sheet > header { display: flex; justify-content: space-between; gap: 18px; border-bottom: 3px solid var(--green); padding-bottom: 14px; }
.invoice-sheet > header > div { display: grid; gap: 3px; }
.invoice-sheet > header > div:last-child { text-align: right; }
.invoice-sheet > header b { color: var(--green); font-size: 17px; }
.invoice-sheet > header small { color: var(--muted); }
.invoice-sheet > section { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.invoice-sheet > section span { line-height: 1.5; }
.invoice-sheet > section b, .invoice-products > b, .invoice-notes > b { display: block; color: var(--muted); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.invoice-products, .invoice-notes { border-radius: 9px; background: #f5f7f5; padding: 13px 15px; }
.invoice-products p, .invoice-notes p { margin: 5px 0; line-height: 1.45; }
.invoice-total { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; width: min(330px, 100%); justify-self: end; text-align: right; }
.invoice-total strong { border-top: 1px solid var(--line); color: var(--green); font-size: 18px; padding-top: 8px; margin-top: 4px; }
.invoice-total small { grid-column: 1/-1; color: var(--muted); text-transform: capitalize; }
.invoice-sheet > footer { border-top: 1px solid var(--line); color: var(--muted); padding-top: 13px; text-align: center; }
.invoice-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.invoice-actions a { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: 10px 14px; text-decoration: none; }
.session-loading {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
}
.session-loading p {
  color: var(--muted);
}
@media (max-width: 800px) {
  .equipment-grid,
  .equipment-summary,
  .shared-equipment > div:last-child,
  .special-equipment-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .equipment-card ul {
    grid-template-columns: minmax(0, 1fr);
  }
  .equipment-card,
  .equipment-card li,
  .special-equipment-list button {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .office-main {
    min-width: 0;
  }
  .modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    padding: 22px 16px;
  }
  .form-actions,
  .delete-actions,
  .toolbar {
    flex-wrap: wrap;
  }
  .form-actions > button,
  .delete-actions > button {
    flex: 1 1 150px;
  }
  .office-shell aside nav {
    overflow-x: auto;
  }
  .office-shell aside nav button {
    white-space: nowrap;
  }
  .two-column,
  .maintenance-board {
    grid-template-columns: 1fr;
  }
  .quick-form form {
    grid-template-columns: 1fr;
  }
  .quick-form .full,
  .quick-form .primary {
    grid-column: 1;
  }
  .driver-row {
    grid-template-columns: 1fr 100px 65px;
  }
  .driver-row.driver-editor {
    grid-template-columns: 1fr 1fr;
  }
  .driver-row.driver-editor > div,
  .driver-row.driver-editor > button {
    grid-column: 1/-1;
  }
  .staff-row {
    grid-template-columns: 1fr 1fr;
  }
  .staff-row button {
    width: 100%;
  }
  .data-list article {
    grid-template-columns: 58px 1fr;
  }
  .data-list article > span {
    grid-column: 2;
    text-align: left;
  }
  .parts-table article {
    grid-template-columns: 1fr 40px 65px;
  }
  .parts-table em {
    display: none;
  }
  .report-filters {
    grid-template-columns: 1fr 1fr;
  }
  .report-filters button {
    grid-column: 1/-1;
  }
  .report-list > button {
    grid-template-columns: 42px 1fr;
  }
  .report-list i,
  .report-list em {
    grid-column: 2;
  }
  .report-meta,
  .report-answers {
    grid-template-columns: 1fr;
  }
  .urgent-strip {
    display: grid;
    gap: 5px;
  }
  .office-main > header {
    align-items: flex-start;
  }
  .header-actions {
    display: grid;
  }
  .driver-page > header .header-actions {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .driver-page > header .header-actions button:last-child {
    grid-column: 1/-1;
  }
  .message-center form,
  .message-center form .full:first-child,
  .message-center form .primary.full {
    grid-template-columns: 1fr;
    grid-column: 1;
  }
  .alert-row {
    grid-template-columns: 60px 1fr;
  }
  .alert-row i {
    grid-column: 2;
  }
  .beta-banner { align-items: flex-start; flex-direction: column; gap: 5px; }
  .work-order-create form, .route-filters, .stop-summary, .product-entry, .invoice-sheet > section { grid-template-columns: 1fr; }
  .route-stop { grid-template-columns: 38px 1fr; }
  .route-stop > i { grid-column: 2; }
  .test-driver-access article { align-items: flex-start; flex-direction: column; }
  .test-driver-access article button { width: 100%; }
  .column-mapper, .import-counts { grid-template-columns: 1fr; }
  .photo-route-launch, .photo-capture-box, .photo-route-approval { align-items: stretch; flex-direction: column; }
  .photo-route-launch button, .photo-capture-box .file-button, .photo-route-approval button { width: 100%; }
  .photo-scan-settings, .photo-stop-fields { grid-template-columns: 1fr; }
  .photo-stop-fields label:first-child, .photo-stop-fields label:nth-child(2), .photo-stop-fields .full { grid-column: 1; }
  .photo-stop-top { grid-template-columns: 50px 1fr; }
  .photo-order-buttons { grid-column: 1/-1; justify-content: flex-end; }
  .import-summary, .import-approval { align-items: stretch; flex-direction: column; }
  .import-approval button { width: 100%; }
  .import-dropzone { padding: 18px; }
  .time-events article,
  .time-events article > div:first-child {
    align-items: flex-start;
  }
  .time-events article > div:first-child {
    grid-template-columns: 1fr;
  }
  .time-events article small {
    text-align: left;
  }
  .time-event-actions {
    display: grid;
  }
}
@media (max-width: 480px) {
  .kit-edit-list > div,
  .kit-add-row {
    grid-template-columns: 1fr;
  }
  .driver-announcements > header,
  .driver-announcements article,
  .announcement-list article footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .equipment-card header,
  .kit-tank,
  .panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .kit-tank span {
    text-align: left;
  }
  .driver-row.driver-editor,
  .report-filters,
  .staff-row,
  .parts-table article {
    grid-template-columns: 1fr;
  }
  .driver-row.driver-editor > *,
  .report-filters > *,
  .staff-row > * {
    grid-column: 1 !important;
  }
  .message-tabs {
    grid-template-columns: 1fr;
  }
  .driver-route-list button { grid-template-columns: 34px minmax(0, 1fr); }
  .driver-route-list button > i { grid-column: 2; }
  .invoice-sheet { padding: 16px; }
  .invoice-sheet > header { flex-direction: column; }
  .invoice-sheet > header > div:last-child { text-align: left; }
  .invoice-actions > * { width: 100%; }
}
.truck-files-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 0;
}
.truck-files-intro h2,
.truck-files-intro p { margin: 0; }
.truck-files-intro p {
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}
.truck-files-intro > b {
  white-space: nowrap;
  color: var(--green);
}
.truck-file-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.truck-file-card {
  appearance: none;
  background: white;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: inherit;
  cursor: pointer;
  padding: 20px;
  text-align: left;
  transition: .15s;
}
.truck-file-card:hover { border-color: var(--green); transform: translateY(-1px); }
.truck-file-card:disabled { cursor: wait; opacity: .7; }
.truck-file-card header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.truck-file-card header > span,
.truck-file-cover > span {
  width: 52px;
  height: 52px;
  border-radius: 9px;
  background: #eef2ef;
  color: var(--green);
  display: grid;
  place-items: center;
}
.truck-file-card svg,
.truck-file-cover svg { width: 28px; }
.truck-file-card header div { flex: 1; }
.truck-file-card small,
.truck-file-cover small {
  color: var(--green);
  font-weight: 800;
  letter-spacing: .04em;
}
.truck-file-card h2,
.truck-file-card h3 { margin: 0; }
.truck-file-card h2 { font: 700 23px Georgia; }
.truck-file-card h3 { font: 700 17px Georgia; margin-top: 18px; }
.truck-file-card p { color: var(--muted); margin: 7px 0 18px; }
.truck-file-card header em {
  background: #f7e7e4;
  color: #a2453d;
  border-radius: 20px;
  padding: 5px 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.truck-file-card footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 13px;
  font-size: 12px;
}
.truck-file-card footer b { color: var(--green); }
.truck-file-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 15px;
}
.truck-file-cover {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  color: white;
  background: var(--green);
  border-radius: 12px;
  padding: 24px;
}
.truck-file-cover > span { background: #ffffff1a; color: white; }
.truck-file-cover h2 { font: 700 25px Georgia; margin: 3px 0 5px; }
.truck-file-cover p { color: #e6efe9; margin: 2px 0; }
.truck-file-cover small { color: #c9ded0; }
.truck-file-cover > b {
  background: white;
  color: var(--green);
  border-radius: 20px;
  padding: 7px 11px;
}
.truck-file-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.truck-file-stats article {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}
.truck-file-stats small { color: var(--muted); display: block; }
.truck-file-stats strong { display: block; font: 700 23px Georgia; margin-top: 7px; }
.truck-file-section {
  padding: 0;
  overflow: hidden;
}
.truck-file-section > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 19px 20px;
}
.truck-file-section > summary::-webkit-details-marker { display: none; }
.truck-file-section > summary:hover { background: #f3f8f4; }
.truck-file-section > summary h2 { font: 700 20px Georgia; margin: 0; }
.truck-file-section > summary span { display: block; color: var(--muted); margin-top: 4px; font-size: 13px; }
.truck-file-section > summary > b {
  background: #eef2ef;
  color: var(--green);
  border-radius: 20px;
  padding: 5px 10px;
}
.truck-file-section > summary > i {
  color: var(--green);
  font-size: 22px;
  font-style: normal;
  transition: transform .15s;
}
.truck-file-section[open] > summary > i { transform: rotate(180deg); }
.truck-file-dropdown { padding: 0 20px 16px; }
.truck-file-list > button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  color: inherit;
  cursor: pointer;
  padding: 14px 0;
  text-align: left;
}
.truck-file-list > button:hover b { color: var(--green); }
.truck-file-list button > div { min-width: 0; }
.truck-file-list button > div b,
.truck-file-list button > div small { display: block; }
.truck-file-list button > div small { color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.truck-file-list button > em { color: var(--muted); font-style: normal; font-weight: 800; font-size: 12px; text-align: right; }
.file-status {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #eef2ef;
  color: var(--green);
  border-radius: 8px;
}
.file-status svg { width: 20px; }
.file-status.urgent { background: #f7e7e4; color: #a2453d; }
.file-status.complete { background: #e8f4ec; color: #27734c; }
@media (max-width: 900px) {
  .truck-file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .truck-file-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .truck-files-intro,
  .truck-file-cover { align-items: flex-start; }
  .truck-files-intro { flex-direction: column; }
  .truck-file-grid { grid-template-columns: 1fr; }
  .truck-file-cover { grid-template-columns: auto 1fr; }
  .truck-file-cover > b { grid-column: 1 / -1; }
  .truck-file-actions { display: grid; }
  .truck-file-actions button { width: 100%; }
  .truck-file-list > button { grid-template-columns: auto minmax(0, 1fr); }
  .truck-file-list button > em { grid-column: 2; text-align: left; }
  .truck-file-section > summary { grid-template-columns: minmax(0, 1fr) auto auto; padding: 16px; }
  .truck-file-dropdown { padding: 0 16px 14px; }
}
/* GSU company palette: green, black, white and neutral shades only. */
.login-icon,
.profile i,
.driver-actions > button > span,
.attention > b,
.truck-card > span,
.security-note,
.report-meta span,
.repair-history-card details,
.board-column > h2 span,
.file-status,
.photo-scan-status,
.photo-route-approval,
.import-status,
.import-counts span,
.import-kind button.active,
.next-stop-callout,
.driver-route-card > header > span {
  background: #eaf4ed;
  color: var(--green);
}
.login-error,
.page-error,
.unsafe,
.unsafe-banner,
.report-list em,
.unsafe-report,
.report-answers .answer-alert,
.defect-details > small,
.alert-button.urgent,
.work-card.urgent,
.beta-banner,
.photo-stop-list article.needs-review,
.photo-stop-fields .scan-missing input,
.import-warning,
.import-counts .warning,
.import-counts .error,
.file-status.urgent {
  background: #eef6f0 !important;
  border-color: var(--green) !important;
  color: #090b0a !important;
}
.driver-announcements > header > span,
.driver-announcements article.urgent,
.announcement-list article.urgent {
  border-color: #090b0a;
  color: #090b0a;
}
.driver-announcements > header > span {
  background: var(--green);
  color: white;
}
.driver-announcements article.urgent,
.announcement-list article.urgent { border-left-color: #090b0a; }
.photo-stop-list article.needs-review { box-shadow: inset 4px 0 var(--green); }
.page-error,
.unsafe-banner,
.unsafe,
.report-answers .answer-alert,
.defect-details > small,
.beta-banner,
.import-warning {
  border-left: 4px solid var(--green);
}
.urgent-strip,
.danger-button,
.announcement-list article.urgent em,
.alert-row.urgent > b {
  background: #090b0a;
  border-color: #090b0a;
  color: white;
}
.danger-button:hover { background: var(--green); }
.alert-button b,
.nav-count,
.alert-row.unread span strong::before {
  background: var(--green);
  color: white;
}
.work-card.urgent { border-left-color: #090b0a !important; }
.work-card.urgent header em,
.parts-table .low span,
.report-list em,
.photo-order-buttons button:last-child,
.photo-stop-fields .scan-missing,
.alert-button.urgent,
.attention em.danger {
  color: #090b0a;
}
.attention em,
.attention em.danger,
.login-success,
.created-card,
.assigned em,
.file-status.complete {
  background: #eaf4ed;
  border-color: #a9cdb5;
  color: var(--green);
}
.scan-raw pre { background: #090b0a; color: white; }
@media print {
  body * { visibility: hidden !important; }
  .backdrop, .work-order-preview, .work-order-preview * { visibility: visible !important; }
  .backdrop { position: static; display: block; background: white; padding: 0; }
  .work-order-preview { position: absolute; inset: 0; width: 100%; max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
  .work-order-preview > .eyebrow, .work-order-preview > h2, .work-order-preview > p, .stop-actions, .stop-summary, .attention, .stop-notes, .print-hide { display: none !important; }
  .invoice-sheet { border: 0; margin: 0; padding: 20px; }
}

/* Keep account controls readable even in a narrow desktop panel. */
.staff-panel { container-type: inline-size; }
.staff-row { grid-template-columns: minmax(0, 1fr) 160px 120px 88px; }
.staff-row > div { min-width: 0; overflow-wrap: break-word; }
.staff-row select { width: 100%; min-width: 0; height: 44px; }
.staff-row button { min-width: 88px; white-space: nowrap; }
@container (max-width: 600px) {
  .staff-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 88px; }
  .staff-row > div { grid-column: 1 / -1; }
}
@container (max-width: 350px) {
  .staff-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .staff-row > div, .staff-row button { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .staff-row { grid-template-columns: minmax(0, 1fr); }
  .staff-row > * { grid-column: 1 !important; }
}

/* Driver workspace shares the office branding and panel system. */
.driver-page { background: var(--cream); }
.driver-page > header {
  background: var(--ink);
  color: white;
  min-height: 88px;
  height: auto;
  padding: 20px clamp(20px, 4vw, 42px);
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 4px solid var(--green);
}
.driver-page > header .brand small { color: #bdc8c2; }
.driver-page > header .outline { background: transparent; color: white; border-color: #56615a; }
.driver-page > header .outline:hover { background: var(--green); border-color: var(--green); }
.driver-content { width: min(1120px, 100%); padding: 35px 42px; }
.driver-content > h1 { font: 700 32px Georgia; margin: 8px 0; }
.driver-content > .eyebrow { font-size: 14px; letter-spacing: .08em; }
.driver-content > .sub { font-size: 16px; margin-bottom: 28px; }
.driver-page .assigned,
.driver-page .time-clock,
.driver-page .driver-announcements,
.driver-page .driver-route-card,
.driver-page .notice-card,
.driver-page .driver-special,
.driver-page .driver-help {
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 20px;
  box-shadow: none;
}
.driver-page .assigned { margin: 18px 0; }
.driver-page .assigned small,
.driver-page .assigned p,
.driver-page .driver-help p,
.driver-page .driver-special span { color: var(--muted); font-size: 14px; }
.driver-page .assigned > span { background: var(--green); color: white; border-radius: 8px; }
.driver-page .assigned em { font-size: 14px; background: #e7f3eb; color: var(--green); }
.driver-page .driver-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.driver-page .driver-actions > button { padding: 20px; border-radius: 11px; min-width: 0; cursor: pointer; }
.driver-page .driver-actions > button:hover { border-color: var(--green); background: #f4f8f5; }
.driver-page .driver-actions > button > span { flex-shrink: 0; border-radius: 8px; background: var(--green); color: white; }
.driver-page .driver-actions small { font-size: 14px; line-height: 1.5; }
.driver-page .driver-actions b { font-size: 16px; }
.driver-page .driver-help { margin-top: 18px; }
.driver-page .driver-announcements > header small,
.driver-page .driver-route-card > header small,
.driver-page .time-clock small { font-size: 14px; }
@media (max-width: 800px) {
  .driver-content { padding: 28px 20px; }
  .driver-page .driver-actions { grid-template-columns: minmax(0, 1fr); }
  .driver-page > header { align-items: flex-start; }
  .driver-page > header .header-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .driver-page > header .header-actions button { min-height: 44px; flex: 1 1 auto; white-space: nowrap; }
}

.attachment-backdrop { z-index: 1000; }
.attachment-view img { display: block; max-width: 100%; max-height: 65vh; margin: 16px auto; object-fit: contain; }
.attachment-view iframe { width: 100%; height: 65vh; border: 1px solid var(--line); margin: 16px 0; }
.attachment-view a { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }

.dashboard-attention-row { display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--line); }
.dashboard-attention-row > .attention { border-top: 0; flex: 1; min-width: 0; }
.dashboard-photo { flex: 0 0 96px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 4px; margin: 12px 0; cursor: pointer; color: var(--green); }
.dashboard-photo img { width: 86px; height: 72px; object-fit: cover; border-radius: 5px; }
.dashboard-photo small { display: block; font-size: 14px; font-weight: 700; padding: 4px 0; }
@media (max-width: 480px) { .dashboard-attention-row { flex-wrap: wrap; gap: 0; } .dashboard-attention-row > .attention { flex-basis: 100%; } .dashboard-photo { margin: 0 0 14px; } }

.report-category-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.report-category-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; }
.report-category-tabs span { font-size: 14px; border-radius: 20px; padding: 3px 7px; background: #e7f3eb; color: var(--green); }
@media (max-width: 480px) { .report-category-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .report-category-tabs button { font-size: 14px; padding: 10px 8px; } }
.owner-company-layout { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.6fr); gap: 18px; align-items: start; }
.owner-company-list { display: grid; gap: 8px; }
.owner-company-list button { padding: 14px; border: 1px solid var(--line); border-radius: 8px; text-align: left; background: white; cursor: pointer; }
.owner-company-list button.active { border-color: var(--green); background: #e7f3eb; }
.owner-company-list small, .owner-account small { display: block; margin-top: 5px; color: var(--muted); }
.owner-form { display: grid; gap: 16px; }
.owner-form label:not(.owner-toggle) { display: grid; gap: 7px; font-weight: 700; }
.owner-form input:not([type=checkbox]), .owner-form select, .owner-form textarea, .owner-account select { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.owner-form textarea { min-height: 100px; }
.owner-form fieldset { padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.owner-toggle { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0; }
.owner-toggle input { width: 22px; height: 22px; accent-color: var(--green); flex-shrink: 0; }
.owner-toggle small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.5; }
.owner-add { margin-top: 20px; } .owner-add summary { cursor: pointer; font-weight: 800; margin-bottom: 16px; }
.owner-account { display: grid; grid-template-columns: minmax(0, 1fr) 150px 115px 85px; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding: 14px 0; }
.owner-account button { white-space: nowrap; }
.owner-notice { padding: 16px; border: 1px solid var(--green); background: #e7f3eb; border-radius: 8px; }
.owner-audit { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 1200px) { .owner-account { grid-template-columns: 1fr 1fr; } .owner-account > div { grid-column: 1/-1; } }
@media (max-width: 800px) { .owner-company-layout { grid-template-columns: 1fr; } }

.primary,.brand>span{color:var(--on-primary,#fff)}
.sidebar{background:var(--company-dark,#101312);color:var(--on-company-dark,#fff)}
.sidebar button,.sidebar a{color:inherit}

.office-shell>aside{background:var(--company-dark,#101312);color:var(--on-company-dark,#fff)}
.office-shell>aside nav button,.office-shell>aside .brand{color:inherit}