/* =========================================================
   FruitQualitas — Dashboard Modern
   ========================================================= */

/* -------- PALETAS (troca só as variáveis) ---------------- */

/* Paleta A — Brand (vermelho FruitQualitas) */
:root{
  --brand: #d9272e;         /* vermelho principal */
  --brand-600:#c51f26;
  --brand-50:#fff1f2;

  --ink-900:#0f172a;        /* cinza escuro p/ títulos */
  --ink-700:#334155;        /* texto prim. */
  --ink-500:#6b7280;        /* texto secundário */
  --ink-300:#cbd5e1;        /* bordas suaves */

  --bg:#f7f8fb;             /* fundo da página */
  --card:#ffffff;           /* fundo dos cards */
  --shadow: 0 10px 30px rgba(0,0,0,.06);

  /* KPI accents */
  --kpi-green:#3cb179;
  --kpi-orange:#f59e0b;
  --kpi-pink:#f43f5e;
  --kpi-purple:#8b5cf6;

  /* dimensões */
  --radius-lg:16px;
  --radius-md:12px;
  --space:18px;
  --gap:20px;
}

/* --------- Paleta B — “Cool Blue” (opcional) -------------- */
/*
:root{
  --brand:#2563eb; --brand-600:#1e40af; --brand-50:#eff6ff;
  --ink-900:#0b132a; --ink-700:#273349; --ink-500:#64748b; --ink-300:#d1d5db;
  --bg:#f5f7fb; --card:#ffffff; --shadow:0 10px 30px rgba(17,24,39,.06);
  --kpi-green:#22c55e; --kpi-orange:#f59e0b; --kpi-pink:#ef4444; --kpi-purple:#6366f1;
  --radius-lg:16px; --radius-md:12px; --space:18px; --gap:20px;
}
*/

/* --------- Paleta C — “Neutral Slate” (opcional) ---------- */
/*
:root{
  --brand:#111827; --brand-600:#0f172a; --brand-50:#f3f4f6;
  --ink-900:#0f172a; --ink-700:#1f2937; --ink-500:#6b7280; --ink-300:#e5e7eb;
  --bg:#f6f7f9; --card:#ffffff; --shadow:0 10px 30px rgba(0,0,0,.06);
  --kpi-green:#10b981; --kpi-orange:#f59e0b; --kpi-pink:#ec4899; --kpi-purple:#8b5cf6;
  --radius-lg:16px; --radius-md:12px; --space:18px; --gap:20px;
}
*/

/* --------------- Base ------------------------------------ */
html,body{background:var(--bg)}
.dash-wrap{padding:var(--space)}

/* Top badge (opcional) */
.top-badge{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-bottom:12px}

/* --------------- KPI cards -------------------------------- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kpi{
  border-radius:var(--radius-md);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:14px 16px;
  display:flex; align-items:center; gap:14px; min-height:86px;
}
.kpi .dot{width:10px;height:10px;border-radius:999px}
.kpi .value{font-size:28px;font-weight:800;color:var(--ink-900);letter-spacing:.2px}
.kpi .label{font-size:12px;color:var(--ink-500);line-height:1.2}
.kpi--green .dot{background:var(--kpi-green)}
.kpi--orange .dot{background:var(--kpi-orange)}
.kpi--pink .dot{background:var(--kpi-pink)}
.kpi--purple .dot{background:var(--kpi-purple)}

@media (max-width:1100px){.kpi-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.kpi-grid{grid-template-columns:1fr}}

/* --------------- Grid de cards ----------------------------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media (max-width:1100px){.grid-2{grid-template-columns:1fr}}

.card-m{
  display:flex; flex-direction:column;
  background:var(--card); border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.card-m__head{padding:12px 16px;border-bottom:1px solid var(--ink-300)}
.card-m__title{font:700 18px/1.2 "Inter",system-ui;color:var(--ink-900)}
.card-m__body{display:flex;flex-direction:column;padding:16px 18px;min-height:240px}
.card-m__body .filler{flex:1;display:flex;align-items:center;justify-content:center;color:var(--ink-500)}

/* --------------- Botões “pill” ----------------------------- */
.btn-pill{
  border-radius:999px; padding:9px 14px; font-weight:700; font-size:13px;
  border:1px solid var(--ink-300); color:var(--ink-700); background:#fff;
  transition:.15s ease; display:inline-flex; align-items:center; gap:8px;
}
.btn-pill:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08)}
.btn-pill--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-pill--ghost{background:#fff}
.actions{margin-top:14px; display:flex; gap:10px; justify-content:flex-end}

/* --------------- Tabelas modernas -------------------------- */
.table-modern{width:100%;border-collapse:separate;border-spacing:0}
.table-modern thead th{
  font-weight:800;font-size:12px;color:var(--ink-500);
  text-transform:uppercase;letter-spacing:.04em;padding:10px;
  border-bottom:1px solid var(--ink-300)
}
.table-modern td{padding:9px 10px;font-size:14px;color:var(--ink-700);border-bottom:1px solid #f3f4f6}
.table-modern tr:hover td{background:#f9fafb}
.table-modern .text-right{text-align:right;white-space:nowrap;width:90px}

/* --------------- Caixas de gráfico ------------------------- */
.chart-box{height:280px}

/* --------------- Utilitários ------------------------------- */
.mt-6{margin-top:1.25rem} .mt-8{margin-top:2rem}
.text-right{text-align:right}

/* --------------- Modo escuro opcional ---------------------- */
.theme-dark{
  --bg:#0b1220; --card:#0f172a; --ink-900:#e5e7eb; --ink-700:#cbd5e1; --ink-500:#94a3b8; --ink-300:#1f2937;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}
.theme-dark .kpi,.theme-dark .card-m{box-shadow:0 14px 26px rgba(0,0,0,.4)}
.theme-dark .table-modern thead th{border-bottom:1px solid #1f2937}
.theme-dark .table-modern td{border-bottom:1px solid #1f2937}