/* assets/css/base.css */

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

:root {
  --navbar-h: 56px;
  --footer-h: 48px;
  --navbar-extra-gap: 16px;

  /* Paleta base (claro) */
  --bg-page: #f6f8fb;
  --card-bg: #ffffff;
  --text-color: #212529;
  --muted-color: #6c757d;
  --divider: rgba(0, 0, 0, 0.08);

  --toast-max-width: 520px;
  --toast-accent-w: 6px;
  --toast-radius: 0.75rem;

  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
  --fs-small: 0.8125rem;
  --fs-body: 0.9375rem;
  --fs-large: 1.0625rem;
  --lh-tight: 1.15;
  --lh-body: 1.6;
  --lh-relaxed: 1.75;
}

/* Paleta para dark mode (alternada via data-bs-theme) */
[data-bs-theme="dark"] {
  --bg-page: #0f1115; /* fundo geral */
  --card-bg: #151822; /* superfícies (cards, navbar, dropdown) */
  --text-color: #e5e7eb; /* texto principal */
  --muted-color: #9aa4b2; /* texto secundário */
  --divider: rgba(255, 255, 255, 0.12); /* divisores/bordas suaves */
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--bg-page);
  color: var(--text-color);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.navbar-brand,
.dropdown-header,
.card-header,
.modal-header,
.alert-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}

h1,
.h1 {
  font-size: calc(1.475rem + 1.5vw);
  letter-spacing: -0.03em;
}
h2,
.h2 {
  font-size: calc(1.325rem + 0.9vw);
  letter-spacing: -0.025em;
}
h3,
.h3 {
  font-size: calc(1.225rem + 0.6vw);
  letter-spacing: -0.02em;
}
h4,
.h4 {
  font-size: calc(1.15rem + 0.45vw);
}
h5,
.h5 {
  font-size: 1.1rem;
}
h6,
.h6 {
  font-size: 1rem;
}

code,
pre,
kbd,
samp,
.kpi-value,
.monospace-data,
.js-autocomplete + .ts-wrapper .ts-control,
.pre-wrap code {
  font-family: var(--font-mono) !important;
  font-weight: 500;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
}

small,
.small,
.text-muted {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}

body.has-fixed-footer {
  padding-top: calc(var(--navbar-h) + var(--navbar-extra-gap));
}

.page-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 10px;
  padding-bottom: calc(var(--footer-h) + 56px);
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--divider);
  border-radius: 0.75rem;
}

.container .text-muted {
  color: var(--muted-color) !important;
}

@media (max-width: 575.98px) {
  :root {
    --navbar-h: 64px;
    --footer-h: 56px;
  }
}

/* ============================================ /
/  MICRO-INTERAÇÕES E TRANSIÇÕES               /
/  Etapa 2 — Sistema global de movimento       /
/ ============================================ */

/* 1. TRANSIÇÃO SUAVE NA TROCA DE TEMA */
:root {
  --theme-transition:
    color 0.25s ease, background-color 0.3s ease, border-color 0.25s ease,
    box-shadow 0.25s ease, background 0.3s ease;
}

body.has-fixed-footer,
.page-content,
.app-footer {
  transition: var(--theme-transition);
}

/* 2. ELEVAÇÃO DE CARDS (efeito "flutuar") */
.card {
  transition:
    transform 0.25s ease,
    box-shadow 0.3s ease,
    border-color 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
  border-color: color-mix(in srgb, var(--bs-primary) 25%, var(--divider));
}

[data-bs-theme="dark"] .card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
/* 3. BOTÕES — efeito de pressão (sink) */
.btn:active {
  transform: scale(0.97);
}

/* Modais de confirmação — desliga scale:active para evitar flicker */
.modal .btn:active {
  transform: none !important;
}

.btn {
  transition:
    transform 0.12s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* 4. LINKS — sublinhado animado */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition:
    background-size 0.25s ease,
    color 0.2s ease;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):hover {
  background-size: 100% 2px;
}

/* 5. NAVEGAÇÃO */
.breadcrumb-item a,
.nav-link {
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

/* 6. INPUTS — foco refinado */
.form-control,
.form-select,
.ts-wrapper .ts-control {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

/* 7. SCROLL SUAVE GLOBAL */
html {
  scroll-behavior: smooth;
}

/* 8. TABELAS — hover nas linhas */
.table tbody tr {
  transition: background-color 0.18s ease;
}

.table tbody tr:hover {
  background-color: color-mix(in srgb, var(--bs-primary) 4%, transparent);
}

[data-bs-theme="dark"] .table tbody tr:hover {
  background-color: color-mix(in srgb, var(--bs-primary) 8%, transparent);
}

/* 9. CHECKBOX E RADIO */
.form-check-input {
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* 10. BADGES */
.badge {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.badge:hover {
  transform: scale(1.05);
}

/* 11. PREVINE CONFLITO */
.toast .toast-progress {
  transition: none !important;
}

/* 12. RESPEITO À ACESSIBILIDADE — prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}