@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');
@import '/web-shared/design-tokens.css?v=15';

/* ═══════════════════════════════════════════════════════════
   iPark Valet Operator — v2.0 Premium Redesign
   Touch-first operational cockpit
   Refs: Dashboard ES/AD, SUXESS.ME, iPark B2B, Paymeter B2C
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

::selection { background: var(--iv-cherry); color: #fff; }

html {
  font-family: var(--iv-font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--iv-surface-1);
  color: var(--iv-text-primary);
  line-height: var(--iv-leading-normal);
  min-height: 100dvh;
  padding-bottom: 120px;
  overscroll-behavior: none;
}

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--iv-cherry);
  outline-offset: 3px;
  border-radius: var(--iv-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ─── Header — 3-column adaptive ─── */

.op-header {
  position: sticky;
  top: 0;
  z-index: var(--iv-z-sticky);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--iv-space-3) var(--iv-space-4);
  background: var(--iv-surface-dark-gradient);
  color: var(--iv-text-on-dark);
  min-height: 60px;
  --op-header-height: 60px;
  box-shadow: var(--iv-shadow-sm);
}

.op-header__status {
  display: flex;
  align-items: center;
  gap: var(--iv-space-1-5);
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-medium);
  color: var(--iv-text-on-dark-muted);
  letter-spacing: var(--iv-tracking-wide);
}

.op-header__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--iv-success-500);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
  animation: statusPulse 3s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
  50% { box-shadow: 0 0 0 6px rgba(16,185,129,0.08); }
}

.op-header__status-text { white-space: nowrap; }

.op-header__shift-time {
  opacity: 0.6;
  font-weight: var(--iv-fw-regular);
}

@media (max-width: 768px) {
  .op-header__shift-time { display: none; }
}

.op-header__brand {
  display: flex;
  align-items: center;
  gap: var(--iv-space-2-5);
  font-weight: var(--iv-fw-semibold);
  font-size: var(--iv-text-base);
}

.op-header__brand img {
  height: 30px;
  width: auto;
}

.op-header__venue {
  font-size: var(--iv-text-xs);
  opacity: 0.7;
  font-weight: var(--iv-fw-regular);
  letter-spacing: var(--iv-tracking-wide);
}

.op-header__actions {
  display: flex;
  align-items: center;
  gap: var(--iv-space-2);
  justify-self: end;
}

.op-header__btn {
  background: none;
  border: none;
  color: var(--iv-text-on-dark);
  cursor: pointer;
  padding: var(--iv-space-2);
  border-radius: var(--iv-radius-md);
  transition: background var(--iv-transition-fast);
  min-width: var(--iv-touch-min);
  min-height: var(--iv-touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
}
.op-header__btn:active { background: rgba(255,255,255,0.15); }

.op-header__persona {
  display: flex;
  align-items: center;
  gap: var(--iv-space-2);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--iv-radius-full);
  padding: 4px 14px 4px 4px;
  color: var(--iv-text-on-dark);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--iv-text-sm);
  font-weight: var(--iv-fw-medium);
  transition: background var(--iv-transition-fast);
  min-height: var(--iv-touch-min);
}
.op-header__persona:active { background: rgba(255,255,255,0.14); }

.op-header__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--iv-cherry);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--iv-fw-semibold);
  color: var(--iv-white);
  overflow: hidden;
}
.op-header__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.op-header__persona-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-header__persona-caret { opacity: 0.6; }

/* ─── Header mobile ─── */

@media (max-width: 599px) {
  .op-header {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0;
    padding: var(--iv-space-2) var(--iv-space-3);
    min-height: 52px;
    --op-header-height: 52px;
  }
  .op-header__brand {
    gap: var(--iv-space-2);
    font-size: var(--iv-text-sm);
  }
  .op-header__brand img { height: 24px; }
  .op-header__status {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    padding-left: 32px;
    margin-top: 2px;
  }
  .op-header__status-text { font-size: var(--iv-text-2xs, 10px); }
  .op-header__actions {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }
  .op-header__persona-name { display: none; }
}

/* ─── Persona Menu ─── */

.op-persona-menu {
  position: fixed;
  top: var(--op-header-height, 60px);
  right: var(--iv-space-4);
  z-index: var(--iv-z-dropdown);
  background: var(--iv-surface-0);
  border-radius: var(--iv-radius-xl);
  box-shadow: var(--iv-shadow-xl);
  border: 1px solid var(--iv-border);
  min-width: 260px;
  padding: var(--iv-space-2);
  display: none;
  animation: menuFadeIn 180ms var(--iv-ease);
}
.op-persona-menu--active { display: block; }

@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.op-persona-menu__header {
  display: flex;
  align-items: center;
  gap: var(--iv-space-3);
  padding: var(--iv-space-3) var(--iv-space-3);
}

.op-persona-menu__header-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--iv-cherry);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: var(--iv-fw-semibold);
  color: var(--iv-white);
  overflow: hidden;
  flex-shrink: 0;
}
.op-persona-menu__header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.op-persona-menu__name {
  font-weight: var(--iv-fw-semibold);
  font-size: var(--iv-text-sm);
  color: var(--iv-text-primary);
}
.op-persona-menu__role {
  font-size: var(--iv-text-xs);
  color: var(--iv-text-secondary);
}
.op-persona-menu__venue-label {
  font-size: var(--iv-text-2xs);
  color: var(--iv-text-tertiary);
}

.op-persona-menu__divider {
  height: 1px;
  background: var(--iv-border);
  margin: var(--iv-space-1-5) var(--iv-space-3);
}

.op-persona-menu__item {
  display: flex;
  align-items: center;
  gap: var(--iv-space-3);
  width: 100%;
  padding: var(--iv-space-3) var(--iv-space-3);
  background: none;
  border: none;
  border-radius: var(--iv-radius-md);
  font-family: inherit;
  font-size: var(--iv-text-sm);
  font-weight: var(--iv-fw-medium);
  color: var(--iv-text-primary);
  cursor: pointer;
  transition: background var(--iv-transition-fast);
  min-height: var(--iv-touch-min);
}
.op-persona-menu__item:hover,
.op-persona-menu__item:active {
  background: var(--iv-surface-2);
}
.op-persona-menu__item--danger { color: var(--iv-cherry); }
.op-persona-menu__item--danger:hover,
.op-persona-menu__item--danger:active { background: var(--iv-cherry-50); }

.op-persona-menu__item svg { color: var(--iv-text-tertiary); flex-shrink: 0; }
.op-persona-menu__item--danger svg { color: var(--iv-cherry); }

.op-persona-menu__version {
  padding: var(--iv-space-2) var(--iv-space-3);
  font-size: var(--iv-text-2xs, 10px);
  color: var(--iv-text-tertiary);
  letter-spacing: var(--iv-tracking-wide);
  text-align: center;
}

/* ─── Operator Home ─── */

.op-home {
  padding: var(--iv-space-8) var(--iv-space-4) var(--iv-space-5);
  background: var(--iv-surface-1);
  border-bottom: 1px solid var(--iv-border);
  overflow-x: hidden;
}

.op-home__container {
  max-width: 960px;
  margin: 0 auto;
}

.op-home__greeting {
  text-align: center;
  margin-bottom: var(--iv-space-6);
}

.op-home__greeting-title {
  font-size: var(--iv-text-2xl);
  font-weight: var(--iv-fw-bold);
  color: var(--iv-text-primary);
  line-height: var(--iv-leading-tight);
  margin-bottom: var(--iv-space-1);
}

.op-home__greeting-sub {
  font-size: var(--iv-text-sm);
  color: var(--iv-text-secondary);
  font-weight: var(--iv-fw-regular);
}

@media (max-width: 599px) {
  .op-home {
    padding: var(--iv-space-5) var(--iv-space-3) var(--iv-space-4);
  }
  .op-home__greeting {
    margin-bottom: var(--iv-space-4);
  }
  .op-home__greeting-title {
    font-size: var(--iv-text-lg);
  }
  .op-home__greeting-sub { display: none; }
}

/* ─── Operation Nav ─── */

.op-opnav {
  display: grid;
  gap: var(--iv-space-3);
  margin-bottom: var(--iv-space-5);
}

/* Desktop: 6 columns, centered row */
@media (min-width: 1200px) {
  .op-opnav { grid-template-columns: repeat(6, 1fr); }
}

/* Tablet: 3×2 */
@media (min-width: 600px) and (max-width: 1199px) {
  .op-opnav { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile: 3×2 compact */
@media (max-width: 599px) {
  .op-opnav {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--iv-space-2);
  }
}

.op-opnav__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--iv-space-4) var(--iv-space-2) var(--iv-space-3);
  background: var(--iv-surface-0);
  border-radius: var(--iv-radius-lg);
  border: 1px solid var(--iv-border);
  box-shadow: var(--iv-shadow-xs);
  cursor: pointer;
  transition: box-shadow var(--iv-transition-base), transform var(--iv-transition-base);
  overflow: hidden;
  font-family: inherit;
  min-height: var(--iv-touch-min);
}

.op-opnav__card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 0 0 var(--iv-radius-lg) var(--iv-radius-lg);
}

.op-opnav__card:hover {
  box-shadow: var(--iv-shadow-md);
}
.op-opnav__card:active { transform: scale(0.97); }

.op-opnav__card--active {
  border-color: var(--iv-deep-blue-300);
  box-shadow: var(--iv-shadow-md);
}

/* ── Nav card inner elements ── */

.op-opnav__count {
  font-size: var(--iv-text-2xl);
  font-weight: var(--iv-fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: var(--iv-space-2);
}

.op-opnav__icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--iv-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--iv-space-2);
}

.op-opnav__label {
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-semibold);
  color: var(--iv-text-primary);
  line-height: var(--iv-leading-snug);
}

.op-opnav__desc {
  font-size: var(--iv-text-2xs);
  color: var(--iv-text-tertiary);
  margin-top: var(--iv-space-0-5);
  line-height: var(--iv-leading-snug);
}

@media (max-width: 599px) {
  .op-opnav__card {
    padding: var(--iv-space-3) var(--iv-space-1-5) var(--iv-space-2);
  }
  .op-opnav__count { font-size: var(--iv-text-lg); margin-bottom: var(--iv-space-1); }
  .op-opnav__icon-wrap { width: 32px; height: 32px; margin-bottom: var(--iv-space-1); }
  .op-opnav__label { font-size: var(--iv-text-2xs); }
  .op-opnav__desc { display: none; }
}

/* ── Status variants (3-token: bg + fg + accent bar) ── */

.op-opnav__card--exit .op-opnav__count { color: var(--iv-status-exit-fg); }
.op-opnav__card--exit .op-opnav__icon-wrap { background: var(--iv-status-exit-bg); color: var(--iv-status-exit-fg); }
.op-opnav__card--exit::after { background: var(--iv-status-exit-fg); }

.op-opnav__card--preparing .op-opnav__count { color: var(--iv-status-preparing-fg); }
.op-opnav__card--preparing .op-opnav__icon-wrap { background: var(--iv-status-preparing-bg); color: var(--iv-status-preparing-fg); }
.op-opnav__card--preparing::after { background: var(--iv-status-preparing-fg); }

.op-opnav__card--arriving .op-opnav__count { color: var(--iv-status-arriving-fg); }
.op-opnav__card--arriving .op-opnav__icon-wrap { background: var(--iv-status-arriving-bg); color: var(--iv-status-arriving-fg); }
.op-opnav__card--arriving::after { background: var(--iv-status-arriving-fg); }

.op-opnav__card--ready .op-opnav__count { color: var(--iv-status-ready-fg); }
.op-opnav__card--ready .op-opnav__icon-wrap { background: var(--iv-status-ready-bg); color: var(--iv-status-ready-fg); }
.op-opnav__card--ready::after { background: var(--iv-status-ready-fg); }

.op-opnav__card--custody .op-opnav__count { color: var(--iv-status-custody-fg); }
.op-opnav__card--custody .op-opnav__icon-wrap { background: var(--iv-status-custody-bg); color: var(--iv-status-custody-fg); }
.op-opnav__card--custody::after { background: var(--iv-status-custody-fg); }

.op-opnav__card--incident .op-opnav__count { color: var(--iv-status-incident-fg); }
.op-opnav__card--incident .op-opnav__icon-wrap { background: var(--iv-status-incident-bg); color: var(--iv-status-incident-fg); }
.op-opnav__card--incident::after { background: var(--iv-status-incident-fg); }

/* Zero count dimming */
.op-opnav__card--zero { opacity: 0.55; }
.op-opnav__card--zero::after { opacity: 0.3; }

/* ─── Context Bar ─── */

.op-context-bar {
  display: flex;
  justify-content: center;
  gap: var(--iv-space-5);
  padding: var(--iv-space-3) var(--iv-space-4);
  background: var(--iv-surface-0);
  border-radius: var(--iv-radius-lg);
  border: 1px solid var(--iv-border);
  flex-wrap: wrap;
}

.op-context-bar__item {
  display: flex;
  align-items: center;
  gap: var(--iv-space-1-5);
  font-size: var(--iv-text-xs);
  color: var(--iv-text-secondary);
  white-space: nowrap;
}

.op-context-bar__value {
  font-weight: var(--iv-fw-semibold);
  color: var(--iv-text-primary);
}

.op-context-bar__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--iv-border-strong);
}

@media (max-width: 599px) {
  .op-context-bar {
    gap: var(--iv-space-3);
    padding: var(--iv-space-2-5) var(--iv-space-3);
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .op-context-bar::-webkit-scrollbar { display: none; }
}

/* ─── Sticky Compact Nav ─── */

.op-sticky-nav {
  position: fixed;
  top: var(--op-header-height, 60px);
  left: 0;
  right: 0;
  z-index: calc(var(--iv-z-sticky) - 1);
  background: var(--iv-surface-0);
  border-bottom: 1px solid var(--iv-border);
  box-shadow: var(--iv-shadow-sm);
  padding: var(--iv-space-2) var(--iv-space-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--iv-transition-base), transform var(--iv-transition-base), visibility var(--iv-transition-base);
}

.op-sticky-nav--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.op-sticky-nav__inner {
  display: flex;
  gap: var(--iv-space-1-5);
  justify-content: center;
  max-width: 960px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.op-sticky-nav__inner::-webkit-scrollbar { display: none; }

.op-sticky-nav__item {
  display: flex;
  align-items: center;
  gap: var(--iv-space-1-5);
  padding: var(--iv-space-2) var(--iv-space-3);
  border-radius: var(--iv-radius-full);
  cursor: pointer;
  transition: background var(--iv-transition-fast), border-color var(--iv-transition-fast), box-shadow var(--iv-transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
  min-height: var(--iv-touch-min);
  border: 1.5px solid transparent;
  font-size: var(--iv-text-sm);
  font-family: inherit;
  background: none;
}

.op-sticky-nav__item:active { transform: scale(0.97); }

.op-sticky-nav__item--active { box-shadow: var(--iv-shadow-sm); }

.op-sticky-nav__item[data-status="requested"] {
  background: var(--iv-status-exit-bg); border-color: var(--iv-status-exit-border); color: var(--iv-status-exit-fg);
}
.op-sticky-nav__item[data-status="preparing"] {
  background: var(--iv-status-preparing-bg); border-color: var(--iv-status-preparing-border); color: var(--iv-status-preparing-fg);
}
.op-sticky-nav__item[data-status="ready"] {
  background: var(--iv-status-ready-bg); border-color: var(--iv-status-ready-border); color: var(--iv-status-ready-fg);
}
.op-sticky-nav__item[data-status="pending"] {
  background: var(--iv-status-arriving-bg); border-color: var(--iv-status-arriving-border); color: var(--iv-status-arriving-fg);
}
.op-sticky-nav__item[data-status="custody"] {
  background: var(--iv-surface-2); border-color: var(--iv-border); color: var(--iv-text-secondary);
}
.op-sticky-nav__item[data-status="incident"] {
  background: var(--iv-status-incident-bg); border-color: var(--iv-status-incident-border); color: var(--iv-status-incident-fg);
}

.op-sticky-nav__count {
  font-weight: var(--iv-fw-bold);
  font-size: var(--iv-text-base);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.op-sticky-nav__label {
  font-weight: var(--iv-fw-medium);
  font-size: var(--iv-text-xs);
}

/* ─── Sections ─── */

.op-section {
  margin: var(--iv-space-4) var(--iv-space-3);
  scroll-margin-top: 120px;
}

@media (min-width: 768px) {
  .op-section {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    padding: 0 var(--iv-space-2);
  }
}

.op-section__header {
  display: flex;
  align-items: center;
  gap: var(--iv-space-2);
  margin-bottom: var(--iv-space-3);
  padding: 0 var(--iv-space-1);
}

.op-section__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.op-section__dot--requested { background: var(--iv-status-exit-fg); }
.op-section__dot--preparing { background: var(--iv-status-preparing-fg); }
.op-section__dot--pending { background: var(--iv-status-arriving-fg); }
.op-section__dot--custody { background: var(--iv-status-custody-fg); }
.op-section__dot--ready { background: var(--iv-status-ready-fg); }
.op-section__dot--incident { background: var(--iv-status-incident-fg); }
.op-section__dot--delivered { background: var(--iv-status-delivered-fg); }

.op-section__title {
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  color: var(--iv-text-secondary);
}

.op-section__subtitle {
  font-size: var(--iv-text-2xs);
  color: var(--iv-text-tertiary);
  font-weight: var(--iv-fw-regular);
  margin-left: var(--iv-space-1);
}

.op-section__count {
  font-size: var(--iv-text-xs);
  color: var(--iv-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.op-section__empty {
  text-align: center;
  padding: var(--iv-space-8) var(--iv-space-4);
  color: var(--iv-text-tertiary);
  font-size: var(--iv-text-sm);
  background: var(--iv-surface-0);
  border-radius: var(--iv-radius-lg);
  border: 1px dashed var(--iv-border);
}

/* Collapsible sections */
.op-section__header--toggle { cursor: pointer; }
.op-section__header--toggle:active { opacity: 0.7; }
.op-section__toggle { transition: transform var(--iv-transition-fast); }
.op-section__toggle--collapsed { transform: rotate(-90deg); }
.op-section__body--collapsed { display: none; }

/* Arrival time grouping */
.op-section__time-group {
  font-size: var(--iv-text-2xs);
  font-weight: var(--iv-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  color: var(--iv-text-tertiary);
  padding: var(--iv-space-3) var(--iv-space-1) var(--iv-space-2);
}
.op-section__time-group--delayed {
  color: var(--iv-status-delayed-fg);
}

/* ─── Vehicle Card — Base ─── */

.op-card {
  position: relative;
  background: var(--iv-surface-0);
  border-radius: var(--iv-radius-lg);
  padding: var(--iv-space-5);
  margin-bottom: var(--iv-space-3);
  border: 1px solid var(--iv-border);
  box-shadow: var(--iv-shadow-sm);
  transition: box-shadow var(--iv-transition-base), transform var(--iv-transition-fast);
  overflow: hidden;
}
.op-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--iv-radius-lg) 0 0 var(--iv-radius-lg);
}
.op-card:active { transform: scale(0.985); }

/* Card variants — accent bar + tinted background */
.op-card--requested::before { background: var(--iv-status-exit-fg); }
.op-card--requested {
  background: var(--iv-status-exit-bg);
  border-color: var(--iv-status-exit-border);
}

.op-card--preparing::before { background: var(--iv-status-preparing-fg); }
.op-card--preparing {
  background: var(--iv-status-preparing-bg);
  border-color: var(--iv-status-preparing-border);
}

.op-card--ready::before { background: var(--iv-status-ready-fg); }
.op-card--ready {
  background: var(--iv-status-ready-bg);
  border-color: var(--iv-status-ready-border);
}

.op-card--pending::before { background: var(--iv-status-arriving-fg); }
.op-card--pending {
  border-color: var(--iv-status-arriving-border);
}

.op-card--custody::before { background: var(--iv-status-custody-fg); }
.op-card--custody {
  border-color: var(--iv-border);
}

.op-card--incident::before { background: var(--iv-status-incident-fg); }
.op-card--incident {
  background: var(--iv-status-incident-bg);
  border-color: var(--iv-status-incident-border);
}

.op-card--has-incident {
  border-right: 3px solid var(--iv-status-incident-fg);
}

/* Urgency escalation (added via JS for requests > 5 min) */
.op-card--urgent {
  box-shadow: var(--iv-shadow-md), inset 0 0 0 1px var(--iv-status-exit-border);
}

/* ─── Card Inner Elements ─── */

.op-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--iv-space-3);
  margin-bottom: var(--iv-space-2);
}

.op-card__status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--iv-space-1);
  padding: var(--iv-space-1) var(--iv-space-2-5);
  border-radius: var(--iv-radius-full);
  font-size: var(--iv-text-2xs);
  font-weight: var(--iv-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}

.op-card__status-pill--exit {
  background: var(--iv-status-exit-bg);
  color: var(--iv-status-exit-fg);
  border-color: var(--iv-status-exit-border);
}
.op-card__status-pill--preparing {
  background: var(--iv-status-preparing-bg);
  color: var(--iv-status-preparing-fg);
  border-color: var(--iv-status-preparing-border);
}
.op-card__status-pill--ready {
  background: var(--iv-status-ready-bg);
  color: var(--iv-status-ready-fg);
  border-color: var(--iv-status-ready-border);
}
.op-card__status-pill--arriving {
  background: var(--iv-status-arriving-bg);
  color: var(--iv-status-arriving-fg);
  border-color: var(--iv-status-arriving-border);
}
.op-card__status-pill--incident {
  background: var(--iv-status-incident-bg);
  color: var(--iv-status-incident-fg);
  border-color: var(--iv-status-incident-border);
}
.op-card__status-pill--delayed {
  background: var(--iv-status-delayed-bg);
  color: var(--iv-status-delayed-fg);
  border-color: var(--iv-status-delayed-border);
}

.op-card__plate {
  font-family: var(--iv-font-mono);
  font-size: 1.375rem;
  font-weight: var(--iv-fw-bold);
  letter-spacing: var(--iv-tracking-plate);
  color: var(--iv-text-primary);
  line-height: var(--iv-leading-tight);
}

.op-card__time {
  font-size: var(--iv-text-xs);
  color: var(--iv-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.op-card__time--urgent {
  color: var(--iv-status-exit-fg);
  font-weight: var(--iv-fw-semibold);
}

.op-card__vehicle {
  font-size: var(--iv-text-sm);
  color: var(--iv-text-secondary);
  margin-bottom: var(--iv-space-3);
  line-height: var(--iv-leading-snug);
}

.op-card__origin {
  font-size: var(--iv-text-2xs);
  color: var(--iv-text-tertiary);
  margin-bottom: var(--iv-space-2);
}

/* Location badges — premium treatment */
.op-card__location {
  display: flex;
  gap: var(--iv-space-2);
  margin-bottom: var(--iv-space-3);
  flex-wrap: wrap;
}

.op-card__location-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--iv-space-1-5);
  padding: var(--iv-space-2) var(--iv-space-3);
  background: var(--iv-surface-2);
  border-radius: var(--iv-radius-md);
  border: 1px solid var(--iv-border);
  font-size: var(--iv-text-sm);
  font-weight: var(--iv-fw-semibold);
  color: var(--iv-text-primary);
  min-height: 36px;
}
.op-card__location-badge svg { color: var(--iv-text-tertiary); flex-shrink: 0; }
.op-card__location-label {
  font-size: var(--iv-text-2xs);
  color: var(--iv-text-tertiary);
  font-weight: var(--iv-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  margin-right: var(--iv-space-1);
}

.op-card__meta {
  display: flex;
  align-items: center;
  gap: var(--iv-space-3);
  margin-bottom: var(--iv-space-3);
  flex-wrap: wrap;
}

.op-card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--iv-space-1);
  font-size: var(--iv-text-xs);
  color: var(--iv-text-secondary);
}
.op-card__meta-item svg { flex-shrink: 0; }

/* Contact info for arrivals */
.op-card__contact {
  display: flex;
  align-items: center;
  gap: var(--iv-space-1-5);
  font-size: var(--iv-text-sm);
  color: var(--iv-text-secondary);
  margin-bottom: var(--iv-space-2);
}

.op-card__arrival {
  font-size: var(--iv-text-sm);
  color: var(--iv-text-secondary);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--iv-space-3);
}
.op-card__arrival strong {
  color: var(--iv-text-primary);
  font-weight: var(--iv-fw-semibold);
}

.op-card__ref {
  font-size: var(--iv-text-2xs);
  color: var(--iv-text-tertiary);
  font-family: var(--iv-font-mono);
}

/* Incident badge overlay */
.op-card__incident-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--iv-space-1);
  padding: var(--iv-space-1-5) var(--iv-space-2-5);
  background: var(--iv-status-incident-bg);
  border: 1px solid var(--iv-status-incident-border);
  border-radius: var(--iv-radius-sm);
  font-size: var(--iv-text-2xs);
  font-weight: var(--iv-fw-bold);
  color: var(--iv-status-incident-fg);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-wide);
  margin-bottom: var(--iv-space-3);
}

/* Preparing operator info */
.op-card__operator {
  display: flex;
  align-items: center;
  gap: var(--iv-space-2);
  padding: var(--iv-space-2) var(--iv-space-3);
  background: var(--iv-surface-2);
  border-radius: var(--iv-radius-md);
  font-size: var(--iv-text-xs);
  color: var(--iv-text-secondary);
  margin-bottom: var(--iv-space-3);
}
.op-card__operator strong { color: var(--iv-text-primary); font-weight: var(--iv-fw-semibold); }

/* ─── Card Actions ─── */

.op-card__actions {
  display: flex;
  gap: var(--iv-space-2);
  margin-top: var(--iv-space-1);
}

.op-card__actions--split {
  display: flex;
  gap: var(--iv-space-2);
  flex-wrap: wrap;
}

/* ─── Buttons ─── */

.op-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--iv-space-2);
  padding: var(--iv-space-3) var(--iv-space-5);
  border-radius: var(--iv-radius-md);
  font-family: inherit;
  font-size: var(--iv-text-sm);
  font-weight: var(--iv-fw-semibold);
  cursor: pointer;
  border: none;
  transition: all var(--iv-transition-fast);
  min-height: var(--iv-touch-min);
  flex: 1;
  line-height: var(--iv-leading-tight);
}
.op-btn:active { transform: scale(0.97); }
.op-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.op-btn:disabled:active { transform: none; }

.op-btn--primary {
  background: var(--iv-cherry);
  color: var(--iv-white);
  box-shadow: var(--iv-shadow-cherry);
}
.op-btn--primary:active { background: var(--iv-cherry-600); }

.op-btn--success {
  background: var(--iv-success-600);
  color: var(--iv-white);
  box-shadow: 0 4px 12px rgba(5,150,105,0.25);
}
.op-btn--success:active { background: var(--iv-success-700); }

.op-btn--warning {
  background: var(--iv-amber-600);
  color: var(--iv-white);
  box-shadow: 0 4px 12px rgba(217,119,6,0.2);
}
.op-btn--warning:active { background: var(--iv-amber-700); }

.op-btn--secondary {
  background: var(--iv-surface-2);
  color: var(--iv-text-primary);
  border: 1px solid var(--iv-border);
}
.op-btn--secondary:active { background: var(--iv-gray-200); }

.op-btn--outline {
  background: transparent;
  color: var(--iv-text-primary);
  border: 1px solid var(--iv-border-strong);
}
.op-btn--outline:active { background: var(--iv-surface-2); }

.op-btn--ghost {
  background: transparent;
  color: var(--iv-text-secondary);
  border: 1px solid var(--iv-border);
}
.op-btn--ghost:active { background: var(--iv-surface-2); }

.op-btn--danger {
  background: var(--iv-cherry);
  color: var(--iv-white);
}

.op-btn--full { width: 100%; }

.op-btn--sm {
  font-size: var(--iv-text-xs);
  padding: var(--iv-space-2) var(--iv-space-3);
  min-height: var(--iv-touch-min);
  border-radius: var(--iv-radius-md);
}

.op-btn--cta {
  min-height: var(--iv-touch-comfortable);
  font-size: var(--iv-text-base);
  border-radius: var(--iv-radius-lg);
  font-weight: var(--iv-fw-bold);
}

/* ─── Bottom Bar ─── */

.op-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--iv-z-sticky);
  display: flex;
  gap: var(--iv-space-3);
  padding: var(--iv-space-3) var(--iv-space-4);
  padding-bottom: calc(var(--iv-space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--iv-surface-0);
  border-top: 1px solid var(--iv-border);
  box-shadow: 0 -4px 16px rgba(3,25,39,0.06);
}

body:has(.op-overlay--active) .op-bottom-bar { display: none; }
body:has(#iv-dev-bar) .op-bottom-bar { bottom: 40px; }
body:has(#iv-dev-bar) { padding-bottom: 160px; }

@media (min-width: 768px) {
  .op-bottom-bar {
    max-width: 480px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: var(--iv-radius-xl) var(--iv-radius-xl) 0 0;
    border: 1px solid var(--iv-border);
    border-bottom: none;
  }
}

/* ─── Cards Grid (custody section, landscape tablet) ─── */

.op-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--iv-space-3);
}

@media (min-width: 768px) {
  .op-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .op-cards-grid .op-card { margin-bottom: 0; }
}
@media (min-width: 1200px) {
  .op-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─── Pulse animation (for requested state) ─── */

.op-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--iv-cherry);
  margin-right: var(--iv-space-1-5);
  vertical-align: 1px;
  box-shadow: 0 0 0 3px rgba(234,23,68,0.18);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(234,23,68,0.18); }
  50% { box-shadow: 0 0 0 6px rgba(234,23,68,0.06); }
}

/* ─── Overlay / Sheet ─── */

.op-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--iv-z-overlay);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(3,25,39,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--iv-transition-base);
}
.op-overlay--active {
  opacity: 1;
  pointer-events: auto;
}

.op-sheet {
  background: var(--iv-surface-0);
  border-radius: var(--iv-radius-2xl) var(--iv-radius-2xl) 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 85dvh;
  overflow-y: auto;
  padding: var(--iv-space-5);
  transform: translateY(20px);
  opacity: 0;
  transition: transform var(--iv-transition-base), opacity var(--iv-transition-base);
}
.op-overlay--active .op-sheet {
  transform: translateY(0);
  opacity: 1;
}

.op-sheet--detail { max-width: 580px; }
.op-sheet--confirm { max-width: 400px; align-self: center; border-radius: var(--iv-radius-2xl); }
.op-sheet--full { max-height: 92dvh; }

@media (min-width: 768px) {
  .op-overlay { align-items: center; }
  .op-sheet {
    border-radius: var(--iv-radius-2xl);
    max-height: 85vh;
  }
}

.op-sheet__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--iv-space-5);
}

.op-sheet__title {
  font-size: var(--iv-text-lg);
  font-weight: var(--iv-fw-bold);
  color: var(--iv-text-primary);
}

.op-sheet__close {
  background: var(--iv-surface-2);
  border: none;
  border-radius: var(--iv-radius-full);
  width: var(--iv-touch-min);
  height: var(--iv-touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--iv-text-secondary);
  transition: background var(--iv-transition-fast);
  flex-shrink: 0;
}
.op-sheet__close:active { background: var(--iv-gray-200); }

/* ─── Toast ─── */

.op-toast {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: var(--iv-z-toast);
  background: var(--iv-deep-blue);
  color: var(--iv-text-on-dark);
  padding: var(--iv-space-3) var(--iv-space-5);
  border-radius: var(--iv-radius-full);
  font-size: var(--iv-text-sm);
  font-weight: var(--iv-fw-medium);
  box-shadow: var(--iv-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: all var(--iv-transition-base);
  white-space: nowrap;
}
.op-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.op-toast--success { background: var(--iv-success-600); }

/* ─── Confirm dialog ─── */

.op-confirm {
  text-align: center;
  padding: var(--iv-space-4) 0;
}
.op-confirm__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--iv-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--iv-space-4);
  background: var(--iv-surface-2);
  color: var(--iv-text-secondary);
}
.op-confirm__title {
  font-size: var(--iv-text-lg);
  font-weight: var(--iv-fw-bold);
  color: var(--iv-text-primary);
  margin-bottom: var(--iv-space-2);
}
.op-confirm__desc {
  font-size: var(--iv-text-sm);
  color: var(--iv-text-secondary);
  margin-bottom: var(--iv-space-6);
  line-height: var(--iv-leading-relaxed);
}
.op-confirm__actions {
  display: flex;
  gap: var(--iv-space-3);
}

/* ─── Forms ─── */

.op-field {
  margin-bottom: var(--iv-space-4);
}

.op-field__label {
  display: block;
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-semibold);
  color: var(--iv-text-secondary);
  margin-bottom: var(--iv-space-1-5);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-wide);
}

.op-field__input {
  width: 100%;
  padding: var(--iv-space-3) var(--iv-space-4);
  border: 1.5px solid var(--iv-border);
  border-radius: var(--iv-radius-md);
  font-family: inherit;
  font-size: var(--iv-text-base);
  color: var(--iv-text-primary);
  background: var(--iv-surface-0);
  min-height: var(--iv-touch-min);
  transition: border-color var(--iv-transition-fast), box-shadow var(--iv-transition-fast);
}
.op-field__input:focus {
  border-color: var(--iv-cherry);
  box-shadow: var(--iv-focus-ring);
}
.op-field__input::placeholder { color: var(--iv-text-tertiary); }

.op-field__input--plate {
  font-family: var(--iv-font-mono);
  font-weight: var(--iv-fw-bold);
  font-size: var(--iv-text-xl);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-plate);
}

.op-form-section {
  margin-top: var(--iv-space-4);
  padding-top: var(--iv-space-3);
  border-top: 1px solid var(--iv-border);
}
.op-form-section__title {
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-semibold);
  color: var(--iv-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--iv-space-3);
}

.op-field__select {
  width: 100%;
  padding: var(--iv-space-3) var(--iv-space-4);
  border: 1.5px solid var(--iv-border);
  border-radius: var(--iv-radius-md);
  font-family: inherit;
  font-size: var(--iv-text-base);
  color: var(--iv-text-primary);
  background: var(--iv-surface-0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6a7a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance: none;
  cursor: pointer;
  min-height: var(--iv-touch-min);
}
.op-field__select:focus { border-color: var(--iv-cherry); box-shadow: var(--iv-focus-ring); }

.op-field__textarea {
  width: 100%;
  padding: var(--iv-space-3) var(--iv-space-4);
  border: 1.5px solid var(--iv-border);
  border-radius: var(--iv-radius-md);
  font-family: inherit;
  font-size: var(--iv-text-sm);
  color: var(--iv-text-primary);
  background: var(--iv-surface-0);
  resize: vertical;
  min-height: 80px;
}
.op-field__textarea:focus { border-color: var(--iv-cherry); box-shadow: var(--iv-focus-ring); }

/* ─── Photo Evidence (typed 4-angle) ─── */

.op-photo-evidence {
  margin-bottom: var(--iv-space-4);
}

.op-photo-evidence__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--iv-space-3);
}

.op-photo-evidence__title {
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  color: var(--iv-text-secondary);
}

.op-photo-evidence__counter {
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-semibold);
  color: var(--iv-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.op-photo-evidence__counter--complete { color: var(--iv-success-600); }

.op-photo-evidence__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--iv-space-2-5);
}

.op-photo-slot {
  aspect-ratio: 4/3;
  border: 2px dashed var(--iv-border);
  border-radius: var(--iv-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--iv-transition-fast), background var(--iv-transition-fast);
  overflow: hidden;
  position: relative;
  background: var(--iv-surface-2);
}
.op-photo-slot:active { background: var(--iv-gray-200); }

.op-photo-slot--captured {
  border: 2px solid var(--iv-success-600);
  background: transparent;
}

.op-photo-slot__label {
  font-size: var(--iv-text-2xs);
  font-weight: var(--iv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  color: var(--iv-text-tertiary);
  margin-top: var(--iv-space-1);
}

.op-photo-slot__capture-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--iv-text-tertiary);
  padding: var(--iv-space-2);
}

.op-photo-slot__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.op-photo-slot__retake {
  position: absolute;
  bottom: var(--iv-space-1);
  right: var(--iv-space-1);
  background: rgba(3,25,39,0.7);
  color: var(--iv-white);
  border: none;
  border-radius: var(--iv-radius-sm);
  padding: var(--iv-space-1) var(--iv-space-2);
  font-size: var(--iv-text-2xs);
  font-weight: var(--iv-fw-semibold);
  cursor: pointer;
}

/* Free-form photos (incidents) */
.op-photos { margin-bottom: var(--iv-space-4); }
.op-photos__label {
  display: block;
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-semibold);
  color: var(--iv-text-secondary);
  margin-bottom: var(--iv-space-2);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-wide);
}
.op-photos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--iv-space-2);
  margin-bottom: var(--iv-space-2);
}
.op-photos__thumb {
  position: relative;
  aspect-ratio: 1;
}
.op-photos__thumb-wrap {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--iv-radius-md);
  border: 1px solid var(--iv-border);
}
.op-photos__remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--iv-cherry);
  color: var(--iv-white);
  border: 2px solid var(--iv-surface-0);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.op-photos__add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--iv-space-2);
  padding: var(--iv-space-3) var(--iv-space-4);
  border: 2px dashed var(--iv-border);
  border-radius: var(--iv-radius-md);
  background: none;
  color: var(--iv-text-secondary);
  font-family: inherit;
  font-size: var(--iv-text-sm);
  cursor: pointer;
  min-height: var(--iv-touch-min);
}
.op-photos__add-btn:active { background: var(--iv-surface-2); }

/* ─── Delivered card (history) ─── */

.op-delivered-card {
  background: var(--iv-surface-0);
  border-radius: var(--iv-radius-md);
  padding: var(--iv-space-3) var(--iv-space-4);
  margin-bottom: var(--iv-space-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--iv-border);
  opacity: 0.75;
}
.op-delivered-card__plate {
  font-family: var(--iv-font-mono);
  font-weight: var(--iv-fw-bold);
  font-size: var(--iv-text-sm);
  color: var(--iv-text-primary);
  letter-spacing: var(--iv-tracking-plate);
}
.op-delivered-card__info {
  font-size: var(--iv-text-xs);
  color: var(--iv-text-tertiary);
}
.op-delivered-card__time {
  font-size: var(--iv-text-xs);
  color: var(--iv-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ─── Detail Sheet ─── */

.op-detail { padding-top: var(--iv-space-2); }

.op-detail__status {
  display: flex;
  align-items: center;
  gap: var(--iv-space-3);
  margin-bottom: var(--iv-space-4);
}

.op-detail__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--iv-space-1-5);
  padding: var(--iv-space-1-5) var(--iv-space-3);
  border-radius: var(--iv-radius-full);
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  border: 1px solid transparent;
}
.op-detail__badge--requested { background: var(--iv-status-exit-bg); color: var(--iv-status-exit-fg); border-color: var(--iv-status-exit-border); }
.op-detail__badge--preparing { background: var(--iv-status-preparing-bg); color: var(--iv-status-preparing-fg); border-color: var(--iv-status-preparing-border); }
.op-detail__badge--ready { background: var(--iv-status-ready-bg); color: var(--iv-status-ready-fg); border-color: var(--iv-status-ready-border); }
.op-detail__badge--custody { background: var(--iv-status-custody-bg); color: var(--iv-status-custody-fg); border-color: var(--iv-status-custody-border); }
.op-detail__badge--incident { background: var(--iv-status-incident-bg); color: var(--iv-status-incident-fg); border-color: var(--iv-status-incident-border); }
.op-detail__badge--delivered { background: var(--iv-status-delivered-bg); color: var(--iv-status-delivered-fg); border-color: var(--iv-status-delivered-border); }

.op-detail__plate {
  font-family: var(--iv-font-mono);
  font-size: var(--iv-text-2xl);
  font-weight: var(--iv-fw-bold);
  letter-spacing: var(--iv-tracking-plate);
  color: var(--iv-text-primary);
  margin-bottom: var(--iv-space-1);
}

.op-detail__info {
  font-size: var(--iv-text-sm);
  color: var(--iv-text-secondary);
  margin-bottom: var(--iv-space-5);
}

.op-detail__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--iv-space-2-5) 0;
  font-size: var(--iv-text-sm);
  border-bottom: 1px solid var(--iv-border);
}
.op-detail__row:last-child { border-bottom: none; }

.op-detail__section {
  margin-bottom: var(--iv-space-5);
}

.op-detail__section-title {
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  color: var(--iv-text-secondary);
  margin-bottom: var(--iv-space-3);
  padding-bottom: var(--iv-space-2);
  border-bottom: 1px solid var(--iv-border);
}

.op-detail__actions {
  display: flex;
  gap: var(--iv-space-3);
  margin-top: var(--iv-space-5);
}

/* Detail photos grid */
.op-detail__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--iv-space-2);
}

.op-detail__photo-item {
  aspect-ratio: 4/3;
  border-radius: var(--iv-radius-md);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--iv-border);
}

.op-detail__photo-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.op-detail__photo-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(3,25,39,0.7));
  color: var(--iv-white);
  font-size: var(--iv-text-2xs);
  font-weight: var(--iv-fw-semibold);
  padding: var(--iv-space-3) var(--iv-space-2) var(--iv-space-1);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
}

.op-detail__photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--iv-surface-2);
  color: var(--iv-text-tertiary);
  font-size: var(--iv-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
}

/* GPS */
.op-detail__gps {
  display: flex;
  align-items: center;
  gap: var(--iv-space-2);
  padding: var(--iv-space-3);
  background: var(--iv-surface-2);
  border-radius: var(--iv-radius-md);
  margin-top: var(--iv-space-3);
  border: 1px solid var(--iv-border);
}
.op-detail__gps-coords {
  font-family: var(--iv-font-mono);
  font-size: var(--iv-text-2xs);
  color: var(--iv-text-tertiary);
}

/* Incidents in detail */
.op-detail__incident {
  padding: var(--iv-space-3);
  background: var(--iv-status-incident-bg);
  border: 1px solid var(--iv-status-incident-border);
  border-radius: var(--iv-radius-md);
  margin-bottom: var(--iv-space-2);
}
.op-detail__incident--open { border-left: 3px solid var(--iv-status-incident-fg); }
.op-detail__incident-status {
  font-size: var(--iv-text-2xs);
  font-weight: var(--iv-fw-bold);
  text-transform: uppercase;
  color: var(--iv-status-incident-fg);
}
.op-detail__incident-time {
  font-size: var(--iv-text-2xs);
  color: var(--iv-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ─── Timeline ─── */

.op-timeline {
  padding-left: var(--iv-space-1);
}

.op-timeline__item {
  position: relative;
  padding-left: var(--iv-space-8);
  padding-bottom: var(--iv-space-5);
  min-height: 40px;
}
.op-timeline__item:last-child { padding-bottom: 0; }

.op-timeline__item::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: var(--iv-border);
}
.op-timeline__item:last-child::before { display: none; }

.op-timeline__item--active::before { background: var(--iv-cherry); }

.op-timeline__dot {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--iv-surface-0);
  border: 2px solid var(--iv-border);
  z-index: 1;
}
.op-timeline__item--active .op-timeline__dot {
  background: var(--iv-cherry);
  border-color: var(--iv-cherry);
  box-shadow: 0 0 0 3px rgba(234,23,68,0.15);
}

.op-timeline__avatar {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--iv-deep-blue-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--iv-fw-bold);
  color: var(--iv-deep-blue);
  z-index: 1;
  overflow: hidden;
}
.op-timeline__avatar img { width: 100%; height: 100%; object-fit: cover; }

.op-timeline__content { font-size: var(--iv-text-sm); }

.op-timeline__label {
  font-weight: var(--iv-fw-semibold);
  color: var(--iv-text-primary);
  margin-bottom: var(--iv-space-0-5);
}

.op-timeline__detail {
  font-size: var(--iv-text-xs);
  color: var(--iv-text-secondary);
}

.op-timeline__time {
  font-size: var(--iv-text-2xs);
  color: var(--iv-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.op-timeline__by {
  font-size: var(--iv-text-xs);
  color: var(--iv-text-tertiary);
}

/* ─── Detail Tabs ─── */

.op-detail-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--iv-border);
  margin-bottom: var(--iv-space-4);
  padding: 0;
}

.op-detail-tab {
  flex: 1;
  padding: var(--iv-space-2-5) var(--iv-space-2);
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  color: var(--iv-text-tertiary);
  text-align: center;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.op-detail-tab:hover { color: var(--iv-text-secondary); }

.op-detail-tab--active {
  color: var(--iv-cherry);
  border-bottom-color: var(--iv-cherry);
}

.op-detail-panel { display: none; }
.op-detail-panel--active { display: block; }

/* Resumen key-value rows */
.op-detail__group {
  margin-bottom: var(--iv-space-4);
}
.op-detail__group-title {
  font-size: var(--iv-text-2xs);
  font-weight: var(--iv-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  color: var(--iv-text-tertiary);
  margin-bottom: var(--iv-space-2);
}
.op-detail__kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--iv-space-1-5) 0;
  font-size: var(--iv-text-sm);
  border-bottom: 1px solid var(--iv-border);
}
.op-detail__kv:last-child { border-bottom: none; }
.op-detail__kv-label {
  color: var(--iv-text-tertiary);
  font-size: var(--iv-text-xs);
}
.op-detail__kv-value {
  font-weight: var(--iv-fw-semibold);
  color: var(--iv-text-primary);
  text-align: right;
}

/* Read-only badge */
.op-detail__readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--iv-space-1);
  font-size: var(--iv-text-2xs);
  font-weight: var(--iv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  color: var(--iv-text-tertiary);
  margin-left: var(--iv-space-2);
}

/* Evidence progressive disclosure */
.op-detail__evidence-future {
  margin-top: var(--iv-space-4);
  padding-top: var(--iv-space-3);
  border-top: 1px dashed var(--iv-border);
}
.op-detail__evidence-future-title {
  font-size: var(--iv-text-2xs);
  font-weight: var(--iv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  color: var(--iv-text-tertiary);
  margin-bottom: var(--iv-space-2);
}
.op-detail__evidence-future-item {
  display: flex;
  align-items: center;
  gap: var(--iv-space-2);
  padding: var(--iv-space-2) var(--iv-space-3);
  font-size: var(--iv-text-xs);
  color: var(--iv-text-tertiary);
  background: var(--iv-surface-2);
  border-radius: var(--iv-radius-md);
  margin-bottom: var(--iv-space-1-5);
  border: 1px dashed var(--iv-border);
}

/* ─── Photo Viewer ─── */

.op-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(3,25,39,0.95);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.op-photo-viewer--active {
  opacity: 1;
  pointer-events: auto;
}
.op-photo-viewer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--iv-space-3) var(--iv-space-4);
  flex-shrink: 0;
}
.op-photo-viewer__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--iv-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.op-photo-viewer__close:active { background: rgba(255,255,255,0.2); }
.op-photo-viewer__counter {
  font-size: var(--iv-text-xs);
  color: rgba(255,255,255,0.6);
  font-variant-numeric: tabular-nums;
}
.op-photo-viewer__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--iv-space-2);
  overflow: hidden;
  position: relative;
}
.op-photo-viewer__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--iv-radius-md);
}
.op-photo-viewer__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--iv-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.op-photo-viewer__nav:active { background: rgba(255,255,255,0.2); }
.op-photo-viewer__nav--prev { left: var(--iv-space-3); }
.op-photo-viewer__nav--next { right: var(--iv-space-3); }
.op-photo-viewer__meta {
  flex-shrink: 0;
  padding: var(--iv-space-3) var(--iv-space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--iv-space-3) var(--iv-space-6);
}
.op-photo-viewer__meta-item {
  font-size: var(--iv-text-xs);
}
.op-photo-viewer__meta-label {
  color: rgba(255,255,255,0.4);
  font-size: var(--iv-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
}
.op-photo-viewer__meta-value {
  color: var(--iv-white);
  font-weight: var(--iv-fw-semibold);
}

/* Clickable photo thumbs */
.op-detail__photo-item--clickable { cursor: pointer; }
.op-detail__photo-item--clickable:active { opacity: 0.8; }

/* ─── Profile ─── */

.op-profile { padding-top: var(--iv-space-2); }

.op-profile__photo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--iv-space-6);
}

.op-profile__photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--iv-cherry);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: var(--iv-fw-bold);
  color: var(--iv-white);
  margin-bottom: var(--iv-space-3);
  overflow: hidden;
  border: 3px solid var(--iv-surface-0);
  box-shadow: var(--iv-shadow-md);
}
.op-profile__photo img { width: 100%; height: 100%; object-fit: cover; }

.op-profile__photo-btn {
  font-size: var(--iv-text-xs);
  color: var(--iv-cherry);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: var(--iv-fw-semibold);
  font-family: inherit;
  padding: var(--iv-space-2) var(--iv-space-4);
  border-radius: var(--iv-radius-full);
  border: 1px solid var(--iv-cherry-100);
  transition: background var(--iv-transition-fast);
}
.op-profile__photo-btn:active { background: var(--iv-cherry-50); }

.op-profile__section { margin-bottom: var(--iv-space-5); }

.op-profile__section-title {
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  color: var(--iv-text-secondary);
  margin-bottom: var(--iv-space-3);
  padding-bottom: var(--iv-space-2);
  border-bottom: 1px solid var(--iv-border);
}

.op-profile__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--iv-space-2-5) 0;
  font-size: var(--iv-text-sm);
}

.op-profile__row-label {
  color: var(--iv-text-secondary);
  font-weight: var(--iv-fw-medium);
}
.op-profile__row-value {
  color: var(--iv-text-primary);
  font-weight: var(--iv-fw-semibold);
  text-align: right;
}
.op-profile__row-value--editable {
  color: var(--iv-cherry);
  cursor: pointer;
}

.op-profile__stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--iv-space-2);
}

.op-profile__stat {
  text-align: center;
  padding: var(--iv-space-4) var(--iv-space-2);
  background: var(--iv-surface-2);
  border-radius: var(--iv-radius-md);
  border: 1px solid var(--iv-border);
}
.op-profile__stat-value {
  font-size: var(--iv-text-xl);
  font-weight: var(--iv-fw-bold);
  color: var(--iv-text-primary);
  font-variant-numeric: tabular-nums;
}
.op-profile__stat-label {
  font-size: var(--iv-text-2xs);
  color: var(--iv-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
}

/* ─── Activity ─── */

.op-activity { padding-top: var(--iv-space-2); }

.op-activity__header {
  text-align: center;
  margin-bottom: var(--iv-space-6);
}
.op-activity__name {
  font-size: var(--iv-text-lg);
  font-weight: var(--iv-fw-bold);
  color: var(--iv-text-primary);
}
.op-activity__date {
  font-size: var(--iv-text-sm);
  color: var(--iv-text-secondary);
}

/* KPI Hero pattern */
.op-activity__hero {
  text-align: center;
  padding: var(--iv-space-6) var(--iv-space-4);
  background: var(--iv-surface-2);
  border-radius: var(--iv-radius-xl);
  border: 1px solid var(--iv-border);
  margin-bottom: var(--iv-space-5);
}
.op-activity__hero-number {
  font-size: var(--iv-text-4xl);
  font-weight: var(--iv-fw-bold);
  color: var(--iv-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: var(--iv-space-1);
}
.op-activity__hero-label {
  font-size: var(--iv-text-sm);
  color: var(--iv-text-secondary);
}

.op-activity__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--iv-space-2);
  margin-bottom: var(--iv-space-5);
}

.op-activity__stat {
  text-align: center;
  padding: var(--iv-space-4) var(--iv-space-2);
  background: var(--iv-surface-0);
  border-radius: var(--iv-radius-md);
  border: 1px solid var(--iv-border);
}
.op-activity__stat--highlight {
  background: var(--iv-status-ready-bg);
  border-color: var(--iv-status-ready-border);
}

.op-activity__stat-value {
  font-size: var(--iv-text-xl);
  font-weight: var(--iv-fw-bold);
  color: var(--iv-text-primary);
  font-variant-numeric: tabular-nums;
}
.op-activity__stat-label {
  font-size: var(--iv-text-2xs);
  color: var(--iv-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
}

.op-activity__payments-summary {
  background: var(--iv-surface-0);
  border-radius: var(--iv-radius-lg);
  padding: var(--iv-space-5);
  border: 1px solid var(--iv-border);
}
.op-activity__payments-title {
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  color: var(--iv-text-secondary);
  margin-bottom: var(--iv-space-3);
}
.op-activity__payments-total {
  font-size: var(--iv-text-2xl);
  font-weight: var(--iv-fw-bold);
  color: var(--iv-text-primary);
  font-variant-numeric: tabular-nums;
}
.op-activity__payments-count {
  font-size: var(--iv-text-xs);
  color: var(--iv-text-tertiary);
}

/* ─── Shift (Mi turno) ─── */

.op-shift { padding-top: var(--iv-space-2); }

.op-shift__info-card {
  background: var(--iv-surface-0);
  border-radius: var(--iv-radius-lg);
  padding: var(--iv-space-5);
  margin-bottom: var(--iv-space-4);
  border: 1px solid var(--iv-border);
  box-shadow: var(--iv-shadow-sm);
}

.op-shift__info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--iv-space-2) 0;
  font-size: var(--iv-text-sm);
}
.op-shift__info-label {
  color: var(--iv-text-secondary);
  font-weight: var(--iv-fw-medium);
}
.op-shift__info-value {
  color: var(--iv-text-primary);
  font-weight: var(--iv-fw-semibold);
}
.op-shift__info-value--mono {
  font-family: var(--iv-font-mono);
  font-variant-numeric: tabular-nums;
}

.op-shift__participants { margin-bottom: var(--iv-space-4); }
.op-shift__participants-title {
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  color: var(--iv-text-secondary);
  margin-bottom: var(--iv-space-2);
}
.op-shift__participants-list {
  display: flex;
  gap: var(--iv-space-2);
  flex-wrap: wrap;
}
.op-shift__participant-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--iv-space-1-5);
  padding: var(--iv-space-2) var(--iv-space-3);
  background: var(--iv-surface-2);
  border-radius: var(--iv-radius-full);
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-medium);
  color: var(--iv-text-primary);
  border: 1px solid var(--iv-border);
}

.op-shift__section-title {
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  color: var(--iv-text-secondary);
  margin-bottom: var(--iv-space-3);
  padding-bottom: var(--iv-space-2);
  border-bottom: 1px solid var(--iv-border);
}

.op-shift__payments-card {
  background: var(--iv-surface-0);
  border-radius: var(--iv-radius-lg);
  padding: var(--iv-space-5);
  margin-bottom: var(--iv-space-4);
  border: 1px solid var(--iv-border);
}

.op-shift__payments-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--iv-space-4);
  padding-bottom: var(--iv-space-3);
  border-bottom: 1px solid var(--iv-border);
}
.op-shift__payments-total-label {
  font-size: var(--iv-text-sm);
  color: var(--iv-text-secondary);
  font-weight: var(--iv-fw-medium);
}
.op-shift__payments-total-amount {
  font-size: var(--iv-text-2xl);
  font-weight: var(--iv-fw-bold);
  color: var(--iv-text-primary);
  font-variant-numeric: tabular-nums;
}

.op-shift__method-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--iv-space-2) 0;
  font-size: var(--iv-text-sm);
}
.op-shift__method-name { color: var(--iv-text-primary); font-weight: var(--iv-fw-medium); }
.op-shift__method-ops {
  color: var(--iv-text-tertiary);
  font-size: var(--iv-text-xs);
}
.op-shift__method-amount {
  font-weight: var(--iv-fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--iv-text-primary);
}

.op-shift__actions { margin-top: var(--iv-space-4); }
.op-shift__close-btn {
  width: 100%;
  min-height: var(--iv-touch-comfortable);
}

/* ─── Cash Close (Cierre de caja) ─── */

.op-cashclose { padding-top: var(--iv-space-2); }

/* ── Section blocks ── */
.op-cashclose__section {
  background: var(--iv-surface-0);
  border-radius: var(--iv-radius-lg);
  padding: var(--iv-space-5);
  margin-bottom: var(--iv-space-4);
  border: 1px solid var(--iv-border);
  box-shadow: var(--iv-shadow-xs);
}
.op-cashclose__section-label {
  font-size: var(--iv-text-2xs);
  font-weight: var(--iv-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-wide);
  color: var(--iv-text-tertiary);
  margin-bottom: var(--iv-space-4);
}

/* ── Block 1: Hero + Metrics ── */
.op-cashclose__hero {
  text-align: center;
  padding: var(--iv-space-5) 0;
  margin-bottom: var(--iv-space-4);
  background: var(--iv-surface-dark-gradient);
  color: var(--iv-text-on-dark);
  border-radius: var(--iv-radius-lg);
}
.op-cashclose__hero-amount {
  font-size: var(--iv-text-4xl);
  font-weight: var(--iv-fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: var(--iv-space-1);
}
.op-cashclose__hero-sub {
  font-size: var(--iv-text-sm);
  opacity: 0.7;
}

.op-cashclose__metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--iv-space-3);
  margin-bottom: var(--iv-space-4);
}
.op-cashclose__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--iv-space-1);
  padding: var(--iv-space-3);
  background: var(--iv-surface-2);
  border-radius: var(--iv-radius-md);
}
.op-cashclose__metric-value {
  font-size: var(--iv-text-2xl);
  font-weight: var(--iv-fw-bold);
  color: var(--iv-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.op-cashclose__metric-label {
  font-size: var(--iv-text-2xs);
  color: var(--iv-text-tertiary);
  text-align: center;
}

.op-cashclose__shift-detail {
  display: flex;
  flex-direction: column;
  gap: var(--iv-space-2);
}
.op-cashclose__detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--iv-text-sm);
  color: var(--iv-text-secondary);
  padding: var(--iv-space-1) 0;
}
.op-cashclose__detail-row span:last-child {
  font-weight: var(--iv-fw-semibold);
  color: var(--iv-text-primary);
}

/* ── Block 2: Payment method table ── */
.op-cashclose__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.op-cashclose__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--iv-text-sm);
}
.op-cashclose__th {
  text-align: left;
  padding: var(--iv-space-2) var(--iv-space-3);
  font-size: var(--iv-text-2xs);
  font-weight: var(--iv-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-wide);
  color: var(--iv-text-tertiary);
  border-bottom: 2px solid var(--iv-border);
  white-space: nowrap;
}
.op-cashclose__th--right { text-align: right; }
.op-cashclose__td {
  padding: var(--iv-space-3);
  color: var(--iv-text-primary);
  border-bottom: 1px solid var(--iv-border);
  white-space: nowrap;
}
.op-cashclose__td--right { text-align: right; }
.op-cashclose__td--mono {
  font-variant-numeric: tabular-nums;
  font-weight: var(--iv-fw-semibold);
}
.op-cashclose__tr--total .op-cashclose__td {
  font-weight: var(--iv-fw-bold);
  border-bottom: none;
  border-top: 2px solid var(--iv-border);
  color: var(--iv-text-primary);
}

/* ── Block 3: Reconciliation (vertical stack) ── */
.op-cashclose__recon-stack {
  display: flex;
  flex-direction: column;
  gap: var(--iv-space-4);
  margin-bottom: var(--iv-space-4);
}
.op-cashclose__recon-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.op-cashclose__recon-row--input {
  flex-direction: column;
  align-items: stretch;
  gap: var(--iv-space-2);
}
.op-cashclose__recon-label {
  font-size: var(--iv-text-sm);
  font-weight: var(--iv-fw-medium);
  color: var(--iv-text-secondary);
}
.op-cashclose__recon-amount {
  font-size: var(--iv-text-xl);
  font-weight: var(--iv-fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--iv-text-primary);
}

/* Currency input */
.op-cashclose__currency-input {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--iv-border);
  border-radius: var(--iv-radius-md);
  background: var(--iv-surface-0);
  min-height: var(--iv-touch-min);
  overflow: hidden;
  transition: border-color var(--iv-transition-fast), box-shadow var(--iv-transition-fast);
}
.op-cashclose__currency-input--lg {
  min-height: 56px;
}
.op-cashclose__currency-input:focus-within {
  border-color: var(--iv-cherry);
  box-shadow: var(--iv-focus-ring);
}
.op-cashclose__currency-prefix {
  padding: 0 var(--iv-space-3);
  font-size: var(--iv-text-sm);
  font-weight: var(--iv-fw-semibold);
  color: var(--iv-text-tertiary);
  background: var(--iv-surface-2);
  align-self: stretch;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--iv-border);
  user-select: none;
}
.op-cashclose__currency-field {
  flex: 1;
  border: none;
  outline: none;
  padding: var(--iv-space-2) var(--iv-space-3);
  font-family: var(--iv-font-mono);
  font-size: var(--iv-text-base);
  font-weight: var(--iv-fw-semibold);
  font-variant-numeric: tabular-nums;
  background: transparent;
  text-align: right;
  min-width: 0;
}
.op-cashclose__currency-field--lg {
  font-size: var(--iv-text-xl);
  padding: var(--iv-space-3) var(--iv-space-4);
}

/* Difference status */
.op-cashclose__recon-diff {
  font-weight: var(--iv-fw-bold);
  font-variant-numeric: tabular-nums;
}

/* ── Block 4: Pre-close summary ── */
.op-cashclose__preclose-rows {
  display: flex;
  flex-direction: column;
  gap: var(--iv-space-1);
  margin-bottom: var(--iv-space-5);
}
.op-cashclose__preclose-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--iv-space-2) 0;
  font-size: var(--iv-text-sm);
  color: var(--iv-text-secondary);
  border-bottom: 1px solid var(--iv-border);
}
.op-cashclose__preclose-row:last-child { border-bottom: none; }
.op-cashclose__preclose-val {
  font-weight: var(--iv-fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--iv-text-primary);
}
.op-cashclose__preclose-row--diff .op-cashclose__preclose-val {
  font-weight: var(--iv-fw-bold);
}

.op-cashclose__recon-status {
  display: flex;
  align-items: center;
  gap: var(--iv-space-2);
  padding: var(--iv-space-2-5) var(--iv-space-3);
  border-radius: var(--iv-radius-md);
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-semibold);
  margin-bottom: var(--iv-space-3);
}
.op-cashclose__recon-status--ok {
  background: var(--iv-success-50, #ecfdf5);
  color: var(--iv-success-700, #047857);
  border: 1px solid var(--iv-success-200, #a7f3d0);
}
.op-cashclose__recon-status--surplus {
  background: var(--iv-amber-50, #fffbeb);
  color: var(--iv-amber-700, #b45309);
  border: 1px solid var(--iv-amber-200, #fde68a);
}
.op-cashclose__recon-status--deficit {
  background: var(--iv-cherry-50);
  color: var(--iv-cherry);
  border: 1px solid var(--iv-cherry-100, #fecaca);
}

/* ── Textarea field component ── */
.op-field {
  display: flex;
  flex-direction: column;
  gap: var(--iv-space-1);
}
.op-field__label {
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-semibold);
  color: var(--iv-text-primary);
}
.op-field__hint {
  font-size: var(--iv-text-2xs);
  color: var(--iv-text-tertiary);
  line-height: var(--iv-leading-snug);
}
.op-field__hint--required {
  color: var(--iv-cherry);
  font-weight: var(--iv-fw-medium);
}
.op-field__textarea {
  width: 100%;
  min-height: 88px;
  padding: var(--iv-space-3);
  border: 1.5px solid var(--iv-border);
  border-radius: var(--iv-radius-md);
  font-family: var(--iv-font);
  font-size: var(--iv-text-sm);
  color: var(--iv-text-primary);
  background: var(--iv-surface-0);
  resize: vertical;
  line-height: var(--iv-leading-normal);
  transition: border-color var(--iv-transition-fast), box-shadow var(--iv-transition-fast);
}
.op-field__textarea::placeholder {
  color: var(--iv-text-tertiary);
  font-style: normal;
}
.op-field__textarea:hover {
  border-color: var(--iv-border-strong);
}
.op-field__textarea:focus {
  outline: none;
  border-color: var(--iv-cherry);
  box-shadow: var(--iv-focus-ring);
}
.op-field__textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--iv-surface-2);
}
.op-field__textarea--error {
  border-color: var(--iv-cherry);
}
.op-field__counter {
  font-size: var(--iv-text-2xs);
  color: var(--iv-text-tertiary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Submit ── */
.op-cashclose__submit-btn {
  margin-top: var(--iv-space-5);
  width: 100%;
  min-height: var(--iv-touch-comfortable);
}
.op-cashclose__submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.op-cashclose__no-data {
  text-align: center;
  padding: var(--iv-space-8) var(--iv-space-4);
  color: var(--iv-text-tertiary);
  font-size: var(--iv-text-sm);
}

/* ── Responsive ── */
@media (max-width: 599px) {
  .op-cashclose__section {
    padding: var(--iv-space-4);
  }
  .op-cashclose__hero {
    padding: var(--iv-space-4) 0;
  }
  .op-cashclose__hero-amount {
    font-size: var(--iv-text-2xl);
  }
  .op-cashclose__metrics-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--iv-space-2);
  }
  .op-cashclose__metric {
    padding: var(--iv-space-2);
  }
  .op-cashclose__metric-value {
    font-size: var(--iv-text-lg);
  }
  .op-cashclose__th,
  .op-cashclose__td {
    padding: var(--iv-space-2);
  }
}

/* ─── Payment step ─── */

.op-payment { padding-top: var(--iv-space-2); }

.op-payment__summary {
  background: var(--iv-surface-2);
  border-radius: var(--iv-radius-lg);
  padding: var(--iv-space-4);
  margin-bottom: var(--iv-space-5);
  border: 1px solid var(--iv-border);
}
.op-payment__vehicle {
  display: flex;
  align-items: center;
  gap: var(--iv-space-3);
  margin-bottom: var(--iv-space-3);
}
.op-payment__plate {
  font-family: var(--iv-font-mono);
  font-weight: var(--iv-fw-bold);
  font-size: var(--iv-text-lg);
  letter-spacing: var(--iv-tracking-plate);
}
.op-payment__model {
  font-size: var(--iv-text-sm);
  color: var(--iv-text-secondary);
}

.op-payment__tariff-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--iv-space-3) 0;
  border-top: 1px solid var(--iv-border);
}
.op-payment__tariff-label {
  font-size: var(--iv-text-sm);
  color: var(--iv-text-secondary);
}
.op-payment__tariff-amount {
  font-size: var(--iv-text-2xl);
  font-weight: var(--iv-fw-bold);
  color: var(--iv-text-primary);
  font-variant-numeric: tabular-nums;
}

.op-payment__methods-title {
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  color: var(--iv-text-secondary);
  margin-bottom: var(--iv-space-3);
}

.op-payment__methods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--iv-space-2-5);
  margin-bottom: var(--iv-space-5);
}

.op-payment__method-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--iv-space-4) var(--iv-space-3);
  background: var(--iv-surface-0);
  border: 2px solid var(--iv-border);
  border-radius: var(--iv-radius-lg);
  font-family: inherit;
  font-size: var(--iv-text-sm);
  font-weight: var(--iv-fw-semibold);
  color: var(--iv-text-primary);
  cursor: pointer;
  transition: all var(--iv-transition-fast);
  min-height: var(--iv-touch-comfortable);
}
.op-payment__method-btn:active { transform: scale(0.97); }
.op-payment__method-btn--selected {
  border-color: var(--iv-cherry);
  background: var(--iv-cherry-50);
  color: var(--iv-cherry);
  box-shadow: var(--iv-focus-ring);
}

.op-payment__courtesy-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--iv-space-4);
  background: var(--iv-surface-0);
  border: 2px solid var(--iv-border);
  border-radius: var(--iv-radius-lg);
  cursor: pointer;
  transition: all var(--iv-transition-fast);
  margin-bottom: var(--iv-space-5);
  min-height: var(--iv-touch-comfortable);
}
.op-payment__courtesy-toggle:active { transform: scale(0.98); }
.op-payment__courtesy-toggle--active {
  border-color: var(--iv-amber-500);
  background: var(--iv-amber-50);
}
.op-payment__courtesy-label {
  font-weight: var(--iv-fw-semibold);
  font-size: var(--iv-text-sm);
}
.op-payment__courtesy-hint {
  font-size: var(--iv-text-xs);
  color: var(--iv-text-tertiary);
}

.op-payment__confirm-btn {
  width: 100%;
  min-height: var(--iv-touch-comfortable);
}

/* ─── Search Results ─── */

.op-search-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--iv-space-3) var(--iv-space-4);
  border-bottom: 1px solid var(--iv-border);
  cursor: pointer;
  transition: background var(--iv-transition-fast);
  min-height: var(--iv-touch-min);
}
.op-search-result:active { background: var(--iv-surface-2); }

/* ─── PIN Input ─── */

.op-pin-digit {
  width: 48px;
  height: 56px;
  border: 2px solid var(--iv-border);
  border-radius: 12px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  font-family: var(--iv-font-mono, 'SF Mono', monospace);
  background: var(--iv-surface-1);
  color: var(--iv-text-primary);
  outline: none;
  transition: border-color var(--iv-transition-fast);
}
.op-pin-digit:focus {
  border-color: var(--iv-ipark-red);
  box-shadow: 0 0 0 3px rgba(234, 23, 68, 0.12);
}

/* ─── Photo Evidence Comparison ─── */

.op-detail__section--evidence {
  border: 1px solid var(--iv-border);
  border-radius: 12px;
  padding: var(--iv-space-4);
  background: var(--iv-surface-1);
}

.op-detail__photo-group-label {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--iv-text-secondary);
  margin-bottom: 8px;
}

.op-detail__photo-meta {
  font-size: 10px;
  color: var(--iv-text-tertiary);
  margin-top: 2px;
}

.op-detail__photo-compare {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--iv-border);
}

.op-detail__photo-compare-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--iv-text-primary);
  margin-bottom: 12px;
}

.op-detail__photo-compare-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.op-detail__compare-pair {
  border: 1px solid var(--iv-border);
  border-radius: 10px;
  padding: 10px;
  background: var(--iv-bg-primary);
}

.op-detail__compare-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--iv-text-secondary);
  margin-bottom: 8px;
  text-align: center;
}

.op-detail__compare-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.op-detail__compare-cell {
  flex: 1;
  text-align: center;
}
.op-detail__compare-cell img {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.op-detail__compare-arrow {
  flex-shrink: 0;
  color: var(--iv-text-tertiary);
}

.op-detail__compare-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 4px;
}
.op-detail__compare-tag--entry {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}
.op-detail__compare-tag--exit {
  background: rgba(22, 163, 106, 0.1);
  color: #16a34a;
}

/* ─── QA Dev Buttons ─── */

.op-qa-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ─── Inactivity warning ─── */

.op-inactivity {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
.op-inactivity--visible {
  transform: translateY(0);
}
.op-inactivity__content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #FEF3C7;
  border-bottom: 2px solid #F59E0B;
}
.op-inactivity__icon {
  color: #D97706;
  flex-shrink: 0;
}
.op-inactivity__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: #92400E;
}
.op-inactivity__text strong {
  font-weight: 600;
  font-size: 14px;
}
.op-inactivity__btn {
  flex-shrink: 0;
  padding: 8px 16px !important;
  font-size: 13px !important;
}

/* ─── QR Scanner ─── */

.op-btn--accent {
  background: var(--iv-deep-blue);
  color: var(--iv-white);
  border: none;
}
.op-btn--accent:active { background: #052a42; }

.qr-scanner {
  display: flex;
  flex-direction: column;
  gap: var(--iv-space-4);
}

.qr-scanner__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #111;
  border-radius: var(--iv-radius-lg);
  overflow: hidden;
}

.qr-scanner__viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qr-scanner__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.qr-scanner__corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: var(--iv-cherry);
  border-style: solid;
  border-width: 0;
}
.qr-scanner__corner--tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-radius: 4px 0 0 0; }
.qr-scanner__corner--tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-radius: 0 4px 0 0; }
.qr-scanner__corner--bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-radius: 0 0 0 4px; }
.qr-scanner__corner--br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-radius: 0 0 4px 0; }

.qr-scanner__hint {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255,255,255,0.85);
  font-size: var(--iv-text-sm);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  padding: 0 var(--iv-space-3);
}

.qr-scanner__actions {
  display: flex;
  flex-direction: column;
  gap: var(--iv-space-2);
}

.qr-scanner__manual {
  display: flex;
  flex-direction: column;
  gap: var(--iv-space-3);
  padding: var(--iv-space-3);
  background: var(--iv-surface-1);
  border-radius: var(--iv-radius-md);
  border: 1px solid var(--iv-border);
}

.qr-scanner__demo {
  padding: var(--iv-space-3);
  background: var(--iv-surface-1);
  border-radius: var(--iv-radius-md);
  border: 1px dashed var(--iv-border);
}

.qr-scanner__demo-label {
  font-size: var(--iv-text-xs);
  color: var(--iv-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--iv-space-2);
  font-weight: var(--iv-fw-semibold);
}

.qr-scanner__demo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iv-space-2);
}

.qr-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--iv-space-2);
  padding: var(--iv-space-5) var(--iv-space-4);
  border-radius: var(--iv-radius-lg);
  border: 1px solid var(--iv-border);
  background: var(--iv-surface-0);
}

.qr-result-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-bottom: var(--iv-space-1);
}

.qr-result-card--reservation .qr-result-card__icon { background: rgba(59,130,246,0.1); color: #3b82f6; }
.qr-result-card--ticket .qr-result-card__icon { background: rgba(16,185,129,0.1); color: var(--iv-success-600); }
.qr-result-card--delivery .qr-result-card__icon { background: rgba(16,185,129,0.15); color: var(--iv-success-600); }
.qr-result-card--error .qr-result-card__icon { background: rgba(234,23,68,0.1); color: var(--iv-cherry); }

.qr-result-card__title {
  font-size: var(--iv-text-lg);
  font-weight: var(--iv-fw-bold);
  color: var(--iv-text-primary);
}

.qr-result-card__sub {
  font-size: var(--iv-text-sm);
  color: var(--iv-text-secondary);
}

.qr-result-card__badge {
  display: inline-block;
  padding: var(--iv-space-1) var(--iv-space-3);
  border-radius: var(--iv-radius-full);
  font-size: var(--iv-text-xs);
  font-weight: var(--iv-fw-semibold);
  background: var(--iv-surface-2);
  color: var(--iv-text-secondary);
  margin: var(--iv-space-1) 0;
}

.qr-result-card .op-btn {
  margin-top: var(--iv-space-3);
}

/* ─── Login Screen ─── */

.op-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background: var(--iv-deep-blue);
  padding: var(--iv-space-4);
}

.op-login__container {
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.op-login__brand {
  margin-bottom: var(--iv-space-6);
}

.op-login__logo {
  width: 64px;
  height: 64px;
  margin-bottom: var(--iv-space-3);
}

.op-login__title {
  font-family: var(--iv-font);
  font-size: 1.5rem;
  font-weight: var(--iv-fw-bold);
  color: #fff;
  letter-spacing: -0.01em;
}

.op-login__subtitle {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--iv-space-1);
}

.op-login__form {
  display: flex;
  flex-direction: column;
  gap: var(--iv-space-3);
}

.op-login__field {
  text-align: left;
}

.op-login__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: var(--iv-fw-medium);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--iv-space-1);
}

.op-login__input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--iv-font);
  font-size: 0.9375rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--iv-radius-md);
  transition: border-color 0.2s, background 0.2s;
}

.op-login__input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.op-login__input:focus {
  outline: none;
  border-color: var(--iv-cherry);
  background: rgba(255, 255, 255, 0.12);
}

.op-login__error {
  display: none;
  font-size: 0.8125rem;
  color: var(--iv-cherry);
  text-align: left;
  padding: var(--iv-space-2);
  background: rgba(234, 23, 68, 0.1);
  border-radius: var(--iv-radius-sm);
}

.op-login__btn {
  width: 100%;
  padding: 14px;
  font-family: var(--iv-font);
  font-size: 0.9375rem;
  font-weight: var(--iv-fw-semibold);
  color: #fff;
  background: var(--iv-cherry);
  border: none;
  border-radius: var(--iv-radius-md);
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--iv-space-2);
  margin-top: var(--iv-space-2);
}

.op-login__btn:hover {
  background: #d01340;
}

.op-login__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.op-login__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: op-login-spin 0.6s linear infinite;
}

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

.op-login__footer {
  margin-top: var(--iv-space-6);
}

.op-login__powered {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   Dark mode — overrides for hardcoded colors
   Tokens from design-tokens.css handle ~95% automatically
   ═══════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .op-inactivity__content {
    background: rgba(245,158,11,0.12);
    border-bottom-color: rgba(245,158,11,0.35);
  }
  :root:not([data-theme="light"]) .op-inactivity__icon { color: #f59e0b; }
  :root:not([data-theme="light"]) .op-overlay { background: rgba(0,0,0,0.6); }
}
:root[data-theme="dark"] {
  color-scheme: dark;
}
:root[data-theme="dark"] .op-inactivity__content {
  background: rgba(245,158,11,0.12);
  border-bottom-color: rgba(245,158,11,0.35);
}
:root[data-theme="dark"] .op-inactivity__icon { color: #f59e0b; }
:root[data-theme="dark"] .op-overlay { background: rgba(0,0,0,0.6); }

/* ═══════════════════════════════════════════════════════════
   VERIFY — PIN / QR delivery verification
   ═══════════════════════════════════════════════════════════ */

.op-verify {
  padding: var(--iv-space-4) var(--iv-space-4) var(--iv-space-5);
}
.op-verify__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--iv-border);
  margin-bottom: var(--iv-space-4);
}
.op-verify__tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--iv-space-1-5);
  padding: var(--iv-space-2-5) var(--iv-space-3);
  min-height: 48px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--iv-text-sm);
  font-weight: var(--iv-fw-medium);
  color: var(--iv-text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--iv-transition-fast), border-color var(--iv-transition-fast);
}
.op-verify__tab:focus-visible {
  outline: 2px solid var(--iv-cherry);
  outline-offset: -2px;
}
.op-verify__tab--active {
  color: var(--iv-cherry);
  border-bottom-color: var(--iv-cherry);
  font-weight: var(--iv-fw-semibold);
}
.op-verify__panel {
  text-align: center;
}
.op-verify__icon {
  margin-bottom: var(--iv-space-3);
  color: var(--iv-text-tertiary);
}
.op-verify__heading {
  font-size: 15px;
  font-weight: var(--iv-fw-semibold);
  margin-bottom: 4px;
}
.op-verify__sub {
  font-size: var(--iv-text-sm);
  color: var(--iv-text-secondary);
  margin-bottom: var(--iv-space-4);
}
.op-verify__digits {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--iv-space-3);
}
.op-verify__error {
  color: #ef4444;
  font-size: var(--iv-text-sm);
  margin-bottom: var(--iv-space-3);
  min-height: 20px;
}
.op-verify__qr-viewport {
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  margin: 0 auto var(--iv-space-3);
  border-radius: var(--iv-radius-lg, 12px);
  overflow: hidden;
  background: #000;
}
.op-verify__qr-viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.op-verify__qr-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--iv-text-xs);
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 4px 12px;
  border-radius: 100px;
  white-space: nowrap;
}
.op-verify__qr-status {
  margin-bottom: var(--iv-space-2);
}
.op-verify__qr-validating {
  display: inline-flex;
  align-items: center;
  gap: var(--iv-space-2);
  font-size: var(--iv-text-sm);
  font-weight: var(--iv-fw-medium);
  color: var(--iv-status-ready-fg, #22c55e);
}
.op-verify__qr-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--iv-space-1);
  font-size: var(--iv-text-xs);
  color: var(--iv-text-tertiary);
  margin-top: var(--iv-space-3);
}

/* ═══════════════════════════════════════════════════════════
   COCKPIT PERSONALITY — layout shared by all themes
   Compact opnav, hidden greeting, bold plates, wider stripe.
   JS always sets data-theme so :root[data-theme] matches both.
   ═══════════════════════════════════════════════════════════ */

:root[data-theme] .op-home__greeting { display: none; }

:root[data-theme] .op-home {
  padding-top: var(--iv-space-4);
  padding-bottom: var(--iv-space-4);
}

:root[data-theme] .op-opnav { gap: var(--iv-space-2); }

:root[data-theme] .op-opnav__card {
  padding: var(--iv-space-3) var(--iv-space-2) var(--iv-space-2);
  min-height: unset;
}

:root[data-theme] .op-opnav__desc { display: none; }

:root[data-theme] .op-opnav__icon-wrap {
  width: 32px;
  height: 32px;
  margin-bottom: var(--iv-space-1);
}

:root[data-theme] .op-opnav__count {
  font-size: var(--iv-text-xl);
  margin-bottom: var(--iv-space-1);
}

:root[data-theme] .op-card__plate {
  font-size: 1.625rem;
  letter-spacing: 0.08em;
}

:root[data-theme] .op-card__top {
  margin-bottom: var(--iv-space-3);
}

:root[data-theme] .op-card::before { width: 5px; }

:root[data-theme] .op-card__time {
  font-size: var(--iv-text-sm);
  font-weight: var(--iv-fw-semibold);
  font-variant-numeric: tabular-nums;
}

:root[data-theme] .op-card__time--urgent {
  font-weight: var(--iv-fw-bold);
  animation: cockpit-pulse-text 2s ease-in-out infinite;
}

@keyframes cockpit-pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

:root[data-theme] .op-card__actions {
  margin-top: var(--iv-space-3);
  padding-top: var(--iv-space-3);
}

:root[data-theme] .op-pin-digit {
  width: 56px;
  height: 64px;
  font-size: 28px;
  border-radius: var(--iv-radius-lg);
}

@media (max-width: 430px) {
  :root[data-theme] .op-card__plate { font-size: 1.5rem; }
  :root[data-theme] .op-pin-digit { width: 52px; height: 60px; font-size: 26px; }
  :root[data-theme] .op-opnav__count { font-size: var(--iv-text-lg); }
}

@media (max-width: 390px) {
  :root[data-theme] .op-card__plate { font-size: 1.375rem; }
  :root[data-theme] .op-pin-digit { width: 48px; height: 56px; font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   DARK THEME — Operator cockpit (extended)
   Borders not shadows. NOW → ATTENTION → ACTION.
   ═══════════════════════════════════════════════════════════ */

:root[data-theme="dark"] .op-card {
  box-shadow: none;
  border: 1px solid var(--iv-border-strong);
}
:root[data-theme="dark"] .op-card:hover,
:root[data-theme="dark"] .op-card--urgent {
  box-shadow: none;
  border-color: var(--iv-gray-400);
}
:root[data-theme="dark"] .op-card--requested { border-color: var(--iv-status-exit-border); }
:root[data-theme="dark"] .op-card--preparing { border-color: var(--iv-status-preparing-border); }
:root[data-theme="dark"] .op-card--ready { border-color: var(--iv-status-ready-border); }
:root[data-theme="dark"] .op-card--incident { border-color: var(--iv-status-incident-border); }

:root[data-theme="dark"] .op-opnav__card { box-shadow: none; border-color: var(--iv-border-strong); }
:root[data-theme="dark"] .op-opnav__card:hover { box-shadow: none; border-color: var(--iv-gray-400); }

:root[data-theme="dark"] .op-context-bar { box-shadow: none; border-color: var(--iv-border-strong); }

:root[data-theme="dark"] .op-btn--primary { box-shadow: 0 0 0 1px rgba(234,23,68,0.3); }
:root[data-theme="dark"] .op-btn--success { box-shadow: 0 0 0 1px rgba(5,150,105,0.3); }
:root[data-theme="dark"] .op-btn--ghost { border-color: var(--iv-border-strong); }

:root[data-theme="dark"] .op-sheet {
  background: var(--iv-surface-0);
  border: 1px solid var(--iv-border-strong);
}

:root[data-theme="dark"] .op-confirm__box {
  background: var(--iv-surface-0);
  border: 1px solid var(--iv-border-strong);
  box-shadow: none;
}

:root[data-theme="dark"] .op-home {
  border-bottom: 1px solid var(--iv-border-strong);
}

:root[data-theme="dark"] .op-card__time--urgent { color: var(--iv-status-exit-fg); }

:root[data-theme="dark"] .op-card__actions { border-top: 1px solid var(--iv-border); }

:root[data-theme="dark"] .op-card__location-badge {
  background: var(--iv-surface-1);
  border-color: var(--iv-border-strong);
}

:root[data-theme="dark"] .op-section__header { border-bottom-color: var(--iv-border-strong); }

:root[data-theme="dark"] .op-pin-digit {
  background: var(--iv-surface-0);
  border: 2px solid var(--iv-border-strong);
}
:root[data-theme="dark"] .op-pin-digit:focus {
  border-color: var(--iv-cherry);
  box-shadow: 0 0 0 4px rgba(234,23,68,0.15);
  background: var(--iv-surface-1);
}

:root[data-theme="dark"] .op-header { border-bottom: 1px solid var(--iv-border-strong); }
:root[data-theme="dark"] .op-header__persona { border-color: var(--iv-border-strong); }

:root[data-theme="dark"] .op-sticky-nav {
  background: var(--iv-surface-dark);
  border-bottom: 1px solid var(--iv-border-strong);
  box-shadow: none;
}

:root[data-theme="dark"] .op-bottom-bar {
  background: var(--iv-surface-dark);
  border-top: 1px solid var(--iv-border-strong);
  box-shadow: none;
}

:root[data-theme="dark"] .op-persona-menu {
  background: var(--iv-surface-0);
  border: 1px solid var(--iv-border-strong);
  box-shadow: none;
}

:root[data-theme="dark"] .op-detail__section { border-color: var(--iv-border-strong); }
:root[data-theme="dark"] .op-detail__kv-row { border-bottom-color: var(--iv-border); }

:root[data-theme="dark"] .op-detail__group {
  background: var(--iv-surface-0);
  border-radius: var(--iv-radius-md);
  padding: var(--iv-space-3);
  border: 1px solid var(--iv-border);
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME — Operator cockpit
   Shadows for depth. Same hierarchy: PLATE → STATUS → TIME → ACTION.
   ═══════════════════════════════════════════════════════════ */

:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="light"] .op-home {
  border-bottom: 1px solid var(--iv-border);
}

:root[data-theme="light"] .op-card__time--urgent { color: var(--iv-status-exit-fg); }

:root[data-theme="light"] .op-card__actions {
  border-top: 1px solid var(--iv-gray-200);
}

:root[data-theme="light"] .op-card__location-badge {
  background: var(--iv-gray-50);
  border-color: var(--iv-border);
}

:root[data-theme="light"] .op-pin-digit {
  background: var(--iv-white);
  border: 2px solid var(--iv-border-strong);
}
:root[data-theme="light"] .op-pin-digit:focus {
  border-color: var(--iv-cherry);
  box-shadow: 0 0 0 4px rgba(234,23,68,0.12);
  background: var(--iv-surface-1);
}

:root[data-theme="light"] .op-header {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

:root[data-theme="light"] .op-overlay { background: rgba(3,25,39,0.45); }

:root[data-theme="light"] .op-sheet {
  box-shadow: var(--iv-shadow-xl);
}

:root[data-theme="light"] .op-confirm__box {
  box-shadow: var(--iv-shadow-xl);
}

:root[data-theme="light"] .op-detail__group {
  background: var(--iv-surface-1);
  border-radius: var(--iv-radius-md);
  padding: var(--iv-space-3);
  border: 1px solid var(--iv-border);
}

/* ── Theme selector ── */

.op-theme-selector {
  display: flex;
  gap: var(--iv-space-1);
  padding: var(--iv-space-1-5) var(--iv-space-3);
}

.op-theme-selector__label {
  font-size: var(--iv-text-2xs, 10px);
  font-weight: var(--iv-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--iv-tracking-caps);
  color: var(--iv-text-tertiary);
  padding: var(--iv-space-1) var(--iv-space-3) var(--iv-space-2);
}

.op-theme-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--iv-space-1);
  padding: var(--iv-space-2) var(--iv-space-2);
  border: 1px solid var(--iv-border);
  border-radius: var(--iv-radius-md);
  background: none;
  color: var(--iv-text-secondary);
  font-family: inherit;
  font-size: var(--iv-text-2xs, 10px);
  font-weight: var(--iv-fw-medium);
  letter-spacing: var(--iv-tracking-wide);
  cursor: pointer;
  transition: background var(--iv-transition-fast), border-color var(--iv-transition-fast), color var(--iv-transition-fast);
  min-height: 36px;
}

.op-theme-btn:hover { background: var(--iv-surface-2); }

.op-theme-btn--active {
  background: var(--iv-cherry);
  border-color: var(--iv-cherry);
  color: var(--iv-white);
}
.op-theme-btn--active:hover { background: var(--iv-cherry-600); }

/* ─── Responsive (grid breakpoints defined above in Cards Grid section) ─── */