/*
 * Webe Media - CI-Override.
 *
 * Überschreibt nur die Bootstrap-5-Custom-Properties aus
 * vendor/css/core.css (":root, [data-bs-theme=light]"). Muss NACH
 * core.css eingebunden werden, damit die Kaskade ohne !important
 * greift. Die Vendor-Datei selbst bleibt unangetastet (Update-Pfad).
 *
 * CI-Farben: #C2D107 (Primär), #020911 / #061223 (Dunkel/Sidebar).
 */
:root {
  --bs-primary: #c2d107;
  --bs-primary-rgb: 194, 209, 7;
  --bs-primary-bg-subtle: #f6f9d6;
  --bs-primary-border-subtle: #e3ea92;
  --bs-primary-text-emphasis: #5c6304;

  --bs-info: #061223;
  --bs-info-rgb: 6, 18, 35;
}

/*
 * core.css definiert --bs-primary auch direkt auf [data-bs-theme=dark]
 * (eigene Farbpalette für den Dark-Modus). Das Semi-Dark-Menü trägt
 * dieses Attribut auf dem <aside>, daher überschreibt eine geerbte
 * :root-Regel dort NICHT - core.css's direkte Deklaration auf demselben
 * Element gewinnt sonst gegen die geerbte :root-Variable.
 */
[data-bs-theme=dark] {
  --bs-primary: #c2d107;
  --bs-primary-rgb: 194, 209, 7;
  --bs-primary-bg-subtle: #3a3d05;
  --bs-primary-border-subtle: #7a8309;
  --bs-primary-text-emphasis: #e3ea92;

  --bs-info: #c2d107;
  --bs-info-rgb: 194, 209, 7;

  /* Sidebar-Hintergrund des Semi-Dark-Menüs. */
  --bs-menu-bg: #020911;
  --bs-menu-bg-rgb: 2, 9, 17;
}

/* Sidebar-Logo wirkt bei fester Menü-Kopfhöhe sonst gequetscht. */
.app-brand-logo-img {
  padding-top: 6px;
}

/*
 * DataTables (Listenansichten): Pagination-Zeile hatte keinen
 * Abstand zum unteren Kartenrand, da die Tabelle direkt in
 * ".table-responsive" statt ".card-body" liegt. Zusätzlich: die
 * rohe, noch unstylisierte Tabelle wird bis zur Initialisierung
 * versteckt (kein Flackern bei großen Tabellen) und blendet danach
 * sanft ein.
 */
.dt-container > div:last-child {
  padding: 1rem 1.5rem 1.5rem;
}

.datatable-pending:not(.dataTable) {
  display: none;
}

.dt-container {
  animation: dt-fade-in .2s ease-out;
}

@keyframes dt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/*
 * Public funnel fill-out flow (app/Modules/Funnel/Views/public/*).
 * Standalone pages, no admin layout - own light background + a single
 * centered column, wide enough to fit a 4-column choice-card grid.
 * Styled after common quiz-funnel conventions (big question, one-tap
 * single-choice, thin fixed progress line) rather than a boxed admin
 * card - this is the page a lead actually fills out, it should feel
 * like a product, not a settings form.
 */
.funnel-public-body {
  background-color: var(--bs-body-bg);
}

.funnel-wrapper {
  max-width: 46rem;
}

.funnel-step-eyebrow {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--bs-body-color);
  opacity: .55;
  margin-bottom: .75rem;
}

.funnel-step-title {
  text-align: center;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  font-weight: var(--funnel-heading-weight, 700);
  line-height: 1.25;
  margin: 0 0 .5rem;
}

.funnel-step-subtitle {
  text-align: center;
  color: var(--bs-body-color);
  opacity: .65;
  margin-bottom: 2rem;
}

/* Fades the whole step in on load - a full page reload per step still
   benefits from this, it just softens the hand-off between pages. */
.funnel-card-enter {
  animation: funnel-fade-in .35s ease-out;
}

@keyframes funnel-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/*
 * Card-style choice options (household size, roof shape, ...). The
 * radio/checkbox itself is visually hidden but stays in the tab order
 * and keyboard-operable - only its default appearance is removed, the
 * label (which wraps it) provides the click target and focus ring.
 */
.funnel-choice-card {
  position: relative;
  display: block;
  cursor: pointer;
  border: 2px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 1.5rem 1rem;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}

.funnel-choice-card:hover {
  border-color: var(--bs-primary-border-subtle);
}

.funnel-choice-card:active {
  transform: scale(.98);
}

.funnel-choice-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.funnel-choice-card:has(input:checked) {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary-bg-subtle);
}

.funnel-choice-card:has(input:focus-visible) {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.funnel-choice-icon {
  display: block;
  font-size: 1.75rem;
  margin-bottom: .5rem;
  color: var(--bs-primary-text-emphasis);
}

.funnel-choice-label {
  display: block;
  font-weight: 500;
}

.funnel-choice-card-check {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .15s ease, transform .15s ease;
}

.funnel-choice-card:has(input:checked) .funnel-choice-card-check {
  opacity: 1;
  transform: scale(1);
}

/*
 * List-row choice options ("inline" style) - icon + label left, a
 * circular check indicator right. Used for both single- and
 * multi-select fields that don't need the visual weight of full cards.
 */
.funnel-choice-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .75rem;
}

.funnel-choice-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  border: 2px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: .875rem 1.125rem;
  transition: border-color .15s ease, background-color .15s ease;
}

.funnel-choice-row:hover {
  border-color: var(--bs-primary-border-subtle);
}

.funnel-choice-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.funnel-choice-row:has(input:checked) {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary-bg-subtle);
}

.funnel-choice-row:has(input:focus-visible) {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.funnel-choice-row-icon {
  font-size: 1.25rem;
  color: var(--bs-primary-text-emphasis);
  flex-shrink: 0;
}

.funnel-choice-row-label {
  font-weight: 500;
  flex-grow: 1;
}

.funnel-choice-row-indicator {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--bs-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: .8125rem;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.funnel-choice-row:has(input:checked) .funnel-choice-row-indicator {
  border-color: var(--bs-primary);
  background: var(--bs-primary);
  color: #fff;
}

/* Slim, always-visible progress line pinned to the viewport bottom -
   stays in view without needing to scroll back up on long steps. */
.funnel-progress-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--bs-border-color);
  z-index: 1000;
}

.funnel-progress-fixed-bar {
  height: 100%;
  background: var(--bs-primary);
  transition: width .3s ease;
}