/**
 * Missed Call Breakdown modal – matches Radix/Tailwind reference.
 * Structure: dialog, header (title + subtitle), total card, category cards, visual bar, legend, close button.
 */

.missed-breakdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.missed-breakdown-modal {
  position: relative;
  z-index: 50;
  width: 100%;
  max-width: 28rem; /* max-w-md = 448px */
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  gap: 1rem; /* gap-4 */
  border: 1px solid #e5e7eb;
  padding: 1.5rem; /* p-6 */
  border-radius: 0.5rem; /* rounded-lg = 8px */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Header: flex flex-col space-y-1.5 text-center sm:text-left */
.missed-breakdown-header-inner {
  display: flex;
  flex-direction: column;
  gap: 0.375rem; /* space-y-1.5 */
}

.missed-breakdown-header-text {
  padding-right: 2.5rem; /* space for close button */
}

.missed-breakdown-title {
  font-size: 1.25rem; /* text-xl */
  font-weight: 700;
  letter-spacing: -0.025em; /* tracking-tight */
  color: #111827;
  margin: 0;
}

.missed-breakdown-subtitle {
  font-size: 0.875rem; /* text-sm */
  color: #6b7280; /* text-gray-500 */
  margin: 0;
}

/* Close button: absolute right-4 top-4 */
.missed-breakdown-close {
  position: absolute;
  right: 1rem; /* right-4 */
  top: 1rem; /* top-4 */
  padding: 0.25rem;
  border: none;
  background: transparent;
  border-radius: 0.125rem;
  cursor: pointer;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
}

.missed-breakdown-close:hover {
  opacity: 1;
}

.missed-breakdown-close svg {
  width: 1rem; /* h-4 */
  height: 1rem; /* w-4 */
}

/* Content wrapper: space-y-4 mt-2 */
.missed-breakdown-content {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* space-y-4 */
}

/* Total card: bg-gray-100 p-4 rounded-lg flex justify-between items-start */
.missed-breakdown-total-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem; /* p-4 */
  border-radius: 0.5rem; /* rounded-lg */
  background: #f3f4f6; /* bg-gray-100 */
}

.missed-breakdown-total-left {
  flex: 1;
  min-width: 0;
}

.missed-breakdown-total-label {
  font-size: 0.875rem; /* text-sm */
  font-weight: 700; /* bold */
  color: #6b7280; /* text-gray-500 */
  margin: 0 0 0.25rem 0;
}

.missed-breakdown-total-value {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700; /* bold */
  color: #111827;
  margin: 0;
}

/* Badge: inline-flex rounded-md px-2.5 py-0.5 text-xs font-semibold bg-red-100 text-red-600 */
.missed-breakdown-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem; /* py-0.5 px-2.5 */
  font-size: 0.75rem; /* text-xs */
  font-weight: 600;
  border-radius: 0.375rem; /* rounded-md */
  background: #fee2e2; /* bg-red-100 */
  color: #dc2626; /* text-red-600 */
  border: 0;
  white-space: nowrap;
}

/* Category cards: rounded-xl border bg-card shadow-sm, p-4 flex items-center gap-4 */
.missed-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* space-y-3 */
}

.missed-breakdown-card {
  display: flex;
  align-items: center;
  gap: 1rem; /* gap-4 */
  padding: 1rem; /* p-4 */
  border-radius: 0.75rem; /* rounded-xl = 12px */
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.missed-breakdown-card-icon-wrap {
  flex-shrink: 0;
  padding: 0.5rem; /* p-2 */
  border-radius: 50%; /* rounded-full */
  background: #f9fafb; /* bg-gray-50 */
}

.missed-breakdown-card-icon {
  width: 1.25rem; /* w-5 */
  height: 1.25rem; /* h-5 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.missed-breakdown-card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.missed-breakdown-card-icon.pre-queue svg { color: #f97316; } /* text-orange-500 */
.missed-breakdown-card-icon.capacity svg { color: #ef4444; }  /* text-red-500 */
.missed-breakdown-card-icon.short svg { color: #eab308; }     /* text-yellow-500 */
.missed-breakdown-card-icon.actual svg { color: #dc2626; }    /* text-red-600 */

.missed-breakdown-card-body {
  flex: 1;
  min-width: 0;
}

.missed-breakdown-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.missed-breakdown-card-row-meta {
  margin-top: 0.25rem; /* mt-1 */
}

.missed-breakdown-modal .missed-breakdown-card-title,
.missed-breakdown-modal h4.missed-breakdown-card-title {
  font-size: 0.875rem;
  font-weight: 700 !important; /* bold - override Bootstrap/global */
  color: #111827; /* text-gray-900 */
  margin: 0;
}

.missed-breakdown-modal .missed-breakdown-card-count {
  font-size: 0.875rem;
  font-weight: 700 !important; /* bold - override Bootstrap/global */
  color: #111827;
}

.missed-breakdown-card-desc {
  font-size: 0.75rem; /* text-xs */
  color: #6b7280; /* text-gray-500 */
  margin: 0;
}

.missed-breakdown-card-pct {
  font-size: 0.75rem;
  color: #6b7280;
}

/* Visual breakdown: text-sm font-medium mb-2, bar h-8, legend flex flex-wrap gap-3 mt-2 */
.missed-breakdown-visual {
  margin-top: 0;
}

.missed-breakdown-visual-title {
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  color: #111827;
  margin: 0 0 0.5rem 0; /* mb-2 */
}

.missed-breakdown-bar {
  display: flex;
  height: 2rem; /* h-8 = 32px */
  width: 100%;
  border-radius: 0.375rem; /* rounded-md */
  overflow: hidden;
}

.missed-breakdown-bar-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px; /* text-[10px] */
  font-weight: 500;
  color: #ffffff;
  min-width: 0;
  flex-shrink: 0;
}

.missed-breakdown-bar-segment.pre-queue { background: #f97316; } /* bg-orange-500 */
.missed-breakdown-bar-segment.capacity { background: #ef4444; }  /* bg-red-500 */
.missed-breakdown-bar-segment.short { background: #eab308; }      /* bg-yellow-500 */
.missed-breakdown-bar-segment.actual { background: #dc2626; }    /* bg-red-600 */

.missed-breakdown-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem; /* gap-3 */
  margin-top: 0.5rem; /* mt-2 */
  align-items: center;
}

.missed-breakdown-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem; /* gap-1.5 */
  font-size: 0.75rem; /* text-xs */
  color: #6b7280; /* text-gray-500 */
}

.missed-breakdown-legend-dot {
  width: 0.75rem; /* w-3 = 12px */
  height: 0.75rem; /* h-3 */
  border-radius: 50%;
  flex-shrink: 0;
}

.missed-breakdown-legend-dot.pre-queue { background: #f97316; }
.missed-breakdown-legend-dot.capacity { background: #ef4444; }
.missed-breakdown-legend-dot.short { background: #eab308; }
.missed-breakdown-legend-dot.actual { background: #dc2626; }

/* Clickable missed calls cell (table) */
.missed-calls-cell-clickable {
  cursor: pointer;
}

.missed-calls-cell-clickable:hover {
  text-decoration: underline;
}

.missed-breakdown-loading {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.875rem;
}

.missed-breakdown-error {
  padding: 1.5rem;
  color: #dc2626;
  font-size: 0.875rem;
}