/* Reusable components. Button/LogoBadge/Chevrons come from a separate
   "OktaiLogisticsDesignSystem" artifact that isn't part of the Claude
   Design export (referenced as <x-import component-from-global-scope>,
   a black box outside the editor) -- reconstructed here from the one
   raw, un-componentized button instance the export happened to leave
   in the markup (the "+ Add company" CTA) plus the hint-size attributes
   on every other usage. Pixel-exact to the export's *pages*; this one
   sub-component is a best-effort match, not a lift. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 18px; border: none; border-radius: var(--radius-pill);
  background: var(--blue-500); box-shadow: var(--shadow-btn);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: #ffffff;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--blue-600); }
.btn:active { background: var(--blue-700); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--block { width: 100%; }
.btn--compact { height: 32px; padding: 0 14px; }
.btn--tall { height: 42px; }
.btn--secondary {
  background: var(--surface); box-shadow: none; border: 1px solid var(--line);
  color: var(--ink); text-transform: none; font-weight: 600; letter-spacing: normal;
}
.btn--secondary:hover { background: var(--surface-2); }
.btn--secondary:active { background: var(--surface-3); }
.btn--danger { background: #c0392b; box-shadow: 0 6px 16px rgba(192,57,43,0.28); }
.btn--danger:hover { background: #a5311f; }
.btn__arrow { display: inline-flex; }

.logo-badge {
  flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); background: var(--navy-800); overflow: hidden;
  color: #ffffff; font-family: var(--font-display); font-weight: 800;
}
.logo-badge--ring { box-shadow: 0 0 0 3px rgba(154,186,209,0.28); }
.logo-badge img { width: 100%; height: 100%; object-fit: cover; }
.logo-badge__fallback { line-height: 1; }
.logo-badge:has(img) .logo-badge__fallback { display: none; }

.popover {
  position: absolute; z-index: 40; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover); padding: 7px;
}

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}

.badge {
  display: inline-flex; align-items: center; padding: 3px 9px;
  border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600;
}

.eyebrow {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}