/*
 * Tokens Shadcn/ui, ajustados à identidade do coderun.com.br:
 * tinta azul-marinho (#111827), cinzas frios, Inter com tracking fechado
 * e tons semânticos discretos (verde, ocre, tijolo, azul, violeta).
 * Somente modo claro.
 */
:root {
  color-scheme: light;

  --background: 0 0% 100%;
  --foreground: 221 39% 11%;            /* #111827 */
  --card: 0 0% 100%;
  --card-foreground: 221 39% 11%;
  --primary: 221 39% 11%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 14% 96%;             /* #F3F4F6 */
  --secondary-foreground: 221 39% 11%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;       /* #6B7280 */
  --accent: 220 14% 96%;
  --accent-foreground: 221 39% 11%;
  --border: 220 13% 91%;                /* #E5E7EB */
  --input: 220 13% 88%;
  --ring: 252 60% 52%;                  /* violeta do logotipo */

  --success: 140 38% 40%;               /* #3F8B57 */
  --warning: 40 59% 41%;                /* #A67C2B */
  --destructive: 0 38% 51%;             /* #B45151 */
  --destructive-foreground: 0 0% 100%;
  --info: 212 44% 44%;                  /* #3F6EA3 */
  --violet: 252 38% 49%;                /* #6F57AD */

  --radius: 0.75rem;
}

* { border-color: hsl(var(--border)); }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss03';
  color: hsl(var(--foreground));
  background-color: #fafafb;
  background-image: linear-gradient(to bottom, #f3f4f6 0, #fafafb 360px, #ffffff 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { letter-spacing: -0.025em; }
h2 { font-weight: 600; }
::selection { background: hsl(var(--ring) / .18); }
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  white-space: nowrap; height: 2.5rem; padding: 0 1.1rem;
  border-radius: .5rem; font-size: .875rem; font-weight: 500; letter-spacing: -0.005em;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s, box-shadow .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn-default {
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  box-shadow: 0 1px 2px rgb(17 24 39 / .25), inset 0 1px 0 rgb(255 255 255 / .08);
}
.btn-default:hover { background: hsl(221 39% 18%); }
.btn-outline {
  background: #fff; color: hsl(var(--foreground));
  border-color: hsl(var(--border));
  box-shadow: 0 1px 2px rgb(17 24 39 / .06);
}
.btn-outline:hover { background: hsl(var(--secondary)); border-color: hsl(var(--input)); }
.btn-sm { height: 2.25rem; padding: 0 .85rem; }

/* ---------- Card ---------- */
.card {
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(17 24 39 / .04);
}
a.card, .card-link { transition: box-shadow .2s, border-color .2s, transform .2s; }
a.card:hover, .card-link:hover {
  border-color: hsl(var(--input));
  box-shadow: 0 1px 2px rgb(17 24 39 / .04), 0 14px 28px -16px rgb(17 24 39 / .18);
  transform: translateY(-1px);
  background: #fff;
}
.card-header { display: flex; flex-direction: column; gap: .375rem; padding: 1.5rem; }
.card-title { font-size: 1.0625rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.card-description { font-size: .875rem; color: hsl(var(--muted-foreground)); }
.card-content { padding: 1.5rem; padding-top: 0; }

/* ---------- Formulário ---------- */
.input, .select {
  display: flex; height: 2.5rem; width: 100%;
  border: 1px solid hsl(var(--input)); border-radius: .5rem;
  background: #fff; padding: .5rem .75rem; font-size: .875rem;
  box-shadow: 0 1px 2px rgb(17 24 39 / .04);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: hsl(var(--muted-foreground) / .8); }
.input:focus-visible, .select:focus-visible {
  outline: none; border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / .15);
}
.label { font-size: .875rem; font-weight: 500; line-height: 1; }

/* ---------- Badges (pílula com ponto, como no site) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .375rem;
  border-radius: 9999px; padding: .2rem .65rem;
  font-size: .75rem; font-weight: 500; line-height: 1.25; white-space: nowrap;
  background: #fff; color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 1px 2px rgb(17 24 39 / .04);
}
.badge::before { content: ''; width: .375rem; height: .375rem; border-radius: 9999px; background: currentColor; opacity: .85; }
.badge-outline::before, .badge-secondary::before { display: none; }
.badge-secondary { background: hsl(var(--secondary)); border-color: transparent; box-shadow: none; color: hsl(220 9% 30%); }
.badge-outline { color: hsl(220 9% 30%); }
.badge-success { color: hsl(var(--success)); background: hsl(var(--success) / .08); border-color: hsl(var(--success) / .22); box-shadow: none; }
.badge-warning { color: hsl(var(--warning)); background: hsl(var(--warning) / .09); border-color: hsl(var(--warning) / .25); box-shadow: none; }
.badge-info { color: hsl(var(--info)); background: hsl(var(--info) / .08); border-color: hsl(var(--info) / .22); box-shadow: none; }

/* ---------- Tabela ---------- */
.table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.table th {
  height: 2.75rem; padding: 0 1rem; text-align: left; vertical-align: middle;
  font-size: .8125rem; font-weight: 500; color: hsl(var(--muted-foreground));
  border-bottom: 1px solid hsl(var(--border));
}
.table td { padding: .9rem 1rem; vertical-align: middle; border-bottom: 1px solid hsl(var(--border) / .7); }
.table tbody tr { transition: background-color .12s; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: hsl(var(--secondary) / .7); }

/* ---------- Navegação ---------- */
.nav-link {
  display: flex; align-items: center; gap: .75rem;
  border-radius: .5rem; padding: .55rem .75rem;
  font-size: .875rem; font-weight: 500; color: hsl(220 9% 40%);
  transition: background-color .15s, color .15s;
}
.nav-link:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.nav-link.active { background: hsl(var(--secondary)); color: hsl(var(--foreground)); box-shadow: inset 2px 0 0 hsl(var(--ring)); }

/* ---------- Barras de horas ---------- */
.meter { height: .5rem; width: 100%; overflow: hidden; border-radius: 9999px; background: hsl(var(--secondary)); box-shadow: inset 0 1px 1px rgb(17 24 39 / .06); }
.meter > * { display: block; height: 100%; border-radius: 9999px; transition: width .6s cubic-bezier(.2, .7, .2, 1); }

/* Mês recolhível */
details.card > summary { transition: background-color .15s; border-radius: var(--radius); }
details.card > summary:hover { background: hsl(var(--secondary) / .5); }
details.card[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* ---------- Modal (dialog nativo) ---------- */
.modal {
  width: calc(100% - 2rem); max-width: 40rem; max-height: calc(100vh - 4rem);
  margin: auto; padding: 0; overflow-y: auto;
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px);
  background: #fff; color: hsl(var(--foreground));
  box-shadow: 0 24px 60px -20px rgb(17 24 39 / .35);
}
.modal[open] { animation: modal-in .18s ease-out; }
.modal::backdrop { background: rgb(17 24 39 / .4); backdrop-filter: blur(3px); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }