/* Thin fixed progress bar that matches the container width & left position */
.filament-progress-fixed {
  position: fixed;
  top: 4px; /* small gap from top of viewport so it's visible below any fixed header — tweak if needed */
  height: 3px;
  width: 0px;
  border-radius: 2px;
  z-index: 99999;
  pointer-events: none;
  transform-origin: left center;
  transition: width 0.6s ease, opacity 240ms ease;
  opacity: 1;
  /* background: linear-gradient(90deg, rgba(189,34,34,0.95), rgba(255,120,120,0.95)); */
  box-shadow: 0 2px 8px rgba(189,34,34,0.08);
}

/* active state expands to full width (JS toggles width to container width then adds this class for niceness) */
.filament-progress-fixed.progress-active {
  /* no width here — JS sets explicit width; this class is for transitions */
}

/* hide smoothly */
.filament-progress-fixed.hidden {
  opacity: 0;
  width: 0 !important;
}

.fi-main-sidebar {
  background-color: #dbefe8;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label{
  color: #000;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label:where(.dark, .dark *){
  color: #fff;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon{
  color: #000;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon:where(.dark, .dark *){
  color: #fff;
}
.fi-main-sidebar:where(.dark, .dark *) {
  background-color: #000000;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *){
  background: color-mix(in oklab,var(--color-white)10%,transparent);
}
.fi-topbar{
  /* background: linear-gradient(135deg, #0a323f, #007c85); */
  --tw-ring-color: color-mix(in oklab,var(--gray-950)20%,transparent);
}
.fi-topbar:where(.dark, .dark *) {
  --tw-ring-color: color-mix(in oklab, #f2f2f2 20%, transparent);
}

.fi-main-ctn{
  background-color: #e9fbf3;
}
.fi-main-ctn:where(.dark, .dark *){
  
  background-color: rgb(28, 28, 28);
}
.custom-select-class {
    pointer-events: none;
    cursor: not-allowed !important;
}

/* ---- Call Data KPI cards: rounded card, icon in a soft-tinted circle,
   bold value, muted label underneath — mirrors the CallerDesk-style report
   design while leaving all Stat/url/wire behavior untouched (CSS only). ---- */
.fi-wi-stats-overview-stat.calldata-stat {
  min-height: 6.5rem;
  display: flex;
  align-items: center;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.06);
}
.fi-wi-stats-overview-stat.calldata-stat .fi-wi-stats-overview-stat-content {
  width: 100%;
  row-gap: 0.25rem;
}
.fi-wi-stats-overview-stat.calldata-stat .fi-wi-stats-overview-stat-label-ctn {
  align-items: center;
  gap: 0.625rem;
}
.fi-wi-stats-overview-stat.calldata-stat .fi-wi-stats-overview-stat-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
}
.fi-wi-stats-overview-stat.calldata-stat .fi-wi-stats-overview-stat-label:where(.dark, .dark *) {
  color: rgb(156, 163, 175);
}
.fi-wi-stats-overview-stat.calldata-stat .fi-wi-stats-overview-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}
.fi-wi-stats-overview-stat.calldata-stat .fi-icon {
  --calldata-stat-icon-bg: rgb(243, 244, 246);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  border-radius: 9999px;
  background-color: var(--calldata-stat-icon-bg);
  flex-shrink: 0;
}
.fi-wi-stats-overview-stat.calldata-stat .fi-wi-stats-overview-stat-description {
  overflow: hidden;
}
.fi-wi-stats-overview-stat.calldata-stat .fi-wi-stats-overview-stat-description span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  line-height: 1rem;
}

.fi-wi-stats-overview-stat.calldata-stat--total .fi-icon { color: #3b82f6; --calldata-stat-icon-bg: rgba(59, 130, 246, 0.12); }
.fi-wi-stats-overview-stat.calldata-stat--total .fi-icon:where(.dark, .dark *) { color: #60a5fa; --calldata-stat-icon-bg: rgba(96, 165, 250, 0.16); }

.fi-wi-stats-overview-stat.calldata-stat--answered .fi-icon { color: #10b981; --calldata-stat-icon-bg: rgba(16, 185, 129, 0.12); }
.fi-wi-stats-overview-stat.calldata-stat--answered .fi-icon:where(.dark, .dark *) { color: #34d399; --calldata-stat-icon-bg: rgba(52, 211, 153, 0.16); }

.fi-wi-stats-overview-stat.calldata-stat--not-answered .fi-icon { color: #ef4444; --calldata-stat-icon-bg: rgba(239, 68, 68, 0.12); }
.fi-wi-stats-overview-stat.calldata-stat--not-answered .fi-icon:where(.dark, .dark *) { color: #f87171; --calldata-stat-icon-bg: rgba(248, 113, 113, 0.16); }

.fi-wi-stats-overview-stat.calldata-stat--not-assigned .fi-icon { color: #f59e0b; --calldata-stat-icon-bg: rgba(245, 158, 11, 0.12); }
.fi-wi-stats-overview-stat.calldata-stat--not-assigned .fi-icon:where(.dark, .dark *) { color: #fbbf24; --calldata-stat-icon-bg: rgba(251, 191, 36, 0.16); }

.fi-wi-stats-overview-stat.calldata-stat--active-employees .fi-icon { color: #6366f1; --calldata-stat-icon-bg: rgba(99, 102, 241, 0.12); }
.fi-wi-stats-overview-stat.calldata-stat--active-employees .fi-icon:where(.dark, .dark *) { color: #818cf8; --calldata-stat-icon-bg: rgba(129, 140, 248, 0.16); }

/* Live Calls card is the odd one out in the reference design — a big circular
   ring holding the count, instead of an icon+value row — approximated here
   by turning its content into a centered ring, without altering the widget's
   markup, click handler, or polling. */
.fi-wi-stats-overview-stat.calldata-stat--live-active,
.fi-wi-stats-overview-stat.calldata-stat--live-idle {
  cursor: pointer;
}
.fi-wi-stats-overview-stat.calldata-stat--live-active .fi-wi-stats-overview-stat-content,
.fi-wi-stats-overview-stat.calldata-stat--live-idle .fi-wi-stats-overview-stat-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fi-wi-stats-overview-stat.calldata-stat--live-active .fi-wi-stats-overview-stat-label-ctn,
.fi-wi-stats-overview-stat.calldata-stat--live-idle .fi-wi-stats-overview-stat-label-ctn {
  flex-direction: column-reverse;
  gap: 0;
}
.fi-wi-stats-overview-stat.calldata-stat--live-active .fi-icon,
.fi-wi-stats-overview-stat.calldata-stat--live-idle .fi-icon {
  display: none;
}
.fi-wi-stats-overview-stat.calldata-stat--live-active .fi-wi-stats-overview-stat-value,
.fi-wi-stats-overview-stat.calldata-stat--live-idle .fi-wi-stats-overview-stat-value {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 0 0.375rem;
}
.fi-wi-stats-overview-stat.calldata-stat--live-active .fi-wi-stats-overview-stat-value {
  border: 3px solid #10b981;
  color: #10b981;
}
.fi-wi-stats-overview-stat.calldata-stat--live-idle .fi-wi-stats-overview-stat-value {
  border: 3px solid rgb(209, 213, 219);
  color: rgb(107, 114, 128);
}

/* ---- Call Data quick-stats bar: thin strip of Unique/Today/Yesterday/This
   Week/This Month/Last Month/All Time counts, right-aligned, matching the
   reference design. Clickable items drive the same period filter the old
   dropdown did (via wire:click="setPeriod(...)" — see ListCallData::getHeader()). ---- */
.calldata-quick-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 1.25rem;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #3b82f6;
  background-color: rgb(249, 250, 251);
}
.calldata-quick-stats:where(.dark, .dark *) {
  background-color: rgb(24, 24, 27);
}
.calldata-quick-stats-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.25rem;
  border-radius: 0.375rem;
}
.calldata-quick-stats-item--clickable {
  cursor: pointer;
}
.calldata-quick-stats-item--clickable:hover {
  background-color: rgba(59, 130, 246, 0.08);
}
.calldata-quick-stats-item--active {
  background-color: rgba(59, 130, 246, 0.12);
}
.calldata-quick-stats-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
}
.calldata-quick-stats-label:where(.dark, .dark *) {
  color: rgb(209, 213, 219);
}
.calldata-quick-stats-item--active .calldata-quick-stats-label {
  color: #3b82f6;
}
.calldata-quick-stats-value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
  background-color: rgb(229, 231, 235);
  border-radius: 9999px;
  padding: 0.0625rem 0.5rem;
}
.calldata-quick-stats-value:where(.dark, .dark *) {
  color: rgb(243, 244, 246);
  background-color: rgb(63, 63, 70);
}
.calldata-quick-stats-item--active .calldata-quick-stats-value {
  background-color: #3b82f6;
  color: #fff;
}