/* Saúde Cidadão - Tema Global (padrão ACS)
   Este arquivo consolida o padrão visual usado nas telas ACS para padronizar o sistema inteiro.
   Inclui: botões, inputs, tabelas (listras/hover/cabeçalho), filtros, títulos, cards e paginação.
*/

:root { color-scheme: light; }

html, body { height: 100%; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
body { background: #f8fafc; color:#0f172a; }

/* Navbar */
.navbar { border-bottom: 1px solid #e5e7eb; }
.navbar-brand .navbar-item img { max-height: 2.2rem; }
.container.main { padding: 18px 16px; }
.navbar, .navbar-menu, .navbar-item, .navbar-link { background:#ffffff; color:#111827; }
.navbar.is-white { background:#ffffff !important; }
.navbar-item, .navbar-link { color:#1f2937 !important; }
.navbar-link:not(.is-arrowless)::after { border-color:#9ca3af; }
.navbar .navbar-dropdown { background:#ffffff !important; color:#111827 !important; border:1px solid #e5e7eb !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important; }
.navbar .navbar-dropdown .navbar-item { background:#ffffff !important; color:#1f2937 !important; }
.navbar .navbar-dropdown .navbar-item:hover { background:#f3f4f6 !important; color:#111827 !important; }
.navbar-burger:hover { background: transparent; }
.navbar-burger span { background-color:#374151; }

/* Cards e tipografia básica */
.card { border:1px solid #e5e7eb; border-radius: 14px; background:#ffffff; }
.card .card-content { padding: 18px; }
.title { color:#0f172a !important; }
.card .title { color:#111827 !important; }
.subtitle, .card .subtitle { color:#6b7280 !important; }
.has-text-grey { color:#6b7280 !important; }

/* Labels sempre pretas para melhor legibilidade */
.label, .field .label { color:#111827 !important; }

/* Botões */
.button { background:#ffffff; border:1px solid #e5e7eb; color:#111827; }
.button:hover { background:#f9fafb; }
.button.is-primary { background:#10b981 !important; border-color:#10b981 !important; color:#ffffff !important; }
.button.is-link.is-light { background:#eff6ff !important; color:#1d4ed8 !important; border-color:#bfdbfe !important; }

/* Formulários */
.input, .textarea, .select select { background:#ffffff !important; color:#111827 !important; border-color:#e5e7eb !important; }
.input:focus, .textarea:focus, .select select:focus { border-color:#93c5fd !important; box-shadow: 0 0 0 0.125em rgba(59,130,246,0.15) !important; }
.input::placeholder, .textarea::placeholder { color:#9ca3af !important; }
.control.has-icons-left .icon, .control.has-icons-right .icon { color:#9ca3af !important; }
input[type="checkbox"], input[type="radio"] { accent-color: #2563eb; }

/* Tabelas (padrão ACS) */
.table { background:#ffffff; }
table.table th { background:#f9fafb; color:#111827 !important; }
.table td, .table th { border-color:#eef2f7; color:#111827; }
.table tbody tr { background:#ffffff !important; }
.table.is-striped tbody tr:nth-child(odd) { background:#fbfdff !important; }
.table.is-hoverable tbody tr:hover { background:#f3f4f6 !important; }
.table a { color:#1d4ed8; }

/* Contêiner de filtros (usado em listas ACS) */
.filters { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px; }
.filters .columns { margin-bottom: 0; }
.filters .control .input { height: 40px; }
.filters .actions { display:flex; gap:10px; justify-content: flex-end; align-items:center; }
@media (max-width: 768px) {
  .filters .actions { justify-content: stretch; }
  .filters .actions .button { flex:1; }
}

/* Paginação */
.pagination a, .pagination span { border:1px solid #e5e7eb; }

/* Boxes e dropdowns em tema claro */
.box { background:#ffffff !important; color:#111827 !important; border:1px solid #e5e7eb !important; }
.dropdown-content { background:#ffffff !important; color:#111827 !important; }

/* Utils específicos de listas ACS */
.columns-select { margin-top:10px; }
.columns-select .box { border-radius:10px; }

/* Utilitários de espaçamento (escala em 4px onde aplicável) */
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.ml-1 { margin-left: 6px !important; }
.ml-4 { margin-left: 1rem !important; }
.pb-1 { padding-bottom: 4px !important; }

/* Utilitários de layout flex e gaps */
.flex { display: flex !important; }
.items-center { align-items: center !important; }
.items-end { align-items: flex-end !important; }
.justify-end { justify-content: flex-end !important; }
.gap-8 { gap: 8px !important; }
.gap-10 { gap: 10px !important; }
.gap-16 { gap: 16px !important; }

/* Larguras de colunas comuns em listas */
.col-cpf, .col-cns { width: 140px; }
.col-microarea { width: 120px; }
.col-actions-160 { width: 160px; }
.col-actions-200 { width: 200px; }
.col-actions-220 { width: 220px; }

/* Tags compactas usadas em listagens de relacionamento */
.tag.is-compact { margin: 2px 4px 2px 0; }