/* ======================================================
   styles.min2.css — Bootstrap SAS Theme (Overrides Only)
   Palette: ON = SAS Blue #007CC3 (rgb(0,124,195))
            OFF = SAS Gray #4D4F53 (rgb(77,79,83))
   Load this AFTER bootstrap.min.css
   ====================================================== */

/* ---------- TOKENS (single source of truth) ---------- */
:root{
  /* Brand */
  --sas-blue:#007CC3;
  --sas-blue-hover:#006AA3;
  --sas-blue-50:#F3F9FD;

  --sas-gray:#4D4F53;
  --sas-gray-hover:#3E4043;

  --sas-bg-blue:       #042954;
  
  --sas-orange:     #FF8225;
  --sas-light-blue: #6AABFB;
  --sas-pink:       #DE1680;

  --sas-pink-focus: #B9126B;
  --sas-orange-focus: #EB7822;

  --sas-blue-dark: #003F69;          /* SAS Dark Blue */
  --sas-blue-dark-hover: #002E4E;    /* a hair darker for hover */
  /* Bootstrap mappings */
  --bs-primary:var(--sas-blue);
  --bs-primary-rgb:0,124,195;
  --bs-secondary:var(--sas-gray);
  --bs-secondary-rgb:77,79,83;
  --bs-link-color:var(--sas-blue);
  --bs-link-hover-color:var(--sas-blue-hover);

  /* Surfaces / text */
  --bg-main:#f5f6f8;
  --bg-card:#ffffff;
  --bg-dark:#1f2125;
  --bg-dark-card:#292c31;

  --text-main:#2b3036;
  --text-light:#e6e6e6;

  /* Tints derived only from SAS Blue */
  --blue-tint-04:rgba(0,124,195,.04);
  --blue-tint-08:rgba(0,124,195,.08);
  --blue-tint-12:rgba(0,124,195,.12);
  --blue-tint-16:rgba(0,124,195,.16);

  --page-max: 1150px;                       /* match your content width */
  --bar-max: 1800px;                        /* cap for the blue bar */
  --side-gap: clamp(12px, 3.5vw, 24px);     /* gutters that grow/shrink */
  --top-gap: .75rem;                        /* distance from viewport top */
  --bar-radius: clamp(.5rem, 2vw, 1rem);   
}


.body-wrapper{ width:100%; }
.body-wrapper-inner{
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--side-gap);
}

/* stays near the top while scrolling */
.app-header{
  position: sticky;
  top: var(--top-gap);
  z-index: 1030;
}

/* the rounded blue bar */
.app-topstrip{
  width: min(calc(100% - 2*var(--side-gap)), var(--bar-max));
  margin: 0 auto;                           /* centered on all screens */
  border-radius: var(--bar-radius);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* dark SAS blue */
.app-topstrip.bg-primary{
  background: linear-gradient(135deg,  var(--sas-blue-dark-hover), var(--sas-bg-blue));
  color:#fff;
}

/* keep the content inside aligned to your page width */
.app-topstrip__inner{
  max-width: var(--page-max);
  margin-inline: auto;
  padding: .75rem var(--side-gap);
}

/* small polish */
.app-topstrip .btn{ border-radius: 999px; }
.app-topstrip img{ max-height: clamp(28px, 4vw, 40px); height:auto; }


/* ---------- BASE ---------- */
html,body{height:100%}
body{
  background-color:var(--bg-main);
  color:var(--text-main);
  font-family:"Inter","Segoe UI",system-ui,Roboto,Arial,sans-serif;
}

/* Cards */
.dashboard-card{
  border-radius:1rem;
  border:0;
  background-color:var(--bg-card);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Dark theme */
[data-theme="dark"] body{background-color:var(--bg-dark);color:var(--text-light)}
[data-theme="dark"] .dashboard-card{background-color:var(--bg-dark-card);box-shadow:0 6px 16px rgba(0,0,0,.5)}

/* ---------- LINKS ---------- */
a{color:var(--sas-blue)}
a:hover{color:var(--sas-blue-hover)}
[data-theme="dark"] a{color:var(--sas-blue)}
[data-theme="dark"] a:hover{color:var(--sas-blue-hover)}

/* ---------- BUTTONS (ON Blue / OFF Gray) ---------- */
/* Primary (ON) */
.btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--sas-blue);
  --bs-btn-border-color:var(--sas-blue);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--sas-blue-hover);
  --bs-btn-hover-border-color:var(--sas-blue-hover);
  --bs-btn-focus-shadow-rgb:0,124,195;
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--sas-blue-hover);
  --bs-btn-active-border-color:var(--sas-blue-hover);
}

/* Secondary / Neutral (OFF) */
.btn-secondary,.btn-neutral{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--sas-pink);
  --bs-btn-border-color:var(--sas-pink);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--sas-pink-focus);
  --bs-btn-hover-border-color:var(--sas-pink-focus);
  --bs-btn-focus-shadow-rgb:0,124,195;
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--sas-pink-focus);
  --bs-btn-active-border-color:var(--sas-pink-focus);
}

.btn-third,.btn-neutral{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--sas-orange);
  --bs-btn-border-color:var(--sas-orange);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--sas-orange-focus);
  --bs-btn-hover-border-color:var(--sas-orange-focus);
  --bs-btn-focus-shadow-rgb:77,79,83;
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--sas-orange-focus);
  --bs-btn-active-border-color:var(--sas-orange-focus);
}


/* Outline variants aligned to palette */
.btn-outline-primary{
  color:var(--sas-blue);
  border-color:var(--sas-blue);
  background-color:transparent;
}
.btn-outline-primary:hover,.btn-outline-primary:focus{
  color:#fff;background-color:var(--sas-blue);border-color:var(--sas-blue);
}
.btn-outline-secondary{
  color:#fff;border-color:var(--sas-pink);background-color:transparent;
}
.btn-outline-secondary:hover,.btn-outline-secondary:focus{
  color:#fff;background-color:var(--sas-gray-hover);border-color:var(--sas-gray-hover);
}

/* Palette shim: map legacy semantic colors to Blue/Gray so older markup still looks right */
.btn-success,
.btn-warning{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--sas-blue);
  --bs-btn-border-color:var(--sas-blue);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--sas-blue-hover);
  --bs-btn-hover-border-color:var(--sas-blue-hover);
}
.btn-danger{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--sas-gray);
  --bs-btn-border-color:var(--sas-gray);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--sas-gray-hover);
  --bs-btn-hover-border-color:var(--sas-gray-hover);
}

/* Toggle: OFF gray → ON blue when active */
.btn-toggle{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--sas-gray);
  --bs-btn-border-color:var(--sas-gray);
  --bs-btn-hover-bg:var(--sas-gray-hover);
  --bs-btn-hover-border-color:var(--sas-gray-hover);
  --bs-btn-focus-shadow-rgb:77,79,83;
  --bs-btn-active-bg:var(--sas-gray-hover);
  --bs-btn-active-border-color:var(--sas-gray-hover);
}
.btn-toggle.active,
.btn-toggle[aria-pressed="true"],
.btn-toggle.is-on{
  --bs-btn-bg:var(--sas-blue);
  --bs-btn-border-color:var(--sas-blue);
  --bs-btn-hover-bg:var(--sas-blue-hover);
  --bs-btn-hover-border-color:var(--sas-blue-hover);
  --bs-btn-focus-shadow-rgb:0,124,195;
  --bs-btn-active-bg:var(--sas-blue-hover);
  --bs-btn-active-border-color:var(--sas-blue-hover);
  --bs-btn-color:#fff;
}

/* Focus visibility */
:where(a,button,.btn):focus-visible{
  outline:2px solid var(--sas-blue);
  outline-offset:2px;
}

/* ---------- TABLES (scroll + blue/gray only) ---------- */
.tx-table-wrap {
  max-height: 60vh;
  min-height: 240px;
  overflow: hidden;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  border-radius: .5rem;
}

.tx-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.tx-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sas-blue-20);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}
.tx-table td.text-truncate,
.tx-table th.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-table.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--blue-tint-04); }
.tx-table.table-hover  > tbody > tr:hover { background-color: var(--blue-tint-08); }
.tx-table tr.is-selected,
.tx-table tr[aria-selected="true"],
.tx-table tbody tr:has(.row-select:checked) { background-color: var(--blue-tint-16); }
.tx-table .transaction-row.is-fraud {
  background-color: rgba(0,124,195,.12);
  box-shadow: inset 4px 0 0 var(--sas-blue);
}
.tx-table.table-hover > tbody > .transaction-row.is-fraud:hover { background-color: rgba(0,124,195,.16); }


/* =========================
   TX TABLE – BLUE ON TOGGLE
   Scoped to .tx-table so the Actions card (first image) stays unchanged
   ========================= */

/* Fraud action button: default = blue outline, filled blue when pressed */
.tx-table .toggle-fraud-btn {
  border-color: var(--sas-blue) !important;
  color: var(--sas-blue) !important;
  background: transparent !important;
  border-radius: 999px;
  padding: .25rem .6rem;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}

/* Hover/focus keeps it blue */
.tx-table .toggle-fraud-btn:hover,
.tx-table .toggle-fraud-btn:focus {
  background: var(--sas-blue) !important;
  color: #fff !important;
  border-color: var(--sas-blue) !important;
}

/* When “clicked” (your JS sets aria-pressed="true"): make it solid blue */
.tx-table .toggle-fraud-btn[aria-pressed="true"] {
  background: var(--sas-blue) !important;
  color: #fff !important;
  border-color: var(--sas-blue) !important;
}

/* If your backend still emits Bootstrap’s outline classes, neutralize to blue here (table-only) */
.tx-table .toggle-fraud-btn.btn-outline-danger,
.tx-table .toggle-fraud-btn.btn-outline-secondary {
  border-color: var(--sas-blue) !important;
  color: var(--sas-blue) !important;
  background: transparent !important;
}

/* Optional: disabled state — keep outline blue but muted */
.tx-table .toggle-fraud-btn:disabled,
.tx-table .toggle-fraud-btn.disabled {
  opacity: .55;
  background: transparent !important;
  color: var(--sas-blue) !important;
  border-color: var(--sas-blue) !important;
}

/* =========================
   Status badge: FRAUD → blue (remap bg-danger in table only)
   ========================= */
.tx-table .badge.bg-danger {
  background-color: var(--sas-blue) !important;
  color: #fff !important;
  border-color: var(--sas-blue) !important;
}

/* Keep non-fraud (approved, etc.) as gray */
.tx-table .badge.bg-secondary {
  background-color: var(--sas-gray) !important;
  color: #fff !important;
}

/* ON = blue */
.badge.bg-whitelist{
  background-color: var(--sas-light-blue) !important;
  border-color: var(--sas-light-blue) !important;
  color:#fff !important;
}

.badge.bg-block{
  background-color: var(--sas-pink) !important;
  border-color: var(--sas-pink) !important;
  color:#fff !important;
}

.badge.bg-reset{
  background-color: var(--sas-orange) !important;
  border-color: var(--sas-orange) !important;
  color:#fff !important;
}


/* OFF = black */
.badge.bg-secondary{
  background-color: var(--sas-gray) !important;
  border-color:#000 !important;
  color:#fff !important;
}

/* =========================
   Row highlight when flagged (blue tint)
   ========================= */
.tx-table .transaction-row.is-fraud {
  background-color: rgba(0,124,195,.12);
  box-shadow: inset 4px 0 0 var(--sas-blue);
}
.tx-table.table-hover > tbody > .transaction-row.is-fraud:hover {
  background-color: rgba(0,124,195,.16);
}
/* In the TX table: Make "Mark Fraud" blue, "Mark Not Fraud" gray */
.tx-table .toggle-fraud-btn.btn-outline-danger{
  --bs-btn-color: var(--sas-blue) !important;
  --bs-btn-border-color: var(--sas-blue) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: var(--sas-blue) !important;
  --bs-btn-hover-border-color: var(--sas-blue) !important;
}

.tx-table .toggle-fraud-btn.btn-outline-secondary{
  --bs-btn-color: var(--sas-gray) !important;
  --bs-btn-border-color: var(--sas-gray) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: var(--sas-gray-hover) !important;
  --bs-btn-hover-border-color: var(--sas-gray-hover) !important;
}

/* Wrapper owns the sizing knobs and scrolls the body */
.tx-table-wrap{
  /* knobs */
  --thead-h: 44px;   /* header height */
  --row-h:   44px;   /* body row height */
  --rows:    6;      /* how many rows to show */

  height: calc(var(--thead-h) + (var(--rows) * var(--row-h)));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  border-radius: .5rem;

  /* neutralize any earlier limits, if present */
  max-height: none;
  min-height: 0;
}

/* Sticky header with explicit height (vars inherit from wrapper) */
.tx-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--thead-h);
  padding-block: .5rem;
  line-height: 1.25;
  background: var(--bg-card, #F3F9FD);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}

/* Give body cells a concrete height (more reliable than tr) */
.tx-table tbody td{
  height: var(--row-h);
  padding-block: .45rem;
  line-height: 1.25;
  vertical-align: middle;
}

/* Keep your tighter horizontal padding */
.tx-table td, .tx-table th{ padding-inline: .6rem; }

/* Optional: on phones, show 3 rows and slightly shorter heights */
@media (max-width: 576px){
  .tx-table-wrap{ --rows: 3; --thead-h: 40px; --row-h: 40px; }
}




/* ---------- BADGES (blue-outline style by default) ---------- */
.badge.status{
  --_b: var(--sas-blue);
  color: var(--_b);
  background: rgba(0,124,195,.08);
  border: 1px solid var(--_b);
  border-radius: .5rem;
  padding: .35rem .6rem;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.02em;
}
.badge.status:hover,
.badge.status:focus{ background: rgba(0,124,195,.14); color: var(--sas-blue); }
.badge.status.badge-active,
.badge.status.is-fraud{
  background: rgba(0,124,195,.20);
  color:#0b1b22;
  border-color: var(--sas-blue);
}



/* ---------- CONVERSATION (scroll) ---------- */
.conversation-scroll,
#conversation-list{
  max-height:30vh;
  min-height:300px;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
#conversation-list{
  display:flex;flex-direction:column;gap:.75rem;background:#fff;border-radius:.75rem;
  padding:1rem;line-height:1.5;padding-bottom:calc(1rem + env(safe-area-inset-bottom))
}
[data-theme="dark"] #conversation-list{background:#23262b}

.message{
  max-width:70%;padding:.6rem .9rem;border-radius:1rem;word-break:break-word;position:relative
}
.message-meta{font-size:.7rem;opacity:.7;margin-bottom:.25rem}
.message.assistant{
  background:linear-gradient(135deg, var(--sas-blue), var(--sas-blue-hover));color:#fff;
  align-self:flex-start;border-bottom-left-radius:.3rem
}
.message.assistant::after{
  content:"";position:absolute;left:-6px;bottom:6px;border-width:6px;border-style:solid;
  border-color:transparent var(--sas-blue-hover) transparent transparent
}
.message.user{
  background:#f1f1f1;color:#212121;align-self:flex-end;border-bottom-right-radius:.3rem
}
.message.user::after{
  content:"";position:absolute;right:-6px;bottom:6px;border-width:6px;border-style:solid;
  border-color:transparent transparent transparent #f1f1f1
}
[data-theme="dark"] .message.assistant{
  background:linear-gradient(135deg, var(--sas-blue-hover), var(--sas-blue));color:#fff
}
[data-theme="dark"] .message.user{background:#2b2f36;color:#e9e9e9}
[data-theme="dark"] .message.user::after{border-color:transparent transparent transparent #2b2f36}
.message.user{text-align:right}
.message.assistant{text-align:left}

/* ---------- FORMS ---------- */
.form-control:focus,.form-select:focus{
  border-color:var(--sas-blue);
  box-shadow:0 0 0 .2rem rgba(0,124,195,.2)
}

/* ---------- HEADER / LAYOUT WRAPPERS ---------- */
.app-header{position:sticky;top:0;z-index:1030}
.app-topstrip{box-shadow:0 4px 12px rgba(0,0,0,.12)}
[data-theme="dark"] .app-topstrip{box-shadow:0 4px 12px rgba(0,0,0,.5)}
.app-logo{max-width:150px;height:auto}
.page-wrapper{min-height:100vh;background:var(--bg-main)}
.body-wrapper{width:100%}
.body-wrapper-inner{padding-block:.25rem}

/* Skip link */
.visually-hidden-focusable{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}
.visually-hidden-focusable:focus,.visually-hidden-focusable:active{
  position:absolute!important;width:auto;height:auto;clip:auto;overflow:visible;white-space:normal;
  z-index:1080;background:#fff;color:var(--sas-gray);border:2px solid var(--sas-blue);
  border-radius:.25rem;padding:.5rem .75rem;box-shadow:0 2px 8px rgba(0,0,0,.12)
}
#app-main{scroll-margin-top:1rem}

/* ---------- DARK MODE TABLE HEADER / BADGE TWEAKS ---------- */
[data-theme="dark"] .tx-table thead th { background:#243649; }
[data-theme="dark"] .tx-table.table-hover > tbody > tr:hover { background-color: rgba(0,124,195,.20); }
[data-theme="dark"] .badge.status{ background: rgba(0,124,195,.16); color:#e8f6ff; border-color: var(--sas-blue); }
[data-theme="dark"] .badge.status.badge-active,
[data-theme="dark"] .badge.status.is-fraud{ background: rgba(0,124,195,.28); color:#fff; }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- MOBILE TWEAKS ---------- */
@media (max-width: 600px){
  .conversation-scroll,#conversation-list,.tx-table-wrap{max-height:55vh}
}



/* --- Call widget (Bootstrap-aligned) --- */

/* Quiet mode: hide log */
#call-widget.cw-quiet .cw-log-wrap {
  display: none;
}

/* Status: hidden by default; show only when connected */
#call-widget.cw-quiet #cw-status {
  display: none;
}
#call-widget.cw-quiet.cw-status-connected #cw-status {
  display: inline;
}

/* Name fields: sit side-by-side, share space evenly, allow shrink without overflow */
#call-widget #cust-first,
#call-widget #cust-last {
  flex: 1 1 0%;
  max-width: none;
  width: auto !important;   /* beat w-auto / inline widths if present */
  min-width: 0;             /* prevent overflow when space is tight */
}

/* XS: stack full-width on very small screens (matches Bootstrap sm breakpoint) */
@media (max-width: 575.98px) {
  #call-widget #cust-first,
  #call-widget #cust-last {
    flex: 1 1 100%;
  }
}

/* Placeholder styling aligned with Bootstrap 5 */
#call-widget #cust-first::placeholder,
#call-widget #cust-last::placeholder {
  color: var(--bs-secondary-color);
  opacity: .75; /* Bootstrap uses ~.65; a touch higher for legibility */
}

/* Optional: focus ring matches your theme automatically via Bootstrap */
#call-widget #cust-first.form-control:focus,
#call-widget #cust-last.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

#call-widget{
  /* Remap Bootstrap invalid tokens inside the widget */
  --bs-form-invalid-color: var(--sas-gray);
  --bs-form-invalid-border-color: var(--sas-gray);
  --bs-danger: var(--sas-gray);
  --bs-danger-rgb: 77,79,83; /* rgb of --sas-gray */
}

/* Ensure inputs use the gray border & focus ring */
#call-widget .form-control.is-invalid,
#call-widget .was-validated .form-control:invalid {
  border-color: var(--sas-gray);
}

#call-widget .form-control.is-invalid:focus,
#call-widget .was-validated .form-control:invalid:focus {
  border-color: var(--sas-gray);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .25);
}

/* Feedback text (e.g., below the field) */
#call-widget .invalid-feedback,
#call-widget .invalid-tooltip {
  color: var(--sas-gray);
}

/* --- Call ON (widget has .cw-status-connected) --- */
#call-widget.cw-status-connected #cw-start{
  /* mute Start: look like an outline gray and disable it */
  --bs-btn-color: var(--sas-gray);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--sas-gray);
  --bs-btn-hover-color: var(--sas-gray);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--sas-gray);
  pointer-events: none;
  opacity: .6;
}

#call-widget.cw-status-connected #cw-end{
  /* promote End: solid dark (secondary) */
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sas-gray);
  --bs-btn-border-color: var(--sas-gray);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sas-gray-hover);
  --bs-btn-hover-border-color: var(--sas-gray-hover);
  opacity: 1;
}

/* keep status visible only while connected (matches your quiet mode) */
#call-widget.cw-quiet #cw-status{ display:none !important; }
#call-widget.cw-quiet.cw-status-connected #cw-status{ display:inline !important; }

/* Keep disabled End visible (idle) */
#call-widget .btn-outline-secondary:disabled,
#call-widget .btn-outline-secondary.disabled{
  --bs-btn-disabled-color: var(--sas-gray);
  --bs-btn-disabled-border-color: var(--sas-gray);
  opacity: .9;
  background: transparent;
}

/* --- Call ON (widget has .cw-status-connected) --- */
#call-widget.cw-status-connected #cw-start{
  /* mute Start to gray outline + disable */
  --bs-btn-color: var(--sas-gray);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--sas-gray);
  --bs-btn-hover-color: var(--sas-gray);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--sas-gray);
  pointer-events: none;
  opacity: .6;
}

/* When call is ON, make End solid gray */
#call-widget.cw-status-connected #cw-end{
  background-color: var(--sas-gray) !important;
  border-color: var(--sas-gray) !important;
  color: #fff !important;
}
#call-widget.cw-status-connected #cw-end:hover,
#call-widget.cw-status-connected #cw-end:focus{
  background-color: var(--sas-gray-hover) !important;
  border-color: var(--sas-gray-hover) !important;
}

/* assuming these CSS variables exist somewhere (override if needed) */
/* :root { --sas-gray-hover:#6c757d; --sas-orange-focus:#ff7a00; } */

.nav-link.active-home   { color: var(--sas-light-blue) !important; }
.nav-link.active-agatha { color: var(--sas-orange) !important; }

/* optional: keep hover states consistent even when active */
.nav-link.active-home:hover,
.nav-link.active-agatha:hover { opacity: .9; text-decoration: none; }