/* =============================================================================
 * Components — surfaces, badges, chips, tables, day pickers, buttons.
 *
 * Bootstrap classes (.card, .btn, .alert, .form-control, .table) are
 * lightly themed via overrides; nothing replaced wholesale.
 * ============================================================================= */

/* ── Card surface ────────────────────────────────────────────────────────── */
.card {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  background: var(--md-surface);
}
.card-header {
  background: var(--md-surface);
  border-bottom: 1px solid var(--md-divider);
  font-weight: var(--fw-semibold);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
}
.card-header .material-icons {
  color: var(--md-primary);
  font-size: 20px;
}
.card-body { padding: var(--space-5); }
.card + .card { margin-top: var(--space-4); }

/* Stat/KPI tile. */
.stat-card {
  background: var(--md-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--elev-2);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon .material-icons {
  font-size: 26px;
  color: var(--md-on-primary);
}
.stat-value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.stat-label {
  font-size: var(--fs-sm);
  color: var(--md-on-surface-3);
  margin-top: var(--space-1);
}

/* ── Plan cards (admin dashboard variant) ────────────────────────────────── */
.plan-card-mini {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  color: var(--md-on-primary);
  background: linear-gradient(135deg, #1565C0, #1E88E5);
}
.plan-card-mini:nth-child(2) { background: linear-gradient(135deg, #2E7D32, #43A047); }
.plan-card-mini:nth-child(3) { background: linear-gradient(135deg, #6A1B9A, #8E24AA); }
.plan-highlight { background: linear-gradient(135deg, #F57F17, #FFA000) !important; }
.plan-card-mini::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table th {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--md-on-surface-2);
  background: var(--md-surface-2);
  border-bottom: 2px solid var(--md-divider);
  letter-spacing: 0.02em;
}
.table td {
  vertical-align: middle;
  font-size: var(--fs-base);
  padding: var(--space-3) var(--space-4);
}
.table tbody tr:hover { background: rgba(0,0,0,.02); }

/* ── Status badges (schedule lifecycle) ──────────────────────────────────── */
.status-not_started { color: var(--md-on-surface-3); }
.status-in_progress { color: var(--md-primary-hover); }
.status-completed   { color: var(--md-success); }
.status-skipped     { color: var(--md-warning); }
.status-missed      { color: var(--md-danger); }

/* ── Wash type badges ────────────────────────────────────────────────────── */
.wash-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}
.wash-dry      { background: #E3F2FD; color: var(--md-primary); }
.wash-pressure { background: #E8F5E9; color: var(--md-success); }
.wash-interior { background: #FFF3E0; color: #E65100; }

/* ── Day-of-week chip (used in plans, prefs) ─────────────────────────────── */
.day-chip { cursor: pointer; user-select: none; }
.day-chip input { display: none; }
.day-chip span {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 2px solid var(--md-border);
  background: var(--md-surface);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  min-width: 56px;
  text-align: center;
  transition: all var(--motion-fast);
}
.day-chip input:checked + span {
  border-color: var(--md-primary);
  background: var(--md-primary);
  color: var(--md-on-primary);
}
.day-chip input:disabled + span { opacity: .5; cursor: not-allowed; }

/* ── Material-flavoured buttons (Bootstrap overrides) ────────────────────── */
.btn {
  border-radius: var(--radius);
  font-weight: var(--fw-medium);
  padding: var(--space-2) var(--space-4);
  transition: background var(--motion-fast), box-shadow var(--motion-fast);
}
.btn-primary {
  background: var(--md-primary);
  border-color: var(--md-primary);
}
.btn-primary:hover {
  background: var(--md-primary-hover);
  border-color: var(--md-primary-hover);
  box-shadow: var(--elev-1);
}
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-md);
}

/* ── Form controls ───────────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--radius);
  border-color: var(--md-border);
  font-size: var(--fs-base);
}
.form-control:focus, .form-select:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px var(--md-state-tint);
}
.form-label {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--md-on-surface-2);
  margin-bottom: var(--space-1);
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius);
  border: none;
  padding: var(--space-3) var(--space-4);
}

/* ── Map containers ──────────────────────────────────────────────────────── */
.map-container, .leaflet-container {
  border-radius: var(--radius);
  overflow: hidden;
}

/* ── Compact button utilities (used in customer view, schedule) ──────────── */
.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}
.btn-icon .material-icons { font-size: 18px; }

/* ── List-group inside cards: tighter padding to match Material density ─── */
.list-group-flush .list-group-item {
  padding: var(--space-3) var(--space-5);
  border-color: var(--md-divider);
}