/* ═══════════════════════════════════════════════════════════════════════════
   VetERP Base — Reset, tipografia, scrollbar, acessibilidade
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar personalizada ─────────────────────────────────────────────── */
/* Global (não só em componentes pontuais) para que, sempre que uma barra de
   rolagem apareça — em qualquer textarea, card ou lista — ela fique bem
   definida: trilho com contraste, thumb visível e setas funcionais, em vez de
   um traço quase invisível. Setas custom (WebKit/Blink) via SVG inline; no
   Firefox, scrollbar-width/scrollbar-color cobrem trilho e thumb (sem setas,
   que o Firefox não expõe via CSS). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-400) var(--color-gray-100);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-gray-100); }
::-webkit-scrollbar-thumb {
  background: var(--color-gray-400);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-gray-100);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-gray-500); }
::-webkit-scrollbar-corner { background: var(--color-gray-100); }

::-webkit-scrollbar-button {
  display: block;
  background-color: var(--color-gray-100);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 6px 6px;
}
::-webkit-scrollbar-button:vertical { height: 10px; }
::-webkit-scrollbar-button:horizontal { width: 10px; }
::-webkit-scrollbar-button:vertical:start {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 5L5 1L9 5' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:vertical:end {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:start {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M5 1L1 5L5 9' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:end {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M1 1L5 5L1 9' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="dark"] ::-webkit-scrollbar-button:vertical:start {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 5L5 1L9 5' stroke='%238b949e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="dark"] ::-webkit-scrollbar-button:vertical:end {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238b949e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="dark"] ::-webkit-scrollbar-button:horizontal:start {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M5 1L1 5L5 9' stroke='%238b949e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="dark"] ::-webkit-scrollbar-button:horizontal:end {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M1 1L5 5L1 9' stroke='%238b949e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Links ───────────────────────────────────────────────────────────────── */
a {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-700); text-decoration: underline; }

/* ── Foco acessível ──────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Imagens ─────────────────────────────────────────────────────────────── */
img, svg { display: block; max-width: 100%; }

/* ── Elementos interativos ───────────────────────────────────────────────── */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}
button { cursor: pointer; }
/* Só redimensiona em altura — o handle de redimensionamento nativo do
   textarea permite arrastar a largura para fora do card/container pai
   (o navegador aplica um width em pixels via inline style que ignora o
   width:100% em CSS); max-width:100% trava esse estouro horizontal. */
textarea { resize: vertical; max-width: 100%; }

/* ── Tipografia base ─────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-md); }

p { line-height: var(--line-height-relaxed); }

/* ── Utilitários rápidos ─────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.text-center { text-align: center; }
.text-right  { text-align: right; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.w-full { width: 100%; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }