/* ==========================================================================
   GLOBAL: Root declarations
   ========================================================================== */
/* #region root declarations and defaults */

:root {
  /* 1. Brand Colors */
  --beag-logo-rgb-base: #62b669;
  --beag-logo-rgb-dark: #4E9354;
  --beag-logo-rgb-light: #96ce9b;
  --beag-complement-rgb-base: #8babf7;
  --beag-complement-rgb-dark: #4377f2;
  --beag-complement-rgb-light: #F2F6FF;  
  --beag-grey-rgb-base: #939DB0;
  --beag-grey-rgb-dark: #68758e;
  --beag-grey-rgb-light: #dddddd;
  --beag-accent1-rgb-base: #FFDA5D;
  --beag-accent1-rgb-dark: #ffc911;
  --beag-accent1-rgb-light: #fff7dd;
  --beag-danger-rgb-base: #b66962;
  --beag-danger-rgb-dark: #8b4741;

  /* 2. Bootstrap Theme Semantic Color Overrides */
  /* Bootstrap automatically calculates hover states, borders, and subtle shades 
     from these base values. 
     Note that each also has a bootstrap rgb defined for its Alpha Blending needs
  */
  --bs-primary: var(--beag-complement-rgb-base);
  --bs-primary-rgb:  139, 171, 247;           /* rgb of #8babf7 blue base */
  --bs-secondary: var(--beag-grey-rgb-base);
  --bs-secondary-rgb: 147, 157, 176;          /* rgb of #939DB0 grey base */
  --bs-success: var(--beag-logo-rgb-base);
  --bs-success-rgb: 98, 182, 105;             /* rgb of #62b669 logo green base */
  --bs-success-bg-subtle: var(--beag-success-rgb-light);
  --bs-warning: var(--beag-accent1-rgb-base);
  --bs-warning-rgb: 255, 218, 93;             /* rgb of #FFDA5D accent yellow base */
  --bs-danger: var(--beag-danger-rgb-base);
  --bs-danger-rgb: 182, 105, 98;              /* rgb of #b66962 triadic rust */
  --bs-info: var(--beag-complement-rgb-base);
  --bs-info-rgb: 242, 246, 255;               /* rgb of #F2F6FF light blue */
  --bs-info-bg-subtle: var(--beag-complement-rgb-light);
  /* focus ring */
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);  

  /* semantic surfaces and text */
  --beag-surface-base: #ffffff;
  --beag-surface-alt: #f8f9fa;
  --beag-text-main: #212529;
  --beag-text-muted: var(--beag-grey-rgb-dark);

  --bs-body-bg: var(--beag-surface-base);
  --bs-body-color: var(--beag-text-main);
  --bs-body-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: var(--beag-surface-alt);  

  /* default button mappings */  
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--beag-complement-rgb-dark);
  --bs-btn-hover-border-color: var(--beag-complement-rgb-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--beag-complement-rgb-dark);
  --bs-btn-active-border-color: var(--beag-complement-rgb-dark);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-disabled-color: #fff;

  /* --- Primary (Blue) --- */
  --bs-btn-primary-bg: var(--bs-primary);
  --bs-btn-primary-border-color: var(--bs-primary);
  --bs-btn-primary-color: #fff;
  --bs-btn-primary-hover-bg: var(--beag-complement-rgb-dark);
  --bs-btn-primary-hover-border-color: var(--beag-complement-rgb-dark);
  --bs-btn-primary-hover-color: #fff;
  --bs-btn-primary-active-bg: var(--beag-complement-rgb-dark);
  --bs-btn-primary-active-border-color: var(--beag-complement-rgb-dark);
  --bs-btn-primary-disabled-bg: var(--bs-primary);
  --bs-btn-primary-disabled-border-color: var(--bs-primary);
  --bs-btn-primary-disabled-color: #fff;

  /* --- Secondary (Grey) --- */
  --bs-btn-secondary-bg: var(--bs-secondary);
  --bs-btn-secondary-border-color: var(--bs-secondary);
  --bs-btn-secondary-color: #fff;
  --bs-btn-secondary-hover-bg: var(--beag-grey-rgb-dark);
  --bs-btn-secondary-hover-border-color: var(--beag-grey-rgb-dark);
  --bs-btn-secondary-hover-color: #fff;
  --bs-btn-secondary-active-bg: var(--beag-grey-rgb-dark);
  --bs-btn-secondary-active-border-color: var(--beag-grey-rgb-dark);
  --bs-btn-secondary-disabled-bg: var(--bs-secondary);
  --bs-btn-secondary-disabled-border-color: var(--bs-secondary);
  --bs-btn-secondary-disabled-color: #fff;

  /* --- Success (Green) --- */
  --bs-btn-success-bg: var(--bs-success);
  --bs-btn-success-border-color: var(--bs-success);
  --bs-btn-success-color: #fff;
  --bs-btn-success-hover-bg: var(--beag-logo-rgb-dark);
  --bs-btn-success-hover-border-color: var(--beag-logo-rgb-dark);
  --bs-btn-success-hover-color: #fff;
  --bs-btn-success-active-bg: var(--beag-logo-rgb-dark);
  --bs-btn-success-active-border-color: var(--beag-logo-rgb-dark);
  --bs-btn-success-disabled-bg: var(--bs-success);
  --bs-btn-success-disabled-border-color: var(--bs-success);
  --bs-btn-success-disabled-color: #fff;

  /* --- Warning (Yellow) --- */
  --bs-btn-warning-bg: var(--bs-warning);
  --bs-btn-warning-border-color: var(--bs-warning);
  --bs-btn-warning-color: var(--bs-body-color); /* Dark text for contrast */
  --bs-btn-warning-hover-bg: var(--beag-accent1-rgb-dark);
  --bs-btn-warning-hover-border-color: var(--beag-accent1-rgb-dark);
  --bs-btn-warning-hover-color: var(--bs-body-color);
  --bs-btn-warning-active-bg: var(--beag-accent1-rgb-dark);
  --bs-btn-warning-active-border-color: var(--beag-accent1-rgb-base);
  --bs-btn-warning-disabled-bg: var(--bs-warning);
  --bs-btn-warning-disabled-border-color: var(--bs-warning);
  --bs-btn-warning-disabled-color: var(--bs-body-color);

  /* --- Danger (Rust) --- */
  --bs-btn-danger-bg: var(--bs-danger);
  --bs-btn-danger-border-color: var(--bs-danger);
  --bs-btn-danger-color: #fff;
  --bs-btn-danger-hover-bg: var(--beag-danger-rgb-dark);
  --bs-btn-danger-hover-border-color: var(--beag-danger-rgb-dark);
  --bs-btn-danger-hover-color: #fff;
  --bs-btn-danger-active-bg: var(--beag-danger-rgb-dark);
  --bs-btn-danger-active-border-color: var(--beag-danger-rgb-base);
  --bs-btn-danger-disabled-bg: var(--bs-danger);
  --bs-btn-danger-disabled-border-color: var(--bs-danger);
  --bs-btn-danger-disabled-color: #fff;

  /* --- Info (Light Grey) --- */
  --bs-btn-info-bg: var(--bs-info);
  --bs-btn-info-border-color: var(--bs-info);
  --bs-btn-info-color: var(--bs-body-color);
  --bs-btn-info-hover-bg: var(--beag-grey-rgb-light);
  --bs-btn-info-hover-border-color: var(--beag-grey-rgb-light);
  --bs-btn-info-hover-color: var(--bs-body-color);
  --bs-btn-info-active-bg: var(--beag-grey-rgb-light);
  --bs-btn-info-active-border-color: var(--beag-grey-rgb-light);
  --bs-btn-info-disabled-bg: var(--bs-info);
  --bs-btn-info-disabled-border-color: var(--bs-info);
  --bs-btn-info-disabled-color: var(--bs-body-color);
}

/* #endregion */

/* ==========================================================================
   UTILITIES: Platform Brand Colors & Typography
   ========================================================================== */
/* #region utilities */

body {
  font-family: lato, sans-serif;
  color: var(--beag-grey-rgb-base); 
}

.beag-app-container {
  padding-top: 0.5rem;
  padding-bottom: 4rem !important;
}

.font-comfortaa {
  font-family: comfortaa, sans-serif;
}

/* Color Utilities (Namespaced to avoid Bootstrap collision) */
.beag-text-logo-base { color: var(--beag-logo-rgb-base); }
.beag-text-logo-dark { color: var(--beag-logo-rgb-dark); }
.beag-text-logo-light { color: var(--beag-logo-rgb-light); }
.beag-text-complement-base { color: var(--beag-complement-rgb-base); }
.beag-text-grey-base { color: var(--beag-grey-rgb-base); }
.beag-text-grey-light { color: var(--beag-grey-rgb-light); }
.beag-text-accent1-base { color: var(--beag-accent1-rgb-base); }
.beag-text-accent1-light { color: var(--beag-accent1-rgb-light); }

.beag-bg-info { background-color: var(--beag-grey-rgb-light) !important; }
.beag-border-info { border-color: var(--beag-grey-rgb-light) !important; }

/* Typography Utilities */
.beag-font-comfortaa { font-family: comfortaa, sans-serif; }

/* #endregion */

/* ==========================================================================
   GLOBAL LAYOUT PATTERN: Centered Content Stage
   ========================================================================== */
/* #region center stage */
/* Usage: Apply to any container that should be:
   1. Centered on the page.
   2. Full width on mobile.
   3. Constrained width on desktop (for readability/focus).
*/

.beag-centered-content-stage {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Mobile: Full width (default behavior of width: 100%) */

/* Tablet: Allow growth, but ensure it doesn't snap smaller than mobile */
@media (min-width: 576px) {
  .beag-centered-content-stage {
    max-width: 90%; /* Ensures smooth growth from mobile width */
  }
}

/* Desktop: Constrain to a readable/focused width */
@media (min-width: 992px) {
  .beag-centered-content-stage {
    max-width: 800px; /* The "Google/Focus" width */
  }
}

/* Helper for the direct child to fill the stage (optional, depending on content) */
.beag-centered-content-stage > * {
  width: 100%;
  box-sizing: border-box;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: Form Overrides
   ========================================================================== */
/* #region form overrides */
.form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("icons/bi_check.svg");
  background-image: var(--bs-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em 1em;
}

.form-check-input[type=checkbox]:indeterminate {
  --bs-form-check-bg-image: url("icons/bi_indeterminate.svg");
  background-image: var(--bs-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em 1em;
  background-color: var(--beag-grey-rgb-base);
  border-color: var(--beag-grey-rgb-base);
}

.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("icons/bi_radio_dot.svg");
  background-image: var(--bs-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em 1em;
}

/* lighten input placeholder text */
.form-control::placeholder {
  color: var(--beag-grey-rgb-base);
  opacity: 0.8;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: ActionLinkComponent
   ========================================================================== */
/* #region ActionLinkComponent */

/* 
   Base Component Styles 
   Acts as the reset and foundation. 
*/
.beag-link {
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 
              border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, filter 0.15s;
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius, 0.25rem);
  padding: var(--bs-btn-padding-y, 0.25rem) var(--bs-btn-padding-x, 0.5rem);
  text-align: center;
  vertical-align: middle;
}

/* Focus States (Accessibility) */
.beag-link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Disabled State */
.beag-link.disabled,
.beag-link[aria-disabled="true"] {
  opacity: 0.7;
  pointer-events: none;
  cursor: not-allowed;
  filter: none; /* Ensure disabled buttons don't darken on hover */
}

/* ==========================================================================
   VARIANTS
   Strategy: Solid colors for semantic variants, custom styles for ghost/link.
   Hover states use 'filter: brightness()' for consistent darkening.
   ========================================================================== */

/* --- Solid Variants (Primary, Secondary, Success, Danger) --- */

.beag-link--primary,
.beag-link--secondary,
.beag-link--success,
.beag-link--danger {
  color: #fff; /* All solid brand buttons have white text */
}

/* Specific Backgrounds */
.beag-link--primary { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.beag-link--secondary { background-color: var(--bs-secondary); border-color: var(--bs-secondary); }
.beag-link--success { background-color: var(--bs-success); border-color: var(--bs-success); }
.beag-link--danger { background-color: var(--bs-danger); border-color: var(--bs-danger); }

/* Unified Hover State: Darken slightly */
.beag-link--primary:hover,
.beag-link--secondary:hover,
.beag-link--success:hover,
.beag-link--danger:hover {
  filter: brightness(85%);
  color: #fff; /* Ensure text stays white */
}

/* Active State: Darken more */
.beag-link--primary:active,
.beag-link--secondary:active,
.beag-link--success:active,
.beag-link--danger:active {
  filter: brightness(75%);
}

/* --- Ghost Variant (Outline) --- */

.beag-link--ghost {
  color: var(--beag-grey-rgb-dark);
  background-color: transparent;
  border-color: var(--beag-grey-rgb-base);
}

.beag-link--ghost:hover {
  color: var(--beag-grey-rgb-dark);
  background-color: var(--beag-grey-rgb-light);
  border-color: var(--beag-grey-rgb-dark);
  filter: none; /* Don't darken, we changed bg color */
}

.beag-link--ghost:active {
  background-color: var(--beag-grey-rgb-base);
  color: #fff;
}

/* --- Close X Variant (paired with absolute-top-right) --- */

.beag-link--closex {
  color: var(--beag-grey-rgb-base);
  background-color: transparent;
  padding: 0px;
  line-height: 0;
}

.beag-link--closex:hover {
  color: var(--beag-grey-rgb-dark);
  background-color: var(--beag-grey-rgb-light);
  filter: none; /* Don't darken, we changed bg color */
}

.beag-link--closex:active {
  background-color: var(--beag-grey-rgb-base);
  color: #fff;
}

/* --- Link Variant (Text Only) --- */

.beag-link--link {
  /* Reset box model to behave like inline text */
  display: inline; 
  padding: 0;
  border: none;
  border-radius: 0;
  line-height: inherit; /* Inherit line-height from parent sentence */
  vertical-align: baseline; /* Ensure baseline matches surrounding text */
  
  /* Visual styles */
  color: var(--bs-link-color, var(--bs-primary));
  background-color: transparent;
  text-decoration: none;
  text-underline-offset: 0.25em;
  
  /* Reset flex behaviors from base class if inherited */
  align-items: normal; 
  gap: 0;
  text-align: left; /* Reset center alignment */
}

.beag-link--link i {
  margin-right: .2em;
  color: var(--beag-grey-rgb-base);
}

.beag-link--link:hover {
  color: var(--bs-link-hover-color, var(--bs-primary));
  text-decoration: underline dotted;
  filter: none;
}
.beag-link--link:hover i {
  color: inherit;
}

.beag-link--link:active {
  color: var(--bs-link-hover-color);
  text-decoration: none;
}

/* --- Disabled State (Global for all variants) --- */
/* Applies when setInteractive adds .beag-disabled or .disabled */

.beag-link.disabled,
.beag-link.beag-disabled {
  color: var(--beag-grey-rgb-base); /* Force grey text */
  background-color: transparent;
  cursor: not-allowed;
  text-decoration: none;
  pointer-events: none; /* Already set by inline style, but good for CSS completeness */
}

/* Specific fix for the Link Variant to ensure icon matches text */
.beag-link--link.disabled,
.beag-link--link.beag-disabled {
  color: var(--beag-grey-rgb-base);
}

.beag-link--link.disabled i,
.beag-link--link.beag-disabled i {
  color: var(--beag-grey-rgb-base);
}

/* #endregion */

/* ==========================================================================
   COMPONENT: RadioGroupComponent
   ========================================================================== */
/* #region RadioGroupComponent */

/* 
   Base Component Styles 
   Resets fieldset defaults and establishes the flex container.
*/
.beag-radio-group {
  display: inline-flex;
  flex-direction: column; /* Default to List layout */
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: none; /* Reset fieldset border */
  width: 100%;
  max-width: 100%;
}

.beag-radio-group__options {
  display: inherit;
  flex-direction: inherit;
  gap: inherit;
  width: 100%;
}

/* 
   Option Wrapper (Label)
   Acts as the clickable surface. 
   We hide the real input and style this label instead.
*/
.beag-radio-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease-in-out;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--bs-border-radius, 0.375rem);
  padding: 0.5rem 1rem;
  text-align: center;
}

/* 
   The Native Input (Hidden but Accessible)
   Visually hidden but remains focusable for keyboard navigation.
*/
.beag-radio-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  cursor: inherit;
}

/* Focus State: Crucial for Accessibility when input is hidden */
.beag-radio-option:has(input:focus-visible) {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  box-shadow: var(--bs-focus-ring-shadow);
  z-index: 2; /* Ensure focus ring sits on top */
}

/* 
   Invalid State 
   Applied via setValidationState utility (adds .is-invalid to input).
   We style the label based on the input's state.
*/
.beag-radio-option:has(input.is-invalid) {
  border-color: var(--bs-danger);
  color: var(--bs-danger);
  background-color: rgba(var(--bs-danger-rgb), 0.05);
}

.beag-radio-group.is-disabled {
  opacity: 0.6;
  pointer-events: none; /* Extra safety layer */
}

.beag-radio-group.is-disabled .beag-radio-option {
  cursor: not-allowed;
}

/* ==========================================================================
   VARIANTS
   Strategy: Use CSS Grid/Flex and Borders to create distinct visual modes.
   ========================================================================== */

/* --- Variant: List (Default) --- */
.beag-radio-group--list {
  flex-direction: column;
  align-items: flex-start;
}
.beag-radio-group--list .beag-radio-option {
  width: 100%;
  justify-content: flex-start;
  background-color: var(--beag-surface-base);
  border: 1px solid var(--beag-grey-rgb-light);
}
.beag-radio-group--list .beag-radio-option:hover {
  background-color: var(--beag-surface-alt);
  border-color: var(--bs-secondary);
}
.beag-radio-group--list .beag-radio-option:has(input:checked) {
  background-color: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
}

/* --- Variant: Tabs --- */
.beag-radio-group--tabs {
  flex-direction: row;
  border-bottom: 2px solid var(--beag-grey-rgb-light);
  gap: 0;
  align-items: flex-end;
}
.beag-radio-group--tabs .beag-radio-option {
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  margin-bottom: -2px; /* Overlap the container border */
  background-color: transparent;
  color: var(--beag-text-muted);
  z-index: 1;
}
.beag-radio-group--tabs .beag-radio-option:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.05);
  color: var(--bs-body-color);
}
.beag-radio-group--tabs .beag-radio-option:has(input:checked) {
  background-color: var(--beag-surface-base);
  border-color: var(--beag-grey-rgb-light);
  border-bottom: 2px solid var(--beag-surface-base); /* Hide bottom border */
  color: var(--bs-primary);
  font-weight: 600;
  z-index: 2; /* Sit above the border line */
}

/* --- Variant: Pills --- */
.beag-radio-group--pills {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.beag-radio-group--pills .beag-radio-option {
  background-color: var(--beag-surface-alt);
  border: 1px solid transparent;
  border-radius: 999px; /* Fully rounded */
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.beag-radio-group--pills .beag-radio-option:hover {
  background-color: var(--beag-grey-rgb-light);
}
.beag-radio-group--pills .beag-radio-option:has(input:checked) {
  background-color: var(--bs-primary);
  color: #fff;
  box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.3);
}

/* --- Variant: Segmented (Connected Bar) --- */
.beag-radio-group--segmented {
  flex-direction: row;
  background-color: var(--beag-surface-alt);
  padding: 0.25rem;
  border-radius: 0.5rem;
  gap: 0;
  display: inline-flex;
  width: auto;
}
.beag-radio-group--segmented .beag-radio-option {
  flex: 1;
  border-radius: 0.375rem;
  background-color: transparent;
  border: 1px solid transparent;
}
.beag-radio-group--segmented .beag-radio-option:hover {
  background-color: rgba(var(--bs-body-color-rgb), 0.05);
}
.beag-radio-group--segmented .beag-radio-option:has(input:checked) {
  background-color: var(--beag-surface-base);
  color: var(--bs-primary);
  border-color: var(--beag-grey-rgb-light);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  font-weight: 600;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: SearchBoxComponent
   ========================================================================== */
/* #region SearchBoxComponent */

/* --- Search Box Layout --- */
.beag-search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

/* 1. The Input Wrapper (First Child) */
.beag-search-box__input {
  flex: 1 1 0%;
  min-width: 0;
}

/* Ensure the actual input inside fills its wrapper */
.beag-search-box > div:first-child .form-control {
  width: 100%;
}

/* 2. The Button */
.beag-search-box .beag-link {
  flex: 0 0 auto; /* Never grow, never shrink */
  white-space: nowrap;
}

/* --- Mobile Centering --- */
@media (max-width: 575px) {
  .beag-search-box {
    justify-content: center;
  }
}

/* #endregion */

/* ==========================================================================
   COMPONENT: TipComponent
   ========================================================================== */
/* #region TipComponent */

.beag-tip-parent {
  position: relative;
}

.beag-tip-wrapper {
  display: inline-block;
  position: relative;
}

.beag-tip-wrapper i.bi-info-circle {
  display: inline;
  vertical-align: text-top;
  margin-left: 0.25em;
  cursor: help;
}

.beag-tip-text {
  position: absolute;
  max-width: 90vw;
  max-width: 100%;
  width: max-content;
  color: white;
  padding-top: 1rem;
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.1s, opacity 0.1s;
  z-index: 1050;
}
/* our approach allows for some vertical margin beneath the info icon, yet contiguous from a hover event perspective */
.beag-tip-text-innards {
  display: flex;
  background-color: var(--beag-grey-rgb-base);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
  border-radius: 0.5rem;
  box-sizing: border-box;
  padding: 1rem;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: WizardComponent
   ========================================================================== */
/* #region WizardComponent */

/* Wizard Manager Frame */
.beag-wizard-manager-frame {
  margin: .5rem auto;
  border-radius: 0.3rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border: 1px solid var(--beag-grey-rgb-base);
  overflow: hidden;
}

.beag-wizard-header {
  display: flex;
  position: relative;
  padding: .5rem 1rem;
  border-bottom: 1px solid var(--beag-grey-rgb-base);
  background-color: #f8f9fa;
}

.beag-wizard-header-title {
  color: var(--beag-grey-rgb-base);
}

.beag-wizard-content {
  padding: 1rem;
}

.beag-wizard-decisions {
  padding: 0 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: OrganisationSearchStageComponent
   ========================================================================== */
/* #region OrganisationSearchStageComponent */

/* --- LEVEL 1 is the App Stage (a level above the Search experience) --- */

/* --- LEVEL 2: The Search Stage (Query + Future Results) --- */
.beag-org-search-stage {
  width: 100%;
  margin: 1.5rem auto;
  text-align: center;
  /* NO max-width here on mobile */
}

.beag-org-search-stage__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

/* --- LEVEL 3: The Query Builder (Container for Search Box) --- */
.beag-org-query-builder {
  width: 100%; /* Fill the stage */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* --- LEVEL 4: The Search Box (Input + Button) --- */
.beag-search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

/* The Input Wrapper (Child 1) */
.beag-search-box > .beag-text-input {
  /* CRITICAL: Grow to fill space, start calculation at 0 */
  flex: 1 1 0%; 
  min-width: 0; /* Allow shrinking below content size if needed */
}

/* The Input Element itself */
.beag-search-box .form-control {
  width: 100%;
}

/* The Button (Child 2) */
.beag-search-box .beag-link {
  flex: 0 0 auto; /* Do not grow/shrink */
  white-space: nowrap;
}

/* --- RESPONSIVE BREAKPOINTS --- */

/* Tablet (≥ 576px): 
   DO NOT constrain width yet! Let it grow with the screen.
   If we constrain now, it might be narrower than the mobile "100%".
*/
@media (min-width: 576px) {
  .beag-org-search-stage {
    /* Optional: Allow it to be up to 90% of screen, ensuring it's always wider than mobile */
    max-width: 90%; 
  }
}

/* Desktop (≥ 992px): 
   NOW we apply the "Google-style" fixed max-width for readability.
*/
@media (min-width: 992px) {
  .beag-org-search-stage {
    max-width: 800px; /* Constrain the whole stage (Query + Results) */
  }
  
  /* Ensure the input still fills the available space within that 800px */
  .beag-search-box > .beag-text-input {
    flex: 1 1 0%;
  }
}

/* Mobile Centering (Optional aesthetic tweak) */
@media (max-width: 575px) {
  .beag-search-box {
    justify-content: center; /* Center the group if the screen is wide enough to have slack */
  }
}

/* #endregion */ 

/* ==========================================================================
   COMPONENT: FilterEditorWrapperComponent
   ========================================================================== */
/* #region FilterEditorWrapperComponent */

.beag-filter-wrapper {
  position: relative;
  width: 100%;
  height: 0; /* Don't affect layout flow */
  z-index: 50;
}

.beag-filter-wrapper__popover {
  position: absolute;
  top: 100%; /* Directly below the trigger row */
  left: 0;
  margin-top: 0.5rem;
  background-color: var(--beag-surface-base);
  border: 1px solid var(--beag-grey-rgb-light);
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 100;
  padding: 1rem;
  min-width: 18rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch; 
  width: 100%;
}

/* Header: Flex container to separate Left (Title+Apply) and Right (Cancel) */
.beag-filter-wrapper__header {
  display: flex;
  align-items: center;
  width: 100%; /* Ensure header fills the popover width */
  box-sizing: border-box; /* Include padding/border in width */
  border-bottom: 1px solid var(--beag-grey-rgb-light);
  padding-bottom: 0.75rem;
  padding-right: 1rem;
}

/* Left Group: Title + Apply Button */
.beag-filter-wrapper__header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* Space between Title and Apply button */
  min-width: 0; /* Prevents flex item from overflowing if title is long */
  flex: 1;
}

.beag-filter-wrapper__title {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

.beag-filter-wrapper__apply-btn {
  margin-left: auto;
}

/* Content Slot */
.beag-filter-wrapper__content {
  padding: 0.5rem 0;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: EnumRangeSliderComponent
   ========================================================================== */
/* #region EnumRangeSliderComponent */
.beag-enum-slider {
  position: relative;
  width: 100%;
  /* Padding creates the vertical space for handles to sit centered */
  padding: 1.5rem 0.5rem 1rem 0.5rem; 
  box-sizing: border-box;
  user-select: none;
}

/* 
   Track: Simple line. 
   This ensures 0% and 100% coordinates match exactly between Ticks and Handles,
   preventing sub-pixel misalignment at the far edges.
*/
.beag-enum-slider__track {
  position: absolute;
  top: 50%; /* Center of the container's content box */
  left: 0;
  right: 0;
  height: 0.25rem; /* 4px */
  background-color: var(--beag-grey-rgb-light);
  border-radius: 999px;
  cursor: pointer;
  z-index: 1;
  /* Pull up by 50% of its own height to be perfectly centered */
  transform: translateY(-50%); 
  order: 1;
}

.beag-enum-slider__handle {
  position: absolute;
  top: 50%; /* Aligns with the center of the container (and thus the track) */
  left: 0; /* Will be overridden by JS */
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  background-color: var(--beag-surface-base);
  border: 0.125rem solid var(--bs-primary); /* ~2px */
  border-radius: 50%;
  /* Center the handle on the coordinate */
  transform: translate(-50%, -50%); 
  cursor: ew-resize;
  z-index: 10;  /* Ensure handles sit above ticks */
  box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.2);
  transition: transform 0.1s, background-color 0.1s, box-shadow 0.1s;
  box-sizing: border-box;
  /* for mobile: Disables browser scrolling/zooming on the handle */
  touch-action: none;
}

/* Hover/Focus: Make it pop */
.beag-enum-slider__handle:hover {
  transform: translate(-50%, -50%) scale(1.15);
  background-color: var(--bs-primary); /* Fill blue */
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
}

.beag-enum-slider__handle:focus-visible {
  outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
  outline-offset: 0.125rem;
  background-color: var(--bs-primary);
}

.beag-enum-slider__handle:active {
  cursor: grabbing;
}

/* 
   Label: Single Summary Text 
   "11 to 500 people"
   Normal flow (static positioning) so it sits below the absolute elements.
*/
.beag-enum-slider__label {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 2.5rem; /* Push it down below the track/handles */
  font-variant-numeric: tabular-nums; /* Prevents width jitter */
  white-space: nowrap;
  /* Ensure label doesn't affect the vertical centering of the track */
  order: 2; 
}

/* Disabled State */
.beag-enum-slider.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.beag-enum-slider.is-disabled .beag-enum-slider__handle {
  background-color: var(--beag-grey-rgb-light);
  border-color: var(--beag-grey-rgb-base);
  cursor: not-allowed;
}

.beag-enum-slider__fill {
  position: absolute;
  top: 50%;
  height: 0.25rem; /* Same as track height */
  background-color: var(--bs-primary);
  border-radius: 999px;
  transform: translateY(-50%);
  z-index: 2; /* Above track, below ticks/handles */
  pointer-events: none; /* Clicks pass through to track/ticks */
  transition: left 0.1s ease, width 0.1s ease; /* Smooth animation */
}

/* Tick Marks: Visual indicators for valid snap points */
.beag-enum-slider__tick {
  position: absolute;
  top: 50%;
  width: 0.75rem;  /* ~12px, scalable */
  height: 0.75rem;
  background-color: var(--beag-surface-base);
  border: 0.125rem solid var(--beag-grey-rgb-light); /* ~2px */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
  pointer-events: auto; /* Ensure it captures clicks */
}

.beag-enum-slider__tick:hover {
  border-color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.15);
  transform: translate(-50%, -50%) scale(1.2);
}

/* #endregion */

/* ==========================================================================
   COMPONENT: RevealBoxComponent
   ========================================================================== */
/* #region RevealBoxComponent */

/* 
   Base Container 
   Managed by RevealBoxComponent._syncLayoutAndClasses()
*/
.beag-reveal-box {
  overflow: hidden;
  border-radius: 0.3rem;
  /* Ensure relative positioning for absolute children if needed, 
     though canvas handles most positioning */
  position: relative; 
}

/* Collapsed State Utility 
   Toggled by RevealBoxComponent updaters 
*/
.beag-reveal-box.collapsed .beag-reveal-box-canvas,
.beag-reveal-box.collapsed .beag-reveal-box-expand {
  display: none;
}
.beag-reveal-box.collapsed .beag-reveal-box-collapse {
  display: inline;
}

/* 
   Header 
   Click target for toggle. 
*/
.beag-reveal-box-header {
  padding: 0.25rem 0.5rem;
  background-color: var(--beag-complement-rgb-base);
  color: var(--beag-accent1-rgb-light); /* Fallback if var missing */
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9em;
  text-decoration: none; /* It's an <a> tag */
}

.beag-reveal-box-header:hover {
  color: var(--beag-accent1-rgb-base);
}

.beag-reveal-box.collapsed .beag-reveal-box-header:hover {
  background-color: var(--beag-complement-rgb-base);
  color: var(--beag-accent1-rgb-base);
}

.beag-reveal-box.collapsed .beag-reveal-box-header {
  background-color: var(--beag-complement-rgb-base);
}

/* Header Text (Explicit class for TS injection) */
.beag-reveal-box-header-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.beag-reveal-box.collapsed .acc-collapse { display: none; }
.beag-reveal-box:not(.collapsed) .acc-expand { display: none; }

/* 
   Canvas 
   Holds BG, Main Content, Egg, and Controls.
*/
.beag-reveal-box-canvas {
  position: relative;
  display: flex;
  border: solid 1px var(--beag-complement-rgb-base);
  border-bottom-left-radius: 0.3rem;
  overflow: hidden;
  min-height: 4rem;
}

/* 
   Background Layer (The "Egg" Image)
   Handles the pan/zoom animation via class swaps.
*/
.beag-reveal-box-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.4;
  will-change: transform, background-position;
  pointer-events: none;
}

.beag-reveal-box-bg.initial-topleft {
  background-position: top left;
  transform-origin: top left;
}
.beag-reveal-box-bg.initial-topcenter {
  background-position: top center;
  transform-origin: top center;
}
.beag-reveal-box-bg.initial-topright {
  background-position: top right;
  transform-origin: top right;
}
.beag-reveal-box-bg.initial-centerleft {
  background-position: center left;
  transform-origin: center left;
}
.beag-reveal-box-bg.initial-center {
  background-position: center center;
  transform-origin: center center;
}
.beag-reveal-box-bg.initial-centerright {
  background-position: center right;
  transform-origin: center right;
}
.beag-reveal-box-bg.initial-bottomleft {
  background-position: bottom left;
  transform-origin: bottom left;
}
.beag-reveal-box-bg.initial-bottomcenter {
  background-position: bottom center;
  transform-origin: bottom center;
}
.beag-reveal-box-bg.initial-bottomright {
  background-position: bottom right;
  transform-origin: bottom right;
}
.beag-reveal-box-bg.initial-zoom1 {
  transform: scale(1);
}
.beag-reveal-box-bg.initial-zoom1_5 {
  transform: scale(1.5);
}
.beag-reveal-box-bg.initial-zoom2 {
  transform: scale(2);
}
/* Animation Trigger */
.beag-reveal-box.beag-reveal-egg-mode .beag-reveal-box-bg {
  opacity: 1;
  transition: background-position 20s ease-out, background-size 20s ease-out, transform 20s ease-out;
}
.beag-reveal-egg-mode .beag-reveal-box-bg.final-topleft {
  background-position: top left;
}
.beag-reveal-egg-mode .beag-reveal-box-bg.final-topcenter {
  background-position: top center;
}
.beag-reveal-egg-mode .beag-reveal-box-bg.final-topright {
  background-position: top right;
}
.beag-reveal-egg-mode .beag-reveal-box-bg.final-centerleft {
  background-position: center left;
}
.beag-reveal-egg-mode .beag-reveal-box-bg.final-center {
  background-position: center center;
}
.beag-reveal-egg-mode .beag-reveal-box-bg.final-centerright {
  background-position: center right;
}
.beag-reveal-egg-mode .beag-reveal-box-bg.final-bottomleft {
  background-position: bottom left;
}
.beag-reveal-egg-mode .beag-reveal-box-bg.final-bottomcenter {
  background-position: bottom center;
}
.beag-reveal-egg-mode .beag-reveal-box-bg.final-bottomright {
  background-position: bottom right;
}
.beag-reveal-egg-mode .beag-reveal-box-bg.final-zoom1 {
  transform: scale(1);
}
.beag-reveal-egg-mode .beag-reveal-box-bg.final-zoom1_5 {
  transform: scale(1.5);
}
.beag-reveal-egg-mode .beag-reveal-box-bg.final-zoom2 {
  transform: scale(2);
}

/* 
   Main Content Layer
   The standard collapsed/expanded content.
*/
.beag-reveal-box-main {
  position: relative;
  z-index: 1;
  padding: 0.5rem 1rem 1rem 1rem;
  flex: 1;
  background-color: var(--beag-grey-rgb-light);
  min-height: 4rem;
  box-sizing: border-box;
  width: 100%;
  border-radius: 0.3rem;
}

.beag-reveal-box-main.beag-reveal-has-egg {
  clip-path: polygon(
    0% 0%, 
    100% 0%, 
    100% calc(100% - 1.5rem), 
    calc(100% - 1.5rem) 100%, 
    0% 100%
  );
}

.beag-reveal-box.beag-reveal-egg-mode .beag-reveal-box-main {
  visibility: hidden; /* Hide content but keep layout flow */
}

/* 
   Easter Egg Layer
   Overlays main content when active.
*/
.beag-reveal-box-egg {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none; /* Flex when active */
  box-sizing: border-box;
  text-align: left;
  background-color: transparent; 
  flex-direction: column;
  align-items: flex-start;
}

.beag-reveal-box.beag-reveal-egg-mode .beag-reveal-box-egg {
  display: flex;
}

/* Flex utilities for egg content positioning */
.beag-reveal-box-egg.justify-content-end {
  justify-content: flex-end;
}

.beag-reveal-box-egg-caption {
  display: inline-block;
  background-color: var(--beag-complement-rgb-light);
  opacity: 0.9;
  font-size: 0.9em;
  color: var(--beag-complement-rgb-dark);
  padding: 0.3rem;
  border-radius: 0.3rem;
}

/* 
   Controls: Close Button & Hover Zone
*/
.beag-reveal-frame__close-btn {
  display: none; /* Block when active */
  position: absolute;
  z-index: 10;
  cursor: pointer;
  background-color: var(--beag-complement-rgb-light);
  opacity: 0.9;
  font-size: 0.9em;
  color: var(--beag-complement-rgb-dark);
  padding: 0.3rem;
  border-radius: 0.3rem;
}

.beag-reveal-box.beag-reveal-egg-mode .beag-reveal-frame__close-btn {
  display: flex;
}

.beag-reveal-box-hover-zone {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.8rem;
  height: 1.8rem;
  z-index: 2;
  cursor: pointer;
}

.beag-reveal-box.beag-reveal-egg-mode .beag-reveal-box-hover-zone {
  display: none;
}

/* #endregion */

/* ==========================================================================
   MISC. UTILITIES
   ========================================================================== */
/* #region Miscellaneous Utilities */
.invalid-feedback {
  display: none; /* Hidden by default */
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-danger);
}

/* Accordion */
.acc-right {
  border-left: solid 1px white;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
}

/* #endregion */