/* ============================================================
   Tema Shadcn UI (Zinc) + accent Laranja Escuro (cor de marca)
   Light por padrão; .dark ativa o tema escuro
   ============================================================ */

:root {
  /* superfícies */
  --background: #fafafa;        /* zinc-50 */
  --card: #ffffff;
  --muted-bg: #f4f4f5;          /* zinc-100 */
  --border: #e4e4e7;            /* zinc-200 */
  --border-strong: #d4d4d8;     /* zinc-300 */

  /* texto */
  --foreground: #18181b;        /* zinc-900 */
  --muted: #71717a;             /* zinc-500 */
  --muted-2: #a1a1aa;           /* zinc-400 */

  /* accent = laranja escuro da marca */
  --accent: #c2410c;            /* orange-700 */
  --accent-hover: #9a3412;      /* orange-800 */
  --accent-soft: #fff7ed;       /* orange-50 */
  --accent-soft-border: #fed7aa;/* orange-200 */
  --accent-fg: #ffffff;

  /* status (suaves) */
  --success: #15803d; --success-bg: #f0fdf4; --success-border: #bbf7d0;
  --danger:  #b91c1c; --danger-bg:  #fef2f2; --danger-border:  #fecaca;
  --warning: #b45309; --warning-bg: #fffbeb; --warning-border: #fde68a;

  /* chart helpers */
  --grid: #f1f1f3;
  --tick: #a1a1aa;
}

.dark {
  --background: #09090b;        /* zinc-950 */
  --card: #131316;
  --muted-bg: #1c1c1f;
  --border: #27272a;            /* zinc-800 */
  --border-strong: #3f3f46;     /* zinc-700 */

  --foreground: #fafafa;        /* zinc-50 */
  --muted: #a1a1aa;             /* zinc-400 */
  --muted-2: #71717a;           /* zinc-500 */

  --accent: #ea580c;            /* orange-600 (um pouco mais vivo no escuro) */
  --accent-hover: #f97316;      /* orange-500 */
  --accent-soft: #2a1a0f;
  --accent-soft-border: #7c2d12;/* orange-900 */
  --accent-fg: #ffffff;

  --success: #4ade80; --success-bg: #0f2417; --success-border: #14532d;
  --danger:  #f87171; --danger-bg:  #2a1416; --danger-border:  #7f1d1d;
  --warning: #fbbf24; --warning-bg: #2a210f; --warning-border: #78350f;

  --grid: #1f1f23;
  --tick: #71717a;
}

* { scroll-behavior: smooth; }

html, body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Componentes utilitários ---------- */
.surface { background-color: var(--background); }
.card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.text-muted { color: var(--muted); }
.text-muted-2 { color: var(--muted-2); }
.border-base { border-color: var(--border); }

.btn-ghost {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  border-radius: 8px;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-ghost:hover { background: var(--muted-bg); border-color: var(--border-strong); }

.btn-accent {
  background: var(--accent); color: var(--accent-fg);
  border-radius: 8px; transition: background-color .15s ease;
}
.btn-accent:hover { background: var(--accent-hover); }

.input, .select {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: 8px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--muted-2); }
.input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* KPI */
.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  transition: border-color .15s ease, transform .15s ease;
}
.kpi:hover { border-color: var(--border-strong); }
.kpi-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: var(--muted-bg);
  color: var(--muted);
}
.kpi-value { font-size: 1.85rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.kpi-label { font-size: 0.72rem; color: var(--muted); margin-top: 6px; }

/* badges / pills */
.badge { font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 9999px; white-space: nowrap; border: 1px solid transparent; }
.badge-success { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.badge-danger  { color: var(--danger);  background: var(--danger-bg);  border-color: var(--danger-border); }
.badge-warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.badge-neutral { color: var(--muted);   background: var(--muted-bg);   border-color: var(--border); }
.badge-accent  { color: var(--accent);  background: var(--accent-soft);border-color: var(--accent-soft-border); }

/* tabelas estilo shadcn: sem bordas verticais, linhas finas */
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th { color: var(--muted); font-weight: 500; font-size: .72rem; text-transform: none; padding: 10px 8px; border-bottom: 1px solid var(--border); }
.tbl tbody td { padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background-color .12s ease; }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl tbody tr.clickable:hover { background: var(--muted-bg); }
.tbl tbody tr.row-accent { background: var(--accent-soft); }

/* chip de filtro / matéria selecionada */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-soft-border);
  border-radius: 8px; padding: 6px 12px; font-size: .8rem;
}

/* tabs */
.tab-group { background: var(--muted-bg); border: 1px solid var(--border); border-radius: 10px; padding: 4px; display: inline-flex; gap: 4px; }
.tab-btn { border-radius: 7px; padding: 8px 16px; font-size: .85rem; font-weight: 500; color: var(--muted); transition: all .15s ease; }
.tab-btn:hover { color: var(--foreground); }
.tab-btn.active { background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* prioridade star */
.prio-btn { transition: color .12s ease, transform .12s ease; }
.prio-btn:hover { transform: scale(1.15); }
.prio-on { color: var(--accent); }
.prio-off { color: var(--muted-2); }
.prio-off:hover { color: var(--accent); }

/* header */
.app-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.fade-in { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity:1; transform:none;} }

.scrollbar-thin::-webkit-scrollbar { height: 8px; width: 8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }

.truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

a, .link-accent { color: var(--accent); }
.link-accent:hover { color: var(--accent-hover); text-decoration: underline; }