/* ==========================================================================
   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);

}

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

.beag-app-container {
  padding-top: 0.2rem;
  padding-bottom: .2rem;
  
  flex: 1;             /* 1. Grow to fill the layout wrapper's height */
  display: flex;       /* 2. Enable flex for children */
  flex-direction: column;
  min-height: 0;       /* 3. Allow shrinking if needed */
  overflow: visible;

  width: 100%;
  box-sizing: border-box;  
}

.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; }

/* navbar */
.navbar-nav .nav-item {
  border-top: solid 1px transparent;
  border-bottom: solid 1px transparent;
}
.navbar-nav .nav-item:hover {
  color: var(--beag-logo-rgb-dark);
  border-bottom: solid 1px var(--beag-grey-rgb-light);
  border-top: solid 1px var(--beag-grey-rgb-light);
}

/* #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.4rem;
  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;
}

/* --- Clear Selection Variant (Semantic: Warning/Reset) --- */
.beag-link--clear-selection {
  color: var(--bs-secondary);
  background-color: transparent;
  border-color: transparent;
  font-weight: 500;
}

.beag-link--clear-selection:hover {
  color: var(--bs-danger);
  background-color: rgba(var(--bs-danger-rgb), 0.08);
  border-color: rgba(var(--bs-danger-rgb), 0.1);
  filter: none;
}

.beag-link--clear-selection:active {
  color: var(--bs-danger);
  background-color: rgba(var(--bs-danger-rgb), 0.15);
}

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

.beag-link--closex {
  color: var(--beag-grey-rgb-base);
  padding: 0px;
  line-height: 0;
  font-size: 1.2em;
}

.beag-link--closex:hover {
  color: var(--beag-grey-rgb-dark);
}

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

/* --- Clear Text box Variant --- */

.beag-link--clearbox {
  /* 1. Force Size (Fixes "Zero Width") */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* 2. Reset Button Stuff */
  margin: 0;
  line-height: 1;
  border: none;
  background: transparent;
  
  /* 3. Positioning (Absolute Center-Right) */
  position: absolute;
  right: 1em; /* Adjust distance from right edge */
  top: 50%;
  transform: translateY(-50%); /* Perfect vertical center */
  
  /* 4. Visuals */
  color: var(--beag-grey-rgb-dark);
  font-size: 1.2em;
  opacity: 0.5;
  cursor: pointer;
  z-index: 10;
}

.beag-link--clearbox:hover {
  color: var(--bs-danger);
  opacity: 1;
}

/* Ensure the icon inside takes up space */
.beag-link--clearbox i {
  display: block;
  line-height: 1;
}

/* --- 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 */
  
  /* Reset flex behaviors from base class if inherited */
  align-items: normal; 
  gap: 0;
  text-align: left; /* Reset center alignment */
}
/* also style anchors this way by default */
.beag-link--link, a {
  /* Visual styles */
  color: var(--beag-complement-rgb-dark);
  background-color: transparent;
  text-decoration: none;
  text-underline-offset: 0.25em;
}

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

.beag-link--link:hover, a:hover {
  color: var(--beag-complement-rgb-base);
  filter: none;
}
.beag-link--link:hover i {
  color: inherit;
}

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

/* --- Collapse Variant (Footer "Close" button) --- */
.beag-link--collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  
  margin-top: 1em;
  padding: .25em 0.5em;
  
  font-weight: 500;
  color: var(--bs-primary);
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 0.5em;
  border: solid 1px var(--beag-grey-rgb-light);
  
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.beag-link--collapse:hover {
  background-color: #fff;
  border: solid 1px var(--beag-grey-rgb-base);
  box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.1);
  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: 1em;
  font-weight: 500;
  border-radius: var(--bs-border-radius, 0.375em);
  padding: 0.5em 1em;
  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 --- */
/* ==========================================================================
   COMPONENT: RadioGroupComponent - Tabs Variant (Solid Blocks)
   ========================================================================== */

/* 1. Container: Just the baseline track */
.beag-radio-group--tabs {
  flex-direction: row;
  border-bottom: 1px solid var(--beag-grey-rgb-light);
  gap: 0;
  align-items: flex-end;
  padding-bottom: 0;
}

/* 2. Base Option: Rectangular, White Text Default */
.beag-radio-group--tabs .beag-radio-option {
  border: 2px solid white;
  border-bottom: none;
  border-top-left-radius: .4em;
  border-top-right-radius: .4em;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: -1px;           /* Overlap the track */
  padding: 0.4em 1.2em;
  z-index: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  
  /* DEFAULT STATE (Inactive):  */
  background-color: var(--beag-complement-rgb-base);
  color: white;
}

/* 3. Icon & Text Sync: Force White (or inherited) */
.beag-radio-group--tabs .beag-radio-option i,
.beag-radio-group--tabs .beag-radio-option span {
  color: inherit; 
}

.beag-radio-group--tabs .beag-radio-option i {
  margin-right: 0.5em;
  vertical-align: middle;
}

/* 4. Hover State (Inactive) */
/* Only applies if NOT checked */
.beag-radio-group--tabs .beag-radio-option:not(:has(input:checked)):hover {
  filter: brightness(85%);
  /* Text remains white via base style */
}

/* 5. ACTIVE State: Green Background, White Text */
.beag-radio-group--tabs .beag-radio-option:has(input:checked) {
  background-color: var(--beag-logo-rgb-light);
  color: #ffffff;
  font-weight: 700;
  z-index: 2; /* Sit on top */
}

/* 6. Hover State (Active): Darker Green */
.beag-radio-group--tabs .beag-radio-option:has(input:checked):hover {
  background-color: var(--beag-logo-rgb-base);
}

/* 7. Disabled State */
.beag-radio-group--tabs .beag-radio-option:has(input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--beag-grey-rgb-light);
}

@media (max-width: 575px) { 
  /* 1. Container: Ensure no gap eats up space */
  .beag-radio-group--tabs {
    gap: 0;
  }

  /* 2. Option: Drastically reduce padding and border */
  .beag-radio-group--tabs .beag-radio-option {
    padding: 0.4em 0.5em;   /* Reduced from 0.6rem 1.2em */
    margin-bottom: -1px;     /* Adjust overlap for 1px border */
    white-space: nowrap;     /* Prevent text wrapping which breaks height */
  }

  /* 3. Icon: Shrink slightly to match text scale */
  .beag-radio-group--tabs .beag-radio-option i {
    margin-right: 0.3em;     /* Tighter gap between icon and text */
  }
}

/* --- 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: 700;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: CheckboxComponent
   ========================================================================== */
/* #region checkbox-component */

.beag-checkbox {
  display: flex;
  align-items: center; 
  gap: 0.25em;
  padding: 0.5em 0;
  user-select: none;
  line-height: 1; 
}

/* Base Styles for Visibility & Size */
.beag-checkbox .form-check-input {
  margin-left: 0; /* Fix Flexbox clipping */
  margin-top: 0;
  cursor: pointer;
  flex-shrink: 0;
  
  /* Make it slightly larger and easier to hit */
  width: 1.4em;
  height: 1.4em;
  
  /* UNCHECKED STATE: Visible border */
  background-color: #ffffff;
  border: 1px solid var(--beag-grey-rgb-base);
  border-radius: 4px;
  
  /* Transition for smooth hover/check effects */
  transition: all 0.2s ease-in-out;
  
  /* Default Icon: Standard Checkmark (Bootstrap Default) */
  /* This ensures it works everywhere by default */
  --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: 75%;
}

/* Hover State: Subtle interaction cue */
.beag-checkbox .form-check-input:hover {
  border-color: var(--beag-complement-rgb-base);
  background-color: var(--beag-complement-rgb-light);
}

/* CHECKED STATE: Standard Primary Blue + Checkmark */
.beag-checkbox .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  /* Icon is already set to bi_check.svg by default above */
}

/* Focus State: Accessibility */
.beag-checkbox .form-check-input:focus {
  border-color: var(--beag-complement-rgb-base);
  box-shadow: 0 0 0 0.25em rgba(139, 171, 247, 0.25);
}

.beag-checkbox .form-check-label {
  cursor: pointer;
  margin-bottom: 0;
  line-height: 1.4;
  font-size: 1em;
  text-align: left;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: TextInputComponent
   ========================================================================== */
/* #region TextInputComponent */

.beag-text-input {
  position: relative;
}

/* #endregion */

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

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

.beag-search-box__input,
.beag-search-box > .beag-text-input {
  flex: 1 1 0%;
  min-width: 0;
  height: 100%;
}

.beag-search-box .form-control {
  width: 100%;
  /* Remove default height constraints to allow parent to dictate size */
  height: auto; 
  box-sizing: border-box;
}

.beag-search-box .beag-link {
  flex: 0 0 auto; /* Never grow, never shrink */
  white-space: nowrap;
  height: 90%;
}

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

/* #endregion */

/* ==========================================================================
   COMPONENT: ExpandableClampedComponent
   ========================================================================== */
/* #region ExpandableClampedComponent */

.beag-expandable-clamped {
  position: relative;
  display: block;
  --ecl-lines: 3; /* Default fallback */
  overflow: visible;
}

/* The Content Slot - UNIVERSAL CONTAINER */
.beag-expandable-clamped__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em;
  width: 100%;
  box-sizing: border-box;
  height: auto;
  overflow: hidden; /* JS handles toggling this */
  margin: 0;
  padding: 0;
  /* NO line-clamp, NO -webkit-box-orient */
}

/* EXPANSION STATE */
.beag-expandable-clamped.is-expanded .beag-expandable-clamped__content {
  overflow: visible !important;
  max-height: none !important;
}

/* The Toggle Link */
.beag-expandable-clamped__toggle {
  position: absolute;
  bottom: 0;
  left: 50%; /* Default Center */
  transform: translateX(-50%);
  
  display: inline-flex;
  align-items: center;
  font-size: 0.9em;
  cursor: pointer;
  user-select: none;
  color: var(--bs-primary);
  text-decoration: none;
  
  z-index: 30;
  padding: 0.1em 0.4em;
  border-radius: 0.25em;
  box-shadow: 0 0.06em 0.18em rgba(0,0,0,0.15);
  
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
}

/* Modifier: Right Aligned (Used when contentPaddingRight is set) */
.beag-expandable-clamped__toggle--right {
  left: auto !important;
  right: 0.5em !important; /* Sit inside the padding lane */
  transform: none !important;
  bottom: 0 !important; /* Align with baseline of text */
  margin-top: 0.2em;  /* so that on focus the top blue border is visible too, not just the other borders */
}

.beag-expandable-clamped__toggle.is-visible {
  opacity: 1;
  visibility: visible;
}

.beag-expandable-clamped__toggle:hover {
  text-decoration: underline;
  background: rgba(255, 255, 255, 1.0) !important;
}

.beag-expandable-clamped__toggle i {
  font-size: 1.2em;
  vertical-align: middle;
}

/* FADE EFFECT - DISABLED IF RESERVED LANE */
.beag-expandable-clamped.beag-has-overflow:not(.is-expanded):not(.has-reserved-lane) .beag-expandable-clamped__content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5em;
  background: linear-gradient(to bottom, transparent, white);
  pointer-events: none;
}

.beag-expandable-clamped__collapse-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem; /* Handles spacing between icon and text */
  
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bs-primary);
  cursor: pointer;
  border-radius: 0.5rem;
  
  transition: all 0.2s ease;
  background-color: rgba(255, 255, 255, 0.6);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  user-select: none; /* Prevents text highlighting on rapid clicks */
}

/* Hover State: Make it pop */
.beag-expandable-clamped__collapse-bottom:hover {
  background-color: #fff;
  color: var(--bs-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  text-decoration: none;
}

.beag-expandable-clamped__collapse-bottom i {
  font-size: 1em;
  transition: transform 0.2s ease;
}

/* Icon animation on hover */
.beag-expandable-clamped__collapse-bottom:hover i {
  transform: translateY(2px); /* Moves up slightly as button moves up */
}

/* #endregion */

/* ==========================================================================
   COMPONENT: SmartListComponent
   ========================================================================== */
/* #region SmartListComponent */

/* --- 1. ROOT CONTAINER --- */
.beag-smart-list {
  display: flex;
  flex-direction: column;
  
  flex: 1;              /* Fill the parent (ListWrapper) */
  min-height: 0;

  background-color: var(--beag-surface-base, #ffffff);
  border-radius: 0.5rem;
  position: relative;
  overflow: hidden; /* Contains the viewport */
  font-family: inherit;
}

/* --- 2. SEARCH WRAPPER (Optional) --- */
.beag-smart-list__search-wrapper {
  flex: 0 0 auto;
  padding: 0.75rem;
  border-bottom: 1px solid var(--beag-grey-rgb-light, #e5e7eb);
  background-color: var(--beag-surface-base, #ffffff);
  z-index: 10; /* Stay above items */
  /* it can support buttons to left and right of the textbox */
  display: flex;
  gap: 0.5em;
  align-items: center;
}

.beag-smart-list__search-input {
  width: 100%;
}

.beag-smart-list__search-left-action-slot,
.beag-smart-list__search-right-action-slot {
  display: flex;
  align-items: center;
}

/* --- 3. VIEWPORT (The Scroll Area) --- */
.beag-smart-list__viewport {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  /* Flex magic */
  flex: 1 1 auto; /* Grow to fill space left by search bar */
  min-height: 0;  /* Enables scrolling within flex item */
  overflow-y: auto;
  overflow-x: hidden;
  outline: none;
  overflow-anchor: none;
  scroll-behavior: auto;
}

/* Focus visibility for keyboard navigation */
.beag-smart-list__viewport:focus {
  outline: 1px solid var(--beag-complement-rgb-light);
  outline-offset: -2px;
}

/* --- 4. VIRTUALIZATION ENGINE --- */

/* The Spacer: Pushes the content container down to simulate full height */
.beag-smart-list__spacer {
  width: 100%;
  pointer-events: none; /* Clicks pass through to viewport */
  visibility: hidden; /* Invisible but takes space */
}

/* The Container: Holds the absolutely positioned items */
.beag-smart-list__container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform; /* GPU hint */
  contain: layout style; /* Performance optimization */
}

/* --- 5. LIST ITEM (The Recycled Node) --- */
.beag-smart-list__item {
  /* Force users to put padding on the child */
  /* "Never add padding/border to this class. Add it to the child element." */
  /* ENFORCE THE RULE VIA CSS */
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box; 
  /* absolute positioning */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Visuals */
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  will-change: transform;
}

/* Hover State */
.beag-smart-list__item:hover {
  background-color: var(--beag-surface-alt, #f9fafb);
}

/* Selected State */
.beag-smart-list__item--selected {
  background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
  border-left: 4px solid var(--bs-primary, #0d6efd);
  font-weight: 500;
  z-index: 1; /* Ensure border sits on top */
}

.beag-smart-list__item--selected:hover {
  background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12);
}

.beag-smart-list__item--suggested {
  border-left: 4px solid var(--beag-accent1-rgb-base) !important;
  background-color: rgba(var(--beag-accent1-rgb-base), 0.04);
}

.beag-smart-list__item--suggested:hover {
  background-color: rgba(var(--beag-accent1-rgb-base), 0.1);
}

/* Combined State */
.beag-smart-list__item--selected.beag-smart-list__item--suggested {
  border-left-color: var(--beag-accent1-rgb-dark) !important;
  background-color: rgba(var(--beag-accent1-rgb-base), 0.15);
}

/* Focus State (Keyboard Navigation) */
.beag-smart-list__item:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: -2px;
  z-index: 2;
}

/* --- 6. STATES: Empty & Loading --- */

.beag-smart-list__empty-message {
  
  inset: 0;                /* Fill the ROOT, not the viewport */
  display: flex;           /* Enable centering */
  align-items: center;     /* Vertically center */
  justify-content: center; /* Horizontally center */
  z-index: 40;             /* Below spinner (50), above items (1) */
  
  padding: 1.5rem;
  text-align: center;
  color: var(--beag-text-muted, #6b7280);
  font-style: italic;
  font-size: 0.9375rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  pointer-events: none;
}

.beag-smart-list__loading-spinner {
  padding: 1.5rem 0;
  text-align: center;
  color: var(--beag-text-muted, #6b7280);
  font-size: 0.875rem;
  
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  transform: none;

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  
  width: 100%;             /* Redundant with inset:0 but harmless */
  background: linear-gradient(to bottom, transparent, var(--beag-surface-base, #ffffff) 20%);
  pointer-events: none;    /* We will override this in the active state */
  opacity: 0;
  transition: opacity 0.2s;
}

/* Show spinner only when active (handled by JS setVisible, but CSS ready) */
.beag-smart-list__loading-spinner:not([aria-hidden="true"]) {
  opacity: 1;
  pointer-events: none;
}

/* -- 6B. spinner while loading a FRESH setItems */

/* 1. spinner */
.beag-smart-list.is-pending-set-items .beag-smart-list__loading-spinner {
  background: inherit;
  
  position: absolute;
  inset: 0;
  pointer-events: auto;

  inset: 0;
  top: 0;
  left: 0; /* Ensure it stretches left/right too */
  right: 0;
  bottom: 0; /* Stretch to bottom to center vertically with flex */
  
  /* Add flex to center the spinner content if it isn't already */
  display: flex;
  align-items: center;
  justify-content: center;
  
  opacity: 1;
  z-index: 10; /* Ensure spinner is on top */
}

/* 2. THE MISSING PIECE: Hide the items underneath */
.beag-smart-list.is-pending-set-items .beag-smart-list__container {
  opacity: 0;            /* Make items invisible */
  pointer-events: none;  /* Prevent clicking/selecting faded items */
  z-index: 1;            /* Ensure items are visually below the spinner */
  
  /* Optional: Smooth fade out */
  transition: opacity 0.2s ease-out; 
}

/* 3. Optional: Lock scrolling so user doesn't scroll through "ghost" items */
.beag-smart-list.is-pending-set-items .beag-smart-list__viewport {
  overflow: hidden;
}

/* --- 7. DISABLED & BUSY STATES --- */

.beag-smart-list.is-disabled,
.beag-smart-list[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

.beag-smart-list[aria-busy="true"] .beag-smart-list__item {
  cursor: wait;
}

/* ==========================================================================
   SmartListComponent - Scrollbar Styling
   Strategy: Classic Track & Thumb only (No arrows). Responsive & Themed.
   ========================================================================== */

.beag-smart-list__viewport {
  /* 1. FORCE SPACE RESERVATION (The Magic Bullet) */
  /* This forces the browser to allocate layout space for a scrollbar, 
     preventing it from switching to "overlay" mode and collapsing. */
  scrollbar-gutter: stable both-edges !important;

  /* 2. ENSURE SCROLLBAR IS ALWAYS PRESENT */
  overflow-y: scroll !important;

  /* 3. RESET ANY BROWSER-SPECIFIC OVERLAY SETTINGS */
  scrollbar-width: auto !important; /* Firefox */
}

/* 4. RE-APPLY STYLING (Now that space is reserved) */
.beag-smart-list__viewport::-webkit-scrollbar {
  width: 16px !important;
  display: block !important;
  background-color: #f1f1f1 !important;
}

.beag-smart-list__viewport::-webkit-scrollbar-thumb {
  background-color: #888 !important;
  border: 3px solid #f1f1f1 !important; /* Reduced border to maximize thumb */
  border-radius: 10px !important;
  min-height: 40px !important;
  /* Ensure the thumb doesn't shrink below a grab-able size */
  /* Note: min-width is NOT supported on ::-webkit-scrollbar-thumb in most browsers.
     The width is controlled by the parent 'width' minus 'border'. */
}

/* #endregion */

/* ==========================================================================
   COMPONENT: TreeListComponent (Generic)
   ========================================================================== */
/* #region TreeListComponent */

/* --- Root Container --- */
.beag-tree-list-host {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.beag-tree-list-host.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* --- Breadcrumbs (Internal Element) --- */
.beag-tree-list__breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.5em;
  font-size: 0.875em; /* Slightly smaller than base */
  color: var(--bs-secondary, #6c757d);
  border-bottom: 1px solid var(--bs-secondary, #dee2e6);
  flex: 0 0 auto;
  background-color: var(--beag-surface, #fff);
}

.beag-tree-list__breadcrumb-item {
  transition: color 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.beag-tree-list__breadcrumb-item:hover {
  color: var(--bs-primary, #0d6efd);
  text-decoration: underline;
}

.beag-tree-list__breadcrumb-item--active {
  font-weight: 600;
  color: var(--bs-body-color, #212529);
  cursor: default;
  text-decoration: none;
}

.beag-tree-list__breadcrumb-separator {
  margin: 0 0.5em;
  color: var(--bs-secondary, #6c757d);
}

/* --- Search Mode State --- */
/* Applied to the container when searching globally */
.beag-breadcrumb--search {
  background-color: var(--beag-surface-alt, #f8f9fa); /* Subtle background shift */
  border-bottom-color: var(--bs-warning, #ffc107); /* Optional: colored border hint */
}

.beag-tree-list__breadcrumb-item--search {
  font-weight: 600;
  color: var(--bs-warning, #ffc107); /* Distinct color for search context */
  cursor: default;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* --- Row Indentation (CSS-Only Strategy) --- */
.beag-tree-list__row {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.1s ease;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  /* Ensure text doesn't overflow */
  min-width: 0; 
  position: relative; 
  z-index: 1;   
}

.beag-tree-list__row:hover {
  background-color: var(--beag-surface-alt, #f8f9fa);
}

/* Indentation Levels (Responsive EMs) */
.beag-tree-list__row[data-depth="0"] { padding-left: 0.5em; }
.beag-tree-list__row[data-depth="1"] { padding-left: 2.0em; }
.beag-tree-list__row[data-depth="2"] { padding-left: 3.5em; }
.beag-tree-list__row[data-depth="3"] { padding-left: 5.0em; }
.beag-tree-list__row[data-depth="4"] { padding-left: 6.5em; }

/* Selected State */
/* Note: SmartList wraps the row, so we target the wrapper class too */
.beag-smart-list__item--selected .beag-tree-list__row,
.beag-tree-list__row.is-selected {
  background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
  border-left: 3px solid var(--bs-primary, #0d6efd);
}

/* --- Toggle Icon & Spinner --- */
.beag-tree-list__toggle-icon {
  font-size: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em; /* Fixed width to prevent layout shift */
  margin-right: 0.5em;
  transition: transform 0.2s ease;
}

@keyframes beag-spin {
  to { transform: rotate(360deg); }
}

.beag-spin {
  animation: beag-spin 1s linear infinite;
}

/* --- Content Wrapper (Icon + Text) --- */
.beag-tree-list__content {
  flex: 1;
  min-width: 0; /* Critical for text truncation */
  display: flex;
  align-items: center;
  gap: 0.5em; /* Space between Industry Icon and Text */
}

/* Industry Icon (Grid/Briefcase) */
.beag-tree-list__content i {
  flex: 0 0 auto;
  font-size: 1.1em;
  color: var(--beag-text-secondary);
}

/* Label Text */
.beag-tree-list__label {
  flex: 1;
  min-width: 0; /* Allows ellipsis */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

/*************************************************/
/* INLINE VARIANT (HORIZONTAL CAROUSEL */
/*************************************************/

/* 1. Root Container: Horizontal Flow & Scroll Handling */
.beag-tree-list-host.beag-tree-list-host--inline {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow: hidden;
  align-items: stretch;
  gap: 0;
  height: auto;
  min-height: 3em;
  /* Hide Scrollbar (Firefox/IE) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide Scrollbar (Chrome/Safari/Edge) */
.beag-tree-list-host.beag-tree-list-host--inline::-webkit-scrollbar {
  display: none;
}

/* 2. SmartList Root: Disable Vertical Constraints */
.beag-tree-list-host--inline .beag-smart-list {
  display: flex;
  flex-direction: row;
  overflow: visible;
  background: transparent;
  min-height: 3em; /* Ensures container has height even if items are static */
  height: auto;

  position: relative; /* Buttons anchor here */
  padding: 0;
  flex: 1;
}

/* 3. Viewport: The Critical Scroll Fix */
/* Overrides global 'overflow-y: scroll' and 'scrollbar-gutter' */
.beag-tree-list-host--inline .beag-smart-list__viewport {
  position: static;
  height: auto;
  min-height: auto;
  
  /* FORCE HORIZONTAL ONLY */
  overflow-y: hidden !important; 
  overflow-x: auto !important;
  scrollbar-gutter: auto !important; /* Reset global 'stable' */
  scrollbar-width: none !important; /* Firefox */
  
  padding: 0 2.5em; /* Creates the lane */
  width: 100%;

  /* Flex Layout */
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  outline: none;
}

/* Kill Webkit Vertical Scrollbar specifically */
.beag-tree-list-host--inline .beag-smart-list__viewport::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
  display: block;
}

.beag-tree-list-host--inline .beag-smart-list__viewport::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

/* 4. Spacer: Remove Virtualization Padding */
.beag-tree-list-host--inline .beag-smart-list__spacer {
  display: none !important; /* Global rule might need force */
  height: 0 !important;
  width: 0 !important;
}

/* 5. Container: Switch from Absolute to Flex Row */
.beag-tree-list-host--inline .beag-smart-list__container {
  position: static !important; /* Override global absolute */
  transform: none !important;  /* Override global transform */
  height: auto !important;
  width: auto !important;
  top: auto !important;
  left: auto !important;
  
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

/* 6. Items: Switch from Absolute to Inline-Flex */
.beag-tree-list-host--inline .beag-smart-list__item {
  position: static !important; /* Override global absolute */
  width: auto !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4em 0.6em;
  margin: 0;
  border-radius: 0.4em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  flex: 0 0 auto; /* Don't grow/shrink */
}

.beag-tree-list-host--inline .beag-smart-list__item--selected {
  border: none;
}

/* 7. Hide Icons & Chevrons */
.beag-tree-list-host--inline .beag-tree-list__toggle-icon,
.beag-tree-list-host--inline .beag-tree-list__content i {
  display: none;
}

.beag-tree-list-host--inline .beag-tree-list__row[data-depth="0"],
.beag-tree-list-host--inline .beag-tree-list__row[data-depth="1"],
.beag-tree-list-host--inline .beag-tree-list__row[data-depth="2"],
.beag-tree-list-host--inline .beag-tree-list__row[data-depth="3"],
.beag-tree-list-host--inline .beag-tree-list__row[data-depth="4"] { 
  font-size: 0.85em;
  padding-left: 0.25em;
  padding-right: 0.25em;
}

/* 8. Separator Logic (The Dot) */
/* Applies to every item EXCEPT the first one */
.beag-tree-list-host--inline .beag-tree-list__row:not(.is-first-visible)::before {
  content: '•';
  display: inline-block;
  margin-right: .5em;
  color: var(--bs-secondary);
  opacity: 0.5;
  font-size: .8em;
  line-height: 1;
  vertical-align: middle;
  pointer-events: none;
}

/* 9. Selected State */
.beag-tree-list-host--inline .beag-tree-list__row.is-selected,
.beag-tree-list-host--inline .beag-smart-list__item--selected .beag-tree-list__row {
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  color: var(--bs-primary);
  font-weight: 600;
  border-left: none;
}

/* 4. Ensure Items Scroll Underneath */
.beag-tree-list-host--inline .beag-smart-list {
  /* Ensure the smartlist doesn't cover the buttons */
  position: relative; 
  z-index: 10;
}

/* ==========================================================================
   COMPONENT: TreeListComponent - Unified Header & Scrollable Breadcrumbs
   ========================================================================== */

/* 1. Unified Header Container */
.beag-tree-list__header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 2.5em;
  padding: 0;
  border-bottom: 1px solid var(--beag-grey-rgb-light);
  background-color: var(--beag-surface-base);
  flex-shrink: 0;
  box-sizing: border-box;
}

/* 2. Scrollable Breadcrumbs Container */
.beag-tree-list__breadcrumbs-scroll {
  flex: 1;
  display: flex;
  align-items: center;
  overflow-x: auto; /* Native Scrolling */
  overflow-y: hidden;
  white-space: nowrap;
  font-size: 0.85em;
  color: var(--beag-grey-rgb-base);
  min-width: 0;
  
  /* Hide Scrollbar for clean look */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  padding: 0.25em 0; /* Touch target padding */
}
.beag-tree-list__breadcrumbs-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* 3. Breadcrumb Items */
.beag-tree-list__breadcrumb-item {
  cursor: default;
  transition: color 0.15s;
  padding: 0 0.25em;
}

.beag-tree-list__breadcrumb-item--interactive {
  cursor: pointer;
  color: var(--beag-grey-rgb-base);
}
.beag-tree-list__breadcrumb-item--interactive:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}

.beag-tree-list__breadcrumb-item--active {
  font-weight: 600;
  color: var(--bs-body-color);
}

.beag-tree-list__breadcrumb-separator {
  margin: 0 0.25em;
  opacity: 0.5;
  user-select: none;
}

/* 4. Navigation Buttons (Up & Action) */
.beag-tree-list__nav-up .beag-link,
.beag-tree-list__nav-action .beag-link {
  padding: 0.25em;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.beag-tree-list__nav-up .beag-link:not([disabled]),
.beag-tree-list__nav-action .beag-link:not([disabled]) {
  opacity: 1;
  cursor: pointer;
}
.beag-tree-list__nav-up .beag-link[disabled] {
  cursor: default;
  pointer-events: none;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: AccordionRowComponent
   ========================================================================== */
/* #region AccordionRowComponent */

.beag-accordion-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--beag-surface-base);
  border-bottom: 1px solid var(--beag-grey-rgb-light);
  transition: background-color 0.2s ease;
  overflow: hidden;
}

.beag-accordion-row:hover {
  background-color: var(--beag-surface-alt);
}

/* State: Selected (Driven by Parent/SmartList) */
.beag-smart-list__item--selected .beag-accordion-row {
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  border-left: 3px solid var(--bs-primary);
  border-bottom-color: var(--bs-primary);
}

/* State: Expanded - Hides the Preview Slot */
.beag-accordion-row.is-expanded .beag-accordion__header-preview {
  display: none;
}

/* --- Header Bar Layout --- */
.beag-accordion__header-bar {
  display: flex;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  margin: .5em 0;
}
.beag-accordion-row.is-expanded:hover .beag-accordion__header-bar {
  color: var(--bs-primary);
}

/* Slots */
.beag-accordion__header-title {
  flex: 0 0 auto;
  font-size: .875em;
  font-weight: 600;
  display: flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  
}

.beag-accordion__header-preview {
  flex: 1;
  display: flex;
  align-items: center; /* Vertically center the rigid OrgCard preview */
  min-width: 0;        /* Allow shrinking for ellipsis */
  overflow: hidden;    /* Hide overflow */
}

/* Ensure the wrapper also respects the shrinkage */
.beag-accordion__header-content-wrapper {
  display: flex;
  flex-direction: column;   /* Stacked vertically (Title on top of Preview) */
  min-width: 0;             /* Good practice: allow wrapper to shrink too */
  flex: 1;                  /* Take available space next to the chevron */
}

.beag-accordion__toggle-link {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--beag-text-muted);
  min-width: 2em;
  justify-content: center;
}
.beag-accordion__toggle-link:hover {
  background-color: transparent;
  color: var(--bs-primary);
}

.beag-accordion__children {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.beag-accordion__children.is-expanded {
  opacity: 1;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  /* max-height is injected inline */
}

/* #endregion */

/* ==========================================================================
   COMPONENT: PillsListComponent
   ========================================================================== */
/* #region PillsListComponent */

.beag-pills-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  padding: 0;  /* The Clamp needs to measure the true content height. */
  box-sizing: border-box;
}

/* Pills Container: The Wrapping Grid */
.beag-pills-list__container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  min-height: 1.5rem; /* Prevents layout jump */
}

.beag-pills-list__empty-message-message {
  width: 100%;
  padding: 0.5rem 0;
  text-align: left;
  font-style: italic;
  color: var(--beag-text-muted);
  font-size: 0.875rem;
}

/* Individual Pill (Base Class) */
.beag-pills-list__pill {
  display: inline-flex;
  align-items: center;
  /* Remove specific padding from here, move to content wrapper */
  background-color: var(--beag-complement-rgb-light);
  border: 1px solid var(--beag-complement-rgb-base);
  border-radius: 0.25em;
  font-size: 0.875em;
  color: var(--beag-text-main);
  max-width: 100%; 
  position: relative; /* Crucial: Anchor for the absolute button */
  box-sizing: border-box;
}

/* NEW: Content Wrapper inside the Pill */
/* Ensures text/flag doesn't overlap the remove button */
.beag-pills-list__pill-content {
  display: flex;
  align-items: center;
  gap: 0.375em;
  /* Reserve space for the remove button (approx 1.5em + padding) */
  padding-right: 1.75em; 
  padding-left: 0.75em;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  min-width: 0; /* Allows truncation if needed */
}

/* Pill Label (Inside the content wrapper) */
.beag-pills-list__pill-content span {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none; 
}

/* Remove Button (X) inside Pill */
.beag-pills-list__pill-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0.25em; /* Adjusted for better visual balance */
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.1em; /* Slightly smaller for better proportion */
  line-height: 1;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  z-index: 10;
  color: inherit; /* Inherit color from pill for consistent hover states */
  opacity: 0.7;
  transition: opacity 0.2s;
}

.beag-pills-list__pill-remove:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

/* Hover State for the whole pill */
.beag-pills-list__pill:hover {
  background-color: var(--beag-complement-rgb-base);
  color: #fff;
  border-color: var(--beag-complement-rgb-base);
}

/* Ensure the remove button stays visible/contrasty on hover if needed */
.beag-pills-list__pill:hover .beag-pills-list__pill-remove {
  color: #fff;
  opacity: 0.8;
}
.beag-pills-list__pill:hover .beag-pills-list__pill-remove:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.2);
}

/* Empty State */
.beag-pills-list__empty-message {
  text-align: center;
  color: var(--beag-text-muted);
  font-size: 0.875em;
  padding: .25em 0;
}

/* Disabled State */
.beag-pills-list.is-disabled .beag-pills-list__pill {
  opacity: 0.6;
  pointer-events: none;
  background-color: var(--beag-grey-rgb-light);
  border-color: var(--beag-grey-rgb-base);
}

/* #endregion */

/* ==========================================================================
   COMPONENT: GeographyVisualSummaryComponent
   ========================================================================== */
/* #region GeographyVisualSummaryComponent */

/* Globe Container */
.beag-geo-visual-summary {
  height: auto;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.beag-geo-visual-summary__visual {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  max-width: 6rem;
  margin: 0 auto;
}

.beag-geo-visual-summary__img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

/* --- THE FIX: Consolidated Override for ExpandableClamped inside Globe --- */

/* 1. The Wrapper: Absolute Positioning + Flex Centering */
.beag-geo-visual-summary__visual .beag-expandable-clamped {
  position: absolute !important;
  top: 0 !important; 
  left: 0 !important; 
  right: 0 !important; 
  bottom: 0 !important;
  width: 66% !important;
  height: 66% !important;
  margin: auto !important;
  z-index: 10 !important;
  overflow: visible !important;
  /* Use FLEX to center the content slot vertically */
  display: flex !important; 
  align-items: center !important;    /* Vertical Center */
  justify-content: center !important; /* Horizontal Center */
  /* Ensure it doesn't force a stack like column would */
  flex-direction: row !important; 
}

/* 2. The Content Slot: The ONLY Flex Container */
.beag-geo-visual-summary__visual .beag-expandable-clamped .beag-expandable-clamped__content {
  display: flex !important;
  flex-direction: row !important; /* FORCE ROW */
  flex-wrap: wrap !important;     /* FORCE WRAP */
  justify-content: center !important;
  align-items: center !important;
  gap: 0.25em;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  overflow: hidden; /* Default */
}

/* 3. Expansion State */
.beag-geo-visual-summary__visual .beag-expandable-clamped.is-expanded .beag-expandable-clamped__content {
  overflow: visible !important;
  max-height: none !important;
}

/* 4. The Flags: Reset Semantic UI */
.beag-geo-visual-summary__visual .beag-expandable-clamped i.flag,
.beag-geo-visual-summary__visual .beag-expandable-clamped span.beag-country-flag {
  display: inline-block !important;
  margin: 0 !important; /* Remove default Semantic UI margins */
  line-height: 1;
  vertical-align: middle;
  /* Remove any transform that might mess up height calculation */
  transform: none !important; 
}

/* DISABLED STATE */
.beag-geo-visual-summary.is-disabled {
  cursor: not-allowed;
}

.beag-geo-visual-summary.is-disabled .beag-geo-visual-summary__img {
  pointer-events: none;
  opacity: 0.4;
  filter: grayscale(100%);
}

.beag-geo-visual-summary.is-disabled:hover .beag-geo-visual-summary__img {
  opacity: 0.4;
  filter: grayscale(100%);
}

/* #endregion */

/* ==========================================================================
   COMPONENT: GeographyEditorComponent
   ========================================================================== */
/* #region GeographyEditorComponent */

.beag-geo-editor {
  display: flex;
  flex-direction: column;
  gap: .5em;
  width: 100%;
  flex: 1;             /* Fill the parent (ContextualHost Content) */
  min-height: 0;       /* Allow it to shrink if needed, but mostly to enable flex children */
  height: 100%;        /* Explicitly fill height */  
}
/* Disabled State */
.beag-geo-editor.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.beag-geo-editor__content {
  width: 100%;
  
  flex: 1;                /* Grow to fill the parent (ContextualHost) */
  min-height: 0;          /* Allows flex to ignore content intrinsic height */
  height: 100%;
  display: flex;          /* Become a flex container for CountriesSelection */
  flex-direction: column; 
  
  /* min-height: 300px;  <-- Set something like this for standalone component uses outside of a flex parent */
}

/* #endregion */

/* ==========================================================================
   COMPONENT: GeoRegionsSelectionComponent
   ========================================================================== */
/* #region GeoRegionsSelectionComponent */

/* Root Container */
.beag-geo-regions-selection {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;

  overflow-y: auto;
  min-height: 0;
}

/* Grid Layout */
.beag-geo-regions-selection__grid {
  display: grid;
  gap: 1.5rem;
  width: 100%;
  
  /* Mobile: 1 column */
  grid-template-columns: 1fr;
  
  /* Tablet: 2 columns - FORCED EQUAL WIDTH*/
  @media (min-width: 576px) {
    /* 
      Use 'minmax(0, 1fr)' to prevent content from forcing column width.
      This ensures both columns are exactly 50% of the container minus the gap.
    */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  /* Desktop: 3 columns - FORCED EQUAL WIDTH */
  @media (min-width: 992px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Globe Card --- */
.beag-geo-regions-selection__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
  
  /* Invisible border by default to prevent layout shift */
  border: 0.125rem solid transparent; 

  line-height: 1.2;

  /* Ensure card fills the grid cell completely */
  width: 100%; 
  box-sizing: border-box;

  /* Ensure no fractional margins/padding from children */
  contain: layout style; /* Isolates the layout calculation */
}

.beag-geo-regions-selection__card:hover {
  background-color: var(--beag-surface-alt);
}

.beag-geo-regions-selection__card:focus-visible {
  outline: 0.125rem solid var(--bs-primary);
  outline-offset: 0.125rem;
  background-color: var(--beag-surface-alt);
}

/* Image:  */
.beag-geo-regions-selection__img {
  width: 100%;
  max-width: 6rem;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  opacity: 0.6;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.beag-geo-regions-selection__card.is-selected {
  border-color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.beag-geo-regions-selection__card.is-selected .beag-geo-regions-selection__img {
  opacity: 1;
  filter: drop-shadow(0 0.125rem 0.25rem rgba(0,0,0,0.1)); 
}

/* Label */
.beag-geo-regions-selection__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--beag-text-main);
  text-align: center;
  line-height: 1.2;
  min-height: 2.4em; /* Forces uniform row height regardless of text length */
}

.beag-geo-regions-selection__card.is-selected .beag-geo-regions-selection__label {
  font-weight: 700;
  color: var(--bs-primary);
}

.beag-geo-regions-selection__actions {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding-top: 0.5rem;
  border-top: 0.0625rem solid var(--beag-grey-rgb-light);
}

/* Disabled State */
.beag-geo-regions-selection.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: CountriesSelectionComponent
   ========================================================================== */
/* #region CountriesSelectionComponent */

.beag-countries-selection {
  gap: 0.1em;
  width: 100%;
}

/* the picker list */
/* The List Wrapper inside it also needs to fill the remaining space */
.beag-countries-selection__list-wrapper {
  flex: 1 1 250px;  /* Grow: 1, Shrink: 1, Basis: 250px (min size but grow if possible) */
  position: relative; /* Anchor for absolute children */
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* Contain the absolute viewport */
}

/* Card: Full Width, No Truncation */
.beag-countries-selection__card {
  display: flex;
  flex-direction: row;
  align-items: center; 
  justify-content: flex-start;
  gap: 0.75em;
  padding: 0.5em 0.75em;
  cursor: pointer;
  border-bottom: 1px solid var(--beag-grey-rgb-light);
  transition: all 0.2s;
  background-color: var(--beag-surface-base);
  text-align: left;
  width: 100%; /* Ensure it fills the flex container */
  box-sizing: border-box;
  /* Allow text to wrap if it gets extemely long (e.g. on very narrow mobile) */
  white-space: normal; 
  overflow: visible;
  min-height: auto; 
}

.beag-countries-selection__card:hover {
  background-color: var(--beag-surface-alt);
  border-color: var(--beag-grey-rgb-light);
}

.beag-countries-selection__card.is-selected {
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  border-color: var(--bs-primary);
  font-weight: 700;
}

/* Flag: Fixed size, doesn't shrink */
.beag-countries-selection__flag-wrapper {
  display: block;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5em;
  height: 1.25em;
  font-size: 1.25em;
  line-height: 1;
  /* Ensure it sits exactly on the vertical center line */
  margin: 0; 
}

.beag-countries-selection__flag-wrapper i.flag {
  margin: 0;
  font-size: inherit;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.beag-countries-selection__flag-wrapper .beag-country-flag-code {
  display: none;
}

/* Info Container: Allow growth */
.beag-countries-selection__info {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers the column of text vertically within this div */
  min-width: 0; 
  overflow: visible; /* Allow overflow/wrapping */
  text-align: left;
  align-items: flex-start;
  flex: 1; /* Take up emaining space */
}

/* Name: No truncation */
.beag-countries-selection__name {
  font-size: 0.9375em;
  white-space: normal; /* ALLOW WRAPPING */
  overflow: visible;
  text-overflow: clip; /* Disable ellipsis */
  text-align: left;
  font-weight: 400;
  line-height: 1.3; /* Slightly taller line height for wrapped text */
  word-wrap: break-word; /* Break long words if necessary */
}

.beag-countries-selection__card.is-selected .beag-countries-selection__name {
  font-weight: 700;
}

/* Region: No truncation */
.beag-countries-selection__region {
  font-size: 0.8125em;
  color: var(--beag-text-muted);
  text-align: left;
  font-weight: 400;
  margin-top: 0.125em;
  white-space: normal;
  overflow: visible;
}

/* Disabled State */
.beag-countries-selection.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: IndustriesSelectionComponent
   ========================================================================== */
/* #region IndustriesSelectionComponent */

/* --- Selection Container --- */
.beag-industries-selection {
  /* .height-strategy-host is applied by JS, this just adds spacing */
  gap: 0.75em; 
  width: 100%;
}

.beag-industries-selection.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: PlacesSelectionComponent
   ========================================================================== */
/* #region PlacesSelectionComponent */

/* --- Selection Container --- */
.beag-places-selection {
  /* .height-strategy-host is applied by JS, this just adds spacing */
  gap: 0.75em; 
  width: 100%;
}

/* Header Row (The "Select Country" Trigger) */
.beag-places-selection__header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex: 0 0 auto; /* Don't grow */
}

.beag-places-selection .beag-contextual-editor-host-wrapper__popover {
  height: 60vh;
}

/* Hide the "no items selected" message specifically for Places */
.beag-places-selection .beag-pills-list__empty-message {
  display: none !important;
}

.beag-places-selection__country-trigger {
  flex: 1 1 auto;
  min-width: 0;
}

/* The Flag Button (Injected into the Left Slot of the Search Input) */
.beag-places-selection__flag-btn {
  /* Reset any default button padding/margin that might mess up alignment */
  padding: 0.25em; 
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ensure it doesn't grow and squish the input */
  flex: 0 0 auto; 
  min-width: 2.5em; /* Give it enough room for the flag emoji */
}

/* Result Items (Optional polish for the dropdown list) */
.beag-places-selection__result-item {
  padding: 0.5em 0.75em;
  cursor: pointer;
  border-radius: 4px;
}
.beag-places-selection__result-item:hover,
.beag-places-selection__result-item.is-selected {
  background-color: var(--beag-surface-alt);
}

.beag-places-place-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--beag-grey-rgb-base);
  flex-shrink: 0; /* Prevent icon from squishing */
}

/* Ensure the Bootstrap Icon inside is sized correctly */
.beag-places-place-icon i.bi {
  font-size: 1.1em; 
  margin-right: 0.5em; 
  line-height: 1;
}

.beag-places-selection__result-label {
  margin-left: .375em;
}

/* Specific state: Selected */
.beag-pills-list__pill.is-selected .beag-places-place-icon,
.beag-places-selection__result-item.is-selected .beag-places-place-icon {
  color: var(--bs-primary);
}

/* #endregion */

/* ==========================================================================
   COMPONENT: NonProfitTypeExclusionsComponent
   ========================================================================== */
/* #region NonProfitTypeExclusionsComponent */

.beag-nonprofit-exclusions {
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: flex-start; 
}

.beag-nonprofit-exclusions__header {
  text-align: left;
  padding-bottom: 0.5em;
  margin-bottom: 0.25em;
}

.beag-nonprofit-exclusions__group {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  font-size: 1.1em;
  align-items: flex-start;
  width: 100%;
}

/* #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: InfoTipComponent
   ========================================================================== */
/* #region InfoTipComponent */

.beag-info-tip-wrapper {
  position: relative;
  width: 100%;
  height: auto; 
  z-index: 10; 
  pointer-events: none; 
  border-radius: 0.25em;
  border: solid 1px var(--bs-danger);
}
.beag-info-tip-wrapper .beag-link--closex {
  color: var(--beag-danger-rgb-base);
}
.beag-info-tip-wrapper .beag-link--closex:hover {
  color: var(--beag-danger-rgb-dark);
}

.beag-info-tip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: left;
  background-color: var(--bs-info);
  color: #fff;
  padding: 0.75em 2.5em 0.75em 1em; /* Extra right padding for the absolute close button */
  font-size: 0.875em;
  line-height: 1.4;
  box-shadow: 0 0.25em 0.75em rgba(0,0,0,0.15);
  
  display: flex;
  align-items: flex-start;
  gap: 0.1em;
  pointer-events: auto; 
  
  /* for the ActionLink CloseX button */
  position: relative; 

  /* Ensure it renders above the content below */
  z-index: 30; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Add shadow so it looks "above" content */  
  
  animation: beag-fade-in-down 0.3s ease-out;
}

/* special color for icons */
.beag-info-tip__message i {
  color: var(--beag-danger-rgb-base);
  background-color: white;
  border: solid 1px white;
  font-weight: bold;
}

.beag-info-tip__label {
  align-items: center;
  white-space: nowrap; /* Keep "Tip:" on one line */
  color: white;
  font-weight: 700;
}

.beag-info-tip__content {
  flex: 1;
}

.beag-info-tip__highlight-target {
  border-radius: 2px;
  animation: beag-info-tip-pulse 1.5s infinite;
}
@keyframes beag-info-tip-pulse {
  0% {
    /* This works because --bs-danger-rgb is "182, 105, 98" */
    box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.7);
  }
  70% {
    box-shadow: 0 0 0 4px rgba(var(--bs-danger-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0);
  }
}

/* #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: ClampedEditTriggerComponent
   ========================================================================== */
/* #region ClampedEditTriggerComponent */
/* Base Layout */
.beag-clamped-edit-trigger {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  width: 100%;
  position: relative; /* Makes this the anchor for the editor to be absolute */
}

/* Content Slot: The Clickable Text Area */
.beag-clamped-edit-trigger__content {
  flex: 1;
  min-width: 0; /* Prevents flex overflow */
  cursor: pointer; /* Default interactive state */
  text-align: left;
}

/* Visual Cue: Dotted underline on hover */
.beag-clamped-edit-trigger:not(.is-disabled) .beag-clamped-edit-trigger__content:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: .25em;
  color: var(--bs-primary); /* Optional highlight */
}

/* Pencil Icon Styling */
.beag-clamped-edit-trigger__action {
  flex-shrink: 0; /* Prevent pencil from squishing */
}

.beag-clamped-edit-trigger:not(.is-disabled):hover .beag-clamped-edit-trigger__action {
  opacity: 1.0;
}

/* DISABLED STATE: Override everything */
.beag-clamped-edit-trigger.is-disabled .beag-clamped-edit-trigger__content,
.beag-clamped-edit-trigger.is-disabled .beag-clamped-edit-trigger__action {
  cursor: not-allowed;
  pointer-events: none; /* Disables clicks */
  opacity: 0.6;
}

.beag-clamped-edit-trigger.is-disabled .beag-clamped-edit-trigger__content:hover {
  text-decoration: none;
  color: inherit;
}

/* useful when the child would otherwise add margin, like with a paragraph element */
.beag-clamped-text {
  margin-top: 0;
  margin-bottom: 0;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: OrganisationsAppComponent
   ========================================================================== */
/* #region OrganisationsAppComponent */

.beag-orgs-app {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: visible;
  box-sizing: border-box;
  gap: .5em;
}

.beag-orgs-app__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  width: 100%;
  /* Implicitly: height is determined by content or parent flex context */
}

/* #endregion */ 

/* ==========================================================================
   COMPONENT: OrganisationsQueryBuilderComponent
   ========================================================================== */
/* #region OrganisationsQueryBuilderComponent */

.beag-org-query-builder {
  --beag-org-query-builder-primary-unit: 3rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  position: relative;
}
.beag-org-query-builder__collapse-toggle {
  gap: 0 !important;
  margin-top: 0.2em !important;
  padding: 0em 0.5em !important;
  border-radius: 0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom-color: none !important;
  font-size: 0.75em;
}
.beag-org-query-builder__collapse-toggle:hover {
  border-bottom-color: var(--beag-complement-rgb-base) !important;
}
.beag-org-query-builder--collapsed {
  row-gap: 0 !important;
}
.beag-org-query-builder--collapsed .beag-org-tabs {
  display: none;
}

/* --- Specific Override: Force Search Box Height --- */
.beag-org-query-builder .beag-search-box {
  height: var(--beag-org-query-builder-primary-unit);
}
.beag-org-query-builder--collapsed .beag-search-box {
  display: none !important;
}

/* --- Specific Override: Force Input to Fill Height --- */
.beag-org-query-builder .beag-search-box .form-control {
  height: 100%;
  line-height: var(--beag-org-query-builder-primary-unit);
  padding-top: 0;
  padding-bottom: 0;
}

/* --- Filters Layout --- */
.beag-org-query-builder__filters {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
}
.beag-org-query-builder--collapsed .beag-org-query-builder__filters {
  display: none !important;
}

/* Globe Image Sizing */
.beag-org-query-builder .beag-geo-visual-summary__img {
  height: calc(var(--beag-org-query-builder-primary-unit) * 2);
}

/* opacity */
.beag-org-query-builder .beag-geo-visual-summary__img {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.beag-org-query-builder .beag-geo-visual-summary__badge {
  opacity: 0.8;
}
.beag-org-query-builder .beag-geo-visual-summary__visual:hover .beag-geo-visual-summary__img,
.beag-org-query-builder .beag-geo-visual-summary__img:hover,
.beag-org-query-builder .beag-geo-visual-summary__badge:hover {
  opacity: 1.0;
}
/* The Column of Text Filters */
.beag-org-query-builder__filter-summaries {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Individual Text Filter Styling */
.beag-org-query-builder__filter-summaries .beag-clamped-edit-trigger {
  font-size: 0.875em;
}
.beag-org-query-builder__filter-summaries .beag-human-web-filters--inline-mode .beag-clamped-edit-trigger {
  font-size: 1em;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: OrgCardComponent
   ========================================================================== */
/* #region OrgCardComponent */

.beag-org-card {
  width: 100%;
}

.beag-org-card__header-content {
  display: flex;
  align-items: center; /* Vertically center flag and text */
  gap: 0.5em;         /* Space between flag and name */
  width: 100%;

  /* Allow this container to shrink so its children can ellipsis */
  min-width: 0;   
}

.beag-org-card__flag {
  flex-shrink: 0;      /* Prevent flag from squishing */
  display: flex;
  align-items: center;
  justify-content: center;
}

.beag-org-card__nname {
  /* 1. ELLIPSIS TRIAD */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  /* 2. FLEX SHRINK */
  /* It allows the name to shrink when space is tight, triggering the ellipsis. */
  min-width: 0; 
  
  /* 3. LAYOUT */
  flex: 1; /* Take all available space after the flag */

  text-align: left;
}

.beag-org-card__body-inner {
  padding: 1em;
}

.beag-org-card__preview {
  /* 1. FORCE FIXED HEIGHT: Reserves space even if empty */
  /* Matches the line-height of the text inside */
  height: 1.3125em; /* 0.875em (font-size) * 1.5 (line-height) = 1.3125em */
  
  /* 2. LAYOUT: Block level to respect height */
  display: block;
  width: 100%;
  
  /* 3. ELLIPSIS: Standard trio */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  /* 4. ALIGNMENT: Vertically center text within the fixed height */
  line-height: 1.3125em; /* Matches height exactly to center single line */
  
  /* 5. RESET: Remove flex interference */
  min-width: auto; /* Override any inherited min-width: 0 */
  margin: 0;
  padding: 0;
  
  color: var(--beag-text-muted);
  font-size: 0.875em; /* Ensure font size is explicit */

  text-align: left;
}

.beag-org-card__preview-child {
  /* Ensure the child doesn't add extra height/margin that breaks the fixed line */
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: HumanWebFiltersComponent
   ========================================================================== */
/* #region HumanWebFiltersComponent */

.beag-human-web-filters {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  
  /* Default state (if not inline) */
  &.beag-human-web-filters--inline-mode {
    min-height: 60vh; /* The "Floor" */
    gap: 0.5rem;      /* Space between Header and Tree/Summary */
  }

  &.is-disabled {
    opacity: 0.6;
    pointer-events: none;
  }
}

/* Switch Container to Row */
.beag-human-web-filters.beag-human-web-filters--inline-mode {
  flex-direction: row !important;
  align-items: flex-start; /* Vertically center the icon and the tree header */
  gap: 0.5rem;         /* Space between [Search Icon] and [Tree] */
  min-height: 3rem;    /* Ensure enough height for the tree row */
}

/* The Trigger (Search Icon) - Force it to shrink and not wrap */
.beag-human-web-filters.beag-human-web-filters--inline-mode .beag-clamped-edit-trigger {
  flex: 0 0 auto;      /* Do not grow, do not shrink, auto width */
  width: auto;         /* Override any 100% width defaults */
  display: inline-flex;/* Ensure it behaves like an inline icon */
  align-items: center;
  justify-content: center;
  height: 2.5em;  /* match the inline tree header */
  box-sizing: border-box;
}

/* #endregion */

/* ==========================================================================
   COMPONENT: ContextualEditorHostComponent
   ========================================================================== */
/* #region ContextualEditorHostComponent */

/**
 * WARNING: PARENT CONTAINER CONSTRAINTS
 * 
 * The popover inside this wrapper uses 'position: absolute' relative to its 
 * injection point (the trigger element). 
 * 
 * DO NOT place the trigger element inside a container with:
 * 1. overflow: hidden (Will clip the popover)
 * 2. transform: ... (Will trap the popover's coordinate system)
 * 3. filter: ... (Will trap the popover's coordinate system)
 * 
 * If the popover appears clipped or in the wrong location, check the ancestors 
 * of the trigger element for these properties.
 */
.beag-contextual-editor-host-wrapper {
  position: absolute;
  width: 100%;
  height: 0; /* Don't affect layout flow */
  z-index: 1060;
}

.beag-contextual-editor-host-wrapper__popover {
  position: fixed;

  background-color: var(--beag-surface-base);
  border: 1px solid var(--beag-grey-rgb-light);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
  z-index: 1050; /* Ensure it's above navbars/modals (Bootstrap modal z-index is usually 1050) */
  padding: 1rem;
  min-width: 18rem;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevents double scrollbars */
  gap: 1rem;
  align-items: stretch; 
  width: 100%;

  /* centering logic */
  left: 50%; 
  transform: translateX(-50%);
  
  /* Performance */
  will-change: transform, top, width;  
}

/* Header: Flex container to separate Left (Title+Apply) and Right (Cancel) */
.beag-contextual-editor-host-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;
}

/* Left Group: Title + Apply Button */
.beag-contextual-editor-host-wrapper__header-left {
  display: flex;
  align-items: center;
  min-width: 0; /* Prevents flex item from overflowing if title is long */
  flex: 1;
  position: relative; /* Anchor for absolute info-tip */
}

.beag-contextual-editor-host-wrapper__info-tip-slot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20; /* Above other header content */
  pointer-events: none; /* Let clicks pass through the empty slot area */
}

/* Ensure the tip itself re-enables pointer events */
.beag-contextual-editor-host-wrapper__info-tip-slot .beag-info-tip {
  pointer-events: auto;
  position: static; /* Reset absolute from component default, let slot handle it */
  width: 100%;
  box-sizing: border-box;
}

.beag-contextual-editor-host-wrapper__title {
  font-weight: 700;
  font-size: 0.875rem;
  white-space: nowrap;
}

.beag-contextual-editor-host-wrapper__header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Space between Apply, Clear, and X */
  padding-right: 0.5rem; /* Optional: breathing room on far right */
  margin-left: auto;
  margin-right: .5rem;
}

/* Content Slot */
.beag-contextual-editor-host-wrapper__content {
  flex: 1;          /* Grow to fill available height */
  min-height: 0;    /*  Allows flex to shrink below content size */
  display: flex;    /* Become a flex container for the child editor */
  flex-direction: column;
  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: 700;
  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);
}

/* Endpoint Labels: "beag" and "big" */
.beag-enum-slider__endpoint-label {
  position: absolute;
  top: 100%; /* Position below the track/handles area */
  font-size: 0.75rem; /* Slightly smaller than main label */
  font-weight: 500;
  color: var(--beag-grey-rgb-base);
  pointer-events: none; /* Prevent interfering with clicks */
  white-space: nowrap;
}

.beag-enum-slider__endpoint-label--left {
  left: 0;
  text-align: left;
}

.beag-enum-slider__endpoint-label--right {
  right: 0;
  text-align: right;
}

/* #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: white;
  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;
  opacity: 0.9;
  font-size: 0.9em;
  background-color: var(--beag-complement-rgb-light);
  color: var(--beag-complement-rgb-dark);
  padding: 0.3rem;
  border-radius: 0.3rem;
}
.beag-reveal-frame__close-btn.beag-link--secondary:hover {
  background-color: var(--beag-complement-rgb-light);
  color: var(--beag-complement-rgb-dark);
  filter: brightness(85%);
}

.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 */

/* ==========================================================================
   COMPONENT: BannerComponent
   ========================================================================== */
/* #region BannerComponent */

.beag-banner__root {
  z-index: 1050;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

/* --- VARIANT: Left Aligned / Stacked --- */
.beag-banner__root.beag-banner--left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.75rem;
}

/* Actions container for Left Variant */
.beag-banner__root.beag-banner--left .beag-banner__actions {
  display: flex;
  gap: 0.5rem;
  width: 100%;             /* Ensure it spans the full width of the banner */
  justify-content: flex-end; /* CHANGE THIS: Pushes buttons to the right */
}

/* Message slot for Left Variant */
.beag-banner__root.beag-banner--left .beag-banner__message-slot {
  display: block;
  width: 100%;
}

/* #endregion */

/* ==========================================================================
   CONTROLLER: CarouselController
   ========================================================================== */
/* #region CarouselController */

/* 1. Container Context (Must be relative for absolute buttons) */
.beag-carousel__container {
  position: relative;
  /* Padding is handled by the specific component (e.g., TreeList) */
}

/* 2. The Buttons - Flattened & Integrated */
.beag-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  
  /* RESET: Remove the "Bubble" look */
  width: auto;
  height: auto;
  border-radius: 0.25rem; /* Slight radius, not circle */
  background-color: white;
  box-shadow: none; /* No drop shadow */
  color: var(--beag-grey-rgb-base);
  font-size: 1.2em;
  padding: 0.25em 0.5em; /* Comfortable touch target */
  border: 1px solid transparent;
  
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease; /* Faster transition for snappier feel */
  
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Hover State: Match your Ghost Button style */
.beag-carousel__btn:hover {
  background-color: var(--beag-surface-alt); /* Light grey bg */
  color: var(--bs-primary); /* Blue icon */
  border-color: var(--beag-grey-rgb-light); /* Subtle border */
  transform: translateY(-50%) scale(1.05); /* Minimal scale */
  box-shadow: none;
}

/* Active/Click State */
.beag-carousel__btn:active {
  background-color: var(--beag-grey-rgb-light);
  transform: translateY(-50%) scale(0.95);
}

/* Positioning */
.beag-carousel__btn--left { left: 0.25em; } /* Tucked in tighter */
.beag-carousel__btn--right { right: 0.25em; }

/* Visibility Toggles (Driven by TS classes) */
.can-scroll-left .beag-carousel__btn--left,
.can-scroll-right .beag-carousel__btn--right {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 3. The Fade Overlays (Subtle Hint) */
/* These sit on the container edges to hint scrollability */
.can-scroll-left::before,
.can-scroll-right::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.5rem; /* Slightly narrower fade */
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.can-scroll-left::before {
  left: 0;
  /* Gradient from Surface Base to Transparent */
  background: linear-gradient(to right, var(--beag-surface-base), transparent);
}

.can-scroll-right::after {
  right: 0;
  background: linear-gradient(to left, var(--beag-surface-base), transparent);
}

.can-scroll-left::before { opacity: 1; }
.can-scroll-right::after { opacity: 1; }

/* #endregion */

/* ==========================================================================
   COMPONENT: ToastComponent
   ========================================================================== */
/* #region ToastComponent */

/* 
   Base Component Styles 
   Fixed positioning context, glassmorphism, and layout.
*/
.beag-toast {
  /* Layout */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 350px;
  padding: 0.75rem 1rem;
  
  /* Visuals */
  background-color: var(--beag-surface-base);
  border-left: 4px solid var(--beag-grey-rgb-base); /* Default fallback */
  border-radius: var(--bs-border-radius, 0.5rem);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
  color: var(--beag-text-main);
  font-size: 0.9rem;
  line-height: 1.4;
  
  /* Animation & Transition */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s;
  pointer-events: auto;
}

.beag-toast:not(.d-none) {
  opacity: 1;
  transform: translateY(0);
}

/* Icon Styles */
.beag-toast i {
  font-size: 1.25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Message Text */
.beag-toast span {
  flex: 1;
  word-wrap: break-word;
}

/* Buttons (Close & Action) */
.beag-toast button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--beag-text-muted);
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.beag-toast button:hover {
  color: var(--beag-text-main);
}

.beag-toast__action {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  margin-right: 0.5rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

/* Close Button Visibility */
.beag-toast:not(.beag-toast--dismissible) .bi-x-lg {
  display: none;
}

/* VARIANTS */

/* --- Success --- */
.beag-toast--success {
  border-left-color: var(--bs-success);
}
.beag-toast--success i {
  color: var(--bs-success);
}

/* --- Error --- */
.beag-toast--error {
  border-left-color: var(--bs-danger);
}
.beag-toast--error i {
  color: var(--bs-danger);
}

/* --- Warning --- */
.beag-toast--warning {
  border-left-color: var(--bs-warning);
}
.beag-toast--warning i {
  color: var(--bs-warning);
}

/* --- Info --- */
.beag-toast--info {
  border-left-color: var(--bs-primary);
}
.beag-toast--info i {
  color: var(--bs-primary);
}

/* --- Offline (Persistent) --- */
.beag-toast--offline {
  border-left-color: var(--beag-grey-rgb-dark);
  background-color: var(--beag-surface-alt);
}
.beag-toast--offline i {
  color: var(--beag-grey-rgb-dark);
}

/* #endregion */

/* ==========================================================================
   COMPONENT: ToastContainerComponent
   ========================================================================== */
/* #region ToastContainerComponent */
.beag-toast-container {
  position: fixed;
  z-index: 1061;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  pointer-events: none;  
}
/* #endregion */

/* ==========================================================================
   UTILITIES for HEIGHT
   ========================================================================== */
/* #region height utilities */

/**
 * .height-strategy-host
 * 
 * PURPOSE: Turns an element into a robust Flex Column container that fills its parent.
 * 
 * USE CASE: Required when hosting composite components
 * that internally rely on flex children (Search + Pills + List) to share vertical space.
 * 
 * DIFFERENCE FROM 'fill':
 * - 'height-strategy-fill': Assumes parent is ALREADY flex. Makes THIS element grow.
 * - 'height-strategy-host': Makes THIS element a flex container AND makes it grow.
 * 
 * USAGE:
 * <div class="height-strategy-host">
 *    <searchable-pills-list ... />
 * </div>
 */
.height-strategy-host {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.1em !important;             /* Matches internal component gaps */
  width: 100% !important;
  flex: 1 1 0 !important;            /* Grow to fill parent */
  min-height: 0 !important;          /* Critical for nested scrolling */
  height: 100% !important;           /* Explicit fill */
  overflow: hidden !important;       /* Contain internal scrolls */
}

/* --- STRATEGY A: AUTO (Grow to fit content, allow page scroll) --- */
/* Use when: Content is fixed/short (e.g., Globes, Radio Groups) and needs to be fully visible. */

.height-strategy-auto {
  flex: 0 0 auto !important;   /* Disable flex growth */
  height: auto !important;     /* Natural height */
  min-height: 0 !important;    /* Reset constraints */
  overflow: visible !important;/* Allow content to expand page */
}

/* --- STRATEGY B: FILL (Fill parent, internal scroll) --- */
/* Use when: Content is dynamic/long (e.g., Lists, Forms) and must fit inside a fixed dialog. */

.height-strategy-fill {
  flex: 1 1 0 !important;      /* Force flex growth */
  height: 100% !important;     /* Match parent height */
  min-height: 0 !important;    /* Critical for flex children to shrink/grow */
  overflow: hidden !important; /* Contain internal scrollbars */
  display: flex !important;    /* Ensure flex context for children */
  flex-direction: column !important;
}

/* --- HELPER: Force Child to Natural Height (Fixes "Greedy Pills") --- */
/* Use on wrappers that shouldn't grow even if parent is in "Fill" mode. */
.height-strategy-natural {
  flex: 0 0 auto !important;
  height: auto !important;
  overflow: hidden;
}

/* #endregion */

/* ==========================================================================
   MISC. UTILITIES
   ========================================================================== */
/* #region Utilities */

.infotip-color {
  color: var(--bs-info);
}

.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;
}

.beag-list-item-text {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5em 0.75em;
  box-sizing: border-box;
}

/* #endregion */