/* ============================================================
   Bosch Web Design System — Component styles
   Class-based styling for the React component primitives.
   Hover / focus / active states the components can't express inline.
   ============================================================ */

/* ---------------------------------------------------------------
   Button
   --------------------------------------------------------------- */
.bds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bds-space-8);
  box-sizing: border-box;
  height: var(--bds-control-h-md);
  padding: 0 var(--bds-space-24);
  font-family: var(--bds-font-family);
  font-size: var(--bds-size-m);
  line-height: 1;
  font-weight: var(--bds-weight-regular);
  border: none;
  border-radius: var(--bds-radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: background-color var(--bds-duration-fast) var(--bds-ease),
              color var(--bds-duration-fast) var(--bds-ease),
              box-shadow var(--bds-duration-fast) var(--bds-ease);
}
.bds-btn:focus-visible {
  outline: var(--bds-focus-width) solid var(--bds-focus-ring);
  outline-offset: var(--bds-focus-offset);
}

/* sizes */
.bds-btn--sm { height: var(--bds-control-h-sm); padding: 0 var(--bds-space-16); }
.bds-btn--icon { width: var(--bds-control-h-md); padding: 0; }
.bds-btn--icon.bds-btn--sm { width: var(--bds-control-h-sm); }

/* hierarchy: primary (filled) — brand */
.bds-btn--primary { background: var(--bds-accent); color: var(--bds-accent-front); }
.bds-btn--primary:hover { background: var(--bds-accent-hover); }
.bds-btn--primary:active { background: var(--bds-accent-pressed); }

/* hierarchy: secondary (outlined) — brand */
.bds-btn--secondary {
  background: transparent;
  color: var(--bds-accent);
  box-shadow: inset 0 0 0 1px var(--bds-accent);
}
.bds-btn--secondary:hover { background: var(--bds-blue-50); color: var(--bds-accent-hover); box-shadow: inset 0 0 0 1px var(--bds-accent-hover); }
.bds-btn--secondary:active { background: var(--bds-blue-50); color: var(--bds-accent-pressed); box-shadow: inset 0 0 0 1px var(--bds-accent-pressed); }

/* hierarchy: tertiary (ghost) — brand */
.bds-btn--tertiary { background: transparent; color: var(--bds-accent); }
.bds-btn--tertiary:hover { background: var(--bds-blue-50); color: var(--bds-accent-hover); }
.bds-btn--tertiary:active { background: var(--bds-blue-50); color: var(--bds-accent-pressed); }

/* destructive recolor — red equivalents */
.bds-btn--destructive.bds-btn--primary { background: var(--bds-red); color: #fff; }
.bds-btn--destructive.bds-btn--primary:hover { background: var(--bds-red-hover); }
.bds-btn--destructive.bds-btn--primary:active { background: var(--bds-red-pressed); }
.bds-btn--destructive.bds-btn--secondary { color: var(--bds-red); box-shadow: inset 0 0 0 1px var(--bds-red); }
.bds-btn--destructive.bds-btn--secondary:hover { background: var(--bds-red-minor); color: var(--bds-red-hover); box-shadow: inset 0 0 0 1px var(--bds-red-hover); }
.bds-btn--destructive.bds-btn--secondary:active { background: var(--bds-red-minor); color: var(--bds-red-pressed); box-shadow: inset 0 0 0 1px var(--bds-red-pressed); }
.bds-btn--destructive.bds-btn--tertiary { color: var(--bds-red); }
.bds-btn--destructive.bds-btn--tertiary:hover { background: var(--bds-red-minor); color: var(--bds-red-hover); }
.bds-btn--destructive.bds-btn--tertiary:active { background: var(--bds-red-minor); color: var(--bds-red-pressed); }

/* disabled — all hierarchies */
.bds-btn:disabled,
.bds-btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--bds-disabled-fill);
  color: var(--bds-disabled-front);
  box-shadow: none;
}
.bds-btn--secondary:disabled,
.bds-btn--tertiary:disabled,
.bds-btn--secondary[aria-disabled="true"],
.bds-btn--tertiary[aria-disabled="true"] {
  background: transparent;
  color: var(--bds-disabled-front);
}
.bds-btn--secondary:disabled { box-shadow: inset 0 0 0 1px var(--bds-disabled-fill); }

/* ---------------------------------------------------------------
   Link
   --------------------------------------------------------------- */
.bds-link {
  display: inline-flex;
  align-items: center;
  gap: var(--bds-space-4);
  color: var(--bds-accent);
  font-family: var(--bds-font-family);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--bds-duration-fast) var(--bds-ease);
}
.bds-link:hover { color: var(--bds-accent-hover); text-decoration: underline; }
.bds-link:active { color: var(--bds-accent-pressed); }
.bds-link:focus-visible { outline: var(--bds-focus-width) solid var(--bds-focus-ring); outline-offset: var(--bds-focus-offset); }
.bds-link--inline { display: inline; text-decoration: underline; text-underline-offset: 2px; }
.bds-link--bold { font-weight: var(--bds-weight-bold); }
.bds-link[aria-disabled="true"] { color: var(--bds-disabled-front); pointer-events: none; text-decoration: none; }

/* ---------------------------------------------------------------
   Badge (signal dot / count) & Tag (label chip)
   --------------------------------------------------------------- */
.bds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-family: var(--bds-font-family);
  font-size: var(--bds-size-s);
  font-weight: var(--bds-weight-bold);
  line-height: 1;
  border-radius: var(--bds-radius-pill);
  background: var(--bds-red);
  color: #ffffff;
}
.bds-badge--dot { min-width: 8px; width: 8px; height: 8px; padding: 0; }
.bds-badge--neutral { background: var(--bds-grey-50); color: #fff; }
.bds-badge--info { background: var(--bds-info); color: #fff; }
.bds-badge--success { background: var(--bds-success); color: #fff; }
.bds-badge--warning { background: var(--bds-warning); color: #000; }
.bds-badge--error { background: var(--bds-error); color: #fff; }

.bds-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--bds-space-4);
  box-sizing: border-box;
  height: 24px;
  padding: 0 var(--bds-space-8);
  font-family: var(--bds-font-family);
  font-size: var(--bds-size-s);
  line-height: 1;
  border-radius: var(--bds-radius-none);
  background: var(--bds-surface-subtle);
  color: var(--bds-text);
}
.bds-tag--strong { background: var(--bds-black); color: #fff; }

/* ---------------------------------------------------------------
   Divider
   --------------------------------------------------------------- */
.bds-divider { border: none; background: var(--bds-divider); }
.bds-divider--h { width: 100%; height: 1px; margin: 0; }
.bds-divider--v { width: 1px; align-self: stretch; min-height: 1em; margin: 0; }
.bds-divider--strong { background: var(--bds-grey-50); }

/* ---------------------------------------------------------------
   Avatar
   --------------------------------------------------------------- */
.bds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: var(--bds-radius-circle);
  background: var(--bds-blue);
  color: #fff;
  font-family: var(--bds-font-family);
  font-size: var(--bds-size-m);
  font-weight: var(--bds-weight-bold);
  overflow: hidden;
  object-fit: cover;
}
.bds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bds-avatar--sm { width: 32px; height: 32px; font-size: var(--bds-size-sm); }
.bds-avatar--lg { width: 56px; height: 56px; font-size: var(--bds-size-l); }

/* ---------------------------------------------------------------
   Field shell — label + control + helper (TextField, TextArea, Select)
   --------------------------------------------------------------- */
.bds-field { display: flex; flex-direction: column; gap: var(--bds-space-4); font-family: var(--bds-font-family); }
.bds-field__label { font-size: var(--bds-size-s); line-height: var(--bds-lh-s); color: var(--bds-text-secondary); }
.bds-field__control {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--bds-space-8);
  box-sizing: border-box;
  min-height: var(--bds-control-h-md);
  padding: 0 var(--bds-space-16);
  background: var(--bds-grey-15);
  border-bottom: 1px solid var(--bds-black);
  transition: border-color var(--bds-duration-fast) var(--bds-ease);
}
.bds-field__control:hover { border-bottom-color: var(--bds-accent); }
.bds-field__control:focus-within { border-bottom: 2px solid var(--bds-accent); }
.bds-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--bds-size-m);
  line-height: var(--bds-lh-m);
  color: var(--bds-text);
  padding: 13px 0;
}
.bds-field__input::placeholder { color: var(--bds-text-muted); }
.bds-field__icon { color: var(--bds-text); flex-shrink: 0; }
.bds-field__helper { font-size: var(--bds-size-s); line-height: var(--bds-lh-s); color: var(--bds-text-secondary); }
/* validation */
.bds-field--error .bds-field__control { border-bottom-color: var(--bds-error); }
.bds-field--error .bds-field__control:focus-within { border-bottom: 2px solid var(--bds-error); }
.bds-field--error .bds-field__helper { color: var(--bds-error); }
.bds-field--success .bds-field__control { border-bottom-color: var(--bds-success); }
/* disabled */
.bds-field--disabled .bds-field__control { background: var(--bds-grey-10); border-bottom-color: var(--bds-grey-30); }
.bds-field--disabled .bds-field__input { color: var(--bds-text-muted); }
.bds-field--disabled .bds-field__icon { color: var(--bds-text-muted); }
/* textarea */
.bds-field__input--area { resize: vertical; padding: 12px 0; min-height: 96px; }

/* ---------------------------------------------------------------
   Checkbox & Radio
   --------------------------------------------------------------- */
.bds-choice { display: inline-flex; align-items: center; gap: var(--bds-space-8); font-family: var(--bds-font-family); font-size: var(--bds-size-m); color: var(--bds-text); cursor: pointer; user-select: none; }
.bds-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.bds-choice__box {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 20px; height: 20px; flex-shrink: 0;
  border: 2px solid var(--bds-grey-50); background: #fff; color: #fff;
  transition: background var(--bds-duration-fast) var(--bds-ease), border-color var(--bds-duration-fast) var(--bds-ease);
}
.bds-choice__box--radio { border-radius: var(--bds-radius-circle); }
.bds-choice:hover .bds-choice__box { border-color: var(--bds-accent); }
.bds-choice input:checked + .bds-choice__box { background: var(--bds-accent); border-color: var(--bds-accent); }
.bds-choice input:indeterminate + .bds-choice__box { background: var(--bds-accent); border-color: var(--bds-accent); }
.bds-choice input:checked + .bds-choice__box--radio { background: #fff; }
.bds-choice__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bds-accent); transform: scale(0); transition: transform var(--bds-duration-fast) var(--bds-ease); }
.bds-choice input:checked + .bds-choice__box--radio .bds-choice__dot { transform: scale(1); }
.bds-choice input:focus-visible + .bds-choice__box { outline: 2px solid var(--bds-focus-ring); outline-offset: 2px; }
.bds-choice input:disabled + .bds-choice__box { border-color: var(--bds-grey-30); background: var(--bds-grey-10); }
.bds-choice input:disabled:checked + .bds-choice__box { background: var(--bds-grey-30); border-color: var(--bds-grey-30); }
.bds-choice--disabled { color: var(--bds-text-muted); cursor: not-allowed; }

/* ---------------------------------------------------------------
   Switch
   --------------------------------------------------------------- */
.bds-switch { display: inline-flex; align-items: center; gap: var(--bds-space-8); font-family: var(--bds-font-family); font-size: var(--bds-size-m); color: var(--bds-text); cursor: pointer; user-select: none; }
.bds-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.bds-switch__track {
  position: relative; box-sizing: border-box; width: 48px; height: 24px; flex-shrink: 0;
  border-radius: var(--bds-radius-pill); background: var(--bds-grey-15);
  transition: background var(--bds-duration) var(--bds-ease);
}
.bds-switch__thumb {
  position: absolute; top: 6px; left: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--bds-grey-40); transition: transform var(--bds-duration) var(--bds-ease), background var(--bds-duration) var(--bds-ease);
}
.bds-switch input:checked + .bds-switch__track { background: var(--bds-accent); }
.bds-switch input:checked + .bds-switch__track .bds-switch__thumb { transform: translateX(24px); background: #fff; }
.bds-switch input:focus-visible + .bds-switch__track { outline: 2px solid var(--bds-focus-ring); outline-offset: 2px; }
.bds-switch input:disabled + .bds-switch__track { background: var(--bds-grey-10); }
.bds-switch input:disabled + .bds-switch__track .bds-switch__thumb { background: var(--bds-grey-30); }

/* ---------------------------------------------------------------
   Chip (selectable)
   --------------------------------------------------------------- */
.bds-chip {
  display: inline-flex; align-items: center; gap: var(--bds-space-4);
  box-sizing: border-box; height: 32px; padding: 0 var(--bds-space-12);
  font-family: var(--bds-font-family); font-size: var(--bds-size-sm); line-height: 1;
  background: #fff; color: var(--bds-text); border: 1px solid var(--bds-grey-50);
  border-radius: var(--bds-radius-none); cursor: pointer;
  transition: background var(--bds-duration-fast) var(--bds-ease), border-color var(--bds-duration-fast) var(--bds-ease), color var(--bds-duration-fast) var(--bds-ease);
}
.bds-chip:hover { background: var(--bds-grey-10); }
.bds-chip[aria-pressed="true"], .bds-chip--selected { background: var(--bds-accent); border-color: var(--bds-accent); color: #fff; }
.bds-chip__close { display: inline-flex; margin-right: -4px; opacity: .8; }
.bds-chip__close:hover { opacity: 1; }
.bds-chip:focus-visible { outline: 2px solid var(--bds-focus-ring); outline-offset: 2px; }
.bds-chip:disabled { cursor: not-allowed; color: var(--bds-text-muted); border-color: var(--bds-grey-30); background: #fff; }

/* ---------------------------------------------------------------
   Slider
   --------------------------------------------------------------- */
.bds-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; }
.bds-slider:focus { outline: none; }
.bds-slider::-webkit-slider-runnable-track { height: 4px; border-radius: var(--bds-radius-pill); background: var(--_track, var(--bds-grey-15)); }
.bds-slider::-moz-range-track { height: 4px; border-radius: var(--bds-radius-pill); background: var(--bds-grey-15); }
.bds-slider::-moz-range-progress { height: 4px; border-radius: var(--bds-radius-pill); background: var(--bds-accent); }
.bds-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--bds-accent); border: 2px solid #fff; box-shadow: var(--bds-shadow-s); }
.bds-slider::-moz-range-thumb { width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: var(--bds-accent); box-shadow: var(--bds-shadow-s); }
.bds-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--bds-focus-ring); outline-offset: 2px; }

/* ---------------------------------------------------------------
   Notification (banner / bar)
   --------------------------------------------------------------- */
.bds-note {
  display: flex; gap: var(--bds-space-12); align-items: flex-start;
  box-sizing: border-box; padding: var(--bds-space-16);
  background: #fff; border-top: 4px solid var(--bds-info);
  font-family: var(--bds-font-family); color: var(--bds-text);
}
.bds-note--floating { box-shadow: var(--bds-shadow-m); }
.bds-note--bar { background: var(--bds-info-surface); border-top: none; border-left: 4px solid var(--bds-info); align-items: center; padding: var(--bds-space-12) var(--bds-space-16); }
.bds-note__icon { color: var(--bds-info); flex-shrink: 0; }
.bds-note--info { border-top-color: var(--bds-info); }
.bds-note--info.bds-note--bar { border-left-color: var(--bds-info); }
.bds-note--info .bds-note__icon { color: var(--bds-info); }
.bds-note--success { border-top-color: var(--bds-success); }
.bds-note--success.bds-note--bar { border-left-color: var(--bds-success); }
.bds-note--success .bds-note__icon { color: var(--bds-success); }
.bds-note--warning { border-top-color: var(--bds-warning); }
.bds-note--warning.bds-note--bar { border-left-color: var(--bds-warning); }
.bds-note--warning .bds-note__icon { color: var(--bds-warning); }
.bds-note--error { border-top-color: var(--bds-error); }
.bds-note--error.bds-note--bar { border-left-color: var(--bds-error); }
.bds-note--error .bds-note__icon { color: var(--bds-error); }
.bds-note--neutral { border-top-color: var(--bds-grey-50); }
.bds-note--neutral.bds-note--bar { border-left-color: var(--bds-grey-50); }
.bds-note--neutral .bds-note__icon { color: var(--bds-grey-50); }
.bds-note--success.bds-note--bar { background: var(--bds-success-surface); }
.bds-note--warning.bds-note--bar { background: var(--bds-warning-surface); }
.bds-note--error.bds-note--bar { background: var(--bds-error-surface); }
.bds-note__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bds-note__title { font-weight: var(--bds-weight-bold); font-size: var(--bds-size-m); line-height: var(--bds-lh-m); }
.bds-note__text { font-size: var(--bds-size-sm); line-height: var(--bds-lh-sm); color: var(--bds-text-secondary); }
.bds-note__close { flex-shrink: 0; background: none; border: none; padding: 0; cursor: pointer; color: var(--bds-text); display: inline-flex; }

/* ---------------------------------------------------------------
   Dialog (modal)
   --------------------------------------------------------------- */
.bds-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; padding: var(--bds-space-24); z-index: 1000;
}
.bds-dialog {
  position: relative; box-sizing: border-box;
  width: 100%; max-width: 480px; max-height: 90vh; overflow: auto;
  background: #fff; box-shadow: var(--bds-shadow-l);
  font-family: var(--bds-font-family); color: var(--bds-text);
}
.bds-dialog__bar { height: 6px; }
.bds-dialog__head { display: flex; align-items: flex-start; gap: var(--bds-space-16); padding: var(--bds-space-24) var(--bds-space-24) var(--bds-space-8); }
.bds-dialog__title { flex: 1; margin: 0; font-size: var(--bds-size-xl); line-height: var(--bds-lh-xl); font-weight: var(--bds-weight-bold); }
.bds-dialog__close { background: none; border: none; padding: 4px; margin: -4px; cursor: pointer; color: var(--bds-text); display: inline-flex; }
.bds-dialog__body { padding: var(--bds-space-8) var(--bds-space-24); font-size: var(--bds-size-m); line-height: var(--bds-lh-m); color: var(--bds-text-secondary); }
.bds-dialog__foot { display: flex; justify-content: flex-end; gap: var(--bds-space-12); padding: var(--bds-space-24); }

/* ---------------------------------------------------------------
   Tooltip
   --------------------------------------------------------------- */
.bds-tooltip-wrap { position: relative; display: inline-flex; }
.bds-tooltip {
  position: absolute; z-index: 100; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  background: var(--bds-black); color: #fff; padding: 6px 10px; white-space: nowrap;
  font-family: var(--bds-font-family); font-size: var(--bds-size-s); line-height: var(--bds-lh-s);
  opacity: 0; pointer-events: none; transition: opacity var(--bds-duration-fast) var(--bds-ease);
}
.bds-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--bds-black); }
.bds-tooltip-wrap:hover .bds-tooltip, .bds-tooltip-wrap:focus-within .bds-tooltip { opacity: 1; }

/* ---------------------------------------------------------------
   Progress indicator (determinate / indeterminate) & Meter
   --------------------------------------------------------------- */
.bds-progress { width: 100%; height: 4px; background: var(--bds-grey-15); overflow: hidden; }
.bds-progress__fill { height: 100%; background: var(--bds-accent); transition: width var(--bds-duration) var(--bds-ease); }
.bds-progress--indeterminate .bds-progress__fill { width: 40%; animation: bds-indeterminate 1.4s var(--bds-ease) infinite; }
@keyframes bds-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

.bds-meter { display: flex; flex-direction: column; gap: var(--bds-space-4); font-family: var(--bds-font-family); }
.bds-meter__track { height: 8px; background: var(--bds-grey-15); overflow: hidden; }
.bds-meter__fill { height: 100%; background: var(--bds-accent); }
.bds-meter__fill--success { background: var(--bds-success); }
.bds-meter__fill--warning { background: var(--bds-warning); }
.bds-meter__fill--error { background: var(--bds-error); }
.bds-meter__row { display: flex; justify-content: space-between; font-size: var(--bds-size-s); color: var(--bds-text-secondary); }

/* ---------------------------------------------------------------
   Activity indicator (spinner)
   --------------------------------------------------------------- */
.bds-spinner {
  display: inline-block; border-radius: 50%;
  border: 3px solid var(--bds-grey-15); border-top-color: var(--bds-accent);
  animation: bds-spin 0.9s linear infinite;
}
@keyframes bds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bds-spinner { animation-duration: 2.4s; }
  .bds-progress--indeterminate .bds-progress__fill { animation: none; width: 100%; }
}

/* ---------------------------------------------------------------
   Tabs
   --------------------------------------------------------------- */
.bds-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--bds-divider); font-family: var(--bds-font-family); }
.bds-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: var(--bds-space-12) var(--bds-space-16); margin-bottom: -1px;
  font-family: inherit; font-size: var(--bds-size-m); line-height: var(--bds-lh-m); color: var(--bds-text-secondary);
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: var(--bds-space-8);
  transition: color var(--bds-duration-fast) var(--bds-ease), border-color var(--bds-duration-fast) var(--bds-ease);
}
.bds-tab:hover { color: var(--bds-text); }
.bds-tab--active { color: var(--bds-accent); border-bottom-color: var(--bds-accent); font-weight: var(--bds-weight-bold); }
.bds-tab:focus-visible { outline: 2px solid var(--bds-focus-ring); outline-offset: -2px; }
.bds-tab:disabled { color: var(--bds-text-muted); cursor: not-allowed; }

/* ---------------------------------------------------------------
   Accordion
   --------------------------------------------------------------- */
.bds-accordion { font-family: var(--bds-font-family); border-top: 1px solid var(--bds-divider); }
.bds-accordion__item { border-bottom: 1px solid var(--bds-divider); }
.bds-accordion__head {
  width: 100%; appearance: none; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--bds-space-16);
  padding: var(--bds-space-16) var(--bds-space-4); text-align: left;
  font-family: inherit; font-size: var(--bds-size-m); font-weight: var(--bds-weight-bold); color: var(--bds-text);
}
.bds-accordion__head:hover { color: var(--bds-accent); }
.bds-accordion__head:focus-visible { outline: 2px solid var(--bds-focus-ring); outline-offset: -2px; }
.bds-accordion__chevron { transition: transform var(--bds-duration) var(--bds-ease); flex-shrink: 0; color: var(--bds-accent); }
.bds-accordion__head[aria-expanded="true"] .bds-accordion__chevron { transform: rotate(180deg); }
.bds-accordion__panel { padding: 0 var(--bds-space-4) var(--bds-space-16); font-size: var(--bds-size-m); line-height: var(--bds-lh-m); color: var(--bds-text-secondary); }

/* ---------------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------------- */
.bds-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--bds-space-4); font-family: var(--bds-font-family); font-size: var(--bds-size-sm); }
.bds-breadcrumb a { color: var(--bds-accent); text-decoration: none; }
.bds-breadcrumb a:hover { text-decoration: underline; }
.bds-breadcrumb__sep { color: var(--bds-text-muted); display: inline-flex; }
.bds-breadcrumb__current { color: var(--bds-text-secondary); }

/* ---------------------------------------------------------------
   Pagination
   --------------------------------------------------------------- */
.bds-pagination { display: inline-flex; align-items: center; gap: var(--bds-space-4); font-family: var(--bds-font-family); }
.bds-page {
  appearance: none; border: none; background: none; cursor: pointer;
  min-width: 40px; height: 40px; padding: 0 8px;
  font-family: inherit; font-size: var(--bds-size-m); color: var(--bds-text);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--bds-duration-fast) var(--bds-ease), color var(--bds-duration-fast) var(--bds-ease);
}
.bds-page:hover:not(:disabled) { background: var(--bds-grey-10); }
.bds-page--active { background: var(--bds-accent); color: #fff; font-weight: var(--bds-weight-bold); }
.bds-page--active:hover { background: var(--bds-accent); }
.bds-page:disabled { color: var(--bds-text-muted); cursor: not-allowed; }
.bds-page:focus-visible { outline: 2px solid var(--bds-focus-ring); outline-offset: -2px; }

/* ---------------------------------------------------------------
   Step indicator
   --------------------------------------------------------------- */
.bds-steps { display: flex; align-items: flex-start; font-family: var(--bds-font-family); }
.bds-step { display: flex; flex-direction: column; align-items: center; gap: var(--bds-space-8); flex: 1; text-align: center; position: relative; }
.bds-step__dot {
  width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; border: 2px solid var(--bds-grey-30); background: #fff; color: var(--bds-text-secondary);
  font-size: var(--bds-size-sm); font-weight: var(--bds-weight-bold); z-index: 1;
}
.bds-step--done .bds-step__dot { background: var(--bds-accent); border-color: var(--bds-accent); color: #fff; }
.bds-step--current .bds-step__dot { border-color: var(--bds-accent); color: var(--bds-accent); }
.bds-step__label { font-size: var(--bds-size-sm); color: var(--bds-text-secondary); max-width: 12ch; }
.bds-step--current .bds-step__label { color: var(--bds-text); font-weight: var(--bds-weight-bold); }
.bds-step__line { position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: var(--bds-grey-30); z-index: 0; }
.bds-step--done .bds-step__line { background: var(--bds-accent); }
.bds-step:last-child .bds-step__line { display: none; }

/* ---------------------------------------------------------------
   Card
   --------------------------------------------------------------- */
.bds-card {
  display: flex; flex-direction: column;
  box-sizing: border-box; background: var(--bds-surface);
  border-radius: var(--bds-radius-none); overflow: hidden;
  font-family: var(--bds-font-family); color: var(--bds-text);
}
.bds-card--bordered { border: 1px solid var(--bds-border); }
.bds-card--elevated { box-shadow: var(--bds-shadow-m); }
.bds-card--interactive { cursor: pointer; transition: box-shadow var(--bds-duration) var(--bds-ease), transform var(--bds-duration) var(--bds-ease); }
.bds-card--interactive:hover { box-shadow: var(--bds-shadow-l); }
.bds-card__media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bds-grey-10); display: block; }
.bds-card__body { display: flex; flex-direction: column; gap: var(--bds-space-8); padding: var(--bds-space-20); }
.bds-card__title { margin: 0; font-size: var(--bds-size-l); line-height: var(--bds-lh-l); font-weight: var(--bds-weight-bold); }
.bds-card__text { margin: 0; font-size: var(--bds-size-m); line-height: var(--bds-lh-m); color: var(--bds-text-secondary); }
.bds-card__foot { display: flex; align-items: center; gap: var(--bds-space-12); padding: var(--bds-space-16) var(--bds-space-20); border-top: 1px solid var(--bds-divider); }

/* ---------------------------------------------------------------
   Table
   --------------------------------------------------------------- */
.bds-table { width: 100%; border-collapse: collapse; font-family: var(--bds-font-family); font-size: var(--bds-size-m); }
.bds-table th { text-align: left; font-weight: var(--bds-weight-bold); color: var(--bds-text); padding: var(--bds-space-12) var(--bds-space-16); border-bottom: 2px solid var(--bds-black); white-space: nowrap; }
.bds-table td { padding: var(--bds-space-12) var(--bds-space-16); border-bottom: 1px solid var(--bds-divider); color: var(--bds-text-secondary); }
.bds-table tbody tr { transition: background var(--bds-duration-fast) var(--bds-ease); }
.bds-table--hover tbody tr:hover { background: var(--bds-grey-05); }
.bds-table--striped tbody tr:nth-child(even) { background: var(--bds-grey-05); }
.bds-table td.bds-num, .bds-table th.bds-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   List
   --------------------------------------------------------------- */
.bds-list { list-style: none; margin: 0; padding: 0; font-family: var(--bds-font-family); }
.bds-list__item { display: flex; align-items: center; gap: var(--bds-space-12); padding: var(--bds-space-12) var(--bds-space-4); border-bottom: 1px solid var(--bds-divider); color: var(--bds-text); }
.bds-list__item--interactive { cursor: pointer; transition: background var(--bds-duration-fast) var(--bds-ease); }
.bds-list__item--interactive:hover { background: var(--bds-grey-05); }
.bds-list__icon { color: var(--bds-text-secondary); flex-shrink: 0; }
.bds-list__content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bds-list__title { font-size: var(--bds-size-m); line-height: var(--bds-lh-m); }
.bds-list__sub { font-size: var(--bds-size-sm); line-height: var(--bds-lh-sm); color: var(--bds-text-secondary); }