/* Portico components — pc- BEM blocks.

   Each block sits on the Bootstrap element it restyles (class="card pc-card")
   and customizes it by re-pointing that component's own --bs-* variables.
   Bootstrap declares those on the component class itself, so setting them here
   rather than in :root is what makes them take effect. */

/* ---- Card ---- */

.pc-card {
  --bs-card-bg: var(--surface-card);
  --bs-card-color: var(--text-primary);
  --bs-card-border-color: var(--border-subtle);
  --bs-card-border-width: 1px;
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-card-spacer-y: var(--space-4);
  --bs-card-spacer-x: var(--space-4);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-color: var(--text-primary);
  --bs-card-cap-padding-y: var(--space-4);
  --bs-card-cap-padding-x: var(--space-4);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.pc-card__header {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.pc-card__header--inverse {
  --bs-card-cap-bg: var(--surface-inverse);
  --bs-card-cap-color: var(--text-inverse);
  --bs-card-border-color: var(--surface-inverse);
}

/* ---- List ---- */

.pc-list {
  --bs-list-group-bg: var(--surface-card);
  --bs-list-group-color: var(--text-primary);
  --bs-list-group-border-color: var(--border-subtle);
  --bs-list-group-item-padding-y: var(--space-3);
  --bs-list-group-item-padding-x: var(--space-4);
  --bs-list-group-action-color: var(--text-primary);
  --bs-list-group-action-hover-color: var(--text-primary);
  --bs-list-group-action-hover-bg: var(--surface-card);
  --bs-list-group-action-active-color: var(--text-primary);
  --bs-list-group-action-active-bg: var(--surface-sunken);
}

/* Full-width tap target; :active is the only feedback because there is no
   hover on touch. */
.pc-list-row {
  min-height: var(--touch-target-min);
}

/* ---- Button ---- */

/* The flex/gap/transition properties stay in the block rather than moving to
   utilities: the rule also carries the 48px touch floor and the --bs-btn-*
   re-pointing, and splitting it would scatter one component across six utility
   classes at every call site. */
.pc-btn {
  --bs-btn-font-family: var(--font-body);
  --bs-btn-font-size: var(--text-md);
  --bs-btn-font-weight: var(--weight-semibold);
  --bs-btn-line-height: 1;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0;
  --bs-btn-border-width: 1px;
  --bs-btn-border-radius: var(--radius-md);
  --bs-btn-disabled-opacity: .5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}

.pc-btn--sm {
  --bs-btn-font-size: var(--text-sm);
  --bs-btn-padding-x: .875rem;
  min-height: 38px;
}

/* Every variant sets its hover vars equal to its resting vars: hover conveys
   nothing on a touch screen, so all feedback lives in :active and :focus. */
.pc-btn--primary {
  --bs-btn-bg: var(--action-primary-bg);
  --bs-btn-color: var(--action-primary-fg);
  --bs-btn-border-color: var(--action-primary-bg);
  --bs-btn-hover-bg: var(--action-primary-bg);
  --bs-btn-hover-color: var(--action-primary-fg);
  --bs-btn-hover-border-color: var(--action-primary-bg);
  --bs-btn-active-bg: var(--action-primary-bg-active);
  --bs-btn-active-color: var(--action-primary-fg);
  --bs-btn-active-border-color: var(--action-primary-bg-active);
  --bs-btn-disabled-bg: var(--action-primary-bg);
  --bs-btn-disabled-color: var(--action-primary-fg);
  --bs-btn-disabled-border-color: var(--action-primary-bg);
}

.pc-btn--secondary {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--action-secondary-fg);
  --bs-btn-border-color: var(--action-secondary-border);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-color: var(--action-secondary-fg);
  --bs-btn-hover-border-color: var(--action-secondary-border);
  --bs-btn-active-bg: var(--surface-sunken);
  --bs-btn-active-color: var(--action-secondary-fg);
  --bs-btn-active-border-color: var(--action-secondary-border);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-color: var(--action-secondary-fg);
  --bs-btn-disabled-border-color: var(--action-secondary-border);
}

.pc-btn--ghost {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--text-link);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-color: var(--text-link);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--surface-sunken);
  --bs-btn-active-color: var(--text-link-hover);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-color: var(--text-link);
  --bs-btn-disabled-border-color: transparent;
}

/* Outline only — a destructive action should read as serious, not as a solid
   red slab competing with the primary action. */
.pc-btn--danger {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--action-danger-fg);
  --bs-btn-border-color: var(--action-danger-border);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-color: var(--action-danger-fg);
  --bs-btn-hover-border-color: var(--action-danger-border);
  --bs-btn-active-bg: var(--pc-status-cancelled-bg);
  --bs-btn-active-color: var(--action-danger-fg);
  --bs-btn-active-border-color: var(--action-danger-border);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-color: var(--action-danger-fg);
  --bs-btn-disabled-border-color: var(--action-danger-border);
}

/* ---- Form controls ---- */

.pc-input {
  min-height: var(--touch-target-min);
  padding: 0 14px;
  /* 16px floor keeps iOS from zooming the viewport on focus. */
  font-size: var(--input-font-size);
  background-color: var(--surface-card);
  border-color: var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

.pc-input:focus {
  background-color: var(--surface-card);
  border-color: var(--action-accent);
  box-shadow: var(--shadow-focus);
  color: var(--text-primary);
}

/* A textarea needs vertical padding the single-line height rule can't give it. */
.pc-input--area {
  padding: var(--space-3) 14px;
  line-height: var(--leading-normal);
}

.pc-label {
  font-size: var(--text-sm);
}

.pc-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ---- Alert ---- */

.pc-alert {
  --bs-alert-border-radius: var(--radius-md);
  --bs-alert-padding-x: var(--space-4);
  --bs-alert-padding-y: var(--space-3);
  --bs-alert-border: 1px solid var(--bs-alert-border-color);
  font-size: var(--text-sm);
  animation: pc-alert-slide var(--duration-slow) var(--ease-out);
}

.pc-alert--info {
  --bs-alert-bg: var(--pc-status-progress-bg);
  --bs-alert-color: var(--pc-status-progress-fg);
  --bs-alert-border-color: var(--pc-status-progress-bg);
}

.pc-alert--success {
  --bs-alert-bg: var(--pc-status-ready-bg);
  --bs-alert-color: var(--pc-status-ready-fg);
  --bs-alert-border-color: var(--pc-status-ready-bg);
}

.pc-alert--danger {
  --bs-alert-bg: var(--pc-status-cancelled-bg);
  --bs-alert-color: var(--action-danger-fg);
  --bs-alert-border-color: var(--action-danger-border);
}

@keyframes pc-alert-slide {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-alert { animation: none; }
}

/* ---- Status badge ---- */

.pc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.pc-status-badge--sm {
  padding: 3px 9px;
  font-size: var(--text-2xs);
}

/* `ready` is the peak state — the only one that also carries bold weight. */
.pc-status-badge--peak {
  font-weight: var(--weight-bold);
}

.pc-status-badge__icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.pc-status-badge__icon--sm {
  width: 11px;
  height: 11px;
}

.pc-status-badge--pending,
.pc-status-badge--charge-requested {
  background-color: var(--pc-status-pending-bg);
  color: var(--pc-status-pending-fg);
}

.pc-status-badge--in-progress,
.pc-status-badge--charging {
  background-color: var(--pc-status-progress-bg);
  color: var(--pc-status-progress-fg);
}

.pc-status-badge--ready,
.pc-status-badge--charged {
  background-color: var(--pc-status-ready-bg);
  color: var(--pc-status-ready-fg);
}

.pc-status-badge--delivered {
  background-color: var(--pc-status-delivered-bg);
  color: var(--pc-status-delivered-fg);
}

/* Cancelled is an off state, not an error — neutral gray, never red. */
.pc-status-badge--cancelled {
  background-color: var(--pc-status-cancelled-bg);
  color: var(--pc-status-cancelled-fg);
}

/* ---- Media (car photos, avatars) ---- */

/* The inset ring keeps a too-bright or too-dark upload from bleeding into the
   surface behind it, in either theme. */
.pc-media {
  width: var(--pc-media-size, 60px);
  height: var(--pc-media-size, 60px);
  border-radius: var(--radius-md);
  background-color: var(--media-fallback-bg);
  box-shadow: inset 0 0 0 1px var(--media-ring);
}

.pc-media--xs { --pc-media-size: 32px; }
.pc-media--sm { --pc-media-size: 48px; }

.pc-media--circle {
  border-radius: var(--radius-pill);
}

/* Full-bleed card header image. 180px is chosen for phone width and is off any
   spacing scale. */
.pc-media--banner {
  width: 100%;
  height: 180px;
  border-radius: 0;
}

.pc-media--hero {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-lg);
}

.pc-media--xl { --pc-media-size: 150px; }

.pc-avatar-initials {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
}

.pc-avatar-initials--xl {
  font-size: var(--text-4xl);
}

/* ---- Auth screens ---- */

/* Bootstrap has no max-width utility at this value, and the auth card is the
   only fixed-width surface in the app. */
.pc-auth__card {
  max-width: 400px;
}

/* ---- Navbar ---- */

.pc-navbar {
  background-color: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  padding-top: calc(var(--space-2) + var(--safe-area-top));
}

.pc-navbar__brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

/* Theme toggle. Deliberately neutral rather than accent-coloured — it's chrome,
   and the accent is spent on the one primary action per screen. Declared after
   .pc-btn--ghost so these --bs-btn-* values win on the shared element. */
.pc-theme-toggle {
  --bs-btn-color: var(--text-secondary);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-active-color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 0;
}

/* The head script always resolves an explicit data-bs-theme before first paint,
   so one of these always matches — no unstyled both-glyphs frame on load. */
[data-bs-theme="light"] .pc-theme-toggle__sun,
[data-bs-theme="dark"] .pc-theme-toggle__moon {
  display: none;
}

.pc-dropdown {
  --bs-dropdown-bg: var(--surface-elevated);
  --bs-dropdown-border-color: var(--border-subtle);
  --bs-dropdown-border-radius: var(--radius-md);
  --bs-dropdown-color: var(--text-primary);
  --bs-dropdown-link-color: var(--text-primary);
  --bs-dropdown-link-hover-color: var(--text-primary);
  --bs-dropdown-link-hover-bg: var(--surface-sunken);
  --bs-dropdown-link-active-color: var(--text-primary);
  --bs-dropdown-link-active-bg: var(--surface-sunken);
  box-shadow: var(--shadow-lg);
}

/* ---- Bottom navigation ---- */

/* Sticky rather than fixed: as the last flex child of a min-vh-100 body it
   parks at the bottom without the page needing a padding-bottom reservation.
   content-box so the safe-area padding adds to the 64px bar instead of eating
   into it. */
.pc-bottomnav {
  position: sticky;
  bottom: 0;
  z-index: 1030;
  box-sizing: content-box;
  height: var(--bottom-nav-height);
  padding-bottom: calc(var(--space-2) + var(--safe-area-bottom));
  background-color: var(--surface-elevated);
  border-top: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
}

.pc-bottomnav__item {
  min-height: var(--touch-target-min);
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
}

.pc-bottomnav__item--active {
  color: var(--action-accent);
}

.pc-bottomnav__item:active {
  opacity: .7;
}

.pc-bottomnav__cta {
  width: 52px;
  height: 52px;
  /* Raises the circle above the bar so it reads as the primary action. */
  margin-top: -26px;
  border-radius: var(--radius-pill);
  border: 3px solid var(--surface-elevated);
  background-color: var(--action-primary-bg);
  color: var(--action-primary-fg);
  box-shadow: var(--shadow-md);
}

/* ---- Filter tabs (staff queue) ---- */

.pc-filter-tabs {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pc-filter-tabs::-webkit-scrollbar {
  display: none;
}

.pc-filter-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background-color: var(--surface-card);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

/* High contrast so the active filter reads instantly in a dim garage. */
.pc-filter-tabs__tab--active {
  background-color: var(--surface-inverse);
  border-color: var(--surface-inverse);
  color: var(--text-inverse);
}

.pc-filter-tabs__count {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background-color: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.pc-filter-tabs__tab--active .pc-filter-tabs__count {
  background-color: rgba(255, 255, 255, .18);
  color: var(--text-inverse);
}

/* ---- Empty state ---- */

.pc-empty-state__icon {
  color: var(--text-tertiary);
}

.pc-empty-state__text {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* ---- Real-time row update ---- */

/* The wash rides on a pseudo-element rather than the row itself: animating the
   row's own opacity to 0 would blink the content out. */
.pc-row-flash {
  position: relative;
}

.pc-row-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  animation: pc-row-flash var(--flash-duration) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .pc-row-flash::after {
    animation: none;
  }
}