/* ============================================================
   assets/css/custom.css — Estilos complementares ao Tailwind
   Sistema Medicall
   ============================================================ */

/* ---- Variáveis CSS globais -------------------------------- */
:root {
  --color-primary:   #0EA5E9;
  --color-secondary: #10B981;
  --color-bg:        #F0F9FF;
  --color-text:      #1E293B;
  --color-danger:    #EF4444;
  --sidebar-width:   240px;
}

/* ---- Scrollbar fina nos navegadores WebKit --------------- */
::-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; }

/* ---- Transição suave do sidebar -------------------------- */
#sidebar {
  transition: transform 0.3s ease-in-out;
}

/* ---- Badges de especialidade ----------------------------- */
/* Cada badge recebe uma classe .badge-esp-N (N = CD_ESPECIALIDADE % 8 + 1) */
.badge-esp { display: inline-flex; align-items: center; padding: 2px 10px;
             border-radius: 9999px; font-size: 0.7rem; font-weight: 600; }
.badge-esp-1 { background: #e0f2fe; color: #0369a1; }
.badge-esp-2 { background: #d1fae5; color: #065f46; }
.badge-esp-3 { background: #fef9c3; color: #854d0e; }
.badge-esp-4 { background: #fce7f3; color: #9d174d; }
.badge-esp-5 { background: #ede9fe; color: #5b21b6; }
.badge-esp-6 { background: #ffedd5; color: #9a3412; }
.badge-esp-7 { background: #f0fdf4; color: #15803d; }
.badge-esp-8 { background: #f1f5f9; color: #334155; }

/* ---- Linha do tempo do prontuário ----------------------- */
.timeline-list { position: relative; padding-left: 28px; }
.timeline-list::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}
.timeline-item { position: relative; padding-bottom: 24px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: -22px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--color-primary);
}
.timeline-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 2px;
}
.timeline-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
}

/* ---- Dropdown da busca global --------------------------- */
#busca-dropdown {
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
#busca-dropdown a { display: flex; text-decoration: none; }
#busca-dropdown a:last-child { border-radius: 0 0 10px 10px; }

/* ---- Alertas flutuantes ---------------------------------- */
.alerta-flutuante {
  pointer-events: all;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  animation: slideIn 0.25s ease;
}
.alerta-sucesso { background: #f0fdf4; border: 1px solid #86efac; color: #15803d; }
.alerta-erro    { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- Preview de foto (upload de profissional) ------------ */
#foto-preview {
  width: 100px; height: 100px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--color-primary);
  display: none;
}
#foto-preview.visivel { display: block; }

/* ---- Tabelas do sistema ---------------------------------- */
.tabela-medicall { width: 100%; border-collapse: collapse; }
.tabela-medicall th {
  background: #f8fafc;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
}
.tabela-medicall td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.875rem;
  color: #1e293b;
}
.tabela-medicall tr:last-child td { border-bottom: none; }
.tabela-medicall tr:hover td { background: #f8fafc; }

/* ---- Paginação ------------------------------------------- */
.paginacao { display: flex; gap: 4px; flex-wrap: wrap; }
.paginacao a, .paginacao span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  font-size: 0.8rem; font-weight: 500; text-decoration: none;
  border: 1px solid #e2e8f0; color: #475569;
  transition: all 0.15s;
}
.paginacao a:hover { background: #f0f9ff; border-color: var(--color-primary); color: var(--color-primary); }
.paginacao .ativo  { background: var(--color-primary); border-color: var(--color-primary); color: #fff; pointer-events: none; }
.paginacao .desativado { opacity: 0.4; pointer-events: none; }

/* ============================================================
   @media print — Ficha de impressão limpa
   ============================================================ */
@media print {
  /* Ocultar elementos de navegação */
  #sidebar,
  #sidebar-overlay,
  header,
  #modal-exclusao,
  #alertas-container,
  .print\:hidden,
  .btn-acao,
  .paginacao,
  nav,
  form[method="get"],
  .no-print { display: none !important; }

  /* Remover margens do wrapper */
  #app-wrapper,
  #main-content { padding: 0 !important; margin: 0 !important; }

  body { background: #fff !important; font-size: 12pt; color: #000; }

  /* Forçar largura total */
  .print-full { width: 100% !important; max-width: 100% !important; }

  /* Evitar quebra de página dentro de blocos importantes */
  .print-no-break { page-break-inside: avoid; }

  /* Margens A4 */
  @page { margin: 20mm 15mm; size: A4; }
}

/* ============================================================
   DARK MODE — estilos globais de conteúdo
   Aplicados quando <html class="dark"> (toggle no topbar)
   Cobre cards, tabelas, inputs e texto de TODAS as páginas
   sem precisar tocar em cada arquivo individualmente.
   ============================================================ */

/* ── Corpo / layout ──────────────────────────────────────── */
.dark body                  { background-color: #0f172a; color: #e2e8f0; }

/* ── Superfícies ─────────────────────────────────────────── */
.dark .bg-white             { background-color: #1e293b !important; }
.dark .bg-slate-50          { background-color: #0f172a !important; }
.dark .bg-slate-100         { background-color: #1e293b !important; }

/* ── Bordas ──────────────────────────────────────────────── */
.dark .border-slate-100     { border-color: #334155 !important; }
.dark .border-slate-200     { border-color: #334155 !important; }
.dark .border-t-2           { border-color: #334155 !important; }
.dark .divide-slate-100 > * + *,
.dark .divide-y > * + *     { border-color: #1e293b !important; }

/* ── Textos ──────────────────────────────────────────────── */
.dark .text-slate-800       { color: #f1f5f9 !important; }
.dark .text-slate-700       { color: #e2e8f0 !important; }
.dark .text-slate-600       { color: #94a3b8 !important; }
.dark .text-slate-500       { color: #64748b !important; }
.dark .text-slate-400       { color: #475569 !important; }

/* ── Inputs, selects, textareas ──────────────────────────── */
.dark input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
.dark select,
.dark textarea {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
  color-scheme: dark;
}
.dark input::placeholder,
.dark textarea::placeholder  { color: #475569; }

/* ── Hover rows / botões ─────────────────────────────────── */
.dark .hover\:bg-slate-50:hover   { background-color: #1e293b !important; }
.dark .hover\:bg-slate-100:hover  { background-color: #334155 !important; }
.dark .hover\:bg-slate-200:hover  { background-color: #334155 !important; }
.dark .hover\:bg-sky-50:hover     { background-color: rgba(14,165,233,0.12) !important; }

/* ── Tabela customizada ──────────────────────────────────── */
.dark .tabela-medicall th          { background: #0f172a; color: #94a3b8; border-color: #334155; }
.dark .tabela-medicall td          { border-color: #1e293b; color: #e2e8f0; }
.dark .tabela-medicall tr:hover td { background: #1e293b; }

/* ── Paginação ───────────────────────────────────────────── */
.dark .paginacao a,
.dark .paginacao span { background: #1e293b; border-color: #334155; color: #94a3b8; }
.dark .paginacao a:hover { background: rgba(14,165,233,0.15); border-color: #0EA5E9; color: #38bdf8; }

/* ── Badges de status ────────────────────────────────────── */
.dark .badge-status-agendado     { background: rgba(219,234,254,0.12); color: #93c5fd; }
.dark .badge-status-em_andamento { background: rgba(254,249,195,0.12); color: #fcd34d; }
.dark .badge-status-concluido    { background: rgba(209,250,229,0.12); color: #6ee7b7; }
.dark .badge-status-cancelado    { background: rgba(254,226,226,0.12); color: #fca5a5; }

/* ── Badges coloridos Tailwind ───────────────────────────── */
.dark .bg-sky-100     { background-color: rgba(14,165,233,0.15) !important; }
.dark .bg-emerald-100 { background-color: rgba(16,185,129,0.15) !important; }
.dark .bg-amber-100   { background-color: rgba(245,158,11,0.15) !important; }
.dark .bg-red-100     { background-color: rgba(239,68,68,0.15) !important; }
.dark .bg-violet-100  { background-color: rgba(139,92,246,0.15) !important; }
.dark .bg-yellow-100  { background-color: rgba(234,179,8,0.15) !important; }
.dark .bg-indigo-100  { background-color: rgba(99,102,241,0.15) !important; }
.dark .bg-green-100   { background-color: rgba(34,197,94,0.15) !important; }

.dark .text-sky-700   { color: #38bdf8 !important; }
.dark .text-emerald-800 { color: #6ee7b7 !important; }
.dark .text-amber-800 { color: #fcd34d !important; }
.dark .text-red-700   { color: #fca5a5 !important; }
.dark .text-yellow-800 { color: #fde047 !important; }

/* ── Timeline ────────────────────────────────────────────── */
.dark .timeline-card             { background: #1e293b; border-color: #334155; }
.dark .timeline-list::before     { background: #334155; }
.dark .timeline-dot              { border-color: #1e293b; }

/* ── Modais / overlays ───────────────────────────────────── */
.dark [id*="modal"] .bg-white,
.dark [id*="-modal"] .bg-white  { background-color: #1e293b !important; }

/* ── Scrollbar ───────────────────────────────────────────── */
.dark ::-webkit-scrollbar-track  { background: #1e293b; }
.dark ::-webkit-scrollbar-thumb  { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }