/**
 * BBT Design System - Bootstrap Component Override
 * This file must be loaded AFTER Bootstrap CSS to properly override styles.
 *
 * NOTE ON !important USAGE:
 * Some rules below use !important to override Bootstrap's own utility classes
 * (e.g., .bg-primary, .badge.bg-*, .nav-tabs). This is intentional — Bootstrap
 * utility classes use high specificity and sometimes !important themselves.
 * When integrating into Angular, import this file globally via angular.json
 * (not via component-level styles). If you need to override a specific rule
 * from a component, increase selector specificity rather than adding more
 * !important declarations.
 */
:root {
  /* ========================================
     BOOTSTRAP COLOR SYSTEM OVERRIDE
     https://getbootstrap.com/docs/5.3/customize/color/
     ======================================== */

  /* Override Bootstrap theme colors */
  --bs-primary: var(--bbt-primary-600);
  --bs-primary-rgb: 0, 126, 147;

  --bs-secondary: var(--bbt-neutral-600);
  --bs-secondary-rgb: 87, 87, 86;

  --bs-success: var(--bbt-success-300);
  --bs-success-rgb: 105, 255, 187;

  --bs-danger: var(--bbt-error);
  --bs-danger-rgb: 189, 0, 0;

  --bs-warning: var(--bbt-warning-300);
  --bs-warning-rgb: 255, 218, 58;

  --bs-info: var(--bbt-primary-300);
  --bs-info-rgb: 128, 218, 233;

  --bs-light: var(--bbt-neutral-50);
  --bs-light-rgb: 246, 246, 245;

  --bs-dark: var(--bbt-neutral-900);
  --bs-dark-rgb: 61, 61, 60;

  /* Override Bootstrap body colors */
  --bs-body-color: var(--bbt-text-default);
  --bs-body-bg: var(--bbt-white);

  /* Override Bootstrap link colors */
  --bs-link-color: var(--bbt-primary-600);
  --bs-link-hover-color: var(--bbt-primary);

  /* Override Bootstrap border colors */
  --bs-border-color: var(--bbt-neutral-100);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-pill: 50rem;
  /* override Bootstrap text color */
  --bs-btn-color: var(--bbt-text-default);
  --bs-btn-color-rgb: 0, 72, 84;
  /* ========================================
     BOOTSTRAP COMPONENT OVERRIDES
     ======================================== */

  /* Buttons */
  --bs-btn-border-radius: 50rem;
  --bs-btn-font-weight: 500;

  /* Forms */
  --bs-form-invalid-color: var(--bbt-error);
  --bs-form-invalid-border-color: var(--bbt-error);
  --bs-form-valid-color: var(--bbt-success-600);
  --bs-form-valid-border-color: var(--bbt-success-600);

  /* Alerts */
  --bs-alert-border-radius: 0.5rem;

  /* Cards */
  --bs-card-border-radius: 0.5rem;
  --bs-card-border-color: var(--bbt-neutral-100);
  --bs-card-bg: var(--bbt-surface-white, #ffffff);

  /* ========================================
     ADDITIONAL UTILITIES
     ======================================== */

  /* Shadows */
  --bbt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --bbt-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --bbt-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
  --bbt-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.2);

  /* Typography */
  --bs-body-font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;
  --bs-body-font-size: 0.875rem;
  --bs-body-line-height: 1.5;
}

/* ========================================
   CODE ELEMENT OVERRIDES
   ======================================== */

/* Bootstrap's <code> has a light grey background by default.
   Inside dark/colored .bg-* utilities, text becomes white but the code
   background stays light → invisible white box. Fix with transparent overlay. */
.bg-primary code,
.bg-secondary code,
.bg-danger code,
.bg-dark code {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

.bg-success code,
.bg-warning code,
.bg-info code {
  background-color: rgba(0, 0, 0, 0.08);
  color: inherit;
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

/* ========================================
   BUTTON OVERRIDES
   ======================================== */

.btn {
    border-radius: 50rem;
}

/* Primary Button */
.btn-primary {
  --bs-btn-color: var(--bbt-white);
  --bs-btn-bg: var(--bbt-primary-600);
  --bs-btn-border-color: var(--bbt-primary-600);
  --bs-btn-hover-color: var(--bbt-white);
  --bs-btn-hover-bg: var(--bbt-primary-light);
  --bs-btn-hover-border-color: var(--bbt-primary-light);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: var(--bbt-white);
  --bs-btn-active-bg: var(--bbt-primary-light);
  --bs-btn-active-border-color: var(--bbt-primary-light);
  --bs-btn-disabled-color: var(--bbt-text-disable, #d1d1d0);
  --bs-btn-disabled-bg: var(--bbt-stroke-disable, #e7e7e6);
  --bs-btn-disabled-border-color: var(--bbt-stroke-disable, #e7e7e6);
}

/* Secondary Button */
.btn-secondary {
  --bs-btn-color: var(--bbt-white);
  --bs-btn-bg: var(--bbt-secondary-600);
  --bs-btn-border-color: var(--bbt-secondary-600);
  --bs-btn-hover-color: var(--bbt-white);
  --bs-btn-hover-bg: var(--bbt-secondary-light);
  --bs-btn-hover-border-color: var(--bbt-secondary-light);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: var(--bbt-white);
  --bs-btn-active-bg: var(--bbt-secondary-dark);
  --bs-btn-active-border-color: var(--bbt-secondary-dark);
  --bs-btn-disabled-color: var(--bbt-text-disable, #d1d1d0);
  --bs-btn-disabled-bg: var(--bbt-stroke-disable, #e7e7e6);
  --bs-btn-disabled-border-color: var(--bbt-stroke-disable, #e7e7e6);
}

/* Success Button */
.btn-success {
  --bs-btn-color: var(--bbt-dark);
  --bs-btn-bg: var(--bbt-success-300);
  --bs-btn-border-color: var(--bbt-success-300);
  --bs-btn-hover-color: var(--bbt-dark);
  --bs-btn-hover-bg: var(--bbt-success-600);
  --bs-btn-hover-border-color: var(--bbt-success-600);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
  --bs-btn-active-color: var(--bbt-dark);
  --bs-btn-active-bg: var(--bbt-success-600);
  --bs-btn-active-border-color: var(--bbt-success-600);
}

/* Danger Button */
.btn-danger {
  --bs-btn-color: var(--bbt-white);
  --bs-btn-bg: var(--bbt-error);
  --bs-btn-border-color: var(--bbt-error);
  --bs-btn-hover-color: var(--bbt-white);
  --bs-btn-hover-bg: var(--bbt-error-300);
  --bs-btn-hover-border-color: var(--bbt-error-300);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
  --bs-btn-active-color: var(--bbt-white);
  --bs-btn-active-bg: var(--bbt-error-300);
  --bs-btn-active-border-color: var(--bbt-error-300);
}

/* Warning Button */
.btn-warning {
  --bs-btn-color: var(--bbt-dark);
  --bs-btn-bg: var(--bbt-warning-300);
  --bs-btn-border-color: var(--bbt-warning-300);
  --bs-btn-hover-color: var(--bbt-dark);
  --bs-btn-hover-bg: var(--bbt-warning-600);
  --bs-btn-hover-border-color: var(--bbt-warning-600);
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
}

/* Info Button */
.btn-info {
  --bs-btn-color: var(--bbt-text-default);
  --bs-btn-bg: var(--bbt-primary-300);
  --bs-btn-border-color: var(--bbt-primary-300);
  --bs-btn-hover-color: var(--bbt-dark);
  --bs-btn-hover-bg: var(--bbt-primary-600);
  --bs-btn-hover-border-color: var(--bbt-primary-600);
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
}

/* Light Button */
.btn-light {
  --bs-btn-color: var(--bbt-neutral-800);
  --bs-btn-bg: var(--bbt-neutral-200);
  --bs-btn-border-color: var(--bbt-neutral-200);
  --bs-btn-hover-color: var(--bbt-neutral-800);
  --bs-btn-hover-bg: var(--bbt-neutral-300);
  --bs-btn-hover-border-color: var(--bbt-neutral-300);
  --bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
  --bs-btn-active-color: var(--bbt-neutral-800);
  --bs-btn-active-bg: var(--bbt-neutral-400);
  --bs-btn-active-border-color: var(--bbt-neutral-400);
}

/* Outline Buttons */
.btn-outline-primary {
  --bs-btn-color: var(--bbt-primary-600);
  --bs-btn-border-color: var(--bbt-primary-600);
  --bs-btn-hover-color: var(--bbt-white);
  --bs-btn-hover-bg: var(--bbt-primary-600);
  --bs-btn-hover-border-color: var(--bbt-primary-600);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: var(--bbt-white);
  --bs-btn-active-bg: var(--bbt-primary-600);
  --bs-btn-active-border-color: var(--bbt-primary-600);
  --bs-btn-disabled-color: var(--bbt-text-disable, #d1d1d0);
  --bs-btn-disabled-border-color: var(--bbt-stroke-disable, #e7e7e6);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bbt-secondary-600);
  --bs-btn-border-color: var(--bbt-secondary-600);
  --bs-btn-hover-color: var(--bbt-white);
  --bs-btn-hover-bg: var(--bbt-secondary-600);
  --bs-btn-hover-border-color: var(--bbt-secondary-600);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: var(--bbt-white);
  --bs-btn-active-bg: var(--bbt-secondary-600);
  --bs-btn-active-border-color: var(--bbt-secondary-600);
  --bs-btn-disabled-color: var(--bbt-text-disable, #d1d1d0);
  --bs-btn-disabled-border-color: var(--bbt-stroke-disable, #e7e7e6);
}

.btn-outline-success {
  --bs-btn-color: var(--bbt-success-600);
  --bs-btn-border-color: var(--bbt-success-600);
  --bs-btn-hover-color: var(--bbt-dark);
  --bs-btn-hover-bg: var(--bbt-success-300);
  --bs-btn-hover-border-color: var(--bbt-success-300);
}

.btn-outline-danger {
  --bs-btn-color: var(--bbt-error);
  --bs-btn-border-color: var(--bbt-error);
  --bs-btn-hover-color: var(--bbt-white);
  --bs-btn-hover-bg: var(--bbt-error);
  --bs-btn-hover-border-color: var(--bbt-error);
}

.btn-outline-info {
  --bs-btn-color: var(--bbt-text-default);
  --bs-btn-bg: var(--bbt-primary-100);
  --bs-btn-border-color: var(--bbt-primary-600);
  --bs-btn-hover-color: var(--bbt-white);
  --bs-btn-hover-bg: var(--bbt-primary-600);
  --bs-btn-hover-border-color: var(--bbt-primary-600);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: var(--bbt-white);
  --bs-btn-active-bg: var(--bbt-primary-600);
  --bs-btn-active-border-color: var(--bbt-primary-600);
}

.btn-outline-warning {
  --bs-btn-color: var(--bbt-warning-600);
  --bs-btn-bg: var(--bbt-warning-100);
  --bs-btn-border-color: var(--bbt-warning-300);
  --bs-btn-hover-color: var(--bbt-dark);
  --bs-btn-hover-bg: var(--bbt-warning-300);
  --bs-btn-hover-border-color: var(--bbt-warning-300);
}

.btn-outline-light {
  --bs-btn-color: var(--bbt-neutral-600);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bbt-neutral-200);
  --bs-btn-hover-color: var(--bbt-neutral-800);
  --bs-btn-hover-bg: var(--bbt-neutral-200);
  --bs-btn-hover-border-color: var(--bbt-neutral-200);
  --bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
  --bs-btn-active-color: var(--bbt-neutral-800);
  --bs-btn-active-bg: var(--bbt-neutral-300);
  --bs-btn-active-border-color: var(--bbt-neutral-300);
}

/* ========================================
   ALERT OVERRIDES
   ======================================== */

.alert-primary {
  --bs-alert-color: var(--bbt-text-default);
  --bs-alert-bg: var(--bbt-primary-100);
  --bs-alert-border-color: var(--bbt-primary-600);
}

.alert-success {
  --bs-alert-color: var(--bbt-success-600);
  --bs-alert-bg: var(--bbt-success-100);
  --bs-alert-border-color: var(--bbt-success-300);
}

.alert-danger {
  --bs-alert-color: var(--bbt-error);
  --bs-alert-bg: var(--bbt-error-100);
  --bs-alert-border-color: var(--bbt-error);
}

.alert-warning {
  --bs-alert-color: var(--bbt-warning-600);
  --bs-alert-bg: var(--bbt-warning-100);
  --bs-alert-border-color: var(--bbt-warning-300);
}

.alert-info {
  --bs-alert-color: var(--bbt-primary-600);
  --bs-alert-bg: var(--bbt-primary-100);
  --bs-alert-border-color: var(--bbt-primary-300);
}

/* ========================================
   BADGE OVERRIDES
   ======================================== */

.badge.bg-primary {
  background-color: var(--bbt-primary-600) !important;
  color: var(--bbt-white) !important;
}

.badge.bg-secondary {
  background-color: var(--bbt-secondary-600) !important;
  color: var(--bbt-white) !important;
}

.badge.bg-success {
  background-color: var(--bbt-success-600) !important;
  color: var(--bbt-white) !important;
}

.badge.bg-danger {
  background-color: var(--bbt-error) !important;
  color: var(--bbt-white) !important;
}

.badge.bg-warning {
  background-color: var(--bbt-warning-600) !important;
  color: var(--bbt-dark) !important;
}

.badge.bg-info {
  background-color: var(--bbt-primary-300) !important;
  color: var(--bbt-dark) !important;
}

.badge.bg-dark {
  background-color: var(--bbt-neutral-900) !important;
  color: var(--bbt-white) !important;
}

.badge.bg-black {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid var(--bbt-neutral-700) !important;
}

.badge.bg-light {
  background-color: var(--bbt-neutral-50) !important;
  color: var(--bbt-dark) !important;
}


/* ========================================
   BACKGROUND COLOR UTILITIES
   ======================================== */

.bg-primary {
  background-color: var(--bbt-primary-600) !important;
}

.bg-secondary {
  background-color: var(--bbt-neutral-600) !important;
}

.bg-success {
  background-color: var(--bbt-success-300) !important;
}

.bg-danger {
  background-color: var(--bbt-error) !important;
}

.bg-warning {
  background-color: var(--bbt-warning-300) !important;
}

.bg-info {
  background-color: var(--bbt-primary-300) !important;
}

/* ========================================
   TEXT COLOR UTILITIES
   ======================================== */

.text-primary {
  color: var(--bbt-primary-600) !important;
}

.text-secondary {
  color: var(--bbt-neutral-600) !important;
}

.text-success {
  color: var(--bbt-success-600) !important;
}

.text-danger {
  color: var(--bbt-error) !important;
}

.text-warning {
  color: var(--bbt-warning-600) !important;
}

.text-info {
  color: var(--bbt-primary-600) !important;
}

/* ========================================
   BORDER COLOR UTILITIES
   ======================================== */

.border-primary {
  border-color: var(--bbt-primary-600) !important;
}

.border-secondary {
  border-color: var(--bbt-neutral-600) !important;
}

.border-success {
  border-color: var(--bbt-success-300) !important;
}

.border-danger {
  border-color: var(--bbt-error) !important;
}

/* ========================================
   LINK COLORS
   ======================================== */

a {
  color: var(--bbt-primary-600);
}

a:hover {
  color: var(--bbt-primary-light);
}

.link-primary {
  color: var(--bbt-primary-light) !important;
}

.link-primary:hover {
  color: var(--bbt-primary-600) !important;
}

/* ========================================
   FORM CONTROLS
   ======================================== */

/* Base form control styles */
.form-control,
.form-select {
  color: var(--bbt-text-grey);
  background-color: var(--bbt-white);
  border: 1px solid var(--bbt-neutral-200);
  border-radius: 20px;
  padding: 0.5rem 1rem;
}

.form-control::placeholder,
.form-select::placeholder {
  color: var(--bbt-text-grey);
}

/* Focus state */
  .form-control:focus,
  .form-select:focus {
    color: var(--bbt-text-grey);
    border-color: var(--bbt-primary-light);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bbt-primary-light) 40%, transparent);
  }

/* Disabled state */
  .form-control:disabled,
  .form-select:disabled,
  .form-control[readonly],
  .form-select[readonly] {
    background-color: var(--bbt-neutral-50, #f6f6f5);
    border-color: var(--bbt-stroke-disable, #e7e7e6) !important;
    color: var(--bbt-neutral-600, #575756) !important;
    cursor: not-allowed;
  }

/* Error state */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: var(--bbt-error);
  box-shadow: none;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--bbt-error);
  box-shadow: 0 0 0 0.2rem rgba(189, 0, 0, 0.25);
}

/* Form labels */
.form-label {
  color: var(--bbt-text-default);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* Required asterisk */
.form-label .required,
.form-label .text-danger {
  color: var(--bbt-error);
}

/* Form hint text */
.form-text {
  color: var(--bbt-text-grey);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Error hint text */
.form-text.text-danger,
.invalid-feedback {
  color: var(--bbt-error);
}

/* Textarea specific */
textarea.form-control {
  border-radius: 16px;
}

/* Input group addon styling */
.input-group-text {
  background-color: transparent;
  border: 1px solid var(--bbt-neutral-200);
  border-radius: 20px;
  color: var(--bbt-text-grey);
}

/* Input group with rounded corners */
.input-group>.form-control:not(:first-child),
.input-group>.form-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group>.form-control:not(:last-child),
.input-group>.form-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group>.input-group-text:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.input-group>.input-group-text:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}

/* ----------------------------------------
   INPUT WITH ICONS
   ---------------------------------------- */

/* Input wrapper for icon positioning */
.input-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon-wrapper .form-control {
  padding-left: 2.75rem;
}

.input-icon-wrapper.has-icon-right .form-control {
  padding-right: 2.75rem;
}

.input-icon-wrapper.has-icon-left .form-control {
  padding-left: 2.75rem;
}

.input-icon-wrapper.has-icon-both .form-control {
  padding-left: 2.75rem;
  padding-right: 2.75rem;
}

/* Icon positioning */
.input-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--bbt-text-grey);
  pointer-events: none;
  z-index: 4;
}

.input-icon-left {
  left: 1rem;
}

.input-icon-right {
  right: 1rem;
}

/* Icon colors for different states */
.input-icon-wrapper:focus-within .input-icon {
  color: var(--bbt-primary-light);
}

.input-icon-wrapper.is-invalid .input-icon,
.was-validated .input-icon-wrapper:has(.form-control:invalid) .input-icon {
  color: var(--bbt-error);
}

.input-icon-wrapper:has(.form-control:disabled) .input-icon {
  color: var(--bbt-neutral-600);
}

/* ========================================
   CHECKBOX & RADIO OVERRIDES
   Based on Bootstrap form-check pattern
   ======================================== */

/* Base form-check-input styles */
.form-check-input {
  width: 1.25em;
  height: 1.25em;
  border: 2px solid var(--bbt-neutral-200, #d1d1d1);
  background-color: var(--bbt-white, #ffffff);
  cursor: pointer;
}

.form-check-input:hover {
  border-color: var(--bbt-primary, #007e93);
}

/* Checked state */
.form-check-input:checked {
  background-color: var(--bbt-primary, #007e93);
  border-color: var(--bbt-primary, #007e93);
}

/* Focus state */
.form-check-input:focus {
  border-color: var(--bbt-primary-light, #00b4d2);
  box-shadow: 0 0 0 0.2rem rgba(0, 180, 210, 0.25);
}

/* Disabled state */
.form-check-input:disabled {
  background-color: var(--bbt-neutral-50, #f6f6f5);
  border-color: var(--bbt-stroke-disable, #e7e7e6) !important;
  cursor: not-allowed;
  opacity: 1;
}

.form-check-input:disabled:checked {
  background-color: var(--bbt-text-disable, #d1d1d0) !important;
  border-color: var(--bbt-text-disable, #d1d1d0) !important;
}

.form-check-input:disabled~.form-check-label {
  color: var(--bbt-text-disable, #d1d1d0) !important;
  cursor: not-allowed;
}

/* Error/Invalid state */
.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
  border-color: var(--bbt-error, #bd0000);
}

.form-check-input.is-invalid:checked,
.was-validated .form-check-input:invalid:checked {
  background-color: var(--bbt-error, #bd0000);
  border-color: var(--bbt-error, #bd0000);
}

.form-check-input.is-invalid:focus,
.was-validated .form-check-input:invalid:focus {
  box-shadow: 0 0 0 0.2rem rgba(189, 0, 0, 0.25);
}

.form-check-input.is-invalid~.form-check-label,
.was-validated .form-check-input:invalid~.form-check-label {
  color: var(--bbt-error, #bd0000);
}

/* Label styling */
.form-check-label {
  color: var(--bbt-text-default, #004854);
  cursor: pointer;
}

/* Fix vertical alignment for checkbox/radio and label */
.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: auto;
  padding-left: 0;
}

.form-check .form-check-input {
  float: none;
  margin: 0;
  flex-shrink: 0;
}

/* Reverse layout (label on left) */
.form-check-reverse {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* ========================================
   SWITCH/TOGGLE OVERRIDES
   Based on Bootstrap form-switch pattern
   ======================================== */

/* Switch container alignment */
.form-switch {
  padding-left: 0;
}

/* Switch track */
.form-switch .form-check-input {
  width: 3.25em;
  height: 1.75em;
  background-color: var(--bbt-neutral-200, #d1d1d1);
  border: none;
  border-radius: 50rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
  background-position: left center;
  transition:
    background-position 0.15s ease-in-out,
    background-color 0.15s ease-in-out;
}

.form-switch .form-check-input:hover {
  background-color: var(--bbt-neutral-300, #b0b0b0);
}

/* Switch checked state */
.form-switch .form-check-input:checked {
  background-color: var(--bbt-primary, #007e93);
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked:hover {
  background-color: var(--bbt-primary-light);
}

/* Switch focus state */
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
  box-shadow: 0 0 0 0.2rem rgba(0, 180, 210, 0.25);
}

/* Switch disabled state */
.form-switch .form-check-input:disabled {
  background-color: var(--bbt-surface-grey, #e7e7e6);
  opacity: 1;
}

.form-switch .form-check-input:disabled:checked {
  background-color: var(--bbt-neutral-200, #d1d1d1);
}

/* Switch error state */
.form-switch .form-check-input.is-invalid,
.was-validated .form-switch .form-check-input:invalid {
  background-color: var(--bbt-error-200, #ffdddc);
}

.form-switch .form-check-input.is-invalid:checked,
.was-validated .form-switch .form-check-input:invalid:checked {
  background-color: var(--bbt-error, #bd0000);
}

/* ========================================
   SELECTION GROUP STYLES
   Helper classes for grouping controls
   ======================================== */

/* Vertical selection group */
.selection-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Horizontal selection group */
.selection-group.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* Selection group title */
.selection-group-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bbt-text-default, #004854);
  margin-bottom: 0.75rem;
}

.selection-group-title .required {
  color: var(--bbt-error, #bd0000);
  margin-left: 0.25rem;
}

/* ========================================
   PROGRESS BAR
   ======================================== */

.progress-bar {
  background-color: var(--bbt-primary-600);
}

.progress-bar.bg-success {
  background-color: var(--bbt-success-300) !important;
}

.progress-bar.bg-danger {
  background-color: var(--bbt-error) !important;
}

/* ========================================
   PAGINATION
   ======================================== */

.page-link {
  color: var(--bbt-primary-600);
}

.page-link:hover {
  color: var(--bbt-primary-light);
  background-color: var(--bbt-primary-100);
  border-color: var(--bbt-primary-600);
}

.page-item.active .page-link {
  background-color: var(--bbt-primary-600);
  border-color: var(--bbt-primary-600);
}

/* ========================================
   NAV TABS & PILLS OVERRIDES
   BBT Design System Tab Styles
   ======================================== */

/* ----------------------------------------
   BASE NAV-LINK
   ---------------------------------------- */

.nav-link {
  color: var(--bbt-primary-600);
}

.nav-link:hover {
  color: var(--bbt-primary-light);
}

/* ----------------------------------------
   NAV-TABS (Pill-style BBT Tabs)
   ---------------------------------------- */

/* Reset Bootstrap nav-tabs variables */
.nav-tabs {
  --bs-nav-tabs-border-width: 0;
  --bs-nav-tabs-border-color: transparent;
  --bs-nav-tabs-border-radius: 0;
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-color: var(--bbt-primary, #007e93);
  --bs-nav-tabs-link-active-bg: var(--bbt-white, #ffffff);
  --bs-nav-tabs-link-active-border-color: transparent;

  display: inline-flex;
  background-color: var(--bbt-neutral-50, #f6f6f5);
  border: 1px solid var(--bbt-neutral-200, #d1d1d0) !important;
  border-radius: 50rem;
  padding: 0.25rem;
  gap: 4px;
  overflow: hidden;
  position: relative;
}

/* Remove any pseudo-elements */
.nav-tabs::before,
.nav-tabs::after {
  display: none !important;
  content: none !important;
}

.nav-tabs .nav-item {
  margin: 0;
}

.nav-tabs .nav-item::before,
.nav-tabs .nav-item::after {
  display: none !important;
  content: none !important;
}

.nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bbt-text-default, #004854);
  background-color: transparent;
  border: none !important;
  border-radius: 50rem;
  margin-bottom: 0;
  outline: none !important;
  box-shadow: none;
  transition:
    background-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
}

.nav-tabs .nav-link::before,
.nav-tabs .nav-link::after {
  display: none !important;
  content: none !important;
}

.nav-tabs .nav-link:hover {
  color: var(--bbt-primary, #007e93);
  background-color: var(--bbt-white, #ffffff);
  border: none !important;
}

  .nav-tabs .nav-link:focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bbt-primary-light) 40%, transparent);
    outline: none !important;
    border: none !important;
  }

.nav-tabs .nav-link:focus-visible {
  outline: none !important;
}

/* Active state */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bbt-primary, #007e93);
  background-color: var(--bbt-white, #ffffff);
  border-radius: 50rem;
  outline: none !important;
}

.nav-tabs .nav-link.active::before,
.nav-tabs .nav-link.active::after {
  display: none !important;
  content: none !important;
}

/* Disabled state */
.nav-tabs .nav-link:disabled,
.nav-tabs .nav-link.disabled {
  color: var(--bbt-neutral-300, #b0b0b0);
  background-color: transparent;
  border-color: transparent;
  cursor: not-allowed;
  opacity: 1;
}

/* Icon only tab */
.nav-tabs .nav-link.nav-link-icon-only {
  padding: 0.375rem 0.5rem;
}

/* ----------------------------------------
   TAB ICONS
   ---------------------------------------- */

.tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tab-icon svg {
  width: 1rem;
  height: 1rem;
}

.tab-icon-left {
  margin-right: 0;
}

.tab-icon-right {
  margin-left: 0;
}

/* ----------------------------------------
   TAB BADGES
   ---------------------------------------- */

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--bbt-white, #ffffff);
  background-color: var(--bbt-accent-600, #9a2a54);
  border-radius: 0.625rem;
  margin-left: 0.25rem;
}

/* ========================================
   DROPDOWN (General Bootstrap overrides)
   ======================================== */

.dropdown-menu {
  border: 1px solid var(--bbt-neutral-100);
  border-radius: 16px;
  padding: 0.5rem 0;
  box-shadow: var(--bbt-shadow);
}

.dropdown-item {
  color: var(--bbt-text-default);
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: background-color 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bbt-primary-100);
  color: var(--bbt-primary-600);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--bbt-primary-600);
  color: var(--bbt-white);
}

/* ========================================
   SPINNER
   ======================================== */

.spinner-border {
  color: var(--bbt-primary-light);
}

.spinner-border.text-primary {
  color: var(--bbt-primary-600) !important;
}

.spinner-grow {
  color: var(--bbt-primary-light);
}

/* ========================================
   ALERT OVERRIDES
   Based on Bootstrap alert pattern
   ======================================== */

/* Base alert styling */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 1.5rem;
  border: none;
}

/* Alert with icon layout */
.alert-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Alert content wrapper */
.alert-content {
  flex: 1;
  min-width: 0;
}

/* Alert heading */
.alert-heading {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.alert p:last-child {
  margin-bottom: 0;
}

/* Alert text */
.alert-text {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Close button positioning */
.alert-dismissible {
  padding-right: 3rem;
}

.alert-dismissible .btn-close {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  padding: 0.5rem;
}

/* ----------------------------------------
   INFO ALERT (Primary/Blue)
   ---------------------------------------- */
.alert-info {
  background-color: var(--bbt-primary-100, #e6f8fb);
  color: var(--bbt-text-default, #004854);
}

.alert-info .alert-icon {
  color: var(--bbt-primary, #007e93);
}

.alert-info .alert-heading {
  color: var(--bbt-text-default, #004854);
}

.alert-info .btn-close {
  color: var(--bbt-text-default, #004854);
}

.alert-info .alert-link {
  color: var(--bbt-primary, #007e93);
  font-weight: 600;
}

/* ----------------------------------------
   WARNING ALERT (Yellow)
   ---------------------------------------- */
.alert-warning {
  background-color: var(--bbt-warning-100, #fffce9);
  color: var(--bbt-text-default, #004854);
}

.alert-warning .alert-icon {
  color: var(--bbt-warning-600, #a43600);
}

.alert-warning .alert-heading {
  color: var(--bbt-text-default, #004854);
}

.alert-warning .btn-close {
  color: var(--bbt-text-default, #004854);
}

.alert-warning .alert-link {
  color: var(--bbt-warning-600, #a43600);
  font-weight: 600;
}

/* ----------------------------------------
   DANGER ALERT (Red/Error)
   ---------------------------------------- */
.alert-danger {
  background-color: var(--bbt-error-100, #ffefef);
  color: var(--bbt-text-default, #004854);
}

.alert-danger .alert-icon {
  color: var(--bbt-error, #bd0000);
}

.alert-danger .alert-heading {
  color: var(--bbt-text-default, #004854);
}

.alert-danger .btn-close {
  color: var(--bbt-text-default, #004854);
}

.alert-danger .alert-link {
  color: var(--bbt-error, #bd0000);
  font-weight: 600;
}

/* ----------------------------------------
   SUCCESS ALERT (Green)
   ---------------------------------------- */
.alert-success {
  background-color: var(--bbt-success-100, #ecfff6);
  color: var(--bbt-text-default, #004854);
}

.alert-success .alert-icon {
  color: var(--bbt-success-600, #007a41);
}

.alert-success .alert-heading {
  color: var(--bbt-text-default, #004854);
}

.alert-success .btn-close {
  color: var(--bbt-text-default, #004854);
}

.alert-success .alert-link {
  color: var(--bbt-success-600, #007a41);
  font-weight: 600;
}

/* ========================================
   BADGE OVERRIDES
   Based on Bootstrap badge pattern
   ======================================== */

/* Base badge styling */
.badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.35em 0.65em;
  border-radius: 0.375rem;
}

/* Pill badges (Status labels) */
.badge.rounded-pill {
  padding: 0.5em 1em;
  border-radius: 50rem;
}

/* ----------------------------------------
   STATUS BADGES (Label style)
   ---------------------------------------- */

/* Secondary Brand Status (Subtle) */
.badge.text-bg-secondary,
.badge.bg-secondary-subtle,
.badge-subtle-secondary,
.badge.text-bg-secondary-subtle {
  background-color: var(--bbt-secondary-100, #e6f3f5) !important;
  color: var(--bbt-secondary-600, #3c646e) !important;
}

/* Neutral/Grey Status (Subtle) */
.badge.bg-neutral-subtle,
.badge-subtle-neutral,
.badge.text-bg-neutral-subtle {
  background-color: var(--bbt-neutral-100, #e7e7e6) !important;
  color: var(--bbt-neutral-700, #5a6b5e) !important;
}

/* Primary/Blue Status (Subtle) */
.badge.text-bg-primary,
.badge.bg-primary-subtle,
.badge-subtle-primary,
.badge.text-bg-primary-subtle {
  background-color: var(--bbt-primary-100, #e6f8fb) !important;
  color: var(--bbt-primary-600, #007e93) !important;
}

/* Info/Cyan Status (Subtle) */
.badge.text-bg-info,
.badge.bg-info-subtle,
.badge-subtle-info,
.badge.text-bg-info-subtle {
  background-color: var(--bbt-primary-100) !important;
  color: var(--bbt-primary-600) !important;
}

/* Success/Green Status (Subtle) */
.badge.text-bg-success,
.badge.bg-success-subtle,
.badge-subtle-success,
.badge.text-bg-success-subtle {
  background-color: var(--bbt-success-100, #ecfff6) !important;
  color: var(--bbt-success-600, #007a41) !important;
}

/* Warning/Yellow Status (Subtle) */
.badge.text-bg-warning,
.badge.bg-warning-subtle,
.badge-subtle-warning,
.badge.text-bg-warning-subtle {
  background-color: var(--bbt-warning-100, #fffce9) !important;
  color: var(--bbt-warning-600, #a43600) !important;
}

/* Danger/Red Status (Subtle) */
.badge.text-bg-danger,
.badge.bg-danger-subtle,
.badge-subtle-danger,
.badge.text-bg-danger-subtle {
  background-color: var(--bbt-error-100, #ffefef) !important;
  color: var(--bbt-error, #bd0000) !important;
}

/* Light Status (Subtle) */
.badge.text-bg-light,
.badge.bg-light-subtle,
.badge-subtle-light,
.badge.text-bg-light-subtle {
  background-color: var(--bbt-neutral-50, #f6f6f5) !important;
  color: var(--bbt-neutral-600, #6b7280) !important;
}

/* Dark Status (Subtle) */
.badge.text-bg-dark,
.badge.bg-dark-subtle,
.badge-subtle-dark,
.badge.text-bg-dark-subtle {
  background-color: var(--bbt-neutral-200, #e7e7e6) !important;
  color: var(--bbt-neutral-900, #111111) !important;
}


/* ----------------------------------------
   NOTIFICATION BADGES (Circular)
   ---------------------------------------- */

/* Notification badge base */
.badge-notification {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 50%;
  background-color: var(--bbt-accent-600, #9a2a54);
  color: var(--bbt-text-white, #ffffff);
}

/* Small dot indicator (no text) */
.badge-notification.badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
}

/* Small notification badge */
.badge-notification.badge-sm {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.625rem;
  padding: 0;
}

/* Medium notification badge (default) */
.badge-notification.badge-md {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
  padding: 0;
}

/* Large notification badge */
.badge-notification.badge-lg {
  width: 2rem;
  height: 2rem;
  font-size: 0.875rem;
  padding: 0;
}

/* Positioned badge (on buttons/icons) */
.position-relative .badge-notification {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

/* Badge count overflow */
.badge-notification[data-count]::after {
  content: attr(data-count);
}

/* ========================================
   AVATAR COMPONENT
   Custom avatar component for BBT Design System
   ======================================== */

/* Base avatar styling */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  font-weight: 600;
  text-transform: uppercase;
  user-select: none;
}

/* Avatar image */
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------------------------------
   AVATAR SIZES
   ---------------------------------------- */

/* Extra small (24px) */
.avatar-xs {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.5rem;
}

/* Small (32px) */
.avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.625rem;
}

/* Medium (40px) - Default */
.avatar-md {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.75rem;
}

/* Large (48px) */
.avatar-lg {
  width: 3rem;
  height: 3rem;
  font-size: 0.875rem;
}

/* Extra large (64px) */
.avatar-xl {
  width: 4rem;
  height: 4rem;
  font-size: 1rem;
}

/* ----------------------------------------
   AVATAR VARIANTS
   ---------------------------------------- */

/* Image avatar with border */
.avatar-image {
  border: 2px solid var(--bbt-neutral-200, #d1d1d1);
  background-color: var(--bbt-neutral-50, #f6f6f5);
}

/* Icon/Placeholder avatar */
.avatar-icon {
  background-color: var(--bbt-primary-100, #e6f8fb);
  color: var(--bbt-primary, #007e93);
  border: 2px solid var(--bbt-primary-100, #e6f8fb);
}

.avatar-icon svg {
  width: 60%;
  height: 60%;
}

/* Initials avatar */
.avatar-initials {
  background-color: var(--bbt-primary-100, #e6f8fb);
  color: var(--bbt-primary, #007e93);
  border: 2px solid var(--bbt-primary-100, #e6f8fb);
}

/* Filled variant (solid background) */
.avatar-filled {
  background-color: var(--bbt-primary-200, #b3e8f2);
  border-color: var(--bbt-primary-200, #b3e8f2);
}

/* Outlined variant */
.avatar-outlined {
  background-color: transparent;
  border: 2px solid var(--bbt-primary, #007e93);
  color: var(--bbt-primary, #007e93);
}

/* ----------------------------------------
   AVATAR WITH LABEL GROUP
   ---------------------------------------- */

/* Avatar label group container */
.avatar-group {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* Avatar label content */
.avatar-label {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* User name */
.avatar-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bbt-text-default, #004854);
  line-height: 1.3;
}

/* User role/email */
.avatar-role {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--bbt-neutral-600, #575756);
  line-height: 1.3;
}

/* Size variations for avatar groups */
.avatar-group-sm .avatar-name {
  font-size: 0.75rem;
}

.avatar-group-sm .avatar-role {
  font-size: 0.625rem;
}

.avatar-group-lg .avatar-name {
  font-size: 1rem;
}

.avatar-group-lg .avatar-role {
  font-size: 0.875rem;
}

/* ----------------------------------------
   AVATAR STACK (Multiple avatars)
   ---------------------------------------- */

.avatar-stack {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.avatar-stack .avatar {
  margin-left: -0.5rem;
  border: 2px solid var(--bbt-white);
}

.avatar-stack .avatar:last-child {
  margin-left: 0;
}

/* Avatar stack with count */
.avatar-stack-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bbt-neutral-100, #e7e7e6);
  color: var(--bbt-text-default, #004854);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 50%;
  margin-left: -0.5rem;
  border: 2px solid var(--bbt-white);
}

/* ========================================
   BREADCRUMB OVERRIDES
   BBT Design System Breadcrumb Styles
   ======================================== */

/* Breadcrumb container */
.breadcrumb {
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-bg: transparent;
  --bs-breadcrumb-border-radius: 0;
  --bs-breadcrumb-divider-color: var(--bbt-neutral-300);
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-item-active-color: var(--bbt-neutral-200);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Breadcrumb item */
.breadcrumb-item {
  display: flex;
  align-items: center;
}

/* Breadcrumb links (clickable levels) */
.breadcrumb-item a {
  color: var(--bbt-text-default);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.15s ease-in-out;
}

.breadcrumb-item a:hover {
  color: var(--bbt-primary-600);
  text-decoration: none;
}

/* Current page (disabled/active state) */
.breadcrumb-item.active {
  color: var(--bbt-neutral-200);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Chevron separator */
.breadcrumb-item+.breadcrumb-item::before {
  display: inline-block;
  padding-right: var(--bs-breadcrumb-item-padding-x);
  padding-left: var(--bs-breadcrumb-item-padding-x);
  color: var(--bs-breadcrumb-divider-color);
  content: '›';
  font-size: 1.125rem;
  font-weight: 400;
}

/* Ellipsis item (for collapsed breadcrumbs) */
.breadcrumb-item.breadcrumb-ellipsis {
  color: var(--bbt-neutral-300);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: default;
}

.breadcrumb-item.breadcrumb-ellipsis span {
  pointer-events: none;
}

/* ========================================
   ACCORDION OVERRIDES
   Based on Bootstrap accordion pattern
   ======================================== */

/* Accordion container */
.accordion {
  --bs-accordion-border-color: transparent;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
}

/* Accordion item */
.accordion-item {
  border: none;
  background-color: transparent;
}

.accordion-item:not(:last-child) {
  border-bottom: 1px solid var(--bbt-neutral-100, #e7e7e6);
}

/* ----------------------------------------
   ACCORDION BUTTON (Header)
   ---------------------------------------- */

.accordion-button {
  background-color: transparent;
  color: var(--bbt-text-default, #004854);
  font-size: 1rem;
  font-weight: 500;
  padding: 1rem 1.25rem;
  gap: 0.75rem;
  box-shadow: none;
  min-width: 0;
  overflow: visible;
}

.accordion-button:not(.collapsed) {
  background-color: var(--bbt-neutral-50, #f6f6f5);
  color: var(--bbt-text-default, #004854);
  box-shadow: none;
}

.accordion-button:focus {
  border-color: transparent;
  box-shadow: none;
}

.accordion-button:hover {
  background-color: var(--bbt-neutral-50, #f6f6f5);
}

/* Accordion button arrow */
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23004854'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.2s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23004854'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}

/* ----------------------------------------
   ACCORDION WITH ICON
   ---------------------------------------- */

/* Icon in accordion header */
.accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--bbt-primary, #007e93);
  background-color: transparent;
  color: var(--bbt-primary, #007e93);
  flex-shrink: 0;
}

.accordion-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Filled icon variant */
.accordion-icon.accordion-icon-filled {
  background-color: var(--bbt-primary-100, #e6f8fb);
  border-color: var(--bbt-primary-100, #e6f8fb);
}

/* ----------------------------------------
   ACCORDION BODY
   ---------------------------------------- */

.accordion-body {
  padding: 1rem 1.25rem;
  padding-left: 4.5rem;
  /* Align with title when icon is present */
  color: var(--bbt-neutral-600, #575756);
  font-size: 0.875rem;
  line-height: 1.6;
  background-color: var(--bbt-neutral-50, #f6f6f5);
}

/* Without icon alignment */
.accordion-body.no-icon-indent {
  padding-left: 1.25rem;
}

/* ----------------------------------------
   ACCORDION FLUSH VARIANT
   ---------------------------------------- */

.accordion-flush .accordion-item {
  border-radius: 0;
}

.accordion-flush .accordion-button {
  border-radius: 0;
}

.accordion-flush .accordion-item:first-child {
  border-top: 1px solid var(--bbt-neutral-100, #e7e7e6);
}

/* ----------------------------------------
   ACCORDION BORDERED VARIANT
   ---------------------------------------- */

.accordion-bordered .accordion-item {
  border: 1px solid var(--bbt-neutral-200, #d1d1d1);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.accordion-bordered .accordion-item:not(:last-child) {
  border-bottom: 1px solid var(--bbt-neutral-200, #d1d1d1);
}

.accordion-bordered .accordion-button {
  border-radius: 0.5rem;
}

.accordion-bordered .accordion-button:not(.collapsed) {
  border-radius: 0.5rem 0.5rem 0 0;
}

/* ----------------------------------------
   ACCORDION MINIMAL VARIANT
   ---------------------------------------- */

.accordion-minimal .accordion-button {
  padding: 0.75rem 0;
  background-color: transparent;
}

.accordion-minimal .accordion-button:not(.collapsed) {
  background-color: transparent;
}

.accordion-minimal .accordion-button:hover {
  background-color: transparent;
  color: var(--bbt-primary, #007e93);
}

.accordion-minimal .accordion-body {
  padding: 0.5rem 0 1rem;
  background-color: transparent;
}

.accordion-minimal .accordion-item:not(:last-child) {
  border-bottom: 1px solid var(--bbt-neutral-100, #e7e7e6);
}

/* ========================================
   MENU / NAVIGATION OVERRIDES
   ======================================== */

/* ----------------------------------------
   MENU ITEM BASE
   ---------------------------------------- */

/* Base menu item - versatile navigation link */
.menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  color: var(--bbt-text-default, #004854);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 24px;
  transition:
    background-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
  cursor: pointer;
  border: none;
  background-color: transparent;
  width: 100%;
  text-align: left;
}

.menu-item:hover {
  background-color: var(--bbt-neutral-50, #f6f6f5);
  color: var(--bbt-text-default, #004854);
  text-decoration: none;
}

.menu-item:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--bbt-primary-100, #e6f8fb);
}

/* Active/Selected state */
.menu-item.active,
.menu-item[aria-current='page'] {
  background-color: var(--bbt-primary-100, #e6f8fb);
  color: var(--bbt-primary, #007e93);
}

.menu-item.active:hover,
.menu-item[aria-current='page']:hover {
  background-color: var(--bbt-primary-100, #e6f8fb);
}

/* Disabled state */
.menu-item.disabled,
.menu-item:disabled {
  opacity: 0.5;
  pointer-events: none;
  color: var(--bbt-text-disable, #d1d1d0) !important;
}

.menu-item.disabled .menu-item-icon svg,
.menu-item:disabled .menu-item-icon svg {
  color: var(--bbt-icon-disable, #d1d1d0) !important;
}

/* Menu item icon */
.menu-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.menu-item-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Menu item text */
.menu-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Menu item badge */
.menu-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--bbt-text-white, #ffffff);
  background-color: var(--bbt-accent-600, #9a2a54);
  border-radius: 0.625rem;
  flex-shrink: 0;
}

/* Menu item chevron */
.menu-item-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.2s ease-in-out;
}

.menu-item-chevron svg {
  width: 1rem;
  height: 1rem;
}

.menu-item[aria-expanded='true'] .menu-item-chevron {
  transform: rotate(180deg);
}

/* ----------------------------------------
   MENU ITEM VARIANTS
   ---------------------------------------- */

/* Compact variant */
.menu-item-compact {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}

/* Large variant */
.menu-item-lg {
  padding: 1rem 1.25rem;
  font-size: 1rem;
}

/* Filled icon variant */
.menu-item .menu-item-icon.filled {
  width: 24px;
  height: 24px;
  background-color: var(--bbt-primary-100, #e6f8fb);
  color: var(--bbt-primary, #007e93);
  border-radius: 0.375rem;
}

.menu-item.active .menu-item-icon.filled {
  background-color: var(--bbt-primary, #007e93);
  color: var(--bbt-white);
}

/* ----------------------------------------
   MENU LIST
   ---------------------------------------- */

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-list-item {
  margin: 0;
  padding: 0;
}

/* Nested menu */
.menu-list-nested {
  padding-left: 2.25rem;
  margin-top: 0.25rem;
}

/* Menu divider */
.menu-divider {
  height: 1px;
  background-color: var(--bbt-neutral-100, #e7e7e6);
  margin: 0.5rem 0;
}

/* ----------------------------------------
   BOTTOM NAVIGATION
   ---------------------------------------- */

.bottom-nav {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  background-color: var(--bbt-white);
  border-top: 1px solid var(--bbt-neutral-100, #e7e7e6);
  padding: 0.5rem 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

.bottom-nav.bottom-nav-static {
  position: fixed;
  border-radius: 0.5rem;
  border: 1px solid var(--bbt-neutral-100, #e7e7e6);
}

/* Bottom nav item */
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  min-width: 4rem;
  color: var(--bbt-neutral-600, #575756);
  text-decoration: none;
  font-size: 0.625rem;
  font-weight: 500;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease-in-out;
  position: relative;
}

.bottom-nav-item:hover {
  color: var(--bbt-primary, #007e93);
  text-decoration: none;
}

.bottom-nav-item:focus {
  outline: none;
}

/* Active state */
.bottom-nav-item.active {
  color: var(--bbt-primary, #007e93);
}

/* Bottom nav icon */
.bottom-nav-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
}

.bottom-nav-item-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Active state with filled background */
.bottom-nav-item.active .bottom-nav-item-icon {
  background-color: var(--bbt-primary, #007e93);
  color: var(--bbt-white);
  border-radius: 1rem;
  width: 3rem;
  height: 1.75rem;
  padding: 0.25rem 0.75rem;
}

/* Bottom nav label */
.bottom-nav-item-label {
  font-size: 0.625rem;
  line-height: 1;
  text-align: center;
}

/* Bottom nav badge (notification) */
.bottom-nav-item-badge {
  position: absolute;
  top: -0.125rem;
  right: -0.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--bbt-white);
  background-color: var(--bbt-accent-600, #9a2a54);
  border-radius: 0.5rem;
}

/* Dot badge variant */
  .bottom-nav-item-badge.badge-dot {
    min-width: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    top: 0;
    right: 0;
  }

/* ----------------------------------------
   QUICK ACCESS MENU
   ---------------------------------------- */

.quick-access {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.quick-access-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  min-width: 4rem;
  color: var(--bbt-text-default, #004854);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: transparent;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.quick-access-item:hover {
  background-color: var(--bbt-neutral-50, #f6f6f5);
  text-decoration: none;
  color: var(--bbt-text-default, #004854);
}

.quick-access-item:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--bbt-primary-100, #e6f8fb);
}

/* Active state */
.quick-access-item.active {
  background-color: var(--bbt-primary-100, #e6f8fb);
  color: var(--bbt-primary, #007e93);
}

/* Quick access icon */
.quick-access-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  color: inherit;
}

.quick-access-item.active .quick-access-item-icon {
  background-color: var(--bbt-primary, #007e93);
  color: var(--bbt-white);
}

.quick-access-item-icon svg {
  width: 2rem;
  height: 2rem;
}

.quick-access-item-icon img {
  width: 2rem;
  height: 2rem;
}

/* Quick access label */
.quick-access-item-label {
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
}

@media (max-width: 575.98px) {
  .quick-access-item-label {
    font-size: 0.70rem;
    font-weight: 500;
    text-align: center;
  }
}

/* ----------------------------------------
   FUNCTION ICONS GRID
   ---------------------------------------- */

.function-icons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
}

.function-icon-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--bbt-primary, #007e93);
  background-color: transparent;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.function-icon-item:hover {
  background-color: var(--bbt-neutral-50, #f6f6f5);
}

.function-icon-item.active {
  background-color: var(--bbt-primary, #007e93);
  color: var(--bbt-white);
}

.function-icon-item svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ----------------------------------------
   ICON BUTTON WITH NOTIFICATION
   ---------------------------------------- */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--bbt-primary, #007e93);
  background-color: transparent;
  border: 2px solid var(--bbt-primary, #007e93);
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
  position: relative;
}

.icon-btn:hover {
  background-color: var(--bbt-primary-100, #e6f8fb);
}

.icon-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--bbt-primary-100, #e6f8fb);
}

/* Filled variant */
.icon-btn.icon-btn-filled {
  background-color: var(--bbt-primary-100, #e6f8fb);
  border-color: var(--bbt-primary-100, #e6f8fb);
}

.icon-btn.icon-btn-filled:hover {
  background-color: var(--bbt-primary, #007e93);
  border-color: var(--bbt-primary, #007e93);
  color: var(--bbt-white);
}

/* Icon button sizes */
.icon-btn-sm {
  width: 2rem;
  height: 2rem;
}

.icon-btn-lg {
  width: 3rem;
  height: 3rem;
}

.icon-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Icon button notification badge */
.icon-btn-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--bbt-white);
  background-color: var(--bbt-accent-600, #9a2a54);
  border-radius: 0.5rem;
}

.icon-btn-badge.badge-dot {
  min-width: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  top: 0;
  right: 0;
}

/* ----------------------------------------
   FLOATING ACTION BUTTON (FAB)
   ---------------------------------------- */

.fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  color: var(--bbt-white);
  background-color: var(--bbt-accent-600, #9a2a54);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(154, 42, 84, 0.3);
  transition:
    background-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    transform 0.15s ease-in-out;
}

.fab:hover {
  background-color: var(--bbt-accent-600);
  box-shadow: 0 6px 16px rgba(154, 42, 84, 0.4);
  transform: translateY(-2px);
}

.fab:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(154, 42, 84, 0.3),
    0 4px 12px rgba(154, 42, 84, 0.3);
}

.fab:active {
  transform: translateY(0);
}

.fab svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* FAB sizes */
.fab-sm {
  width: 2.5rem;
  height: 2.5rem;
}

.fab-sm svg {
  width: 1.25rem;
  height: 1.25rem;
}

.fab-lg {
  width: 4rem;
  height: 4rem;
}

.fab-lg svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* FAB with outline */
.fab-outline {
  background-color: var(--bbt-white);
  color: var(--bbt-accent-600, #9a2a54);
  border: 2px solid var(--bbt-accent-600, #9a2a54);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.fab-outline:hover {
  background-color: var(--bbt-accent-600, #9a2a54);
  color: var(--bbt-white);
}

/* FAB positioning (for fixed position) */
.fab-fixed {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1040;
}

/* FAB with bottom nav offset */
.fab-fixed.fab-above-nav {
  bottom: 5rem;
}

/* ----------------------------------------
   MENU PANEL (SIDEBAR DOCUMENTATION)
   ---------------------------------------- */

/* These classes document the existing sidebar structure */
.menu-panel {
  display: flex;
  flex-direction: column;
  width: 280px;
  height: 100%;
  background-color: var(--bbt-white);
  border-right: 1px solid var(--bbt-neutral-100, #e7e7e6);
}

.menu-panel-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bbt-neutral-100, #e7e7e6);
}

.menu-panel-logo {
  height: 2rem;
}

.menu-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.menu-panel-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--bbt-neutral-100, #e7e7e6);
}

/* User profile in menu panel */
.menu-panel-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.menu-panel-user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--bbt-neutral-100, #e7e7e6);
}

.menu-panel-user-info {
  flex: 1;
  min-width: 0;
}

.menu-panel-user-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bbt-text-default, #004854);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-panel-user-email {
  font-size: 0.75rem;
  color: var(--bbt-neutral-600, #575756);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
   APP BAR OVERRIDES
   ======================================== */

/* Base app bar */
.app-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: var(--bbt-white);
  border-bottom: 1px solid var(--bbt-neutral-100, #e7e7e6);
  min-height: 3.5rem;
}

/* App bar fixed positioning */
.app-bar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

/* App bar sticky positioning */
.app-bar-sticky {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* ----------------------------------------
   APP BAR BACK BUTTON
   ---------------------------------------- */

.app-bar-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--bbt-text-default, #004854);
  background-color: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease-in-out;
}

.app-bar-back:hover {
  background-color: var(--bbt-neutral-50, #f6f6f5);
}

.app-bar-back:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--bbt-primary-100, #e6f8fb);
}

.app-bar-back svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ----------------------------------------
   APP BAR CONTENT (Title area)
   ---------------------------------------- */

.app-bar-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* App bar title */
.app-bar-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bbt-text-default, #004854);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

/* App bar subtitle */
.app-bar-subtitle {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--bbt-neutral-600, #575756);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

/* ----------------------------------------
   APP BAR ACTIONS (Right side)
   ---------------------------------------- */

.app-bar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* App bar action button (icon button) */
.app-bar-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--bbt-primary, #007e93);
  background-color: transparent;
  border: 2px solid var(--bbt-primary, #007e93);
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
}

.app-bar-action:hover {
  background-color: var(--bbt-primary-100, #e6f8fb);
}

.app-bar-action:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--bbt-primary-100, #e6f8fb);
}

.app-bar-action svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Filled action button variant */
.app-bar-action.app-bar-action-filled {
  background-color: var(--bbt-primary-100, #e6f8fb);
  border-color: var(--bbt-primary-100, #e6f8fb);
}

.app-bar-action.app-bar-action-filled:hover {
  background-color: var(--bbt-primary, #007e93);
  border-color: var(--bbt-primary, #007e93);
  color: var(--bbt-white);
}

/* ----------------------------------------
   APP BAR VARIANTS
   ---------------------------------------- */

/* Transparent app bar (for overlaying content) */
.app-bar-transparent {
  background-color: transparent;
  border-bottom: none;
}

.app-bar-transparent .app-bar-back,
.app-bar-transparent .app-bar-title,
.app-bar-transparent .app-bar-action {
  color: var(--bbt-white);
}

.app-bar-transparent .app-bar-action {
  border-color: var(--bbt-white);
}

/* Elevated app bar (with shadow) */
.app-bar-elevated {
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Centered title variant */
.app-bar-centered .app-bar-content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.app-bar-centered {
  position: relative;
}

/* ----------------------------------------
   APP BAR SIZES
   ---------------------------------------- */

/* Compact app bar */
.app-bar-compact {
  padding: 0.5rem 1rem;
  min-height: 3rem;
}

.app-bar-compact .app-bar-back,
.app-bar-compact .app-bar-action {
  width: 2rem;
  height: 2rem;
}

.app-bar-compact .app-bar-back svg,
.app-bar-compact .app-bar-action svg {
  width: 1rem;
  height: 1rem;
}

.app-bar-compact .app-bar-title {
  font-size: 0.875rem;
}

/* Large app bar */
.app-bar-lg {
  padding: 1rem 1.25rem;
  min-height: 4rem;
}

.app-bar-lg .app-bar-back,
.app-bar-lg .app-bar-action {
  width: 3rem;
  height: 3rem;
}

.app-bar-lg .app-bar-title {
  font-size: 1.125rem;
}

/* ========================================
   MODAL OVERRIDES (BBT Design System)
   Ensures all dialogs use design tokens
   ======================================== */

.modal-content {
  background-color: var(--bbt-surface-white, #ffffff);
  color: var(--bbt-text-default, #004854);
}

.modal-header {
  border-bottom-color: var(--bbt-neutral-200, #d1d1d0);
}

.modal-footer {
  border-top-color: var(--bbt-neutral-200, #d1d1d0);
}

.modal-title {
  color: var(--bbt-text-default, #004854);
}

/* ========================================
   TOAST NOTIFICATION (BBT Design System)
   Reusable toast notification component
   ======================================== */

/* Toast container - positioned fixed */
.toast-container {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
}

/* Toast base styles */
.toast {
  pointer-events: auto;
  background-color: var(--bbt-success-100, #E8F5F0);
  border: none;
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  min-width: 350px;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-body {
  padding: 1rem 1.25rem;
}

/* Toast icon - circular with checkmark */
.toast-icon {
  width: 40px;
  height: 40px;
  background-color: var(--bs-success, #69FFB8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--bbt-white, #ffffff);
}

.toast-icon svg {
  color: var(--bbt-dark, #000000);
  stroke-width: 3;
}

/* Toast content */
.toast-content {
  flex: 1;
}

.toast-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bbt-dark, #000000);
  margin-bottom: 0.25rem;
}

.toast-message {
  font-size: 0.875rem;
  color: var(--bbt-dark, #000000);
  line-height: 1.4;
}

/* ----------------------------------------
   TOAST POSITIONING (Responsive)
   ---------------------------------------- */

/* Desktop (min-width: 992px) - Top right */
@media (min-width: 992px) {
  .toast-container {
    top: 1.5rem;
    right: 1.5rem;
  }
}

/* Mobile/Tablet (max-width: 991px) - Bottom full-width */
@media (max-width: 991px) {
  .toast-container {
    bottom: 1rem;
    left: 0;
    right: 0;
  }

  .toast {
    min-width: auto !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 1rem;
    border-radius: 16px;
  }

  .toast-body {
    padding: 0.875rem 1rem;
  }

  .toast-icon {
    width: 32px;
    height: 32px;
  }

  .toast-icon svg {
    width: 20px;
    height: 20px;
  }

  .toast-title {
    font-size: 0.875rem;
  }

  .toast-message {
    font-size: 0.8125rem;
  }
}