/* ============================================================
   EASY PEOPLE RH — estilo (linguagem visual do dashboard)
   ============================================================ */
:root{
  --bg:#0d1117; --surface:#161b22; --surface2:#1f2630; --border:#2b3340;
  --text:#e6e9ef; --text2:#c8ccd4; --dim:#8b93a7; --dim2:#6b7280;
  --accent:#ED6F1B; --accent-soft:#ED6F1B22; --ok:#22c55e; --erro:#ef4444; --warn2:#eab308;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:14px/1.5 -apple-system,'Segoe UI',Roboto,sans-serif}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim);font-weight:600}

/* login */
#loginScreen{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:40px;width:360px;display:flex;flex-direction:column;gap:12px}
.login-logo{font-size:34px;font-weight:800;color:var(--accent);text-align:center;letter-spacing:-1px}
.login-logo span{color:var(--text2);font-weight:600}
.login-sub{text-align:center;color:var(--dim);margin-bottom:12px}
#loginBtn{background:var(--accent);border:none;border-radius:8px;color:#fff;font-weight:700;padding:11px}
#loginMsg{color:var(--warn2);font-size:12px;text-align:center;min-height:18px}

/* layout */
#app{display:flex;min-height:100vh}
#sidebar{width:232px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.logo-area{padding:18px 16px;border-bottom:1px solid var(--border)}
.logo-txt{font-size:20px;font-weight:800;color:var(--accent)}
.logo-txt b{color:var(--text2);font-weight:600}
.logo-rh{background:var(--accent-soft);color:var(--accent);border-radius:6px;font-size:11px;font-weight:700;padding:2px 7px;margin-left:8px}
#nav{flex:1;overflow:auto;padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.nav-btn{background:none;border:none;border-radius:8px;color:var(--text2);text-align:left;padding:9px 12px;font-size:13px}
.nav-btn:hover{background:var(--surface2)}
.nav-btn.active{background:var(--accent-soft);color:var(--accent);font-weight:700}
.side-foot{border-top:1px solid var(--border);padding:12px;display:flex;gap:8px;align-items:center;font-size:12px}
#userBadge{flex:1;color:var(--dim)} #userBadge b{color:var(--text)} .papel{color:var(--accent);font-size:11px}
#main{flex:1;padding:22px 26px;min-width:0}
#topbar{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
#topbar h1{font-size:20px} #topInfo{color:var(--dim);font-size:12px}

/* componentes */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:18px}
.ctit{font-weight:700;margin-bottom:12px}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.controls select,.controls input{width:auto;min-width:130px}
.search{min-width:180px}
.info{color:var(--dim);font-size:12px;margin-left:auto}
.btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text2);padding:8px 13px;font-size:13px;font-weight:600}
.btn:hover{border-color:var(--accent);color:var(--text)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-sm{padding:5px 10px;font-size:12px}
.mini-btn{background:none;border:1px solid var(--border);border-radius:6px;color:var(--text2);padding:2px 7px;font-size:12px;margin-right:3px}
.mini-btn:hover{border-color:var(--accent)}
.qper{display:flex;gap:4px}
.qper button{background:var(--surface2);border:1px solid var(--border);border-radius:14px;color:var(--dim);font-size:11px;font-weight:600;padding:4px 11px}
.qper button:hover{border-color:var(--accent);color:var(--text)}

/* tabelas */
.twrap{overflow:auto;border:1px solid var(--border);border-radius:10px}
.twrap.alto{max-height:62vh}
table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
th{background:var(--surface2);color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:9px 10px;text-align:left;cursor:pointer;user-select:none;position:sticky;top:0;z-index:2}
td{padding:8px 10px;border-top:1px solid var(--border)}
th.num,td.num{text-align:right}
.si{color:var(--dim2);font-size:10px}
tr.rl{cursor:pointer} tr.rl:hover td{background:var(--surface2)}
.dim{color:var(--dim)} .vazio{text-align:center;color:var(--dim);padding:24px !important}
td.tot{background:var(--surface2);font-weight:700;position:sticky;bottom:0}
.tag{border-radius:5px;font-size:11px;font-weight:700;padding:2px 7px}
.badge{border-radius:10px;font-size:11px;font-weight:700;padding:2px 9px;background:var(--surface2);color:var(--dim)}
.badge.ok{background:#22c55e22;color:var(--ok)} .badge.warn{background:#eab30822;color:var(--warn2)} .badge.danger{background:#ef444422;color:var(--erro)}
.fx{font-size:9px;color:var(--accent);font-style:italic;margin-left:3px}
.fxbtn{font-style:italic;font-weight:800}
.fxbtn.on{color:var(--accent);border-color:var(--accent)} .fxbtn.off{color:var(--dim2);text-decoration:line-through}
table.mini th{position:static}

/* KPIs e gráficos */
.kpis{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 18px;min-width:170px}
.kpi span{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.4px;display:block}
.kpi b{font-size:19px} .kpi.warn{border-color:var(--warn2)}
.kmini{display:flex;gap:18px;background:var(--surface2);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:12px;color:var(--dim)}
.kmini b{color:var(--text);margin-left:5px}
.grid2c{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ch{height:250px;position:relative}
@media(max-width:900px){.grid2c{grid-template-columns:1fr}#sidebar{width:64px}.nav-btn{font-size:16px;text-align:center}.logo-txt,.logo-rh,#userBadge{display:none}}

/* modal e toasts */
#overlay{display:none;position:fixed;inset:0;background:#000a;z-index:100;align-items:center;justify-content:center;padding:20px}
#modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;max-width:860px;width:100%;max-height:88vh;display:flex;flex-direction:column}
.m-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);font-weight:700}
.m-x{background:none;border:none;color:var(--dim);font-size:16px}
.m-body{padding:18px 20px;overflow:auto}
.m-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:700px){.grid2{grid-template-columns:1fr}}
.hint{color:var(--dim);font-size:12px;margin:6px 0}
.sec{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);margin:14px 0 8px}
.row{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.row.wrap{flex-wrap:wrap;align-items:stretch}
.row input,.row select{width:auto}
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:200}
.toast{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--dim);border-radius:8px;padding:11px 16px;font-size:13px;max-width:360px;box-shadow:0 8px 24px #0008}
.toast.ok{border-left-color:var(--ok)} .toast.erro{border-left-color:var(--erro)} .toast.info{border-left-color:var(--accent)}