/* Milk Routes — unified light workspace */
:root {
  --milk-ink: #10272c;
  --milk-muted: #61777d;
  --milk-line: #d4e2e3;
  --milk-soft: #f3f9f8;
  --milk-accent: #009d8e;
  --milk-accent-dark: #006d67;
  --milk-danger: #b64b42;
}

body {
  background: #f3f8f7;
  color: var(--milk-ink);
}

body .eyebrow {
  color: var(--milk-accent-dark);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}

body button,
body input,
body select,
body textarea {
  border-radius: 9px;
}

body button {
  box-shadow: none;
}

/* Workspace */
body.milk-workspace-page .menu-view {
  width: min(1440px, calc(100% - 28px));
  margin-inline: auto;
}

body.milk-workspace-page .topbar {
  min-height: 72px;
  padding: 12px 16px;
  border: 1px solid var(--milk-line);
  border-top: 3px solid var(--milk-accent);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 26px rgba(17, 48, 53, 0.06);
}

body.milk-workspace-page .topbar h1 {
  font-size: 1.65rem;
}

body.milk-workspace-page .workspace-card {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--milk-line);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(17, 48, 53, 0.06);
}

body.milk-workspace-page .workspace-head {
  padding: 0 0 12px;
}

body.milk-workspace-page .workspace-head h2 {
  font-size: 1.3rem;
}

body.milk-workspace-page .status-grid {
  gap: 7px;
}

body.milk-workspace-page .status-meter {
  min-height: 78px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: none;
}

body.milk-workspace-page .status-meter strong {
  font-size: 1.4rem;
}

body.milk-workspace-page .route-panel {
  margin-top: 10px;
  border-radius: 10px;
}

/* Administrative dashboard */
body #milkDashboardApp .app-shell {
  width: min(1460px, calc(100% - 28px));
  margin-inline: auto;
}

body #milkDashboardApp .topbar {
  display: none;
}

body #milkDashboardApp .dashboard {
  padding-top: 12px;
}

body #milkDashboardApp .command-panel {
  min-height: 84px;
  padding: 14px 16px;
  border: 1px solid var(--milk-line);
  border-top: 3px solid var(--milk-accent);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(17, 48, 53, 0.06);
}

body #milkDashboardApp .command-panel h1 {
  font-size: clamp(1.65rem, 2.5vw, 2rem);
}

body #milkDashboardApp .command-panel p {
  margin-top: 3px;
  font-size: 0.78rem;
}

body #milkDashboardApp .date-tools {
  gap: 6px;
}

body #milkDashboardApp .date-tools > * {
  min-height: 38px;
}

body #milkDashboardApp .metric-grid {
  gap: 8px;
  margin-top: 10px;
}

body #milkDashboardApp .metric-card {
  min-height: 78px;
  padding: 10px 12px;
  border: 1px solid var(--milk-line);
  border-radius: 10px;
  box-shadow: none;
}

body #milkDashboardApp .metric-card strong {
  font-size: 1.45rem;
}

body #milkDashboardApp .metric-card.is-zero {
  display: none;
}

body #milkDashboardApp .board-card {
  margin-top: 10px;
  border: 1px solid var(--milk-line);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(17, 48, 53, 0.05);
}

body #milkDashboardApp .board-header {
  min-height: 62px;
  padding: 11px 14px;
}

body #milkDashboardApp .routes-grid {
  gap: 8px;
  padding: 10px;
}

body #milkDashboardApp .route-card {
  min-height: 112px;
  padding: 12px;
  border-radius: 10px;
  box-shadow: none;
}

body #milkDashboardApp .driver-availability-note {
  display: block;
  margin-top: 5px;
  color: var(--milk-muted);
  font-size: 0.68rem;
  line-height: 1.3;
}

body .route-modal {
  width: min(1180px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(8, 38, 43, 0.2);
}

body .route-modal .modal-header {
  padding: 14px 16px 11px;
}

body .route-modal .modal-body {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 10px;
  padding: 10px;
}

body .route-modal .editor-panel,
body .route-modal .map-panel {
  border-radius: 10px;
  box-shadow: none;
}

/* Driver route wizard */
body #wizardApp {
  width: min(1180px, calc(100% - 24px));
  margin-inline: auto;
}

body #wizardApp .top-bar {
  min-height: 86px;
  padding: 12px 14px;
  border: 1px solid var(--milk-line);
  border-top: 3px solid var(--milk-accent);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(17, 48, 53, 0.06);
}

body #wizardApp .top-bar h1 {
  font-size: 1.55rem;
}

body #wizardApp .stats {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 9px;
}

body #wizardApp .top-actions {
  gap: 5px;
}

body #wizardApp .top-actions .btn {
  min-height: 36px;
  padding: 7px 11px;
}

body #wizardApp #wizardMain {
  padding-top: 10px;
}

body #wizardApp .route-list-toggle,
body #wizardApp .active-stop-panel {
  border-radius: 11px;
  box-shadow: none;
}

body #wizardApp .active-stop-panel {
  border: 1px solid var(--milk-line);
}

body #wizardApp .bottom-bar {
  padding: 8px 0 12px;
  background: transparent;
}

/* Driver entry */
html[data-theme="dark"] {
  color-scheme: light;
}

body #formScreen.app-shell,
body #assignmentScreen,
body #loadingScreen {
  width: min(760px, calc(100% - 24px));
  margin-inline: auto;
}

body #formScreen .topbar,
body #assignmentScreen .panel,
body #loadingScreen .panel {
  padding: 14px 16px;
  border: 1px solid var(--milk-line);
  border-top: 3px solid var(--milk-accent);
  border-radius: 12px;
  background: #fff;
  color: var(--milk-ink);
  box-shadow: 0 10px 28px rgba(17, 48, 53, 0.06);
}

body #formScreen .form-section {
  margin-top: 10px;
  padding: 16px;
  border: 1px solid var(--milk-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(17, 48, 53, 0.05);
}

body #formScreen .form-section > input,
body #formScreen .form-section > select {
  min-height: 42px;
}

body #formScreen .summary {
  margin-block: 10px;
  border-radius: 10px;
}

body #formScreen .stop-preview {
  max-height: 260px;
  overflow: auto;
}

body #formScreen .draft-notice {
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px solid #b9ded9;
  border-radius: 9px;
  background: #effaf8;
  color: #27585c;
  font-size: 0.78rem;
  font-weight: 800;
}

/* Secure public entry */
body .public-shell {
  width: min(900px, calc(100% - 24px));
  margin-inline: auto;
  padding-top: 20px;
}

body .public-shell .hero-panel {
  min-height: 88px;
  padding: 14px 16px;
  border: 1px solid var(--milk-line);
  border-top: 3px solid var(--milk-accent);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(17, 48, 53, 0.06);
}

body .public-shell .brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 11px;
}

body .public-shell .hero-panel h1 {
  font-size: 1.65rem;
}

body .public-shell .route-card,
body .public-shell .state-panel {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--milk-line);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(17, 48, 53, 0.05);
}

body .public-shell .stop-card {
  padding: 11px;
  border-radius: 10px;
  box-shadow: none;
}

@media (max-width: 760px) {
  body.milk-workspace-page .menu-view,
  body #milkDashboardApp .app-shell,
  body #wizardApp,
  body #formScreen.app-shell,
  body #assignmentScreen,
  body #loadingScreen,
  body .public-shell {
    width: calc(100% - 12px);
  }

  body #milkDashboardApp .command-panel,
  body #wizardApp .top-bar {
    align-items: stretch;
    gap: 9px;
  }

  body #milkDashboardApp .date-tools,
  body #wizardApp .top-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body #milkDashboardApp .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .route-modal .modal-body {
    grid-template-columns: 1fr;
  }

  body .route-modal .map-panel {
    min-height: 260px;
  }
}