._pageShell_524wh_1 {
  max-width: var(--container-xl);
  margin: var(--spacing-xxxl) auto;
  padding: 0 var(--spacing-xl) var(--spacing-xxxl);
}

._headerRow_524wh_7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

._headerTitle_524wh_15 {
  margin-bottom: var(--spacing-xxs);
}

._mismatchAlert_524wh_19 {
  margin-bottom: var(--spacing-lg);
}

._summaryCards_524wh_23 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

._territoryCard_524wh_30 {
  margin-bottom: var(--spacing-md);
}

._territoryContent_524wh_34 {
  width: 100%;
}

._financialRow_524wh_38 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

._actions_524wh_45 {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xl);
}

._pillList_524wh_52 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

._loadingContainer_524wh_59 {
  min-height: 50vh;
}

._spinPlaceholder_524wh_63 {
  min-height: 80px;
}

._muted_524wh_67 {
  color: var(--neutral-dark);
}

._feedbackPrompt_524wh_71 {
  margin-bottom: var(--spacing-xs);
  color: var(--neutral-dark);
}

._territoryTitle_524wh_76 {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

@media (max-width: 640px) {
  ._headerRow_524wh_7 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._actions_524wh_45 {
    width: 100%;
    flex-direction: column;
  }
}
/* ============================================================
   Split-screen login: form pane (left) + hero pane (right).
   ============================================================ */

.login-split {
  display: flex;
  height: 100vh;
  overflow: hidden; /* the page never scrolls; the form column scrolls itself */
  background: var(--neutral-white);
}

/* ---- Form pane (left) ---- */
.login-pane-form {
  /* Sized to the form + comfortable margins (not a rigid half), so the hero
     starts close to the form instead of leaving a wide empty gutter. */
  flex: 0 0 clamp(440px, 36%, 560px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto; /* a short viewport scrolls this column, not the whole page */
  background: var(--neutral-white);
}

.login-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
}

.login-logo-img {
  height: var(--line-height-menu-item); /* 40px */
  width: auto;
}

.login-form-center {
  /* Grow to centre the form when there's room; never shrink below its own
     content when the viewport is short (the pane scrolls instead). */
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-xl);
}

.login-form-inner {
  width: 100%;
  max-width: 440px;
}

/* Tighter form rhythm so the whole column fits common laptop heights. */
.login-form-inner .ant-form-item {
  margin-bottom: var(--spacing-lg);
}

.login-footer-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-xl);
  color: var(--neutral);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
}

.login-footer-link {
  color: var(--neutral-dark);
  text-decoration: underline;
}

.login-footer-link:hover {
  color: var(--primary);
}

/* ---- Header block ---- */
.login-welcome {
  color: var(--neutral-darkest) !important;
  margin: 0 0 var(--spacing-xs) !important;
}

.login-subtitle {
  display: block;
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-body-md-size);
  font-weight: var(--font-body-md-weight);
  line-height: var(--font-body-md-line-height);
}

/* ---- Form controls ---- */
.login-input {
  border-radius: var(--radius-sm);
}

.login-input-icon {
  color: var(--neutral);
}

.login-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-forgot-link {
  color: var(--primary);
}

.login-submit-button {
  width: 100%;
  height: var(--button-height-lg);
  border-radius: var(--button-radius);
  background: var(--primary);
  border-color: var(--primary);
  font-size: var(--font-h3-size);
  font-weight: var(
    --font-body-md-semibold-weight
  ); /* 600 - UI Kit doesn't use 500 */
  line-height: var(--font-h3-line-height);
}

.login-submit-button:hover,
.login-submit-button:focus {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.login-submit-form-item {
  margin-bottom: var(--spacing-sm);
}

.login-signup-prompt {
  display: block;
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
}

/* ---- Hero pane (right) ---- */
.login-pane-hero {
  flex: 1 1 auto;
  position: relative;
  height: 100%;
  background:
    url("/images/hallway-background.png") center center / cover no-repeat;
}

.login-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--spacing-xxl);
  /* token-check-allow — bespoke blue scrim over the hero photograph */
  --hero-scrim-top: rgba(0, 38, 111, 0.82);
  /* token-check-allow — bespoke blue scrim over the hero photograph */
  --hero-scrim-bottom: rgba(0, 78, 216, 0.72);
  background: linear-gradient(
    150deg,
    var(--hero-scrim-top) 0%,
    var(--hero-scrim-bottom) 100%
  );
}

/* Whitelabel (Agora): its own hero image + a neutral-purple scrim so the
   colourful artwork isn't tinted with the Dennemeyer blue. Drop the image at
   client/public/images/agora-login-hero.png. */
.login-pane-hero--whitelabel {
  background:
    url("/images/agora-login-hero.png") center center / cover no-repeat;
}

.login-pane-hero--whitelabel .login-hero-overlay {
  /* token-check-allow — bespoke purple scrim over the whitelabel hero */
  --hero-scrim-top: rgba(24, 16, 43, 0.82);
  /* token-check-allow — bespoke purple scrim over the whitelabel hero */
  --hero-scrim-bottom: rgba(88, 28, 135, 0.7);
}

.login-hero-content {
  max-width: 560px;
}

.login-hero-sparkle {
  display: block;
  margin-bottom: var(--spacing-lg);
}

.login-hero-sparkle-main {
  fill: var(--neutral-white);
}

.login-hero-sparkle-accent {
  fill: var(--tertiary);
}

.login-hero-title {
  margin: 0 0 var(--spacing-md);
  color: var(--neutral-white);
  /* Fluid size (capped at the h0 token) so the headline stays on ONE line
     across desktop widths without wrapping; the hero is hidden below 1100px. */
  font-size: clamp(var(--font-h1-size), 2.2vw, var(--font-h0-size));
  font-weight: var(--font-h0-weight);
  line-height: var(--font-h1-line-height);
  letter-spacing: var(--letter-spacing-tight);
  white-space: nowrap;
}

.login-hero-subtitle {
  margin: 0;
  color: var(--color-overlay-text);
  font-size: var(--font-body-lg-size);
  line-height: var(--font-body-md-line-height);
}

/* ---- Centered fallback (signing-in / transient auth states) ---- */
.login-container {
  min-height: 100vh;
  background: var(--neutral-lightest);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--neutral-white);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--neutral-lighter);
}

.login-card-signing-in :global(.ant-card-body) {
  padding: var(--spacing-xxl);
}

.login-signing-in-content {
  text-align: center;
}

.login-title {
  color: var(--neutral-darkest);
  margin-bottom: var(--spacing-sm);
}

/* ---- Responsive: hide the hero, let the page flow naturally ---- */
@media (max-width: 1100px) {
  .login-split {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .login-pane-form {
    flex: 1 1 auto;
    overflow-y: visible;
  }

  .login-pane-hero {
    display: none;
  }

  .login-form-center {
    justify-content: center;
  }
}
._container_1968o_1 {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  background: var(--neutral-lightest);
  border: 1px solid var(--neutral-lighter);
  border-radius: var(--radius-md);
}

._heading_1968o_9 {
  display: block;
  color: var(--neutral-dark);
  font-size: var(--font-body-sm-size);
  font-weight: var(--font-body-sm-semibold-weight);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

._accountList_1968o_18 {
  margin-top: var(--spacing-xs);
}

._credentialRow_1968o_22,
._passwordRow_1968o_23 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-xxs) 0;
  color: var(--neutral-dark);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
}

/* Set the password apart as the shared secret. */
._passwordRow_1968o_23 {
  margin-top: var(--spacing-xxs);
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--neutral-lighter);
  font-weight: var(--font-body-sm-semibold-weight);
}

._copyIcon_1968o_42 {
  flex-shrink: 0;
  cursor: pointer;
  color: var(--primary);
}
.no-org-container {
  min-height: 100vh;
  background:
    url("/images/hallway-background.png") center center / cover no-repeat;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  position: relative;
}

.no-org-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-scrim-light);
  z-index: var(--z-elevated);
}

.no-org-card {
  position: relative;
  z-index: calc(var(--z-elevated) + 1);
  width: 100%;
  max-width: 500px;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  border: none;
}

.no-org-header {
  text-align: center;
  margin-bottom: var(--spacing-xxl);
}

.no-org-brand {
  margin-bottom: var(--spacing-xxl);
}

.no-org-brand-content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.no-org-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    var(--pilot-purple) 0%,
    var(--pilot-violet) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-md);
  box-shadow: var(--shadow-step-purple);
}

.no-org-logo-text {
  color: var(--neutral-white);
  font-size: var(--font-h0-size); /* 36px - closest to 32px */
  font-weight: var(--font-h0-weight);
  line-height: var(--font-h0-line-height);
  letter-spacing: var(--letter-spacing-tight);
}

.no-org-brand-text {
  text-align: left;
}

.no-org-company-name {
  font-size: var(--font-h1-size); /* 24px - closest to 28px */
  font-weight: var(--font-h1-weight);
  line-height: var(--font-h1-line-height);
  color: var(--neutral-darkest);
  letter-spacing: var(--letter-spacing-tight);
}

.no-org-marketplace-text {
  font-size: var(--font-h3-size);
  font-weight: var(--font-h3-weight);
  line-height: var(--font-h3-line-height);
  color: var(--pilot-purple);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-top: var(--spacing-xxs);
}

.no-org-logo-img {
  height: var(--line-height-menu-item); /* 40px */
  width: auto;
}

.no-org-separator {
  width: 60px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--neutral-lighter),
    transparent
  );
  margin: 0 auto var(--spacing-xl) auto;
}

.no-org-error-icon {
  font-size: var(--font-h0-size); /* Icon size - keeping proportional */
  color: var(--warning-dark);
  margin-bottom: var(--spacing-md);
}

.no-org-title {
  color: var(--neutral-darkest);
  margin-bottom: var(--spacing-xs);
}

.no-org-subtitle {
  font-size: var(--font-body-md-size);
  font-weight: var(--font-body-md-weight);
  line-height: var(--font-body-md-line-height);
  margin-bottom: var(--spacing-xl);
}

.no-org-content {
  text-align: left;
}

.no-org-info-section {
  padding: var(--spacing-lg);
  background: var(--neutral-lightest);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--warning-dark);
  margin-bottom: var(--spacing-xl);
}

.no-org-info-space {
  width: 100%;
  align-items: flex-start;
}

.no-org-info-icon {
  font-size: var(--font-h2-size);
  color: var(--warning-dark);
  margin-top: var(--spacing-xxs);
  flex-shrink: 0;
}

.no-org-info-text {
  flex: 1;
}

.no-org-message {
  margin: 0;
  color: var(--neutral-darker);
  font-size: var(--font-body-md-size); /* 14px - closest to 15px */
  font-weight: var(--font-body-md-weight);
  line-height: var(--font-body-md-line-height);
}

.no-org-support-section {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.no-org-support-title {
  color: var(--neutral-darkest);
  margin-bottom: var(--spacing-sm);
}

.no-org-support-text {
  color: var(--neutral-dark);
  font-size: var(--font-body-md-size);
  font-weight: var(--font-body-md-weight);
  line-height: var(--font-body-md-line-height);
  margin-bottom: var(--spacing-lg);
}

.no-org-support-button {
  width: 100%;
  height: var(--button-height-lg);
  border-radius: var(--button-radius);
  background: var(--pilot-purple);
  border-color: var(--pilot-purple);
  font-size: var(--font-h3-size);
  font-weight: var(
    --font-body-md-semibold-weight
  ); /* 600 - UI Kit doesn't use 500 */
  line-height: var(--font-h3-line-height);
}

.no-org-support-button:hover {
  background: var(--pilot-purple-dark);
  border-color: var(--pilot-purple-dark);
}

.no-org-footer {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--neutral-lightest);
  border-radius: var(--radius-sm);
}

.no-org-footer-text {
  font-size: var(--font-body-sm-size);
  font-weight: var(--font-body-sm-weight);
  line-height: var(--font-body-sm-line-height);
  color: var(--neutral-dark);
}

/* Responsive design */
@media (max-width: 768px) {
  .no-org-container {
    padding: var(--spacing-md);
  }

  .no-org-card {
    max-width: 100%;
  }

  .no-org-brand-content {
    flex-direction: column;
    text-align: center;
  }

  .no-org-logo {
    margin-right: 0;
    margin-bottom: var(--spacing-sm);
  }

  .no-org-brand-text {
    text-align: center;
  }
}
/* Language picker trigger — a compact, professional pill that harmonises with
   the header user chip. Icons use currentColor so they follow the trigger's
   state colour (neutral → primary on hover/open). */
._trigger_18ib4_4 {
  /* Block-level (flex, not inline-flex) so it hugs its Space wrapper at 44px and
     centres on the same line as the user chip. inline-flex gets caught in the
     header's tall line-height box and sits a few px high (misaligned). */
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  height: 44px;
  padding: 0 var(--spacing-sm) 0 var(--spacing-md);
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius-full);
  background-color: var(--neutral-white);
  color: var(--neutral-darker);
  font-size: var(--font-body-md-size);
  font-weight: var(--font-body-md-semibold-weight);
  line-height: var(--font-body-md-line-height);
  cursor: pointer;
  transition: var(--transition-all);
  user-select: none;
}

._trigger_18ib4_4:hover {
  border-color: var(--primary-lighter);
  background-color: var(--primary-lightest);
  color: var(--primary);
}

._trigger_18ib4_4:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-lightest);
}

/* Open state mirrors hover so the trigger reads as "active" while the menu
   is showing. */
._triggerOpen_18ib4_39,
._triggerOpen_18ib4_39:hover {
  border-color: var(--primary);
  background-color: var(--primary-lightest);
  color: var(--primary);
}

._globe_18ib4_46 {
  font-size: var(--font-body-lg-size);
  color: var(--primary);
}

._current_18ib4_51 {
  white-space: nowrap;
}

._chevron_18ib4_55 {
  font-size: var(--font-body-xs-size);
  opacity: 0.65;
  transition: transform var(--transition-normal);
}

._chevronOpen_18ib4_61 {
  transform: rotate(180deg);
}

/* --- Dropdown menu --- */
._menu_18ib4_66 .ant-dropdown-menu {
  min-width: 196px;
  padding: var(--spacing-xs);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
}

._menu_18ib4_66 .ant-dropdown-menu-item {
  padding: var(--spacing-sm) var(--spacing-sm);
  border-radius: var(--radius-sm);
}

._menu_18ib4_66 .ant-dropdown-menu-item-selected {
  background-color: var(--primary-lightest);
}

._option_18ib4_83 {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

._optionCode_18ib4_89 {
  flex-shrink: 0;
  min-width: 30px;
  padding: var(--spacing-xxs) var(--spacing-xs);
  text-align: center;
  font-size: var(--font-body-xs-size);
  font-weight: var(--font-body-md-bold-weight);
  letter-spacing: 0.04em;
  color: var(--neutral-darker);
  background-color: var(--neutral-lighter);
  border-radius: var(--radius-xs);
  transition: var(--transition-all);
}

._optionName_18ib4_103 {
  flex: 1;
  color: var(--neutral-darkest);
  font-size: var(--font-body-md-size);
  font-weight: var(--font-body-md-weight);
  white-space: nowrap;
}

._check_18ib4_111 {
  flex-shrink: 0;
  margin-left: var(--spacing-sm);
  color: var(--primary);
  font-size: var(--font-body-sm-size);
}

/* Active row: tint the code badge + name to brand colour. */
._menu_18ib4_66 .ant-dropdown-menu-item-selected ._optionCode_18ib4_89 {
  color: var(--neutral-white);
  background-color: var(--primary);
}

._menu_18ib4_66 .ant-dropdown-menu-item-selected ._optionName_18ib4_103 {
  color: var(--primary);
  font-weight: var(--font-body-md-semibold-weight);
}
.onboarding-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-scrim-medium);
  z-index: var(--z-header);
  backdrop-filter: blur(4px);
}
.privacy-modal {
  max-width: 90vw;
}

.privacy-content {
  padding: var(--spacing-xl) 0;
}

.privacy-header {
  text-align: center;
  margin-bottom: var(--spacing-xxl);
}

.privacy-icon {
  font-size: var(--icon-size-hero);
  color: var(--primary);
  margin-bottom: var(--spacing-lg);
}

.privacy-title {
  margin-bottom: var(--spacing-xs);
  color: var(--neutral-darkest);
}

.privacy-subtitle {
  font-size: var(--font-h3-size); /* 16px */
  line-height: var(--font-h3-line-height);
}

.privacy-cards {
  margin-bottom: var(--spacing-xl);
}

.privacy-card {
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--neutral-lighter);
  border-radius: var(--radius-sm);
}

.privacy-card-last {
  margin-bottom: var(--spacing-xl);
  border: 1px solid var(--neutral-lighter);
  border-radius: var(--radius-sm);
}

.privacy-card-body {
  padding: var(--spacing-lg);
}

.privacy-card-space {
  width: 100%;
}

.privacy-card-icon {
  font-size: var(--icon-size-lg);
  margin-top: var(--spacing-xxs);
}

.privacy-card-icon-blue {
  color: var(--primary);
}

.privacy-card-icon-green {
  color: var(--success);
}

.privacy-card-text {
  flex: 1;
}

.privacy-card-heading {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--neutral-darkest);
}

.privacy-card-paragraph {
  margin: 0;
  color: var(--neutral-dark);
  font-size: var(--font-body-md-size); /* 14px */
  line-height: var(--font-body-md-line-height);
}

.privacy-checkboxes {
  margin-bottom: var(--spacing-xl);
}

.privacy-checkbox-container {
  width: 100%;
}

.privacy-checkbox {
  font-size: var(--font-body-md-size); /* 14px */
  line-height: var(--font-body-md-line-height);
}

.privacy-checkbox-strong {
  color: var(--primary);
}

.privacy-divider {
  margin: var(--spacing-xl) 0;
}

.privacy-buttons {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.privacy-button-decline {
  flex: 1;
  height: var(--button-height-lg);
  border-radius: var(--button-radius);
  font-size: var(--font-h3-size); /* 16px */
}

.privacy-button-accept {
  flex: 2;
  height: var(--button-height-lg);
  border-radius: var(--button-radius);
  font-size: var(--font-h3-size); /* 16px */
}

.privacy-button-accept-enabled {
  background: var(--success);
  border-color: var(--success);
}

.privacy-button-accept-disabled {
  background: var(--neutral-light);
  border-color: var(--neutral-light);
}

.privacy-footer {
  text-align: center;
  margin-top: var(--spacing-md);
}

.privacy-footer-text {
  font-size: var(--font-body-sm-size); /* 12px */
  line-height: var(--font-body-sm-line-height);
}
.rejection-container {
  min-height: 100vh;
  background:
    url("/images/hallway-background.png") center center / cover no-repeat;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  position: relative;
}

.rejection-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-scrim-light);
  z-index: var(--z-elevated);
}

.rejection-card {
  position: relative;
  z-index: calc(var(--z-elevated) + 1);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  border: none;
}

.rejection-header {
  text-align: center;
  margin-bottom: var(--spacing-xxl);
}

.rejection-brand {
  margin-bottom: var(--spacing-xxl);
}

.rejection-brand-content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.rejection-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    var(--pilot-purple) 0%,
    var(--pilot-violet) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-md);
  box-shadow: var(--shadow-step-purple);
}

.rejection-logo-text {
  color: var(--neutral-white);
  font-size: var(--font-h1-size); /* 24px - closest to 32px */
  font-weight: var(--font-h1-weight);
  letter-spacing: var(--letter-spacing-tight);
}

.rejection-brand-text {
  text-align: left;
}

.rejection-company-name {
  font-size: var(--font-h1-size); /* 24px - closest to 28px */
  font-weight: var(--font-h1-weight);
  color: var(--neutral-darkest);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.1;
}

.rejection-marketplace-text {
  font-size: var(--font-h3-size);
  font-weight: var(--font-h3-weight);
  color: var(--pilot-purple);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-top: var(--spacing-xxs);
}

.rejection-logo-img {
  height: var(--line-height-menu-item); /* 40px */
  width: auto;
}

.rejection-separator {
  width: 60px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--neutral-lighter),
    transparent
  );
  margin: 0 auto var(--spacing-xl) auto;
}

.rejection-warning-icon {
  font-size: var(--font-h0-size); /* 36px - closest to 48px for icon */
  color: var(--danger);
  margin-bottom: var(--spacing-md);
}

.rejection-title {
  color: var(--neutral-darkest);
  margin-bottom: var(--spacing-xs);
}

.rejection-subtitle {
  font-size: var(--font-body-md-size);
  margin-bottom: var(--spacing-xl);
}

.rejection-content {
  text-align: left;
}

.rejection-info-section {
  padding: var(--spacing-lg);
  background: var(--danger-lightest);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--danger);
  margin-bottom: var(--spacing-xl);
}

.rejection-info-space {
  width: 100%;
  align-items: flex-start;
}

.rejection-type-icon {
  font-size: var(--font-h2-size);
  margin-top: var(--spacing-xxs);
  flex-shrink: 0;
}

.rejection-icon-privacy {
  color: var(--success-dark);
}

.rejection-icon-terms {
  color: var(--primary);
}

.rejection-info-text {
  flex: 1;
}

.rejection-message {
  margin: 0;
  color: var(--neutral-darker);
  font-size: var(--font-body-md-size); /* 14px - closest to 15px */
  line-height: 1.6;
}

.rejection-countdown-section {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--neutral-lightest);
  border-radius: var(--radius-sm);
}

.rejection-countdown-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.rejection-countdown-icon {
  font-size: var(--font-h2-size);
  color: var(--pilot-purple);
  margin-right: var(--spacing-xs);
}

.rejection-countdown-title {
  color: var(--neutral-darkest);
  margin: 0;
  font-size: var(--font-h3-size); /* 16px - closest to 18px */
  animation: pulse 1s ease-in-out infinite;
}

.rejection-progress-container {
  margin-bottom: var(--spacing-lg);
}

.rejection-progress {
  height: 8px;
}

.rejection-progress .ant-progress-bg {
  border-radius: var(--radius-xs);
}

.rejection-redirect-button {
  width: 100%;
  height: var(--button-height-lg);
  border-radius: var(--button-radius);
  background: var(--pilot-purple);
  border-color: var(--pilot-purple);
  font-size: var(--font-h3-size);
  font-weight: var(
    --font-body-md-semibold-weight
  ); /* 600 - UI Kit doesn't use 500 */
}

.rejection-redirect-button:hover {
  background: var(--pilot-purple-dark);
  border-color: var(--pilot-purple-dark);
}

.rejection-footer {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--neutral-lightest);
  border-radius: var(--radius-sm);
}

.rejection-footer-text {
  font-size: var(--font-body-sm-size);
  color: var(--neutral-dark);
}

/* Responsive design */
@media (max-width: 768px) {
  .rejection-container {
    padding: var(--spacing-md);
  }

  .rejection-card {
    max-width: 100%;
  }

  .rejection-brand-content {
    flex-direction: column;
    text-align: center;
  }

  .rejection-logo {
    margin-right: 0;
    margin-bottom: var(--spacing-sm);
  }

  .rejection-brand-text {
    text-align: center;
  }

  .rejection-countdown-header {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .rejection-countdown-icon {
    margin-right: 0;
  }
}

/* Animation for countdown */
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

/* Animation for rejection countdown title - merged above */
.terms-modal {
  max-width: 90vw;
}

.terms-content {
  padding: var(--spacing-xl) 0;
}

.terms-header {
  text-align: center;
  margin-bottom: var(--spacing-xxl);
}

.terms-icon {
  font-size: var(--icon-size-hero);
  color: var(--success);
  margin-bottom: var(--spacing-lg);
}

.terms-title {
  margin-bottom: var(--spacing-xs);
  color: var(--neutral-darkest);
}

.terms-subtitle {
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
}

.terms-cards {
  margin-bottom: var(--spacing-xl);
}

.terms-card {
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--neutral-lighter);
  border-radius: var(--radius-sm);
}

.terms-card-last {
  margin-bottom: var(--spacing-xl);
  border: 1px solid var(--neutral-lighter);
  border-radius: var(--radius-sm);
}

.terms-card-body {
  padding: var(--spacing-lg);
}

.terms-card-space {
  width: 100%;
}

.terms-card-icon {
  font-size: var(--icon-size-lg);
  margin-top: var(--spacing-xxs);
}

.terms-card-icon-blue {
  color: var(--primary);
}

.terms-card-icon-green {
  color: var(--success);
}

.terms-card-text {
  flex: 1;
}

.terms-card-heading {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--neutral-darkest);
}

.terms-card-paragraph {
  margin: 0;
  color: var(--neutral-dark);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
}

.terms-checkboxes {
  margin-bottom: var(--spacing-xl);
}

.terms-checkbox-container {
  width: 100%;
}

.terms-checkbox {
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
}

.terms-checkbox-strong {
  color: var(--primary);
}

.terms-divider {
  margin: var(--spacing-xl) 0;
}

.terms-buttons {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.terms-button-decline {
  flex: 1;
  height: var(--button-height-lg);
  border-radius: var(--button-radius);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
}

.terms-button-accept {
  flex: 2;
  height: var(--button-height-lg);
  border-radius: var(--button-radius);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
}

.terms-button-accept-enabled {
  background: var(--success);
  border-color: var(--success);
}

.terms-button-accept-disabled {
  background: var(--neutral-light);
  border-color: var(--neutral-light);
}

.terms-footer {
  text-align: center;
  margin-top: var(--spacing-md);
}

.terms-footer-text {
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
}
/**
 * ==========================================================================
 * DESIGN TOKENS
 * ==========================================================================
 *
 * This file defines the design token system for the application.
 *
 * STRUCTURE:
 *   1. Primitives — raw values (colors, spacing, radii, shadows, typography)
 *   2. Semantic tokens — purpose-based aliases (kept minimal, only actively used)
 *   3. Component tokens — component-specific patterns (buttons, inputs, cards)
 *
 * USAGE RULES:
 *   - Use primitive tokens directly in component CSS
 *   - Component tokens exist for elements with complex state (buttons, inputs)
 *   - Do NOT add tokens speculatively — only add what is actively used
 *
 * NAMING CONVENTION (UI Kit standard):
 *   lightest → lighter → light → (main) → dark → darker
 *
 * EXAMPLE:
 *   background: var(--neutral-lightest);
 *   color: var(--primary);
 *   border-radius: var(--radius-sm);
 *
 * Last cleaned: 2026-02-13
 */

:root {
  /* ==========================================================================
     SECTION 1: PRIMITIVE COLOR SCALE (UI Kit aligned)
     These are the raw values. Semantic tokens below reference these.
     ========================================================================== */

  /* Primary Blue Scale */
  --primary-lightest: #e0eafa;
  --primary-lighter: #b3caf3;
  --primary-light: #4d83e4;
  --primary: #004ed8;
  --primary-hover: #0044c0;
  --primary-dark: #003aa0;

  /* Secondary Blue Scale (navy) */
  --secondary-light: #4d679a;
  --secondary: #00266f;

  /* Tertiary Orange Scale */
  --tertiary-lightest: #ffefe4;
  --tertiary-lighter: #ffe4d2;
  --tertiary-light: #ffaf7a;
  --tertiary: #ff6700;
  --tertiary-dark: #a74300;
  --tertiary-darker: #7a3100;

  /* Neutral Scale (blue-green tinted) */
  --neutral-white: #ffffff;
  --neutral-lightest: #f3f7f8;
  --neutral-lighter: #edf1f2;
  --neutral-light: #d2dcdf;
  --neutral: #96adb5;
  --neutral-medium: #7f9ba4;
  --neutral-dark: #698a95;
  --neutral-darker: #536873;
  --neutral-darkest: #002832;
  --neutral-black: #000000;

  /* Success Green Scale */
  --success-lightest: #e0faec;
  --success-lighter: #b3f2d1;
  --success-light: #4de193;
  --success: #00d464;
  --success-dark: #00a74f;

  /* Warning Purple Scale (high visibility alternative to yellow) */
  --warning-lightest: #f3e8ff;
  --warning-lighter: #e9d5ff;
  --warning-light: #c084fc;
  --warning: #a855f7;
  --warning-dark: #9333ea;
  --warning-darker: #7e22ce;

  /* Danger Red Scale (UI Kit calls it "danger" not "error") */
  --danger-lightest: #ffeaeb;
  --danger-lighter: #ffcacc;
  --danger-light: #ff8288;
  --danger: #ff4d55;
  --danger-dark: #eb323a;
  --danger-darker: #ac1b21;

  /* Info Cyan Scale */
  --info-lightest: #e0f8ff;
  --info-lighter: #b3edff;
  --info-light: #4dd6ff;
  --info: #00c4ff;
  --info-dark: #009ece;
  --info-darker: #037395;

  /* Insights Teal Scale (AI transparency, data intelligence) */
  --insights-lightest: #e8f6f4;
  --insights-lighter: #c2e8e3;
  --insights-light: #6dcfbf;
  --insights: #20b2a0;
  --insights-dark: #1a9485;

  /* Soft navy/primary washes for Overview chips & the partner catch-all card */
  --navy-chip-bg: #e9edf5;
  --partner-card-bg: #f4f8fd;
  --partner-card-border: #dce7f7;

  /* Gold Scale (awards, trophies, celebration) */
  --gold-lightest: #fff8e1;
  --gold-light: #ffd54f;
  --gold: #f0a500;
  --gold-dark: #d4a017;

  /* Medal colors (bid ranking: 1st/2nd/3rd place) */
  --color-medal-gold: #ffd700;
  --color-medal-silver: #c0c0c0;
  --color-medal-bronze: #cd7f32;

  /* Legacy Accent/Brand Colors (pilot mode - not in UI Kit) */
  --pilot-purple: #4f46e5;
  --pilot-purple-light: #818cf8;
  --pilot-purple-lighter: #c7d2fe;
  --pilot-purple-lightest: #eef2ff;
  --pilot-purple-dark: #4338ca;
  --pilot-violet: #7c3aed;

  /* ==========================================================================
     SECTION 2: SEMANTIC TOKENS
     Only tokens that are actively used in CSS/TSX files or referenced by
     component pattern tokens. Unused semantic tokens have been removed.
     ========================================================================== */

  /* Backgrounds (used directly or by component patterns) */
  --color-bg-hover: var(--neutral-lighter);
  --color-bg-info: var(--info-lightest);
  --color-bg-insights: var(--insights-lightest);

  /* Text (used directly) */
  --color-text-default: var(--neutral-darkest);
  --color-text-heading: var(--neutral-darkest);
  --color-text-secondary: var(--neutral-darker);
  --color-text-tertiary: var(--neutral-dark);
  --color-text: var(--color-text-default);

  /* Borders (used directly or by component patterns) */
  --color-border-light: var(--neutral-lighter);
  --color-border-card: var(--neutral-light);
  --color-border: var(--neutral-light);
  --color-border-info: var(--info-light);
  --color-border-insights: var(--insights-light);

  /* ==========================================================================
     SECTION 2: SEMANTIC TOKENS - NAVIGATION
     ========================================================================== */

  /* Sidebar/Nav menu - UI Kit aligned */
  --color-text-nav-default: var(--neutral-darker);
  --color-text-nav-active: var(--primary);
  --color-icon-nav-default: var(--neutral-darker);
  --color-icon-nav-active: var(--primary);
  --color-fill-nav-active: var(--primary-lightest);

  /* Breadcrumbs */
  --color-breadcrumb-text: var(--neutral-dark);
  --color-breadcrumb-text-current: var(--neutral-darkest);
  --color-breadcrumb-separator: var(--neutral);
  --color-breadcrumb-link: var(--secondary);
  --color-breadcrumb-link-hover: var(--secondary-light);

  /* ==========================================================================
     SECTION 2: SEMANTIC TOKENS - SPECIAL/BRAND
     ========================================================================== */

  /* Pilot mode (feature flag - not in UI Kit) */
  --color-pilot-header-bg: linear-gradient(
    90deg,
    var(--pilot-purple),
    var(--pilot-violet)
  );
  --color-pilot-text: var(--neutral-white);
  --color-pilot-button-bg: rgba(255, 255, 255, 0.2);
  --color-pilot-button-border: rgba(255, 255, 255, 0.4);

  /* Brand */
  --color-brand-logo: var(--secondary); /* Navy for logo text */

  /* ==========================================================================
     SPACING TOKENS (UI Kit aligned)
     Named scale from UI Kit: xs → sm → md → lg → xl → xxl → xxxl
     ========================================================================== */

  /* UI Kit Named Spacing Scale */
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 36px;
  --spacing-xxxl: 48px;
  --spacing-xxxxl: 64px;

  /* ==========================================================================
     TYPOGRAPHY TOKENS (UI Kit aligned)
     Font: Source Sans Pro
     ========================================================================== */

  /* Font Family */
  --font-family-base:
    "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Monospace — code-like identifiers (asset numbers, references) */
  --font-family-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Numeric — tabular figures for counts, asset numbers, references */
  --font-family-numeric: var(--font-family-mono);

  /* Heading Styles */
  /* H0 - only for highlights */
  --font-h0-size: 36px;
  --font-h0-line-height: 42px;
  --font-h0-weight: 700; /* Bold */

  /* H1 - used e.g. for ad banners */
  --font-h1-size: 24px;
  --font-h1-line-height: 30px;
  --font-h1-weight: 700; /* Bold */

  /* H2 - used e.g. for card headlines on dashboard */
  --font-h2-size: 20px;
  --font-h2-line-height: 24px;
  --font-h2-weight: 600; /* Semibold */

  /* H3 - used e.g. for navigation items */
  --font-h3-size: 16px;
  --font-h3-line-height: 24px;
  --font-h3-weight: 600; /* Semibold */

  /* Body Styles */
  /* Body / Large - base size token */
  --font-body-lg-size: 16px;
  --font-body-lg-semibold-weight: 600;

  /* Body / Large / Light - used e.g. for hero card body text */
  --font-body-lg-light-size: 16px;
  --font-body-lg-light-line-height: 24px;
  --font-body-lg-light-weight: 300; /* Light */

  /* Body / Medium / Regular - used e.g. for short content text */
  --font-body-md-size: 14px;
  --font-body-md-line-height: 20px;
  --font-body-md-weight: 400; /* Regular */

  /* Body / Medium / Semibold - used e.g. for buttons */
  --font-body-md-semibold-weight: 600;

  /* Body / Medium / Bold - used e.g. for headlines in info boxes */
  --font-body-md-bold-weight: 700;

  /* Body / Small - used e.g. for captions */
  --font-body-sm-size: 12px;
  --font-body-sm-line-height: 18px;
  --font-body-sm-weight: 400; /* Regular */

  /* Body / Small / Semibold - used e.g. for tags */
  --font-body-sm-semibold-weight: 600;

  /* Body / Extra Small - used e.g. for fine print */
  --font-body-xs-size: 10px;

  /* Legacy size tokens (for backwards compatibility) */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.4;
  --line-height-normal: 1.5;

  /* ==========================================================================
     SHADOW TOKENS
     ========================================================================== */

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* UI Kit Card Shadow (subtle 3-layer shadow) */
  --shadow-card-ui:
    0 3px 1px rgba(0, 0, 0, 0.01), 0 2px 1px rgba(0, 0, 0, 0.01), 0 1px 1px
    rgba(0, 0, 0, 0.03);
  --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.06);

  /* Elevated overlays (modals, popovers, bottom docks) */
  --shadow-modal: 0 24px 60px rgba(0, 38, 111, 0.25);
  --shadow-popover: 0 14px 38px rgba(0, 38, 111, 0.18);
  --shadow-dock: 0 -2px 10px rgba(0, 40, 50, 0.08);
  --shadow-dock-strong: 0 -6px 24px rgba(0, 40, 50, 0.18);

  /* Neutral-tinted elevation used by segmented controls, tiles, and open cards */
  --shadow-segment: 0 1px 2px rgba(0, 40, 50, 0.1);
  --shadow-tile: 0 4px 10px rgba(0, 40, 50, 0.06);
  --shadow-card-open: 0 8px 24px rgba(0, 40, 50, 0.1);
  /* Primary-tinted elevation for interactive pills and raised primary surfaces */
  --shadow-pill-primary: 0 1px 3px rgba(0, 78, 216, 0.08);
  --shadow-primary-raised: 0 8px 20px rgba(0, 78, 216, 0.25);

  /* ==========================================================================
     CONTROL HEIGHT TOKENS (for Ant Design components)
     ========================================================================== */

  --control-height-sm: 32px;
  --control-height: 40px;
  --control-height-lg: 48px;

  /* ==========================================================================
     OPACITY-BASED INTERACTION STATES
     ========================================================================== */

  /* Secondary navy at various opacities (for Tree, Cascader, Transfer, etc.) */
  --color-secondary-active-bg: rgba(0, 38, 111, 0.1);
  --color-secondary-hover-bg: rgba(0, 38, 111, 0.05);

  /* ==========================================================================
     LAYOUT TOKENS
     ========================================================================== */

  --header-height: 64px;
  --sidebar-width: 278px;
  --sidebar-padding: var(--spacing-lg);
  --page-max-width: 1320px;

  /* ==========================================================================
     BORDER RADIUS TOKENS (UI Kit aligned)
     Named scale from UI Kit: xxs → xs → sm → md → lg → xl → xxl
     ========================================================================== */

  --radius-xxs: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px; /* pills, avatars */

  /* ==========================================================================
     Z-INDEX TOKENS
     ========================================================================== */

  /* Base layers */
  --z-base: 0;
  --z-elevated: 1;
  --z-content: 10;

  /* UI elements */
  --z-dropdown: 100;
  --z-sidebar: 100;
  --z-sticky: 500;
  --z-filters: 800;
  --z-search: 900;

  /* Overlays and modals */
  --z-header: 1000;
  --z-overlay: 1010;
  --z-modal: 1050;

  /* Floating dev tooling (above header, below fullscreen surfaces) */
  --z-dev-panel: 1100;

  /* Fullscreen surfaces (immersive overlays that sit above modals) */
  --z-fullscreen: 1500;
  --z-toast: 1600;

  /* Critical UI */
  --z-notification: 9999;
  --z-overlay-max: 999999;

  /* ==========================================================================
     TRANSITION TOKENS
     ========================================================================== */

  /* Motion durations (the only sanctioned transition/animation timings) */
  --duration-fast: 0.1s;
  --duration-quick: 0.12s;
  --duration-snappy: 0.15s;
  --duration-normal: 0.2s;
  --duration-moderate: 0.25s;
  --duration-slow: 0.3s;

  /* Motion easings */
  --ease-standard: ease; /* CSS default; also the implicit easing when omitted */
  --ease-in-out: ease-in-out;
  --ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);

  /* Composite transitions (built on the duration + easing primitives above) */
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-normal: var(--duration-normal) var(--ease-standard);

  /* Property-specific transitions */
  --transition-color: color var(--duration-normal) var(--ease-standard);
  --transition-all: all var(--duration-normal) var(--ease-standard);

  /* ==========================================================================
     FOCUS RING TOKENS
     For consistent keyboard navigation and accessibility states
     ========================================================================== */

  --focus-ring-color: rgba(0, 38, 111, 0.2);
  --focus-ring-color-primary: rgba(0, 78, 216, 0.3);
  --focus-ring-color-danger: rgba(255, 77, 85, 0.3);
  --focus-ring-color-success: rgba(0, 212, 100, 0.2);
  --focus-ring-color-pilot: rgba(79, 70, 229, 0.1);
  --focus-ring-width: 2px;
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  --focus-ring-primary: 0 0 0 var(--focus-ring-width)
    var(--focus-ring-color-primary);
  --focus-ring-danger: 0 0 0 var(--focus-ring-width)
    var(--focus-ring-color-danger);
  --focus-ring-success: 0 0 0 var(--focus-ring-width)
    var(--focus-ring-color-success);
  --focus-ring-pilot: 0 0 0 3px var(--focus-ring-color-pilot);

  /* Soft selection rings (wider, lower-opacity halo for selected cards/rows) */
  --focus-ring-primary-soft: 0 0 0 3px rgba(0, 78, 216, 0.15);
  --focus-ring-success-soft: 0 0 0 3px rgba(0, 212, 100, 0.18);
  --focus-ring-danger-soft: 0 0 0 3px rgba(255, 77, 85, 0.15);

  /* ==========================================================================
     INTERACTIVE SHADOW TOKENS
     State-specific shadows for buttons and interactive elements
     ========================================================================== */

  /* Primary button shadows */
  --shadow-button-primary: 0 2px 8px rgba(0, 78, 216, 0.2);
  --shadow-button-primary-hover: 0 4px 12px rgba(0, 78, 216, 0.3);

  /* Danger button shadows */
  --shadow-button-danger: 0 2px 8px rgba(255, 77, 85, 0.2);

  /* Interactive element shadows (cards, inputs on focus) */
  --shadow-interactive-hover: 0 2px 8px rgba(0, 78, 216, 0.08);

  /* ==========================================================================
     ICON SIZE TOKENS
     Consistent icon sizing across the application
     ========================================================================== */

  --icon-size-xs: 12px;
  --icon-size-sm: 14px;
  --icon-size-md: 16px;
  --icon-size-lg: 20px;
  --icon-size-xl: 24px;
  --icon-size-xxl: 32px;
  --icon-size-xxxl: 40px;
  --icon-size-hero: 48px;
  --icon-size-mega: 80px;

  /* ==========================================================================
     BORDER WIDTH TOKENS
     Consistent border widths
     ========================================================================== */

  --border-width-default: 1px;
  --border-width-thick: 2px;
  --border-width-heavy: 3px;

  /* ==========================================================================
     LETTER SPACING TOKENS
     Typography tracking values
     ========================================================================== */

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.05em;

  /* ==========================================================================
     CONTAINER / MAX-WIDTH TOKENS
     Layout container widths for different contexts
     ========================================================================== */

  --container-xl: 1200px;
  --container-xxl: 1440px;
  --container-prose: 65ch; /* Optimal reading width */

  /* ==========================================================================
     BUTTON TOKENS (from Figma specs)
     ========================================================================== */

  /* Button heights */
  --button-height-sm: 28px;
  --button-height-md: 36px;
  --button-height-lg: 44px;

  /* Button border-radius - pill shape (Radius/xxhuge in Figma) */
  --button-radius: var(--radius-full);

  /* Button padding - vertical (top/bottom) */
  --button-padding-y: var(--spacing-sm); /* 8px */

  /* Button padding - horizontal (left/right) for text buttons */
  --button-padding-x-sm: var(--spacing-md); /* 12px */
  --button-padding-x-md: var(--spacing-md); /* 12px */

  /* Button padding shorthand for text buttons */
  --button-padding-sm: var(--button-padding-y) var(--button-padding-x-sm); /* 8px 12px */
  --button-padding-md: var(--button-padding-y) var(--button-padding-x-md); /* 8px 12px */

  /* Icon-only button padding (smaller horizontal) */
  --button-icon-only-padding-x-sm: var(--spacing-xs); /* 4px */
  --button-icon-only-padding-x-md: var(--spacing-sm); /* 8px */
  --button-icon-only-padding-sm: var(--button-padding-y)
    var(--button-icon-only-padding-x-sm); /* 8px 4px */
  --button-icon-only-padding-md: var(--button-padding-y)
    var(--button-icon-only-padding-x-md); /* 8px 8px */

  /* Icon-only button dimensions (square, same as height) */
  --button-icon-only-size-sm: var(--button-height-sm);
  --button-icon-only-size-md: var(--button-height-md);

  /* Button gap (between icon and label) */
  --button-gap: var(--spacing-xs); /* 4px - Spacing/x-s in Figma */

  /* Button colors - Primary (filled) */
  --button-primary-bg: var(--primary); /* #004ED8 */
  --button-primary-bg-hover: var(--primary-dark); /* #003AA0 */
  --button-primary-text: var(--neutral-white);

  /* Button colors - Secondary (outlined) */
  --button-secondary-bg: transparent;
  --button-secondary-border: var(--primary); /* #004ED8 */
  --button-secondary-border-hover: var(--primary-dark); /* #003AA0 */
  --button-secondary-border-disabled: var(--neutral-lighter); /* #EDF1F2 */
  --button-secondary-text: var(--primary);
  --button-secondary-text-hover: var(--primary-dark);
  --button-secondary-border-width: var(--border-width-thick); /* 2px */
  --button-secondary-border-width-hover: var(--border-width-heavy); /* 3px */

  /* Button colors - Tertiary/Link (ghost) */
  --button-tertiary-bg: transparent;
  --button-tertiary-bg-hover: var(--primary-lightest); /* #E0EAFA */
  --button-tertiary-text: var(--primary);

  /* Button colors - Disabled (shared across all variants) */
  --button-disabled-bg: var(--neutral-lightest);
  --button-disabled-text: var(--neutral-dark);

  /* ==========================================================================
     INPUT FIELD TOKENS (from Figma specs)
     ========================================================================== */

  /* Input heights */
  --input-height-sm: 32px;
  --input-height-md: 40px;
  --input-height-lg: 48px;

  /* Input border-radius */
  --input-radius: var(--radius-sm); /* 8px */

  /* Input padding */
  --input-padding-x: var(--spacing-md); /* 12px */
  --input-padding-y: var(--spacing-sm); /* 8px */

  /* Input colors - Default state */
  --input-bg: var(--neutral-white);
  --input-border: var(--neutral-light);
  --input-text: var(--neutral-darkest);
  --input-placeholder: var(--neutral);

  /* Input colors - Focus state */
  --input-border-focus: var(--primary);
  --input-shadow-focus: 0 0 0 2px var(--focus-ring-color-primary);

  /* Input colors - Hover state */
  --input-border-hover: var(--secondary);

  /* Input colors - Disabled state */
  --input-bg-disabled: var(--neutral-lighter);
  --input-border-disabled: var(--neutral-light);
  --input-text-disabled: var(--neutral);

  /* Input colors - Error state */
  --input-border-error: var(--danger);
  --input-shadow-error: 0 0 0 2px var(--focus-ring-color-danger);

  /* Input colors - Success state */
  --input-border-success: var(--success);
  --input-icon-success: var(--success);

  /* Input colors - Recommendation/Info state */
  --input-helper-link: var(--primary);

  /* Input icon sizing */
  --input-icon-size: var(--icon-size-md); /* 16px */
  --input-icon-gap: var(--spacing-sm); /* 8px */

  /* Textarea specific */
  --textarea-min-height: 120px;
  --textarea-resize-icon-size: var(--icon-size-sm); /* 14px */

  /* Helper text */
  --input-helper-font-size: var(--font-body-sm-size); /* 12px */
  --input-helper-color: var(--neutral-dark);
  --input-helper-color-error: var(--danger);
  --input-helper-icon-size: var(--icon-size-sm); /* 14px */
  --input-helper-gap: var(--spacing-xs); /* 4px */

  /* Label styling */
  --input-label-font-size: var(--font-body-md-size); /* 14px */
  --input-label-font-weight: var(--font-weight-medium);
  --input-label-color: var(--neutral-darkest);
  --input-label-required-color: var(--primary); /* Blue asterisk */
  --input-label-gap: var(--spacing-xs); /* 4px gap to input */

  /* Character counter */
  --input-counter-font-size: var(--font-body-sm-size); /* 12px */
  --input-counter-color: var(--neutral-dark);

  /* Multi-select tags inside input */
  --input-tag-bg: var(--neutral-lighter);
  --input-tag-text: var(--neutral-darkest);
  --input-tag-radius: var(--radius-xs); /* 4px */
  --input-tag-padding: var(--spacing-xxs) var(--spacing-sm);
  --input-tag-gap: var(--spacing-xs); /* 4px */
  --input-tag-close-size: var(--icon-size-sm); /* 14px */

  /* ==========================================================================
     SELECT/DROPDOWN TOKENS (from Figma specs)
     ========================================================================== */

  /* Select trigger (uses input tokens for consistency) */
  --select-height: var(--input-height-md);
  --select-radius: var(--input-radius);
  --select-padding-x: var(--input-padding-x);
  --select-bg: var(--input-bg);
  --select-border: var(--input-border);
  --select-text: var(--input-text);

  /* Select trigger states */
  --select-border-hover: var(--input-border-hover);
  --select-border-focus: var(--input-border-focus);
  --select-border-open: var(--primary); /* Same as focus */
  --select-shadow-focus: var(--input-shadow-focus);

  /* Select chevron/arrow */
  --select-arrow-size: var(--icon-size-md); /* 16px */
  --select-arrow-color: var(--neutral-dark);
  --select-arrow-color-focus: var(--primary);

  /* Dropdown panel */
  --select-dropdown-bg: var(--neutral-white);
  --select-dropdown-border: var(--neutral-light);
  --select-dropdown-radius: var(--radius-sm); /* 8px */
  --select-dropdown-shadow: var(--shadow-lg);
  --select-dropdown-max-height: 280px;
  --select-dropdown-padding: var(--spacing-xs); /* 4px */

  /* Dropdown options */
  --select-option-height: 36px;
  --select-option-padding-x: var(--spacing-md); /* 12px */
  --select-option-padding-y: var(--spacing-sm); /* 8px */
  --select-option-radius: var(--radius-xs); /* 4px */

  /* Option states */
  --select-option-bg: transparent;
  --select-option-bg-hover: var(--neutral-lighter);
  --select-option-bg-selected: var(--primary-lightest);
  --select-option-text: var(--neutral-darkest);
  --select-option-text-hover: var(--neutral-darkest);
  --select-option-text-selected: var(--primary);

  /* Scrollbar in dropdown */
  --select-scrollbar-width: 6px;
  --select-scrollbar-track: var(--neutral-lightest);
  --select-scrollbar-thumb: var(--neutral-light);
  --select-scrollbar-thumb-hover: var(--neutral);

  /* ==========================================================================
     CHECKBOX TOKENS (from Figma specs)
     ========================================================================== */

  /* Checkbox sizing */
  --checkbox-size-sm: 16px;
  --checkbox-size-md: 20px;
  --checkbox-size-lg: 24px;
  --checkbox-size: var(--checkbox-size-md); /* Default */

  /* Checkbox border-radius */
  --checkbox-radius: var(--radius-xs); /* 4px */

  /* Checkbox colors - Unchecked */
  --checkbox-bg: var(--neutral-white);
  --checkbox-border: var(--neutral-light);
  --checkbox-border-width: var(--border-width-default); /* 1px */

  /* Checkbox colors - Hover (unchecked) */
  --checkbox-border-hover: var(--secondary); /* Navy on hover */

  /* Checkbox colors - Checked */
  --checkbox-bg-checked: var(--primary);
  --checkbox-border-checked: var(--primary);
  --checkbox-checkmark-color: var(--neutral-white);

  /* Checkbox colors - Hover (checked) */
  --checkbox-bg-checked-hover: var(--secondary); /* Navy on hover */
  --checkbox-border-checked-hover: var(--secondary);

  /* Checkbox colors - Indeterminate (partial selection) */
  --checkbox-bg-indeterminate: var(--primary);
  --checkbox-border-indeterminate: var(--primary);
  --checkbox-dash-color: var(--neutral-white);

  /* Checkbox colors - Disabled */
  --checkbox-bg-disabled: var(--neutral-lighter);
  --checkbox-border-disabled: var(--neutral-light);
  --checkbox-checkmark-disabled: var(--neutral);

  /* Checkbox label */
  --checkbox-label-gap: var(--spacing-sm); /* 8px */
  --checkbox-label-color: var(--neutral-darkest);
  --checkbox-label-font-size: var(--font-body-md-size);

  /* Checkbox focus ring */
  --checkbox-focus-ring: var(--focus-ring-primary);

  /* ==========================================================================
     RADIO BUTTON TOKENS (from Figma specs)
     ========================================================================== */

  /* Radio sizing (same as checkbox for consistency) */
  --radio-size-sm: 16px;
  --radio-size-md: 20px;
  --radio-size-lg: 24px;
  --radio-size: var(--radio-size-md); /* Default */

  /* Radio is always circular */
  --radio-radius: var(--radius-full);

  /* Radio dot sizing (inner circle when selected) */
  --radio-dot-size-sm: 6px;
  --radio-dot-size-md: 8px;
  --radio-dot-size-lg: 10px;
  --radio-dot-size: var(--radio-dot-size-md);

  /* Radio colors - Unchecked */
  --radio-bg: var(--neutral-white);
  --radio-border: var(--neutral-light);
  --radio-border-width: var(--border-width-default);

  /* Radio colors - Hover (unchecked) */
  --radio-border-hover: var(--secondary);

  /* Radio colors - Checked */
  --radio-bg-checked: var(--neutral-white);
  --radio-border-checked: var(--primary);
  --radio-dot-color: var(--primary);

  /* Radio colors - Hover (checked) */
  --radio-border-checked-hover: var(--secondary);
  --radio-dot-color-hover: var(--secondary);

  /* Radio colors - Disabled */
  --radio-bg-disabled: var(--neutral-lighter);
  --radio-border-disabled: var(--neutral-light);
  --radio-dot-disabled: var(--neutral);

  /* Radio label */
  --radio-label-gap: var(--spacing-sm);
  --radio-label-color: var(--neutral-darkest);
  --radio-label-font-size: var(--font-body-md-size);

  /* Radio focus ring */
  --radio-focus-ring: var(--focus-ring-primary);

  /* ==========================================================================
     SWITCH/TOGGLE TOKENS (from Figma specs)
     ========================================================================== */

  /* Switch track sizing */
  --switch-width-sm: 36px;
  --switch-width-md: 44px;
  --switch-width-lg: 52px;
  --switch-width: var(--switch-width-md); /* Default */

  --switch-height-sm: 20px;
  --switch-height-md: 24px;
  --switch-height-lg: 28px;
  --switch-height: var(--switch-height-md); /* Default */

  /* Switch track border-radius (pill shape) */
  --switch-radius: var(--radius-full);

  /* Switch handle (knob) sizing */
  --switch-handle-size-sm: 16px;
  --switch-handle-size-md: 20px;
  --switch-handle-size-lg: 24px;
  --switch-handle-size: var(--switch-handle-size-md);

  /* Switch handle offset from track edge */
  --switch-handle-offset: 2px;

  /* Switch colors - Off state */
  --switch-track-bg-off: var(--neutral); /* Gray track */
  --switch-track-bg-off-hover: var(--neutral-dark);
  --switch-handle-bg: var(--neutral-white);
  --switch-handle-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

  /* Switch colors - On state */
  --switch-track-bg-on: var(--success); /* Green track */
  --switch-track-bg-on-hover: var(--success-dark);

  /* Switch colors - Disabled */
  --switch-track-bg-disabled: var(--neutral-lighter);
  --switch-handle-bg-disabled: var(--neutral-light);

  /* Switch label */
  --switch-label-gap: var(--spacing-sm); /* 8px */
  --switch-label-color: var(--neutral-darkest);
  --switch-label-font-size: var(--font-body-md-size);

  /* Switch focus ring */
  --switch-focus-ring: var(--focus-ring-primary);

  /* Switch transition */
  --switch-transition: var(--transition-fast);

  /* ==========================================================================
     LINE-HEIGHT TOKENS (Component-specific)
     For UI components that need fixed line-heights (menus, pagination, etc.)
     ========================================================================== */

  /* Menu item line-heights */
  --line-height-menu-item: 40px;
  --line-height-menu-item-compact: 32px;
  --line-height-menu-item-mobile: 48px;

  /* Pagination line-heights */
  --line-height-pagination: 26px;

  /* Steps/stepper line-heights */
  --line-height-step-icon: 28px;

  /* Select dropdown line-heights */
  --line-height-select-item: 20px;

  /* ==========================================================================
     SPECIAL SPACING TOKENS
     One-off spacing values for specific UI patterns
     ========================================================================== */

  /* IP Lounge menu separator spacing */
  --spacing-menu-ip-lounge: 120px;

  /* Fade effect offset for scrollable tabs */
  --spacing-fade-offset: 40px;

  /* ==========================================================================
     POSITIONING TOKENS
     Fixed positions relative to layout elements
     ========================================================================== */

  /* Sticky positioning below header */
  --position-below-header: var(--header-height); /* 64px */

  /* Sticky positioning for tabs (header + search bar offset) */
  --position-sticky-tabs: 56px;

  /* Fixed counter position (header + banner + offset) */
  --position-counter-top: 120px;

  /* ==========================================================================
     BREAKPOINT TOKENS
     Standardized responsive breakpoints for media queries
     ========================================================================== */

  --breakpoint-xs: 480px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;

  /* ==========================================================================
     DARK MODE TOKENS
     Token overrides for dark color scheme
     Note: Apply via [data-theme="dark"] or @media (prefers-color-scheme: dark)
     ========================================================================== */

  /* Dark mode backgrounds */
  --color-dark-bg-app: #0f1419;
  --color-dark-bg-elevated: #1a1f26;
  --color-dark-bg-card: #1f2937;
  --color-dark-bg-hover: #2a3441;

  /* Dark mode text */
  --color-dark-text-default: #f3f7f8;
  --color-dark-text-secondary: #d2dcdf;
  --color-dark-text-tertiary: #96adb5;
  --color-dark-text-muted: #698a95;

  /* Dark mode borders */
  --color-dark-border-default: #374151;
  --color-dark-border-subtle: #2a3441;

  /* ==========================================================================
     GLASSMORPHISM / OVERLAY TOKENS
     Semi-transparent backgrounds for cards, modals, and overlays
     ========================================================================== */

  /* Glassmorphism backgrounds (frosted glass effect) */
  --color-glass-bg: rgba(255, 255, 255, 0.6);
  --color-glass-bg-hover: rgba(255, 255, 255, 0.8);
  --color-glass-bg-strong: rgba(255, 255, 255, 0.9);
  --color-glass-bg-subtle: rgba(255, 255, 255, 0.5);
  --color-glass-border-strong: rgba(255, 255, 255, 0.4);

  /* Dark overlay backgrounds (for content on dark/gradient backgrounds) */
  --color-overlay-bg-subtle: rgba(255, 255, 255, 0.1);
  --color-overlay-bg-light: rgba(255, 255, 255, 0.2);
  --color-overlay-bg-medium: rgba(255, 255, 255, 0.35);
  --color-overlay-bg-strong: rgba(255, 255, 255, 0.7);
  --color-overlay-border: rgba(255, 255, 255, 0.3);
  --color-overlay-border-strong: rgba(255, 255, 255, 0.5);

  /* Text on dark/overlay backgrounds */
  --color-overlay-text: rgba(255, 255, 255, 0.9);
  --color-overlay-text-muted: rgba(255, 255, 255, 0.8);

  /* Scrim/backdrop overlays */
  --color-scrim-light: rgba(0, 0, 0, 0.2);
  --color-scrim-medium: rgba(0, 0, 0, 0.5);

  /* ==========================================================================
     STATUS-SPECIFIC SHADOW TOKENS
     Colored shadows for status indicators and celebrations
     ========================================================================== */

  /* Success shadows */
  --shadow-success: 0 4px 12px rgba(0, 212, 100, 0.3);

  /* Danger shadows */
  --shadow-danger-lg: 0 8px 24px rgba(255, 77, 85, 0.3);

  /* Pilot/accent shadows */
  --shadow-pilot: 0 4px 12px rgba(79, 70, 229, 0.3);
  --shadow-pilot-lg: 0 6px 16px rgba(79, 70, 229, 0.4);
  --shadow-pilot-xl: 0 8px 32px rgba(79, 70, 229, 0.3);

  /* ==========================================================================
     CARD INTERACTIVE TOKENS
     Hover and focus states for card components
     ========================================================================== */

  /* Card hover effects */
  --shadow-card-hover: 0 4px 16px rgba(0, 78, 216, 0.12);
  --color-border-card-hover: rgba(0, 78, 216, 0.06);

  /* Primary interactive backgrounds */
  --color-primary-bg-subtle: rgba(0, 78, 216, 0.08);
  --color-primary-bg-light: rgba(0, 78, 216, 0.1);

  /* ==========================================================================
     ANIMATION SHADOW TOKENS
     Shadows for pulse and glow animations
     ========================================================================== */

  /* Pulse animation shadows */
  --shadow-pulse-primary: 0 0 0 0 rgba(0, 78, 216, 0.4);
  --shadow-pulse-primary-end: 0 0 0 10px rgba(0, 78, 216, 0);
  --shadow-pulse-success: 0 0 0 0 rgba(82, 196, 26, 0.4);
  --shadow-pulse-success-end: 0 0 0 8px rgba(82, 196, 26, 0.1);

  /* Glow effects */
  --shadow-glow-primary: 0 0 20px rgba(0, 78, 216, 0.3);
  --shadow-glow-primary-lg: 0 0 30px rgba(0, 78, 216, 0.5);
  --shadow-glow-success: 0 0 20px rgba(82, 196, 26, 0.3);
  --shadow-glow-warning: 0 8px 24px rgba(168, 85, 247, 0.3);
  --shadow-glow-gold: 0 8px 24px rgba(212, 160, 23, 0.3);
  --shadow-glow-scrim: 0 2px 6px rgba(0, 0, 0, 0.3);

  /* ==========================================================================
     PROVIDER MATCH STATUS TOKENS
     Status-specific backgrounds and borders for provider matching
     ========================================================================== */

  /* Match status backgrounds */
  --color-match-success-bg: rgba(240, 253, 244, 0.8);
  --color-match-success-border: rgba(34, 197, 94, 0.2);
  --color-match-warning-bg: rgba(255, 251, 235, 0.9);
  --color-match-warning-border: rgba(245, 158, 11, 0.3);
  --color-match-danger-bg: rgba(254, 242, 242, 0.9);
  --color-match-danger-border: rgba(239, 68, 68, 0.3);

  /* Match indicator colors */
  --color-match-indicator-success: rgba(82, 196, 26, 0.1);
  --color-match-indicator-border: rgba(82, 196, 26, 0.2);

  /* ==========================================================================
     CELEBRATION / GOLD TOKENS
     Gold glow effects for award celebrations and achievements
     ========================================================================== */

  /* Gold glow for celebrations */
  --color-gold-glow: rgba(255, 215, 0, 0.4);
  --color-gold-glow-outer: rgba(255, 215, 0, 0);
  --shadow-gold-celebration: drop-shadow(0 4px 12px rgba(255, 193, 7, 0.4));

  /* ==========================================================================
     CARD DECORATION TOKENS
     Background decoration colors for card elements
     ========================================================================== */

  /* Card decoration backgrounds */
  --color-decoration-light: rgba(255, 255, 255, 0.1);
  --color-decoration-neutral: rgba(107, 114, 128, 0.1);
  --color-decoration-dark: rgba(0, 0, 0, 0.3);

  /* ==========================================================================
     STEP/ICON SHADOW TOKENS
     Colored shadows for step indicators and icon containers
     ========================================================================== */

  /* Purple/pilot step shadow */
  --shadow-step-purple: 0 8px 24px rgba(114, 46, 209, 0.4);

  /* Pulse ring border */
  --color-pulse-ring: rgba(102, 126, 234, 0.3);

  /* ==========================================================================
     SECTION 3: COMPONENT PATTERN TOKENS
     ==========================================================================

     These tokens define complete component patterns used across the app.
     They combine primitive tokens into semantic, reusable patterns.

     USAGE:
       Instead of remembering that a "journey card" needs:
         background: var(--neutral-white);
         border-radius: var(--radius-md);
         box-shadow: var(--shadow-card-ui);
         border: none;

       You can reference:
         background: var(--surface-card-bg);
         border-radius: var(--surface-card-radius);
         box-shadow: var(--surface-card-shadow);
         border: var(--surface-card-border);

     GOLD STANDARDS:
       - Dashboard cards
       - Create Request Journey surfaces
     ========================================================================== */

  /* --------------------------------------------------------------------------
     SURFACE CARD (Primary content containers)
     Used for: Journey surfaces, dashboard cards, main content areas
     Example: CreateRequestJourney.module.css .journeySurface
     -------------------------------------------------------------------------- */
  --surface-card-bg: var(--neutral-white);
  --surface-card-radius: var(--radius-md); /* 12px */
  --surface-card-shadow: var(--shadow-card-ui);
  --surface-card-border: none;
  --surface-card-padding: var(--spacing-xl); /* 24px */

  /* Surface card header */
  --surface-card-header-padding: var(--spacing-lg) var(--spacing-xl); /* 16px 24px */
  --surface-card-header-bg: transparent;

  /* Surface card content */
  --surface-card-content-padding: var(--spacing-lg) var(--spacing-xl); /* 16px 24px */

  /* Surface card divider (between header and content) */
  --surface-card-divider-color: var(--neutral-lighter);
  --surface-card-divider-margin: 0 var(--spacing-xl); /* horizontal margin */

  /* --------------------------------------------------------------------------
     INFO CARD (Secondary content containers with subtle background)
     Used for: Stats boxes, metadata displays, info panels
     Example: ActiveProjectPage.module.css .infoItem
     -------------------------------------------------------------------------- */
  --info-card-bg: var(--neutral-lightest);
  --info-card-radius: var(--radius-sm); /* 8px */
  --info-card-border: 1px solid var(--neutral-lighter);
  --info-card-padding: var(--spacing-md) var(--spacing-lg); /* 12px 16px */

  /* --------------------------------------------------------------------------
     PROJECT CARD (List item cards with hover states)
     Used for: Project lists, provider cards, selectable items
     Example: EnhancedProjectCard.module.css .projectCard
     Note: Intentionally uses smaller radius than surface cards
     -------------------------------------------------------------------------- */
  --project-card-bg: var(--neutral-white);
  --project-card-radius: var(--radius-sm); /* 8px - smaller than surface */
  --project-card-border: 1px solid var(--neutral-lighter);
  --project-card-shadow: none;
  --project-card-shadow-hover: var(--shadow-card-hover);
  --project-card-border-hover: var(--primary);
  --project-card-min-height: 280px;

  /* --------------------------------------------------------------------------
     NAVIGATION BUTTON (Step navigation, form actions)
     Used for: Next/Back buttons, form submit buttons
     Example: CreateRequestJourney.module.css .navigationContainer
     -------------------------------------------------------------------------- */
  --nav-button-height: 40px;
  --nav-button-radius: var(--radius-sm); /* 8px */
  --nav-button-padding: 0 var(--spacing-xl); /* 0 24px */
  --nav-button-font-weight: var(--font-body-md-semibold-weight); /* 600 */

  /* Primary nav button */
  --nav-button-primary-bg: var(--primary);
  --nav-button-primary-bg-hover: var(--primary-dark);
  --nav-button-primary-border: var(--primary);
  --nav-button-primary-color: var(--neutral-white);

  /* Secondary nav button */
  --nav-button-secondary-bg: var(--neutral-white);
  --nav-button-secondary-border: 1px solid var(--neutral-light);
  --nav-button-secondary-color: var(--neutral-darkest);

  /* --------------------------------------------------------------------------
     SECTION TITLE (Content section headers with underline)
     Used for: Form section headers, collapsible section titles
     Example: CreateRequestJourney.module.css .sectionTitle
     -------------------------------------------------------------------------- */
  --section-title-color: var(--primary-light);
  --section-title-size: var(--font-h3-size); /* 16px */
  --section-title-weight: var(--font-h3-weight); /* 600 */
  --section-title-margin-bottom: var(--spacing-lg); /* 16px */
  --section-title-underline-width: 60px;
  --section-title-underline-height: 2px;
  --section-title-underline-color: var(--primary-light);
  --section-title-underline-opacity: 0.4;

  /* --------------------------------------------------------------------------
     STEP BADGE (Step indicators in journeys)
     Used for: Step numbers in multi-step forms
     Example: CreateRequestJourney.module.css .stepNumber
     -------------------------------------------------------------------------- */
  --step-badge-bg: var(--primary);
  --step-badge-color: var(--neutral-white);
  --step-badge-radius: var(--radius-lg); /* 16px - pill-like */
  --step-badge-padding: var(--spacing-xs) var(--spacing-md); /* 4px 12px */
  --step-badge-font-size: var(--font-body-sm-size); /* 12px */
  --step-badge-font-weight: var(--font-body-sm-semibold-weight); /* 600 */
  --step-badge-text-transform: uppercase;

  /* --------------------------------------------------------------------------
     GRID LAYOUTS (Dashboard and content grids)
     Used for: Dashboard layouts, card grids
     Example: ServicesView.module.css .dashboardGrid
     -------------------------------------------------------------------------- */
  --grid-column-gap: var(--spacing-lg); /* 16px */
  --grid-row-gap: var(--spacing-xl); /* 24px */

  /* Dashboard specific */
  --dashboard-grid-columns-desktop: 1fr 1fr 1fr;
  --dashboard-grid-columns-tablet: 1fr 1fr;
  --dashboard-grid-columns-mobile: 1fr;

  /* --------------------------------------------------------------------------
     MOBILE TOUCH TARGETS
     Minimum sizes for mobile accessibility
     -------------------------------------------------------------------------- */
  --touch-target-min-height: 44px;
  --touch-target-input-font-size: 16px; /* Prevents iOS zoom */
  --touch-target-checkbox-scale: 1.15;

  /* --------------------------------------------------------------------------
     INSIGHTS PANEL (Market data, AI insights, rate intelligence)
     Used for: Hourly rate insights, project insights, market intelligence
     Example: PricingStructureSection.module.css .hourlyRatesPanel
     Visual: Teal-tinted background with teal accent colors
     -------------------------------------------------------------------------- */
  --insights-panel-bg: var(--color-bg-insights);
  --insights-panel-border: 1px solid var(--color-border-insights);
  --insights-panel-radius: var(--radius-sm);
  --insights-panel-padding: var(--spacing-md);
  --insights-panel-padding-lg: var(--spacing-lg) var(--spacing-xl);

  /* Insights panel header */
  --insights-panel-header-gap: var(--spacing-xs);
  --insights-panel-header-margin-bottom: var(--spacing-sm);
  --insights-panel-icon-color: var(--insights);
  --insights-panel-icon-size: var(--font-h3-size);
  --insights-panel-title-color: var(--insights);
  --insights-panel-title-size: var(--font-body-md-size);
  --insights-panel-title-weight: var(--font-body-md-semibold-weight);
  --insights-panel-subtitle-color: var(--neutral-dark);

  /* Insights panel content */
  --insights-panel-value-color: var(--insights);
  --insights-panel-value-size: var(--font-h3-size);
  --insights-panel-value-weight: var(--font-body-md-bold-weight);
  --insights-panel-label-color: var(--neutral-dark);

  /* Insights panel items (rate boxes, metric cards) */
  --insights-panel-item-bg: var(--color-overlay-bg-strong);
  --insights-panel-item-bg-hover: var(--color-glass-bg-strong);
  --insights-panel-item-radius: var(--radius-sm);
  --insights-panel-item-padding: var(--spacing-sm);
  --insights-panel-item-shadow-hover: var(--shadow-card-hover);

  /* --------------------------------------------------------------------------
     GUIDANCE CARD (Educational/onboarding content, collapsible)
     Used for: "What happens next" steppers, help content, onboarding
     Example: NextStepsCard.module.css .nextStepsWrapper
     Visual: Subtle neutral background, collapsible, lighter treatment
     -------------------------------------------------------------------------- */
  --guidance-card-bg: var(--neutral-lightest);
  --guidance-card-border: 1px solid var(--neutral-lighter);
  --guidance-card-radius: var(--radius-sm);
  --guidance-card-padding: var(--spacing-lg) var(--spacing-xl);
  --guidance-card-padding-collapsed: var(--spacing-md) var(--spacing-xl);

  /* Guidance card header */
  --guidance-card-header-gap: var(--spacing-xs);
  --guidance-card-header-margin-bottom: var(--spacing-lg);
  --guidance-card-icon-color: var(--neutral-dark);
  --guidance-card-icon-size: var(--icon-size-lg);
  --guidance-card-title-color: var(--neutral-darker);
  --guidance-card-title-size: var(--font-body-md-size);
  --guidance-card-title-weight: var(--font-body-md-semibold-weight);

  /* Guidance card toggle button */
  --guidance-card-toggle-color: var(--primary);
  --guidance-card-toggle-color-hover: var(--primary-dark);
  --guidance-card-toggle-bg-hover: var(--neutral-lighter);
  --guidance-card-toggle-size: var(--font-body-sm-size);
  --guidance-card-toggle-weight: var(--font-body-md-semibold-weight);
  --guidance-card-toggle-padding: var(--spacing-xs) var(--spacing-sm);
  --guidance-card-toggle-radius: var(--radius-xs);

  /* Guidance card step items */
  --guidance-card-step-icon-size: 48px;
  --guidance-card-step-icon-size-mobile: 40px;
  --guidance-card-step-icon-bg: var(--neutral-white);
  --guidance-card-step-icon-border: 1px solid var(--neutral-light);
  --guidance-card-step-icon-color: var(--neutral-darker);
  --guidance-card-step-icon-color-final: var(--success-dark);
  --guidance-card-step-title-color: var(--neutral-darker);
  --guidance-card-step-title-size: var(--font-body-sm-size);
  --guidance-card-step-title-weight: var(--font-body-md-semibold-weight);
  --guidance-card-step-duration-bg: var(--neutral-white);
  --guidance-card-step-duration-color: var(--neutral-dark);

  /* Guidance card step badges */
  --guidance-card-badge-size: 18px;
  --guidance-card-badge-size-mobile: 16px;
  --guidance-card-badge-bg: var(--neutral-dark);
  --guidance-card-badge-color: var(--neutral-white);
  --guidance-card-badge-border: 2px solid var(--neutral-lightest);

  /* Guidance card connectors */
  --guidance-card-connector-color: var(--neutral-light);
  --guidance-card-connector-width: 32px;
  --guidance-card-connector-height: 1px;

  /* ==========================================================================
     BID COMPARISON PROVIDER COLORS
     Subtle colors for visual distinction between provider bids
     ========================================================================== */

  --provider-1-border: #e6f4ff;
  --provider-1-bg: #f0f7ff;
  --provider-2-border: #fff1e6;
  --provider-2-bg: #fff7f0;
  --provider-3-border: #e6ffe6;
  --provider-3-bg: #f0fff0;
  --provider-4-border: #f3e6ff;
  --provider-4-bg: #f8f0ff;
  --provider-5-border: #fff0f0;
  --provider-5-bg: #fff5f5;
}
/*
 * Agora whitelabel brand override.
 *
 * The Dennemeyer accent is the tertiary ORANGE scale (--tertiary*, #ff6700).
 * Agora replaces it with the high-visibility purple (the --warning* scale) so
 * no Dennemeyer brand color ships to the growth site. Everything else stays
 * identical — only the accent hue changes.
 *
 * Kept OUT of tokens.css on purpose: tokens.css is the single source the token
 * generator parses, so this override lives here and is imported right after it.
 * Activated by `data-brand="agora"` on <html>, set from the VITE_WHITELABEL
 * build env (and the runtime whitelabel flag) — see index.tsx / FeatureFlagContext.
 */
:root[data-brand="agora"] {
  --tertiary-lightest: var(--warning-lightest);
  --tertiary-lighter: var(--warning-lighter);
  --tertiary-light: var(--warning-light);
  --tertiary: var(--warning);
  --tertiary-dark: var(--warning-dark);
  --tertiary-darker: var(--warning-darker);
}
/**
 * App Global Styles
 *
 * This file has been split into focused modules for maintainability.
 * All styles are imported here to maintain backwards compatibility.
 *
 * Module structure:
 * - styles/app/base.css: Body, HTML, root, fonts, typography
 * - styles/app/buttons.css: All Ant Design button overrides
 * - styles/app/form-elements.css: Inputs, selects, checkboxes, radios, switches
 * - styles/app/notifications.css: Notification dropdown styles
 * - styles/app/menu-sidebar.css: Menu and sidebar styles
 * - styles/app/steps.css: Steps component styles
 * - styles/app/cards-animations.css: Card and animation styles
 * - styles/app/overlay-forms.css: Overlay and form group styles
 * - styles/app/app-layout.css: App layout and component styles
 * - styles/app/responsive.css: Mobile and responsive styles
 */

/* Base/Reset Styles - Body, HTML, root, fonts */

/* Import our custom fonts - ensure they load before other styles */

/* Inter Variable Font - self-hosted for GDPR compliance */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-variable-Dx4kXJAl.woff2") format("woff2");
}

/* Source Sans Pro Font Family - self-hosted for GDPR compliance */

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/source-sans-pro-300-CZ_9kMX2.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/source-sans-pro-400-DGyR1GMK.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/source-sans-pro-600-CnYPpd8X.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/source-sans-pro-700-D4anX_jJ.woff2") format("woff2");
}

/* Flag Icons - Using Unicode flag emojis for better deployment compatibility */

.flag-emoji {
  font-family:
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji",
    sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
}

/* Fallback flag classes using CSS background for better compatibility */

.fi {
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em;
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  font-style: normal;
}

.fi:before {
  content: "\00a0";
}

/* Common flags with embedded SVG data URIs for deployment compatibility */

.fi-us {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3e%3cg fill-rule='evenodd'%3e%3cg stroke-width='1pt'%3e%3cpath fill='%23bd3d44' d='M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z' transform='scale(2.6)'/%3e%3cpath fill='%23fff' d='M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z' transform='scale(2.6)'/%3e%3c/g%3e%3cpath fill='%23192f5d' d='M0 0h98.8v70H0z' transform='scale(2.6)'/%3e%3cg fill='%23fff'%3e%3cg id='d'%3e%3cg id='c'%3e%3cg id='e'%3e%3cg id='b'%3e%3cpath id='a' d='M247 28l2.4.7.7 2.4L247 28z' transform='scale(2.6)'/%3e%3cuse href='%23a' transform='scale(-1 1)' x='13'/%3e%3c/g%3e%3cuse href='%23b' transform='rotate(72 6.5 14)'/%3e%3c/g%3e%3cuse href='%23c' transform='rotate(-72 6.5 14)'/%3e%3cuse href='%23c' transform='rotate(72 6.5 14)'/%3e%3c/g%3e%3cuse href='%23d' transform='matrix(-1 0 0 1 247 0)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}

.fi-gb {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3e%3cpath fill='%23012169' d='M0 0h640v480H0z'/%3e%3cpath fill='%23FFF' d='m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z'/%3e%3cpath fill='%23C8102E' d='m424 281 216 159v40L369 281h55zm-184 20 6 35L54 480H0l246-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z'/%3e%3cpath fill='%23FFF' d='M241 0v480h160V0H241zM0 160v160h640V160H0z'/%3e%3cpath fill='%23C8102E' d='M0 193v96h640v-96H0zM273 0v480h96V0h-96z'/%3e%3c/svg%3e");
}

.fi-de {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3e%3cpath fill='%23000' d='M0 0h640v160H0z'/%3e%3cpath fill='%23dc143c' d='M0 160h640v160H0z'/%3e%3cpath fill='%23ffce00' d='M0 320h640v160H0z'/%3e%3c/svg%3e");
}

.fi-fr {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3e%3cpath fill='%23fff' d='M0 0h640v480H0z'/%3e%3cpath fill='%23002654' d='M0 0h213.3v480H0z'/%3e%3cpath fill='%23ce1126' d='M426.7 0H640v480H426.7z'/%3e%3c/svg%3e");
}

.fi-es {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3e%3cpath fill='%23aa151b' d='M0 0h640v480H0z'/%3e%3cpath fill='%23f1bf00' d='M0 120h640v240H0z'/%3e%3c/svg%3e");
}

.fi-it {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3e%3cpath fill='%23fff' d='M0 0h640v480H0z'/%3e%3cpath fill='%23009246' d='M0 0h213.3v480H0z'/%3e%3cpath fill='%23ce2b37' d='M426.7 0H640v480H426.7z'/%3e%3c/svg%3e");
}

.fi-nl {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3e%3cpath fill='%23fff' d='M0 0h640v480H0z'/%3e%3cpath fill='%23ae1c28' d='M0 0h640v160H0z'/%3e%3cpath fill='%2321468b' d='M0 320h640v160H0z'/%3e%3c/svg%3e");
}

/* Ensure font loading for deployment environments */

body {
  font-display: swap;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* Keep gutter space so modal scroll lock doesn't cause width jump */
  scrollbar-gutter: stable both-edges;
  background-color: var(--neutral-lightest);
  font-family: var(--font-family-base);
}

#root {
  margin: 0;
  padding: 0;
}

/* Set default font family for the entire application */

* {
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

/* Reset default margins and ensure no horizontal scroll */

html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* The viewport scrollbar lives on <html>; always reserve its gutter so page
     width stays constant whether or not content scrolls (matches body). */
  scrollbar-gutter: stable both-edges;
  background-color: var(--neutral-lightest);
}

/* Transparent tabs */

.transparent-tabs .ant-tabs-nav {
  background: transparent;
}

.transparent-tabs .ant-tabs-nav::before {
  display: none;
}

.transparent-tabs .ant-tabs-nav-wrap {
  background: transparent;
}

.transparent-tabs .ant-tabs-content-holder {
  background: transparent;
}

/* Breadcrumb reset */

.ant-breadcrumb {
  margin: 0;
  padding: 0;
}

.ant-breadcrumb ol {
  margin: 0;
  margin-left: 0;
  padding: 0;
  padding-left: 0;
  padding-inline-start: 0;
  list-style: none;
}

.ant-breadcrumb li:first-child {
  padding-left: 0;
  margin-left: 0;
}

.ant-breadcrumb-link,
.ant-breadcrumb-link a {
  margin: 0;
  margin-left: 0;
}

/* Typography */

.ant-typography {
  font-family:
    "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: all var(--duration-fast) var(--ease-in-out);
}

/* Layout overflow */

.ant-layout {
  overflow-x: hidden;
}

.ant-layout-content {
  overflow-x: hidden;
}

/* Override any link colors */

a {
  color: var(--secondary);
}

a:hover {
  color: var(--secondary-light);
}

/* Remove divider */

.ant-divider {
  display: none;
}

/* Search title visibility */

.search-title {
  display: block;
  visibility: visible;
  opacity: 1;
  color: var(--neutral-black);
}

/* Button Styling - All Ant Design button overrides */

/* All buttons - pill shape per Figma */

.ant-btn {
  border-radius: var(--button-radius);
  font-weight: var(--font-weight-semibold);
}

/* Primary button - filled style */

.ant-btn-primary {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
  box-shadow: var(--shadow-button-primary);
}

.ant-btn-primary:hover:not(:disabled) {
  background: var(--button-primary-bg-hover);
  border-color: var(--button-primary-bg-hover);
  box-shadow: var(--shadow-button-primary-hover);
}

/* Secondary/Default button - outlined style with 2px border */

.ant-btn-default {
  background: var(--button-secondary-bg);
  border: var(--button-secondary-border-width) solid
    var(--button-secondary-border);
  color: var(--button-secondary-text);
}

.ant-btn-default:hover:not(:disabled) {
  background: var(--button-secondary-bg);
  border: var(--button-secondary-border-width-hover) solid
    var(--button-secondary-border-hover);
  color: var(--button-secondary-text-hover);
}

/* Ghost/Text button - tertiary style */

.ant-btn-text,
.ant-btn-link {
  background: var(--button-tertiary-bg);
  color: var(--button-tertiary-text);
}

.ant-btn-text:hover:not(:disabled),
.ant-btn-link:hover:not(:disabled) {
  background: var(--button-tertiary-bg-hover);
  color: var(--button-tertiary-text);
}

/* Disabled buttons */

.ant-btn:disabled,
.ant-btn[disabled] {
  background: var(--button-disabled-bg);
  border-color: var(--button-disabled-bg);
  color: var(--button-disabled-text);
}

/* Button sizes from Figma */

.ant-btn-sm {
  height: var(--button-height-sm);
  padding: var(--button-padding-sm);
}

.ant-btn:not(.ant-btn-sm):not(.ant-btn-lg) {
  height: var(--button-height-md);
  padding: var(--button-padding-md);
}

.ant-btn-lg {
  height: var(--button-height-lg);
  padding: var(--button-padding-md);
}

/* Icon gap */

.ant-btn > .anticon + span,
.ant-btn > span + .anticon {
  margin-inline-start: var(--button-gap);
}

/* Dropdown trigger buttons - keep pill shape */

.ant-btn[role="combobox"],
.ant-dropdown .ant-btn {
  border-radius: var(--button-radius);
}

/* Global overrides for any remaining blue colors */

.ant-btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  border-radius: var(--radius-xl);
}

/* Quick action secondary button styling */

.quick-action-secondary-button:hover {
  background-color: var(--primary-lightest);
  color: var(--secondary);
  border-color: var(--secondary);
}

.ant-btn-primary:hover {
  background: var(--secondary);
  border-color: var(--secondary);
}

/* Enhanced hover effects for create request buttons */

.sidebar-create-request-button:hover,
.create-request-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-button-primary-hover) !important;
}

.ant-btn-primary:focus {
  background: var(--secondary);
  border-color: var(--secondary);
}

.ant-btn-primary:active {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* Form Elements - Inputs, selects, checkboxes, radios, switches */

/* Input fields - using form element tokens */

.ant-input,
.ant-input-affix-wrapper {
  border-radius: var(--input-radius);
  border-color: var(--input-border);
}

.ant-input:hover:not(:disabled),
.ant-input-affix-wrapper:hover:not(.ant-input-affix-wrapper-disabled) {
  border-color: var(--input-border-hover);
}

.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused {
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
}

.ant-input-status-error:not(.ant-input-disabled) {
  border-color: var(--input-border-error);
}

.ant-input-status-error:not(.ant-input-disabled):focus {
  box-shadow: var(--input-shadow-error);
}

/* Select components - using form element tokens */

.ant-select-selector,
.ant-select .ant-select-selector,
.ant-select-single .ant-select-selector,
.ant-select-multiple .ant-select-selector {
  border-radius: var(--select-radius);
  border-color: var(--select-border);
}

/* Fix stretched text in Select input display */

.ant-select .ant-select-selection-item {
  text-align: left !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

.ant-select .ant-select-selector {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* Override antd's emoji-only font stack on all dropdown/popup elements */

.ant-select-dropdown,
.ant-select-item,
.ant-select-item-option,
.ant-select-item-option-content,
.ant-select-selection-item,
.ant-auto-complete-option,
.ant-auto-complete .ant-select-selector,
.ant-dropdown,
.ant-dropdown-menu,
.ant-dropdown-menu-item,
.ant-cascader-dropdown,
.ant-cascader-menu,
.ant-cascader-menu-item,
.ant-mentions-dropdown,
.ant-mentions-dropdown-menu-item,
.ant-tree-select-dropdown,
.ant-popover-inner-content {
  font-family:
    "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Select dropdown - using form element tokens */

.ant-select-dropdown {
  border-radius: var(--select-dropdown-radius);
  box-shadow: var(--select-dropdown-shadow);
  /* Inset padding so the rounded option highlights don't touch the edges */
  padding: var(--select-dropdown-padding);
}

/* Roomy option rows: label + selected checkmark on one flex row, with the
   spacious vertical padding/height the design tokens were defined for. */

.ant-select-dropdown .ant-select-item {
  display: flex;
  align-items: center;
  border-radius: var(--select-option-radius);
  padding: var(--select-option-padding-y) var(--select-option-padding-x);
  margin: 0;
  min-height: var(--select-option-height);
  line-height: var(--line-height-select-item);
  text-align: left !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

.ant-select-dropdown .ant-select-item-option-content {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
  white-space: normal !important;
}

.ant-select-dropdown .ant-select-item-option-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-left: var(--spacing-sm);
}

.ant-select-dropdown
  .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  background: var(--select-option-bg-hover);
}

.ant-select-dropdown
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background: var(--select-option-bg-selected);
  color: var(--select-option-text-selected);
  font-weight: var(--font-weight-medium);
}

/* Select trigger states */

.ant-select:not(.ant-select-disabled):hover .ant-select-selector {
  border-color: var(--select-border-hover);
}

.ant-select-focused:not(.ant-select-disabled).ant-select:not(
    .ant-select-customize-input
  )
  .ant-select-selector {
  border-color: var(--select-border-focus);
  box-shadow: var(--select-shadow-focus);
}

/* Checkbox - using form element tokens */

.ant-checkbox-inner {
  border-radius: var(--checkbox-radius);
  border-color: var(--checkbox-border);
}

.ant-checkbox:hover .ant-checkbox-inner {
  border-color: var(--checkbox-border-hover);
}

.ant-checkbox-checked .ant-checkbox-inner {
  background-color: var(--checkbox-bg-checked);
  border-color: var(--checkbox-border-checked);
}

.ant-checkbox-checked:hover .ant-checkbox-inner {
  background-color: var(--checkbox-bg-checked-hover);
  border-color: var(--checkbox-border-checked-hover);
}

.ant-checkbox-indeterminate .ant-checkbox-inner {
  background-color: var(--checkbox-bg-indeterminate);
  border-color: var(--checkbox-border-indeterminate);
}

/* Radio - using form element tokens (UI Kit: white bg with blue dot) */

.ant-radio-inner {
  border-color: var(--radio-border) !important;
  background-color: var(--radio-bg) !important;
}

.ant-radio:hover .ant-radio-inner {
  border-color: var(--radio-border-hover) !important;
}

.ant-radio-checked .ant-radio-inner {
  border-color: var(--radio-border-checked) !important;
  background-color: var(--radio-bg-checked) !important;
}

.ant-radio-checked .ant-radio-inner::after {
  background-color: var(--radio-dot-color) !important;
}

.ant-radio-checked:hover .ant-radio-inner {
  border-color: var(--radio-border-checked-hover) !important;
  background-color: var(--radio-bg-checked) !important;
}

.ant-radio-checked:hover .ant-radio-inner::after {
  background-color: var(--radio-dot-color-hover) !important;
}

/* Radio button wrapper */

.ant-radio-button-wrapper:not(:first-child)::before {
  display: none;
}

.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  color: var(--primary);
  border-color: var(--primary);
}

/* Switch - using form element tokens (green ON state per Figma) */

.ant-switch {
  background: var(--switch-track-bg-off);
}

.ant-switch:hover:not(.ant-switch-disabled) {
  background: var(--switch-track-bg-off-hover);
}

.ant-switch-checked {
  background: var(--switch-track-bg-on);
}

.ant-switch-checked:hover:not(.ant-switch-disabled) {
  background: var(--switch-track-bg-on-hover);
}

.ant-switch-disabled {
  background: var(--switch-track-bg-disabled);
}

/* Override any tabs indicators */

.ant-tabs-ink-bar {
  background: var(--primary);
}

.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--primary);
}

/* Override any progress bars */

.ant-progress-bg {
  background: var(--secondary);
}

/* Override any loading spinners */

.ant-spin-dot-item {
  background: var(--secondary);
}

/* Catch-all for any remaining blue elements */

/* token-check-allow — selector matches the legacy color to override it */

*[style*="rgb(24, 144, 255)"] {
  color: var(--secondary);
}

/* token-check-allow — selector matches the legacy color to override it */

*[style*="#1890ff"] {
  color: var(--secondary);
}

/* Notification Dropdown Styles */

/* Enhanced Notification Dropdown Styles */

.notification-dropdown-overlay {
  z-index: var(--z-modal) !important;
}

.notification-dropdown-overlay.enhanced .ant-dropdown,
.notification-dropdown-overlay.enhanced .ant-dropdown-menu {
  padding: 0 !important;
  max-height: inherit !important;
  overflow: visible;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--radius-sm) !important;
}

/* Notification Bell Button */

.notification-bell-btn {
  font-size: var(--font-h3-size) !important;
  height: auto !important;
  padding: var(--spacing-xs) !important;
  color: var(--neutral-darker) !important;
  transition: all var(--duration-normal) var(--ease-standard) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.notification-bell-btn:hover {
  color: var(--primary) !important;
  transform: scale(1.05);
}

.notification-badge .ant-badge-count {
  background: var(--danger);
  border: var(--border-width-thick) solid var(--neutral-white);
  box-shadow: var(--shadow-sm);
}

/* Header Controls */

.notification-header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--neutral-lightest);
  border-bottom: 1px solid var(--neutral-lighter);
  margin: 0 !important;
}

.notification-header-controls .header-actions {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.notification-header-controls .ant-btn {
  font-size: var(--font-body-sm-size);
  height: 24px;
  padding: 0 var(--spacing-xs);
  border-radius: var(--radius-xs);
}

/* Group Headers */

.group-header {
  font-size: var(--font-body-sm-size) !important;
  font-weight: var(--font-body-sm-semibold-weight) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--letter-spacing-wide) !important;
  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xxs)
    var(--spacing-md) !important;
  color: var(--neutral-dark) !important;
  background: var(--neutral-lightest) !important;
  margin: 0 !important;
}

/* Individual notification item wrapper */

.notification-item-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

.notification-dropdown-overlay.enhanced .ant-dropdown-menu-item {
  padding: 0 !important;
  min-height: auto !important;
  transition: all var(--duration-normal) var(--ease-standard) !important;
  border-bottom: 1px solid var(--neutral-lighter) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.notification-dropdown-overlay.enhanced .ant-dropdown-menu-item:last-child {
  border-bottom: none !important;
}

.notification-dropdown-overlay.enhanced .ant-dropdown-menu-item:hover,
.notification-dropdown-overlay.enhanced
  .ant-dropdown-menu-item.ant-dropdown-menu-item-active {
  background-color: var(--neutral-lightest) !important;
}

.notification-dropdown-overlay.enhanced .ant-dropdown-menu-item.read {
  opacity: 0.7;
}

.notification-dropdown-overlay.enhanced .ant-dropdown-menu-item.unread {
  background: linear-gradient(
    90deg,
    var(--primary-lightest) 0%,
    transparent 4px
  );
  border-left: 4px solid var(--primary);
}

/* Notification content structure */

.notification-content {
  padding: var(--spacing-sm) var(--spacing-md);
  width: 100%;
}

.notification-header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  width: 100%;
}

.notification-icon {
  font-size: var(--font-h3-size);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  margin-top: var(--spacing-xxs);
}

.notification-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.notification-title {
  font-weight: var(--font-body-md-semibold-weight) !important;
  font-size: var(--font-body-md-size) !important;
  line-height: var(--font-body-md-line-height) !important;
  color: var(--neutral-darkest) !important;
  display: block !important;
  margin-bottom: var(--spacing-xxs) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.notification-message {
  font-size: var(--font-body-sm-size) !important;
  line-height: var(--font-body-sm-line-height) !important;
  color: var(--neutral-dark) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
  margin-bottom: var(--spacing-xxs) !important;
}

.notification-time {
  font-size: var(--font-body-sm-size) !important;
  color: var(--neutral) !important;
  margin-top: var(--spacing-xxs) !important;
  display: block !important;
}

/* Action buttons */

.notification-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  flex-shrink: 0;
}

.mark-read-btn,
.delete-btn {
  padding: var(--spacing-xxs) !important;
  min-width: auto !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: var(--radius-xs) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.delete-btn {
  color: var(--danger) !important;
}

.mark-read-btn {
  color: var(--success) !important;
}

.mark-read-btn:hover {
  background-color: var(--success-lightest) !important;
  color: var(--success-dark) !important;
}

.delete-btn:hover {
  background-color: var(--danger-lightest) !important;
  color: var(--danger-darker) !important;
}

/* Show more button */

.show-more-btn {
  margin: var(--spacing-xs) var(--spacing-sm) !important;
  color: var(--primary) !important;
  border: 1px solid var(--neutral-light) !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-body-sm-size) !important;
  height: 32px !important;
}

.show-more-btn:hover {
  border-color: var(--primary) !important;
  background-color: var(--primary-lightest) !important;
}

/* Empty state */

.empty-notifications {
  padding: var(--spacing-xxl) var(--spacing-md);
  text-align: center;
  color: var(--neutral);
}

/* Virtual scrolling support */

.virtual-scroll-container {
  outline: none;
}

.virtual-notification-item {
  border-bottom: 1px solid var(--neutral-lighter);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-standard);
}

.virtual-notification-item:hover {
  background-color: var(--neutral-lightest);
}

.virtual-notification-item:last-child {
  border-bottom: none;
}

.virtual-notification-item.read {
  opacity: 0.7;
}

.virtual-notification-item.unread {
  background: linear-gradient(
    90deg,
    var(--primary-lightest) 0%,
    transparent 4px
  );
  border-left: 4px solid var(--primary);
}

/* Loading state improvements */

.notification-bell-btn.ant-btn-loading {
  opacity: 0.7;
}

.notification-bell-btn .anticon-loading {
  color: var(--primary);
}

/* Dividers in dropdown */

.notification-dropdown-overlay.enhanced .ant-dropdown-menu-item-divider {
  margin: 0 !important;
  background-color: var(--neutral-lighter) !important;
  height: 1px !important;
}

/* Mobile responsive adjustments */

@media (max-width: 640px) {
  .notification-dropdown-overlay.enhanced {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    max-width: none !important;
  }

  .notification-content {
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .notification-header {
    gap: var(--spacing-xs);
  }

  .notification-actions {
    flex-direction: row;
    gap: var(--spacing-xxs);
  }

  .mark-read-btn,
  .delete-btn {
    width: 20px !important;
    height: 20px !important;
  }

  .notification-header-controls {
    padding: var(--spacing-xs) var(--spacing-sm);
    flex-wrap: wrap;
  }

  .notification-header-controls .header-actions {
    margin-top: var(--spacing-xs);
  }
}

/* Menu & Sidebar Styles */

/* Custom menu styles */

.custom-menu .ant-menu-item {
  margin-bottom: 0px !important;
  margin-top: 0px !important;
  height: var(--line-height-menu-item-compact) !important;
  line-height: var(--line-height-menu-item-compact) !important;
  padding: var(--spacing-xxs) var(--spacing-md) !important;
  font-weight: var(--font-body-md-semibold-weight) !important;
}

.custom-menu .ant-menu-item + .ant-menu-item {
  margin-top: var(--spacing-xs) !important;
}

.custom-menu.ant-menu-inline {
  border-right: none !important;
}

/* Sidebar Menu Styles — aligned with the UI Kit nav tokens so the provider
   AntD Menu matches the recipient sidebar's visual language. */

.ant-menu-inline .ant-menu-item {
  color: var(--color-text-nav-default);
  font-weight: var(--font-weight-medium);
  margin: 0;
  position: relative;
  line-height: var(--line-height-menu-item);
  height: var(--line-height-menu-item);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Override SVG stroke weight inheritance for sidebar icons */

.ant-menu-inline .ant-menu-item svg {
  font-weight: var(--font-weight-light);
}

.ant-menu-inline .ant-menu-item svg path {
  stroke-width: 0.75;
}

.ant-menu-inline .ant-menu-item:hover {
  color: var(--neutral-darkest);
  background-color: var(--neutral-lighter);
}

.ant-menu-inline .ant-menu-item-selected {
  color: var(--color-text-nav-active);
  background-color: var(--color-fill-nav-active);
  font-weight: var(--font-weight-semibold);
}

/* More specific selector to maintain proper CSS cascade */

.ant-menu-inline .ant-menu-item .ant-menu-item-icon svg path {
  fill: currentColor;
}

.ant-menu-item-icon {
  position: static;
  transform: none;
  transition: none;
}

.ant-menu-inline-collapsed .ant-menu-item {
  padding: 0;
  margin: 0;
  position: relative;
  line-height: var(--line-height-menu-item);
  height: var(--line-height-menu-item);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* More specific selector to avoid conflicts with .ant-menu-inline .ant-menu-item svg path */

.ant-menu-inline .ant-menu-item .projects-icon path {
  fill: none;
}

/* Override Ant Design menu item spacing for IP Lounge item */

.ant-menu-item[data-menu-id*="ip-lounge"] {
  margin-top: var(--spacing-menu-ip-lounge);
  position: relative;
}

/* Set 0px vertical spacing for provider menu items */

[data-testid="sidebar-menu"]
  .ant-menu-item:has([data-testid="sidebar-requests-item"]) {
  margin-top: 0px;
}

/* Alternative approach for provider menu spacing */

.ant-menu-item[title="Requests"] {
  margin-top: 0px;
}

/* Title Frame */

.title-frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xl);
}

.title-frame > div {
  flex: 1;
  text-align: center;
}

/* Steps Component Styles */

/* Make clickable steps have pointer cursor */

.request-overlay-steps .ant-steps-item {
  cursor: pointer;
}

/* Steps Component */

.ant-steps .ant-steps-item-icon {
  width: var(--line-height-step-icon);
  height: var(--line-height-step-icon);
  line-height: var(--line-height-step-icon);
  font-size: var(--font-body-md-size);
}

.ant-steps-vertical > .ant-steps-item .ant-steps-item-icon {
  margin-right: var(--spacing-sm);
  width: var(--line-height-step-icon);
  height: var(--line-height-step-icon);
  line-height: var(--line-height-step-icon);
  font-size: var(--font-body-md-size);
}

.ant-steps-vertical {
  margin-top: var(--spacing-xl);
}

/* Request Steps (for RequestOverlay modal) */

.request-steps .ant-steps-item {
  margin-bottom: var(--spacing-sm);
}

.request-steps .ant-steps-item-container {
  display: flex;
  align-items: center;
}

.request-steps .ant-steps-item-title {
  font-size: var(--font-body-md-size);
  margin: 0;
  padding: 0;
  padding-top: 0;
  display: flex;
  align-items: center;
  height: var(--line-height-step-icon);
}

.request-steps .ant-steps-item-icon {
  margin-right: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--line-height-step-icon);
  width: var(--line-height-step-icon);
}

.request-steps .ant-steps-item-icon > .ant-steps-icon {
  line-height: var(--line-height-step-icon);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Request Overlay Steps Styling */

.request-overlay-steps .ant-steps-item-wait
  .ant-steps-item-icon
  .ant-steps-icon {
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.request-overlay-steps
  .ant-steps-item-process
  .ant-steps-item-icon
  .ant-steps-icon {
  color: var(--neutral-white);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.request-overlay-steps
  .ant-steps-item-finish
  .ant-steps-item-icon
  .ant-steps-icon {
  color: var(--neutral-white);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.request-overlay-steps .ant-steps-item-wait .ant-steps-item-icon {
  background-color: transparent;
  border-color: var(--secondary);
  border-width: var(--border-width-thick);
  display: flex;
  align-items: center;
  justify-content: center;
}

.request-overlay-steps .ant-steps-item-process .ant-steps-item-icon {
  background-color: var(--secondary);
  border-color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.request-overlay-steps .ant-steps-item-finish .ant-steps-item-icon {
  background-color: var(--secondary);
  border-color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stepper hover styles */

.request-overlay-steps .ant-steps-item:hover .ant-steps-icon {
  background-color: var(--primary-lightest);
  border-color: var(--primary);
}

.request-overlay-steps
  .ant-steps-item:hover
  .ant-steps-icon
  > .ant-steps-icon-dot {
  background-color: var(--primary);
}

.request-overlay-steps .ant-steps-item:hover .ant-steps-title {
  color: var(--primary);
}

.request-overlay-steps .ant-steps-item:hover .ant-steps-item-icon {
  color: var(--primary);
  background-color: var(--primary-lightest);
  border-color: var(--primary);
}

/* Cards & Animations */

/* Card base */

.ant-card {
  transition: all var(--duration-normal) var(--ease-in-out);
  transform: none;
  opacity: 1;
}

/* Hero Image Animation */

.hero-image-container {
  overflow: hidden;
  transition:
    height var(--duration-slow) var(--ease-in-out),
    opacity var(--duration-slow) var(--ease-in-out),
    padding var(--duration-slow) var(--ease-in-out);
}

.hero-image-container.visible {
  height: auto;
  opacity: 1;
  padding: var(--spacing-xl) var(--spacing-xl) 0 var(--spacing-xl);
  transform: translateY(0);
  transition:
    height var(--duration-slow) var(--ease-in-out),
    opacity var(--duration-slow) var(--ease-standard),
    padding var(--duration-slow) var(--ease-in-out),
    transform var(--duration-slow) var(--ease-standard);
}

.hero-image-container.hidden {
  height: 0;
  opacity: 0;
  padding: var(--spacing-sm) var(--spacing-xl);
  transform: translateY(-20px);
  transition:
    height var(--duration-slow) var(--ease-in-out),
    opacity var(--duration-slow) var(--ease-standard),
    padding var(--duration-slow) var(--ease-in-out),
    transform var(--duration-slow) var(--ease-standard);
  pointer-events: none;
}

/* Show More Button Animation */

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.show-more-clicked {
  animation: pulse 0.3s ease-in-out;
  background-color: var(--primary-light);
  transition: background-color var(--duration-slow) var(--ease-in-out);
}

/* Lawyer card animation */

.lawyer-card {
  opacity: 0;
  transform: translateY(100px);
  animation: pushUp 0.5s ease-out forwards;
}

@keyframes pushUp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Push-in animation for RequestReach */

.request-reach-push-in {
  opacity: 0;
  transform: translateX(100%);
  animation: pushIn 0.5s ease-out forwards;
}

@keyframes pushIn {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.lawyer-cards-container {
  justify-content: flex-start;
  margin-right: auto;
  margin-left: 0;
  text-align: left;
  display: flex;
  transform: none;
  transition: none;
}

/* Case type button hover */

.case-type-button:hover {
  color: var(--primary);
  background-color: var(--primary-lightest);
  border-color: var(--primary);
}

.case-type-button:hover * {
  color: var(--primary);
}

/* Hide carousel dots */

.slick-dots {
  display: none;
}

.slick-dots li {
  display: none;
}

.slick-dots li button {
  display: none;
}

/* Overlay & Form Styles */

/* Prevent any Ant Design components from causing horizontal scroll */

.ant-drawer .ant-drawer-content-wrapper {
  max-width: 100vw !important;
}

.ant-modal {
  max-width: calc(100vw - 32px) !important;
}

/* Overlay Header */

.overlay-header .ant-btn-text:hover {
  color: var(--neutral-darkest);
}

/* Card Radio Button Styles (for overlay form) */

.card-radio-button {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius-xxs);
  transition: all var(--duration-slow);
}

.card-radio-button:hover,
.card-radio-button.ant-radio-button-wrapper-checked {
  color: var(--primary);
  border-color: var(--primary);
  background-color: var(--primary-lightest);
}

.card-content {
  text-align: center;
  white-space: normal;
}

/* Case Card Styles (for overlay form) */

.case-card-radio-button {
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius-xxs);
  transition: all var(--duration-slow);
  padding: var(--spacing-md);
}

.case-card-radio-button:hover,
.case-card-radio-button.ant-radio-button-wrapper-checked {
  color: var(--primary);
  border-color: var(--primary);
  background-color: var(--primary-lightest);
}

.case-card-radio-button:hover .case-card-title,
.case-card-radio-button:hover .case-card-description,
.case-card-radio-button.ant-radio-button-wrapper-checked .case-card-title,
.case-card-radio-button.ant-radio-button-wrapper-checked
  .case-card-description {
  color: var(--primary);
}

.case-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.case-card-radio-button.ant-radio-button-wrapper .case-card-title {
  margin: 0 0 var(--spacing-xs) 0;
  transition: color var(--duration-slow);
}

.case-card-radio-button.ant-radio-button-wrapper .case-card-description {
  margin: 0;
  transition: color var(--duration-slow);
}

/* Enhanced Form Group Styling */

.form-group-card {
  background: var(--neutral-white);
  border: 1px solid var(--neutral-lighter);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--duration-slow) var(--ease-standard);
  position: relative;
}

.form-group-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.form-group-card .ant-form-item:last-child {
  margin-bottom: 0;
}

.form-group-title {
  font-size: var(--font-h3-size);
  font-weight: var(--font-body-md-semibold-weight);
  line-height: var(--font-h3-line-height);
  color: var(--neutral-darkest);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--neutral-lighter);
}

/* Mobile warning modal styles */

.mobile-warning-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body:has(.mobile-warning-modal) {
  overflow: hidden;
}

/* App Layout & Component Styles */

/* App Component Styles */

.app-layout {
  min-height: 100vh;
}

.app-content {
  padding: var(--spacing-lg);
}

.app-search-container {
  margin-bottom: var(--spacing-lg);
}

.app-search-input {
  width: 100%;
  max-width: 400px;
}

.app-error-boundary {
  padding: var(--spacing-lg);
  color: var(--danger);
}

.app-loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Pagination */

.legacy-theme .ant-pagination-item-active a {
  color: var(--neutral-white);
}

.ant-pagination-item-active a {
  color: var(--neutral-white);
}

/* Responsive Styles */

/* Mobile touch target improvements for dropdowns */

@media (max-width: 768px) {
  .ant-select-dropdown .ant-select-item {
    min-height: 44px;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-md);
    line-height: var(--font-h3-line-height);
  }

  .ant-select-dropdown .ant-select-item-option-content {
    font-size: var(--font-size-md);
  }

  .ant-select-dropdown .ant-select-selection-search-input {
    font-size: var(--font-size-md);
  }
}

/* Mobile touch scrolling fixes */

@media (max-width: 992px) {
  html,
  body {
    /* Enable smooth touch scrolling on mobile */
    -webkit-overflow-scrolling: touch;
    /* Ensure vertical scroll works */
    overflow-y: auto !important;
    overflow-x: hidden;
    /* Prevent scroll chaining / bounce */
    overscroll-behavior-y: contain;
  }

  .ant-layout {
    /* Allow vertical scrolling on layout */
    overflow-y: visible;
    overflow-x: hidden;
  }

  .ant-layout-content {
    /* Allow content to scroll naturally */
    overflow-y: visible;
    overflow-x: hidden;
  }

  /* Ensure the main content area can scroll */
  #root {
    min-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Tag Preset Remapping
 *
 * Ant Design's named Tag presets (color="blue", "green", …) render AntD's own
 * palette (#1890ff, #52c41a, …), which is not part of the UI Kit. These
 * overrides remap every preset used in the app onto the kit color scales, so
 * call sites can keep the simple `color="…"` API while staying on-brand.
 *
 * Mapping: blue→primary, geekblue→secondary, green→success, red→danger,
 * purple→warning, orange→tertiary, gold→gold scale.
 */

.ant-tag-blue {
  color: var(--primary);
  background: var(--primary-lightest);
  border-color: var(--primary-lighter);
}

.ant-tag-geekblue {
  color: var(--secondary);
  background: var(--primary-lightest);
  border-color: var(--primary-lighter);
}

.ant-tag-green {
  color: var(--success-dark);
  background: var(--success-lightest);
  border-color: var(--success-lighter);
}

.ant-tag-red {
  color: var(--danger-dark);
  background: var(--danger-lightest);
  border-color: var(--danger-lighter);
}

.ant-tag-purple {
  color: var(--warning-dark);
  background: var(--warning-lightest);
  border-color: var(--warning-lighter);
}

.ant-tag-orange {
  color: var(--tertiary-dark);
  background: var(--tertiary-lightest);
  border-color: var(--tertiary-lighter);
}

.ant-tag-gold {
  color: var(--gold-dark);
  background: var(--gold-lightest);
  border-color: var(--gold-light);
}

/* My Cases — highlight lead-window (lit-signal) asset rows */

.ipaf-lead-row > td {
  background: var(--warning-lightest);
}

.ipaf-lead-row:hover > td {
  background: var(--warning-lighter) !important;
}

/* Outlined (default-type) danger buttons must keep red text. The
   Button.defaultColor theme token (primary) otherwise leaks blue text into the
   red danger frame — blue-on-red looks broken. Solid danger buttons (white
   text on red) are unaffected because this only targets .ant-btn-default. */

.ant-btn-default.ant-btn-dangerous {
  color: var(--danger);
}

.ant-btn-default.ant-btn-dangerous:not(:disabled):not(.ant-btn-disabled):hover {
  color: var(--danger-dark);
  border-color: var(--danger-dark);
}

/* antd gives every focused button a primary (blue) focus outline
   (`.ant-btn:focus-visible { outline: <primary> solid 3px }`), which looks wrong
   as a blue halo around a red danger button. Recolor that outline to red for
   ALL danger button variants — outlined and solid, old `.ant-btn-dangerous` and
   new `.ant-btn-color-dangerous`. !important beats antd's runtime-injected rule. */

.ant-btn-dangerous:focus-visible,
.ant-btn-color-dangerous:focus-visible {
  outline-color: var(--danger) !important;
}

/* Tags / badges — the antd default (sharp corners, hairline border) looks dated.
   Make them soft pill chips app-wide: borderless, fully rounded, medium weight.
   Colored presets keep their tint; uncoloured tags get a soft neutral chip. antd
   injects tag styles after App.css at equal specificity, so shape/spacing
   overrides need !important. */

.ant-tag {
  border-radius: var(--radius-full) !important;
  border-color: transparent !important;
  padding-inline: 9px !important;
  font-weight: var(--font-weight-medium);
}

.ant-tag:not([class*="ant-tag-"]) {
  background: var(--neutral-lightest) !important;
  color: var(--neutral-darker) !important;
}