/* ============================================
   Zymed Consultório - Design System
   Tipografia e harmonia visual padronizadas.
   Camada global que complementa o Bootstrap sem quebrá-lo.
   ============================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Família ---------- */
  --ds-font:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---------- Tabelas = referência visual global (fila / agendamentos) ---------- */
  --ds-table-body-size: 0.875rem; /* 14px — células e texto principal do sistema */
  --ds-table-head-size: 0.75rem; /* 12px — thead, rótulos uppercase */
  --ds-table-badge-size: 0.6875rem; /* 11px — badges dentro de tabelas */
  --ds-table-size: var(--ds-table-body-size); /* compat: fila, responsive */
  --ds-table-weight: 400;
  --ds-table-head-weight: 600;

  /* ---------- Hierarquia tipográfica (proporcional às tabelas) ---------- */
  --ds-page-title-size: 1.25rem; /* 20px */
  --ds-page-title-weight: 600;
  --ds-section-title-size: 1.125rem; /* 18px */
  --ds-section-title-weight: 600;
  --ds-card-title-size: 1rem; /* 16px */
  --ds-card-title-weight: 600;
  --ds-text-base-size: var(--ds-table-body-size);
  --ds-text-base-weight: 400;
  --ds-menu-size: var(--ds-table-body-size);
  --ds-menu-weight: 500;
  --ds-label-size: 0.8125rem; /* 13px */
  --ds-label-weight: 500;
  --ds-input-size: var(--ds-table-body-size);
  --ds-input-weight: 400;
  --ds-text-aux-size: 0.75rem; /* 12px — telefone, meta, breadcrumb */
  --ds-text-aux-weight: 400;

  /* ---------- Line-height ---------- */
  --ds-line-title: 1.3;
  --ds-line-text: 1.5;

  /* ---------- Inputs ---------- */
  --ds-input-min-height: 44px;
  --ds-input-padding-y: 0.625rem;
  --ds-input-padding-x: 0.875rem;
  --ds-input-radius: 8px;
  --ds-input-border: 1px solid var(--border-color, #cbd5e1);
  --ds-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.15);
  --ds-focus-border-color: var(--primary-color, #2563eb);

  /* ---------- Botões ---------- */
  --ds-btn-font-size: var(--ds-table-body-size);
  --ds-btn-font-size-sm: 0.8125rem; /* 13px */
  --ds-btn-weight: 600;
  --ds-btn-radius: 8px;
  --ds-btn-padding-y: 0.5rem;
  --ds-btn-padding-x: 1rem;
  --ds-btn-gap: 0.5rem;

  /* ---------- Layout (sidebar, topbar, cards) ---------- */
  --ds-card-radius: 12px;
  --ds-card-header-bg: var(--bg-light, #f8fafc);
  --ds-card-border: 1px solid var(--border-color, #e2e8f0);
  --ds-sidebar-font-size: var(--ds-table-body-size);
  --ds-sidebar-font-weight: 500;
  --ds-topbar-font-size: var(--ds-table-body-size);
  --ds-table-font-size: var(--ds-table-body-size);

  /* ---------- Espaçamento consistente ---------- */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
}

/* ========== Base: body e texto global ========== */
body {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-text-base-size) !important;
  font-weight: var(--ds-text-base-weight) !important;
  line-height: var(--ds-line-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== Classes de tipografia reutilizáveis ========== */
.page-title {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-page-title-size) !important;
  font-weight: var(--ds-page-title-weight) !important;
  line-height: var(--ds-line-title) !important;
  color: var(--text-primary, #0f172a) !important;
  margin: 0 0 var(--ds-space-4, 1rem) 0 !important;
}

.section-title {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-section-title-size) !important;
  font-weight: var(--ds-section-title-weight) !important;
  line-height: var(--ds-line-title) !important;
  color: var(--text-primary, #0f172a) !important;
  margin: 0 0 var(--ds-space-3, 0.75rem) 0 !important;
}

.card-title {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-card-title-size) !important;
  font-weight: var(--ds-card-title-weight) !important;
  line-height: var(--ds-line-title) !important;
  color: var(--text-dark, #1e293b) !important;
  margin: 0 !important;
}

.text-base {
  font-size: var(--ds-text-base-size) !important;
  font-weight: var(--ds-text-base-weight) !important;
  line-height: var(--ds-line-text) !important;
}

.text-aux {
  font-size: var(--ds-text-aux-size) !important;
  font-weight: var(--ds-text-aux-weight) !important;
  line-height: var(--ds-line-text) !important;
  color: var(--text-muted, #64748b) !important;
}

/* ========== Títulos na área de conteúdo (sobrescreve apenas o necessário) ========== */
.content h1,
.content-body h1,
.container-fluid > h1,
.page-title {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-page-title-size) !important;
  font-weight: var(--ds-page-title-weight) !important;
  line-height: var(--ds-line-title) !important;
  margin-bottom: var(--ds-space-4, 1rem) !important;
}

.content h2,
.content-body h2,
.section-title {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-section-title-size) !important;
  font-weight: var(--ds-section-title-weight) !important;
  line-height: var(--ds-line-title) !important;
  margin-bottom: var(--ds-space-3, 0.75rem) !important;
}

.content h3,
.content-body h3 {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-card-title-size) !important;
  font-weight: var(--ds-card-title-weight) !important;
  line-height: var(--ds-line-title) !important;
  margin-bottom: var(--ds-space-3, 0.75rem) !important;
}

/* ========== Sidebar: menu lateral ========== */
.sidebar,
.sidebar * {
  font-family: var(--ds-font) !important;
}

.sidebar .nav-link,
.sidebar .section-title,
.sidebar .item-text,
.sidebar .brand-name,
.sidebar .brand .brand-text .brand-name {
  font-size: var(--ds-menu-size) !important;
  font-weight: var(--ds-menu-weight) !important;
  line-height: var(--ds-line-text) !important;
}

.sidebar .brand-subtitle {
  font-size: var(--ds-text-aux-size) !important;
  font-weight: var(--ds-text-aux-weight) !important;
}

/* Títulos de seção do menu: alinhados ao cabeçalho de tabela (uppercase 12px) */
.sidebar .section-title {
  font-size: var(--ds-table-head-size) !important;
  font-weight: var(--ds-table-head-weight) !important;
  line-height: var(--ds-line-text) !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.055em !important;
  padding: 0.75rem 1rem 0.375rem !important;
  margin: 0.5rem 0 0 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.sidebar .section-title:first-of-type {
  margin-top: 0 !important;
  padding-top: 0.5rem !important;
}

.sidebar .section-title i {
  opacity: 0.65 !important;
  font-size: var(--ds-table-badge-size) !important;
}

/* ========== Topbar ========== */
.topbar,
.topbar * {
  font-family: var(--ds-font) !important;
}

.topbar .topbar-user-name,
.topbar .topbar-user-role,
.topbar .nav-link,
.topbar .btn {
  font-size: var(--ds-topbar-font-size) !important;
  font-weight: var(--ds-menu-weight) !important;
  line-height: var(--ds-line-text) !important;
}

/* ========== Cards: título e conteúdo ========== */
.card {
  font-family: var(--ds-font) !important;
  border-radius: var(--ds-card-radius) !important;
  border: var(--ds-card-border) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

.card-header {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-card-title-size) !important;
  font-weight: var(--ds-card-title-weight) !important;
  line-height: var(--ds-line-title) !important;
  background: var(--ds-card-header-bg) !important;
  padding: var(--ds-space-4, 1rem) var(--ds-space-5, 1.25rem) !important;
  border-bottom: var(--ds-input-border) !important;
}

.card-body {
  font-size: var(--ds-text-base-size) !important;
  font-weight: var(--ds-text-base-weight) !important;
  line-height: var(--ds-line-text) !important;
  padding: var(--ds-space-5, 1.25rem) var(--ds-space-6, 1.5rem) !important;
}

.card-footer {
  padding: var(--ds-space-4, 1rem) var(--ds-space-5, 1.25rem) !important;
  font-size: var(--ds-text-base-size) !important;
}

/* ========== Formulários: labels e inputs ========== */
.form-label,
label.form-label {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-label-size) !important;
  font-weight: var(--ds-label-weight) !important;
  line-height: var(--ds-line-text) !important;
  margin-bottom: var(--ds-space-2, 0.5rem) !important;
  color: var(--text-dark, #1e293b) !important;
}

/* Calendário Flatpickr acima de modais Bootstrap */
.flatpickr-calendar {
  z-index: 2000;
}

/* Asterisco obrigatório: inserido por js/required-field-markers.js */
.js-required-star {
  color: var(--bs-danger, #dc3545);
  font-weight: 600;
  margin-left: 0.125rem;
  white-space: nowrap;
}

.form-control,
.form-select,
.form-textarea,
input.form-control,
select.form-select,
textarea.form-control {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-input-size) !important;
  font-weight: var(--ds-input-weight) !important;
  line-height: var(--ds-line-text) !important;
  min-height: var(--ds-input-min-height) !important;
  padding: var(--ds-input-padding-y) var(--ds-input-padding-x) !important;
  border: var(--ds-input-border) !important;
  border-radius: var(--ds-input-radius) !important;
  box-sizing: border-box !important;
}

.form-control:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--ds-focus-border-color) !important;
  box-shadow: var(--ds-focus-ring) !important;
  outline: 0 !important;
}

.form-text,
.form-control::placeholder {
  font-size: var(--ds-text-aux-size) !important;
  line-height: var(--ds-line-text) !important;
}

.form-control::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

/* ========== Botões ========== */
.btn {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-btn-font-size) !important;
  font-weight: var(--ds-btn-weight) !important;
  line-height: var(--ds-line-text) !important;
  border-radius: var(--ds-btn-radius) !important;
  padding: var(--ds-btn-padding-y) var(--ds-btn-padding-x) !important;
  gap: var(--ds-btn-gap) !important;
}

.btn-sm {
  font-size: var(--ds-btn-font-size-sm) !important;
  padding: var(--ds-space-2, 0.5rem) var(--ds-space-3, 0.75rem) !important;
}

.btn-lg {
  font-size: var(--ds-btn-font-size) !important;
  padding: var(--ds-space-3, 0.75rem) var(--ds-space-5, 1.25rem) !important;
}

/* ========== Tabelas ========== */
.table {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-table-body-size) !important;
}

.table thead th {
  font-size: var(--ds-table-head-size) !important;
  font-weight: var(--ds-table-head-weight) !important;
  line-height: var(--ds-line-title) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.055em !important;
  color: var(--text-secondary, #495057) !important;
  padding: var(--ds-space-3, 0.75rem) var(--ds-space-4, 1rem) !important;
}

.table tbody td,
.table tbody th {
  font-size: var(--ds-table-body-size) !important;
  font-weight: var(--ds-table-weight) !important;
  line-height: var(--ds-line-text) !important;
  padding: var(--ds-space-3, 0.75rem) var(--ds-space-4, 1rem) !important;
}

.table tfoot td,
.table tfoot th {
  font-size: var(--ds-table-body-size) !important;
  font-weight: var(--ds-table-weight) !important;
  line-height: var(--ds-line-text) !important;
}

/* Badges em tabela — compactos; demais botões herdam corpo */
.table thead th .badge,
.table tbody td .badge,
.table tfoot td .badge {
  font-size: var(--ds-table-badge-size) !important;
  font-weight: var(--ds-table-head-weight) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.table thead th small,
.table tbody td small,
.table tfoot td small,
.table thead th .small,
.table tbody td .small,
.table tfoot td .small {
  font-size: var(--ds-text-aux-size) !important;
}

.table thead th .text-muted,
.table tbody td .text-muted,
.table tfoot td .text-muted,
.table thead th.text-muted,
.table tbody td.text-muted,
.table tfoot td.text-muted {
  font-size: var(--ds-text-aux-size) !important;
  color: var(--text-muted, #64748b) !important;
}

.table thead th strong,
.table tbody td strong,
.table tfoot td strong {
  font-size: inherit !important;
  font-weight: 600;
}

/* ========== Infobar e utilitários ========== */
.infobar,
.infobar * {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-text-aux-size) !important;
  font-weight: var(--ds-text-aux-weight) !important;
  line-height: var(--ds-line-text) !important;
}

.breadcrumb {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-text-aux-size) !important;
  line-height: var(--ds-line-text) !important;
}

.alert {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-text-base-size) !important;
  line-height: var(--ds-line-text) !important;
}

/* ========== Evitar tamanhos e margens aleatórias ---------- */
.content p,
.content-body p,
.card-body p {
  font-size: var(--ds-text-base-size) !important;
  line-height: var(--ds-line-text) !important;
  margin-bottom: var(--ds-space-3, 0.75rem) !important;
}

.content p:last-child,
.card-body p:last-child {
  margin-bottom: 0 !important;
}

/* ========== Modais com barra de rolagem no corpo (form envolvendo body + footer) ==========
   - Limite SEMPRE relativo à viewport (vh + dvh): em telas grandes o flex sozinho às vezes
     não encolhe o .modal-body e a rolagem só aparecia em alturas pequenas.
   - max-height no .modal-body com calc(100dvh - …) força área rolável em qualquer largura. */
.modal-dialog-scrollable {
  max-height: calc(100vh - 1.75rem) !important;
  max-height: calc(100dvh - 1.75rem) !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.modal-dialog-scrollable .modal-content {
  min-height: 0 !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.modal-dialog-scrollable .modal-content > .modal-header {
  flex-shrink: 0 !important;
}

.modal-dialog-scrollable .modal-content > form {
  display: flex !important;
  flex-direction: column !important;
  /* 1 1 0%: o form ocupa o espaço abaixo do header e permite encolher (scroll no body) */
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.modal-dialog-scrollable .modal-content > form .modal-header,
.modal-dialog-scrollable .modal-content > form .modal-footer {
  flex-shrink: 0 !important;
}

.modal-dialog-scrollable .modal-content > form .modal-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  /* Altura máxima explícita: rolagem em desktop, ultrawide e mobile (não só em telas baixas) */
  max-height: calc(100vh - 12rem) !important;
  max-height: calc(100dvh - 12rem) !important;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
}

.modal-dialog-scrollable .modal-content > form .modal-body::-webkit-scrollbar {
  width: 10px;
}

.modal-dialog-scrollable .modal-content > form .modal-body::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 8px;
}

.modal-dialog-scrollable .modal-content > form .modal-body::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 8px;
  border: 2px solid #f1f5f9;
}

.modal-dialog-scrollable .modal-content > form .modal-body::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ========== Visibilidade: modais, texto auxiliar, rolagem ========== */
.modal-content {
  border: 1px solid #cbd5e1 !important;
  box-shadow:
    0 25px 50px -12px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(15, 23, 42, 0.04) !important;
  background-color: #fff !important;
}

.modal-header:not(.bg-primary):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-info):not(.bg-secondary):not(.bg-dark) {
  background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%) !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

.modal-header:not(.bg-primary):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-info):not(.bg-secondary):not(.bg-dark) .modal-title {
  color: #0f172a !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

.modal-body .text-muted,
.modal-body small.text-muted,
.modal-footer .text-muted {
  color: #475569 !important;
}

.modal .form-label {
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* Tabelas em páginas: cabeçalho legível (cinza escuro, não preto puro) */
.table:not(.table-dark) thead th {
  color: var(--text-secondary, #495057) !important;
  background-color: #f8fafc !important;
  border-bottom-color: #cbd5e1 !important;
}

/* ========== Ações em tabela (histórico de documentos, listagens): padrão Zymed ========== */
.btn-acao-doc-reimprimir {
  font-weight: 500;
  gap: 0.35rem;
}

.btn-acao-doc-excluir,
.btn-acao-doc-excluir-lote {
  font-weight: 500;
  text-decoration: none !important;
  vertical-align: baseline;
}

.btn-acao-doc-excluir:hover,
.btn-acao-doc-excluir:focus,
.btn-acao-doc-excluir-lote:hover,
.btn-acao-doc-excluir-lote:focus {
  color: var(--bs-danger-text-emphasis, #b02a37) !important;
  text-decoration: underline !important;
}

.btn-acao-doc-excluir:disabled,
.btn-acao-doc-excluir-lote:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.table thead th.th-acoes-doc {
  font-size: var(--ds-table-head-size, 0.75rem);
  font-weight: var(--ds-table-head-weight, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b !important;
}