/* public/css/finclin-components.css — estilos dos componentes reutilizáveis (Etapa 3 da agenda). */

/* O atributo hidden sempre esconde, mesmo com classes de exibição do Tailwind (block, flex, grid) no elemento */
[hidden] { display: none !important; }

/* Barra de filtros: seletor de múltipla escolha (<details>) sem o marcador nativo */
.filter-dropdown > summary::-webkit-details-marker { display: none; }

/* FullCalendar (views/partials/fullcalendar-assets.ejs): cores do tema e dark mode */
.fc { --fc-border-color: #e5e7eb; --fc-today-bg-color: rgba(59, 130, 246, .08); --fc-button-bg-color: #2563eb;
      --fc-button-border-color: #2563eb; --fc-button-hover-bg-color: #1d4ed8; --fc-button-hover-border-color: #1d4ed8;
      --fc-button-active-bg-color: #1e40af; --fc-button-active-border-color: #1e40af; font-size: .875rem; }
.dark .fc { --fc-border-color: #374151; --fc-page-bg-color: #111827; --fc-neutral-bg-color: #1f2937;
            --fc-list-event-hover-bg-color: #1f2937; --fc-today-bg-color: rgba(59, 130, 246, .15); color: #e5e7eb; }
.dark .fc .fc-col-header-cell, .dark .fc .fc-timegrid-slot-label { color: #9ca3af; }

/* Agenda: horário de atendimento do profissional ao fundo do calendário (views/agenda/index.ejs) */
.fc .fc-work-hours, .fc-work-hours-legend { background: rgba(16, 185, 129, .14) !important; opacity: 1; }
.dark .fc .fc-work-hours, .dark .fc-work-hours-legend { background: rgba(16, 185, 129, .18) !important; }
/* encerrados que não ocupam horário (cancelado, faltou…): só aparecem quando filtrados — esmaecidos e riscados */
.fc .fc-event-closed { opacity: .5; }
.fc .fc-event-closed .fc-event-title, .fc .fc-event-closed .fc-event-time, .fc .fc-event-closed .fc-list-event-title { text-decoration: line-through; }
.fc .fc-work-hours .fc-event-title { font-size: .7rem; color: #047857; font-style: normal; padding: 2px 4px; }
.fc .fc-timegrid-event .fc-event-main { font-size: .75rem; line-height: 1.15; }
.fc .fc-toolbar-title { font-size: 1.05rem; }
/* Agenda: linhas de 15 min altas (área de clique confortável), hora cheia destacada e quartos de hora discretos */
.fc .fc-timegrid-slot { height: 2rem; }
.fc .fc-timegrid-slot-label.fc-slot-hour { font-weight: 600; }
.fc .fc-timegrid-slot-label.fc-slot-quarter .fc-timegrid-slot-label-cushion { font-size: .7rem; color: #9ca3af; }
.fc .fc-timegrid-slot-lane.fc-slot-quarter { border-top-style: dotted; }
.fc .fc-timegrid-slot-lane:hover { background: rgba(59, 130, 246, .06); }
@media (max-width: 639px) { .fc .fc-toolbar-title { font-size: .95rem; } .fc .fc-button { padding: .3rem .5rem; font-size: .8rem; } }

/* Agenda: barra do calendário — botões em pílula, título em destaque, visões num seletor segmentado */
.fc .fc-toolbar-title { color: #2563eb; font-weight: 700; }
.dark .fc .fc-toolbar-title { color: #60a5fa; }
.fc .fc-button { border-radius: 9999px; font-weight: 500; box-shadow: none !important; }
.fc .fc-button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.fc .fc-button-group:has(.fc-prev-button) { gap: .25rem; }
.fc .fc-button-group > .fc-prev-button, .fc .fc-button-group > .fc-next-button {
  border-radius: 9999px !important; width: 2.25rem; height: 2.25rem; padding: 0;
  background: #f1f5f9; border-color: #f1f5f9; color: #334155; }
.fc .fc-prev-button:hover, .fc .fc-next-button:hover { background: #e2e8f0; border-color: #e2e8f0; color: #0f172a; }
.dark .fc .fc-prev-button, .dark .fc .fc-next-button { background: #1f2937; border-color: #1f2937; color: #e5e7eb; }
.dark .fc .fc-prev-button:hover, .dark .fc .fc-next-button:hover { background: #374151; border-color: #374151; }
.fc .fc-button-group:has(.fc-listWeek-button) { background: #f1f5f9; border-radius: 9999px; padding: 3px; }
.fc .fc-button-group:has(.fc-listWeek-button) > .fc-button {
  border-radius: 9999px !important; background: transparent; border-color: transparent; color: #334155; padding: .35rem .9rem; }
.fc .fc-button-group:has(.fc-listWeek-button) > .fc-button:hover { color: #0f172a; }
.fc .fc-button-group:has(.fc-listWeek-button) > .fc-button.fc-button-active { background: #0f172a; border-color: #0f172a; color: #fff; }
.dark .fc .fc-button-group:has(.fc-listWeek-button) { background: #1f2937; }
.dark .fc .fc-button-group:has(.fc-listWeek-button) > .fc-button { color: #d1d5db; }
.dark .fc .fc-button-group:has(.fc-listWeek-button) > .fc-button.fc-button-active { background: #f9fafb; border-color: #f9fafb; color: #111827; }
/* botão de hoje: mesmo visual de views/partials/today-button.ejs — faixa com o mês (--fc-today-month, public/js/agenda.js)
   e o dia (texto do botão); contorno azul quando hoje está na tela */
.fc .fc-hoje-button {
  display: inline-grid; grid-template-rows: auto 1fr; align-items: center; text-align: center;
  width: 2.25rem; height: 2.25rem; padding: 0; margin-left: .5rem !important; overflow: hidden; border-radius: .5rem;
  background: #fff; border: 1px solid #d1d5db; color: #374151; font-size: 15px; font-weight: 700; line-height: 1; }
.fc .fc-hoje-button::before {
  content: var(--fc-today-month, ''); display: block; padding: 2px 0; background: #94a3b8; color: #fff;
  font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.fc .fc-hoje-button:hover { background: #f9fafb; border-color: #d1d5db; color: #374151; }
.fc-showing-today .fc .fc-hoje-button { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6 !important; }
.dark .fc .fc-hoje-button { background: #1f2937; border-color: #4b5563; color: #e5e7eb; }
.dark .fc .fc-hoje-button::before { background: #475569; }
/* cabeçalho dos dias em faixa clara */
.fc .fc-scrollgrid-section-header > th { background: #f8fafc; }
.fc .fc-col-header-cell-cushion { padding: .6rem .25rem; color: #64748b; font-weight: 600; }
.fc .fc-daygrid-day-number { color: #64748b; font-weight: 500; }
.dark .fc .fc-scrollgrid-section-header > th { background: #1f2937; }

/* Agenda: cartão do agendamento — fundo claro, texto e etiqueta lateral na cor do status (--ev, public/js/agenda.js) e
   bolinha na cor do serviço */
.fc .fc-timegrid-event:not(.fc-bg-event), .fc .fc-daygrid-block-event {
  background: color-mix(in srgb, var(--ev) 13%, #fff) !important; border: 0 !important;
  border-left: 3px solid var(--ev) !important; border-radius: 3px 8px 8px 3px; }
.fc .fc-daygrid-block-event { border-radius: 3px 9999px 9999px 3px; margin-top: 2px; }
.fc .fc-timegrid-event:not(.fc-bg-event) .fc-event-main, .fc .fc-daygrid-block-event .fc-event-main {
  color: color-mix(in srgb, var(--ev) 80%, #000); }
.dark .fc .fc-timegrid-event:not(.fc-bg-event), .dark .fc .fc-daygrid-block-event { background: color-mix(in srgb, var(--ev) 24%, #111827) !important; }
.dark .fc .fc-timegrid-event:not(.fc-bg-event) .fc-event-main, .dark .fc .fc-daygrid-block-event .fc-event-main {
  color: color-mix(in srgb, var(--ev) 45%, #fff); }
.fc .fc-ev { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 5px; padding: 2px 4px; font-weight: 600; overflow: hidden; }
.fc .fc-daygrid-event .fc-ev { flex-wrap: nowrap; white-space: nowrap; }
.fc .fc-timegrid-event .fc-ev { height: 100%; align-content: flex-start; }
.fc .fc-timegrid-event .fc-ev-title { overflow-wrap: anywhere; }
.fc .fc-ev { position: relative; }
/* registrado pelo assistente (MCP): robô no canto inferior direito do cartão */
.fc .fc-ev-bot { position: absolute; right: 8px; bottom: 6px; font-size: .7rem; opacity: .75; }
.fc .fc-daygrid-event .fc-ev { padding-right: 1.4rem; }
.fc .fc-daygrid-event .fc-ev-bot { right: 10px; bottom: 50%; transform: translateY(50%); }
.fc .fc-ev-dot { flex: none; width: 6px; height: 6px; border-radius: 9999px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
.fc .fc-ev-time { font-weight: 700; }
.fc .fc-ev-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fc .fc-event-closed .fc-ev-title, .fc .fc-event-closed .fc-ev-time { text-decoration: line-through; }

/* Balão (tooltip) global — public/js/finclin-tooltip.js: preto, com seta apontando para o elemento */
.fin-tip { position: absolute; z-index: 9999; display: none; max-width: 18rem; padding: .45rem .7rem; border-radius: .6rem;
  background: #111; color: #f3f4f6; font-size: .75rem; line-height: 1.35; pointer-events: none; white-space: pre-line;
  overflow-wrap: anywhere; box-shadow: 0 10px 25px rgba(0, 0, 0, .25); }
.fin-tip::after { content: ''; position: absolute; top: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #111; }
.fin-tip.fin-tip-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #111; }
.fin-tip-title { font-weight: 700; font-size: .8rem; color: #fff; }
.fin-tip-time { color: #9ca3af; margin-bottom: 2px; }
.dark .fin-tip { background: #000; box-shadow: 0 0 0 1px #374151, 0 10px 25px rgba(0, 0, 0, .5); }
.dark .fin-tip::after { border-top-color: #000; }
.dark .fin-tip.fin-tip-below::after { border-top-color: transparent; border-bottom-color: #000; }

/* Campo com máscara inválido (data/hora — public/js/masks.js marca ao sair do campo e FinclinForm.checkMasks ao enviar) */
/* só com texto digitado: obrigatório vazio não fica vermelho (o placeholder aparece quando vazio) */
input[data-mask]:not(:placeholder-shown):invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 1px #ef4444; }