/* ================================================
   Call Response Analysis - Results Page Styles
   Clean, Modern & Minimalist Design
   ================================================ */

/* Animations */
@keyframes crf-fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes crf-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes crf-slideInLeft {
  from { opacity: 0; transform: translateX(-15px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes crf-scaleIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* Main Results Container */
.stats-ref-container {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 48px 40px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 2px 8px rgba(0, 35, 55, 0.06) !important;
  animation: crf-fadeInUp 0.5s ease-out !important;
}

/* Header Section */
.stats-ref-container .text-center {
  text-align: center !important;
  margin-bottom: 40px !important;
  animation: crf-fadeIn 0.6s ease-out !important;
}

.stats-ref-container .text-center h2 {
  color: #002337 !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.03em !important;
}

.stats-ref-container .text-center p.text-gray-600 {
  color: #2371B7 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

.stats-ref-container .text-center p.text-gray-700 {
  color: #002337 !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  margin-top: 6px !important;
  opacity: 0.8 !important;
}

/* Salesperson Filter */
.stats-ref-container .mb-8 {
  margin-bottom: 32px !important;
  animation: crf-slideInLeft 0.4s ease-out 0.15s both !important;
}

.stats-ref-container .mb-8 label {
  color: #002337 !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}

.stats-ref-container .mb-8 select {
  color: #002337 !important;
  background: #ffffff !important;
  border: 2px solid #2371B7 !important;
  border-radius: 10px !important;
  padding: 12px 40px 12px 16px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%232371B7' d='M7 9L2 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  outline: none !important;
}

.stats-ref-container .mb-8 select:hover {
  border-color: #002337 !important;
}

.stats-ref-container .mb-8 select:focus {
  border-color: #002337 !important;
  box-shadow: 0 0 0 3px rgba(0, 35, 55, 0.1) !important;
}

/* Summary Section */
.stats-ref-container .mb-8 h3 {
  color: #002337 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
  text-align: center !important;
  animation: crf-slideInLeft 0.4s ease-out 0.1s both !important;
}

.stats-ref-container > div:nth-of-type(2) .grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  animation: crf-scaleIn 0.5s ease-out 0.2s both !important;
}

/* Summary Card Styles */
.stats-ref-container .grid > div {
  background: #F6F6F6 !important;
  border-radius: 14px !important;
  padding: 24px 20px !important;
  text-align: center !important;
  transition: all 0.25s ease !important;
}
.stats-ref-container .grid > div {
  background: #2371B7 !important;
} 
.stats-ref-container .grid > div:first-child {
  background: #F29422 !important;
}

.stats-ref-container .grid > div:hover {
  background: #E0EAF5 !important;
  transform: translateY(-2px) !important;
}

.stats-ref-container .grid > div .text-sm:first-of-type {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #002337 !important;
  opacity: 0.9 !important;
}

.stats-ref-container .grid > div .text-3xl {
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  margin-top: 10px !important;
  color: #002337 !important;
  line-height: 1 !important;
}

/* PERCENTAGE STYLING - Pure white for all summary card percentages */
.stats-ref-container .grid > div .text-sm:not(:first-of-type) {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* .subtitle-white class specifically for white percentages */
.stats-ref-container .grid > div .subtitle-white {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.02em !important;
}

/* Single Card for Salesperson View */
.stats-ref-container > div:nth-of-type(3) .grid {
  animation: crf-scaleIn 0.4s ease-out 0.15s both !important;
  justify-content: center !important;
}

.stats-ref-container > div:nth-of-type(3) .grid > div {
  border-radius: 14px !important;
  padding: 28px 40px !important;
  max-width: 320px !important;
  text-align: center !important;
  transition: all 0.25s ease !important;
}


.stats-ref-container > div:nth-of-type(3) .grid > div:hover {
  background: #002337 !important;
  transform: translateY(-2px) !important;
}

.stats-ref-container > div:nth-of-type(3) .grid > div .text-sm:first-of-type {
  font-size: 0.95rem !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  opacity: 0.9 !important;
}

.stats-ref-container > div:nth-of-type(3) .grid > div .text-3xl {
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-top: 8px !important;
}

/* Response Time Analysis Section */
.stats-ref-container .mb-8:nth-last-of-type(2) {
  animation: crf-fadeInUp 0.5s ease-out 0.3s both !important;
}

.stats-ref-container .mb-8:nth-last-of-type(2) h3 {
  color: #002337 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

.stats-ref-container .mb-8:nth-last-of-type(2) .bg-gray-50 {
  background: #F6F6F6 !important;
  border-radius: 14px !important;
  padding: 32px !important;
}

.stats-ref-container .mb-8:nth-last-of-type(2) .grid-cols-2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}

.stats-ref-container .mb-8:nth-last-of-type(2) .grid-cols-2 > div {
  text-align: center !important;
  padding: 20px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  transition: all 0.25s ease !important;
}

.stats-ref-container .mb-8:nth-last-of-type(2) .grid-cols-2 > div:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 35, 55, 0.08) !important;
}

.stats-ref-container .mb-8:nth-last-of-type(2) .grid-cols-2 > div .text-3xl {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #2371B7 !important;
}

.stats-ref-container .mb-8:nth-last-of-type(2) .grid-cols-2 > div .text-sm {
  color: #002337 !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  margin-top: 8px !important;
  opacity: 0.75 !important;
}

/* Response Time Distribution Section */
.stats-ref-container > div:last-of-type {
  animation: crf-fadeInUp 0.5s ease-out 0.4s both !important;
}

.stats-ref-container > div:last-of-type h3 {
  color: #002337 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

/* Chart Container */
.stats-ref-container > div:last-of-type .space-y-3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}

/* Individual Chart Rows */
.stats-ref-container > div:last-of-type .space-y-3 > div {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 12px 16px !important;
  background: #F6F6F6 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.stats-ref-container > div:last-of-type .space-y-3 > div:hover {
  background: #E0EAF5 !important;
}

.stats-ref-container > div:last-of-type .space-y-3 > div:nth-child(1) { animation-delay: 0.1s; }
.stats-ref-container > div:last-of-type .space-y-3 > div:nth-child(2) { animation-delay: 0.15s; }
.stats-ref-container > div:last-of-type .space-y-3 > div:nth-child(3) { animation-delay: 0.2s; }
.stats-ref-container > div:last-of-type .space-y-3 > div:nth-child(4) { animation-delay: 0.25s; }
.stats-ref-container > div:last-of-type .space-y-3 > div:nth-child(5) { animation-delay: 0.3s; }
.stats-ref-container > div:last-of-type .space-y-3 > div:nth-child(6) { animation-delay: 0.35s; }

/* Chart Labels */
.stats-ref-container > div:last-of-type .space-y-3 .w-24 {
  min-width: 70px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #002337 !important;
}

/* Chart Bars Background */
.stats-ref-container > div:last-of-type .space-y-3 .flex-1 {
  flex: 1 !important;
  position: relative !important;
}

.stats-ref-container > div:last-of-type .space-y-3 .h-8 {
  height: 28px !important;
  border-radius: 6px !important;
  background: #E0EAF5 !important;
  overflow: hidden !important;
}

.stats-ref-container > div:last-of-type .space-y-3 .rounded-full {
  border-radius: 6px !important;
  min-width: 0 !important;
  transition: width 0.8s ease-out !important;
}

.stats-ref-container > div:last-of-type .space-y-3 .flex.items-center.justify-end {
  justify-content: flex-end !important;
  padding-right: 12px !important;
}

/* DIFFERENTIATED COUNT AND PERCENTAGE IN BAR CHARTS */
/* Count number - prominent, larger, with brand color */
.stats-ref-container > div:last-of-type .space-y-3 .text-white .count-value {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 35, 55, 0.2) !important;
}

/* Percentage - smaller, lighter, with accent color */
.stats-ref-container > div:last-of-type .space-y-3 .text-white .percentage-value {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #FFD166 !important;
  margin-left: 4px !important;
}

/* Fallback for spans without our classes (existing style for backward compatibility) */
.stats-ref-container > div:last-of-type .space-y-3 .text-white:not(:has(.count-value)):not(:has(.percentage-value)) {
  color: #ffffff !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* If the span contains both count and percentage styled */
.stats-ref-container > div:last-of-type .space-y-3 .text-white {
  color: transparent !important;
  font-size: 0 !important;
  white-space: nowrap !important;
}

/* Cumulative Percentage */
.stats-ref-container > div:last-of-type .space-y-3 .w-16 {
  min-width: 50px !important;
  text-align: right !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #002337 !important;
  opacity: 0.8 !important;
}

/* Export Buttons Section */
.stats-ref-container ~ div {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 32px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 2px 8px rgba(0, 35, 55, 0.06) !important;
  animation: crf-fadeInUp 0.5s ease-out 0.5s both !important;
}

.stats-ref-container ~ div h2 {
  color: #002337 !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

.stats-ref-container ~ div .grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  animation: crf-scaleIn 0.4s ease-out 0.55s both !important;
}

/* Export Buttons - DARK BACKGROUND = WHITE TEXT */
.stats-ref-container ~ div .grid button {
  border-radius: 10px !important;
  padding: 16px 20px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  transition: all 0.2s ease !important;
  background: #002337 !important;
  border: none !important;
  color: #ffffff !important;
}

.stats-ref-container ~ div .grid button:hover {
  background: #2371B7 !important;
  transform: translateY(-2px) !important;
}

.stats-ref-container ~ div .grid button:active {
  transform: translateY(0) !important;
}

/* Reset Button - LIGHT */
.stats-ref-container ~ div .mt-4 {
  margin-top: 24px !important;
  display: flex !important;
  justify-content: center !important;
}

.stats-ref-container ~ div .mt-4 button {
  background: #F6F6F6 !important;
  color: #002337 !important;
  border-radius: 10px !important;
  padding: 14px 32px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
  border: 2px solid #E0EAF5 !important;
}

.stats-ref-container ~ div .mt-4 button:hover {
  background: #E0EAF5 !important;
  border-color: #2371B7 !important;
}

/* ================================================
   RESPONSIVE STYLES - TABLET (768px - 1024px)
   ================================================ */
@media (max-width: 1024px) {
  .stats-ref-container {
    padding: 36px 28px !important;
    margin-bottom: 20px !important;
  }

  .stats-ref-container .text-center h2 {
    font-size: 1.6rem !important;
  }

  .stats-ref-container > div:nth-of-type(2) .grid,
  .stats-ref-container > div:nth-of-type(3) .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .stats-ref-container .mb-8:nth-last-of-type(2) .grid-cols-2 {
    gap: 16px !important;
  }

  .stats-ref-container .mb-8:nth-last-of-type(2) .grid-cols-2 > div .text-3xl {
    font-size: 1.6rem !important;
  }

  .stats-ref-container ~ div {
    padding: 28px !important;
  }

  .stats-ref-container ~ div .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Response Time Distribution - Count & Percentage on Tablet */
  .stats-ref-container > div:last-of-type .space-y-3 .text-white .count-value {
    font-size: 0.9rem !important;
  }

  .stats-ref-container > div:last-of-type .space-y-3 .text-white .percentage-value {
    font-size: 0.7rem !important;
  }
}

/* ================================================
   RESPONSIVE STYLES - MOBILE (< 768px)
   ================================================ */
@media (max-width: 767px) {
  .stats-ref-container {
    padding: 28px 20px !important;
    margin-bottom: 16px !important;
    border-radius: 14px !important;
  }

  .stats-ref-container .text-center {
    margin-bottom: 28px !important;
  }

  .stats-ref-container .text-center h2 {
    font-size: 1.4rem !important;
  }

  .stats-ref-container .mb-8 {
    margin-bottom: 24px !important;
  }

  .stats-ref-container .mb-8 select {
    width: 100% !important;
    padding: 14px 40px 14px 16px !important;
    font-size: 1rem !important;
  }

  /* Summary Cards */
  .stats-ref-container > div:nth-of-type(2) .grid,
  .stats-ref-container > div:nth-of-type(3) .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .stats-ref-container .grid > div {
    padding: 20px !important;
  }

  .stats-ref-container .grid > div .text-3xl {
    font-size: 1.8rem !important;
  }

  /* Response Time Analysis */
  .stats-ref-container .mb-8:nth-last-of-type(2) {
    margin-bottom: 24px !important;
  }

  .stats-ref-container .mb-8:nth-last-of-type(2) h3 {
    font-size: 0.95rem !important;
  }

  .stats-ref-container .mb-8:nth-last-of-type(2) .bg-gray-50 {
    padding: 24px 16px !important;
  }

  .stats-ref-container .mb-8:nth-last-of-type(2) .grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .stats-ref-container .mb-8:nth-last-of-type(2) .grid-cols-2 > div {
    padding: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  .stats-ref-container .mb-8:nth-last-of-type(2) .grid-cols-2 > div .text-3xl {
    font-size: 1.4rem !important;
    order: 2 !important;
  }

  .stats-ref-container .mb-8:nth-last-of-type(2) .grid-cols-2 > div .text-sm {
    font-size: 0.9rem !important;
    order: 1 !important;
    margin-top: 0 !important;
    text-align: left !important;
  }

  /* Chart Distribution */
  .stats-ref-container > div:last-of-type h3 {
    font-size: 0.95rem !important;
    margin-bottom: 16px !important;
  }

  .stats-ref-container > div:last-of-type .space-y-3 > div {
    padding: 10px 12px !important;
  }

  .stats-ref-container > div:last-of-type .space-y-3 .w-24 {
    width: 55px !important;
    min-width: 55px !important;
    font-size: 0.85rem !important;
  }

  .stats-ref-container > div:last-of-type .space-y-3 .flex-1 {
    order: 3 !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  .stats-ref-container > div:last-of-type .space-y-3 .h-8 {
    height: 26px !important;
  }

  .stats-ref-container > div:last-of-type .space-y-3 .text-white {
    font-size: 0.75rem !important;
  }

  .stats-ref-container > div:last-of-type .space-y-3 .w-16 {
    width: auto !important;
    min-width: 45px !important;
    font-size: 0.8rem !important;
  }

  /* Response Time Distribution - Count & Percentage on Mobile */
  .stats-ref-container > div:last-of-type .space-y-3 .text-white .count-value {
    font-size: 0.85rem !important;
  }

  .stats-ref-container > div:last-of-type .space-y-3 .text-white .percentage-value {
    font-size: 0.65rem !important;
    margin-left: 3px !important;
  }

  /* Export Section */
  .stats-ref-container ~ div {
    padding: 24px 16px !important;
    margin-bottom: 16px !important;
  }

  .stats-ref-container ~ div h2 {
    font-size: 1rem !important;
    margin-bottom: 20px !important;
  }

  .stats-ref-container ~ div .grid {
    grid-template-columns: 1fr !important;
  }

  .stats-ref-container ~ div .grid button {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 0.9rem !important;
  }

  .stats-ref-container ~ div .mt-4 {
    margin-top: 20px !important;
  }

  .stats-ref-container ~ div .mt-4 button {
    width: 100% !important;
    padding: 14px 24px !important;
  }
}

/* ================================================
   RESPONSIVE STYLES - SMALL MOBILE (< 480px)
   ================================================ */
@media (max-width: 479px) {
  .stats-ref-container {
    padding: 24px 16px !important;
  }

  .stats-ref-container .text-center h2 {
    font-size: 1.25rem !important;
  }

  .stats-ref-container .mb-8:nth-last-of-type(2) .grid-cols-2 > div {
    padding: 12px !important;
  }

  .stats-ref-container .mb-8:nth-last-of-type(2) .grid-cols-2 > div .text-3xl {
    font-size: 1.25rem !important;
  }

  .stats-ref-container .grid > div .text-3xl {
    font-size: 1.6rem !important;
  }

  .stats-ref-container .grid > div .text-sm {
    font-size: 0.8rem !important;
  }

  .stats-ref-container > div:last-of-type .space-y-3 .w-24 {
    width: 50px !important;
    min-width: 50px !important;
    font-size: 0.8rem !important;
  }

  .stats-ref-container > div:last-of-type .space-y-3 .h-8 {
    height: 24px !important;
  }

  .stats-ref-container > div:last-of-type .space-y-3 .text-white {
    font-size: 0.7rem !important;
    padding-right: 8px !important;
  }

  /* Response Time Distribution - Count & Percentage on Small Mobile */
  .stats-ref-container > div:last-of-type .space-y-3 .text-white .count-value {
    font-size: 0.75rem !important;
  }

  .stats-ref-container > div:last-of-type .space-y-3 .text-white .percentage-value {
    font-size: 0.6rem !important;
    margin-left: 2px !important;
  }

  .stats-ref-container ~ div .grid button {
    font-size: 0.85rem !important;
    padding: 12px 16px !important;
  }
}

/* ================================================
   ACCESSIBILITY & FOCUS STATES
   ================================================ */
.stats-ref-container button:focus,
.stats-ref-container select:focus,
.stats-ref-container input:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(242, 148, 34, 0.4) !important;
}

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


@media (max-width: 540px) {
  .bar-chart-bar {
    justify-content: flex-start;
    padding-right: 0;
  }

  .bar-chart-bar span {
    position: absolute;
    left: 100%;
    margin-left: 8px;
    color: #374151; /* gray-700 */
    white-space: nowrap;
  }
}



.custom-bar {
  background: #2371B7 !important;
}