/*
 * OnlyDrive Design System 2026 — Shared components
 * -------------------------------------------------
 * Component contract:
 * .od-button[--primary|--ghost|--danger], .od-card, .od-badge,
 * .od-toolbar, .od-table, .od-modal, .od-drawer, .od-empty, .od-skeleton.
 * Legacy aliases are intentionally covered while pages migrate incrementally.
 */

/* Buttons */
.od-design-system :is(.od-button, .btn, .button, .osButton, .iconAction, button.cx-text-action) {
  position: relative;
  display: inline-flex;
  min-height: var(--od-control-md);
  align-items: center;
  justify-content: center;
  gap: var(--od-space-2);
  padding: 0 var(--od-space-4);
  border: 1px solid var(--od-border-default);
  border-radius: var(--od-radius-md);
  outline: 0;
  background: var(--od-surface-2);
  box-shadow: none;
  color: var(--od-text-secondary);
  font-size: var(--od-text-sm);
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--od-duration-fast) ease, border-color var(--od-duration-fast) ease,
    background var(--od-duration-fast) ease, transform var(--od-duration-fast) var(--od-ease);
}

.od-design-system :is(.od-button, .btn, .button, .osButton, .iconAction):hover:not(:disabled) {
  border-color: var(--od-border-strong);
  background: var(--od-surface-hover);
  color: var(--od-text-primary);
  transform: translateY(-1px);
}

.od-design-system :is(.od-button, .btn, .button, .osButton, .iconAction):focus-visible {
  border-color: var(--od-accent);
  box-shadow: var(--od-focus-ring);
}

.od-design-system :is(.od-button, .btn, .button, .osButton):is(.primary, .btn-primary, .osButton--primary, .od-button--primary),
.od-design-system .btn-green {
  border-color: transparent;
  background: var(--od-accent);
  color: var(--od-text-inverse);
}

.od-design-system :is(.od-button, .btn, .button, .osButton):is(.primary, .btn-primary, .osButton--primary, .od-button--primary):hover:not(:disabled),
.od-design-system .btn-green:hover:not(:disabled) {
  border-color: transparent;
  background: var(--od-accent-hover);
  color: var(--od-text-inverse);
}

.od-design-system :is(.od-button, .btn, .button):is(.danger, .od-button--danger) {
  border-color: rgba(255, 137, 125, 0.28);
  background: var(--od-danger-soft);
  color: #ffc2bb;
}

.od-design-system :is(.od-button, .btn, .button):is(.ghost, .od-button--ghost, .cx-text-action) {
  border-color: transparent;
  background: transparent;
  color: var(--od-text-secondary);
}

.od-design-system :is(.od-button, .btn, .button):is(.small, .od-button--small) {
  min-height: var(--od-control-sm);
  padding-inline: var(--od-space-3);
  font-size: var(--od-text-xs);
}

.od-design-system :is(button, .btn, .button)[disabled],
.od-design-system [aria-disabled="true"] { opacity: 0.46; cursor: not-allowed; transform: none; }

.od-icon-button {
  width: var(--od-control-md);
  padding: 0 !important;
  flex: 0 0 var(--od-control-md);
}

.od-icon,
.od-nav-icon { width: 1.125rem; height: 1.125rem; flex: 0 0 1.125rem; stroke-width: 1.75; }

/* Form controls */
.od-design-system :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  min-height: var(--od-control-md);
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--od-border-default);
  border-radius: var(--od-radius-md);
  outline: 0;
  background: var(--od-bg-secondary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
  color: var(--od-text-primary);
  font-size: var(--od-text-sm);
  transition: border-color var(--od-duration-fast) ease, box-shadow var(--od-duration-fast) ease,
    background var(--od-duration-fast) ease;
}

.od-design-system textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
.od-design-system select { padding-right: 2.25rem; color-scheme: dark; }
.od-design-system input::placeholder,
.od-design-system textarea::placeholder { color: var(--od-text-muted); }

.od-design-system :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover {
  border-color: var(--od-border-strong);
}

.od-design-system :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--od-accent);
  background: #09131a;
  box-shadow: var(--od-focus-ring);
}

.od-design-system :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--od-danger);
  box-shadow: 0 0 0 3px var(--od-danger-soft);
}

.od-design-system :is(input[type="checkbox"], input[type="radio"]) {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--od-accent);
}

.od-design-system label,
.od-field-label {
  color: var(--od-text-secondary);
  font-size: var(--od-text-xs);
  font-weight: 620;
}

.od-field { display: grid; gap: var(--od-space-2); }
.od-field-help { color: var(--od-text-muted); font-size: var(--od-text-2xs); }
.od-field-error { color: var(--od-danger); font-size: var(--od-text-2xs); }

.od-search {
  position: relative;
  display: flex;
  min-width: min(18rem, 100%);
  align-items: center;
}
.od-search > svg { position: absolute; left: var(--od-space-3); width: 1rem; height: 1rem; color: var(--od-text-muted); pointer-events: none; }
.od-search > input { padding-left: 2.25rem !important; }

.od-switch { display: inline-flex; align-items: center; gap: var(--od-space-2); cursor: pointer; }
.od-switch > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.od-switch__track {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  border: 1px solid var(--od-border-default);
  border-radius: var(--od-radius-pill);
  background: var(--od-surface-3);
  transition: background var(--od-duration-fast) ease, border-color var(--od-duration-fast) ease;
}
.od-switch__track::after {
  position: absolute;
  top: .175rem;
  left: .175rem;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--od-text-muted);
  content: "";
  transition: transform var(--od-duration-fast) var(--od-ease), background var(--od-duration-fast) ease;
}
.od-switch > input:checked + .od-switch__track { border-color: var(--od-accent-border); background: var(--od-accent-soft); }
.od-switch > input:checked + .od-switch__track::after { background: var(--od-accent); transform: translateX(1rem); }
.od-switch > input:focus-visible + .od-switch__track { box-shadow: var(--od-focus-ring); }

/* Surfaces */
.od-design-system :is(.od-card, .card, .panel, .section-card, .customer-quick-card, .hero-stat, .section) {
  border-color: var(--od-border-subtle);
}

.od-design-system :is(.od-card, .card, .panel, .customer-quick-card) {
  border: 1px solid var(--od-border-subtle);
  border-radius: var(--od-radius-lg);
  background: var(--od-surface-1);
  box-shadow: none;
}

.od-design-system :is(.card-head, .panel-head, .cx-panel-heading, .od-card__header) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--od-space-4);
}

.od-design-system :is(.card-title, .panel h2, .od-card__title) {
  color: var(--od-text-primary);
  font-size: var(--od-text-lg);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.od-design-system :is(.card-sub, .admin-user, .mini, .sub, .hint, small, .od-card__description) {
  color: var(--od-text-muted);
  font-size: var(--od-text-xs);
  line-height: 1.5;
}

/* KPI */
.od-design-system :is(.kpis, .od-kpi-grid) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--od-space-3);
}

.od-design-system :is(.kpi, .od-kpi) {
  position: relative;
  min-width: 0;
  padding: var(--od-space-5);
  overflow: hidden;
  border: 1px solid var(--od-border-subtle);
  border-radius: var(--od-radius-lg);
  background: linear-gradient(145deg, var(--od-surface-2), var(--od-surface-1));
  box-shadow: none;
}

.od-design-system :is(.kpi, .od-kpi)::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--od-border-strong);
  content: "";
}

.od-design-system :is(.kpi, .od-kpi):has(.accent-green, .ok)::before,
.od-design-system .kpi.accent-green::before { background: var(--od-success); }
.od-design-system .kpi.accent-amber::before { background: var(--od-warning); }
.od-design-system .kpi.accent-red::before { background: var(--od-danger); }

.od-design-system :is(.kpi .label, .kpi .k, .kpi span:first-child, .od-kpi__label) {
  color: var(--od-text-muted);
  font-size: var(--od-text-xs);
  font-weight: 560;
  letter-spacing: 0;
  text-transform: none;
}

.od-design-system :is(.kpi .value, .kpi .v, .kpi > strong, .od-kpi__value) {
  display: block;
  margin-top: var(--od-space-3);
  color: var(--od-text-primary);
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  letter-spacing: -0.045em;
  line-height: 1;
}

/* Badges and chips */
.od-design-system :is(.od-badge, .badge, .status, .pill, [class*="StatusBadge"], [class*="statusBadge"]) {
  display: inline-flex;
  min-height: 1.625rem;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--od-border-default);
  border-radius: var(--od-radius-pill);
  background: rgba(255, 255, 255, 0.025);
  color: var(--od-text-secondary);
  font-size: var(--od-text-2xs);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

.od-design-system :is(.od-badge, .badge, .status, .pill)::before {
  width: 0.35rem;
  height: 0.35rem;
  flex: 0 0 0.35rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0.75;
}

.od-design-system :is(.badge.ok, .status.ok, .od-badge--success, .badge[class*="success" i], .status[class*="success" i], .badge[class*="completed" i], .status[class*="completed" i], .badge[class*="active" i], .status[class*="active" i]) {
  border-color: rgba(101, 214, 166, 0.25);
  background: var(--od-success-soft);
  color: var(--od-success);
}
.od-design-system :is(.badge.warn, .od-badge--warning, .badge[class*="warning" i], .status[class*="warning" i], .badge[class*="pending" i], .status[class*="pending" i]) {
  border-color: rgba(233, 187, 105, 0.25);
  background: var(--od-warning-soft);
  color: var(--od-warning);
}
.od-design-system :is(.badge.danger, .od-badge--danger, .badge[class*="danger" i], .status[class*="danger" i], .badge[class*="failed" i], .status[class*="failed" i], .badge[class*="rejected" i], .status[class*="rejected" i]) {
  border-color: rgba(255, 137, 125, 0.25);
  background: var(--od-danger-soft);
  color: var(--od-danger);
}
.od-design-system :is(.od-badge--info, .badge[class*="progress" i], .status[class*="progress" i], .badge[class*="assigned" i], .status[class*="assigned" i]) {
  border-color: rgba(131, 183, 255, 0.25);
  background: var(--od-info-soft);
  color: var(--od-info);
}

/* Toolbars and filters */
.od-design-system :is(.od-toolbar, .filters, .toolbar, .filterbar, .od-comm-filters) {
  display: flex;
  align-items: end;
  gap: var(--od-space-2);
  flex-wrap: wrap;
}

.od-design-system :is(.filters, .od-toolbar) > :is(input, select) { width: auto; min-width: 10rem; flex: 1 1 10rem; }
.od-design-system :is(.filters, .od-toolbar) > input:first-child { min-width: min(18rem, 100%); flex-grow: 2; }

/* Tables */
.od-design-system :is(.table-wrap, .od-table-wrap, .od-comm-tableWrap) {
  position: relative;
  overflow: auto;
  border: 1px solid var(--od-border-subtle);
  border-radius: var(--od-radius-md);
  background: var(--od-bg-secondary);
  scrollbar-color: var(--od-border-strong) transparent;
}

.od-design-system table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--od-text-secondary); }
.od-design-system th,
.od-design-system td {
  height: 3.25rem;
  padding: 0.7rem 0.875rem;
  border: 0;
  border-bottom: 1px solid var(--od-border-subtle);
  text-align: left;
  font-size: var(--od-text-sm);
  vertical-align: middle;
}
.od-design-system th {
  position: sticky;
  z-index: 2;
  top: 0;
  background: #0b141b;
  color: var(--od-text-muted);
  font-size: var(--od-text-2xs);
  font-weight: 650;
  letter-spacing: 0.025em;
  text-transform: none;
  white-space: nowrap;
}
.od-design-system tbody tr { transition: background var(--od-duration-fast) ease; }
.od-design-system tbody tr:hover { background: rgba(98, 217, 232, 0.035); }
.od-design-system tbody tr[aria-selected="true"],
.od-design-system tbody tr.selected { background: var(--od-accent-soft); }
.od-design-system tbody tr:last-child td { border-bottom: 0; }
.od-design-system td strong { color: var(--od-text-primary); font-weight: 620; }
.od-design-system td:has([class*="amount" i]),
.od-design-system td.amount { font-variant-numeric: tabular-nums; text-align: right; }

/* Pagination */
.od-design-system :is(.pagination, .od-pagination) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--od-space-3);
  margin-top: var(--od-space-4);
  color: var(--od-text-muted);
  font-size: var(--od-text-xs);
}

.od-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -.15em;
  animation: od-spin .7s linear infinite;
}
@keyframes od-spin { to { transform: rotate(360deg); } }

/* Empty, loading and feedback */
.od-design-system :is(.empty, .od-empty) {
  display: grid;
  min-height: 7.5rem;
  place-items: center;
  padding: var(--od-space-8);
  color: var(--od-text-muted);
  font-size: var(--od-text-sm);
  line-height: 1.6;
  text-align: center;
}

.od-skeleton,
.od-design-system :is(.cx-skeleton, .osSkeleton) {
  position: relative;
  overflow: hidden;
  border-radius: var(--od-radius-md);
  background: var(--od-surface-2);
}
.od-skeleton::after,
.od-design-system :is(.cx-skeleton, .osSkeleton)::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent);
  content: "";
  transform: translateX(-100%);
  animation: od-shimmer 1.5s infinite;
}
@keyframes od-shimmer { to { transform: translateX(100%); } }

.od-design-system :is(.notice, .banner, .od-banner) {
  padding: var(--od-space-3) var(--od-space-4);
  border: 1px solid var(--od-border-default);
  border-radius: var(--od-radius-md);
  background: var(--od-surface-1);
  color: var(--od-text-secondary);
  font-size: var(--od-text-sm);
}

.od-design-system :is(.notice.error, .od-banner--error) { border-color: rgba(255,137,125,.28); background: var(--od-danger-soft); color: #ffc2bb; }
.od-design-system :is(.notice.ok, .notice.success, .od-banner--success) { border-color: rgba(101,214,166,.24); background: var(--od-success-soft); color: #a8efd0; }

/* Modal, drawer, toast */
.od-design-system :is(dialog, .modal, .drawer, .cx-order-drawer, .order-dock) {
  border-color: var(--od-border-default);
  background: var(--od-surface-overlay);
  color: var(--od-text-primary);
  box-shadow: var(--od-shadow-lg);
}
.od-design-system dialog { border: 1px solid var(--od-border-default); border-radius: var(--od-radius-xl); }
.od-design-system dialog::backdrop,
.od-design-system .backdrop { background: rgba(1, 5, 8, 0.76); }

.od-design-system :is(.drawer-head, .modal-head, .od-drawer__header) {
  border-bottom: 1px solid var(--od-border-subtle);
  background: rgba(10, 17, 23, 0.94);
}
.od-modal__footer,
.od-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--od-space-2);
  padding: var(--od-space-4);
  border-top: 1px solid var(--od-border-subtle);
}

.od-menu { position: relative; }
.od-menu__surface {
  position: absolute;
  z-index: var(--od-z-dropdown);
  top: calc(100% + var(--od-space-2));
  right: 0;
  display: grid;
  min-width: 12rem;
  padding: var(--od-space-1);
  border: 1px solid var(--od-border-default);
  border-radius: var(--od-radius-md);
  background: var(--od-surface-overlay);
  box-shadow: var(--od-shadow-md);
}
.od-menu__surface[hidden] { display: none; }
.od-menu__item { justify-content: flex-start !important; width: 100%; border-color: transparent !important; background: transparent !important; }

.od-tooltip { position: relative; }
.od-tooltip::after {
  position: absolute;
  z-index: var(--od-z-tooltip);
  top: calc(100% + var(--od-space-2));
  left: 50%;
  max-width: 15rem;
  padding: .4rem .55rem;
  border: 1px solid var(--od-border-default);
  border-radius: var(--od-radius-sm);
  background: var(--od-surface-overlay);
  color: var(--od-text-primary);
  content: attr(data-tooltip);
  font-size: var(--od-text-2xs);
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -.25rem);
  transition: opacity var(--od-duration-fast) ease, transform var(--od-duration-fast) ease;
  white-space: normal;
}
.od-tooltip:is(:hover, :focus-visible)::after { opacity: 1; transform: translate(-50%, 0); }

.od-design-system :is(.toast, .od-toast) {
  border: 1px solid var(--od-border-default);
  border-radius: var(--od-radius-md);
  background: var(--od-surface-3);
  box-shadow: var(--od-shadow-md);
  color: var(--od-text-primary);
}

[data-toast-host] {
  position: fixed;
  z-index: var(--od-z-toast);
  right: var(--od-space-5);
  bottom: var(--od-space-5);
  display: grid;
  width: min(26rem, calc(100vw - 2rem));
  gap: var(--od-space-2);
  pointer-events: none;
}
[data-toast-host] .toast { position: static; max-width: none; pointer-events: auto; }

/* Timeline, stepper and route identity */
.od-timeline,
.od-design-system .timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.od-design-system .timeline li,
.od-timeline__item { position: relative; padding: 0 var(--od-space-3) var(--od-space-5) 1.75rem; border: 0; }
.od-design-system .timeline li::before,
.od-timeline__item::before {
  position: absolute;
  top: 0.35rem;
  left: 0.2rem;
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid var(--od-surface-1);
  border-radius: 50%;
  background: var(--od-accent);
  box-shadow: 0 0 0 1px var(--od-accent-border);
  content: "";
}
.od-design-system .timeline li:not(:last-child)::after,
.od-timeline__item:not(:last-child)::after {
  position: absolute;
  top: 1rem;
  bottom: 0;
  left: 0.45rem;
  width: 1px;
  background: var(--od-border-default);
  content: "";
}

.od-route {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(3rem, 1fr) minmax(0, auto);
  align-items: center;
  gap: var(--od-space-3);
}
.od-route__line { position: relative; height: 1px; background: var(--od-border-strong); }
.od-route__line::before,
.od-route__line::after { position: absolute; top: 50%; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--od-accent); content: ""; transform: translateY(-50%); }
.od-route__line::before { left: 0; }
.od-route__line::after { right: 0; }
.od-route__meta { grid-column: 1 / -1; color: var(--od-text-muted); font-size: var(--od-text-xs); }

.od-stepper { display: grid; grid-template-columns: repeat(var(--od-step-count, 4), minmax(0, 1fr)); gap: var(--od-space-2); }
.od-stepper__step { position: relative; min-width: 0; color: var(--od-text-muted); font-size: var(--od-text-xs); }
.od-stepper__step::before { display: block; height: .2rem; margin-bottom: var(--od-space-2); border-radius: var(--od-radius-pill); background: var(--od-surface-3); content: ""; }
.od-stepper__step:is(.is-complete, .is-current)::before { background: var(--od-accent); }
.od-stepper__step.is-current { color: var(--od-text-primary); }

.od-kanban { display: grid; grid-auto-columns: minmax(17rem, 1fr); grid-auto-flow: column; gap: var(--od-space-3); overflow-x: auto; scroll-snap-type: x proximity; }
.od-kanban__column { min-width: 0; padding: var(--od-space-3); border: 1px solid var(--od-border-subtle); border-radius: var(--od-radius-lg); background: var(--od-bg-secondary); scroll-snap-align: start; }
.od-kanban__card { margin-top: var(--od-space-3); padding: var(--od-space-4); border: 1px solid var(--od-border-subtle); border-radius: var(--od-radius-md); background: var(--od-surface-1); }

.od-data-viz { min-width: 0; padding: var(--od-space-5); overflow: hidden; border: 1px solid var(--od-border-subtle); border-radius: var(--od-radius-lg); background: var(--od-surface-1); }
.od-data-viz__canvas { min-height: 14rem; color: var(--od-accent); }

.od-detail-tabs {
  position: sticky;
  z-index: 3;
  top: 4.5rem;
  display: flex;
  gap: var(--od-space-1);
  margin: 0 0 var(--od-space-4);
  padding: var(--od-space-1);
  overflow-x: auto;
  border: 1px solid var(--od-border-subtle);
  border-radius: var(--od-radius-md);
  background: rgba(8, 14, 20, 0.94);
}
.od-detail-tabs button { min-height: 2.25rem; padding-inline: var(--od-space-3); border-color: transparent; background: transparent; }
.od-detail-tabs button[aria-selected="true"] { background: var(--od-accent-soft); color: var(--od-accent); }
.od-detail-panel[hidden] { display: none !important; }