/* =========================================================
   Arremator — brand layer (carregado depois do app.css)
   Tokens, tipografia e refinamentos de componentes.
   ========================================================= */
:root {
  --brand-ink: #161A20;
  --brand-ink-800: #1B2027;
  --brand-ink-700: #222931;
  --brand-cyan: #16B8C4;
  --brand-cyan-600: #0F9AA5;
  --brand-cyan-300: #6ADCE3;
  --brand-cyan-rgb: 22, 184, 196;
  --brand-mist: #C2CBC4;
  --brand-surface: #F6F8F7;
  --brand-line: #E2E8E4;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: Sora, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --shadow-soft: 0 1px 2px rgba(22, 26, 32, .04), 0 8px 24px -12px rgba(22, 26, 32, .18);
  --shadow-cyan: 0 8px 20px -8px rgba(var(--brand-cyan-rgb), .55);
}

/* ---------- Tipografia ---------- */
html, body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6, .font-display, .titulo, .sl-hero h1, .sl-form-title {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}
.sidebar-panel .h-18 p { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
::selection { background: rgba(var(--brand-cyan-rgb), .28); }
:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }
a { transition: color .2s ease; }

/* ---------- Logo (par claro/escuro via CSS, sem flicker) ---------- */
.brand-logo { height: 40px; width: auto; max-width: 220px; object-fit: contain; display: block; }
.brand-mark { height: 44px; width: 44px; display: block; }
.logo-dark { display: none !important; }
.dark .logo-dark { display: block !important; }
.dark .logo-light { display: none !important; }
@media (max-width: 720px) { .brand-logo { height: 34px; max-width: 170px; } }

/* ---------- Superfícies ---------- */
#root { background: var(--brand-surface); }
.dark #root { background: var(--brand-ink); }
.header-container { border-bottom: 1px solid var(--brand-line); backdrop-filter: saturate(140%) blur(6px); }
.dark .header-container { border-bottom-color: rgba(255, 255, 255, .06); }
.main-sidebar > div { border-right-color: var(--brand-line) !important; }
.dark .main-sidebar > div { border-right-color: rgba(255, 255, 255, .06) !important; }

.card { border-radius: var(--radius-md); border: 1px solid var(--brand-line); box-shadow: var(--shadow-soft); }
.dark .card { border-color: rgba(255, 255, 255, .06); box-shadow: none; }
.popper-box { border-radius: var(--radius-md) !important; }

/* ---------- Botões ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 600; letter-spacing: .01em; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease; }
.btn.bg-primary, .dark .btn.dark\:bg-accent { box-shadow: 0 1px 2px rgba(22, 26, 32, .08); }
.btn.bg-primary:hover, .btn.bg-primary:focus-visible { box-shadow: var(--shadow-cyan); transform: translateY(-1px); }
.btn.bg-primary:active { transform: translateY(0); box-shadow: none; }
.btn.bg-slate-150 { border-radius: var(--radius-sm); }

/* ---------- Formulários ---------- */
.form-input, .form-select, .form-textarea { border-radius: var(--radius-sm); transition: border-color .2s ease, box-shadow .2s ease; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--brand-cyan) !important;
  box-shadow: 0 0 0 3px rgba(var(--brand-cyan-rgb), .18);
}
.form-checkbox:checked, .form-radio:checked { background-color: var(--brand-cyan); border-color: var(--brand-cyan); }

/* ---------- Sidebar ---------- */
.main-sidebar a.flex.h-11.w-11 { border-radius: var(--radius-sm); color: #5A6673; }
.dark .main-sidebar a.flex.h-11.w-11 { color: #A8B1B9; }
.main-sidebar a.flex.h-11.w-11:hover { color: var(--brand-cyan-600); }
.dark .main-sidebar a.flex.h-11.w-11:hover { color: var(--brand-cyan-300); }
.side-links a { border-radius: var(--radius-sm); padding-left: .5rem; padding-right: .5rem; margin-left: -.5rem; margin-right: -.5rem; }
.side-links a:hover { background: rgba(var(--brand-cyan-rgb), .08); }

/* ---------- Header: créditos ---------- */
.topo-creditos { font-weight: 600; border: 1px solid transparent; }
.topo-creditos:hover { background-color: var(--brand-cyan) !important; color: #fff !important; box-shadow: var(--shadow-cyan); }
.dark .topo-creditos { background-color: rgba(255, 255, 255, .06); }

/* ---------- Badges / tags ---------- */
.badge, .tag { border-radius: .45rem; font-weight: 600; letter-spacing: .01em; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(22, 26, 32, .18); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(22, 26, 32, .3); }
.dark ::-webkit-scrollbar-thumb { background-color: rgba(194, 203, 196, .22); }

/* ---------- Bibliotecas de terceiros ---------- */
.swal2-popup { border-radius: var(--radius-lg) !important; font-family: var(--font-body) !important; }
.swal2-confirm { background: var(--brand-cyan) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; }
.swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(var(--brand-cyan-rgb), .3) !important; }
table.dataTable thead th { font-family: var(--font-display); font-weight: 600; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.leaflet-container { font-family: var(--font-body); }

/* ---------- Utilidades de marca ---------- */
.text-brand { color: var(--brand-cyan); }
.bg-brand { background-color: var(--brand-cyan); color: #fff; }
.bg-ink { background-color: var(--brand-ink); color: #fff; }
.brand-gradient-text {
  background: linear-gradient(120deg, var(--brand-cyan-300) 0%, var(--brand-cyan) 55%, var(--brand-cyan-600) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .btn, a, .card { transition: none !important; }
  .btn.bg-primary:hover { transform: none; }
}