/* MoveCar shared components. See /DESIGN.md section 5. */

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-button-size);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--duration-micro) var(--ease-out),
    color var(--duration-micro) var(--ease-out),
    transform var(--duration-micro) var(--ease-out),
    border-color var(--duration-micro) var(--ease-out),
    opacity var(--duration-micro) var(--ease-out);
  width: 100%;
}

.btn:active {
  transform: scale(0.98);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--accent-primary);
  color: var(--text-on-accent);
}

.btn-primary:hover:not([disabled]) {
  background: var(--accent-hover);
}

.btn-primary:active:not([disabled]) {
  background: var(--accent-pressed);
}

.btn-secondary {
  background: var(--surface-primary);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn-secondary:hover:not([disabled]) {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover:not([disabled]) {
  color: var(--text-primary);
}

.btn-danger-ghost {
  background: transparent;
  color: var(--status-error);
}

.btn-danger-ghost:hover:not([disabled]) {
  background: var(--status-error-bg);
}

.btn.is-loading .btn__label {
  visibility: hidden;
}

.btn__spinner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: currentColor;
  animation: spin 700ms linear infinite;
}

.btn.is-loading {
  position: relative;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Field */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field > label {
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  color: var(--text-primary);
}

.field input,
.field select {
  min-height: 44px;
  padding: 0 var(--space-3);
  font-size: 16px; /* fixed: prevents iOS Safari auto-zoom on focus, see DESIGN.md 3 */
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-micro) var(--ease-out);
}

.field:focus-within input,
.field:focus-within select {
  border-color: var(--accent-primary);
}

.field__hint {
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
}

.field--error input {
  border-color: var(--status-error);
}

.field--error:focus-within input,
.field--error:focus-within select {
  border-color: var(--status-error);
}

.field--error input:focus-visible,
.field--error select:focus-visible {
  outline-color: var(--status-error);
}

.field--error .field__hint {
  color: var(--status-error);
}

.field--disabled input {
  background: var(--surface-sunken);
  color: var(--text-tertiary);
}

/* Banner */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm-size);
  animation: banner-in var(--duration-standard) var(--ease-in-out);
}

@keyframes banner-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.banner--info {
  background: var(--accent-subtle-bg);
  color: var(--accent-primary);
}

.banner--success {
  background: var(--status-success-bg);
  color: var(--status-success);
}

.banner--warning {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

.banner--error {
  background: var(--status-error-bg);
  color: var(--status-error);
}

.banner--offline {
  background: var(--status-offline-bg);
  color: var(--status-offline);
}

/* Card */
.card {
  background: var(--surface-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-level-1);
  padding: var(--space-6);
}

.card--elevated {
  box-shadow: var(--shadow-level-2);
}

/* Pill / tag */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption-size);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pill--neutral {
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.pill--accent {
  background: var(--accent-subtle-bg);
  color: var(--accent-primary);
}

.pill--success {
  background: var(--status-success-bg);
  color: var(--status-success);
}

.pill--warning {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

.pill--error {
  background: var(--status-error-bg);
  color: var(--status-error);
}

/* Request status card */
.request-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
}

.request-card__state {
  transition:
    opacity var(--duration-standard) var(--ease-in-out),
    transform var(--duration-standard) var(--ease-in-out);
}

.request-card__state.is-entering-emphasis {
  animation: request-emphasis-in var(--duration-emphasis) var(--ease-emphasis);
}

@keyframes request-emphasis-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.request-card__spinner {
  width: 28px;
  height: 28px;
  margin-inline: auto;
  border-radius: 50%;
  border: 3px solid var(--border-default);
  border-top-color: var(--accent-primary);
  animation: spin 900ms linear infinite;
}

/* Response template group */
.response-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.response-group .btn.is-selected {
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border-color: var(--accent-primary);
}

/* The locked/chosen response is still a native [disabled] button (repeat submission must
   stay prevented), but it is not an "unavailable" control like the other two — it is the
   answer. The generic .btn[disabled] opacity:0.4 would wash the filled accent down to a
   pale, low-contrast chip; override it so the selected choice keeps full WCAG-AA contrast.
   Higher specificity than `.btn[disabled]` (2 classes + attribute vs 1 class + attribute)
   so this wins without !important. */
.response-group .btn.is-selected[disabled],
.response-group .btn.is-selected[aria-disabled="true"] {
  opacity: 1;
  cursor: default;
}

/* Vehicle / device / request rows */
.vehicle-card,
.device-row,
.request-row {
  background: var(--surface-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-level-1);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.vehicle-card.is-disabled {
  opacity: 0.7;
}

.request-row.is-highlighted {
  animation: highlight-flash var(--duration-emphasis) var(--ease-emphasis);
}

@keyframes highlight-flash {
  from {
    background: var(--accent-subtle-bg);
  }
  to {
    background: var(--surface-primary);
  }
}

.row-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.row-actions .btn {
  width: auto;
  padding-inline: var(--space-4);
  min-height: 44px;
}

/* Empty / error state block */
.state-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--text-secondary);
}

.state-block__icon {
  width: 40px;
  height: 40px;
  color: var(--text-tertiary);
}

/* List stack */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack--tight {
  gap: var(--space-2);
}