/* CLE Bounce Houses Delivery App — mobile-first, sunlight-readable, glove-friendly */

:root {
  --navy: #0b3d91;
  /* Best visual estimate of the new logo's background blue — Matthew
     pasted the image inline (not as an uploadable file), so this is an
     eyeballed match, not a pixel sample. Scoped to the header bar only
     (see header.app-header below), not the shared --navy variable used
     for buttons/badges elsewhere, so this doesn't cascade into an
     unintended app-wide re-theme. Swap this out for a precise value once
     the real logo file is available to sample from. */
  --header-blue: #0057d8;
  --yellow: #ffcc00;
  --green: #1a8f4c;
  --red: #c0392b;
  --gray-bg: #f4f5f7;
  --text: #1a1a1a;
  --border: #d4d7dc;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--gray-bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 18px;
  -webkit-tap-highlight-color: transparent;
}

header.app-header {
  background: var(--header-blue);
  color: #fff;
  padding: 16px 20px;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.header-user-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.header-user-bar .btn-clear-small {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}

header.app-header h1 {
  margin: 0;
  font-size: 20px;
}

header.app-header .subtitle {
  font-size: 14px;
  opacity: 0.85;
  margin-top: 2px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  flex-shrink: 0;
}

.app-footer {
  text-align: center;
  font-size: 13px;
  color: #666;
  padding: 20px 10px 10px;
  line-height: 1.6;
}
.app-footer a { color: var(--navy); text-decoration: none; font-weight: 600; }

main {
  padding: 16px;
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: 100px;
}

.card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
}

.card h2 {
  margin-top: 0;
  font-size: 17px;
  color: var(--navy);
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 8px;
}

.stop-info dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 0;
}
.stop-info dt { font-weight: 600; color: #555; }
.stop-info dd { margin: 0; }
#s-packinglist { white-space: pre-line; }

.nav-button {
  display: inline-block;
  margin-top: 12px;
  padding: 14px 20px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
}

.stop-actions-row {
  display: flex;
  gap: 10px;
}
.stop-actions-row .nav-button,
.stop-actions-row .btn-eta {
  flex: 1;
  margin-top: 12px;
}

.btn-eta {
  display: inline-block;
  padding: 14px 20px;
  background: var(--green);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
}
.btn-eta.disabled {
  background: #bbb;
  color: #f0f0f0;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 17px;
}
.checklist-item:last-child { border-bottom: none; }

.checklist-item input[type="checkbox"] {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  accent-color: var(--green);
}

.checklist-item.done label {
  text-decoration: line-through;
  color: #777;
}

button, .btn {
  font-size: 17px;
  font-weight: 600;
  padding: 16px 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  width: 100%;
  min-height: 56px;
}

.btn-primary { background: var(--green); color: #fff; }
.btn-secondary { background: var(--navy); color: #fff; }
.btn-outline { background: #fff; color: var(--navy); border: 2px solid var(--navy); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.photo-preview {
  margin-top: 12px;
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
}

canvas#signature-pad {
  width: 100%;
  height: 200px;
  background: #fff;
  border: 2px dashed var(--border);
  border-radius: 8px;
  touch-action: none;
}

.sig-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.pod-clause {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.pod-clause:first-of-type { padding-top: 0; }

.pod-clause-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  margin: 0 0 10px;
}

.initial-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

canvas.initial-pad {
  flex: 1;
  height: 70px;
  background: #fff;
  border: 2px dashed var(--border);
  border-radius: 8px;
  touch-action: none;
}

.initial-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  flex-shrink: 0;
}

.initial-label {
  font-size: 11px;
  color: #777;
  font-weight: 600;
  text-align: right;
}

.btn-clear-small {
  width: auto;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 13px;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--border);
}

.pod-signature-block {
  padding-top: 14px;
}

.pod-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
}

.pod-name-input {
  width: 100%;
  font-size: 16px;
  padding: 12px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 16px;
  box-sizing: border-box;
}

.btn-contactless {
  margin-top: 14px;
  background: #fff;
  color: var(--red);
  border: 2px solid var(--red);
}

.contactless-status {
  margin-top: 10px;
  font-size: 13px;
  color: #6b3fa0;
  background: #f5f0fa;
  border: 1px solid #ddd0ee;
  border-radius: 8px;
  padding: 10px 12px;
  word-break: break-word;
}
.contactless-status a { color: #6b3fa0; font-weight: 600; }
.sig-actions button { width: auto; flex: 1; }

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--yellow);
  color: #443300;
}
.status-badge.complete { background: var(--green); color: #fff; }

/* Trip-stage badge colors — our own crew-progress tracking, separate
   from the "IO Order Status" field shown lower in the card. */
.status-badge.stage-pending { background: var(--yellow); color: #443300; }
.status-badge.stage-en_route { background: #1565c0; color: #fff; }
.status-badge.stage-on_site { background: #6b3fa0; color: #fff; }
.status-badge.stage-complete { background: var(--green); color: #fff; }

.trip-buttons {
  display: flex;
  gap: 10px;
}
.trip-buttons .btn-stage {
  flex: 1;
  background: #fff;
  color: var(--navy);
  border: 2px solid var(--navy);
  font-size: 15px;
  padding: 14px 10px;
}
.trip-buttons .btn-stage:disabled {
  background: #eef4ff;
  color: var(--navy);
  border-color: var(--border);
  opacity: 1;
}

.complete-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}

.sync-status {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
  margin-bottom: 6px;
  color: #8a6d00; /* pending / waiting tone */
}
.sync-status.synced { color: var(--green); }
.sync-status.pending { color: #8a6d00; }

.offline-banner {
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 8px;
  font-size: 14px;
  display: none;
}
.offline-banner.show { display: block; }

.demo-note {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #6b5300;
  margin-bottom: 16px;
}

.back-link {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
}

.picker-row {
  display: flex;
  gap: 12px;
}

.picker-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.picker-field label {
  font-size: 13px;
  font-weight: 600;
  color: #555;
}

.picker-field input,
.picker-field select {
  font-size: 16px;
  padding: 12px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  min-height: 48px;
}

.route-card {
  display: block;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}

.route-card-title {
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.route-card-address {
  font-size: 15px;
  margin-bottom: 4px;
}

.route-card-meta {
  font-size: 13px;
  color: #555;
}

.route-card-status {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--yellow);
  color: #443300;
}

.route-card-error {
  font-size: 14px;
  color: var(--red);
}

.route-card-toprow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 4px;
}
.route-card-toprow .route-card-title { margin-bottom: 0; }

.stop-type-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.stop-type-badge.delivery { background: #1565c0; color: #fff; }
.stop-type-badge.pickup { background: var(--red); color: #fff; }
.stop-type-badge.unknown { background: #ddd; color: #555; }

/* Balance due — red if owed, green if paid up */
.balance-amount { font-weight: 700; font-size: 18px; }
.balance-amount.owed { color: var(--red); }
.balance-amount.paid { color: var(--green); }

/* Simple centered modal, used for the Cash/Card payment popup */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.modal-btn-row {
  display: flex;
  gap: 10px;
}
.modal-btn-row button { flex: 1; }
#payment-card-btn.card-disabled { opacity: 0.5; }

#payment-status.ok { color: var(--green); }
#payment-status.error { color: var(--red); }

/* Pickup page: gear checklist with counts */
.gear-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}
.gear-item:last-child { border-bottom: none; }
.gear-item-name { font-size: 16px; flex: 1; }
.gear-item-expected { font-size: 13px; color: #777; }
.gear-count-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gear-count-btn {
  width: 40px;
  min-height: 40px;
  padding: 0;
  font-size: 20px;
  border-radius: 8px;
}
.gear-count-value {
  font-size: 18px;
  font-weight: 700;
  min-width: 28px;
  text-align: center;
}
.gear-item.short .gear-count-value { color: var(--red); }
.gear-item.full .gear-count-value { color: var(--green); }

.toggle-row {
  display: flex;
  gap: 10px;
}
.toggle-row button {
  flex: 1;
  background: #fff;
  color: var(--navy);
  border: 2px solid var(--border);
}
#btn-clean.selected { background: var(--green); color: #fff; border-color: var(--green); }
#btn-dirty.selected { background: var(--red); color: #fff; border-color: var(--red); }

.btn-report-problem {
  background: #fff;
  color: var(--red);
  border: 2px solid var(--red);
}

.problem-options {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.problem-option {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.problem-option:last-child { border-bottom: none; }
.problem-option-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  cursor: pointer;
}
.problem-option-label input[type="checkbox"] {
  width: 26px;
  height: 26px;
  accent-color: var(--red);
  flex-shrink: 0;
}
.problem-option-detail {
  margin-top: 8px;
  margin-left: 38px;
  display: none;
}
.problem-option-detail.show { display: block; }
.problem-note-input {
  width: 100%;
  font-size: 15px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-top: 8px;
  box-sizing: border-box;
}
.problem-note-required-flag {
  font-size: 12px;
  color: var(--red);
  margin-top: 4px;
  display: none;
}
.problem-note-required-flag.show { display: block; }

.delivery-notes-banner {
  background: #eef4ff;
  border: 1px solid #c6d9f7;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
}
.delivery-notes-banner h3 {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.delivery-notes-banner p { margin: 0; white-space: pre-line; }

/* Event Notes — whatever the office wrote on the lead in InflatableOffice
   (gate codes, dog on site, call on arrival, etc.). Styled to stand out
   more than the card layout used everywhere else on this page — this is
   the one thing on Stop Details that's easy to miss but can matter most. */
.event-notes-card {
  background: #fff8e1;
  border: 2px solid var(--yellow);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 16px;
}
.event-notes-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #7a5900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.event-notes-card p { margin: 0; white-space: pre-line; font-weight: 600; }

/* ---- Office Dashboard (desktop-first) ---- */
.dashboard-main {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}
.dashboard-toolbar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.dashboard-status { color: #555; font-size: 14px; }

.view-toggle { display: flex; gap: 6px; }
.view-toggle-btn {
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  width: auto;
  min-height: auto;
}
.view-toggle-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.dashboard-map {
  height: 620px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #eee;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 13px;
  color: #444;
}
.map-legend-item { display: flex; align-items: center; gap: 6px; }
.map-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

.truck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.truck-lane {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 12px;
}
.truck-lane-header {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--navy);
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.truck-lane-count {
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  padding: 2px 9px;
}
.truck-lane-stops { display: flex; flex-direction: column; gap: 8px; }

.dash-stop-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  background: #fafbfc;
  transition: background 0.1s;
}
.dash-stop-card:hover { background: #eef4ff; }
.dash-stop-card.stage-pending { border-left-color: #999; }
.dash-stop-card.stage-enroute { border-left-color: #1565c0; }
.dash-stop-card.stage-onsite { border-left-color: #e6a100; }
.dash-stop-card.stage-complete { border-left-color: var(--green); }

.dash-stop-toprow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dash-problem-flag { color: var(--red); font-size: 16px; }
.dash-stop-name { font-weight: 700; margin-bottom: 2px; }
.dash-stop-address { font-size: 13px; color: #666; margin-bottom: 8px; }
.dash-stop-stage-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eee;
  color: #444;
}
.dash-stop-stage-badge.stage-pending { background: #eee; color: #555; }
.dash-stop-stage-badge.stage-enroute { background: #e3f0ff; color: #1565c0; }
.dash-stop-stage-badge.stage-onsite { background: #fff3d6; color: #a06d00; }
.dash-stop-stage-badge.stage-complete { background: #e3f7ea; color: var(--green); }

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.popup-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
}
.popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  width: auto;
  min-height: auto;
}
.popup-address { color: #666; margin: 4px 0 12px; }
.popup-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0;
}
.popup-dl dt { font-weight: 600; color: #555; }
.popup-dl dd { margin: 0; }

/* ---- Manage Drivers ---- */
.form-help {
  color: #666;
  font-size: 14px;
  margin-top: -6px;
  margin-bottom: 14px;
}
.form-status {
  margin-top: 10px;
  font-size: 14px;
  min-height: 1.2em;
}
.form-status.success { color: var(--green); font-weight: 600; }
.form-status.error { color: var(--red); font-weight: 600; }

.section-subhead {
  font-size: 15px;
  color: var(--navy);
  margin: 18px 0 10px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.simple-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 15px;
}
.simple-table th,
.simple-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.simple-table th {
  color: #555;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* ---- Warehouse Loading ---- */
.wh-stop-card { margin-bottom: 14px; }
.wh-stop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 19px;
}
.wh-stop-progress {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  background: #eee;
  border-radius: 999px;
  padding: 3px 10px;
}
.wh-items { margin-top: 6px; }
.wh-item-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.wh-item-row:last-child { border-bottom: none; }
.wh-item-row.done .wh-item-name { color: #1a8f4c; }
.wh-item-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.wh-item-main input[type="checkbox"] {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--green);
}
.wh-item-info { flex: 1; min-width: 0; }
.wh-item-name { font-weight: 700; font-size: 17px; }
.wh-item-packing { font-size: 13px; color: #666; margin-top: 2px; }
.wh-item-status { font-size: 14px; font-weight: 600; margin-top: 4px; }
.wh-item-sync-warning { font-size: 12px; color: #a06d00; margin-top: 2px; }
.wh-issue-btn {
  margin-top: 8px;
  margin-left: 42px;
  width: auto;
  min-height: auto;
  padding: 6px 12px;
  font-size: 13px;
}
.wh-issue-detail {
  margin-top: 10px;
  margin-left: 42px;
  padding: 12px;
  background: #f7f8fa;
  border-radius: 8px;
}
.wh-loaded-qty-input { margin-bottom: 10px; }
.wh-issue-type-row { display: flex; gap: 8px; margin-bottom: 10px; }
.wh-issue-type-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 600;
  width: auto;
  min-height: auto;
}
.wh-issue-type-btn.active { border-color: var(--red); background: #fdecea; color: var(--red); }
.wh-issue-notes {
  width: 100%;
  font-size: 15px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-sizing: border-box;
}

.simple-table .remove-assignment-btn {
  padding: 4px 10px;
  font-size: 13px;
  width: auto;
  min-height: auto;
}

/* ---- Truck Assignments — Day Roster ---- */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.roster-truck-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: #fafbfc;
}
.roster-truck-name {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.roster-count {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  background: #eee;
  border-radius: 999px;
  padding: 2px 9px;
}
.roster-slots { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.roster-slot-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.roster-slot-row select {
  padding: 8px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}
.roster-slot-row .roster-driver-select { flex: 2; min-width: 0; }
.roster-slot-row .roster-position-select { flex: 1; min-width: 0; }
.roster-slot-row .roster-driver-select.roster-duplicate {
  border-color: var(--red);
  background: #fdecea;
}
.roster-remove-btn {
  background: none;
  border: none;
  color: #999;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  width: auto;
  min-height: auto;
  padding: 2px 6px;
}
.roster-remove-btn:hover { color: var(--red); }
.roster-add-btn {
  width: 100%;
  text-align: center;
  padding: 6px;
  font-size: 14px;
}
.roster-warning {
  font-size: 12px;
  color: #a06d00;
  background: #fff3d6;
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 8px;
}

/* ---- Prev/Next day arrows (v0.26) ----
   One unified pill (arrow | date | arrow) instead of three separate
   boxed elements — the earlier version gave each piece its own border,
   which read as cluttered/oversized (Matthew's real-device screenshot
   showed the left arrow ballooning to fill empty flex space with a
   stray blank box next to it). This version puts a single border/
   background on the OUTER row and strips borders off the inner pieces,
   so the whole thing is exactly one input-field-sized control. */
.date-nav-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  min-height: 48px;
}
.date-nav-row input[type="date"] {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  min-height: 0;
  padding: 12px 8px;
  background: transparent;
}
.date-nav-btn {
  flex: 0 0 auto;
  width: 38px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  border: none;
  background: #f4f6fa;
  color: var(--navy);
  cursor: pointer;
}
.date-nav-btn:first-child {
  border-right: 1px solid var(--border);
}
.date-nav-btn:last-child {
  border-left: 1px solid var(--border);
}
.date-nav-btn:active {
  background: #dfe7f7;
}

/* ---- Manage Drivers — per-person module permissions (v0.26) ---- */
.perm-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.perm-checkbox:disabled {
  cursor: default;
  opacity: 0.6;
}
.perm-save-btn {
  white-space: nowrap;
}