/* ERP Sucata Feitosa · V5.21.322 — Design system global. */
:root {
  --ds-surface-page: var(--surface-bg); --ds-surface-sidebar: var(--surface-sidebar);
  --ds-surface-panel: var(--surface-panel); --ds-surface-panel-2: var(--surface-panel-2);
  --ds-surface-panel-3: var(--surface-panel-3); --ds-surface-elevated: var(--surface-elevated);
  --ds-text: var(--surface-text); --ds-text-muted: var(--surface-muted); --ds-text-disabled: var(--surface-disabled);
  --ds-border: var(--surface-line); --ds-border-strong: color-mix(in srgb, var(--surface-line) 82%, var(--surface-text));
  --ds-shadow-sm: 0 2px 8px var(--surface-shadow); --ds-shadow-md: 0 8px 24px var(--surface-shadow); --ds-shadow-lg: 0 18px 48px var(--surface-shadow);
  --ds-hover: var(--surface-panel-2); --ds-selected: var(--accent-soft); --ds-focus: var(--primary);
  --ds-control: var(--surface-panel-2); --ds-control-hover: var(--surface-panel-3);
  --ds-scrim: rgb(15 23 42 / .48); --ds-map-surface: var(--surface-panel-2); --ds-map-control: var(--surface-elevated); --ds-map-control-text: var(--surface-text);
  --ds-status-success-bg: rgb(22 163 74 / .13); --ds-status-success-text: #166534;
  --ds-status-warning-bg: rgb(217 119 6 / .14); --ds-status-warning-text: #92400e;
  --ds-status-danger-bg: rgb(220 38 38 / .12); --ds-status-danger-text: #b42318;
  --ds-status-info-bg: rgb(37 99 235 / .12); --ds-status-info-text: #1d4ed8;
  --ds-map-border: color-mix(in srgb, var(--ds-border-strong) 72%, var(--primary));
}
html[data-theme="ESCURO"] { color-scheme: dark; --ds-scrim: rgb(0 0 0 / .64); --ds-status-success-text: #86efac; --ds-status-warning-text: #fcd34d; --ds-status-danger-text: #fca5a5; --ds-status-info-text: #93c5fd; }
html[data-theme="CLARO"] { color-scheme: light; }
body, .app-shell, .main, .content { background: var(--ds-surface-page); color: var(--ds-text); }
.sidebar, .sidebar-footer, .auth-panel { background: var(--ds-surface-sidebar); }
.topbar { background: var(--surface-topbar); border-color: var(--ds-border); }
.card, .company-pill, .profile, .filter-tabs, .table-wrap, .session-tab, .quick-summary div, .integration, .entity-meta div, .closing-party > div, .navigation-editor > div, .navigation-sort-item { background: var(--ds-surface-panel) !important; color: var(--ds-text); border-color: var(--ds-border); box-shadow: var(--ds-shadow-md); }
.card { background-image: none !important; }
.toolbar > div:first-child { display: grid; gap: 3px; min-width: 0; }
.toolbar > div:first-child > b { line-height: 1.25; }
.toolbar > div:first-child > small, .toolbar > div:first-child > p { margin: 0; line-height: 1.35; }
.modal-box, .modal-head { background: var(--ds-surface-elevated); color: var(--ds-text); border-color: var(--ds-border); }
.modal { background: var(--ds-scrim); }
.form-grid input, .form-grid select, .form-grid textarea, .auth-card input, .field, .icon-btn, .material-btn, .costing-cost-form input, .costing-cost-form select { background: var(--ds-control); color: var(--ds-text); border-color: var(--ds-border); }
.form-grid label, .auth-card label { color: var(--ds-text-muted); }
.muted, .card-title small, .entity-card p, .table-sub, .kpi-top, .kpi small, .metric-row span, .material-btn small, .check-card small, .integration span { color: var(--ds-text-muted); }
.menu button { color: var(--ds-text-muted); }
.menu button:hover, .menu button:focus-visible { background: var(--ds-hover); color: var(--ds-text); }
.menu button.active { background: var(--ds-selected); color: var(--primary); box-shadow: inset 2px 0 var(--primary); }
.menu-group, th { color: var(--ds-text-muted); }
th, .weight-group-head, .closing-row.heading { background: var(--ds-surface-panel-2); color: var(--ds-text-muted); }
td, th, .metric-row, .weight-item, .closing-row, .collection-card-actions { border-color: var(--ds-border); }
tbody tr:hover { background: color-mix(in srgb, var(--ds-hover) 58%, transparent); }
.btn, .filter-tabs button.active, .tabs-v4 button.active, .weight-group-head, .check-card, .navigation-sort-item { background: var(--ds-surface-panel-3); border-color: var(--ds-border); color: var(--ds-text); }
.btn.secondary { background: transparent; color: var(--ds-text); border-color: var(--ds-border-strong); }
.btn:hover, .btn:focus-visible, .icon-btn:hover, .icon-btn:focus-visible, .material-btn:hover, .material-btn:focus-visible, .filter-tabs button:hover, .tabs-v4 button:hover { background: var(--ds-control-hover); border-color: var(--ds-border-strong); color: var(--ds-text); }
.btn.primary { background: var(--primary); color: var(--on-accent); }
.btn.primary:hover, .btn.primary:focus-visible { background: var(--primary-2); color: var(--on-accent); }
.btn:focus-visible, .icon-btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, .menu-group:focus-visible, .menu button:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .16); }
.btn:disabled, button:disabled, input:disabled, select:disabled, textarea:disabled { color: var(--ds-text-disabled); border-color: var(--ds-border); filter: none; opacity: .62; }
.filter-tabs button.active, .tabs-v4 button.active, .session-tab.active, .material-btn.selected, .appearance-choice.selected, .appearance-accent.selected, .appearance-surface.selected, .dispatch-visit-date-controls .btn.active { background: var(--ds-selected); color: var(--primary); border-color: var(--accent-border); box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / .14); }
.supplier-pick, .session-active-card { background: var(--ds-surface-panel); color: var(--ds-text); border-color: var(--ds-border); }
.supplier-pick:hover, .supplier-pick:focus-visible, .session-active-card:hover { background: var(--ds-hover); color: var(--ds-text); border-color: var(--primary); }
.supplier-pick small, .session-active-card small { color: var(--ds-text-muted); }
.supplier-pick .avatar, .profile > span { background: var(--ds-surface-panel-3); color: var(--primary); }
.status { background: var(--ds-surface-panel-3); color: var(--ds-text-muted); border: 1px solid var(--ds-border); }
.status.success, .status.Disponível, .status.Finalizado, .status.Pago { background: var(--ds-status-success-bg); color: var(--ds-status-success-text); }
.status.warning, .status.Reservado, .status.Pendente, .status.Em.andamento { background: var(--ds-status-warning-bg); color: var(--ds-status-warning-text); }
.status.danger, .status.Cancelado, .status.Cancelada, .status.Estornado, .status.Atrasado, .status.Inativa, .status.Inativo { background: var(--ds-status-danger-bg); color: var(--ds-status-danger-text); }
.status.info { background: var(--ds-status-info-bg); color: var(--ds-status-info-text); }
.status.neutral { background: var(--ds-surface-panel-3); color: var(--ds-text-muted); border: 1px solid var(--ds-border); }
.status.success { background: var(--ds-status-success-bg); color: var(--ds-status-success-text); }
.status.warning { background: var(--ds-status-warning-bg); color: var(--ds-status-warning-text); }
.status.danger { background: var(--ds-status-danger-bg); color: var(--ds-status-danger-text); }
.status.bank-status { min-width: 9.5rem; justify-content: center; text-align: center; line-height: 1.2; white-space: normal; }
.status.bank-status.success { background: var(--ds-status-success-bg); color: var(--ds-status-success-text); }
.status.bank-status.warning { background: var(--ds-status-warning-bg); color: var(--ds-status-warning-text); }
.status.bank-status.info { background: var(--ds-status-info-bg); color: var(--ds-status-info-text); }
.status.bank-status.danger { background: var(--ds-status-danger-bg); color: var(--ds-status-danger-text); }
.dispatch-command-toolbar .status { background: var(--ds-status-success-bg); color: var(--ds-status-success-text); border: 1px solid color-mix(in srgb, var(--ds-status-success-text) 28%, var(--ds-border)); }
.btn.danger { background: var(--ds-status-danger-bg); border-color: color-mix(in srgb, var(--ds-status-danger-text) 35%, transparent); color: var(--ds-status-danger-text); }
.btn.warning { background: var(--ds-status-warning-bg); border-color: color-mix(in srgb, var(--ds-status-warning-text) 35%, transparent); color: var(--ds-status-warning-text); }
.account-card { background: var(--ds-surface-panel) !important; border-color: var(--ds-border) !important; box-shadow: var(--ds-shadow-sm) !important; color: var(--ds-text); }
.account-card span { color: var(--ds-text-muted); }
.entity-card > strong { color: var(--ds-text); }
.share-location-supplier { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; text-align: left; }
.share-location-supplier .supplier-display-name { min-width: 0; overflow-wrap: anywhere; }
.share-location-supplier .supplier-display-legal { grid-column: 1 / -1; color: var(--ds-text-muted); font-size: .78rem; font-weight: 600; overflow-wrap: anywhere; }
.share-location-supplier .supplier-display-document { color: var(--ds-text-muted); font-size: .72rem; white-space: nowrap; }
.scrim { background: var(--ds-scrim); }
.toast { background: var(--ds-surface-elevated); color: var(--ds-text); border-color: var(--ds-border-strong); box-shadow: var(--ds-shadow-lg); }
.toast.error { background: var(--ds-status-danger-bg); color: var(--ds-status-danger-text); border-color: color-mix(in srgb, var(--ds-status-danger-text) 40%, var(--ds-border)); }
.toast.warning { background: var(--ds-status-warning-bg); color: var(--ds-status-warning-text); border-color: color-mix(in srgb, var(--ds-status-warning-text) 40%, var(--ds-border)); }
.fleet-map, .dispatch-map, .collection-public-map, .dispatch-history-map { background: var(--ds-map-surface); border-color: var(--ds-border); }
.leaflet-container { background: var(--ds-map-surface); color: var(--ds-text); }
.leaflet-control-zoom a, .leaflet-control-layers, .leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-control-attribution { background: var(--ds-map-control) !important; color: var(--ds-map-control-text) !important; border-color: var(--ds-border) !important; }
.leaflet-control-zoom a:hover, .leaflet-control-layers-toggle:hover { background: var(--ds-control-hover) !important; color: var(--primary) !important; }
.leaflet-control-attribution a { color: var(--primary) !important; }
.fleet-vehicle-label, .dispatch-supplier-visit-card { background: var(--ds-map-control) !important; color: var(--ds-text) !important; border-color: var(--accent-border) !important; box-shadow: var(--ds-shadow-sm) !important; }
.fleet-supplier-label { background: var(--ds-map-control) !important; color: var(--ds-text) !important; border: 1px solid var(--ds-map-border) !important; border-radius: 6px !important; box-shadow: var(--ds-shadow-sm) !important; }
.operational-map-fit-button { background: var(--ds-map-control) !important; color: var(--ds-map-control-text) !important; border-color: var(--ds-border-strong) !important; box-shadow: var(--ds-shadow-sm) !important; text-shadow: none; }
.operational-map-fit-button:hover, .operational-map-fit-button:focus-visible { background: var(--ds-control-hover) !important; color: var(--primary) !important; border-color: var(--primary) !important; }
.entity-card { box-shadow: var(--ds-shadow-sm) !important; }
.entity-card .entity-meta div { box-shadow: none !important; background: var(--ds-surface-panel-2) !important; }
.employee-list-filters { border: 0 !important; border-top: 0 !important; background: transparent !important; box-shadow: none !important; padding-top: 0; }
.employee-list-filters #employeeSearch, .employee-list-filters select { border-top-color: var(--ds-border) !important; }
.status.PARADO { background: var(--ds-status-info-bg); color: var(--ds-status-info-text); }
.fleet-base-distance { color: var(--ds-text-muted); }
.dispatch-mission > small, .dispatch-queue > small, .dispatch-mission > span, .dispatch-queue-item small { color: var(--ds-text-muted); }
.dispatch-mission.empty-slot { min-height: 92px; padding-block: 16px; background: var(--ds-surface-panel-2); border-color: var(--ds-border); }
.dispatch-mission.empty-slot span { color: var(--ds-text-muted); }
.weigh-empty-state { min-height: 92px; padding: 16px 20px; margin-bottom: 4px; background: var(--ds-surface-panel-2); border: 1px dashed var(--ds-border); border-radius: 12px; }
@media (max-width: 900px) { .modal { padding: 0; } .modal-box, .modal.large .modal-box { box-shadow: var(--ds-shadow-lg); } .content, .table-wrap { min-width: 0; max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* V5.21.319: shared map playback controls use the same tokens as all other controls. */
.dispatch-history-floating-playback { border-color: var(--ds-map-border); background: color-mix(in srgb, var(--ds-map-control) 96%, transparent); box-shadow: var(--ds-shadow-md); }
.dispatch-history-floating-head { background: var(--ds-surface-panel-3); }
.dispatch-history-floating-grip, .dispatch-history-floating-head label { color: var(--primary); }
.dispatch-history-floating-minimize, .dispatch-history-floating-reopen { border-color: var(--ds-border-strong); background: var(--ds-map-control); color: var(--ds-map-control-text); box-shadow: var(--ds-shadow-sm); }
.dispatch-history-floating-minimize:hover, .dispatch-history-floating-minimize:focus-visible, .dispatch-history-floating-reopen:hover, .dispatch-history-floating-reopen:focus-visible { background: var(--ds-control-hover); color: var(--primary); }