.realtime-insights .realtime-filter-panel {
  background: linear-gradient(135deg, #f8f7f9 0%, #faf9fb 100%);
  padding: 1rem 1.5rem 0;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.04);
  border: 0.0625rem solid rgba(116, 66, 161, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Align the filter card's left/right edges with the stat-card row below it. The
   wrapper defaults to pl-2/pr-2 (2% padding) which insets the filter more than
   the cards; the cards sit at 1.125rem from the card edge (0.75rem .col.s12
   padding + 0.375rem card-column padding), so match that here. */
.realtime-insights .realtime-filter-wrap {
  padding-left: 1.125rem !important;
  padding-right: 1.125rem !important;
}

.realtime-insights .realtime-filter-panel.realtime-filter-panel--collapsed {
  padding: 0.5rem 1.5rem;
}

.realtime-insights .realtime-filter-panel__header--collapsed .realtime-filter-header-actions .btn-floating {
  width: 1.875rem;
  height: 1.875rem;
  min-width: 1.875rem;
  min-height: 1.875rem;
}

.realtime-insights .realtime-filter-panel__header--collapsed .realtime-filter-header-actions .btn-floating i {
  font-size: 1rem;
}

.realtime-insights .realtime-filter-panel:hover {
  box-shadow: 0 0.25rem 0.75rem rgba(116, 66, 161, 0.12), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.06);
}

.realtime-insights .realtime-filter-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 0.0625rem solid rgba(116, 66, 161, 0.12);
  transition: padding-bottom 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  user-select: none;
}

.realtime-insights .realtime-filter-panel__header.realtime-filter-panel__header--collapsed {
  padding-bottom: 0;
  border-bottom-color: transparent;
}

.realtime-insights .realtime-filter-panel__title {
  display: flex;
  align-items: center;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  letter-spacing: 0.25px;
}

.realtime-insights .realtime-filter-panel__title i {
  margin-right: 0.625rem;
  font-size: 1.375rem;
  color: var(--primary-color);
  opacity: 0.95;
}

.realtime-insights .realtime-filter-panel__toggle-icon {
  margin-left: 0.5rem;
  margin-right: 0;
  font-size: 1.25rem;
  color: #999;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(-90deg);
}

.realtime-insights .realtime-filter-panel__toggle-icon--open {
  transform: rotate(0deg);
}

.realtime-insights .realtime-filter-panel__body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
}

.realtime-insights .realtime-filter-panel__body > form {
  overflow: hidden;
  min-height: 0;
}

.realtime-insights .realtime-filter-panel__body-inner {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.realtime-insights .realtime-filter-panel__body--collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
}

.realtime-insights .realtime-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: default;
}

.realtime-insights .realtime-filter-header-actions .btn-floating {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  min-height: 2.375rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 50%;
  border: 0.0625rem solid rgba(116, 66, 161, 0.15);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #666;
  font-size: inherit;
  text-decoration: none;
}

.realtime-insights .realtime-filter-header-actions .btn-floating:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-hover);
  color: #fff;
  box-shadow: 0 0.25rem 0.625rem rgba(116, 66, 161, 0.3);
  transform: translateY(-0.125rem);
}

.realtime-insights .realtime-filter-header-actions .btn-floating:active {
  transform: translateY(0);
  box-shadow: 0 0.125rem 0.375rem rgba(116, 66, 161, 0.25);
}

.realtime-insights .realtime-filter-header-actions .btn-floating i {
  font-size: 1.125rem;
  line-height: 1;
  display: inline-block;
  color: #666;
}

.realtime-insights .realtime-filter-header-actions .btn-floating:hover i {
  color: #fff;
}

.realtime-insights .realtime-filter-panel form {
  width: 100%;
}

/* Dedicated grid classes instead of Materialize's row/col system - mixing
   its % widths with gap caused wrapping */
.realtime-insights .realtime-filter-panel .realtime-filter-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.realtime-insights .realtime-filter-panel .realtime-filter-row--2 {
  grid-template-columns: repeat(3, 1fr);
}

.realtime-insights .realtime-filter-panel .realtime-filter-row:last-child {
  margin-bottom: 0;
}

.realtime-insights .realtime-filter-panel .realtime-filter-field {
  min-width: 0;
}

.realtime-insights .realtime-filter-panel .input-field {
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.realtime-insights .realtime-filter-panel .input-field label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  order: -1;
  font-family: "Muli", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #555 !important;
  line-height: 1.5 !important;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  display: block;
  margin: 0;
  text-align: left;
}

.realtime-insights .realtime-filter-panel .input-field input,
.realtime-insights .realtime-filter-panel .input-field select {
  width: 100%;
  border: 0.0625rem solid #e0e0e0;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  font-family: "Muli", sans-serif;
  font-size: 0.9375rem;
  background-color: #fafafa;
  box-sizing: border-box;
  color: #333;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.realtime-insights .realtime-filter-panel .input-field select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

.realtime-insights .realtime-filter-panel .input-field input::placeholder,
.realtime-insights .realtime-filter-panel .input-field select::placeholder {
  color: #999;
}

.realtime-insights .realtime-filter-panel .input-field input:hover,
.realtime-insights .realtime-filter-panel .input-field select:hover {
  border-color: #ccc;
  background-color: #fff;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
}

.realtime-insights .realtime-filter-panel .input-field input:focus,
.realtime-insights .realtime-filter-panel .input-field select:focus {
  border-color: var(--primary-color);
  outline: none;
  background-color: #fff;
  box-shadow: 0 0 0 0.1875rem rgba(116, 66, 161, 0.1), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
}

.realtime-insights .realtime-filter-panel .input-field label.active {
  color: #333;
  font-weight: 600;
}

.realtime-insights .realtime-filter-panel .helper-text {
  font-size: 0.75rem;
  margin-top: 0.375rem;
  line-height: 1.4;
  display: block;
  color: #d32f2f;
  font-weight: 500;
}

/* Channel filter uses select2 (for searchable options); the shared
   select2-materialize.css applies a global underline look app-wide, so
   override it here - scoped to this panel only - to match the boxed
   input style used by the plain inputs/selects above. */
.realtime-insights .realtime-filter-panel .realtime-filter-field .select2-container {
  width: 100% !important;
}

/* style.css also has a global `.select2-container--default { border-bottom: 1px solid #9e9e9e !important; }`
   Materialize-underline rule that paints under the boxed .select2-selection--single below, so it must be
   neutralized separately here too. */
.realtime-insights .realtime-filter-panel .realtime-filter-field .select2-container--default {
  border-bottom: none !important;
}

.realtime-insights .realtime-filter-panel .realtime-filter-field .select2-container--default .select2-selection--single {
  height: auto;
  border: 0.0625rem solid #e0e0e0 !important;
  border-radius: 0.375rem !important;
  background-color: #fafafa;
  padding: 0.75rem 1rem;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.realtime-insights .realtime-filter-panel .realtime-filter-field .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  line-height: 1.5;
  font-family: "Muli", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333;
}

.realtime-insights .realtime-filter-panel .realtime-filter-field .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 0.75rem;
  width: 1.25rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem;
}

.realtime-insights .realtime-filter-panel .realtime-filter-field .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.realtime-insights .realtime-filter-panel .realtime-filter-field .select2-container--default:hover .select2-selection--single {
  border-color: #ccc !important;
  background-color: #fff;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
}

.realtime-insights .realtime-filter-panel .realtime-filter-field .select2-container--default.select2-container--open .select2-selection--single,
.realtime-insights .realtime-filter-panel .realtime-filter-field .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--primary-color) !important;
  background-color: #fff;
  box-shadow: 0 0 0 0.1875rem rgba(116, 66, 161, 0.1), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
}

.realtime-insights ul.select-dropdown {
  max-height: 11.25rem;
  transform: translateY(3rem);
}

.realtime-insights [id^="tab-"].pt-1 {
  padding-top: 0.5rem !important;
}

.realtime-insights .realtime-filter-panel__actions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.realtime-insights .realtime-filter-panel__actions .btn {
  min-width: 6.875rem;
  padding: 0.625rem 1.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.5;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
}

.realtime-insights .realtime-filter-panel__actions .btn-reset {
  background-color: #f5f5f5;
  color: #555;
  border: 0.0625rem solid #ddd;
}

.realtime-insights .realtime-filter-panel__actions .btn-reset:hover {
  background-color: #eeeeee;
  border-color: #ccc;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
  transform: translateY(-0.0625rem);
}

.realtime-insights .realtime-filter-panel__actions .btn-reset:active {
  background-color: #e0e0e0;
  transform: translateY(0);
}

.realtime-insights .realtime-filter-panel__actions .btn-apply {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
  color: #fff;
  border: none;
  box-shadow: 0 0.25rem 0.625rem rgba(116, 66, 161, 0.3);
}

.realtime-insights .realtime-filter-panel__actions .btn-apply:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-active) 100%);
  box-shadow: 0 0.375rem 1rem rgba(116, 66, 161, 0.4);
  transform: translateY(-0.125rem);
}

.realtime-insights .realtime-filter-panel__actions .btn-apply:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 0.125rem 0.375rem rgba(116, 66, 161, 0.25);
}

.realtime-insights .realtime-filter-panel__actions .btn-apply:disabled {
  background: linear-gradient(135deg, #ccc 0%, #999 100%);
  cursor: not-allowed;
  opacity: 0.7;
  box-shadow: none;
}

.realtime-insights .realtime-settings-dropdown {
  min-width: 12.5rem;
  max-width: 100%;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  border: 0.0625rem solid rgba(116, 66, 161, 0.1);
  /* Materialize's dropdown JS writes an inline `height` on open and inflates it
     to fill the space below the trigger (down to the viewport bottom) whenever
     the content would overflow - !important overrides that inline value so the
     menu is only as tall as its content. max-height keeps it bounded and lets it
     scroll internally if more fields are added later, instead of stretching the page. */
  height: fit-content !important;
  max-height: 24rem;
  overflow-y: auto;
}

.realtime-insights .realtime-settings-dropdown li {
  /* Tighter vertical rhythm; min-height:0 overrides Materialize's global
     .dropdown-content li { min-height: 50px } that padded each row. */
  padding: 0.5rem 1rem;
  min-height: 0;
  border-bottom: 0.0625rem solid #f5f5f5;
  list-style: none;
}

.realtime-insights .realtime-settings-dropdown li:last-child {
  border-bottom: none;
}

.realtime-insights .realtime-settings-dropdown label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  color: #333;
  line-height: 1.4;
  text-transform: capitalize;
}

.realtime-insights .realtime-settings-dropdown input {
  width: 100%;
  padding: 0.4rem 0.75rem;
  border: 0.0625rem solid #ddd;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  box-sizing: border-box;
  line-height: 1.5;
  transition: all 0.3s ease;
  background-color: #fafafa;
}

.realtime-insights .realtime-settings-dropdown input:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 0.125rem rgba(116, 66, 161, 0.15);
  background-color: #fff;
}

/* KPI counter cards (Total Live Interactions, Inbound, SLA, etc).
   :not(.realtime-chart-card) excludes the chart widgets, which share
   these same "card white border-radius-3" classes but get their own
   styling further down. Each card sits in a Materialize .col
   (box-sizing:border-box, 20% wide, 0.75rem padding each side) -
   shrinking that padding narrows the card gap and widens the card at
   the same time, without touching the shared .col/.width-20 classes
   used elsewhere in the app. */
.realtime-insights .col:has(> .card:is(.white, .red).border-radius-3:not(.realtime-chart-card)) {
  padding-left: 0.375rem !important;
  padding-right: 0.375rem !important;
  /* flex-grow lets the counter cards stretch to fill the row evenly regardless
     of how many are shown (5, 4, or fewer when some are hidden via Customize):
     width-20's 20% is the flex-basis, and grow distributes the leftover space
     equally - so 4 cards become 25% each, 3 become ~33%, with no dead space on
     the right. Requires the row to be a flex container (below). */
  flex-grow: 1;
}

/* The counter-card row (the inner .row that directly holds the .col > .card
   items) becomes a flex container so the flex-grow above takes effect. Scoped
   via :has to exactly that row, so other .rows on the page are untouched. The
   chart cards below sit in their own single-column rows and are excluded by
   :not(.realtime-chart-card), so they're unaffected. */
.realtime-insights .row:has(> .col > .card:is(.white, .red).border-radius-3:not(.realtime-chart-card)) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Some pages (e.g. the agent-details page) put section headings / <hr> dividers
   directly inside this card row alongside the card .cols. Once the row is flex
   they'd otherwise sit inline beside the first card - force any non-.col direct
   child to span the full row so it stays on its own line above/between the cards,
   as it did under the old float layout. No-op on the dashboard tabs, whose card
   rows contain only .col cards. */
.realtime-insights .row:has(> .col > .card:is(.white, .red).border-radius-3:not(.realtime-chart-card)) > :not(.col) {
  flex: 0 0 100%;
  max-width: 100%;
}

.realtime-insights .card.white.border-radius-3:not(.realtime-chart-card) {
  position: relative;
  background-color: #f8f9fb;
  border: 0.0625rem solid #eef0f3;
  border-radius: 1.25rem !important;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.04), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.realtime-insights .card.white.border-radius-3:not(.realtime-chart-card):hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
  transform: translateY(-0.125rem);
  border-color: rgba(116, 66, 161, 0.15);
}

/* Alert state (threshold exceeded) - soft red tint rather than a solid
   block; checkLimitNumber/checkLimitDate logic is untouched, only the
   color treatment changes. */
.realtime-insights .card.red.border-radius-3:not(.realtime-chart-card) {
  position: relative;
  background-color: var(--primary-semi-light) !important;
  border: 0.0625rem solid rgba(var(--primary-rgb), 0.35);
  border-radius: 1.25rem !important;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.04), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.realtime-insights .card.red.border-radius-3:not(.realtime-chart-card):hover {
  box-shadow: 0 0.5rem 1rem rgba(var(--primary-rgb), 0.15), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
  transform: translateY(-0.125rem);
  border-color: rgba(var(--primary-rgb), 0.5);
}

/* Markup is <div class="card-content"><div class="d-flex ..."><h5/><a/><a/></div><p>label</p></div>.
   .d-flex is kept as a real flex row (not unwrapped via display:contents - combining that with
   absolutely-positioned icon children is unreliable across browsers and was letting the icons
   drift inline next to the number instead of staying pinned). It holds just the number, centered,
   and is order:0 so it renders above the label; the icons inside it are still absolutely
   positioned, but now resolve their containing block to .card itself (the next positioned
   ancestor up, per the card's base rules) rather than to this row, so they land in the card's
   own fixed top-right corner regardless of the number's width or the row's height.
   card-content stacks the row above the label via flex-direction:column.
   White/red only ever differ in color, so :is(.white, .red) covers both layout-wise; color rules
   (.black-text/.white-text, hover tints) stay separate. min-height (rather than a fixed height)
   keeps every card the same size in the common case while still letting a card grow instead of
   clipping if a translation runs long. */
.realtime-insights .card:is(.white, .red).border-radius-3:not(.realtime-chart-card) .card-content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.125rem 1rem !important;
  min-height: 6.25rem;
}

.realtime-insights .card:is(.white, .red).border-radius-3:not(.realtime-chart-card) .card-content > .d-flex {
  order: 0;
  flex: 0 0 auto;
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.realtime-insights .card:is(.white, .red).border-radius-3:not(.realtime-chart-card) p {
  order: 1;
  flex: 0 0 auto;
  max-width: 100%;
  min-width: 0;
  /* Single line per the design spec - truncate rather than wrap */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin: 0.375rem 0 0 !important;
  font-family: "Muli", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  text-align: center;
}

.realtime-insights .card.white.border-radius-3:not(.realtime-chart-card) p.black-text {
  color: #6b7280 !important;
}

/* "SLA / hour" carries its time range (e.g. "· 10-11 AM") inline via its
   own <small> in the markup, right after the label instead of on a
   separate parenthesized line. */
.realtime-insights .card:is(.white, .red).border-radius-3:not(.realtime-chart-card) p small {
  font-size: 0.8125rem;
  font-weight: 500;
}

.realtime-insights .card.red.border-radius-3:not(.realtime-chart-card) p.white-text {
  color: #6b7280 !important;
}

.realtime-insights .card:is(.white, .red).border-radius-3:not(.realtime-chart-card) h5 {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Muli", sans-serif;
  font-size: 1.75rem !important;
  /* Regular weight (not bold) for a cleaner, lighter look - size alone carries
     the visual hierarchy over the labels. The number's ng-class still applies
     .text-bolder, which weights the glyphs via -webkit-text-stroke: medium
     (NOT font-weight), so that stroke must be cleared too or the numbers still
     render heavy in Chrome/WebKit despite the lighter font-weight. */
  font-weight: 500 !important;
  -webkit-text-stroke: 0 !important;
  line-height: 1.2;
  text-align: center;
}

/* "h"/"m"/"s" unit letters in duration cards (AHT, THT, Average 1st
   Response, Average Waiting Time) - muted and lighter than the numeric
   value so the numbers stand out as the primary content */
.realtime-insights .realtime-duration-unit {
  margin-right: 0.25rem;
  font-size: 1.75rem;
  font-weight: 500;
  color: #6b7280;
}

.realtime-insights .card.white.border-radius-3:not(.realtime-chart-card) h5.black-text {
  color: #1a1a1a !important;
}

.realtime-insights .card.red.border-radius-3:not(.realtime-chart-card) h5.white-text {
  color: #1a1a1a !important;
}

/* Action icons (threshold alarm / CSV export) - pinned to a fixed spot
   in the card's own top-right corner via absolute positioning (their
   containing block is .card, per the note above), decoupled from both
   the number's width and the label's length so they land in the same
   place on every card. */
.realtime-insights .card:is(.white, .red).border-radius-3:not(.realtime-chart-card) .left-button {
  position: absolute;
  top: 0.75rem;
  width: 1.75rem !important;
  height: 1.75rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0 !important;
  margin: 0 !important;
  transition: background-color 0.2s ease;
}

/* First icon (alarm) one slot further from the edge; second (CSV
   export, ng-show hidden for users without export permission) closest
   to it. :nth-of-type keeps positions fixed either way since ng-show
   only toggles display:none, not the element's presence in the DOM. */
.realtime-insights .card:is(.white, .red).border-radius-3:not(.realtime-chart-card) .left-button:nth-of-type(1) {
  right: 2.75rem;
}

.realtime-insights .card:is(.white, .red).border-radius-3:not(.realtime-chart-card) .left-button:nth-of-type(2) {
  right: 1rem;
}

/* Cards with only ONE action icon (the Workforce counters and the agent-details
   cards have just the alarm, no CSV-export anchor) - pin that lone icon to the
   far-right edge instead of the 2.75rem slot above, which was reserving space for
   a second icon that doesn't exist here. Placed after the nth-of-type rules so it
   wins for the single-icon case (equal specificity, later wins). */
.realtime-insights .card:is(.white, .red).border-radius-3:not(.realtime-chart-card) .left-button:only-of-type {
  right: 1rem;
}

.realtime-insights .card.white.border-radius-3:not(.realtime-chart-card) .left-button:hover {
  background-color: rgba(116, 66, 161, 0.1);
}

.realtime-insights .card.red.border-radius-3:not(.realtime-chart-card) .left-button:hover {
  background-color: rgba(var(--primary-rgb), 0.1);
}

.realtime-insights .card:is(.white, .red).border-radius-3:not(.realtime-chart-card) .left-button i {
  font-size: 1rem !important;
}

.realtime-insights .card.white.border-radius-3:not(.realtime-chart-card) .left-button i {
  color: #999 !important;
}

.realtime-insights .card.white.border-radius-3:not(.realtime-chart-card) .left-button:hover i {
  color: var(--primary-color) !important;
}

.realtime-insights .card.red.border-radius-3:not(.realtime-chart-card) .left-button i {
  color: #ef4d29 !important;
}

.realtime-insights .card.red.border-radius-3:not(.realtime-chart-card) .left-button:hover i {
  color: #b23a1a !important;
}

.realtime-insights .card.border-radius-3:not(.white):not(.red):not(.realtime-chart-card) {
  background-color: #f8f9fb;
  border: 0.0625rem solid #eef0f3;
  border-radius: 1.25rem !important;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.04), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.realtime-insights .card.border-radius-3:not(.white):not(.red):not(.realtime-chart-card):hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
  transform: translateY(-0.125rem);
  border-color: rgba(116, 66, 161, 0.15);
}

.realtime-insights .card.border-radius-3:not(.white):not(.red):not(.realtime-chart-card) .card-content {
  padding: 1.125rem 1rem !important;
}

.realtime-insights .card.border-radius-3:not(.white):not(.red):not(.realtime-chart-card) h5 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Muli", sans-serif;
  font-size: 1.75rem !important;
  /* Regular weight (not bold) - matches the white/red counter cards above.
     text-stroke cleared for the same reason (.text-bolder adds a glyph stroke). */
  font-weight: 500 !important;
  -webkit-text-stroke: 0 !important;
  line-height: 1.2;
  color: #1a1a1a !important;
}

.realtime-insights .card.border-radius-3:not(.white):not(.red):not(.realtime-chart-card) p {
  margin: 0.625rem 0 0 !important;
  padding: 0 !important;
  font-family: "Muli", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  color: #6b7280 !important;
}

/* Chart widget cards (Channel Breakdown, Queue Velocity, Agent Capacity,
   etc.) - same soft shell as the KPI cards; this only styles the
   container/header, their own contents keep existing styling. */
.realtime-insights .realtime-chart-card {
  border-radius: 0.75rem !important;
  border: 0.0625rem solid #eef0f3;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.04), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.03);
  margin-top: 0 !important;
  margin-bottom: 1.25rem;
}

.realtime-insights .realtime-chart-card .card-content-sm {
  padding: 1.25rem !important;
  border-radius: 0.75rem;
}

.realtime-insights .realtime-chart-header {
  gap: 0.625rem;
  margin-bottom: 1rem !important;
  padding-bottom: 0.875rem;
  border-bottom: 0.0625rem solid #f0f1f4;
  flex-wrap: nowrap;
}

.realtime-insights .realtime-chart-header .title-real-time {
  font-family: "Muli", sans-serif;
  font-size: 1rem;
  color: #1a1a1a !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.realtime-insights .realtime-chart-header > .d-flex {
  flex-shrink: 0;
}

/* Inline wrapper around a chart title so its informational tooltip (native
   title attr) triggers only over the text itself, not the full-width <p>.
   help cursor signals there's extra context on hover. */
.realtime-insights .realtime-title-tooltip {
  cursor: help;
}

.realtime-insights .realtime-chart-header .grey-text {
  font-family: "Muli", sans-serif;
  font-size: 0.8125rem;
  color: #6b7280 !important;
  white-space: nowrap;
}

.realtime-insights .realtime-chart-header a.cursor-pointer {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.realtime-insights .realtime-chart-header a.cursor-pointer:hover {
  background-color: rgba(116, 66, 161, 0.1);
}

.realtime-insights .realtime-chart-header a.cursor-pointer i {
  transition: color 0.2s ease;
}

.realtime-insights .realtime-chart-header a.cursor-pointer:hover i {
  color: var(--primary-color) !important;
}

/* Workforce section header reuses .realtime-chart-header; these rules
   just add the toggle-switch styling specific to its extra controls -
   soft purple track when on (the knob already uses var(--primary-color)
   via the app's existing global switch rule). */
.realtime-insights .realtime-workforce-header .realTimeSwitch {
  margin: 0 !important;
  display: flex;
  align-items: center;
}

.realtime-insights .realtime-workforce-header .realTimeSwitch label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.realtime-insights .realtime-workforce-header .realTimeSwitch .black-text {
  font-family: "Muli", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6b7280 !important;
}

.realtime-insights .realtime-workforce-header .realTimeSwitch .lever {
  background-color: #e2e4e9;
}

.realtime-insights .realtime-workforce-header .realTimeSwitch input[type="checkbox"]:checked + .lever {
  background-color: rgba(116, 66, 161, 0.35) !important;
}

/* Agent / Live Status Table (Agents & Workforce tab).
   .table-wrapper/.table-header/.sticky-column/.width-30ch/
   .secondary-color-text/.yellow/.red/.white-text are shared globally
   across the app, so every rule here is qualified under .realtime-insights
   to avoid touching other modules.

   Plain table, scrolling both directions inside .table-wrapper - nothing
   pinned/sticky. Needs an explicit width below, since overflow:auto only
   clips/scrolls a box that's already size-constrained; otherwise it just
   grows to fit the table's full width and spills past its parent. */
.realtime-insights .table-wrapper {
  box-sizing: border-box;
  width: calc(100% - 2rem);
  max-width: calc(100% - 2rem);
  border: 0.0625rem solid #eef0f3;
  border-radius: 0.75rem;
  background-color: #fff;
  overflow-x: auto !important;
  overflow-y: auto !important;
  /* Show ~15 rows before scrolling (was 31.25rem / ~7 rows). Each body row is
     ~4.125rem tall (0.75rem padding top+bottom + ~0.875rem line + border) and
     the sticky header ~3rem: 15 * 4.125 + 3 ≈ 65rem. */
  max-height: 65rem;
  margin: 0 1rem 1.25rem !important;
}

.realtime-insights .table-wrapper table.striped {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: "Muli", sans-serif;
  width: 100%;
}

/* Explicit width per column position so header and body align
   pixel-for-pixel instead of relying on per-row rounding to match.
   :nth-child(n+17) covers the dynamic statusCounter columns
   ng-repeat'd at the end. */
.realtime-insights .table-wrapper table.striped tr > *:nth-child(5),
.realtime-insights .table-wrapper table.striped tr > *:nth-child(6),
.realtime-insights .table-wrapper table.striped tr > *:nth-child(7),
.realtime-insights .table-wrapper table.striped tr > *:nth-child(8),
.realtime-insights .table-wrapper table.striped tr > *:nth-child(9),
.realtime-insights .table-wrapper table.striped tr > *:nth-child(10),
.realtime-insights .table-wrapper table.striped tr > *:nth-child(11),
.realtime-insights .table-wrapper table.striped tr > *:nth-child(13),
.realtime-insights .table-wrapper table.striped tr > *:nth-child(14),
.realtime-insights .table-wrapper table.striped tr > *:nth-child(15),
.realtime-insights .table-wrapper table.striped tr > *:nth-child(16) {
  /* Wide enough that even the longest label in this group ("Last
     interaction") never needs to truncate */
  width: 11rem;
}

/* Name column - wider than the standard 6rem to comfortably fit longer
   agent names/emails (e.g. "qc superadmin.robodesk.test") */
.realtime-insights .table-wrapper table.striped tr > *:nth-child(1) {
  width: 12rem;
}

.realtime-insights .table-wrapper table.striped tr > *:nth-child(2),
.realtime-insights .table-wrapper table.striped tr > *:nth-child(3),
.realtime-insights .table-wrapper table.striped tr > *:nth-child(4) {
  width: 12rem;
}

.realtime-insights .table-wrapper table.striped tr > *:nth-child(12) {
  width: 15rem;
}

.realtime-insights .table-wrapper table.striped tr > *:nth-child(n+17) {
  width: 18rem;
}

.realtime-insights .table-wrapper table.striped thead tr.table-header {
  background-color: #fff;
  box-shadow: none;
  border-bottom: 0.125rem solid #eef0f3;
}

/* Sticky header: position:sticky is applied per-cell (not on the <tr>) since
   that's what reliably works for table headers - the header cells stick to
   the top of .table-wrapper, their scrolling ancestor. Each cell carries its
   own solid white background, matching the rest of the row - a sticky
   element needs an opaque background of its own to stay solid over the body
   rows scrolling underneath it, and (particularly for the Name column below,
   which is also sticky-left) relying on the <tr>'s own background to show
   through a sticky cell is unreliable across browsers and was the source of
   the Name header cell rendering with a mismatched gray/off-white tint. */
.realtime-insights .table-wrapper table.striped thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: #fff;
}

/* Sticky first column's header cell also needs to stick to the left, making
   it the fixed top-left corner - a higher z-index than either plain sticky
   header cells or plain sticky-column body cells so it stays drawn above
   both when the two overlap during a diagonal scroll. !important beats the
   .white utility class already on this cell (same color, but this keeps the
   two from fighting over the same property) and the app-wide
   .sticky-column's own lack of a header-row background rule. */
/* Name header is the frozen top-left corner: sticky on BOTH axes (top via the
   thead th rule above, left here). z-index 4 keeps it above the plain sticky
   header cells (3) and the body's sticky first column (2) when they overlap
   during a diagonal scroll. The colspans that previously broke sticky-left have
   been removed from the markup, so every cell is a real single column and the
   horizontal freeze now works. */
.realtime-insights .table-wrapper table.striped thead th.sticky-column {
  left: 0;
  z-index: 4;
  background-color: #fff !important;
}

.realtime-insights .table-wrapper table.striped tr > * {
  padding-left: 0.375rem !important;
  padding-right: 0.375rem !important;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.realtime-insights .table-wrapper table.striped thead th {
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
}

.realtime-insights .table-wrapper table.striped thead th a.secondary-color-text {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: color 0.2s ease;
}

.realtime-insights .table-wrapper table.striped thead th a.secondary-color-text:hover {
  color: var(--primary-hover) !important;
}

.realtime-insights .table-wrapper table.striped tbody td,
.realtime-insights .table-wrapper table.striped tbody th {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  font-size: 0.875rem;
  border-bottom: 0.0625rem solid #d7dbe0;
}

.realtime-insights .table-wrapper table.striped tbody tr:hover td,
.realtime-insights .table-wrapper table.striped tbody tr:hover th {
  background-color: #f5f2f9;
}

/* Frozen first column. The app-wide .sticky-column ships position:sticky +
   left:-17px (tuned for a different table); re-anchor it to this table's own
   left edge. z-index 2 keeps the column above the normally-scrolling body cells
   (auto/0) so they pass beneath it; background-clip stops an adjacent column's
   content bleeding through the cell border while scrolling. */
.realtime-insights .table-wrapper .sticky-column {
  left: 0 !important;
  z-index: 2;
  background-clip: padding-box;
}

/* Frozen first column must be fully opaque so the columns scrolling beneath it
   are hidden (spreadsheet behaviour), not showing through. Backgrounds set
   here directly (not via the shared striping rule) with !important: even rows
   white, odd rows the subtle striped grey, hover the row-hover tint. */
.realtime-insights .table-wrapper table.striped tbody tr .sticky-column {
  background-color: #fff !important;
}

.realtime-insights .table-wrapper table.striped tbody tr:nth-child(odd) .sticky-column {
  background-color: #f6f6f7 !important;
}

.realtime-insights .table-wrapper table.striped tbody tr:hover .sticky-column {
  background-color: #f0eaf6 !important;
}

.realtime-insights .table-wrapper .sticky-column span[ng-click] {
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  transition: color 0.2s ease;
}

.realtime-insights .table-wrapper .sticky-column span[ng-click]:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* Soften the alert-state cells (Duration / Total Hold thresholds) to a
   tinted background + colored text, matching the KPI-card alert
   treatment. Scoped to this table so .yellow/.red/.white-text keep
   their normal meaning elsewhere in the app. */
.realtime-insights .table-wrapper td.yellow.white-text {
  background-color: #fff8e1 !important;
  color: #b45309 !important;
  font-weight: 600;
}

.realtime-insights .table-wrapper td.red.white-text {
  background-color: #fce8e4 !important;
  color: #b23a1a !important;
  font-weight: 600;
}

.realtime-insights .table-wrapper td.black-text {
  color: #333;
}

/* Agent status field is now a native <select class="browser-default"> (see the
   template note) so its option list can't be clipped by the table's overflow.
   These rules restyle the native trigger to keep the clean, borderless look the
   old Materialize widget had: plain text by default, with a subtle bottom border
   revealed on row hover via the .addBottomBorder toggle. The app-wide
   .customSelectBorder{margin:-14px 0} (style.css, tuned for the old Materialize
   wrapper height) is neutralized here so the native control sits centered. */
.realtime-insights .table-wrapper .customSelectBorder {
  margin: 0;
}

.realtime-insights .table-wrapper .customSelectBorder select.browser-default {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
  padding: 0.25rem 1.25rem 0.25rem 0.5rem;
  font-family: "Muli", sans-serif;
  font-size: 0.875rem;
  color: #333;
  background-color: transparent;
  border: none;
  border-bottom: 0.0625rem solid transparent;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.realtime-insights .table-wrapper .customSelectBorder.addBottomBorder select.browser-default {
  border-bottom-color: #9e9e9e;
}

.realtime-insights .table-wrapper .customSelectBorder select.browser-default:focus {
  border-bottom-color: var(--primary-color);
}

/* Agent-details status-history table (realtimeagentinsights.html). It's a simple
   4-column table, so it deliberately does NOT reuse .table-wrapper (whose sticky
   header/column and fixed nth-child column widths are tuned for the wide agents
   dashboard table). These rules give it the same visual language - rounded white
   bordered container, styled header, subtle row separators and hover - sized for
   auto-width columns that fit without horizontal scroll. */
.realtime-insights .realtime-agent-status-table {
  border: 0.0625rem solid #eef0f3;
  border-radius: 0.75rem;
  background-color: #fff;
  overflow: hidden;
  /* This div is the col.s12.pt-2 wrapper AND the visible rounded box, so its
     Materialize .col padding + pt-2 (padding-top:2%) would otherwise sit INSIDE
     the box as dead space above the header. Zero it out - the table fills the
     box edge-to-edge and the header cells' own padding provides the spacing. */
  padding: 0 !important;
}

.realtime-insights .realtime-agent-status-table table.striped {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 0;
  font-family: "Muli", sans-serif;
}

.realtime-insights .realtime-agent-status-table table.striped thead tr.table-header {
  background-color: #fff;
  box-shadow: none;
  border-bottom: 0.125rem solid #eef0f3;
}

.realtime-insights .realtime-agent-status-table table.striped thead th {
  padding: 0.875rem 0.5rem !important;
}

.realtime-insights .realtime-agent-status-table table.striped thead th a {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--primary-color);
  transition: color 0.2s ease;
}

.realtime-insights .realtime-agent-status-table table.striped thead th a:hover {
  color: var(--primary-hover);
}

.realtime-insights .realtime-agent-status-table table.striped tbody td {
  padding: 0.75rem 0.5rem !important;
  font-size: 0.875rem;
  color: #333;
  text-align: center;
  border-bottom: 0.0625rem solid #d7dbe0;
}

.realtime-insights .realtime-agent-status-table table.striped tbody tr:last-child td {
  border-bottom: none;
}

.realtime-insights .realtime-agent-status-table table.striped tbody tr:hover td {
  background-color: #f5f2f9;
}

/* ============================================================================
   Agent live-status table: Excel-style frozen panes (replaces position:sticky).
   The single old table is split into four grid quadrants:
     corner (Name header) | colhead (other headers, scroll X)
     rowhead (Name cells, scroll Y) | body (other cells, scroll both)
   Only .freeze-grid__body scrolls; realtimeinsights.controller.js mirrors its
   scrollLeft/scrollTop onto the colhead/rowhead panes so the frozen regions move
   in lockstep WITHOUT overlaying the content (each pane is clipped to its own
   grid cell). Fixed row/header heights + uniform column widths keep the four
   separate tables pixel-aligned across the scroll. */
.realtime-insights .freeze-grid {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  /* Show ~10 body rows before scrolling: header (~3.25rem) + 10 x 3.5rem row
     + horizontal-scrollbar gutter (~0.9rem) ≈ 39rem. */
  max-height: 39.5rem;
  width: calc(100% - 2rem);
  max-width: calc(100% - 2rem);
  margin: 0 1rem 1.25rem;
  border: 0.0625rem solid #eef0f3;
  border-radius: 0.75rem;
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
}

.realtime-insights .freeze-grid__corner {
  overflow: hidden;
}

.realtime-insights .freeze-grid__colhead {
  overflow: hidden;
}

.realtime-insights .freeze-grid__rowhead {
  overflow: hidden;
}

.realtime-insights .freeze-grid__body {
  overflow: auto;
}

.realtime-insights .freeze-tbl {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: "Muli", sans-serif;
  margin: 0;
}

.realtime-insights .freeze-tbl--namecol {
  width: 12rem;
}

/* Both data tables (colhead + body) are given the SAME explicit pixel width by
   JS (sizeAgentFreezeTables in the controller = column count x 9rem). With
   table-layout:fixed + the per-column 9rem below, that makes every column
   exactly 9rem in BOTH tables, so headers line up with body columns and the
   horizontal-scroll sync stays aligned. (width:max-content was wrong here - it
   let fixed layout size columns to each table's own content, so the header and
   body columns diverged.) */
.realtime-insights .freeze-tbl--namecol tr > * {
  width: 12rem;
}

.realtime-insights .freeze-tbl--data tr > * {
  width: 9rem;
}

.realtime-insights .freeze-tbl thead tr.table-header {
  background-color: #fff;
  box-shadow: none;
  border-bottom: 0.125rem solid #eef0f3;
}

.realtime-insights .freeze-tbl thead th {
  height: 3.25rem;
  padding: 0.5rem 0.375rem;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}

/* Bold ONLY the table header, without relying on globally-loaded heavy font
   weights (Muli ships up to 600, and loading 700-900 globally made other app
   text bolder too). -webkit-text-stroke thickens just these header glyphs in
   their own color - scoped entirely to the header, affecting nothing else. */
.realtime-insights .freeze-tbl thead th,
.realtime-insights .freeze-tbl thead th a,
.realtime-insights .freeze-tbl thead th span {
  font-weight: 600 !important;
  -webkit-text-stroke: 0.4px currentColor;
  text-stroke: 0.4px currentColor;
}

.realtime-insights .freeze-tbl thead th a {
  font-size: 0.8125rem;
  letter-spacing: 0.2px;
  color: var(--primary-color);
  transition: color 0.2s ease;
}

.realtime-insights .freeze-tbl thead th a:hover {
  color: var(--primary-hover);
}

/* Fixed, equal row height so the row-header (Name) and body panes stay aligned. */
.realtime-insights .freeze-tbl tbody td,
.realtime-insights .freeze-tbl tbody th {
  height: 3.5rem;
  padding: 0.25rem 0.375rem;
  box-sizing: border-box;
  font-size: 0.875rem;
  text-align: center;
  vertical-align: middle;
  border-bottom: 0.0625rem solid #d7dbe0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.realtime-insights .freeze-tbl tbody tr:nth-child(odd) td,
.realtime-insights .freeze-tbl tbody tr:nth-child(odd) th {
  background-color: #f6f6f7;
}

.realtime-insights .freeze-tbl tbody tr:nth-child(even) td,
.realtime-insights .freeze-tbl tbody tr:nth-child(even) th {
  background-color: #fff;
}

.realtime-insights .freeze-tbl--namecol tbody td span[ng-click] {
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  transition: color 0.2s ease;
}

.realtime-insights .freeze-tbl--namecol tbody td span[ng-click]:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* Alert-state cells (Duration / Total Hold thresholds) - ported from the old
   .table-wrapper rules since the new tables use .freeze-tbl. */
.realtime-insights .freeze-tbl td.yellow.white-text {
  background-color: #fff8e1 !important;
  color: #b45309 !important;
  font-weight: 600;
}

.realtime-insights .freeze-tbl td.red.white-text {
  background-color: #fce8e4 !important;
  color: #b23a1a !important;
  font-weight: 600;
}

.realtime-insights .freeze-tbl td.black-text {
  color: #333;
}

/* Native status <select> in the body pane (see the template note on browser-default). */
.realtime-insights .freeze-tbl .customSelectBorder {
  margin: 0;
}

.realtime-insights .freeze-tbl .customSelectBorder select.browser-default {
  display: inline-block;
  width: auto;
  max-width: 100%;
  /* Constrained height/line-height so the select can never make a body row
     taller than the fixed 3.5rem row height - that mismatch was what let the
     body rows outgrow the Name-column rows and drift on scroll. */
  height: 2rem;
  line-height: 1.75rem;
  padding: 0 1.25rem 0 0.5rem;
  font-family: "Muli", sans-serif;
  font-size: 0.875rem;
  color: #333;
  background-color: transparent;
  border: none;
  border-bottom: 0.0625rem solid transparent;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.realtime-insights .freeze-tbl .customSelectBorder.addBottomBorder select.browser-default {
  border-bottom-color: #9e9e9e;
}

.realtime-insights .freeze-tbl .customSelectBorder select.browser-default:focus {
  border-bottom-color: var(--primary-color);
}

/* Custom agent-status dropdown trigger (in the body pane). Looks like the plain
   status text with a caret; turns purple on hover / while its menu is open. */
.realtime-insights .rt-status-select {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  cursor: pointer;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-family: "Muli", sans-serif;
  font-size: 0.875rem;
  color: #333;
  transition: color 0.2s ease;
}

.realtime-insights .rt-status-select__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-insights .rt-status-select__caret {
  font-size: 1.25rem;
  line-height: 1;
  color: #888;
  transition: color 0.2s ease, transform 0.2s ease;
}

.realtime-insights .rt-status-select:hover,
.realtime-insights .rt-status-select--open {
  color: var(--primary-color);
}

.realtime-insights .rt-status-select:hover .rt-status-select__caret,
.realtime-insights .rt-status-select--open .rt-status-select__caret {
  color: var(--primary-color);
}

.realtime-insights .rt-status-select--open .rt-status-select__caret {
  transform: rotate(180deg);
}

/* Floating status menu - app dropdown style (white, rounded, soft shadow, purple
   hover), rendered at the root and position:fixed so it drops down from the
   trigger without being clipped by the table's scroll panes. */
.realtime-insights .rt-status-menu {
  position: fixed;
  z-index: 10000;
  /* No margin: top is positioned exactly by JS (openStatusMenu) for both the
     downward and flipped-upward cases, so a margin would throw it off. */
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background-color: #fff;
  border: 0.0625rem solid rgba(116, 66, 161, 0.1);
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  max-height: 16rem;
  overflow-y: auto;
  min-width: 10rem;
}

.realtime-insights .rt-status-menu li {
  padding: 0.5rem 1rem;
  font-family: "Muli", sans-serif;
  font-size: 0.875rem;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.realtime-insights .rt-status-menu li:hover {
  background-color: #f5f2f9;
  color: var(--primary-color);
}

.realtime-insights .rt-status-menu .rt-status-menu__item--active {
  color: var(--primary-color);
  font-weight: 600;
}

/* Floating Customize menu - same app dropdown style as the status menu, with a
   checkbox per counter (checked = hidden). Rendered at root, position:fixed,
   right-aligned below the Customize button (like the Settings dropdown). */
.realtime-insights .rt-customize-menu {
  position: fixed;
  z-index: 10000;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background-color: #fff;
  border: 0.0625rem solid rgba(116, 66, 161, 0.1);
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  min-width: 14rem;
}

/* Floating Settings menu - positioning only; .realtime-settings-dropdown (style.css)
   still supplies the background/border/li/label/input styling. Rendered at root,
   position:fixed, right-aligned below the Settings button, same as the status/customize
   menus above, so it's never clipped by the filter panel's card. */
.realtime-insights .rt-settings-menu {
  position: fixed;
  z-index: 10000;
  margin: 0;
  list-style: none;
}

.realtime-insights .rt-customize-menu li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-family: "Muli", sans-serif;
  font-size: 0.875rem;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.realtime-insights .rt-customize-menu li:hover {
  background-color: #f5f2f9;
  color: var(--primary-color);
}

/* Checkbox is display-only; the whole row toggles via ng-click, so let clicks
   fall through to the <li>. Accent-color themes it to the app purple. */
.realtime-insights .rt-customize-menu li input[type="checkbox"] {
  pointer-events: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--primary-color);
  flex: 0 0 auto;
}

/* Channel Distribution bar list - replaces a Chart.js bar chart, which
   can only draw rectangular bars, with a custom rounded-pill/track style
   that isn't achievable through Chart.js's bar renderer. */
.realtime-insights .realtime-bar-list {
  /* .realtime-chart-empty ("no data" state) is position:absolute and
     needs this as its centering reference, same as the old
     .realtime-chart-wrapper it replaced */
  position: relative;
  min-height: 4rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0.25rem 0;
}

.realtime-insights .realtime-bar-list__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.realtime-insights .realtime-bar-list__label {
  flex: 0 0 auto;
  width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Muli", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333;
}

.realtime-insights .realtime-bar-list__track {
  flex: 1 1 auto;
  display: block;
  height: 0.5rem;
  border-radius: 1rem;
  background-color: #edeef1;
  overflow: hidden;
}

.realtime-insights .realtime-bar-list__fill {
  display: block;
  height: 100%;
  border-radius: 1rem;
  transition: width 0.3s ease;
}

.realtime-insights .realtime-bar-list__value {
  flex: 0 0 auto;
  min-width: 1.75rem;
  text-align: right;
  font-family: "Muli", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #1a1a1a;
}

/* Responsive Adjustments - Tablet */
@media screen and (max-width: 62rem) {
  .realtime-insights .realtime-filter-panel {
    padding: 0.875rem 1.25rem 0;
  }

  .realtime-insights .realtime-filter-panel__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .realtime-insights .realtime-filter-panel__body-inner {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .realtime-insights .realtime-filter-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .realtime-insights .realtime-filter-panel .realtime-filter-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .realtime-insights .realtime-filter-panel .realtime-filter-row--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .realtime-insights .realtime-filter-panel__actions {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
  }
}

/* Responsive Adjustments - Mobile */
@media screen and (max-width: 37.5rem) {
  .realtime-insights .realtime-filter-panel {
    padding: 1rem 1rem 0;
  }

  .realtime-insights .realtime-filter-panel__header {
    padding-bottom: 0.75rem;
  }

  .realtime-insights .realtime-filter-panel__body-inner {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .realtime-insights .realtime-filter-panel .realtime-filter-row,
  .realtime-insights .realtime-filter-panel .realtime-filter-row--2 {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .realtime-insights .realtime-filter-panel__actions {
    flex-direction: column;
    margin-top: 1.25rem;
    gap: 0.625rem;
  }

  .realtime-insights .realtime-filter-panel__actions .btn {
    width: 100%;
  }

  .realtime-insights .realtime-filter-panel__title {
    font-size: 1rem;
  }
}