/* ============================================================
   Van Lang Recruitment Dashboard — Stylesheet
   Tùy chỉnh nhanh: sửa các biến màu ở khối :root bên dưới.
   ============================================================ */
:root{
  --green-950:#052e16; --green-900:#14532d; --green-700:#15803d; --green-600:#16a34a; --green-100:#dcfce7; --green-50:#f0fdf4;
  --teal:#0d9488; --teal-100:#ccfbf1; --amber:#f59e0b; --amber-100:#fef3c7;
  --slate-900:#0f172a; --slate-700:#334155; --slate-500:#64748b; --slate-200:#e2e8f0; --slate-100:#f1f5f9; --slate-50:#f8fafc;
  --red:#dc2626; --red-100:#fee2e2; --blue:#2563eb; --blue-100:#dbeafe; --violet:#7c3aed; --violet-100:#ede9fe;
  --radius:14px; --shadow:0 1px 3px rgba(15,23,42,.08),0 4px 14px rgba(15,23,42,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--slate-100);color:var(--slate-900);font-size:14px}
a{color:var(--green-700)}
.layout{display:flex;min-height:100vh}
/* Sidebar */
.sidebar{width:248px;background:linear-gradient(180deg,var(--green-950),var(--green-900) 55%,#0b3d24);color:#e7f5ec;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;z-index:40}
.brand{padding:20px 18px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand .logo{width:152px;max-width:100%;border-radius:14px;background:#fff;padding:8px;margin-bottom:12px;line-height:0}
.brand .logo img{width:100%;height:auto;display:block}
.brand h2{font-size:15px;line-height:1.35}
.brand p{font-size:11.5px;color:#a7d7b8;margin-top:4px;line-height:1.45}
.nav{padding:14px 10px;flex:1}
.nav a{display:flex;gap:10px;align-items:center;color:#d9efe0;text-decoration:none;padding:10px 12px;border-radius:10px;font-size:13.5px;margin-bottom:2px;cursor:pointer}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.12);color:#fff}
.nav .sec{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8fc7a3;padding:12px 12px 6px}
.side-foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.12);font-size:11.5px;color:#a7d7b8;line-height:1.55}
.sync-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
.sync-live{background:var(--green-100);color:var(--green-900)}
.sync-snap{background:var(--amber-100);color:#92400e}
.sync-dot{width:8px;height:8px;border-radius:50%;background:currentColor}
/* Main */
.main{margin-left:248px;flex:1;padding:22px 26px 60px;max-width:calc(100vw - 248px)}
header.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:6px}
header.top h1{font-size:23px;line-height:1.3;color:var(--green-950)}
header.top .sub{color:var(--slate-500);margin-top:4px;font-size:13.5px}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--slate-200);background:#fff;color:var(--slate-700);padding:9px 14px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.btn:hover{border-color:var(--green-600);color:var(--green-700)}
.btn.primary{background:var(--green-700);border-color:var(--green-700);color:#fff}
.btn.primary:hover{background:var(--green-600)}
.meta-line{font-size:12px;color:var(--slate-500);margin:8px 0 18px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.notice{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:10px 14px;font-size:12.5px;margin-bottom:16px;line-height:1.55}
/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;border-top:4px solid var(--green-600)}
.kpi.amber{border-top-color:var(--amber)} .kpi.teal{border-top-color:var(--teal)} .kpi.blue{border-top-color:var(--blue)} .kpi.violet{border-top-color:var(--violet)} .kpi.red{border-top-color:var(--red)}
.kpi .label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-500)}
.kpi .value{font-size:30px;font-weight:800;margin:6px 0 2px}
.kpi .hint{font-size:12px;color:var(--slate-500);line-height:1.5}
/* Cards & grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.grid3{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:1200px){.grid2,.grid3{grid-template-columns:1fr}}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card h3{font-size:15px;margin-bottom:4px}
.card .desc{font-size:12.5px;color:var(--slate-500);margin-bottom:14px;line-height:1.55}
section.block{margin-top:26px}
section.block>h2{font-size:17px;margin-bottom:4px;color:var(--green-950)}
section.block>p{font-size:13px;color:var(--slate-500);margin-bottom:14px}
/* Bars */
.bar-row{display:grid;grid-template-columns:170px 1fr 44px;gap:10px;align-items:center;margin-bottom:9px;font-size:12.5px}
.bar-row .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--slate-700)}
.bar-track{background:var(--slate-100);border-radius:999px;height:16px;overflow:hidden}
.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green-700),var(--teal));min-width:2px}
.bar-row .vl{text-align:right;font-weight:700}
/* Funnel */
.funnel-stage{margin-bottom:10px}
.funnel-bar{color:#fff;border-radius:10px;padding:11px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:700;margin:0 auto}
.funnel-conv{text-align:center;font-size:11.5px;color:var(--slate-500);margin:3px 0 7px}
/* Donut */
.donut-wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.donut{width:150px;height:150px;border-radius:50%;flex:none;position:relative}
.donut::after{content:"";position:absolute;inset:26px;background:#fff;border-radius:50%}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;text-align:center}
.donut-center b{font-size:20px}
.donut-center span{font-size:10.5px;color:var(--slate-500)}
.legend{font-size:12.5px;line-height:1.5}
.legend div{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.legend .sw{width:12px;height:12px;border-radius:3px;flex:none}
/* Filters & table */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filters input[type=text],.filters input[type=date],.filters select{padding:9px 11px;border:1px solid var(--slate-200);border-radius:10px;font-size:13px;background:#fff}
.filters input[type=text]{min-width:250px;flex:1}
.filters label.chk{display:flex;gap:6px;align-items:center;font-size:13px;background:#fff;border:1px solid var(--slate-200);padding:8px 12px;border-radius:10px;cursor:pointer}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;background:var(--slate-50);color:var(--slate-500);font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:10px 10px;border-bottom:1px solid var(--slate-200);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--slate-100);vertical-align:top}
tr:hover td{background:var(--green-50)}
.cand-name{font-weight:700}
.cand-phone{font-size:11.5px;color:var(--slate-500)}
.raw-status{font-size:11.5px;color:var(--slate-500);max-width:260px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.b-new{background:var(--slate-100);color:var(--slate-700)} .b-reviewing{background:var(--blue-100);color:#1e40af}
.b-interviewing{background:var(--amber-100);color:#92400e} .b-hired{background:var(--green-100);color:var(--green-900)}
.b-rejected{background:var(--red-100);color:#991b1b}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:14px;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--slate-500)}
.link-btn{background:none;border:none;color:var(--green-700);font-weight:700;cursor:pointer;font-size:12.5px;padding:0}
/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;z-index:100;padding:18px}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:16px;max-width:640px;width:100%;max-height:88vh;overflow:auto;padding:24px}
.modal h3{font-size:18px;margin-bottom:2px}
.modal .kv{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;margin-top:16px;font-size:13.5px}
.modal .kv dt{color:var(--slate-500);font-weight:600}
.modal .kv dd{white-space:pre-wrap;word-break:break-word}
.modal textarea{width:100%;border:1px solid var(--slate-200);border-radius:10px;padding:9px;font-family:inherit;font-size:13px;margin-top:6px}
/* Misc */
table.map td:first-child{font-weight:600;white-space:nowrap}
.insight li{margin-bottom:9px;line-height:1.6;font-size:13.5px}
.insight ul{padding-left:18px}
code{background:var(--slate-100);padding:1px 6px;border-radius:6px;font-size:12px;word-break:break-all}
footer{margin-top:34px;font-size:12px;color:var(--slate-500);line-height:1.7}
.hired-list div{padding:9px 0;border-bottom:1px dashed var(--slate-200);font-size:13.5px}
.hired-list div:last-child{border-bottom:none}
@media(max-width:900px){.sidebar{display:none}.main{margin-left:0;max-width:100vw;padding:16px}}