/* Shared worksheet toolbar: desktop, tablet, and dynamically inserted controls. */
:root { --dtw-control-scale: 1; --dtw-control-height: 2.5rem; --dtw-control-radius: 6px; }
body #toolbar {
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  background: #202a34 !important;
  border-bottom: 1px solid #465361 !important;
  box-shadow: 0 2px 6px #0003 !important;
  max-height: none !important;
}
body #toolbar :is(button, select) {
  box-sizing: border-box !important;
  height: calc(var(--dtw-control-height) * var(--dtw-control-scale)) !important;
  min-height: calc(var(--dtw-control-height) * var(--dtw-control-scale)) !important;
  padding: 0 calc(11px * var(--dtw-control-scale)) !important;
  border: 1px solid #ffffff38 !important;
  border-radius: var(--dtw-control-radius) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: calc(.875rem * var(--dtw-control-scale)) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  vertical-align: middle;
  flex-shrink: 0 !important;
  cursor: pointer;
  transition: filter .12s ease, border-color .12s ease, box-shadow .12s ease;
}
/* Keep existing PAR, timer, recording, and unit colors intact. */
body #toolbar :is(#btnToggleSidebar, #btnText, #btnUndo, #btnRedo, #btnMoreActions, #btnCallMode, #btnUnitMenu, #dtwMapPicker, #modeSelect, #dtwIpadMoreSelect, #btnZoomIn, #btnZoomOut, #btnDryEraseMode) {
  background: #3b4855 !important;
  color: #f8fafc !important;
}
body #toolbar :is(button, select):hover:not(:disabled) { filter: brightness(1.13); border-color: #ffffff75 !important; }
body #toolbar :is(button, select):active:not(:disabled) { filter: brightness(.94); }
body #toolbar :is(button, select):focus-visible,
body :is(#dtwUnitMenu, #callModeBar.dtw-call-mode-menu, #moreMenu) button:focus-visible {
  outline: 3px solid #7dd3fc !important; outline-offset: 2px !important;
}
body #toolbar :is(button, select):disabled { opacity: .45; cursor: not-allowed !important; filter: none !important; }
body #toolbar :is(button[aria-expanded="true"], button.active, button.par-active) {
  border-color: #bae6fd !important;
  box-shadow: inset 0 -3px 0 #bae6fd !important;
}
body #toolbar :is(#unitToolbarButtons, #zoomControls, .toolbar-dropdown, .toolbar-theme-picker) {
  align-items: center !important; gap: 6px !important;
}
body #toolbar #btnToggleSidebar,
body #toolbar #modeSelect,
body #toolbar #dtwIpadMoreSelect,
body #toolbar #dtwMapPicker {
  width: auto !important; min-width: 0 !important; max-width: none !important;
}
body #toolbar select { color-scheme: dark; }
body #toolbar #dtwMapPicker { order: 45; }
body #toolbar #zoomControls { padding: 0 !important; }
body #toolbar #zoomControls button { width: calc(var(--dtw-control-height) * var(--dtw-control-scale)) !important; padding: 0 !important; font-size: 1.125rem !important; }
body #toolbar #zoomSlider { accent-color: #7dd3fc; }
body #toolbar #dtwIncidentTimer { font-variant-numeric: tabular-nums; }
body :is(#dtwUnitMenu, #callModeBar.dtw-call-mode-menu, #moreMenu) {
  background: #25313d !important; border: 1px solid #596879 !important;
  border-radius: 8px !important; padding: 8px !important;
  box-shadow: 0 10px 28px #0005 !important;
}
body :is(#dtwUnitMenu, #callModeBar.dtw-call-mode-menu, #moreMenu) button {
  box-sizing: border-box !important;
  height: auto !important; min-height: calc(2.75rem * var(--dtw-control-scale)) !important;
  padding: 8px 12px !important; margin: 0 0 6px !important;
  font: 600 calc(.875rem * var(--dtw-control-scale))/1.35 Arial, sans-serif !important;
  border: 1px solid #ffffff38 !important; border-radius: 6px !important;
  white-space: normal !important; text-align: left !important; justify-content: flex-start !important;
}
body :is(#dtwUnitMenu, #callModeBar.dtw-call-mode-menu, #moreMenu) button:last-child { margin-bottom: 0 !important; }
body #dtwUnitMenu button:hover:not(:disabled), body #callModeBar.dtw-call-mode-menu button:hover:not(:disabled) { filter: brightness(1.13); }
@media (max-width: 1180px), (hover: none) and (pointer: coarse) {
  :root { --dtw-control-height: 2.75rem; }
  body #toolbar { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: thin; }
}
@media (prefers-reduced-motion: reduce) { body #toolbar :is(button, select) { transition: none; } }