/* LINCR Loop Provider Dashboard — Styles */

/* ── Base transitions ──────────────────────────────────────────── */
input, select, textarea, button {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* ── Filter buttons ────────────────────────────────────────────── */
.filter-btn,
.triage-filter-btn {
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  background: white;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.filter-btn:hover,
.triage-filter-btn:hover {
  background: #f3f4f6;
}
.filter-btn.active {
  background: #0d9488;
  color: white;
  border-color: #0d9488;
}
.triage-filter-btn.active {
  background: #0f766e;
  color: white;
  border-color: #0f766e;
}

/* ── Case row ───────────────────────��──────────────────────────── */
.case-row {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background-color 0.1s ease;
}
.case-row:hover {
  background-color: #f9fafb;
}
.case-row.selected {
  background-color: #f0fdfa;
  border-left: 3px solid #0d9488;
}

/* ── Triage dots ───────────────────────────────────────────────── */
.triage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.triage-dot.triage-green { background-color: #22c55e; }
.triage-dot.triage-yellow { background-color: #eab308; }
.triage-dot.triage-red { background-color: #ef4444; }
.triage-dot.triage-none { background-color: #d1d5db; }

/* ── Status pills ──────────────────────────────────────────────── */
.status-pill {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
  flex-shrink: 0;
}
.status-pill.status-pending { background: #f3f4f6; color: #6b7280; }
.status-pill.status-in_review { background: #ccfbf1; color: #0f766e; }
.status-pill.status-video_scheduled { background: #fef3c7; color: #92400e; }
.status-pill.status-approved { background: #dcfce7; color: #166534; }
.status-pill.status-needs_in_person { background: #fee2e2; color: #991b1b; }

/* ── Risk score dots ───────────────────────────────────────────── */
.risk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.risk-dot.risk-green { background-color: #22c55e; }
.risk-dot.risk-yellow { background-color: #eab308; }
.risk-dot.risk-red { background-color: #ef4444; }
.risk-dot.risk-gray { background-color: #d1d5db; }

/* ── Triage recommendation cards ───────────────────────────────── */
.triage-card-green {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
}
.triage-card-yellow {
  background-color: #fefce8;
  border-color: #fde68a;
}
.triage-card-red {
  background-color: #fef2f2;
  border-color: #fecaca;
}

/* ── Toast animation ───────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.2s ease-out;
}

/* ── Textarea disabled state ───────────────────────────────────── */
textarea:disabled {
  background-color: #f9fafb;
  color: #6b7280;
  cursor: not-allowed;
}

/* ── Scrollbar styling ─────────────────────────────────────────── */
#case-list::-webkit-scrollbar {
  width: 6px;
}
#case-list::-webkit-scrollbar-track {
  background: transparent;
}
#case-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
#case-list::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ── Nav tabs ──────────────────────────────────────────────────── */
.nav-tab {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  height: 52px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.nav-tab:hover {
  color: #0d9488;
  border-bottom-color: #14b8a6;
}
.nav-tab.active {
  color: #0d9488;
  border-bottom-color: #0d9488;
  font-weight: 600;
}

/* ── Invite channel buttons ─────────────────────────────────────── */
.invite-channel-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  border: 1.5px solid #e5e7eb;
  color: #6b7280;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 40px;
}
.invite-channel-btn:hover {
  border-color: #0d9488;
  color: #0d9488;
}
.invite-channel-btn.active {
  background: #f0fdfa;
  border-color: #0d9488;
  color: #0d9488;
  font-weight: 600;
}

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