/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
    /*
        LEGACY
          --db-navy:    #0F172A;
          --db-navy2:   #1E293B;
          --db-navy3:   #334155;
          --db-teal:    #0D9488;
          --db-teal2:   #14B8A6;
          --db-teal3:   #CCFBF1;
          --db-teal4:   #F0FDFA;
          --db-amber:   #D97706;
          --db-amber2:  #FEF3C7;
          --db-amber3:  #FFFBEB;
          --db-red:     #DC2626;
          --db-red2:    #FEE2E2;
          --db-green:   #16A34A;
          --db-green2:  #DCFCE7;
          --db-blue:    #1D4ED8;
          --db-blue2:   #EFF6FF;
          --db-purple:  #7E22CE;
          --db-purple2: #FDF4FF;
          --db-grey1:   #F8FAFC;
          --db-grey2:   #E2E8F0;
          --db-grey3:   #94A3B8;
          --db-grey4:   #64748B;
          --db-grey5:   #475569;

    */
    /* ── 1a. RAW PALETTE ─────────────────────────────────────
     Override these variables to completely re-brand the app.
     All semantic tokens below derive from this small set.  */
    /* Dark surfaces */
    --navy: #0F172A; /* deepest dark – body text, nav, footer   */
    --navy-mid: #1E293B; /* elevated dark – banners, sidebar, cards  */
    --navy-edge: #334155; /* muted accent on dark surfaces            */
    /* Brand / primary */
    --brand: #0D9488; /* primary accent colour                    */
    --brand-bright: #14B8A6; /* lighter brand – hovers, active states    */
    --brand-pale: #CCFBF1; /* brand tint – soft backgrounds            */
    --brand-ghost: #F0FDFA; /* near-white brand wash                    */
    /* Solid .btn-primary when disabled — mixes from --brand + neutrals (retune by changing --brand only) */
    --brand-btn-disabled-bg: color-mix(in srgb, var(--brand) 44%, var(--grey-200));
    --brand-btn-disabled-border-color: color-mix(in srgb, var(--brand) 52%, var(--grey-200));
    /* .btn-outline-primary when disabled */
    --brand-outline-disabled-color: color-mix(in srgb, var(--grey-500) 50%, var(--brand));
    --brand-outline-disabled-border-color: color-mix(in srgb, var(--grey-200) 55%, var(--brand));
    /* Solid .btn-secondary (navy) when disabled */
    --navy-btn-disabled-bg: color-mix(in srgb, var(--navy) 36%, var(--grey-200));
    --navy-btn-disabled-border-color: color-mix(in srgb, var(--navy) 44%, var(--grey-200));
    /* State colours */
    --amber: #D97706;
    --amber-pale: #FEF3C7;
    --amber-ghost: #FFFBEB;
    --danger: #DC2626;
    --danger-pale: #FEE2E2;
    --success: #16A34A;
    --success-pale: #DCFCE7;
    --info: #1D4ED8;
    --info-pale: #EFF6FF;
    --purple: #7E22CE;
    --purple-pale: #FDF4FF;
    /* Neutral scale */
    --grey-50: #F8FAFC; /* page background, table headers           */
    --grey-200: #E2E8F0; /* borders, dividers, input borders         */
    --grey-400: #94A3B8; /* placeholder text, muted icons            */
    --grey-500: #64748B; /* secondary text, muted labels             */
    --grey-600: #475569; /* medium-emphasis text                     */
    /* ── 1b. SEMANTIC TOKENS ──────────────────────────────────
     These derive from the palette above.  Override here for
     fine-grained control without changing the raw palette.  */
    /* Typography */
    --font-serif: 'DM Serif Display', Georgia, serif;
    --font-sans: 'DM Sans', system-ui, sans-serif;
    /* Text roles */
    --text-primary: var(--navy);
    --text-secondary: var(--grey-600);
    --text-muted: var(--grey-500);
    --text-placeholder: var(--grey-400);
    --text-link: var(--brand);
    --text-link-hover: var(--brand-bright);
    --text-heading: var(--navy);
    --text-overline: var(--brand-bright); /* small-caps section labels    */
    /* Page / app surfaces */
    --surface-page: var(--grey-50); /* html/body background          */
    --surface-card: #fff; /* cards, panels, dropdowns      */
    --surface-input: #fff; /* form control backgrounds      */
    --surface-sunken: var(--grey-50); /* card footers, disabled inputs */
    /* Dark surfaces (nav, sidebar, footer, case banner) */
    --surface-dark: var(--navy);
    --surface-dark-mid: var(--navy-mid);
    --surface-dark-edge: var(--navy-edge);
    --surface-dark-border: rgba(255, 255, 255, 0.06);
    /* Borders */
    --border-color: var(--grey-200);
    --border-dark: rgba(255, 255, 255, 0.06);
    --border-focus: var(--brand);
    --border-radius-sm: 0.375rem; /*  6px */
    --border-radius: 0.75rem; /* 12px */
    --border-radius-lg: 1rem; /* 16px */
    --border-radius-pill: 9999px;
    /* Shadows */
    --shadow-sm: 0 1px 4px rgba(15, 23, 42, 0.06);
    --shadow: 0 2px 16px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 24px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 8px 40px rgba(15, 23, 42, 0.14);
    --shadow-brand: 0 4px 20px rgba(13, 148, 136, 0.18);
    /* Focus ring */
    --focus-ring: rgba(13, 148, 136, 0.25);
    /* Navigation */
    --nav-bg: var(--surface-dark);
    --nav-link: var(--grey-400);
    --nav-link-hover: var(--brand-bright);
    --nav-link-active: var(--brand-bright);
    --nav-brand: #fff;
    /* Page banners & case headers */
    --banner-bg: var(--surface-dark-mid);
    --banner-border: var(--surface-dark-border);
    --banner-title: #fff;
    --banner-overline: var(--brand-bright);
    --banner-subtitle: var(--grey-500);
    /* Sidebar */
    --sidebar-bg: var(--surface-dark-mid);
    --sidebar-border: var(--surface-dark-border);
    --sidebar-link: var(--grey-500);
    --sidebar-link-hover: var(--grey-400);
    --sidebar-link-active: var(--brand-bright);
    --sidebar-active-bg: rgba(20, 184, 166, 0.06);
    --sidebar-label: var(--navy-edge);
    /* Footer */
    --footer-bg: var(--surface-dark);
    --footer-border: var(--navy-edge);
    --footer-text: var(--grey-500);
    /* Forms */
    --input-bg: var(--surface-input);
    --input-border: var(--border-color);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-placeholder);
    --input-focus-border: var(--border-focus);
    --input-focus-ring: rgba(13, 148, 136, 0.10);
    --input-disabled-bg: var(--surface-sunken);
    --input-disabled-text: var(--grey-400);
    /* Cards */
    --card-bg: var(--surface-card);
    --card-border: var(--border-color);
    --card-header-bg: var(--surface-card);
    --card-footer-bg: var(--surface-sunken);
    --card-hover-border: var(--brand-bright);
    /* Chat widget */
    --chat-header-bg: var(--brand);
    --chat-fab-bg: var(--brand);
    --chat-fab-hover: var(--brand-bright);
    --chat-msgs-bg: #FAFCFF;
    /* ── 1c. BOOTSTRAP REMAPPING ─────────────────────────────
     Maps Bootstrap's own CSS variables to our tokens so all
     native BS components inherit the brand automatically.  */
    --bs-primary: var(--brand);
    --bs-primary-rgb: 13, 148, 136;
    --bs-secondary: var(--navy);
    --bs-secondary-rgb: 15, 23, 42;
    --bs-success: var(--success);
    --bs-success-rgb: 22, 163, 74;
    --bs-danger: var(--danger);
    --bs-danger-rgb: 220, 38, 38;
    --bs-warning: var(--amber);
    --bs-warning-rgb: 217, 119, 6;
    --bs-info: var(--info);
    --bs-info-rgb: 29, 78, 216;
    --bs-light: var(--grey-50);
    --bs-light-rgb: 248, 250, 252;
    --bs-dark: var(--navy);
    --bs-dark-rgb: 15, 23, 42;
    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--surface-page);
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: 0.875rem; /* 14px */
    --bs-border-color: var(--border-color);
    --bs-border-radius: var(--border-radius);
    --bs-border-radius-sm: var(--border-radius-sm);
    --bs-border-radius-lg: var(--border-radius-lg);
    --bs-border-radius-pill: var(--border-radius-pill);
    --bs-link-color: var(--text-link);
    --bs-link-hover-color: var(--text-link-hover);
    --bs-focus-ring-color: var(--focus-ring);
    --white: #FFFFFF;
    --teal: #0D9488;
    --teal2: var(--brand-bright);
    --teal3: var(--brand-pale);
    --teal4: var(--brand-ghost);
    --grey1: var(--grey-50);
    --grey2: var(--grey-200);
    --grey3: var(--grey-400);
    --grey4: var(--grey-500);
    --grey5: var(--grey-600);
}

/* ── 2. BASE / RESET ──────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--navy);
  background: var(--grey-50);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  color: var(--brand-bright);
}

/* ── 3. TYPOGRAPHY ────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-serif);
  color: var(--navy);
  line-height: 1.2;
}

h1, .h1 { font-size: 2.25rem;  line-height: 1.15; }
h2, .h2 { font-size: 1.75rem;  line-height: 1.2;  }
h3, .h3 { font-size: 1.375rem; line-height: 1.25; }
h4, .h4 { font-size: 1.125rem; line-height: 1.3;  }
h5, .h5 { font-size: 0.9375rem;line-height: 1.35; }
h6, .h6 { font-size: 0.8125rem;line-height: 1.4;  }

.display-1, .display-2, .display-3, .display-4,
.display-5, .display-6 {
  font-family: var(--font-serif);
  color: var(--navy);
}

.lead {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--grey-600);
  font-weight: 400;
}

small, .small { color: var(--grey-500); }

.text-muted { color: var(--grey-500) !important; }

/* ── 4. BUTTONS ───────────────────────────────────────────── */
.btn {
  font-family: var(--font-sans);
  font-size: 0.84375rem;   /* 13.5px */
  font-weight: 600;
  line-height: 1;
  padding: 0.5625rem 1.125rem; /* 9px 18px */
  border-radius: 6px;
  border-width: 1.5px;
  transition: all 0.15s ease;
}
.btn:active {
  transform: scale(0.97);
}
.btn-sm {
  font-size: 0.78125rem;
  padding: 0.375rem 0.8125rem;
  border-radius: 6px;
}
.btn-lg {
  font-size: 0.9375rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
}

/* Primary → teal (Bootstrap btn variables + brand-derived disabled) */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-bright);
  --bs-btn-hover-border-color: var(--brand-bright);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand-btn-disabled-bg);
  --bs-btn-disabled-border-color: var(--brand-btn-disabled-border-color);
  /* Avoid stacking Bootstrap’s default 0.65 opacity on top of muted disabled colors */
  --bs-btn-disabled-opacity: 1;
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
  box-shadow: var(--shadow-brand);
}
.btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--bs-btn-active-bg) !important;
  border-color: var(--bs-btn-active-border-color) !important;
  color: var(--bs-btn-active-color) !important;
}
.btn-primary:disabled,
.btn-primary.disabled,
fieldset:disabled .btn-primary {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}

/* Secondary → navy */
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--navy);
  --bs-btn-border-color: var(--navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--navy-mid);
  --bs-btn-hover-border-color: var(--navy-mid);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--navy);
  --bs-btn-active-border-color: var(--navy);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--navy-btn-disabled-bg);
  --bs-btn-disabled-border-color: var(--navy-btn-disabled-border-color);
  --bs-btn-disabled-opacity: 1;
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}
.btn-secondary:active, .btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
  background-color: var(--bs-btn-active-bg) !important;
  border-color: var(--bs-btn-active-border-color) !important;
  color: var(--bs-btn-active-color) !important;
}
.btn-secondary:disabled,
.btn-secondary.disabled,
fieldset:disabled .btn-secondary {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}

/* Outline primary */
.btn-outline-primary {
  color: var(--navy);
  border-color: var(--grey-200);
  background: transparent;
}
.btn-outline-primary:hover {
  background-color: var(--brand-ghost);
  border-color: var(--brand-bright);
  color: var(--brand);
}
.btn-outline-primary:disabled,
.btn-outline-primary.disabled,
fieldset:disabled .btn-outline-primary {
  color: var(--brand-outline-disabled-color);
  border-color: var(--brand-outline-disabled-border-color);
  background-color: transparent;
  opacity: 1;
}

/* Outline secondary */
.btn-outline-secondary {
  color: var(--grey-500);
  border-color: var(--grey-200);
  background: transparent;
}
.btn-outline-secondary:hover {
  background-color: var(--grey-200);
  border-color: var(--grey-200);
  color: var(--navy);
}

/* Danger */
.btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

/* Warning → amber */
.btn-warning {
  background-color: var(--amber-pale);
  border-color: rgba(217,119,6,.25);
  color: var(--amber);
}
.btn-warning:hover {
  background-color: #FDE68A;
  color: var(--amber);
}

/* Light */
.btn-light {
  background-color: white;
  border-color: var(--grey-50);
  color: var(--navy-edge);
}
.btn-light:hover {
  background-color: var(--grey-200);
  color: var(--navy);
}

/* Success */
.btn-success {
  background-color: var(--success);
  border-color: var(--success);
}

/* Focus ring for all buttons */
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(13,148,136,0.25);
}

/* ── 5. FORMS ─────────────────────────────────────────────── */
.form-control, .form-select {
  font-family: var(--font-sans);
  font-size: 0.84375rem;
  color: var(--input-text);
  background-color: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: 6px;
  padding: 0.5625rem 0.8125rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control::placeholder { color: var(--input-placeholder); }
.form-control:hover, .form-select:hover { border-color: #CBD5E1; }
.form-control:focus, .form-select:focus {
  border-color: var(--input-focus-border);
  background-color: var(--input-bg);
  box-shadow: 0 0 0 3px rgba(13,148,136,0.1);
  color: var(--navy);
}
.form-control:disabled, .form-select:disabled {
  background-color: var(--input-disabled-bg);
  color: var(--input-disabled-text);
}
.form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--danger);
  background-color: #FFF8F8;
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
}
.form-control.is-valid { border-color: var(--success); }

.form-label {
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
.form-text {
  font-size: 0.71875rem;
  color: var(--grey-400);
}
.invalid-feedback { font-size: 0.71875rem; color: var(--danger); }
.valid-feedback   { font-size: 0.71875rem; color: var(--success); }

/* Form control sizes */
.form-control-sm { font-size: 0.78125rem; padding: 0.375rem 0.625rem; border-radius: 5px; }
.form-control-lg { font-size: 0.90625rem; padding: 0.6875rem 1rem;    border-radius: 8px; }

/* Checkbox / Radio */
.form-check-input {
  width: 1.0625rem;
  height: 1.0625rem;
  border: 1.5px solid var(--grey-200);
  background-color: #fff;
  transition: all 0.15s ease;
  cursor: pointer;
}
.form-check-input:hover { border-color: var(--brand-bright); }
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
  border-color: var(--brand);
}
.form-check-input[type="radio"]:checked {
  background-color: #fff;
  border-color: var(--brand);
  box-shadow: inset 0 0 0 4px var(--brand);
}
.form-check-label {
  font-size: 0.84375rem;
  color: var(--navy);
}

/* Switch */
.form-check.form-switch {
  display: flex;
  align-items: center;
  min-height: 1.375rem;
  padding-left: 0;
}
.form-check.form-switch .form-check-input {
  flex-shrink: 0;
  width: 2.5rem;
  height: 1.375rem;
  margin-left: 0;
  background-color: var(--grey-200);
  border-color: var(--grey-200);
}
.form-check.form-switch .form-check-label {
  margin-bottom: 0;
  margin-left: 0.5rem;
}
.form-switch .form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

/* Range */
.form-range::-webkit-slider-thumb {
  background: var(--brand);
  box-shadow: 0 1px 4px rgba(13,148,136,0.3);
}
.form-range::-webkit-slider-runnable-track { background: var(--grey-200); }

/* Input group */
.input-group-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--grey-500);
  background-color: var(--grey-50);
  border: 1.5px solid var(--grey-200);
}

/* Floating labels */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--brand);
}

/* ── 6. CARDS ─────────────────────────────────────────────── */
.card {
  background-color: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 0.75rem;
  box-shadow: none;
  overflow: hidden;
}
.card-header {
  padding: 0.875rem 1.125rem;
  background-color: var(--card-header-bg);
  border-bottom: 1px solid var(--card-border);
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--navy);
}
.card-body { padding: 1.125rem; }
.card-footer {
  padding: 0.75rem 1.125rem;
  background-color: var(--card-footer-bg);
  border-top: 1px solid var(--card-border);
}
.card-title {
  font-family: var(--font-serif);
  color: var(--navy);
}
.card-subtitle { color: var(--grey-400); }
.card-text     { color: var(--navy); }

/* Hoverable card */
.card.card-hover {
  cursor: pointer;
  transition: all 0.15s ease;
}
.card.card-hover:hover {
  border-color: var(--brand-bright);
  box-shadow: 0 4px 20px rgba(13,148,136,0.1);
  transform: translateY(-1px);
}

/* ── 7. NAVBAR ────────────────────────────────────────────── */
.navbar {
  background-color: var(--nav-bg);
  padding: 0 2rem;
  min-height: 54px;
}
@media (max-width: 991.98px) {
  .navbar .container-fluid,
  .navbar .container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 54px auto;
    align-items: center;
    gap: 0;
  }
  .navbar .navbar-brand {
    grid-row: 1;
    grid-column: 1;
  }
  .navbar .navbar-toggler {
    grid-row: 1;
    grid-column: 2;
  }
  .navbar .navbar-collapse {
    grid-row: 2;
    grid-column: 1 / -1;
    align-self: start;
    width: 100%;
  }
}
.navbar-brand {
  font-family: var(--font-serif);
  color: var(--nav-brand) !important;
  font-size: 1.125rem;
}
.navbar .navbar-nav .nav-link {
  color: var(--nav-link);
  font-size: 0.84375rem;
  font-weight: 500;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
  color: var(--nav-link-hover);
}
.navbar .navbar-nav .nav-link.active {
  color: var(--nav-link-active);
}
.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2820%2C184%2C166%2C1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── 8. NAV / TABS ────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--grey-200);
}
.nav-tabs .nav-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--grey-500);
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 0.625rem 1.125rem 0.6875rem;
  margin-bottom: -1px;
  transition: all 0.15s ease;
  border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--grey-600); background: none; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--navy);
  border-bottom-color: var(--brand-bright);
  background: none;
  border-top: none; border-left: none; border-right: none;
}

/* Pill nav */
.nav-pills {
  background: var(--grey-200);
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
}
.nav-pills .nav-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--grey-500);
  border-radius: 5px;
  padding: 0.4375rem 1rem;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #fff;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

/* ── 9. BADGES ────────────────────────────────────────────── */
.badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  padding: 0.125rem 0.4375rem;
  border-radius: 4px;
}

.bg-primary   { background-color: var(--brand)   !important; }
.bg-secondary { background-color: var(--navy)   !important; }
.bg-success   { background-color: var(--success)  !important; }
.bg-danger    { background-color: var(--danger)    !important; }
.bg-warning   { background-color: var(--amber)  !important; color: #fff !important; }
.bg-info      { background-color: var(--info)   !important; }
.bg-light     { background-color: var(--grey-50)  !important; color: var(--navy-edge) !important; }
.bg-dark      { background-color: var(--navy)   !important; }

/* Soft/tinted badge variants (use text-bg-* in BS5) */
.text-bg-primary   { background-color: var(--brand-pale)   !important; color: var(--brand)   !important; }
.text-bg-secondary { background-color: var(--navy-mid)   !important; color: var(--grey-400)  !important; }
.text-bg-success   { background-color: var(--success-pale)  !important; color: var(--success)  !important; }
.text-bg-danger    { background-color: var(--danger-pale)    !important; color: var(--danger)    !important; }
.text-bg-warning   { background-color: var(--amber-pale)  !important; color: var(--amber)  !important; }
.text-bg-info      { background-color: var(--info-pale)   !important; color: var(--info)   !important; }
.text-bg-light     { background-color: var(--grey-50)   !important; color: var(--navy-edge)  !important; }

/* Pill shape badges */
.rounded-pill { border-radius: 9999px; }

/* ── 10. ALERTS ───────────────────────────────────────────── */
.alert {
  font-size: 0.84375rem;
  line-height: 1.5;
  border-radius: 6px;
  border-width: 1px;
  padding: 0.8125rem 1rem;
}
.alert-primary   { background: var(--brand-pale);  border-color: rgba(13,148,136,0.3);  color: #134e4a; }
.alert-secondary { background: var(--navy);   border-color: rgba(255,255,255,0.06);color: #94A3B8; }
.alert-success   { background: var(--success-pale); border-color: rgba(22,163,74,0.25);  color: #14532d; }
.alert-danger    { background: var(--danger-pale);   border-color: rgba(220,38,38,0.3);   color: #7f1d1d; }
.alert-warning   { background: var(--amber-pale); border-color: rgba(217,119,6,0.3);   color: #78350f; }
.alert-info      { background: var(--info-pale);  border-color: rgba(29,78,216,0.2);   color: #1e3a8a; }
.alert-light     { background: var(--grey-50);  border-color: var(--grey-200);       color: var(--navy-edge); }
.alert-dark      { background: var(--navy);   border-color: rgba(255,255,255,0.06);color: #94A3B8; }

.alert-heading {
  font-family: var(--font-serif);
}
.btn-close { opacity: 0.5; }
.btn-close:hover { opacity: 1; }

/* ── 11. MODALS ───────────────────────────────────────────── */
.modal-content {
  border: none;
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-header {
  padding: 1.25rem 1.5rem 1.125rem;
  border-bottom: 1px solid var(--grey-200);
}
.modal-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--navy);
}
.modal-body { padding: 1.5rem; }
.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--grey-200);
  background: var(--grey-50);
}
.modal-backdrop.show { opacity: 0.6; }

/* ── 12. DROPDOWNS ────────────────────────────────────────── */
.dropdown-menu {
  border: 1.5px solid var(--grey-200);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-md);
  padding: 0.25rem 0;
  font-size: 0.84375rem;
  background-color: #fff;
  min-width: 12.5rem;
}
.dropdown-item {
  color: var(--navy);
  padding: 0.5625rem 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--grey-50);
  color: var(--navy);
}
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--brand-pale);
  color: var(--brand);
}
.dropdown-item.text-danger:hover { background-color: var(--danger-pale); }
.dropdown-divider { border-color: var(--grey-200); margin: 0.25rem 0; }
.dropdown-header {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color: var(--grey-400);
  padding: 0.375rem 0.875rem 0.25rem;
}

/* ── 13. TABLES ───────────────────────────────────────────── */
.table {
  font-size: 0.84375rem;
  color: var(--navy);
  --bs-table-bg: #fff;
  --bs-table-hover-bg: var(--grey-50);
  --bs-table-striped-bg: var(--grey-50);
  --bs-table-border-color: var(--grey-200);
}
.table thead th {
  font-size: 0.65625rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--grey-400);
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  padding: 0.6875rem 1rem;
  white-space: nowrap;
}
.table td {
  padding: 0.8125rem 1rem;
  border-color: var(--grey-200);
  vertical-align: middle;
}
.table-bordered, .table-bordered > :not(caption) > * > * {
  border-color: var(--grey-200);
}
.table-hover > tbody > tr:hover > * { background-color: var(--grey-50); }

/* Wrap tables with .table-container for the rounded border look */
.table-container {
  overflow-x: auto;
  border-radius: 0.75rem;
  border: 1.5px solid var(--grey-200);
}
.table-container .table { margin-bottom: 0; }
.table-container .table td:first-child,
.table-container .table th:first-child { padding-left: 1.25rem; }

/* ── 14. TOOLTIPS ─────────────────────────────────────────── */
.tooltip-inner {
  background-color: var(--navy);
  font-family: var(--font-sans);
  font-size: 0.71875rem;
  padding: 0.3125rem 0.625rem;
  border-radius: 6px;
}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--navy);
}
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--navy);
}
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: var(--navy);
}
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--navy);
}

/* ── 15. POPOVERS ─────────────────────────────────────────── */
.popover {
  border: 1.5px solid var(--grey-200);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
  font-size: 0.84375rem;
}
.popover-header {
  font-family: var(--font-serif);
  background-color: var(--grey-50);
  border-bottom-color: var(--grey-200);
  color: var(--navy);
}
.popover-body { color: var(--navy); }

/* ── 16. PROGRESS ─────────────────────────────────────────── */
.progress {
  height: 6px;
  background-color: var(--grey-200);
  border-radius: 9999px;
}
.progress-bar {
  background-color: var(--brand);
  border-radius: 9999px;
}
.progress-bar.bg-warning { background-color: var(--amber) !important; }
.progress-bar.bg-danger  { background-color: var(--danger)   !important; }
.progress-bar.bg-success { background-color: var(--success) !important; }

/* ── 17. SPINNERS ─────────────────────────────────────────── */
.spinner-border {
  border-color: var(--grey-200);
  border-right-color: var(--brand);
}
.spinner-border.text-primary { border-right-color: var(--brand); }
.spinner-grow  { background-color: var(--brand); }

/* ── 18. OFFCANVAS ────────────────────────────────────────── */
.offcanvas {
  background-color: var(--navy-mid);
  border-color: rgba(255,255,255,0.06);
}
.offcanvas-header {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #fff;
}
.offcanvas-title {
  font-family: var(--font-serif);
  color: #fff;
}
.offcanvas-body { color: var(--grey-400); }

/* ── 19. ACCORDION ────────────────────────────────────────── */
.accordion-item {
  border: 1.5px solid var(--grey-200);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 6px;
}
.accordion-button {
  font-family: var(--font-sans);
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--navy);
  background-color: #fff;
}
.accordion-button:not(.collapsed) {
  color: var(--brand);
  background-color: var(--brand-ghost);
  box-shadow: none;
}
.accordion-button::after {
  filter: none;
}
.accordion-button:not(.collapsed)::after {
  filter: invert(48%) sepia(80%) saturate(413%) hue-rotate(138deg) brightness(97%) contrast(89%);
}
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(13,148,136,0.15); }
.accordion-body {
  font-size: 0.84375rem;
  color: var(--navy);
  border-top: 1px solid var(--grey-200);
}

/* ── 20. LIST GROUP ───────────────────────────────────────── */
.list-group-item {
  border-color: var(--grey-200);
  font-size: 0.84375rem;
  color: var(--navy);
  padding: 0.75rem 1rem;
}
.list-group-item.active {
  background-color: var(--brand);
  border-color: var(--brand);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--grey-50);
  color: var(--navy);
}

/* ── 21. PAGINATION ───────────────────────────────────────── */
.page-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--navy);
  border-color: var(--grey-200);
  padding: 0.375rem 0.75rem;
}
.page-link:hover {
  color: var(--brand);
  background-color: var(--brand-ghost);
  border-color: var(--brand-bright);
}
.page-item.active .page-link {
  background-color: var(--brand);
  border-color: var(--brand);
}
.page-item.disabled .page-link { color: var(--grey-400); }

/* ── 22. BREADCRUMBS ──────────────────────────────────────── */
.breadcrumb-item {
  font-size: 0.78125rem;
  color: var(--grey-500);
}
.breadcrumb-item a {
  color: var(--brand);
  font-weight: 500;
}
.breadcrumb-item.active { color: var(--navy); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--grey-400); }

/* ── 23. TOASTS ───────────────────────────────────────────── */
.toast {
  border: 1.5px solid var(--grey-200);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
  font-size: 0.84375rem;
  background-color: #fff;
}
.toast-header {
  background-color: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  font-weight: 600;
  color: var(--navy);
}

/* ── 24. SIDEBAR (custom .sidebar class) ─────────────────── */
.sidebar {
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
}
.sidebar .nav-link {
  font-size: 0.78125rem;
  color: var(--sidebar-link);
  padding: 0.5rem 1rem;
  border-left: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.12s, color 0.12s;
  border-radius: 0;
}
.sidebar .nav-link:hover {
  color: var(--sidebar-link-hover);
  background: rgba(255,255,255,0.03);
}
.sidebar .nav-link.active {
  color: var(--sidebar-link-active);
  border-left-color: var(--sidebar-link-active);
  background: var(--sidebar-active-bg);
}
.sidebar-section-label {
  font-size: 0.59375rem;
  font-weight: 700;
  letter-spacing: 0.08125rem;
  text-transform: uppercase;
  color: var(--sidebar-label);
  padding: 0.5rem 1rem 0.25rem;
  margin-top: 0.5rem;
}

/* ── 25. UTILITY OVERRIDES ────────────────────────────────── */

/* Colors */
.text-primary   { color: var(--brand)   !important; }
.text-secondary { color: var(--grey-500)  !important; }
.text-success   { color: var(--success)  !important; }
.text-danger    { color: var(--danger)    !important; }
.text-warning   { color: var(--amber)  !important; }
.text-info      { color: var(--info)   !important; }
.text-light     { color: var(--grey-400)  !important; }
.text-dark      { color: var(--navy)   !important; }
.text-muted     { color: var(--grey-500)  !important; }

/* Borders */
.border         { border-color: var(--grey-200) !important; }
.border-primary { border-color: var(--brand)  !important; }
.border-success { border-color: var(--success) !important; }
.border-danger  { border-color: var(--danger)   !important; }
.border-warning { border-color: var(--amber) !important; }

/* Rounded */
.rounded    { border-radius: 0.75rem  !important; }
.rounded-sm { border-radius: 0.375rem !important; }
.rounded-lg { border-radius: 1rem     !important; }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow    { box-shadow: var(--shadow)    !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* ── 26. FOCUS-VISIBLE GLOBAL ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 2px;
}



.teal-dot {
    width: 8px;
    height: 8px;
    background: var(--teal2);
    border-radius: 50%;
    animation: pulse 2.5s infinite;
    display:inline-block;
}

@keyframes pulse {
    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.75);
    }
}

/* Hide on phones */
.hide-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: initial !important;
    }
}

/* Hide on tablets/desktops */
.hide-desktop {
    display: initial !important;
}

@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
}