/**
 * App-local SurveyJS overrides shared across every Bootstrap/Bootswatch theme.
 *
 * Always loaded after the SurveyJS adapter so these rules win by source order.
 * Theme-specific tweaks stay in `/survey-overrides/<theme-id>.css`.
 *
 * Prefer `--sjs2-*` token overrides on `.sjs-theme-overrides` when possible;
 * use SurveyJS class selectors only when tokens are not enough.
 */

.sjs-theme-overrides {
  --sjs2-color-component-survey-header-default-description: unset;

  /* Match native `<h2>` — Bootstrap default `$h2-font-size: 2rem`.
     Themes that diverge (darkly/flatly/litera/lux) override in their
     `/survey-overrides/<theme>.css`. */
  --sjs2-typography-font-size-component-survey-header-title: 2rem;
  --sjs2-typography-line-height-component-survey-header-title: 1.2;

  --sjs2-layout-component-survey-header-gap-vertical: 0.25rem;

  --sjs2-layout-component-survey-header-padding-top: 1rem;
  --sjs2-layout-component-survey-header-padding-horizontal: 1rem;
  --sjs2-layout-component-survey-box-padding-top: 0px;
  --sjs2-layout-component-survey-box-padding-bottom: 1rem;
  --sjs2-layout-component-survey-box-gap-vertical: 1rem;

  --sjs2-layout-component-survey-footer-padding-top: 0.5rem;
  --sjs2-layout-component-survey-footer-padding-bottom: 0;
  --sjs2-layout-component-survey-footer-padding-horizontal: 1rem;
  --sjs2-layout-component-survey-footer-action-group-gap: 0.5rem;

  --sjs2-layout-component-page-header-gap-vertical: 0;
  --sjs2-layout-component-page-box-gap-vertical: 1rem;
  --sjs2-layout-component-page-content-area-gap-vertical: 1rem;
  --sjs2-layout-component-page-content-area-gap-horizontal: 1rem;

  --sjs2-layout-component-page-header-padding-horizontal: 1rem;
  --sjs2-layout-component-page-content-area-padding-horizontal: 1rem;

  --sjs2-layout-component-page-footer-action-group-gap: 0.5rem;
  --sjs2-layout-component-page-content-area-gap-horizontal: 1.5rem;

  /* The survey description mirrors the native column's `<p className="lead">`.
     `.lead` is a utility this app opts into, not part of how a Bootstrap
     component looks by default, so the adapter does not ship it. */
  --sjs2-typography-font-size-component-survey-header-description: 1.25rem;
  --sjs2-typography-font-weight-component-survey-header-description: 300;

  --sjs2-typography-line-height-component-page-title: 1.2;

  /* Circular step markers — see the stepper section below. */
  --sjs2-radius-component-stepper-item: 100%;
}

/* ── stepper ──────────────────────────────────────────────────────────────
   Bootstrap has NO stepper component, so there is nothing for the SurveyJS
   adapter to imitate: the native column's wizard is hand-built here (see
   `.native-stepper` in src/components/NativeControls.css). Everything below
   matches the SurveyJS progress bar to that app-owned widget — numbered
   1.5rem circles in `--bs-secondary-bg`, 0.875rem/500 titles underneath —
   which is why it lives with the app rather than in the adapter. */
.sd-progress-buttons {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-inline: 1rem;
}

.sd-progress-buttons--titles-bottom .sd-progress-buttons__button {
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.sd-progress-buttons__page-description {
  display: none;
}

.sd-progress-buttons--titles-bottom .sd-progress-buttons__list-container {
  padding-bottom: 0;
  padding-top: 0;
}

.sd-progress-buttons__page-title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--bs-body-color);
}

.sd-progress-buttons__list li:first-child,
.sd-progress-buttons__list li:last-child {
  align-items: center;
}

.sd-progress-buttons--numbered .sd-progress-buttons__button {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  font-weight: 400;
  width: 1.5rem;
  height: 1.5rem;
}

.sd-progress-buttons--numbered.sd-progress-buttons--titles-bottom .sd-progress-buttons__list li:after {
  top: 0.75rem;
  bottom: unset;
}

.sd-progress-buttons--numbered .sd-progress-buttons__list li::after,
.sd-progress-buttons--numbered .sd-progress-buttons__list li:nth-child(2):not(:last-child)::after,
.sd-progress-buttons--numbered .sd-progress-buttons__list li:nth-child(n + 3):last-child::after {
  width: calc(100% - 1.5rem);
  right: calc(50% + 0.75rem);
}

/* ── responsive ───────────────────────────────────────────────────────────
   SurveyJS' own mobile mode is off, so the survey follows the same Bootstrap
   breakpoints as the rest of this app. The native column lays its fields out
   with `<Form.Group as={Col} md={6}>`, i.e. two columns down to `md`; these
   rules make the SurveyJS rows collapse at the same point. Which breakpoint
   to pick is an app decision, so it is not part of the adapter.

   The `--sd-mobile-width: 0px` that switches the mobile mode off is NOT here:
   survey-core reads it at mount, before this sheet is guaranteed to be
   applied, so it lives in src/components/SurveyForm.css. */

/* ── Creator surface tools ────────────────────────────────────────────────
   Creator reserves side padding for the page navigator / surface toolbar as
   `spacing * 9.25`. The Bootstrap adapter sets `--sjs2-base-unit-spacing` to
   `0.25rem` (4px) while tool chrome still sizes off `--sjs2-base-unit-size`
   (8px), so the gutter is half of what the tools need and the selected page
   paints over the navigator. Use the size unit for this Creator layout
   gutter; CreatorResponsivityManager still hides the tools entirely when the
   Creator container drops below the compact/mobile breakpoints. */
.svc-tab-designer--with-surface-tools .svc-tab-designer_content {
  padding-inline-start: calc(var(--sjs2-base-unit-size, 8px) * 9.25);
  padding-inline-end: calc(var(--sjs2-base-unit-size, 8px) * 9.25);
}

/* xs — phones */
@media (width < 576px) {
}

/* sm and down */
@media (width < 768px) {
  .sd-row.sd-row--multiple {
    flex-direction: column;
  }
}

/* md and down */
@media (width < 992px) {
}

/* lg and down */
@media (width < 1200px) {
}

/* xxl and up */
@media (width >= 1400px) {
}