/* ═══════════════════════════════════════════════════════════════
   Carbon Design System — Gray 90 Theme
   IBM Carbon v11 tokens + component styles (vanilla CSS)
   https://carbondesignsystem.com/
═══════════════════════════════════════════════════════════════ */

/* ─── GRAY 90 THEME TOKENS ─── */
:root {
  /* Backgrounds */
  --cds-background: #161616;
  --cds-background-hover: #282828;
  --cds-background-active: #3d3d3d;
  --cds-background-selected: #393939;
  --cds-background-inverse: #f4f4f4;

  /* Layers */
  --cds-layer-01: #262626;
  --cds-layer-02: #393939;
  --cds-layer-03: #525252;
  --cds-layer-hover-01: #333333;
  --cds-layer-hover-02: #474747;
  --cds-layer-active-01: #525252;
  --cds-layer-active-02: #6f6f6f;
  --cds-layer-selected-01: #393939;
  --cds-layer-selected-02: #525252;
  --cds-layer-accent-01: #393939;

  /* Text */
  --cds-text-primary: #f4f4f4;
  --cds-text-secondary: #c6c6c6;
  --cds-text-placeholder: #6f6f6f;
  --cds-text-helper: #8d8d8d;
  --cds-text-disabled: #525252;
  --cds-text-inverse: #161616;
  --cds-text-on-color: #ffffff;
  --cds-text-on-color-disabled: rgba(255,255,255,0.25);
  --cds-link-primary: #78a9ff;
  --cds-link-primary-hover: #a6c8ff;
  --cds-link-visited: #be95ff;
  --cds-link-inverse: #0f62fe;

  /* Icons */
  --cds-icon-primary: #f4f4f4;
  --cds-icon-secondary: #c6c6c6;
  --cds-icon-disabled: #525252;
  --cds-icon-inverse: #161616;
  --cds-icon-on-color: #ffffff;

  /* Borders */
  --cds-border-subtle-00: #353535;
  --cds-border-subtle-01: #474747;
  --cds-border-subtle-02: #5f5f5f;
  --cds-border-strong-01: #6f6f6f;
  --cds-border-strong-02: #8d8d8d;
  --cds-border-inverse: #f4f4f4;
  --cds-border-disabled: #474747;
  --cds-border-interactive: #4589ff;

  /* Interactive */
  --cds-interactive: #4589ff;
  --cds-focus: #ffffff;
  --cds-focus-inset: #161616;
  --cds-focus-inverse: #0f62fe;

  /* Button */
  --cds-button-primary: #0f62fe;
  --cds-button-primary-hover: #0353e9;
  --cds-button-primary-active: #002d9c;
  --cds-button-secondary: #6f6f6f;
  --cds-button-secondary-hover: #606060;
  --cds-button-secondary-active: #393939;
  --cds-button-tertiary: #ffffff;
  --cds-button-tertiary-hover: #f4f4f4;
  --cds-button-danger-primary: #da1e28;
  --cds-button-danger-hover: #b81922;
  --cds-button-separator: #161616;
  --cds-button-disabled: #393939;

  /* Support */
  --cds-support-error: #ff8389;
  --cds-support-success: #42be65;
  --cds-support-warning: #f1c21b;
  --cds-support-info: #4589ff;
  --cds-support-error-inverse: #da1e28;
  --cds-support-success-inverse: #24a148;
  --cds-support-warning-inverse: #f1c21b;
  --cds-support-info-inverse: #0043ce;

  /* Highlights / decorative */
  --cds-highlight: #0043ce;
  --cds-overlay: rgba(0, 0, 0, 0.65);
  --cds-skeleton-element: #393939;
  --cds-skeleton-background: #292929;

  /* Tag */
  --cds-tag-background-blue: #0043ce;
  --cds-tag-color-blue: #a6c8ff;
  --cds-tag-background-cyan: #00539a;
  --cds-tag-color-cyan: #82cfff;
  --cds-tag-background-teal: #005d5d;
  --cds-tag-color-teal: #3ddbd9;
  --cds-tag-background-green: #044317;
  --cds-tag-color-green: #a7f0ba;
  --cds-tag-background-warm-gray: #4d4540;
  --cds-tag-color-warm-gray: #d5bdaf;
  --cds-tag-background-gray: #393939;
  --cds-tag-color-gray: #c6c6c6;
  --cds-tag-background-magenta: #740937;
  --cds-tag-color-magenta: #ffafd2;
  --cds-tag-background-purple: #491d8b;
  --cds-tag-color-purple: #d4bbff;
  --cds-tag-background-red: #750e13;
  --cds-tag-color-red: #ffd7d9;
  --cds-tag-background-orange: #8e3a00;
  --cds-tag-color-orange: #ffd9be;
  --cds-tag-background-yellow: #684e00;
  --cds-tag-color-yellow: #fce38a;

  /* Typography scale */
  --cds-label-01: 400 12px/16px 'IBM Plex Sans', sans-serif;
  --cds-label-02: 400 14px/18px 'IBM Plex Sans', sans-serif;
  --cds-helper-text-01: 400 12px/16px 'IBM Plex Sans', sans-serif;
  --cds-helper-text-02: 400 14px/18px 'IBM Plex Sans', sans-serif;
  --cds-legal-01: 400 12px/16px 'IBM Plex Sans', sans-serif;
  --cds-body-compact-01: 400 14px/18px 'IBM Plex Sans', sans-serif;
  --cds-body-compact-02: 400 16px/24px 'IBM Plex Sans', sans-serif;
  --cds-body-01: 400 14px/20px 'IBM Plex Sans', sans-serif;
  --cds-body-02: 400 16px/24px 'IBM Plex Sans', sans-serif;
  --cds-heading-compact-01: 600 14px/18px 'IBM Plex Sans', sans-serif;
  --cds-heading-compact-02: 600 16px/22px 'IBM Plex Sans', sans-serif;
  --cds-heading-01: 400 14px/20px 'IBM Plex Sans', sans-serif;
  --cds-heading-02: 400 16px/24px 'IBM Plex Sans', sans-serif;
  --cds-heading-03: 400 20px/28px 'IBM Plex Sans', sans-serif;
  --cds-heading-04: 400 28px/36px 'IBM Plex Sans', sans-serif;
  --cds-heading-05: 400 36px/44px 'IBM Plex Sans', sans-serif;
  --cds-heading-06: 300 48px/56px 'IBM Plex Sans', sans-serif;
  --cds-heading-07: 300 60px/70px 'IBM Plex Sans', sans-serif;
  --cds-fluid-heading-03: 400 20px/28px 'IBM Plex Sans', sans-serif;
  --cds-fluid-heading-04: 400 28px/36px 'IBM Plex Sans', sans-serif;
  --cds-fluid-heading-05: 400 32px/40px 'IBM Plex Sans', sans-serif;
  --cds-code-01: 400 12px/16px 'IBM Plex Mono', monospace;
  --cds-code-02: 400 14px/20px 'IBM Plex Mono', monospace;

  /* Spacing */
  --cds-spacing-01: 2px;
  --cds-spacing-02: 4px;
  --cds-spacing-03: 8px;
  --cds-spacing-04: 16px;
  --cds-spacing-05: 24px;
  --cds-spacing-06: 32px;
  --cds-spacing-07: 40px;
  --cds-spacing-08: 48px;
  --cds-spacing-09: 56px;
  --cds-spacing-10: 64px;
  --cds-spacing-11: 80px;
  --cds-spacing-12: 96px;
  --cds-spacing-13: 160px;

  /* Component heights (Carbon 2x grid) */
  --cds-container-01: 24px;
  --cds-container-02: 32px;
  --cds-container-03: 40px;
  --cds-container-04: 48px;
  --cds-container-05: 64px;

  /* Carbon has NO border radius (flat design) */
  --cds-radius: 0px;

  /* App-level aliases for easy referencing */
  --bg: var(--cds-background);
  --bg2: var(--cds-layer-01);
  --card: var(--cds-layer-01);
  --card-border: var(--cds-border-subtle-01);
  --text: var(--cds-text-primary);
  --text-secondary: var(--cds-text-secondary);
  --text-dim: var(--cds-text-helper);
  --interactive: var(--cds-interactive);
  --success: var(--cds-support-success);
  --error: var(--cds-support-error);
  --warning: var(--cds-support-warning);

  /* Keep teal-blue accent from original but mapped to Carbon blue */
  --purple: var(--cds-interactive);
  --purple-light: var(--cds-link-primary);
  --blue: var(--cds-support-info);
  --accent: linear-gradient(135deg, #4589ff 0%, #be95ff 100%);
  --accent-hover: linear-gradient(135deg, #2d74da 0%, #a56eff 100%);
}

/* ─── BASE RESET ─── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ─── CARBON BUTTON ─── */
.cds--btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-03);
  padding: 0 var(--cds-spacing-05) 0 var(--cds-spacing-04);
  height: var(--cds-container-04);
  min-height: var(--cds-container-04);
  font: var(--cds-body-compact-02);
  font-weight: 400;
  border: 1px solid transparent;
  border-radius: var(--cds-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 70ms cubic-bezier(0,0,0.38,0.9),
              box-shadow 70ms cubic-bezier(0,0,0.38,0.9),
              border-color 70ms cubic-bezier(0,0,0.38,0.9),
              outline 70ms cubic-bezier(0,0,0.38,0.9);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.cds--btn:focus {
  box-shadow: inset 0 0 0 1px var(--cds-focus), inset 0 0 0 2px var(--cds-focus-inset);
}

.cds--btn--full-width {
  width: 100%;
  max-width: 100%;
  justify-content: center;
}

.cds--btn--primary {
  background-color: var(--cds-button-primary);
  color: var(--cds-text-on-color);
  border-color: transparent;
}
.cds--btn--primary:hover { background-color: var(--cds-button-primary-hover); }
.cds--btn--primary:active { background-color: var(--cds-button-primary-active); }

.cds--btn--secondary {
  background-color: var(--cds-button-secondary);
  color: var(--cds-text-primary);
  border-color: transparent;
}
.cds--btn--secondary:hover { background-color: var(--cds-button-secondary-hover); }
.cds--btn--secondary:active { background-color: var(--cds-button-secondary-active); }

.cds--btn--tertiary {
  background-color: transparent;
  color: var(--cds-text-primary);
  border-color: var(--cds-border-inverse);
}
.cds--btn--tertiary:hover {
  background-color: rgba(244,244,244,0.12);
  color: var(--cds-text-primary);
}
.cds--btn--tertiary:active {
  background-color: rgba(244,244,244,0.20);
}

.cds--btn--ghost {
  background-color: transparent;
  color: var(--cds-link-primary);
  border-color: transparent;
  padding: 0 var(--cds-spacing-04);
}
.cds--btn--ghost:hover { background-color: var(--cds-background-hover); }

.cds--btn:disabled,
.cds--btn[disabled] {
  background-color: var(--cds-button-disabled);
  color: var(--cds-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  border-color: transparent;
}

/* Large (lg) variant */
.cds--btn--lg {
  height: var(--cds-container-05);
  min-height: var(--cds-container-05);
  padding: 0 var(--cds-spacing-06) 0 var(--cds-spacing-05);
}

/* ─── CARBON TAG ─── */
.cds--tag {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-02);
  padding: 0 var(--cds-spacing-03);
  height: var(--cds-container-01);
  min-width: 0;
  font: var(--cds-label-01);
  border-radius: 0.75rem;
  white-space: nowrap;
  vertical-align: middle;
}

.cds--tag--blue { background: var(--cds-tag-background-blue); color: var(--cds-tag-color-blue); }
.cds--tag--cyan { background: var(--cds-tag-background-cyan); color: var(--cds-tag-color-cyan); }
.cds--tag--teal { background: var(--cds-tag-background-teal); color: var(--cds-tag-color-teal); }
.cds--tag--green { background: var(--cds-tag-background-green); color: var(--cds-tag-color-green); }
.cds--tag--gray { background: var(--cds-tag-background-gray); color: var(--cds-tag-color-gray); }
.cds--tag--warm-gray { background: var(--cds-tag-background-warm-gray); color: var(--cds-tag-color-warm-gray); }
.cds--tag--purple { background: var(--cds-tag-background-purple); color: var(--cds-tag-color-purple); }
.cds--tag--magenta { background: var(--cds-tag-background-magenta); color: var(--cds-tag-color-magenta); }
.cds--tag--red { background: var(--cds-tag-background-red); color: var(--cds-tag-color-red); }
.cds--tag--orange { background: var(--cds-tag-background-orange); color: var(--cds-tag-color-orange); }
.cds--tag--yellow { background: var(--cds-tag-background-yellow); color: var(--cds-tag-color-yellow); }

/* ─── CARBON TEXT INPUT ─── */
.cds--text-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-02);
  width: 100%;
}

.cds--label {
  font: var(--cds-label-01);
  color: var(--cds-text-secondary);
  display: block;
  margin-bottom: var(--cds-spacing-02);
}

.cds--label--required::after {
  content: ' *';
  color: var(--cds-support-error);
}

.cds--text-input {
  display: block;
  width: 100%;
  height: var(--cds-container-04);
  padding: 0 var(--cds-spacing-04);
  font: var(--cds-body-compact-01);
  color: var(--cds-text-primary);
  background-color: var(--cds-layer-01);
  border: none;
  border-bottom: 1px solid var(--cds-border-strong-01);
  outline: none;
  transition: background-color 70ms, outline 70ms;
  -webkit-appearance: none;
}

.cds--text-input::placeholder { color: var(--cds-text-placeholder); }

.cds--text-input:focus {
  background-color: var(--cds-layer-hover-01);
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

.cds--text-input--invalid {
  outline: 2px solid var(--cds-support-error);
  outline-offset: -2px;
}

.cds--text-input-wrapper .cds--form-requirement {
  font: var(--cds-label-01);
  color: var(--cds-support-error);
  margin-top: var(--cds-spacing-02);
  display: none;
}
.cds--text-input-wrapper .cds--form-requirement.visible { display: block; }

/* ─── CARBON TILE ─── */
.cds--tile {
  background-color: var(--cds-layer-01);
  padding: var(--cds-spacing-05);
  min-height: var(--cds-container-05);
}

.cds--tile--interactive {
  cursor: pointer;
  transition: background-color 70ms;
}
.cds--tile--interactive:hover { background-color: var(--cds-layer-hover-01); }

.cds--tile--selected {
  outline: 2px solid var(--cds-interactive);
  outline-offset: -2px;
}

/* ─── CARBON PROGRESS BAR ─── */
.cds--progress-bar {
  width: 100%;
}

.cds--progress-bar__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--cds-spacing-03);
}

.cds--progress-bar__label-text {
  font: var(--cds-label-01);
  color: var(--cds-text-secondary);
}

.cds--progress-bar__track {
  width: 100%;
  height: 4px;
  background-color: var(--cds-layer-02);
}

.cds--progress-bar__bar {
  height: 100%;
  background-color: var(--cds-interactive);
  transition: width 0.4s ease;
}

/* ─── CARBON INLINE NOTIFICATION ─── */
.cds--inline-notification {
  display: flex;
  align-items: flex-start;
  gap: var(--cds-spacing-03);
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  min-width: 288px;
  max-width: 600px;
}

.cds--inline-notification--success {
  background-color: rgba(66, 190, 101, 0.1);
  border-left: 3px solid var(--cds-support-success);
}

.cds--inline-notification--error {
  background-color: rgba(255, 131, 137, 0.1);
  border-left: 3px solid var(--cds-support-error);
}

.cds--inline-notification--warning {
  background-color: rgba(241, 194, 27, 0.1);
  border-left: 3px solid var(--cds-support-warning);
}

.cds--inline-notification--info {
  background-color: rgba(69, 137, 255, 0.1);
  border-left: 3px solid var(--cds-support-info);
}

.cds--inline-notification__text-wrapper {
  flex: 1;
}

.cds--inline-notification__title {
  font: var(--cds-heading-compact-01);
  color: var(--cds-text-primary);
  margin: 0 0 var(--cds-spacing-01) 0;
}

.cds--inline-notification__subtitle {
  font: var(--cds-body-compact-01);
  color: var(--cds-text-secondary);
  margin: 0;
}

/* ─── CARBON SLIDER ─── */
.cds--slider-container {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-04);
  width: 100%;
}

.cds--slider__label {
  font: var(--cds-label-01);
  color: var(--cds-text-secondary);
}

.cds--slider__range-labels {
  display: flex;
  justify-content: space-between;
  font: var(--cds-label-01);
  color: var(--cds-text-helper);
  margin-top: var(--cds-spacing-02);
}

.cds--slider-track-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--cds-spacing-04) 0;
}

.cds--slider__track {
  width: 100%;
  height: 2px;
  background-color: var(--cds-layer-02);
  position: relative;
}

.cds--slider__filled-track {
  height: 2px;
  background-color: var(--cds-interactive);
  position: absolute;
  top: 0;
  left: 0;
  transition: width 100ms;
}

.cds--slider__thumb {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--cds-interactive);
  border: none;
  cursor: pointer;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 100ms, box-shadow 100ms;
  outline: none;
  -webkit-appearance: none;
}

.cds--slider__thumb:focus {
  box-shadow: 0 0 0 4px var(--cds-focus-inset), 0 0 0 6px var(--cds-focus);
}

.cds--slider__thumb:hover {
  transform: translate(-50%, -50%) scale(1.25);
}

/* Native range input styled to match Carbon */
.cds--slider__input {
  display: none; /* hidden, we use the custom track */
}

.cds--slider__native {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: transparent;
  cursor: pointer;
  outline: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 2;
  height: 40px;
  margin-top: -19px;
}

.cds--slider__value {
  font: var(--cds-heading-compact-02);
  color: var(--cds-text-primary);
  text-align: center;
  min-width: 2.5rem;
}

/* ─── CARBON RADIO BUTTON ─── */
.cds--radio-button-group {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-03);
}

.cds--radio-button-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

.cds--radio-button {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0,0,0,0);
}

.cds--radio-button__label {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  padding: var(--cds-spacing-03) var(--cds-spacing-04);
  min-height: var(--cds-container-04);
  width: 100%;
  cursor: pointer;
  font: var(--cds-body-compact-01);
  color: var(--cds-text-primary);
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
  transition: background 70ms, border-color 70ms;
}

.cds--radio-button__label:hover {
  background: var(--cds-layer-hover-01);
  border-color: var(--cds-border-strong-01);
}

.cds--radio-button__label::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--cds-border-strong-01);
  background: transparent;
  transition: border-color 70ms;
}

.cds--radio-button:checked + .cds--radio-button__label {
  background: var(--cds-layer-selected-01);
  border-color: var(--cds-interactive);
}

.cds--radio-button:checked + .cds--radio-button__label::before {
  border-color: var(--cds-interactive);
  border-width: 5px;
}

.cds--radio-button:focus + .cds--radio-button__label {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

/* ─── CARBON SELECT / DROPDOWN ─── */
.cds--select {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-02);
  width: 100%;
}

.cds--select-input {
  appearance: none;
  width: 100%;
  height: var(--cds-container-04);
  padding: 0 var(--cds-spacing-08) 0 var(--cds-spacing-04);
  font: var(--cds-body-compact-01);
  color: var(--cds-text-primary);
  background-color: var(--cds-layer-01);
  border: none;
  border-bottom: 1px solid var(--cds-border-strong-01);
  outline: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23c6c6c6' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--cds-spacing-04) center;
}

.cds--select-input:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
  background-color: var(--cds-layer-hover-01);
}

.cds--select-input option {
  background: var(--cds-layer-02);
  color: var(--cds-text-primary);
}

/* ─── STRUCTURED LIST (used as chat bubbles alternative) ─── */
.cds--structured-list {
  width: 100%;
  border-collapse: collapse;
}

.cds--structured-list-row {
  border-bottom: 1px solid var(--cds-border-subtle-01);
}

.cds--structured-list-td {
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  font: var(--cds-body-compact-01);
  color: var(--cds-text-primary);
  vertical-align: top;
}

/* ─── CARBON FORM ITEM / STACK ─── */
.cds--form-item {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-02);
  margin-bottom: var(--cds-spacing-05);
}

.cds--stack--sm { display: flex; flex-direction: column; gap: var(--cds-spacing-03); }
.cds--stack--md { display: flex; flex-direction: column; gap: var(--cds-spacing-05); }
.cds--stack--lg { display: flex; flex-direction: column; gap: var(--cds-spacing-07); }

/* ─── CARBON LOADING SPINNER ─── */
.cds--loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cds--loading__svg {
  animation: rotate 0.7s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.cds--loading__stroke {
  stroke: var(--cds-interactive);
  stroke-dasharray: 240;
  stroke-dashoffset: 36;
  stroke-linecap: butt;
}

/* ─── DIVIDER ─── */
.cds--hr {
  border: none;
  border-top: 1px solid var(--cds-border-subtle-01);
  margin: var(--cds-spacing-05) 0;
}

/* ─── GRID (16-col, simplified) ─── */
.cds--grid {
  width: 100%;
  max-width: 1584px;
  margin: 0 auto;
  padding: 0 var(--cds-spacing-05);
}

.cds--row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--cds-spacing-04));
}

.cds--col {
  padding: 0 var(--cds-spacing-04);
  flex: 1 1 0%;
}

/* ─── HELPER: visible focus ring ─── */
.cds--focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: 2px;
}