/*
 * Valere CRM components in plain CSS.
 *
 * Each block restates the Tailwind classes of one component of the app, named in its comment
 * (web/shared/components/*.tsx and web/packages/crm/src/**). Colors, fonts, radii and shadows
 * come from tokens.css; sizes are the component's Tailwind steps written in px.
 * Nothing here exists only on a design board: a component the app doesn't have isn't listed.
 * `.is-hover` and `.is-focus` freeze a state for the state rows on the pages.
 */

/* ── Icons: 16px-grid stroke icons (StatusIcon.tsx, AppShell.tsx) ── */

.icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--16 { width: 16px; height: 16px; }
.icon--18 { width: 18px; height: 18px; }
.icon--24 { width: 24px; height: 24px; }

/* ── Button (web/shared/components/Button/, Button.styles.ts) ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--size-control);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary {
  border-color: var(--color-primary-600);
  background: var(--color-primary-600);
  color: var(--color-white);
}

.btn--primary:hover,
.btn--primary.is-hover {
  border-color: var(--color-primary-700);
  background: var(--color-primary-700);
}

.btn--secondary {
  border-color: var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-gray-900);
  box-shadow: var(--shadow-card);
}

.btn--secondary:hover,
.btn--secondary.is-hover {
  background: var(--color-gray-50);
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary-600);
}

.btn--ghost:hover,
.btn--ghost.is-hover {
  background: var(--color-primary-100);
}

.btn--destructive {
  border-color: var(--color-crit-text);
  background: var(--color-crit-text);
  color: var(--color-white);
}

.btn--destructive:hover,
.btn--destructive.is-hover {
  filter: brightness(0.9);
}

.btn:disabled {
  border-color: var(--color-gray-200);
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  cursor: not-allowed;
  filter: none;
}

.btn.is-focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* fullWidth: the button fills its container */
.btn--full {
  width: 100%;
}

/* A disabled button says what is missing: the reason sits under it */
.btn-reason {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.btn-reason__text {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

/* ── Text field (TextField.tsx) ── */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--color-gray-700);
}

.field__control {
  position: relative;
  display: flex;
  align-items: center;
}

.input {
  width: 100%;
  height: var(--size-control);
  padding: 0 12px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-900);
  font-size: 14px;
}

.input::placeholder {
  color: var(--color-gray-500);
}

.input:focus,
.input.is-focus {
  border-color: var(--color-focus);
  outline: 3px solid var(--color-primary-300);
  outline-offset: 0;
}

.input--error,
.input--error:focus {
  border: 2px solid var(--color-crit-text);
}

.input--readonly,
.input--readonly:focus {
  border-color: var(--color-gray-200);
  background: var(--color-gray-50);
  color: var(--color-gray-700);
}

.input--password {
  padding-right: 64px;
}

.field__reveal {
  position: absolute;
  right: 4px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary-600);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.field__reveal:hover {
  background: var(--color-primary-100);
}

.field__hint {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

.field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-crit-text);
}

/* The lock line under a locked field, or beside a control a role can't use (LockedHint) */
.locked-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

/* ── Filter select (Select.tsx) ── */

.select {
  height: var(--size-control);
  min-width: 160px;
  padding: 0 12px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-900);
  font-size: 14px;
  cursor: pointer;
}

.select:disabled {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  cursor: not-allowed;
}

/* ── Labeled select and text area (lead-detail/fields.tsx): a .select or .textarea inside a .field ── */

.field .select {
  cursor: default;
}

.field .select-wrap {
  display: flex;
}

/* ── Dropdown: the app's own list in place of the system's (web/shared/components/Dropdown/) ──
   In the app the control is a button with a chevron and the list is a panel of the app's own.
   Here a .select-wrap holds a native select, and assets/showcase.js puts the same button and list
   in its place. The button is the same 36px control with the app's 16px stroke chevron, 12px in
   from the edge; the list is a white panel on the popover shadow. Without the script the native
   select shows, with the same chevron. */

.select-wrap {
  position: relative;
  display: inline-flex;
}

.select-wrap .select {
  width: 100%;
  padding-right: 40px;
  appearance: none;
  -webkit-appearance: none;
}

.select-wrap__chevron {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--color-gray-700);
  pointer-events: none;
  transition: transform 0.15s;
}

.select-wrap.is-open .select-wrap__chevron {
  transform: translateY(-50%) rotate(180deg);
}

.select:disabled + .select-wrap__chevron,
.select-wrap.is-disabled .select-wrap__chevron {
  color: var(--color-gray-500);
}

.select-wrap .dropdown__trigger {
  display: inline-flex;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.select-wrap .dropdown__trigger:disabled {
  cursor: not-allowed;
}

.select-wrap.is-open .dropdown__trigger {
  border-color: var(--color-focus);
}

.dropdown__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-popover);
}

.dropdown__menu[hidden] {
  display: none;
}

.dropdown__menu--up {
  top: auto;
  bottom: calc(100% + 4px);
}

.dropdown__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--color-gray-900);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
}

.dropdown__option.is-active {
  background: var(--color-gray-100);
}

.dropdown__option[aria-selected='true'] {
  color: var(--color-primary-700);
  font-weight: 600;
}

.dropdown__check {
  visibility: hidden;
  color: var(--color-primary-600);
  stroke-width: 2;
}

.dropdown__option[aria-selected='true'] .dropdown__check {
  visibility: visible;
}

/* ── Date picker: a proposed component, not in the app yet ──
   In the app a date is a TextField with type="date": the browser draws the calendar, in the
   browser's own language. Here a .datepicker holds that native input, and assets/showcase.js puts
   a button and a calendar in its place: the same 36px control, the calendar on the popover shadow,
   every word in English. Without the script the native control shows. */

.datepicker {
  position: relative;
}

.datepicker__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}

.datepicker__trigger .icon {
  color: var(--color-gray-700);
}

.datepicker__trigger.is-empty .datepicker__value {
  color: var(--color-gray-500);
}

.datepicker__trigger:disabled {
  border-color: var(--color-gray-200);
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  cursor: not-allowed;
}

.datepicker__trigger:disabled .icon {
  color: var(--color-gray-500);
}

.datepicker.is-open .datepicker__trigger {
  border-color: var(--color-focus);
}

.datepicker__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  padding: 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-popover);
}

.datepicker__panel[hidden] {
  display: none;
}

.datepicker__panel:focus {
  outline: none;
}

.datepicker__panel--up {
  top: auto;
  bottom: calc(100% + 4px);
}

/* The calendar shown in the page instead of over it */
.datepicker[data-inline] .datepicker__panel {
  position: static;
  width: max-content;
  margin-top: 4px;
  box-shadow: var(--shadow-card);
}

.datepicker[data-inline] {
  display: block;
}

.datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 0 8px 8px;
}

.datepicker__title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.datepicker__steps {
  display: flex;
  gap: 4px;
}

.datepicker__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-gray-700);
  cursor: pointer;
}

.datepicker__step:hover {
  background: var(--color-gray-100);
}

.datepicker__weekdays,
.datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 36px);
  gap: 2px;
}

.datepicker__weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  color: var(--color-gray-500);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-decoration: none;
}

.datepicker__day {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-gray-900);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.datepicker__day:hover {
  background: var(--color-gray-100);
}

.datepicker__day.is-outside {
  color: var(--color-gray-500);
}

.datepicker__day[aria-current='date'] {
  box-shadow: inset 0 0 0 1px var(--color-primary-600);
  color: var(--color-primary-700);
  font-weight: 600;
}

.datepicker__day[aria-pressed='true'] {
  background: var(--color-primary-600);
  box-shadow: none;
  color: var(--color-white);
  font-weight: 600;
}

.datepicker__day[aria-pressed='true']:hover {
  background: var(--color-primary-700);
}

.datepicker__day:disabled {
  background: transparent;
  box-shadow: none;
  color: var(--color-gray-300);
  cursor: not-allowed;
}

.datepicker__foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-gray-200);
}

.datepicker__action {
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-primary-600);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.datepicker__action:hover {
  background: var(--color-primary-100);
}

.datepicker__action:disabled {
  background: transparent;
  color: var(--color-gray-500);
  cursor: not-allowed;
}

.textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-900);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
}

/* ── Switch (opportunity-detail/LandTermsCard.tsx) ── */

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-gray-300);
  cursor: pointer;
  transition: background-color 0.15s;
}

.switch[aria-checked='true'] {
  background: var(--color-primary-600);
}

.switch__knob {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  /* Tailwind's default `shadow`, the one shadow in the app that is not a token */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  transform: translateX(2px);
  transition: transform 0.15s;
}

.switch[aria-checked='true'] .switch__knob {
  transform: translateX(22px);
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.switch-row__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.switch-state {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--color-gray-500);
}

.switch-state--on {
  color: var(--color-good-text);
}

/* ── Chips, tags, pills (web/shared/components/Chip/, Chip.styles.ts; StatusPill.tsx) ── */

.chip,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

/* After Apiko's design concept a chip is Medium; a status pill (StatusPill.tsx) stays Semibold */
.chip { font-weight: 500; }
.pill { font-weight: 600; }

/* A record's state (Chip kind="stage" | "dealType"): a hairline border a shade darker than the fill, and a dot in the
   text's colour. Inside a table cell the pill is plain, as in the concept's tables (Chip.styles.ts [td_&]). */
.chip--stage { border: 1px solid color-mix(in srgb, var(--color-primary-700) 15%, transparent); background: var(--color-primary-100); color: var(--color-primary-700); }
.chip--deal { border: 1px solid var(--color-gray-200); background: var(--color-gray-100); color: var(--color-gray-700); }

.chip--stage::before,
.chip--deal::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}

td .chip--stage,
td .chip--deal { border-width: 0; }

td .chip--stage::before,
td .chip--deal::before { display: none; }

/* An owning function (Chip kind="function"): a tinted label with 8 px corners. The colour modifiers also paint the
   avatars, so the shape is set on .chip only. */
.chip[class*='chip--fn-'] { border-radius: var(--radius-md); }

.chip--fn-backoffice { background: var(--color-fn-backoffice-tint); color: var(--color-fn-backoffice); }
.chip--fn-land { background: var(--color-fn-land-tint); color: var(--color-fn-land); }
.chip--fn-partnerships { background: var(--color-fn-partnerships-tint); color: var(--color-fn-partnerships); }
.chip--fn-construction { background: var(--color-fn-construction-tint); color: var(--color-fn-construction); }
.chip--fn-legal { background: var(--color-fn-legal-tint); color: var(--color-fn-legal); }

/* Any other neutral label (Chip kind="tag"): a plain gray pill, no border, no dot. This site's own status tags use it
   too. */
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.pill--good,
.health--good { background: var(--color-good-tint); color: var(--color-good-text); }
.pill--warn,
.health--warn { background: var(--color-warn-tint); color: var(--color-warn-text); }
.pill--crit,
.health--crit { background: var(--color-crit-tint); color: var(--color-crit-text); }

.pill__more {
  font-weight: 400;
}

/* ── Health score chip (HealthChip.tsx) ── */

/* The score (web/shared/components/HealthChip/, HealthChip.styles.ts): after Apiko's design concept a 24 px pill, the
   height of a chip, in its band's tint with a hairline a shade darker, Medium tabular figures */
.health {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.health--good { border-color: color-mix(in srgb, var(--color-good-text) 15%, transparent); }
.health--warn { border-color: color-mix(in srgb, var(--color-warn-text) 20%, transparent); }
.health--crit { border-color: color-mix(in srgb, var(--color-crit-text) 15%, transparent); }

button.health {
  cursor: pointer;
}

/* The quieter "i" of a score that opens its breakdown */
button.health .icon:last-of-type {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

button.health:hover {
  filter: brightness(0.95);
}

/* ── Health breakdown panel (DealHealth.tsx, HealthBreakdown) ── */

.breakdown {
  width: 384px;
  max-width: 100%;
  padding: 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  font-size: 14px;
  line-height: 20px;
}

.breakdown__title {
  font-weight: 600;
}

.breakdown__title span,
.breakdown__note {
  font-weight: 400;
  color: var(--color-gray-500);
}

.breakdown__list {
  margin-top: 12px;
}

.breakdown__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
}

.breakdown__row + .breakdown__row {
  border-top: 1px solid var(--color-gray-200);
}

.breakdown__name {
  font-weight: 600;
}

.breakdown__fact {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

.breakdown__points {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-gray-500);
}

.breakdown__points--off {
  color: var(--color-crit-text);
}

.breakdown__stalls {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-gray-200);
}

.breakdown__stalls ul {
  margin-top: 4px;
  padding-left: 20px;
  list-style: disc;
}

.breakdown__note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 16px;
}

/* ── Card (Card.tsx) ── */

.card {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid var(--color-gray-200);
}

.card__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.card__body {
  padding: 20px;
}

/* ── Stat tile (overview-parts.tsx, Tile) ── */

.tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

/* ── List table (LeadsOverview.tsx, overview-parts.tsx) ── */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.table-wrap--flush {
  margin: -20px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}

.table thead {
  background: var(--color-gray-50);
}

.table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--color-gray-500);
}

.table td {
  padding: 8px 16px;
  vertical-align: middle;
}

.table tbody tr {
  border-top: 1px solid var(--color-gray-200);
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table__sub {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

/* The one row a table shows while loading or when it has nothing (LeadsOverview.tsx) */
.table td.table__empty {
  padding: 40px 16px;
  text-align: center;
}

/* A record's name is the link to its one record (RecordLinks.tsx) */
.record-link {
  color: var(--color-primary-600);
  font-weight: 600;
}

.record-link:hover {
  color: var(--color-primary-700);
}

/* ── Pager (Pager.tsx) ── */

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  border-top: 1px solid var(--color-gray-200);
  font-size: 14px;
  color: var(--color-gray-500);
}

.pager__buttons {
  display: flex;
  gap: 8px;
}

/* ── Stage bar (lead-detail/StageBar.tsx) ── */

.stagebar {
  display: flex;
  gap: 6px;
}

/* A segment per stage, its name under it (lead-detail/StageBar.tsx, after Apiko's design concept) */
.stagebar__step {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.stagebar__seg {
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-gray-200);
}

.stagebar__step--done .stagebar__seg {
  background: var(--color-primary-600);
}

/* The current stage: half blue on a light blue */
.stagebar__step[aria-current='step'] .stagebar__seg {
  background: var(--color-primary-100);
}

.stagebar__step[aria-current='step'] .stagebar__seg::before {
  content: '';
  display: block;
  width: 50%;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary-600);
}

.stagebar__label {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

.stagebar__step--done .stagebar__label {
  color: var(--color-gray-900);
}

.stagebar__step[aria-current='step'] .stagebar__label {
  color: var(--color-primary-600);
  font-weight: 500;
}

/* ── Tabs (web/shared/components/TabBar/, TabBar.styles.ts): after Apiko's design concept a gray track with the open tab
   raised on white. Every tab has one weight, so no tab moves when the open one changes. ── */

.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-100);
}

/* The Opportunity page's bar spans its row and, from 1024 px on, spreads its tabs; narrower, a wrapped last row packs
   from the start */
.tabs--fill {
  display: flex;
  width: 100%;
}

@media (min-width: 1024px) {
  .tabs--fill {
    justify-content: space-between;
  }
}

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-gray-500);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.tab:hover,
.tab.is-hover {
  color: var(--color-gray-700);
}

.tab[aria-current='page'],
.tab[aria-pressed='true'] {
  background: var(--color-white);
  color: var(--color-gray-900);
  box-shadow: var(--shadow-card);
}

/* Forced colors (Windows high contrast) drop the fill and the shadow, so the open tab also gets an outline there */
@media (forced-colors: active) {
  .tab[aria-current='page'],
  .tab[aria-pressed='true'] {
    outline: 2px solid;
    outline-offset: -2px;
  }
}

/* ── Form-level messages (components/form.tsx: FormError, FormSuccess, Rule) ── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 20px;
}

.alert--crit { background: var(--color-crit-tint); color: var(--color-crit-text); }
.alert--good { background: var(--color-good-tint); color: var(--color-good-text); }

.rules {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rule {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-gray-500);
}

.rule--met {
  color: var(--color-good-text);
}

/* The round check of a completed step (components/form.tsx, SuccessMark) */
.mark-success {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-good-tint);
  color: var(--color-good-text);
}

/* ── Fact: a label over a value (lead-detail/Fact.tsx) ── */

.fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The value in Medium ink, as the design concept's header facts are (lead-detail/Fact.tsx) */
.fact dd {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--color-gray-900);
}

/* A record's header facts in one row: no rule above them, a thin rule between them (the design concept) */
.facts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 16px 24px;
  margin: 0;
}

.facts > * + * {
  padding-left: 24px;
  border-left: 1px solid var(--color-gray-200);
}

/* ── Deal clock (opportunity-detail/LegalsTab.tsx) ── */

.clock {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* After Apiko's design concept: the countdown leads each tile, the date under it; a target is tagged Target, the
   longstop, which must be met, Hard date (opportunity-detail/LegalsTab.tsx) */
.clock__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.clock__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-gray-500);
}

.clock__tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.clock__tag--hard {
  background: var(--color-crit-tint);
  color: var(--color-crit-text);
}

.clock__countdown {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.clock__date,
.clock__none {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-gray-500);
}

/* ── Key dates (opportunity-detail/KeyDatesCard.tsx): a row per date, its countdown as a badge after the date, as the
   design concept's Key dates ── */

.dates {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.dates__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dates__label {
  color: var(--color-gray-500);
}

.dates__value {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.dates__badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

/* The longstop is a hard date, not a target: its badge is gray */
.dates__badge--hard {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

/* ── Follow-up tracker row (lead-detail/FollowUpTracker.tsx) ── */

.actions__mark {
  display: flex;
  color: var(--color-primary-600);
}

.actions__mark--done {
  color: var(--color-good-text);
}

.actions__row--done .actions__title {
  color: var(--color-gray-500);
}

.actions__row {
  display: grid;
  grid-template-columns: 28px 130px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--color-gray-100);
  font-size: 14px;
  line-height: 20px;
}

.actions__row:last-child {
  border-bottom: 0;
}

.actions__due {
  text-align: right;
  color: var(--color-gray-500);
}

.is-overdue {
  color: var(--color-crit-text);
  font-weight: 500;
}

.is-done {
  color: var(--color-good-text);
  font-weight: 500;
}

/* ── App shell parts (web/shared/components/Sidebar, AppLayout; crm AppShell.tsx, UserAvatar.tsx) ── */

/* A menu item (Sidebar.styles.ts ITEM_CLASSES): 40 px, gray ink; the current page on a gray-200 fill */
.navlink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  color: var(--color-gray-600);
  font-size: 14px;
  font-weight: 400;
}

.navlink:hover,
.navlink.is-hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

.navlink[aria-current='page'] {
  background: var(--color-gray-200);
  color: var(--color-gray-900);
  font-weight: 500;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-gray-900);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.brand:hover {
  color: var(--color-gray-900);
}

/* The logo: the delivered mark, bare, as web/shared/components/Logo draws it */
.brand__mark {
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.logo {
  display: block;
  width: 100%;
  height: 100%;
}

.logo__ink {
  fill: var(--color-primary-600);
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
}

.avatar--lg {
  width: 48px;
  height: 48px;
  font-size: 16px;
}

/* The signed-in user as a card at the top of the sidebar (Sidebar.styles.ts USER_CLASSES) */
.usercard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.usercard__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.usercard__name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--color-gray-900);
}

.usercard__role {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

/* The sidebar's avatar: a 32 px rounded square; My account keeps the 48 px circle */
.avatar--sq {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
}

/* A group's caption (Sidebar.styles.ts NAV_CLASSES.caption): small capitals over its items */
.navcaption {
  padding: 0 12px 4px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

/* The fold button beside the brand (Sidebar.styles.ts TOGGLE_CLASSES) */
.sidetoggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--color-gray-500);
}

/* A folded rail's name for an icon (TOOLTIP_CLASSES), drawn open in the samples */
.navtip {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 12px;
  padding: 4px 8px;
  transform: translateY(-50%);
  border-radius: var(--radius-md);
  background: var(--color-gray-900);
  color: var(--color-white);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  box-shadow: var(--shadow-popover);
}

/* A record page's breadcrumbs, above its header (the Breadcrumb of LeadDetail.tsx and its siblings) */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-gray-500);
}

.crumbs a {
  color: var(--color-gray-500);
}

.crumbs__sep {
  color: var(--color-gray-400);
}

.crumbs__page {
  color: var(--color-gray-900);
  font-weight: 500;
}

/* ── Stage counts (opportunity-detail/BuyersTab.tsx, ContractorsTab.tsx) ── */

/* The stage counts of the Buyers and Contractors tabs: a column per stage, as tall as its share of the busiest stage,
   as the design concept's journey bars (opportunity-detail/BuyersTab.tsx, ContractorsTab.tsx) */
.stagecounts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.stagecounts__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stagecounts__count {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.stagecounts__track {
  display: flex;
  align-items: flex-end;
  height: 64px;
}

.stagecounts__bar {
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--color-gray-200);
}

.stagecounts__item--live .stagecounts__bar {
  background: var(--color-primary-600);
}

.stagecounts__label {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

.stagecounts__item--live .stagecounts__label {
  color: var(--color-gray-900);
}

/* ── Auth page and its card (components/AuthLayout.tsx, components/form.tsx: FormCard) ──
   The card alone on the gray page: at most 440px wide, 64px above and below. */

.authpage {
  max-width: 440px;
  margin: 0 auto;
  padding: 64px 16px;
}

.authcard {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
}

.authcard__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.authcard__mark {
  width: 32px;
  height: 32px;
}

.authcard__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.authcard__head p {
  color: var(--color-gray-500);
}

.authcard__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.authcard__aside {
  display: flex;
  justify-content: flex-end;
}

.authcard__foot {
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-500);
}

.authcard__center {
  text-align: center;
  color: var(--color-gray-500);
}

/* ── App shell as a whole (AppLayout, Sidebar): the sidebar beside the page ── */

.shell {
  display: flex;
  min-height: 560px;
  background: var(--color-white);
}

.shell__side {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  width: var(--size-sidebar);
  padding: 16px 12px;
  border-right: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
}

/* Folded: a 64 px rail of icons */
.shell__side--rail {
  align-items: center;
  width: var(--size-sidebar-rail);
  padding: 16px 8px;
}

.shell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 36px;
}

.shell__side--rail .shell__head {
  flex-direction: column;
  height: auto;
}

.shell__side .brand {
  padding: 0 4px;
}

.shell__nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shell__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Folded, a thin rule stands in for a group's caption */
.shell__rule {
  margin: 0 8px 4px;
  border-top: 1px solid var(--color-gray-200);
}

.shell__side--rail .navlink {
  justify-content: center;
  width: 40px;
  padding: 0;
}

.shell__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.shell__page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}