#storage-label {
  display: inline-flex;
  align-items: center;
  max-width: 210px;
  color: #53736a;
  font-size: 10px;
  line-height: 1.4;
}

.advanced-driver-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.advanced-driver-actions .button { width: 100%; }
.driver-delete-button { color: #a24534; border-color: #e6c8bf; }
.driver-delete-button:hover { background: #fff5f2; border-color: #c68b7b; }
.delete-driver-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px; border: 1px solid #dce7e5; border-radius: 16px; color: #243f46; font: inherit; direction: ltr; }
.delete-driver-dialog::backdrop { background: #142f3b66; }
.delete-driver-dialog p { font-size: 12px; line-height: 1.6; }
.delete-driver-dialog label { display: block; margin: 16px 0 6px; font-size: 12px; font-weight: 600; }
.delete-driver-dialog select { width: 100%; min-height: 40px; padding: 8px; border: 1px solid #ccddda; border-radius: 8px; background: #fff; color: inherit; font: inherit; }
.delete-driver-dialog select:focus-visible { outline: 2px solid #0d766c; outline-offset: 2px; }
#delete-driver-error { color: #a24534; }
#delete-driver-error:empty { display: none; }
.button-danger { color: #fff; background: #ae4936; font-weight: 600; }
.button-danger:hover { background: #933b2b; }
.button-danger:disabled { opacity: .45; cursor: not-allowed; }

#storage-label[data-state="error"],
#storage-label[data-state="failed"],
#storage-label[data-state="conflict"],
#storage-label[data-save-state="error"],
#storage-label.is-error { color: #a24533; }
#storage-label[data-state="saving"],
#storage-label[data-save-state="saving"] { color: #80631e; }
#retry-save { font-size: 10px; color: #a24533; border-color: #edc9bf; background: #fff7f4; }
#retry-save[hidden], #settings-backup-file[hidden], #backup-preview[hidden], #map-service-error[hidden], #cancel-map-placement[hidden], #storage-conflict[hidden] { display: none; }

.map-route-summary {
  width: min(620px, calc(100% - 40px));
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.map-route-summary .metric { display: flex; flex-direction: column; justify-content: flex-start; padding: 8px 5px; }
.map-route-summary .metric strong { font-size: 14px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.map-route-summary .metric span { font-size: 10px; line-height: 1.35; }
.map-route-summary .metric small { margin-top: 4px; font-size: 8px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.map-route-coverage { grid-column: 1/-1; margin: 0; padding: 3px 5px 1px; color: #61777e; font-size: 9px; line-height: 1.4; text-align: center; }
.map-route-coverage:empty { display: none; }
.map-route-coverage.warning, .map-route-coverage[data-ready="false"] { color: #946d21; }

.map-instruction.placing {
  display: flex !important;
  top: auto;
  bottom: 20px;
  left: 20px;
  right: auto;
  width: min(560px, calc(100% - 130px));
  min-width: 0;
  max-width: none;
  gap: 10px;
  padding: 10px;
  z-index: 650;
  border: 1px solid #9ac7bd;
  border-radius: 12px;
  background: #fffffffa;
}
.map-instruction.placing > div { flex: 1; min-width: 0; }
.map-instruction.placing strong { display: block; font-size: 11px; }
.map-instruction.placing #map-hint { display: block; max-width: none; margin-top: 3px; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.map-placement-cancel { flex: none; min-height: 32px; padding: 5px 9px; border: 1px solid #c5d9d3; border-radius: 7px; color: #075c55; background: #f1f8f5; font: inherit; font-size: 10px; cursor: pointer; }
.map-placement-cancel:focus-visible { outline: 2px solid #0d766c88; outline-offset: 2px; }
.map-area:has(.map-instruction.placing) .map-legend { display: none; }
.map-service-error { position: absolute; left: 20px; right: 20px; top: 45%; z-index: 700; max-width: 480px; margin: auto; padding: 16px; border: 1px solid #edc9bf; border-radius: 12px; background: #fff8f5; color: #913e30; font-size: 13px; line-height: 1.5; box-shadow: 0 5px 20px #173e421a; }

.advanced-setup { margin-top: 14px; border: 1px solid #dce7e3; border-radius: 12px; background: #fafcfb; }
.advanced-setup > summary { padding: 12px; color: #536e72; font-size: 11px; font-weight: 600; cursor: pointer; }
.advanced-setup-content { padding: 0 12px 12px; }
.advanced-setup-content .button { width: 100%; min-height: 34px; font-size: 10px; }
.advanced-date-label { display: flex; justify-content: space-between; margin: 15px 0 6px; color: #385a63; font-size: 10px; font-weight: 600; }
.advanced-date-label span { color: #75898b; font-size: 9px; font-weight: 400; }
#fuel-test-date { display: block; width: 100%; height: 35px; padding: 6px 9px; border: 1px solid #d5e2dc; border-radius: 8px; background: #fff; color: #243d45; font: inherit; font-size: 11px; }
.advanced-help { margin: 7px 0 0; color: #75878d; font-size: 9px; line-height: 1.5; }
.advanced-backup-heading { margin-top: 15px; padding-top: 12px; border-top: 1px solid #e0e9e4; font-size: 11px; color: #385a63; }
.advanced-backup-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.backup-preview { margin-top: 12px; padding: 11px; border: 1px solid #e4d399; border-radius: 9px; background: #fff9e8; }
#backup-preview-summary { margin: 0; color: #6d5d31; font-size: 10px; line-height: 1.5; white-space: pre-line; }
.manager-view #advanced-setup { display: none; }
.storage-conflict { margin-bottom: 13px; padding: 11px; border: 1px solid #e4cda0; border-radius: 10px; background: #fff8e9; color: #7e6027; font-size: 11px; }
.storage-conflict p { margin: 6px 0 9px; font-size: 10px; line-height: 1.5; }
.storage-conflict .button { width: 100%; min-height: 32px; height: auto; padding: 7px; color: #795a26; border-color: #dfcdab; font-size: 9px; }
.conflict-version-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }

.map-layers { right: 56px; bottom: 24px; }
.map-layers-toggle { width: 44px; height: 44px; gap: 2px; padding: 3px; border-color: #c7d5d5; border-radius: 8px; }
.layers-current-preview { width: 30px; height: 19px; border-radius: 4px; }
.layers-current-preview i { left: 3px; bottom: 1px; font-size: 13px; }
.map-layers-toggle:focus-visible { outline: 2px solid #0d766c; outline-offset: 3px; }
.map-layers-menu { width: 214px; }
.advanced-map-layers { width: 100%; border-top: 1px solid #e0e8e4; padding-top: 6px; color: #60777c; font-size: 10px; }
.advanced-map-layers > summary { padding: 4px; cursor: pointer; }
.advanced-map-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 5px; }
.advanced-map-options .map-layer-option, .advanced-map-options .map-layer-option[data-map-style="azure3d"] { width: 100%; }
.advanced-map-options .map-layer-config { grid-column: 1/-1; min-height: 30px; padding: 5px; }

.route-approval, .route-approval-card { margin: 12px 0; padding: 12px; border: 1px solid #ead89d; border-radius: 11px; background: #fff9e8; color: #72591e; }
.route-approval.confirmed, .route-approval-card.confirmed, .route-approval[data-confirmed="true"], .route-approval-card[data-confirmed="true"] { border-color: #a9cfc2; background: #eef8f3; color: #1f6553; }
.route-approval h2, .route-approval-card h2 { margin: 0 0 6px; font-size: 12px; }
.route-approval p, .route-approval-card p { margin: 5px 0; font-size: 10px; line-height: 1.5; }
.route-approval-status { display: inline-block; font-size: 10px; font-weight: 600; line-height: 1.5; }
.route-approval-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.route-approval-actions .button { flex: 1; min-width: 100px; min-height: 34px; font-size: 10px; }
.route-approval-note, .route-approval-date { color: #748383; font-size: 9px; line-height: 1.5; }
.route-unconfirmed { color: #98701f; }
.route-approval .confirmed { color: #1f6553; }
.route-approval .proposed { color: #8a681e; }
.route-approval > strong { display: block; font-size: 11px; }
.route-approval > button { width: 100%; min-height: 34px; margin-top: 8px; padding: 8px; border: 1px solid #c9dcd4; border-radius: 7px; background: #fff; color: #075c55; font: inherit; font-size: 10px; cursor: pointer; }
.route-approval > button:disabled { cursor: default; opacity: .6; }
.mcc-edit-options { min-width: 0; color: #56717b; font-size: 9px; }
.mcc-edit-options > summary { padding: 5px 6px; border: 1px solid #dce7e5; border-radius: 6px; background: #fff; cursor: pointer; white-space: nowrap; }
.mcc-edit-options[open] { grid-column: 2/-1; }
.stop-edit-row { display: flex; flex-direction: column; gap: 7px; margin-top: 7px; padding: 8px; border: 1px solid #dce7e5; border-radius: 8px; background: #fff; }
.stop-edit-row input { width: 100%; min-width: 0; height: 30px; padding: 5px 7px; border: 1px solid #d4e1dd; border-radius: 6px; color: #243f46; font: inherit; font-size: 11px; }
.stop-edit-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.stop-edit-actions button { min-height: 27px; padding: 5px 7px; font: inherit; font-size: 9px; }

@media (max-width: 760px) {
  .topbar { height: 74px; padding: 8px 11px; gap: 8px; }
  .brand-lockup { gap: 7px; }
  .brand-mark { width: 29px; height: 29px; border-radius: 10px; }
  .brand-lockup strong { font-size: 11px; }
  .brand-lockup span { font-size: 8px; }
  .topbar-meta { flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: calc(100% - 126px); }
  .topbar-meta .view-button { padding: 6px 5px; font-size: 8px; }
  #storage-label { order: 2; flex-basis: 100%; justify-content: flex-end; max-width: none; font-size: 8px; }
  #retry-save { order: 1; font-size: 8px; }
  .workspace, .workspace.sidebar-collapsed { height: calc(100dvh - 74px); }
  .workspace .map-area { min-height: 320px; }
  .map-route-summary { width: min(620px, calc(100% - 74px)); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .map-route-summary .metric { grid-column: span 2; padding: 5px 3px; }
  .map-route-summary .metric:nth-child(4), .map-route-summary .metric:nth-child(5) { grid-column: span 3; }
  .map-route-summary .metric strong, .map-route-summary .metric #metric-fuel { font-size: 11px; }
  .map-route-summary .metric span { font-size: 8px; }
  .map-route-summary .metric small { margin-top: 3px; font-size: 7px; }
  .map-route-coverage { padding: 1px 4px; font-size: 8px; }
  .map-instruction.placing { bottom: 10px; left: 11px; width: calc(100% - 112px); gap: 7px; padding: 8px; }
  .map-instruction.placing .instruction-icon { display: none; }
  .map-instruction.placing strong { font-size: 10px; }
  .map-instruction.placing #map-hint { font-size: 9px; }
  .map-placement-cancel { min-height: 30px; padding: 5px 6px; font-size: 9px; }
  .map-layers-menu { max-height: 210px; overflow-y: auto; }
}