/* ============================================================
   VERTEX ONE — DESIGN SYSTEM (vertex.css)
   Tema claro/escuro · mobile-first · IBM Plex
   Tokens controlados por :root[data-theme="light|dark"]
   Editar SÓ os tokens abaixo para ajustar cores globalmente.
   ============================================================ */

/* ---------- MARCA (invariante ao tema) ---------- */
:root{
  --brand:#1F3D3A; --purple:#7C3AED; --pink:#EC4899;
  --grad:linear-gradient(135deg,#A855F7,#EC4899);
  --green:#15803D; --green-bright:#22C55E;
  --amber:#B45309; --amber-bright:#F59E0B;
  --red:#B91C1C;   --red-bright:#EF4444;
  --blue:#185FA5;  --blue-bright:#3B82F6;
  --slate:#64748B; --slate-bright:#94A3B8;
  --teal:#14B8A6;  --teal-bright:#2DD4BF;

  --r-card:14px; --r-tile:12px; --r-pill:999px; --r-field:10px;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;

  /* alturas de chrome */
  --topbar-h:60px;
  --bottomnav-h:62px;
}

/* ---------- TEMA CLARO ---------- */
:root[data-theme="light"]{
  --bg:#F4F5F4; --surface:#ffffff; --surface-2:#F8F9F8;
  --border:#E7E9E7; --border-soft:#F0F1F0; --track:#F0F1F0;
  --text:#1F2937; --text-muted:#6B7280; --text-faint:#9AA09C;
  --heading:#1F3D3A;

  --sidebar-bg:#1F3D3A; --sidebar-text:#B6C7C3; --sidebar-dot:#3C5A55;
  --sidebar-active-bg:rgba(168,85,247,.18); --sidebar-active-text:#ffffff; --sidebar-active-dot:#C084FC;
  --sidebar-head-text:#E6EFEC; --sidebar-sub-text:#8FA8A2;
  --sidebar-group-label:#7E988F;
  --sidebar-hover:rgba(255,255,255,.06);

  --topbar-bg:#ffffff; --topbar-border:#E7E9E7;
  --chip-bg:#F4F5F4; --chip-border:#E7E9E7;
  --seg-bg:#F0F1F0; --seg-active-bg:#ffffff; --seg-active-text:#1F3D3A;

  --field-bg:#ffffff; --field-bd:#E1E4E1; --field-focus:rgba(168,85,247,.25);

  --pill-green-bg:#E8F3EC; --pill-green-tx:#15803D;
  --pill-red-bg:#FCEBEB;   --pill-red-tx:#B91C1C;
  --pill-amber-bg:#FAEEDA; --pill-amber-tx:#854F0B;
  --pill-blue-bg:#E5EFFB;  --pill-blue-tx:#185FA5;
  --pill-purple-bg:#EDE6FB;--pill-purple-tx:#7C3AED;
  --pill-slate-bg:#EEF1F4; --pill-slate-tx:#64748B;
  --pill-teal-bg:#DEF5F1;  --pill-teal-tx:#0F766E;

  --shadow:0 1px 2px rgba(31,61,58,.04);
  --shadow-soft:0 12px 25px rgba(15,23,42,.08);
  --shadow-pop:0 14px 40px rgba(60,30,90,.18);

  --bottomnav-bg:#ffffff; --bottomnav-active:#7C3AED;
}

/* ---------- TEMA ESCURO (ouro escuro / centro de comando) ---------- */
:root[data-theme="dark"]{
  --bg:#0E211E; --surface:#0A1A17; --surface-2:#10241F;
  --border:#1B332E; --border-soft:#16302B; --track:#16302B;
  --text:#E8F2EF; --text-muted:#7E9690; --text-faint:#557068;
  --heading:#E8F2EF;

  --sidebar-bg:#0A1A17; --sidebar-text:#7E9690; --sidebar-dot:#2C4A44;
  --sidebar-active-bg:linear-gradient(90deg,rgba(168,85,247,.25),rgba(236,72,153,.08)); --sidebar-active-text:#ffffff; --sidebar-active-dot:#E879F9;
  --sidebar-head-text:#E8F2EF; --sidebar-sub-text:#6E847E;
  --sidebar-group-label:#557068;
  --sidebar-hover:rgba(255,255,255,.05);

  --topbar-bg:#0E211E; --topbar-border:#1B332E;
  --chip-bg:#13302B; --chip-border:#234740;
  --seg-bg:#10241F; --seg-active-bg:#1F3D3A; --seg-active-text:#9FE1CB;

  --field-bg:#10241F; --field-bd:#234740; --field-focus:rgba(168,85,247,.3);

  --pill-green-bg:rgba(52,211,153,.16); --pill-green-tx:#34D399;
  --pill-red-bg:rgba(239,68,68,.16);    --pill-red-tx:#F87171;
  --pill-amber-bg:rgba(245,158,11,.16); --pill-amber-tx:#E0A84A;
  --pill-blue-bg:rgba(56,189,248,.16);  --pill-blue-tx:#7CC6F0;
  --pill-purple-bg:rgba(168,85,247,.16);--pill-purple-tx:#C084FC;
  --pill-slate-bg:rgba(148,163,184,.14);--pill-slate-tx:#94A3B8;
  --pill-teal-bg:rgba(45,212,191,.16);  --pill-teal-tx:#2DD4BF;

  --shadow:none;
  --shadow-soft:0 12px 25px rgba(0,0,0,.35);
  --shadow-pop:0 14px 40px rgba(0,0,0,.5);

  --bottomnav-bg:#0A1A17; --bottomnav-active:#C084FC;
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{height:100%;}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
  /* mobile-first: o body rola naturalmente (corrige 100vh do iOS) */
  min-height:100%;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
::-webkit-scrollbar{height:9px;width:9px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:var(--text-faint);}

/* ============================================================
   SHELL — mobile-first
   No mobile: coluna única, body rola, sidebar é off-canvas.
   ============================================================ */
.app-shell{
  display:flex;
  width:100%;
  min-height:100vh;
  min-height:100dvh;          /* corrige a barra do Safari iOS */
  min-width:0;
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  width:236px; flex-shrink:0;
  background:var(--sidebar-bg); color:#fff;
  padding:18px 14px;
  display:flex; flex-direction:column; gap:2px;
  position:sticky; top:0; height:100vh; height:100dvh;
  overflow:hidden; z-index:40;
}
.sidebar-header{display:flex;align-items:center;gap:10px;padding:0 8px 16px;}
.sidebar-logo{
  width:32px;height:32px;border-radius:9px;
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;color:#fff;overflow:hidden;flex-shrink:0;
}
.sidebar-logo img{width:100%;height:100%;object-fit:contain;}
.sidebar-title{display:flex;flex-direction:column;gap:1px;min-width:0;}
.sidebar-title-main{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--sidebar-head-text);line-height:1.1;}
.sidebar-title-sub{font-size:10.5px;color:var(--sidebar-sub-text);}

.sidebar-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:4px;
  padding-right:4px; margin-right:-4px;
  scrollbar-width:thin; scrollbar-color:var(--sidebar-dot) transparent;
}
.sidebar-scroll::-webkit-scrollbar{width:7px;}
.sidebar-scroll::-webkit-scrollbar-track{background:transparent;}
.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--sidebar-dot);border-radius:999px;}

/* accordion de grupos */
.nav-group{display:flex;flex-direction:column;}
.nav-group-head{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:none;cursor:pointer;font-family:var(--mono);
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--sidebar-group-label);padding:8px 8px 5px;border-radius:8px;
}
.nav-group-head:hover{background:var(--sidebar-hover);color:var(--sidebar-active-dot);}
.nav-caret{font-size:10px;transition:transform .18s ease;}
.nav-group.open .nav-caret{transform:rotate(180deg);}
.nav-group-body{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .22s ease,opacity .18s ease;
  display:flex;flex-direction:column;gap:2px;
}
.nav-group.open .nav-group-body{max-height:1400px;opacity:1;margin-top:2px;margin-bottom:6px;}

.sidebar-menu{display:flex;flex-direction:column;gap:2px;}
.sidebar-link{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:8px 10px;border-radius:8px;
  font-size:13px;color:var(--sidebar-text);
  border:1px solid transparent;background:transparent;
  transition:background .15s,color .15s;cursor:pointer;
}
.sidebar-link span{display:inline-flex;align-items:center;gap:8px;}
.sidebar-link:hover{background:var(--sidebar-hover);color:#fff;}
.sidebar-link.active{
  background:var(--sidebar-active-bg);color:var(--sidebar-active-text);
  font-weight:500;box-shadow:inset 0 0 0 1px rgba(168,85,247,.20);
}
/* bolinha opcional à esquerda (compat com markup antigo que usa emoji) */
.sidebar-link .dot{width:6px;height:6px;border-radius:50%;background:var(--sidebar-dot);flex-shrink:0;}
.sidebar-link.active .dot{background:var(--sidebar-active-dot);}

.sidebar-footer{
  margin-top:auto;font-size:11px;color:var(--sidebar-sub-text);
  border-top:1px dashed var(--sidebar-dot);padding-top:8px;
}
.sidebar-backdrop{display:none;}

/* ---------- MAIN ---------- */
.main-wrapper{
  flex:1;display:flex;flex-direction:column;
  background:var(--bg);min-width:0;
}

/* ---------- TOPBAR (desktop) ---------- */
.top-header{
  flex-shrink:0;height:var(--topbar-h);
  background:var(--topbar-bg);border-bottom:1px solid var(--topbar-border);
  padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;z-index:30;transition:background .25s;
}
.page-title{display:flex;flex-direction:column;gap:2px;min-width:0;}
.page-title-main{font-size:18px;font-weight:600;color:var(--heading);line-height:1.2;}
.page-title-sub{font-size:12.5px;color:var(--text-muted);}
.top-right{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-muted);min-width:0;}

/* segmented (toggle de tema) */
.seg{display:flex;background:var(--seg-bg);border-radius:8px;padding:3px;gap:2px;}
.seg button{
  border:0;background:transparent;font-family:var(--mono);
  font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--text-faint);padding:6px 12px;border-radius:6px;
  cursor:pointer;transition:all .15s;text-transform:uppercase;white-space:nowrap;
}
.seg button.seg--active{background:var(--seg-active-bg);color:var(--seg-active-text);box-shadow:var(--shadow);}

.chip{
  font-family:var(--mono);font-size:12px;color:var(--text-muted);
  background:var(--chip-bg);border:1px solid var(--chip-border);
  padding:6px 11px;border-radius:7px;white-space:nowrap;
}

/* hambúrguer — só mobile */
.sidebar-toggle{
  display:none;border-radius:8px;padding:7px 11px;font-size:13px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  cursor:pointer;align-items:center;gap:6px;
}
.sidebar-toggle span{font-size:17px;line-height:1;}

/* ---------- CONTEÚDO ---------- */
.main-scroll{
  flex:1;padding:18px 22px 22px;min-width:0;
  overflow-x:hidden;
}
.content{margin-top:2px;min-width:0;}

/* flash */
.flash-container{margin-bottom:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.flash{
  padding:8px 14px;border-radius:999px;font-size:13px;
  border:1px solid var(--border);background:var(--surface);
  display:inline-flex;align-items:center;gap:8px;
}
.flash-success{color:var(--green);border-color:rgba(34,197,94,.45);background:var(--pill-green-bg);}
.flash-danger{color:var(--red);border-color:rgba(239,68,68,.45);background:var(--pill-red-bg);}
.flash-warning{color:var(--amber);border-color:rgba(245,158,11,.45);background:var(--pill-amber-bg);}

/* ============================================================
   COMPONENTES (compat com classes existentes)
   ============================================================ */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:18px 20px;
}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;min-width:0;}
.card-title{font-size:14px;font-weight:600;color:var(--heading);letter-spacing:.01em;}
.card-subtitle{font-size:13px;color:var(--text-muted);margin-top:2px;}

.btn{
  border-radius:8px;padding:8px 14px;font-size:13px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:all .16s;text-decoration:none;
}
.btn:hover{border-color:rgba(168,85,247,.5);background:var(--surface-2);}
.btn-ghost{background:var(--surface);color:var(--text-muted);}
.btn-primary{
  background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 8px 18px rgba(168,85,247,.28);
}
.btn-primary:hover{filter:brightness(1.04);box-shadow:0 10px 22px rgba(168,85,247,.34);}

.badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:3px 9px;border-radius:999px;font-size:11px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);
}
.badge-accent{border-color:rgba(168,85,247,.6);background:var(--pill-purple-bg);color:var(--pill-purple-tx);}

/* pills de status reutilizáveis */
.pill{display:inline-flex;font-family:var(--mono);font-size:10px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap;}
.pill--green{background:var(--pill-green-bg);color:var(--pill-green-tx);}
.pill--red{background:var(--pill-red-bg);color:var(--pill-red-tx);}
.pill--amber{background:var(--pill-amber-bg);color:var(--pill-amber-tx);}
.pill--blue{background:var(--pill-blue-bg);color:var(--pill-blue-tx);}
.pill--purple{background:var(--pill-purple-bg);color:var(--pill-purple-tx);}
.pill--slate{background:var(--pill-slate-bg);color:var(--pill-slate-tx);}
.pill--teal{background:var(--pill-teal-bg);color:var(--pill-teal-tx);}

/* campos de formulário */
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;min-width:0;}
.field label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;}
.field input,.field select,.field textarea{
  border-radius:var(--r-field);border:1px solid var(--field-bd);
  padding:9px 11px;font-size:14px;background:var(--field-bg);color:var(--text);
  outline:none;transition:all .15s;min-width:0;font-family:inherit;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(168,85,247,.7);box-shadow:0 0 0 3px var(--field-focus);
}
.field textarea{min-height:90px;resize:vertical;}

.layout-two-columns{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;}

.scroll-y{min-height:0;overflow-y:auto;padding-right:4px;}
.scroll-y-460{max-height:460px;overflow-y:auto;padding-right:4px;}
.scroll-y::-webkit-scrollbar,.scroll-y-460::-webkit-scrollbar{width:6px;}
.scroll-y::-webkit-scrollbar-track,.scroll-y-460::-webkit-scrollbar-track{background:var(--track);}
.scroll-y::-webkit-scrollbar-thumb,.scroll-y-460::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;}

/* ============================================================
   BOTTOM-NAV (mobile)
   ============================================================ */
.bottom-nav{
  display:none;position:sticky;bottom:0;z-index:35;
  background:var(--bottomnav-bg);border-top:1px solid var(--border);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  justify-content:space-around;
}
.bottom-nav a{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--text-faint);font-size:10px;font-family:var(--mono);flex:1;text-align:center;
}
.bottom-nav a svg{width:21px;height:21px;}
.bottom-nav a.active{color:var(--bottomnav-active);}
.bottom-nav a path,.bottom-nav a circle,.bottom-nav a rect{stroke:currentColor;}

/* ============================================================
   RESPONSIVO
   Breakpoint 900px: abaixo disso (iPad retrato 768/834, iPhone,
   Android) a sidebar vira off-canvas + bottom-nav aparece.
   iPad paisagem (≥1024) mantém a sidebar fixa.
   ============================================================ */
@media (max-width:900px){
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;height:100dvh;
    transform:translateX(-100%);transition:transform .2s ease;border-radius:0;
    box-shadow:var(--shadow-soft);
  }
  body.menu-open .sidebar{transform:translateX(0);}
  .sidebar-backdrop{
    display:block;position:fixed;inset:0;
    background:rgba(8,20,18,.45);opacity:0;pointer-events:none;
    transition:opacity .2s ease;z-index:38;
  }
  body.menu-open .sidebar-backdrop{opacity:1;pointer-events:auto;}

  .sidebar-toggle{display:inline-flex;}
  .top-header{height:auto;padding:10px 14px;}
  .page-title-main{font-size:16px;}
  .page-title-sub{display:none;}        /* economiza altura no topo mobile */
  .main-scroll{padding:14px 14px 18px;}
  .layout-two-columns{grid-template-columns:minmax(0,1fr);}

  .bottom-nav{display:flex;}
  /* respiro p/ não cobrir conteúdo atrás da bottom-nav */
  .main-wrapper{padding-bottom:0;}
}

@media (max-width:380px){
  .top-right .chip{display:none;}        /* telas muito estreitas: esconde data */
}

/* acessibilidade: respeitar redução de movimento */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

/* ============================================================
   DASHBOARD — tokens e componentes (fiel ao design aprovado)
   Adicionado para a tela única /dashboard.
   ============================================================ */
:root[data-theme="light"]{
  --kpi-green-bg:linear-gradient(150deg,#2C5A52,#19332F); --kpi-green-bd:transparent; --kpi-green-label:#9FE1CB;
  --kpi-blue-bg:linear-gradient(150deg,#2174BE,#134A7C);  --kpi-blue-bd:transparent;  --kpi-blue-label:#B5D4F4;
  --kpi-amber-bg:linear-gradient(150deg,#B26B12,#7E4A0A); --kpi-amber-bd:transparent; --kpi-amber-label:#FAC775;
  --kpi-purple-bg:linear-gradient(150deg,#7C3AED,#9333EA);--kpi-purple-bd:transparent;--kpi-purple-label:#DCD2FA;
  --kpi-value:#ffffff;
  --chart-line:#7C3AED; --chart-area:rgba(124,58,237,.14); --chart-grid:#EEF0EE; --chart-dot:#EC4899;
  --donut-1:#1F3D3A; --donut-2:#2174BE; --donut-3:#B26B12;
  --donut-ring:#E8EAE8;
  --bar-grad:linear-gradient(90deg,#7C3AED,#22C55E);
  --proj-tile-bg:linear-gradient(150deg,#F7F4FE,#FBF1F7); --proj-tile-bd:#EFE6FB;
  --kanban-purple-bg:rgba(124,58,237,.05); --kanban-purple-bd:#EDE6FB;
  --kanban-green-bg:rgba(34,197,94,.05);  --kanban-green-bd:#DDF1E4;
  --kanban-red-bg:rgba(239,68,68,.05);    --kanban-red-bd:#FBE0E0;
  --kanban-slate-bg:rgba(100,116,139,.05);--kanban-slate-bd:#E7EAEE;
  --kanban-card-bg:#ffffff; --kanban-card-bd:#EDEEED;
}
:root[data-theme="dark"]{
  --kpi-green-bg:rgba(159,225,203,.06); --kpi-green-bd:#234740; --kpi-green-label:#6FBDA1;
  --kpi-blue-bg:rgba(33,116,190,.08);   --kpi-blue-bd:#234740;  --kpi-blue-label:#6FA6D6;
  --kpi-amber-bg:rgba(245,158,11,.08);  --kpi-amber-bd:#3A3320; --kpi-amber-label:#E0A84A;
  --kpi-purple-bg:rgba(168,85,247,.1);  --kpi-purple-bd:#3A2C52;--kpi-purple-label:#C084FC;
  --kpi-value:#ffffff;
  --chart-line:#34D399; --chart-area:rgba(52,211,153,.20); --chart-grid:#16302B; --chart-dot:#34D399;
  --donut-1:#34D399; --donut-2:#38BDF8; --donut-3:#F59E0B;
  --donut-ring:#1B332E;
  --bar-grad:linear-gradient(90deg,#A855F7,#34D399);
  --proj-tile-bg:rgba(168,85,247,.07); --proj-tile-bd:#3A2C52;
  --kanban-purple-bg:rgba(168,85,247,.06); --kanban-purple-bd:#2A2147;
  --kanban-green-bg:rgba(52,211,153,.05);  --kanban-green-bd:#163A2D;
  --kanban-red-bg:rgba(239,68,68,.05);     --kanban-red-bd:#3A2222;
  --kanban-slate-bg:rgba(148,163,184,.04); --kanban-slate-bd:#2C3A3A;
  --kanban-card-bg:#10241F; --kanban-card-bd:#1F3B35;
}

/* layout do dashboard */
.dash{display:flex;flex-direction:column;gap:18px;max-width:1320px;width:100%;}
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.dash-greet{font-size:22px;font-weight:600;color:var(--text);}
.dash-greet-sub{font-size:13px;color:var(--text-muted);margin-top:2px;}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.kpi{border-radius:var(--r-card);padding:16px;border:1px solid transparent;display:flex;flex-direction:column;min-height:118px;}
.kpi__top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.kpi__label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;}
.kpi__icon{width:18px;height:18px;flex-shrink:0;}
.kpi__icon path,.kpi__icon circle{stroke:currentColor;}
.kpi__value{font-size:27px;font-weight:600;letter-spacing:-.01em;margin-top:10px;color:var(--kpi-value);}
.kpi__sub{font-size:11px;margin-top:3px;}
.kpi__meta{font-family:var(--mono);font-size:10px;margin-top:auto;padding-top:8px;opacity:.85;}
.kpi--green{background:var(--kpi-green-bg);border-color:var(--kpi-green-bd);color:var(--kpi-green-label);}
.kpi--blue{background:var(--kpi-blue-bg);border-color:var(--kpi-blue-bd);color:var(--kpi-blue-label);}
.kpi--amber{background:var(--kpi-amber-bg);border-color:var(--kpi-amber-bd);color:var(--kpi-amber-label);}
.kpi--purple{background:var(--kpi-purple-bg);border-color:var(--kpi-purple-bd);color:var(--kpi-purple-label);}

/* stat tiles (tarefas) */
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-tile);padding:14px;border-top:3px solid var(--accent,transparent);}
.stat .n{font-size:28px;font-weight:600;color:var(--accent,var(--text));}
.stat .lbl{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-top:2px;}
.stat--total{--accent:var(--text);}
.stat--green{--accent:var(--green);}  :root[data-theme="dark"] .stat--green{--accent:#34D399;}
.stat--purple{--accent:var(--purple);} :root[data-theme="dark"] .stat--purple{--accent:#C084FC;}
.stat--red{--accent:var(--red);}     :root[data-theme="dark"] .stat--red{--accent:#F87171;}
.stat--slate{--accent:var(--slate);} :root[data-theme="dark"] .stat--slate{--accent:#94A3B8;}

/* cards do dashboard (variante __ do design) */
.d-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:18px 20px;}
.card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.card__title{font-size:14px;font-weight:600;color:var(--heading);}
.card__link{font-size:12px;color:var(--purple);font-weight:500;}
:root[data-theme="dark"] .card__link{color:#C084FC;}

.grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;}
.grid-2b{display:grid;grid-template-columns:1fr 1.5fr;gap:14px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr .85fr;gap:14px;}

/* chart svg */
.chart{width:100%;height:180px;display:block;}
.chart-area{fill:var(--chart-area);}
.chart-line{fill:none;stroke:var(--chart-line);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.chart-grid line{stroke:var(--chart-grid);stroke-width:1;}
.chart-dot{fill:var(--chart-dot);}
.chart-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--text-faint);margin-top:4px;}

/* donut */
.donut-wrap{display:flex;align-items:center;gap:18px;}
.donut{width:108px;height:108px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.donut--caixa{background:conic-gradient(var(--donut-1) 0 var(--p1,51%),var(--donut-2) var(--p1,51%) var(--p2,84%),var(--donut-3) var(--p2,84%) 100%);}
.donut__hole{width:66px;height:66px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.donut__hole b{font-size:15px;font-weight:600;color:var(--heading);}
.donut__hole span{font-size:9px;color:var(--text-faint);}
.donut--status{width:120px;height:120px;}
.donut--status .donut__hole{width:74px;height:74px;}
.donut--status .donut__hole b{font-size:22px;}
.legend{display:flex;flex-direction:column;gap:9px;font-size:12px;}
.legend__row{display:flex;align-items:center;gap:8px;}
.legend__sw{width:9px;height:9px;border-radius:2px;}
.legend__row span:nth-child(2){color:var(--text-muted);}
.legend__val{margin-left:auto;font-family:var(--mono);color:var(--text);}

/* rows (listas) */
.d-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border-soft);gap:10px;}
.d-row:last-child{border-bottom:0;}
.d-row__l{display:flex;align-items:center;gap:10px;min-width:0;}
.dot-s{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.d-row__name{font-size:13px;color:var(--text);}
.d-row__name.is-danger{color:var(--red);font-weight:600;}
:root[data-theme="dark"] .d-row__name.is-danger{color:#F87171;}
.d-row__meta{font-size:11px;color:var(--text-faint);font-family:var(--mono);}
.d-row__val{font-size:13px;color:var(--text);font-family:var(--mono);}
.d-row__val.is-danger{color:var(--red);font-weight:600;}
:root[data-theme="dark"] .d-row__val.is-danger{color:#F87171;}

/* barras de progresso */
.bars{display:flex;flex-direction:column;gap:13px;}
.bar__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;gap:10px;}
.bar__name{font-size:13px;color:var(--text);}
.bar__name .tag{font-family:var(--mono);font-size:10px;color:var(--text-faint);}
.bar__pct{font-family:var(--mono);font-size:12px;font-weight:600;}
.bar__track{height:8px;background:var(--track);border-radius:5px;overflow:hidden;}
.bar__fill{height:100%;border-radius:5px;background:var(--bar-grad);}
.c-green{color:var(--green);}  :root[data-theme="dark"] .c-green{color:#34D399;}
.c-purple{color:var(--purple);} :root[data-theme="dark"] .c-purple{color:#C084FC;}
.c-amber{color:var(--amber);}  :root[data-theme="dark"] .c-amber{color:#E0A84A;}
.metas-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;}

/* kanban */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.kcol{border-radius:var(--r-tile);padding:12px;display:flex;flex-direction:column;gap:9px;}
.kcol--purple{background:var(--kanban-purple-bg);border:1px solid var(--kanban-purple-bd);}
.kcol--green{background:var(--kanban-green-bg);border:1px solid var(--kanban-green-bd);}
.kcol--red{background:var(--kanban-red-bg);border:1px solid var(--kanban-red-bd);}
.kcol--slate{background:var(--kanban-slate-bg);border:1px solid var(--kanban-slate-bd);}
.kcol__head{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;}
.kcol__head .d{width:7px;height:7px;border-radius:50%;}
.kcard{background:var(--kanban-card-bg);border:1px solid var(--kanban-card-bd);border-radius:9px;padding:10px;}
.kcard__t{font-size:12px;color:var(--text);}
.kcard__t.done{text-decoration:line-through;opacity:.7;}
.kcard__m{font-family:var(--mono);font-size:10px;color:var(--text-faint);margin-top:5px;}
.kcard__bar{height:5px;background:var(--track);border-radius:3px;margin-top:7px;overflow:hidden;}
.kcard__bar > i{display:block;height:100%;background:var(--bar-grad);}

/* proj tile */
.proj-tile{background:var(--proj-tile-bg);border:1px solid var(--proj-tile-bd);border-radius:var(--r-card);padding:16px 18px;display:flex;flex-direction:column;}
.proj-nums{display:flex;gap:14px;}
.proj-nums .n{font-size:30px;font-weight:600;}
.proj-nums .n.green{color:var(--green);}  :root[data-theme="dark"] .proj-nums .n.green{color:#34D399;}
.proj-nums .n.purple{color:var(--purple);} :root[data-theme="dark"] .proj-nums .n.purple{color:#C084FC;}
.proj-nums .lbl{font-size:11px;color:var(--text-muted);}
.audit{margin-top:auto;font-size:11px;color:var(--text-faint);font-family:var(--mono);padding-top:12px;}

/* responsivo do dashboard */
@media (max-width:900px){
  .kpi-grid{grid-template-columns:1fr 1fr;}
  .stat-grid{grid-template-columns:repeat(3,1fr);}
  .grid-2,.grid-2b,.grid-3{grid-template-columns:1fr;}
  .metas-grid{grid-template-columns:1fr;}
  .kanban{grid-template-columns:1fr 1fr;}
  .dash-greet{font-size:19px;}
  .kpi__value{font-size:23px;}
}
@media (max-width:560px){
  .kanban{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
}

/* ============================================================
   MÓDULO RH / TABELAS / LISTAS DE PESSOAS
   Componentes reutilizáveis (RH, Almoxarifado, Financeiro…)
   ============================================================ */
.mod-wrap{max-width:1100px;margin:0 auto;width:100%;}
.mod-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.mod-head-sub{font-size:13px;color:var(--text-muted);}

/* KPIs claros (estilo cartão simples, não-gradiente) */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px;}
.kpi-lite{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:16px 18px;}
.kpi-lite__label{font-size:11px;color:var(--text-faint);text-transform:uppercase;font-weight:600;letter-spacing:.06em;font-family:var(--mono);}
.kpi-lite__value{font-size:26px;font-weight:700;margin:6px 0 2px;color:var(--heading);}
.kpi-lite__value.pos{color:var(--green);} :root[data-theme="dark"] .kpi-lite__value.pos{color:#34D399;}
.kpi-lite__sub{font-size:12px;color:var(--text-faint);}
.kpi-lite__sub a{color:var(--purple);} :root[data-theme="dark"] .kpi-lite__sub a{color:#C084FC;}

/* abas (pill tabs) */
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.tab{padding:9px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:13px;color:var(--text-muted);text-decoration:none;font-family:inherit;transition:all .15s;}
.tab:hover{background:var(--pill-purple-bg);border-color:var(--pill-purple-tx);}
.tab.active{background:var(--pill-purple-bg);border-color:var(--purple);color:var(--pill-purple-tx);font-weight:600;}

/* cartão que envolve tabela */
.mod-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;}
.mod-card__bar{padding:12px 16px;border-bottom:1px solid var(--border);}
.mod-search{width:100%;max-width:320px;padding:9px 16px;border:1px solid var(--field-bd);border-radius:999px;font-size:13px;outline:none;background:var(--field-bg);color:var(--text);font-family:inherit;}
.mod-search:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--field-focus);}

/* tabela */
.mod-table{width:100%;border-collapse:collapse;font-size:13px;}
.mod-table th{text-align:left;padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);color:var(--text-muted);font-weight:600;font-size:11px;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;font-family:var(--mono);}
.mod-table td{padding:11px 16px;border-bottom:1px solid var(--border-soft);vertical-align:middle;color:var(--text);}
.mod-table tr:last-child td{border-bottom:none;}
.mod-table tbody tr{cursor:pointer;transition:background .1s;}
.mod-table tbody tr:hover td{background:var(--surface-2);}
.mod-scroll-x{overflow-x:auto;}

/* pessoa (avatar + nome) */
.person{display:flex;align-items:center;gap:10px;}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-weight:600;font-size:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.p-name{font-weight:500;color:var(--text);}
.p-sub{font-size:11.5px;color:var(--text-faint);}

/* chips de vínculo/status */
.chip-v{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid;}
.chip-v.clt{background:var(--pill-blue-bg);color:var(--pill-blue-tx);border-color:transparent;}
.chip-v.pj{background:var(--pill-green-bg);color:var(--pill-green-tx);border-color:transparent;}
.chip-v.out{background:var(--surface-2);color:var(--text-muted);border-color:var(--border);}
.chip-v.inc{background:var(--pill-amber-bg);color:var(--pill-amber-tx);border-color:transparent;}
.chip-v.ok{background:var(--pill-green-bg);color:var(--pill-green-tx);border-color:transparent;}

/* estados vazios / em breve */
.mod-empty{text-align:center;color:var(--text-faint);padding:50px 20px;font-size:13px;}
.mod-soon{background:var(--surface);border:1px dashed var(--pill-purple-tx);border-radius:var(--r-card);padding:36px;text-align:center;color:var(--text-muted);font-size:13px;}

/* painéis de aba */
.mod-panel{display:none;}
.mod-panel.active{display:block;}

@media (max-width:900px){
  .mod-table th:nth-child(n+4),.mod-table td:nth-child(n+4){display:none;} /* em telas pequenas, mostra só nome+cargo+setor */
  .mod-table th:last-child,.mod-table td:last-child{display:table-cell;}
}