/* Brand-color overrides for Bootstrap defaults.
 * Bootstrap ships with a hard-coded blue on form-check inputs, links, and
 * "primary" tints. We replace those with the site `--color-primary` so the
 * CRM and player only ever show brand color, never the leaking Bootstrap
 * blue.
 */

:root {
    /* Mirror the brand primary into Bootstrap's named slot so any rule that
       reads `--bs-primary` (or its derivatives) picks up our color. */
    --bs-primary: var(--color-primary, #4f46e5);
    --bs-primary-rgb: var(--color-primary-rgb, 79, 70, 229);
    --bs-link-color: var(--color-primary, #4f46e5);
    --bs-link-hover-color: var(--color-primary, #4f46e5);
}

/* Checkboxes, radios, switches ---------------------------------------- */
.form-check-input:checked {
    background-color: var(--color-primary, #4f46e5) !important;
    border-color: var(--color-primary, #4f46e5) !important;
}
.form-check-input:focus {
    border-color: rgba(var(--color-primary-rgb, 79, 70, 229), 0.55) !important;
    box-shadow: 0 0 0 0.18rem rgba(var(--color-primary-rgb, 79, 70, 229), 0.18) !important;
}
.form-switch .form-check-input:focus {
    /* Bootstrap re-paints the slider thumb on focus via a base64 SVG that's
       blue — repaint it in primary. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

/* Form controls focus + selects --------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--color-primary-rgb, 79, 70, 229), 0.55) !important;
    box-shadow: 0 0 0 0.18rem rgba(var(--color-primary-rgb, 79, 70, 229), 0.18) !important;
}

/* Buttons ------------------------------------------------------------- */
.btn-primary {
    background-color: var(--color-primary, #4f46e5) !important;
    border-color: var(--color-primary, #4f46e5) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: rgba(var(--color-primary-rgb, 79, 70, 229), 0.9) !important;
    border-color: rgba(var(--color-primary-rgb, 79, 70, 229), 0.9) !important;
    box-shadow: 0 0 0 0.18rem rgba(var(--color-primary-rgb, 79, 70, 229), 0.22) !important;
}
.btn-outline-primary {
    color: var(--color-primary, #4f46e5) !important;
    border-color: var(--color-primary, #4f46e5) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--color-primary, #4f46e5) !important;
    border-color: var(--color-primary, #4f46e5) !important;
    color: var(--color-text-light, #fff) !important;
}
.btn-link { color: var(--color-primary, #4f46e5) !important; }
.btn-link:hover { color: rgba(var(--color-primary-rgb, 79, 70, 229), 0.82) !important; }

/* Links --------------------------------------------------------------- */
a { color: var(--color-primary, #4f46e5); }
a:hover { color: rgba(var(--color-primary-rgb, 79, 70, 229), 0.82); }

/* Bootstrap tab + nav-pill active state ------------------------------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--color-primary, #4f46e5) !important;
}
.nav-tabs .nav-link.active {
    border-bottom-color: var(--color-primary, #4f46e5) !important;
    color: var(--color-primary, #4f46e5) !important;
}

/* Progress / spinners ------------------------------------------------- */
.progress-bar { background-color: var(--color-primary, #4f46e5) !important; }
.spinner-border.text-primary { color: var(--color-primary, #4f46e5) !important; }

/* Dropdown active item ------------------------------------------------ */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-primary, #4f46e5) !important;
}

/* Form-range slider thumb (browsers paint native blue otherwise) ------ */
.form-range::-webkit-slider-thumb { background-color: var(--color-primary, #4f46e5) !important; }
.form-range::-moz-range-thumb     { background-color: var(--color-primary, #4f46e5) !important; }

/* Bootstrap close button + alerts ------------------------------------- */
.alert-primary { background-color: rgba(var(--color-primary-rgb, 79, 70, 229), 0.10) !important;
                  color: var(--color-primary, #4f46e5) !important;
                  border-color: rgba(var(--color-primary-rgb, 79, 70, 229), 0.20) !important; }
.text-primary  { color: var(--color-primary, #4f46e5) !important; }
.bg-primary    { background-color: var(--color-primary, #4f46e5) !important; }
.border-primary { border-color: var(--color-primary, #4f46e5) !important; }

/* The course-player Mark Complete checkmark + sidebar ticks ---------- */
.sb-lesson-check.done,
.sb-part-check.done {
    background-color: var(--color-primary, #4f46e5) !important;
    border-color: var(--color-primary, #4f46e5) !important;
    color: var(--color-text-light, #fff) !important;
}

/* ── Builder header button compaction ─────────────────────────────────
   The course builder hero (`.builder-hero__actions`) and setup row
   (`.builder-setup-actions`) hold several action buttons. On narrow
   screens collapse the labels and rely on the buttons' `title`
   attributes for hover/tooltip context. */

.builder-hero__actions .builder-ghost-link,
.builder-hero__actions .builder-hero__primary,
.builder-setup-actions .builder-action-btn,
.builder-setup-actions .builder-setup-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  line-height: 1.1;
  white-space: nowrap;
}

@media (max-width: 992px) {
  .builder-hero__actions .builder-ghost-link span,
  .builder-hero__actions .builder-hero__primary span,
  .builder-setup-actions .builder-action-btn span,
  .builder-setup-actions .builder-setup-toggle span,
  .builder-hero__actions [data-ai-button-label] {
    display: none;
  }
  .builder-hero__actions .builder-ghost-link,
  .builder-hero__actions .builder-hero__primary,
  .builder-setup-actions .builder-action-btn,
  .builder-setup-actions .builder-setup-toggle {
    width: 40px; height: 40px;
    padding: 0;
    justify-content: center;
  }
  .builder-setup-actions .builder-setup-toggle .fa-chevron-down { display: none; }
}