:root {
  --motion-instant: 120ms;
  --motion-fast: 160ms;
  --motion-standard: 190ms;
  --motion-emphasis: 220ms;
  --motion-route: 220ms;
  --motion-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --motion-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-exit: cubic-bezier(.4, 0, 1, 1);
  --ui-focus-ring: 0 0 0 3px rgba(27, 138, 104, .14);
  --ui-shadow-rest: 0 3px 14px rgba(20, 49, 39, .055);
  --ui-shadow-float: 0 16px 42px rgba(12, 37, 27, .18);
}

html { scroll-behavior: smooth; }
body { background: var(--paper); }

button,
input,
select,
textarea,
.primary,
.secondary,
.button,
.row-action,
.worker-contact-copy,
.address-copy,
.compact-button,
.batch-save-button,
.facility-favorite-button,
.text-button,
.nav-item,
.sidebar-pin,
.logout-button {
  transition:
    color var(--motion-fast) var(--motion-ease-standard),
    background-color var(--motion-fast) var(--motion-ease-standard),
    border-color var(--motion-fast) var(--motion-ease-standard),
    box-shadow var(--motion-fast) var(--motion-ease-standard),
    opacity var(--motion-fast) var(--motion-ease-standard),
    transform var(--motion-fast) var(--motion-ease-standard);
}

button:active:not(:disabled),
.primary:active:not(:disabled),
.secondary:active:not(:disabled),
.button:active:not(:disabled),
.row-action:active:not(:disabled),
.worker-contact-copy:active:not(:disabled),
.address-copy:active:not(:disabled),
.compact-button:active:not(:disabled),
.batch-save-button:active:not(:disabled) {
  transform: scale(.987);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--green-2);
  outline-offset: 2px;
}

input:focus,
select:focus,
textarea:focus {
  box-shadow: var(--ui-focus-ring);
}

.panel,
.stat-card,
.metric-card,
.service-card,
.dashboard-job-item,
.worker-card,
.map-route-card,
.hub-map-worker-route,
.hub-map-job-card,
.hub-map-queue-card {
  transition:
    border-color var(--motion-standard) var(--motion-ease-standard),
    box-shadow var(--motion-standard) var(--motion-ease-standard);
}

.stat-card:hover,
.metric-card:hover,
.service-card:hover,
.dashboard-job-item:hover {
  border-color: #cad9d1;
}

.panel,
.stat-card,
.metric-card,
.service-card { box-shadow: var(--ui-shadow-rest); }

.nav-item.active,
.service-tab.active { box-shadow: inset 0 0 0 1px rgba(19, 36, 31, .08); }

.schedule-grid td,
.schedule-table td,
.company-db-table tbody tr,
.facility-db-table tbody tr,
.staff-table tbody tr,
.audit-table tbody tr,
.preview-row,
.availability-row {
  transition:
    background-color var(--motion-fast) var(--motion-ease-standard),
    border-color var(--motion-fast) var(--motion-ease-standard),
    box-shadow var(--motion-fast) var(--motion-ease-standard);
}

.schedule-grid tr:hover td,
.schedule-table tbody tr:hover td {
  box-shadow: inset 0 1px 0 rgba(15, 107, 79, .08), inset 0 -1px 0 rgba(15, 107, 79, .08);
}

.schedule-grid tr.dragging {
  position: relative;
  z-index: 8;
  transform: scale(1.012);
  transform-origin: center;
  filter: drop-shadow(0 10px 18px rgba(16, 41, 31, .15));
}

.schedule-grid tr.dragging td { opacity: .74; }
.schedule-grid tr.drop-target td {
  border-top-color: var(--green-2);
  background-color: rgba(27, 138, 104, .07) !important;
  box-shadow: inset 0 2px 0 var(--green-2);
}

.schedule-grid tr.motion-assignment-change td:nth-child(6),
.schedule-table tr.motion-assignment-change td:nth-last-child(2) {
  animation: ui-assignment-highlight var(--motion-emphasis) var(--motion-ease-standard) both;
}

.schedule-grid tr.pending-change td,
.schedule-grid tr.pending-details td,
.schedule-table .worker-select.pending {
  transition:
    background-color var(--motion-fast) var(--motion-ease-standard),
    border-color var(--motion-fast) var(--motion-ease-standard),
    box-shadow var(--motion-fast) var(--motion-ease-standard);
}

.daily-column,
.ssdam-day-column {
  transition:
    background-color var(--motion-fast) var(--motion-ease-standard),
    box-shadow var(--motion-fast) var(--motion-ease-standard),
    transform var(--motion-fast) var(--motion-ease-standard);
}

.daily-column:hover,
.ssdam-day-column:hover { transform: none; }

.job-content-popover,
.hub-map-box-detail {
  transform-origin: top center;
  animation: ui-popover-enter var(--motion-standard) var(--motion-ease-enter) both;
}

.reception-modal,
.map-job-dialog,
.progress-overlay {
  opacity: 1;
  transition:
    opacity var(--motion-fast) var(--motion-ease-exit),
    display var(--motion-fast) allow-discrete;
}

.reception-modal.hidden,
.map-job-dialog.hidden,
.progress-overlay.hidden { opacity: 0; }

.reception-modal:not(.hidden),
.map-job-dialog:not(.hidden),
.progress-overlay:not(.hidden) {
  animation: ui-backdrop-enter var(--motion-fast) var(--motion-ease-standard) both;
}

.reception-modal:not(.hidden) > :not(.map-dialog-backdrop),
.map-job-dialog:not(.hidden) > :not(.map-dialog-backdrop),
.progress-overlay:not(.hidden) > * {
  animation: ui-modal-enter var(--motion-standard) var(--motion-ease-enter) both;
}

@starting-style {
  .reception-modal:not(.hidden),
  .map-job-dialog:not(.hidden),
  .progress-overlay:not(.hidden) { opacity: 0; }
}

.toast {
  animation: ui-toast-enter var(--motion-standard) var(--motion-ease-enter) both !important;
}

.toast.is-leaving {
  pointer-events: none;
  animation: ui-toast-exit var(--motion-fast) var(--motion-ease-exit) both !important;
}

.empty-state:not(:empty),
.grid-empty,
.map-fallback-empty,
.hub-map-empty,
.hub-map-empty-map,
.system-banner,
.readonly-banner {
  animation: ui-status-enter var(--motion-standard) var(--motion-ease-standard) both;
}

.map-canvas.motion-map-refresh,
.hub-map-canvas.motion-map-refresh {
  animation: ui-map-refresh var(--motion-emphasis) var(--motion-ease-standard) both;
}

.map-fallback-route {
  animation: ui-route-reveal var(--motion-route) var(--motion-ease-enter) 1 both !important;
}

.map-fallback-avatar,
.map-worker-avatar {
  animation: ui-map-marker-enter var(--motion-emphasis) var(--motion-ease-enter) 1 both !important;
}

.map-worker-avatar {
  transform: scale(var(--native-avatar-scale, 1));
  transform-origin: 50% 100%;
}

.preview-row.preview-date-target { animation-duration: var(--motion-emphasis) !important; }
.dashboard-table-panel.preview-missing-date { animation-duration: var(--motion-emphasis) !important; }

.map-site-marker,
.map-facility-marker,
.hub-map-marker,
.hub-map-facility-marker,
.hub-map-box-marker {
  transition:
    opacity var(--motion-fast) var(--motion-ease-standard),
    filter var(--motion-fast) var(--motion-ease-standard),
    box-shadow var(--motion-fast) var(--motion-ease-standard),
    transform var(--motion-fast) var(--motion-ease-standard);
}

@keyframes ui-assignment-highlight {
  0% { background-color: rgba(223, 243, 93, .28); box-shadow: inset 0 0 0 2px rgba(27, 138, 104, .18); }
  58% { background-color: rgba(223, 243, 93, .12); box-shadow: inset 0 0 0 1px rgba(27, 138, 104, .10); }
  100% { background-color: transparent; box-shadow: none; }
}

@keyframes ui-popover-enter {
  from { opacity: 0; transform: translateY(-4px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ui-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ui-modal-enter {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ui-toast-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ui-toast-exit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(4px); }
}

@keyframes ui-status-enter {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ui-map-refresh {
  from { opacity: .82; }
  to { opacity: 1; }
}

@keyframes ui-route-reveal {
  from { stroke-dashoffset: 42; opacity: .28; }
  to { stroke-dashoffset: 0; opacity: .68; }
}

@keyframes ui-map-marker-enter {
  from { opacity: 0; filter: saturate(.7); }
  to { opacity: 1; filter: saturate(1); }
}

@media (max-width: 1366px) {
  .workspace { padding-top: 20px; }
  .stat-grid,
  .home-summary-grid { gap: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}