/* VitaRide Production UI component bridge · VR-UI-PHASE-B-2026-08-26-01
   Shared visual contract only. Domain state, routes and permissions stay untouched. */

:where(.button, .icon-button, .quick-action) {
  font-family: var(--vr-font-sans);
  font-weight: var(--vr-weight-semibold);
  line-height: var(--vr-type-ui-line);
  -webkit-font-smoothing: antialiased;
}

.button {
  min-height: var(--vr-control-md);
  gap: var(--vr-space-2);
  padding-inline: var(--vr-space-4);
  border-radius: var(--vr-radius-md);
  font-size: var(--vr-type-ui-size);
  font-weight: var(--vr-weight-semibold);
}

.button svg,
.button-icon-label svg {
  width: var(--vr-icon-sm);
  height: var(--vr-icon-sm);
  stroke-width: var(--vr-icon-stroke);
}

.button-primary {
  border-color: var(--vr-primary-700);
  color: var(--vr-text-inverse);
  background: var(--vr-gradient-primary);
  box-shadow: 0 4px 12px rgba(15, 91, 216, 0.2);
}

.button-secondary {
  border-color: var(--vr-border-strong);
  color: var(--vr-text);
  background: var(--vr-surface);
}

.button-ghost,
.button-text {
  color: var(--vr-text-secondary);
  background: transparent;
}

.button:hover:not(:disabled) {
  filter: none;
}

.button-primary:hover:not(:disabled) {
  border-color: var(--vr-primary-800);
  background: linear-gradient(135deg, var(--vr-primary-700), var(--vr-primary-900));
  box-shadow: 0 7px 18px rgba(15, 91, 216, 0.26);
}

.button-secondary:hover:not(:disabled),
.button-ghost:hover:not(:disabled),
.button-text:hover:not(:disabled) {
  border-color: var(--vr-border-strong);
  color: var(--vr-primary-800);
  background: var(--vr-primary-50);
}

.icon-button {
  display: inline-grid;
  width: var(--vr-control-md);
  min-width: var(--vr-control-md);
  height: var(--vr-control-md);
  min-height: var(--vr-control-md);
  place-items: center;
  padding: 0;
  border: 1px solid var(--vr-border);
  border-radius: var(--vr-radius-md);
  color: var(--vr-text-secondary);
  background: var(--vr-surface);
}

.icon-button svg {
  width: var(--vr-icon-md);
  height: var(--vr-icon-md);
  stroke-width: var(--vr-icon-stroke);
}

.icon-button:hover:not(:disabled) {
  border-color: var(--vr-border-strong);
  color: var(--vr-primary-700);
  background: var(--vr-primary-50);
}

:where(.status-chip, .status-pill, .chip, .badge)[class] {
  border-radius: var(--vr-radius-pill);
  font-size: var(--vr-type-meta-size);
  font-weight: var(--vr-weight-semibold);
  line-height: var(--vr-type-meta-line);
}

:where(.modal-card, .dialog, .entity-modal, .dispo-shell-dialog) {
  border-color: var(--vr-border);
  border-radius: var(--vr-radius-lg);
  box-shadow: var(--vr-shadow-md);
}

:where(.drawer, .form-drawer, .entity-drawer) {
  border-color: var(--vr-border);
  box-shadow: -18px 0 48px rgba(11, 25, 51, 0.16);
}

:where(.toast) {
  border-radius: var(--vr-radius-md);
  font-size: var(--vr-type-ui-size);
  font-weight: var(--vr-weight-ui);
  line-height: var(--vr-type-ui-line);
}

/* Mira follows the same readable production hierarchy as every other module. */
.mira-header h2 { font-size: 20px; font-weight: 700; line-height: 1.3; }
.mira-state { font-size: 12px; font-weight: 600; }
.mira-principle strong { font-size: 14px; font-weight: 600; }
.mira-principle small { font-size: 13px; font-weight: 450; }
.mira-quick-prompts button {
  min-height: 40px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
}
.mira-message-author { font-size: 12px; font-weight: 600; }
.mira-chat-message > strong { font-size: 14px; font-weight: 600; }
.mira-chat-message p { font-size: 13px; font-weight: 450; }
.mira-chat-message li { font-size: 12px; font-weight: 450; }
.mira-chat-message .button,
.mira-actions .button,
.mira-stale .button { min-height: 40px; font-size: 13px; font-weight: 600; }
.mira-typing small { font-size: 12px; }
.mira-stale strong { font-size: 13px; font-weight: 600; }
.mira-stale small { font-size: 12px; }
.suggestion-status,
.step-label,
.validity-badge { font-size: 12px; font-weight: 600; }
.suggestion-status small,
.context-chips span,
.mira-suggestion .suggestion-source { font-size: 12px; }
.mira-suggestion > p { font-size: 13px; }
.mira-check-list strong { font-size: 13px; font-weight: 600; }
.mira-check-list small,
.mira-assumptions ul,
.inline-warning { font-size: 12px; }
.mira-assumptions summary { min-height: 42px; font-size: 13px; font-weight: 600; }
.mira-input input { min-height: 44px; font-size: 14px; font-weight: 500; }
.mira-input .mira-stop { min-height: 44px; font-size: 13px; font-weight: 600; }
.mira-input small { font-size: 12px; }

.mira-workbox-head h2 { font-size: 16px; font-weight: 700; }
.mira-workbox-state { font-size: 12px; font-weight: 600; }
.mira-workbox > p { font-size: 13px; font-weight: 450; }
.mira-workbox-prompts button { font-size: 13px; font-weight: 600; }

@media (max-width: 760px) {
  .button,
  .icon-button {
    min-height: var(--vr-touch);
  }

  .icon-button {
    width: var(--vr-touch);
    min-width: var(--vr-touch);
    height: var(--vr-touch);
  }

  .mira-quick-prompts button,
  .mira-chat-message .button,
  .mira-actions .button,
  .mira-review .button { min-height: var(--vr-touch); }
}
/* Google Places stellt Eingabe, Vorschlagsliste, Tastatursteuerung und Attribution selbst bereit. */
.vr-place-autocomplete-host {
  display: block;
  flex: 1 1 260px;
  min-width: 0;
  width: 100%;
}

.vr-place-autocomplete {
  display: block;
  width: 100%;
  min-width: 0;
  color-scheme: light;
  --gmpx-color-primary: #2d72e8;
  --gmpx-color-surface: #ffffff;
  --gmpx-color-on-surface: #13233f;
  --gmpx-font-family-base: Inter, "Segoe UI", Arial, sans-serif;
}

.vr-place-native-input {
  display: none !important;
}