/* ═══════════════════════════════════════════
   CBCF - Sistema de Agendamento
   Estilo visual tipo Google Calendar
═══════════════════════════════════════════ */

:root {
  --sidebar-width: 200px;
  --sidebar-bg: #1a1a2e;
  --sidebar-accent: #4361ee;
  --toolbar-height: 56px;
  --color-agendado: #3788d8;
  --color-confirmado: #17a2b8;
  --color-recebido: #f39c12;
  --color-atendido: #27ae60;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: #f5f7fa; overflow: hidden; }

/* ── LOGIN ──────────────────────────────── */
.login-screen {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.login-card {
  background: white; border-radius: 16px; padding: 40px;
  width: 380px; box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.login-logo { text-align: center; margin-bottom: 32px; }
.login-logo i { font-size: 48px; color: #4361ee; }
.login-logo h2 { margin: 8px 0 4px; font-weight: 700; color: #1a1a2e; letter-spacing: 2px; }
.login-logo p { color: #6c757d; margin: 0; font-size: 14px; }

/* ── LAYOUT ─────────────────────────────── */
#app { display: flex; height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  padding: 0;
}
.sidebar-logo {
  padding: 20px 16px;
  display: flex; align-items: center; gap: 10px;
  color: white; font-weight: 700; font-size: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-logo i { color: #4361ee; font-size: 24px; }

.sidebar-nav { flex: 1; padding: 12px 0; }
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; color: rgba(255,255,255,0.7);
  text-decoration: none; font-size: 14px;
  transition: all 0.2s; border-left: 3px solid transparent;
}
.sidebar-link:hover { background: rgba(255,255,255,0.08); color: white; }
.sidebar-link.active {
  background: rgba(67, 97, 238, 0.2);
  color: white; border-left-color: #4361ee;
}
.sidebar-link i { font-size: 18px; min-width: 22px; }

.sidebar-footer { padding: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
.user-info { color: rgba(255,255,255,0.8); font-size: 13px; }
.user-info strong { display: block; }
.user-info small { color: rgba(255,255,255,0.5); }

.main-content {
  flex: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ── TOOLBAR ────────────────────────────── */
.toolbar {
  height: var(--toolbar-height);
  background: white;
  border-bottom: 1px solid #e5e7eb;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.toolbar-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* min-width:0 é o que permite este item flex encolher abaixo do tamanho do seu
   conteúdo (senão o conteúdo empurra .toolbar-filters para fora do contêiner
   em telas menores, cortando o botão "Novo Agendamento" para fora da viewport —
   esse era exatamente o bug: em laptops de 13" o botão ficava invisível). */
.toolbar-right { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
/* Os filtros formam a parte elástica da toolbar: encolhem e, se ainda não
   couberem, ganham scroll horizontal próprio — nunca empurram o botão de
   "Novo Agendamento" (flex-shrink:0 abaixo) para fora da tela. */
.toolbar-filters {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto;
}
.toolbar-filters::-webkit-scrollbar { height: 4px; }
#btnNewAppointment { flex-shrink: 0; }

/* Filtros de múltipla seleção da agenda: linha única com rolagem horizontal
   em vez de quebrar para uma 2ª linha, o que estouraria a altura fixa da toolbar.
   O tema do Select2 força flex-wrap:wrap com prioridade alta — sem !important
   aqui, o nowrap é ignorado e os chips que quebram de linha ficam cortados
   pelo overflow:hidden do contêiner pai (bug: chip selecionado "desaparece"). */
.toolbar-right .select2-selection--multiple {
  max-height: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.toolbar-right .select2-selection__rendered {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  white-space: nowrap;
  flex: 1 1 auto !important;
  min-width: 0;
}
.toolbar-right .select2-selection__rendered::-webkit-scrollbar { height: 4px; }
/* O campo de busca interno do Select2 (usado pra digitar e filtrar a lista) fica
   no mesmo flex-row dos chips e, por padrão, reivindica ~145px mesmo vazio —
   sobrando quase nada para os chips. Só encolhemos quando já existe ao menos 1
   chip selecionado; sem chips, ele precisa do espaço todo para mostrar o
   placeholder ("Todos os médicos" etc.) por completo. */
.toolbar-right .select2-selection__rendered:has(.select2-selection__choice) + .select2-search--inline {
  flex: 0 0 auto;
  max-width: 30px;
}
.toolbar-right .select2-search--inline .select2-search__field {
  width: 100% !important;
  min-width: 0;
}
/* Ícones dos status selecionados, exibidos fora da caixa do filtro (à direita
   dela) em vez de dentro do chip — o emoji é um glifo colorido alto que não cabia
   na altura fixa da toolbar junto com o texto. */
.filter-status-icons {
  font-size: 16px;
  margin-left: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Sem isso, o texto do chip é cortado no meio da palavra (ex: "Dr Ra") em vez de
   mostrar "..." — o detalhe completo de cada filtro já aparece na barra de resumo
   abaixo da toolbar, então aqui basta truncar com elegância. */
.toolbar-right .select2-selection__choice {
  max-width: 120px;
  flex-shrink: 0;
}
.toolbar-right .select2-selection__choice__display {
  display: inline-block;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Barra fixa com a descrição dos filtros ativos da agenda — sempre visível
   (não só ao passar o mouse), para sempre sabermos o que está sendo filtrado. */
.filter-summary-bar {
  min-height: 32px;
  flex-shrink: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 4px 20px;
  background: #f8f9fc;
  border-bottom: 1px solid #e5e7eb;
  font-size: 13px;
  color: #495057;
}

/* ── MultiPicker (múltipla seleção padrão do sistema) ────────
   Substitui o Select2 nos filtros e campos multi. O <select> nativo fica
   escondido (fonte da verdade) e a UI é toda desenhada por .mp. */
select.mp-native { display: none !important; }

.mp { position: relative; display: inline-block; }
/* Dentro de modais/formulários ocupa a largura toda, como um form-control. */
.modal .mp, .mp-chips-block .mp { display: block; width: 100%; }

.mp-trigger {
  display: flex; align-items: center;
  width: 100%; text-align: left; cursor: pointer;
}
.mp-trigger:disabled { cursor: not-allowed; opacity: .65; }
.mp-summary {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto;
}
.mp-summary.mp-placeholder { color: #8a94a6; }
.mp-disabled .mp-trigger { pointer-events: none; }

/* position:fixed + coordenadas calculadas em JS: assim o painel não é cortado
   pelo overflow-x:auto da toolbar de filtros nem preso dentro do modal. */
.mp-panel {
  position: fixed; z-index: 1080;
  min-width: 220px; max-width: 360px;
  background: #fff; border: 1px solid #d5d9e0; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  padding: 8px;
}
.mp-panel[hidden] { display: none; }
.mp-search { margin-bottom: 6px; }
.mp-actions {
  display: flex; gap: 12px; margin-bottom: 6px;
  font-size: 12px;
}
.mp-actions a { text-decoration: none; }
.mp-list { max-height: 260px; overflow-y: auto; }
.mp-group {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: #8a94a6; letter-spacing: .4px; padding: 6px 4px 2px;
}
.mp-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; margin: 0; border-radius: 5px; cursor: pointer;
  font-size: 14px;
}
.mp-item:hover { background: #f0f2fa; }
.mp-item input { flex-shrink: 0; cursor: pointer; }
.mp-item.mp-hidden { display: none; }
.mp-empty { color: #8a94a6; font-size: 13px; padding: 6px; }

/* Faixa discreta de chips do que foi selecionado (fora da caixa do filtro). */
.mp-chipset { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mp-chipset:empty { display: none; }
.mp-chipset-block { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mp-chip-prefix { font-size: 12px; color: #6c757d; margin: 0 2px 0 4px; }
.mp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eef1fb; color: #35408e;
  border: 1px solid #dbe0f5; border-radius: 12px;
  padding: 1px 4px 1px 8px; font-size: 12px; line-height: 1.6;
  max-width: 220px;
}
.mp-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-chip-x {
  border: 0; background: transparent; color: #7883c0; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; border-radius: 50%;
}
.mp-chip-x:hover { color: #b02a37; }

/* Barra de resumo da agenda: dica só quando não há nenhum filtro ativo. */
#agendaFilterSummary .filter-summary-hint { color: #6c757d; }

/* Faixa de chips compartilhada abaixo dos filtros do dashboard. */
.mp-chips-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mp-chips-strip:empty { display: none; }
.mp-chips-strip { margin-top: 8px; }

/* Largura dos filtros multi do dashboard (o <select> escondido não a define). */
#dashApptDoctors + .mp { width: 190px; }
#dashApptProcedures + .mp { width: 210px; }

/* ── CALENDAR ───────────────────────────── */
#calendar {
  flex: 1;
  padding: 16px;
  overflow: auto;
  background: white;
  height: calc(100vh - var(--toolbar-height) - 32px);
}

/* FullCalendar tweaks */
.fc { font-family: inherit; }
.fc-toolbar-title { font-size: 18px !important; font-weight: 600 !important; }
.fc-button-primary { background: #4361ee !important; border-color: #4361ee !important; }
.fc-button-primary:hover { background: #3451d1 !important; }
.fc-button-primary:not(:disabled).fc-button-active { background: #3451d1 !important; }
.fc-event {
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer;
  font-size: 12px !important;
  padding: 2px 6px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.fc-event-title { font-weight: 600 !important; }
.fc-daygrid-event { padding: 2px 6px !important; }
.fc-timegrid-event .fc-event-main { padding: 3px 6px; }

/* Status badges no evento */
.event-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.7); display: inline-block; margin-right: 4px;
}

/* Card do evento: uma única linha, com os ícones (modalidade/status/imagem/
   prontuário) em contêineres de largura fixa (flex-shrink:0) e só o nome do
   paciente encolhendo/truncando — assim a bolinha de "uso de imagem" nunca é
   cortada junto do texto, mesmo com nome de paciente extenso. Os detalhes
   completos (procedimentos, médico, modalidade, uso de imagem) ficam no
   tooltip ao passar o mouse (.appt-tooltip), em vez de linhas extras no card. */
.appt-card-title {
  display: flex; align-items: center; gap: 4px;
  font-weight: 600; font-size: 12px; line-height: 1.3;
  min-width: 0; max-width: 100%; overflow: hidden;
}

/* Visão mensal (dayGridMonth): nome de paciente longo NÃO pode invadir o dia
   seguinte. O evento fica contido na célula do dia e o nome trunca no fim do
   quadrado. O FullCalendar não recorta o bloco por padrão — forçamos aqui. */
.fc-daygrid-event-harness { max-width: 100%; overflow: hidden; }
.fc-daygrid-event { overflow: hidden; }
.fc-daygrid-event .fc-event-main { min-width: 0; max-width: 100%; overflow: hidden; }
.appt-card-icons, .appt-card-flags {
  display: inline-flex; align-items: center; gap: 3px;
  flex-shrink: 0; white-space: nowrap;
}
.appt-card-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appt-consent-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; border: 1px solid rgba(255,255,255,.7);
}
/* Nome do médico exibido só na visão de lista (listWeek), ao lado do paciente. */
.appt-card-doctor {
  flex-shrink: 0; white-space: nowrap;
  font-weight: 500; color: #6c757d; font-size: 12px;
}
.appt-card-doctor::before { content: "·"; margin: 0 6px; color: #adb5bd; }
.appt-card-doctor .bi { margin-right: 3px; }
/* Tarja exibida no card quando a cirurgia é executada em hospital (na clínica
   do CBCF não há tarja). Fundo escuro translúcido para legibilidade sobre
   qualquer cor de médico. */
.appt-card-tag {
  display: block;
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px; font-weight: 700; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .3px;
  padding: 0 5px; border-radius: 4px;
  background: rgba(0, 0, 0, .32); color: #fff;
}

/* Tarja de alerta do paciente — topo do cadastro, vermelha e bem visível. */
.patient-alert-banner {
  display: flex; align-items: flex-start; gap: 8px;
  background: #dc3545; color: #fff;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
  font-weight: 600; line-height: 1.4; white-space: pre-wrap;
  box-shadow: 0 1px 4px rgba(220, 53, 69, .4);
}
.patient-alert-banner .bi { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

/* Ícone (!) discreto no cabeçalho: apagado (cinza) quando não há alerta, aceso
   (vermelho) quando há. Sempre clicável para abrir o editor. */
.patient-alert-toggle {
  border: none; background: transparent; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #adb5bd; font-size: 1rem; line-height: 1;
  transition: background .15s, color .15s;
}
.patient-alert-toggle:hover { background: rgba(0,0,0,.06); color: #6c757d; }
.patient-alert-toggle.has-alert { color: #dc3545; }
.patient-alert-toggle.has-alert:hover { background: rgba(220,53,69,.12); color: #dc3545; }

/* Editor recolhível do alerta. */
.patient-alert-editor {
  background: #fff5f5; border: 1px solid #f1aeb5; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 14px;
}
.patient-alert-editor .form-text { margin-bottom: 0; }

/* Os campos do cadastro nascem readonly (truque p/ o Chrome não oferecer salvar
   endereço ao abrir). Mantém a aparência de campo editável normal — o readonly
   sai assim que o usuário clica para editar. */
#patientModal .form-control[readonly] { background-color: #fff; }

/* ── TABLE VIEWS ────────────────────────── */
.table-container {
  flex: 1; min-height: 0; overflow: auto; padding: 16px;
}

/* Relatório: a section precisa virar um flex-column que preenche toda a altura
   da .main-content (que é overflow:hidden), senão a tabela não rola — o conteúdo
   que passa da tela ficava cortado, sem barra. Com isso, a .table-container
   interna rola livremente até a última linha (independente de quantas foram
   filtradas) e os filtros do topo ficam fixos. */
#viewReports,
#viewRh {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
#viewReports .toolbar,
#viewReports > .d-flex,
#viewRh .toolbar,
#viewRh > .d-flex { flex-shrink: 0; }

/* Colunas não encolhem além do conteúdo: o que não couber na largura vira
   rolagem horizontal, em vez de espremer/quebrar as células. Cabeçalho fixo
   no topo enquanto rola verticalmente. */
#viewReports .table-container table,
#viewRh .table-container table { width: max-content; min-width: 100%; }
#viewReports .table-container th,
#viewReports .table-container td,
#viewRh .table-container th,
#viewRh .table-container td { white-space: nowrap; }
#viewReports .table-container thead th,
#viewRh .table-container thead th {
  position: sticky; top: 0; z-index: 3; background: #f8f9fa;
}
/* RH em abas (Funcionários × Dashboard). Cada painel preenche a altura da
   section (que é flex-column overflow:hidden) e tem sua própria área rolável:
   a lista pela .table-container; o dashboard pelo .rh-dash-scroll. */
#viewRh .rh-tabs { flex-shrink: 0; padding: 0 4px; }
.rh-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#viewRh .rh-pane > .d-flex,
#viewRh .rh-dash-filter { flex-shrink: 0; }
.rh-dash-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 6px 24px 2px; }

.table th { font-size: 12px; text-transform: uppercase; color: #6c757d; font-weight: 600; background: #f8f9fa; }
.table td { vertical-align: middle; font-size: 14px; }
.table tbody tr:hover { background: #f0f4ff; cursor: pointer; }

/* Linha de categoria (CIRURGIAS/PROCEDIMENTOS/CONSULTAS): precisa se destacar
   claramente das linhas de dados, então não recebe o hover/cursor genérico da tabela. */
.table tbody tr.procedure-category-row:hover { background: var(--sidebar-bg); cursor: default; }
.procedure-category-row td {
  background: var(--sidebar-bg);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ── FILTRO/ORDENAÇÃO DE COLUNAS (estilo planilha) ── */
.report-th {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  white-space: nowrap;
}
.report-th-label { cursor: pointer; user-select: none; }
.report-th-label:hover { color: #1a1a2e; }
.report-sort-icon { font-size: 10px; margin-left: 4px; visibility: hidden; }
.report-sort-icon.active { visibility: visible; color: #4361ee; }
.report-filter-btn { padding: 0 2px; color: #adb5bd; line-height: 1; text-decoration: none; }
.report-filter-btn:hover { color: #4361ee; }
.report-filter-btn i.bi-funnel-fill { color: #4361ee; }
.report-filter-menu { min-width: 220px; max-height: 320px; overflow-y: auto; padding-bottom: 8px; }
.report-filter-actions { display: flex; gap: 12px; font-size: 12px; }
.report-filter-actions a { text-decoration: none; }
.report-filter-list { max-height: 180px; overflow-y: auto; }
.report-filter-item label { font-size: 13px; font-weight: 400; text-transform: none; }

.empty-state {
  text-align: center; padding: 60px 20px; color: #adb5bd;
}
.empty-state i { font-size: 48px; display: block; margin-bottom: 12px; }

/* ── BADGES STATUS ──────────────────────── */
.badge-agendado  { background: var(--color-agendado)  !important; }
.badge-confirmado { background: var(--color-confirmado) !important; }
.badge-recebido  { background: var(--color-recebido)  !important; }
.badge-atendido  { background: var(--color-atendido)  !important; }

/* ── MODALS ─────────────────────────────── */
.modal-content { border-radius: 12px; border: none; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.modal-header { border-bottom: 1px solid #e5e7eb; }
.modal-footer { border-top: 1px solid #e5e7eb; }

/* Select2 fixes */
.select2-container { width: 100% !important; }
.select2-container .select2-selection--multiple { min-height: 38px; }
/* Os filtros da agenda ficam fora de um form/modal e precisam de uma largura
   própria — sem isso, a regra acima (pensada para selects dentro de modais)
   força width:100% e espreme as caixas de filtro, cortando o texto dos chips.
   Usamos clamp() em vez de px fixo para encolher em telas menores (ex: laptop
   13" em 1280px) e nunca depender só do scroll de .toolbar-filters — é isso
   que mantinha o botão "Novo Agendamento" cortado para fora da tela. */
#filterDoctor + .mp { width: clamp(120px, 13vw, 190px); }
#filterCategory + .mp { width: clamp(120px, 13vw, 190px); }
#filterStatus + .mp { width: clamp(120px, 13vw, 190px); }
#filterModality + .mp { width: clamp(110px, 12vw, 180px); }

/* ── PRONTUÁRIO ─────────────────────────── */
.record-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: #6c757d; letter-spacing: 0.5px; margin-bottom: 6px;
}

/* Histórico do paciente: lista (mestre) à esquerda + prontuário (detalhe) à
   direita. A barra lateral fica em 15% do quadro, com um min-width para não
   colapsar em telas/modais menores. */
.history-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.history-layout {
  display: flex; gap: 16px;
  height: calc(80vh - 110px);
}
.history-sidebar {
  flex: 0 0 15%;
  min-width: 160px;
  overflow-y: auto;
  border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 6px;
  background: #f8f9fc;
}
.history-detail {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 16px;
  background: white;
}
.history-list-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-radius: 6px; margin-bottom: 4px;
  cursor: pointer;
}
.history-list-item:hover { background: #eef1fd; }
.history-list-item.active { background: #4361ee; color: white; }
.history-list-item.active .text-muted { color: rgba(255,255,255,0.75) !important; }
.history-list-item-date { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.record-field-value {
  font-size: 14px; color: #1a1a2e; margin-bottom: 4px; white-space: pre-wrap;
}

/* ── UTILITY ────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.section-view { height: calc(100vh - var(--toolbar-height)); display: flex; flex-direction: column; }

#viewPatients, #viewDoctors, #viewProcedures {
  height: calc(100vh - var(--toolbar-height));
  display: flex; flex-direction: column;
}

.fc-view-harness {
  height: calc(100vh - var(--toolbar-height) - 60px) !important;
}

/* Tooltip no evento do calendário: painel rápido (NOME, PROCEDIMENTOS,
   MODALIDADE, USO DE IMAGEM) ao passar o mouse, já que o card em si só
   tem espaço para uma linha. .tooltip-inner é o contêiner do Bootstrap
   Tooltip; por padrão ele centraliza e limita a largura do texto, o que
   quebra feio um conteúdo em várias linhas com rótulos. */
.appt-tooltip .tooltip-inner {
  text-align: left;
  max-width: 260px;
  padding: 10px 12px;
}
.appt-tooltip-title {
  font-weight: 700; font-size: 13px; margin-bottom: 6px;
}
.appt-tooltip-row {
  font-size: 12px; margin-bottom: 3px; display: flex; gap: 4px;
}
.appt-tooltip-row:last-child { margin-bottom: 0; }
.appt-tooltip-label { font-weight: 600; opacity: 0.85; flex-shrink: 0; }
.appt-tooltip-watermark {
  font-size: 10px; color: #aaa; text-align: right; margin-top: 6px;
}

/* Menu flutuante "Agendar ou Bloquear" ao clicar um slot vazio do calendário. */
.slot-choice-menu {
  position: fixed;
  z-index: 2000;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
}
.slot-choice-item {
  display: flex;
  align-items: center;
  border: none;
  background: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.slot-choice-item:hover { background: #f1f3f5; }
.slot-choice-item[data-action="bloquear"] { color: #c0392b; }

/* Bloqueio de agenda: faixa de fundo sombreada (FullCalendar background event).
   opacity:1 + background em rgba (em vez do opacity:0.3 padrão do FullCalendar)
   porque opacity no elemento esmaeceria também o texto (nome/motivo) injetado
   nele em eventDidMount — só a cor de fundo precisa ser translúcida. */
.fc-bg-event {
  opacity: 1 !important;
  background: rgba(108, 117, 125, 0.28) !important;
  cursor: pointer;
}
.fc-block-label {
  position: absolute;
  top: 2px; left: 4px; right: 4px;
  font-size: 11px;
  line-height: 1.3;
  color: #495057;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.fc-block-label-name { display: block; font-weight: 700; }
.fc-block-label-reason { display: block; font-weight: 500; opacity: 0.85; }

/* Color picker */
input[type="color"].form-control-color { height: 38px; padding: 2px 6px; }

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

/* Toast */
.toast { border-radius: 8px !important; }
.toast.bg-success { --bs-bg-opacity: 0.95; }
.toast.bg-danger { --bs-bg-opacity: 0.95; }

/* Tags de Formulários Padrão: Arial preto, para copiar limpo para o Word */
.tag-token {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  white-space: nowrap;
}