/* =========================================================================
   Hoora Voice — Operations Dashboard — Custom Styles
   Complements Tailwind CDN utility classes
   ========================================================================= */

/* ── Base ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ── Custom Scrollbar ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Sidebar nav active state ─────────────────────────────────────────────── */
.nav-link.active {
  background-color: #f59e0b;
  color: #ffffff;
}
.nav-link.active svg {
  color: #ffffff;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid #fde68a;
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── Pulse animations ─────────────────────────────────────────────────────── */
@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2);   opacity: 0; }
}
.pulse-ring {
  position: relative;
  display: inline-flex;
}
.pulse-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-ring 1.2s ease-out infinite;
  opacity: 0.4;
}

/* ── Slide-over animation ─────────────────────────────────────────────────── */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
#session-modal > div:last-child {
  animation: slideInRight 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#session-modal > div:first-child {
  animation: fadeIn 0.2s ease;
}

/* ── Live call card pulse border ─────────────────────────────────────────── */
@keyframes borderPulse {
  0%, 100% { border-color: #86efac; }
  50%       { border-color: #22c55e; }
}
.live-border { animation: borderPulse 2s ease-in-out infinite; }

/* ── Status badges ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.badge-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Status-specific badge colors */
.badge-in_progress   { background: #dcfce7; color: #15803d; }
.badge-ringing       { background: #fef3c7; color: #b45309; }
.badge-queued        { background: #dbeafe; color: #1d4ed8; }
.badge-completed     { background: #d1fae5; color: #065f46; }
.badge-failed        { background: #fee2e2; color: #b91c1c; }
.badge-no_answer     { background: #f3f4f6; color: #4b5563; }
.badge-busy          { background: #ffedd5; color: #c2410c; }
.badge-canceled      { background: #f3f4f6; color: #6b7280; }

.dot-in_progress  { background: #22c55e; animation: pulse 1.5s ease-in-out infinite; }
.dot-ringing      { background: #f59e0b; animation: pulse 1.5s ease-in-out infinite; }
.dot-queued       { background: #60a5fa; }
.dot-completed    { background: #10b981; }
.dot-failed       { background: #ef4444; }
.dot-no_answer    { background: #9ca3af; }
.dot-busy         { background: #fb923c; }
.dot-canceled     { background: #d1d5db; }

/* ── Transcript bubbles ───────────────────────────────────────────────────── */
.bubble-agent {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fcd34d;
  border-radius: 1rem 1rem 0.25rem 1rem;
  padding: 0.75rem 1rem;
  max-width: 85%;
}
.bubble-lead {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem 1rem 1rem 0.25rem;
  padding: 0.75rem 1rem;
  max-width: 85%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.bubble-tool {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}
.bubble-system {
  text-align: center;
  padding: 0.25rem 0;
  font-size: 0.75rem;
  color: #9ca3af;
  font-style: italic;
}

/* ── KPI card hover ───────────────────────────────────────────────────────── */
.kpi-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* ── Table row hover ─────────────────────────────────────────────────────── */
.tbl-row:hover { background-color: #fffbeb; }

/* ── Chart container ─────────────────────────────────────────────────────── */
.chart-container { position: relative; height: 280px; }

/* ── Skeleton loading ────────────────────────────────────────────────────── */
@keyframes shimmer {
  from { background-position: -500px 0; }
  to   { background-position:  500px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 500px 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  border-radius: 0.5rem;
}

/* ── Focus rings ────────────────────────────────────────────────────────── */
input:focus, select:focus { outline: none; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }

/* ── Modal backdrop blur ────────────────────────────────────────────────── */
.modal-bg {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Responsive sidebar ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #sidebar { width: 60px; }
  #sidebar .nav-label { display: none; }
  #sidebar .logo-text { display: none; }
  #sidebar .sse-text  { display: none; }
}