/* ==========================================================================
   Cayuse Design System — Components
   --------------------------------------------------------------------------
   Every declaration below resolves through the semantic layer in tokens.css.
   There are no raw hex values, no magic numbers outside the spacing scale.

   Naming: .cds-<block>__<element> --<modifier>, e.g.
       .cds-button  .cds-button--secondary  .cds-field__caption

   State strategy: real CSS states first (:hover, :focus-visible, :disabled).
   The .is-* classes exist ONLY so documentation can pin a state open for
   display. Never ship .is-hover in product code — use the pseudo-class.
   ========================================================================== */

/* ==========================================================================
   BASE
   ========================================================================== */

.cds {
  font-family: var(--font-family-primary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--container-text);
}

/* Shared focus treatment. Every interactive component uses this. */
.cds-focus-ring:focus-visible,
.cds-button:focus-visible,
.cds-link:focus-visible,
.cds-input:focus-visible,
.cds-textarea:focus-visible,
.cds-select:focus-visible,
.cds-tab:focus-visible,
.cds-toggle__control:focus-visible,
.cds-switch__option:focus-visible,
.cds-pagination__item:focus-visible,
.cds-breadcrumb__link:focus-visible,
.cds-menu-link:focus-visible,
.cds-prevnext:focus-visible,
.cds-skip-link:focus-visible {
  outline: var(--border-width-2) solid var(--focus-ring);
  outline-offset: var(--spacing-2);
}


/* ==========================================================================
   BUTTON
   Figma: Button [COMPONENT_SET]
   Type = Primary | Secondary | Icon Only
   Size = Standard | Small
   Icon = On | Off
   State = Disabled | Focused | Hovered | MainCTA
   ========================================================================== */

.cds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  box-sizing: border-box;
  min-height: 32px;
  padding: var(--spacing-8) var(--spacing-16);
  border: var(--border-width-1) solid transparent;
  border-radius: var(--radius-3);
  font-family: var(--font-family-primary);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--type-label-weight);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* --- Primary ---------------------------------------------------------- */
.cds-button--primary {
  background-color: var(--button-primary-background);
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
}
.cds-button--primary:hover:not(:disabled),
.cds-button--primary.is-hover {
  background-color: var(--button-primary-hover-background);
  border-color: var(--button-primary-hover-background);
}
.cds-button--primary:disabled,
.cds-button--primary.is-disabled {
  background-color: var(--button-primary-disabled-background);
  border-color: var(--button-primary-disabled-background);
  color: var(--button-primary-disabled-text);
  cursor: not-allowed;
}

/* --- Secondary -------------------------------------------------------- */
.cds-button--secondary {
  background-color: var(--button-secondary-background);
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-text);
}
.cds-button--secondary:hover:not(:disabled),
.cds-button--secondary.is-hover {
  background-color: var(--button-secondary-hover-background);
}
.cds-button--secondary:disabled,
.cds-button--secondary.is-disabled {
  background-color: var(--button-secondary-disabled-background);
  border-color: var(--disabled-text);
  color: var(--button-secondary-disabled-text);
  cursor: not-allowed;
}

/* --- Icon only -------------------------------------------------------- */
.cds-button--icon-only {
  width: 32px;
  min-width: 32px;
  padding: 0;
}
.cds-button--icon-only.cds-button--small {
  width: 24px;
  min-width: 24px;
}

/* --- Size ------------------------------------------------------------- */
.cds-button--small {
  min-height: 24px;
  padding: var(--spacing-2) var(--spacing-12);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
}

/* --- Main call to action ---------------------------------------------- */
/* Figma "MainCTA": the single most important action on the view. Visually a
   primary button; the modifier exists so a view can be audited for having
   exactly one. */
.cds-button--cta {
  font-size: var(--font-size-16);
  min-height: 40px;
  padding: var(--spacing-10) var(--spacing-24);
}

/* Pinned focus for documentation only */
.cds-button.is-focus {
  outline: var(--border-width-2) solid var(--focus-ring);
  outline-offset: var(--spacing-2);
}


/* ==========================================================================
   LINK
   Figma: Links [COMPONENT_SET]  Color = Black | Blue, Style = Default |
   Underlined | Hovered | Focused
   ========================================================================== */

.cds-link {
  color: var(--link-default);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cds-link:hover,
.cds-link.is-hover {
  color: var(--link-hover);
}
.cds-link--black {
  color: var(--container-text);
}
.cds-link--black:hover,
.cds-link--black.is-hover {
  color: var(--link-hover);
}
/* Standalone links in running text must stay underlined. This modifier is for
   links inside a nav or table cell where position already signals the target. */
.cds-link--bare {
  text-decoration: none;
}
.cds-link--bare:hover {
  text-decoration: underline;
}


/* ==========================================================================
   DIVIDER
   Figma: Divider [COMPONENT_SET]  Direction = Horizontal | Vertical
   ========================================================================== */

.cds-divider {
  border: 0;
  background-color: var(--divider-color);
  opacity: 0.4;
}
.cds-divider--horizontal {
  width: 100%;
  height: var(--border-width-1);
  margin: var(--spacing-16) 0;
}
.cds-divider--vertical {
  width: var(--border-width-1);
  height: 100%;
  min-height: var(--spacing-24);
  margin: 0 var(--spacing-16);
}


/* ==========================================================================
   FIELD  (shared wrapper for every input)
   Figma: Input Variants [COMPONENT_SET] — Label = Basic | Required | None,
   Descriptive Text = boolean, Error Text
   ========================================================================== */

.cds-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  max-width: 420px;
}
.cds-field__label {
  color: var(--input-label);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--type-label-weight);
}
.cds-field__required {
  color: var(--input-required);
  margin-left: var(--spacing-2);
}
.cds-field__caption {
  color: var(--input-caption);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
}
.cds-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  color: var(--input-error-caption);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: var(--font-weight-bold);
}


/* ==========================================================================
   TEXT INPUT / TEXTAREA / SELECT
   Figma: Text Input, Text Area, Select — State = Default | Focus | Disabled |
   Error
   ========================================================================== */

.cds-input,
.cds-textarea,
.cds-select {
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacing-6) var(--spacing-8);
  background-color: var(--input-background);
  border: var(--border-width-1) solid var(--input-border);
  border-radius: var(--radius-3);
  color: var(--input-text);
  font-family: var(--font-family-primary);
  font-size: var(--type-body-size);
  line-height: var(--line-height-20);
}
.cds-input,
.cds-select {
  height: 32px;
}
.cds-textarea {
  min-height: 80px;
  resize: vertical;
}

.cds-input::placeholder,
.cds-textarea::placeholder {
  color: var(--input-caption);
}

.cds-input:disabled,
.cds-textarea:disabled,
.cds-select:disabled,
.cds-input.is-disabled,
.cds-textarea.is-disabled {
  background-color: var(--input-disabled-background);
  color: var(--input-disabled-text);
  cursor: not-allowed;
}

.cds-input.is-error,
.cds-textarea.is-error,
.cds-select.is-error,
.cds-input[aria-invalid="true"],
.cds-textarea[aria-invalid="true"] {
  background-color: var(--input-error-background);
  border-color: var(--input-error-border);
  border-width: var(--border-width-2);
}

.cds-input.is-focus,
.cds-textarea.is-focus {
  outline: var(--border-width-2) solid var(--focus-ring);
  outline-offset: var(--spacing-2);
}

/* Input with a leading icon */
.cds-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.cds-input-group__icon {
  position: absolute;
  left: var(--spacing-8);
  color: var(--icon-accent-4);
  pointer-events: none;
  font-size: var(--font-size-14);
}
.cds-input-group__icon ~ .cds-input {
  padding-left: var(--spacing-32);
}

/* Select caret */
.cds-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--icon-accent-4) 50%),
                    linear-gradient(135deg, var(--icon-accent-4) 50%, transparent 50%);
  background-position: calc(100% - 16px) 14px, calc(100% - 11px) 14px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--spacing-32);
}


/* ==========================================================================
   CHECKBOX & RADIO
   Figma: Checkbox, Radio — Checked/Selected, State = Default | Disabled |
   Focused | Error
   ========================================================================== */

.cds-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  cursor: pointer;
  font-size: var(--type-body-size);
  line-height: var(--line-height-20);
}
.cds-choice__control {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: var(--spacing-2) 0 0;
  accent-color: var(--primary-brand-color);
  cursor: pointer;
}
.cds-choice__control:disabled {
  cursor: not-allowed;
}
.cds-choice:has(.cds-choice__control:disabled) {
  color: var(--disabled-text);
  cursor: not-allowed;
}
.cds-choice.is-error .cds-choice__control {
  outline: var(--border-width-2) solid var(--error-border);
  outline-offset: var(--spacing-1);
}
.cds-choice-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  border: 0;
  margin: 0;
  padding: 0;
}
.cds-choice-group--horizontal {
  flex-direction: row;
  gap: var(--spacing-24);
}


/* ==========================================================================
   TOGGLE
   Figma: Toggle [COMPONENT_SET]  Toggle = Off | On, State = Default |
   Focused | Disabled
   ========================================================================== */

.cds-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  cursor: pointer;
}
.cds-toggle__control {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 20px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-10);
  background-color: var(--toggle-off-background);
  cursor: pointer;
  transition: background-color 140ms ease;
}
.cds-toggle__control::after {
  content: "";
  position: absolute;
  top: var(--spacing-2);
  left: var(--spacing-2);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--toggle-off-indicator);
  transition: transform 140ms ease;
}
.cds-toggle__control:checked {
  background-color: var(--toggle-on-background);
}
.cds-toggle__control:checked::after {
  background-color: var(--toggle-on-indicator);
  transform: translateX(20px);
}
.cds-toggle__control:disabled {
  background-color: var(--toggle-disabled-background);
  cursor: not-allowed;
}
.cds-toggle:has(.cds-toggle__control:disabled) {
  color: var(--disabled-text);
  cursor: not-allowed;
}


/* ==========================================================================
   SWITCH  (segmented, two mutually exclusive options)
   Figma: Switch [COMPONENT_SET]  Selected = Left | Right, State = Default |
   Focus | Disabled
   ========================================================================== */

.cds-switch {
  display: inline-flex;
  border: var(--border-width-1) solid var(--primary-brand-color);
  border-radius: var(--radius-3);
  overflow: hidden;
}
.cds-switch__option {
  appearance: none;
  border: 0;
  padding: var(--spacing-6) var(--spacing-16);
  background-color: var(--switch-unselected-background);
  color: var(--switch-unselected-text);
  font-family: var(--font-family-primary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  cursor: pointer;
}
.cds-switch__option + .cds-switch__option {
  border-left: var(--border-width-1) solid var(--primary-brand-color);
}
.cds-switch__option[aria-pressed="true"],
.cds-switch__option.is-selected {
  background-color: var(--switch-selected-background);
  color: var(--switch-selected-text);
}
.cds-switch.is-disabled {
  border-color: var(--disabled-text);
}
.cds-switch.is-disabled .cds-switch__option {
  background-color: var(--disabled-background);
  color: var(--disabled-text);
  cursor: not-allowed;
  border-left-color: var(--disabled-text);
}


/* ==========================================================================
   TABS
   Figma: Tab Parts [COMPONENT_SET]  Active = On | Off, Focus = On | Off
   ========================================================================== */

.cds-tabs {
  display: flex;
  gap: 0;
  border-bottom: var(--border-width-1) solid var(--tab-border);
}
.cds-tab {
  appearance: none;
  background-color: transparent;
  border: 0;
  border-bottom: var(--border-width-3) solid transparent;
  padding: var(--spacing-8) var(--spacing-16);
  color: var(--tab-inactive-text);
  font-family: var(--font-family-primary);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  cursor: pointer;
}
.cds-tab:hover {
  color: var(--tab-active-text);
}
.cds-tab[aria-selected="true"],
.cds-tab.is-active {
  background-color: var(--tab-active-background);
  border-bottom-color: var(--tab-active-border);
  color: var(--tab-active-text);
  font-weight: var(--font-weight-bold);
}
.cds-tabpanel {
  padding: var(--spacing-16) 0;
}


/* ==========================================================================
   STATUS PILL
   Figma: Status Pill [COMPONENT_SET]  Color = Blue | Green | LightBlue |
   Custom | Orange | Yellow | Gray
   ========================================================================== */

.cds-status-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-12);
  border-radius: var(--radius-20);
  font-size: var(--type-caption-size);
  line-height: var(--line-height-16);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.cds-status-pill--blue        { background-color: var(--status-blue);        color: var(--status-text-light); }
.cds-status-pill--green       { background-color: var(--status-green);       color: var(--status-text-light); }
.cds-status-pill--orange      { background-color: var(--status-orange);      color: var(--status-text-light); }
.cds-status-pill--light-blue  { background-color: var(--status-light-blue);  color: var(--status-text-dark); }
.cds-status-pill--yellow      { background-color: var(--status-yellow);      color: var(--status-text-dark); }
.cds-status-pill--gray        { background-color: var(--status-gray);        color: var(--status-text-dark); }
.cds-status-pill--custom      { background-color: var(--status-custom);      color: var(--status-text-light); }


/* ==========================================================================
   DATA PILL
   Figma: Pills [COMPONENT_SET]  Pill Type = Default | Text Entry |
   Pending Approval
   ========================================================================== */

.cds-data-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  padding: var(--spacing-2) var(--spacing-8);
  background-color: var(--data-pill-background);
  border: var(--border-width-1) solid var(--data-pill-border);
  border-radius: var(--radius-3);
  color: var(--container-text);
  font-size: var(--type-caption-size);
  line-height: var(--line-height-16);
}
.cds-data-pill--pending {
  background-color: var(--data-pill-pending-background);
  border-style: dashed;
  border-color: var(--data-pill-pending-border);
  color: var(--data-pill-pending-text);
}
.cds-data-pill__remove {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--icon-accent-4);
  cursor: pointer;
  font-size: var(--font-size-12);
  line-height: 1;
}
.cds-data-pill__remove:hover {
  color: var(--error-text);
}


/* ==========================================================================
   BANNER ALERT
   Figma: Banner Alert [COMPONENT_SET]  Type = Error | Success | Warning |
   Neutral
   ========================================================================== */

.cds-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
  border: var(--border-width-1) solid transparent;
  border-left-width: var(--border-width-3);
  border-radius: var(--radius-3);
  font-size: var(--type-body-size);
  line-height: var(--line-height-20);
}
.cds-banner__icon { flex: 0 0 auto; margin-top: var(--spacing-2); }
.cds-banner__body { flex: 1 1 auto; }
.cds-banner__dismiss {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-size: var(--font-size-16);
  line-height: 1;
}
.cds-banner--success {
  background-color: var(--success-background);
  border-color: var(--success-border);
  color: var(--success-text);
}
.cds-banner--error {
  background-color: var(--error-background);
  border-color: var(--error-border);
  color: var(--error-text);
}
.cds-banner--warning {
  background-color: var(--warning-background);
  border-color: var(--warning-border);
  color: var(--warning-text);
}
.cds-banner--neutral {
  background-color: var(--neutral-background);
  border-color: var(--neutral-border);
  color: var(--container-text);
}


/* ==========================================================================
   TOOLTIP
   Figma: Toolip [COMPONENT]  tooltip-text, Stroke = boolean
   ========================================================================== */

.cds-tooltip {
  position: relative;
  display: inline-flex;
}
.cds-tooltip__trigger {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--spacing-2);
  color: var(--icon-primary);
  cursor: help;
  font-size: var(--font-size-14);
  line-height: 1;
}
.cds-tooltip__bubble {
  position: absolute;
  bottom: calc(100% + var(--spacing-8));
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  max-width: 250px;      /* hard cap from the Figma annotation */
  width: max-content;
  padding: var(--spacing-8) var(--spacing-12);
  background-color: var(--tooltip-background);
  color: var(--tooltip-text);
  border-radius: var(--radius-3);
  font-size: var(--type-caption-size);
  line-height: var(--line-height-16);
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
}
.cds-tooltip__bubble--stroke {
  border: var(--border-width-1) solid var(--tooltip-border);
}
.cds-tooltip:hover .cds-tooltip__bubble,
.cds-tooltip:focus-within .cds-tooltip__bubble,
.cds-tooltip.is-open .cds-tooltip__bubble {
  opacity: 1;
  visibility: visible;
}


/* ==========================================================================
   BREADCRUMB
   Figma: Breadcrumb/parts [COMPONENT_SET]  Part = Link | Text | Separator
   ========================================================================== */

.cds-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}
.cds-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cds-breadcrumb__link {
  color: var(--breadcrumb-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cds-breadcrumb__current {
  color: var(--breadcrumb-text);
  font-weight: var(--font-weight-bold);
}
.cds-breadcrumb__separator {
  color: var(--breadcrumb-separator);
  user-select: none;
}


/* ==========================================================================
   PAGE HEADING
   Figma: Page Heading [COMPONENT]  Breadcrumb? Status Label? Page Title?
   Subheading?
   ========================================================================== */

.cds-page-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-16) 0;
}
.cds-page-heading__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 0;
}
.cds-page-heading__title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  flex-wrap: wrap;
}
.cds-page-heading__title {
  margin: 0;
  font-size: var(--type-page-title-size);
  line-height: var(--type-page-title-line);
  font-weight: var(--type-page-title-weight);
  color: var(--container-text);
}
.cds-page-heading__subheading {
  margin: 0;
  font-size: var(--type-subheading-size);
  line-height: var(--type-subheading-line);
  font-weight: var(--type-subheading-weight);
  color: var(--text-secondary);
}
.cds-page-heading__actions {
  display: flex;
  gap: var(--spacing-8);
  flex-shrink: 0;
}


/* ==========================================================================
   SKIP LINK
   Figma: Skip Link [COMPONENT]
   ========================================================================== */

.cds-skip-link {
  position: absolute;
  left: var(--spacing-8);
  top: var(--spacing-8);
  z-index: 100;
  padding: var(--spacing-8) var(--spacing-16);
  background-color: var(--primary-brand-color);
  color: var(--on-brand-text);
  border-radius: var(--radius-3);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 120ms ease;
}
.cds-skip-link:focus,
.cds-skip-link.is-visible {
  transform: translateY(0);
}


/* ==========================================================================
   TABLE / DATA GRID
   Figma: Table Cells, Table Header, Table Footer, Full Table
   ========================================================================== */

.cds-table-wrap {
  border: var(--border-width-1) solid var(--container-border);
  border-radius: var(--radius-3);
  overflow: hidden;
}
.cds-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-8) var(--spacing-12);
  background-color: var(--container-background);
  border-bottom: var(--border-width-1) solid var(--table-header-border);
}
.cds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}
.cds-table th {
  background-color: var(--table-header-background);
  border-bottom: var(--border-width-1) solid var(--table-header-border);
  color: var(--table-header-text);
  font-weight: var(--font-weight-bold);
  text-align: left;
  padding: var(--spacing-8) var(--spacing-12);
  white-space: nowrap;
}
.cds-table td {
  background-color: var(--table-cell-background);
  border-bottom: var(--border-width-1) solid var(--table-cell-border);
  color: var(--table-cell-text);
  padding: var(--spacing-8) var(--spacing-12);
  vertical-align: top;
}
.cds-table tbody tr:hover td {
  background-color: var(--table-cell-hover);
}
.cds-table--numeric td,
.cds-table th.cds-table__cell--right,
.cds-table td.cds-table__cell--right {
  text-align: right;
}
.cds-table__sort {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
}
.cds-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-8) var(--spacing-12);
  background-color: var(--container-background);
  border-top: var(--border-width-1) solid var(--table-header-border);
}


/* ==========================================================================
   PAGINATION
   Figma: Pagination, Page Numbers, Arrow Buttons, Per Page Dropdown
   ========================================================================== */

.cds-pagination {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  flex-wrap: wrap;
}
.cds-pagination__list {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cds-pagination__item {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--spacing-6);
  background-color: var(--pagination-default-background);
  border: var(--border-width-1) solid var(--pagination-border);
  border-radius: var(--radius-3);
  color: var(--pagination-default-text);
  font-family: var(--font-family-primary);
  font-size: var(--type-body-size);
  cursor: pointer;
}
.cds-pagination__item:hover:not(:disabled) {
  background-color: var(--menu-hover);
}
.cds-pagination__item[aria-current="page"],
.cds-pagination__item.is-selected {
  background-color: var(--pagination-selected-background);
  border-color: var(--pagination-selected-background);
  color: var(--pagination-selected-text);
  font-weight: var(--font-weight-bold);
}
.cds-pagination__item:disabled {
  color: var(--pagination-disabled);
  border-color: var(--pagination-disabled);
  cursor: not-allowed;
}
.cds-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  color: var(--text-secondary);
  user-select: none;
}


/* ==========================================================================
   PREVIOUS / NEXT
   Figma: Previous/Next [COMPONENT_SET]  Step = Next | Previous,
   State = Disabled | Active
   ========================================================================== */

.cds-prevnext {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8);
  background: transparent;
  border: 0;
  border-radius: var(--radius-3);
  color: var(--primary-brand-color);
  font-family: var(--font-family-primary);
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  text-decoration: none;
}
.cds-prevnext:hover:not(:disabled) {
  text-decoration: underline;
}
.cds-prevnext:disabled,
.cds-prevnext.is-disabled {
  color: var(--navigation-disabled);
  cursor: not-allowed;
  text-decoration: none;
}
.cds-prevnext__name {
  font-weight: var(--font-weight-regular);
  color: var(--container-text);
}


/* ==========================================================================
   SIDE MENU
   Figma: Side Menu, Menu Link [COMPONENT_SET]  State = Active | Default |
   Focus | Hover, Menu = Closed | Default | Open | Sub
   ========================================================================== */

.cds-side-menu {
  width: 240px;
  border: var(--border-width-1) solid var(--menu-border);
  border-radius: var(--radius-3);
  background-color: var(--menu-background);
  overflow: hidden;
}
.cds-side-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cds-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-8) var(--spacing-12);
  background: transparent;
  border: 0;
  border-left: var(--border-width-3) solid transparent;
  color: var(--menu-text);
  font-family: var(--font-family-primary);
  font-size: var(--type-body-size);
  line-height: var(--line-height-20);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.cds-menu-link:hover {
  background-color: var(--menu-hover);
}
.cds-menu-link.is-active,
.cds-menu-link[aria-current="page"] {
  background-color: var(--menu-active);
  border-left-color: var(--navigation-active);
  color: var(--navigation-active);
  font-weight: var(--font-weight-bold);
}
.cds-side-menu__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--submenu-background);
}
.cds-side-menu__sublist .cds-menu-link {
  padding-left: var(--spacing-32);
  font-size: var(--type-body-size);
}


/* ==========================================================================
   TILES
   Figma: Tiles [COMPONENT]
   ========================================================================== */

.cds-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-16);
}
.cds-tile {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
  background-color: var(--tile-card-background);
  border: var(--border-width-1) solid var(--container-border);
  border-radius: var(--radius-3);
}
.cds-tile__count {
  color: var(--tile-count-text);
  font-size: var(--font-size-32);
  line-height: var(--line-height-28);
  font-weight: var(--font-weight-bold);
}
.cds-tile__title {
  margin: 0;
  color: var(--tile-title-text);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--type-label-weight);
}
.cds-tile__description {
  margin: 0;
  color: var(--tile-description-text);
  font-size: var(--type-caption-size);
  line-height: var(--line-height-16);
}
.cds-tile__action {
  margin-top: auto;
  color: var(--tile-action-text);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.cds-tile__action:hover {
  text-decoration: underline;
}


/* ==========================================================================
   CONTAINER  (legacy)
   Figma: Container [COMPONENT]  Content Area Slot
   ========================================================================== */

.cds-container {
  background-color: var(--container-background);
  border: var(--border-width-1) solid var(--container-border);
  border-radius: var(--radius-3);
  color: var(--container-text);
}
.cds-container__header {
  padding: var(--spacing-12) var(--spacing-16);
  border-bottom: var(--border-width-1) solid var(--container-border);
  font-size: var(--type-section-heading-size);
  line-height: var(--type-section-heading-line);
  font-weight: var(--type-section-heading-weight);
}
.cds-container__body {
  padding: var(--spacing-16);
}


/* ==========================================================================
   MODAL / CONFIRMATION ALERT / DRAWER
   Figma: Basic Modal, Confirmation Alert, Drawer, Lightbox Overlay
   ========================================================================== */

.cds-lightbox {
  position: absolute;
  inset: 0;
  background-color: rgb(17 17 17 / 25%);   /* Primary Black at 25% — Figma spec */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-24);
}
.cds-modal {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: 100%;
  background-color: var(--container-background);
  border-radius: var(--radius-3);
  box-shadow: 0 4px 16px rgb(17 17 17 / 20%);
  overflow: hidden;
}
.cds-modal--small { width: min(400px, 100%); }
.cds-modal__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-16) var(--spacing-24);
  border-bottom: var(--border-width-1) solid var(--container-border);
}
.cds-modal__title {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--type-section-heading-size);
  line-height: var(--type-section-heading-line);
  font-weight: var(--type-section-heading-weight);
}
.cds-modal__close {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--spacing-4);
  color: var(--icon-accent-4);
  cursor: pointer;
  font-size: var(--font-size-16);
  line-height: 1;
}
.cds-modal__close:hover { color: var(--container-text); }
.cds-modal__body {
  padding: var(--spacing-16) var(--spacing-24);
  overflow-y: auto;
  font-size: var(--type-body-size);
  line-height: var(--line-height-20);
}
.cds-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-24);
  border-top: var(--border-width-1) solid var(--container-border);
}

.cds-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 90%);
  display: flex;
  flex-direction: column;
  background-color: var(--container-background);
  border-left: var(--border-width-1) solid var(--container-border);
  box-shadow: -4px 0 16px rgb(17 17 17 / 12%);
}
.cds-drawer--full { width: 100%; }


/* ==========================================================================
   FILE UPLOAD
   Figma: File Upload [COMPONENT_SET]  State = Default | Ready | Uploading
   ========================================================================== */

.cds-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-width: 220px;      /* Figma annotation: min-width 220px */
  padding: var(--spacing-24);
  background-color: var(--dropzone-background);
  border: var(--border-width-2) dashed var(--dropzone-border);
  border-radius: var(--radius-3);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--line-height-20);
}
.cds-dropzone.is-dragover {
  background-color: var(--dropzone-active-background);
  border-color: var(--primary-brand-color);
  color: var(--primary-brand-color);
}
.cds-dropzone.is-uploading {
  border-style: solid;
  border-color: var(--primary-brand-color);
}


/* ==========================================================================
   FORM SECTION LIST
   Figma: Form Section List [COMPONENT], Section Icon [COMPONENT_SET]
   Status = Complete | Error | Not Viewed | Required | Eye
   ========================================================================== */

.cds-section-list {
  width: 280px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: var(--border-width-1) solid var(--container-border);
  border-radius: var(--radius-3);
  overflow: hidden;
  background-color: var(--container-background);
}
.cds-section-list__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-8) var(--spacing-12);
  border: 0;
  border-left: var(--border-width-3) solid transparent;
  background: transparent;
  font-family: var(--font-family-primary);
  font-size: var(--type-body-size);
  line-height: var(--line-height-20);
  text-align: left;
  cursor: pointer;
}
.cds-section-list__item + .cds-section-list__item {
  border-top: var(--border-width-1) solid var(--table-cell-border);
}
.cds-section-list__item:hover { background-color: var(--menu-hover); }
.cds-section-list__item.is-current {
  border-left-color: var(--navigation-active);
  background-color: var(--menu-active);
  font-weight: var(--font-weight-bold);
}
.cds-section-list__status {
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
  font-size: var(--font-size-12);
}
.cds-section-list__status--complete { color: var(--success-text); }
.cds-section-list__status--error    { color: var(--error-text); }
.cds-section-list__status--required { color: var(--error-text); }
.cds-section-list__status--todo     { color: var(--section-list-todo); }


/* ==========================================================================
   SCROLLBAR
   Figma: Scroll Bar [COMPONENT]
   ========================================================================== */

.cds-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.cds-scroll::-webkit-scrollbar { width: 10px; }
.cds-scroll::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
  border-radius: var(--radius-5);
}
.cds-scroll::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: var(--radius-5);
}
.cds-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}


/* ==========================================================================
   FOOTER
   Figma: Footer, Footer Items [COMPONENT_SET]
   ========================================================================== */

.cds-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-24);
  border-top: var(--border-width-1) solid var(--container-border);
  background-color: var(--container-background);
  font-size: var(--type-caption-size);
  line-height: var(--line-height-16);
  color: var(--footer-text);
}
.cds-footer__link {
  color: var(--link-default);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ==========================================================================
   SUITE HEADER / PRODUCT NAVIGATION  (Common Header pattern parts)
   ========================================================================== */

.cds-suite-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-8) var(--spacing-24);
  background-color: var(--suite-header-background);
  color: var(--suite-header-text);
}
.cds-suite-header__brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  font-weight: var(--font-weight-bold);
}
.cds-suite-header__customer-logo {
  width: 40px;
  height: 40px;      /* Figma annotation: max 40x40, must fit a square box */
  object-fit: contain;
  background-color: var(--on-brand-text);
  border-radius: var(--radius-3);
}
.cds-user-menu {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-8);
  background: transparent;
  border: 0;
  border-radius: var(--radius-3);
  color: inherit;
  font-family: var(--font-family-primary);
  font-size: var(--type-body-size);
  cursor: pointer;
}
.cds-user-menu:hover { background-color: rgb(255 255 255 / 15%); }

.cds-product-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 var(--spacing-24);
  background-color: var(--container-background);
  border-bottom: var(--border-width-1) solid var(--container-border);
}
.cds-product-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-12) var(--spacing-16);
  border-bottom: var(--border-width-3) solid transparent;
  color: var(--container-text);
  font-size: var(--type-label-size);
  text-decoration: none;
  cursor: pointer;
}
.cds-product-nav__link:hover {
  background-color: var(--menu-hover);
}
.cds-product-nav__link.is-active,
.cds-product-nav__link[aria-current="page"] {
  border-bottom-color: var(--navigation-active);
  color: var(--navigation-active);
  font-weight: var(--font-weight-bold);
}