/* =====================================================================
   ธีมกลางระบบ HR เบสท์เวิลด์ — ให้เข้าชุดกับระบบประเมินผลพนักงาน
   อ้างอิงจาก bestworld-hr-performance (โทนน้ำเงิน-เทาอ่อน IBM Plex Sans Thai)
   ===================================================================== */
:root{
  /* สีหลัก */
  --accent:#2563eb; --accent-600:#1d4ed8; --accent-700:#1e40af;
  --accent-soft:#eff4ff; --accent-soft-2:#dbe7ff;
  --navy:#0f2147; --navy-2:#16335f;

  /* แถบเมนูข้าง */
  --side-bg:linear-gradient(180deg,#0c1e44 0%,#122c5c 100%);
  --side-fg:#c5d3ee; --side-fg-dim:#7e93bd;
  --side-active-bg:rgba(255,255,255,.10); --side-active-fg:#ffffff;

  /* พื้นผิว */
  --bg:#eef1f7; --surface:#ffffff; --surface-2:#f7f9fc; --surface-3:#f1f4fa;
  --text:#16223a; --text-2:#5b6b86; --text-3:#6b7a94;
  --border:#e4e9f2; --border-2:#eef1f7;

  /* สีสื่อความหมาย */
  --green:#16a34a; --green-soft:#e7f6ec;
  --teal:#0d9488;  --teal-soft:#e2f4f2;
  --blue:#2563eb;  --blue-soft:#e8effb;
  --amber:#e08a00; --amber-soft:#fdf1dc;
  --red:#e11d48;   --red-soft:#fbe7ec;

  /* มุมโค้ง / เงา / ระยะ */
  --r-xs:7px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(15,33,71,.06);
  --shadow-sm:0 2px 8px rgba(15,33,71,.06), 0 1px 2px rgba(15,33,71,.04);
  --shadow:0 6px 22px rgba(15,33,71,.08), 0 2px 6px rgba(15,33,71,.04);
  --shadow-lg:0 18px 48px rgba(15,33,71,.14);
  --gap:20px; --side-w:250px;

  --font:'IBM Plex Sans Thai',system-ui,-apple-system,'Leelawadee UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* ---- พื้นฐาน ---- */
body.bwp{ background:var(--bg); color:var(--text); font-family:var(--font); }
body.bwp input, body.bwp select, body.bwp textarea, body.bwp button{ font-family:var(--font); }

/* ---- การ์ด ---- */
.bwp .card, .bwp-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--shadow-sm);
}
.bwp-card-pad{ padding:20px 22px; }
.bwp-card-head{
  display:flex; align-items:flex-start; gap:12px 16px;
  padding:18px 22px; border-bottom:1px solid var(--border-2); flex-wrap:wrap;
}
.bwp-card-head h3{ margin:0; font-size:15px; font-weight:600; }
.bwp-card-head p{ margin:2px 0 0; font-size:12.5px; color:var(--text-2); }

/* ---- ปุ่ม ---- */
.bwp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-sm); padding:9px 16px; font-size:13.5px; font-weight:600;
  cursor:pointer; border:1px solid transparent; font-family:var(--font);
  transition:background .12s, border-color .12s;
}
.bwp-btn:active{ transform:translateY(1px); }
.bwp-btn-pri{ background:var(--accent); color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.28); }
.bwp-btn-pri:hover{ background:var(--accent-600); }
.bwp-btn-ghost{ background:var(--surface); color:var(--text); border-color:var(--border); }
.bwp-btn-ghost:hover{ background:var(--surface-2); border-color:#d3dbe9; }
.bwp-btn-soft{ background:var(--accent-soft); color:var(--accent-700); }
.bwp-btn-soft:hover{ background:var(--accent-soft-2); }
.bwp-btn-sm{ padding:6px 11px; font-size:12.5px; }

/* ---- ช่องกรอก ---- */
.bwp-input{
  width:100%; padding:10px 13px; font-size:14px; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm);
  font-family:var(--font);
}
.bwp-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* ---- การ์ดสถิติ ---- */
.bwp-stat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:20px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:12px;
}
.bwp-stat .lab{ color:var(--text-2); font-size:13px; font-weight:500; }
.bwp-stat .val{
  font-size:30px; font-weight:700; letter-spacing:-.01em; line-height:1;
  font-feature-settings:"tnum"; font-variant-numeric:tabular-nums;
}

/* ---- ป้ายสถานะ ---- */
.bwp-pill{
  display:inline-block; font-size:11.5px; font-weight:700;
  padding:3px 10px; border-radius:var(--r-pill); white-space:nowrap;
}
.bwp-pill-green{ background:var(--green-soft); color:var(--green); }
.bwp-pill-blue { background:var(--blue-soft);  color:var(--blue); }
.bwp-pill-amber{ background:var(--amber-soft); color:var(--amber); }
.bwp-pill-red  { background:var(--red-soft);   color:var(--red); }
.bwp-pill-teal { background:var(--teal-soft);  color:var(--teal); }

/* ---- แถบเมนูข้าง ---- */
.bwp-side{ background:var(--side-bg); color:var(--side-fg); }
.bwp .sb-link{
  display:flex; align-items:center; gap:9px; padding:10px 13px;
  border-radius:var(--r-sm); font-size:13.5px; font-weight:500;
  color:var(--side-fg); text-decoration:none; transition:background .12s,color .12s;
}
.bwp .sb-link:hover{ background:rgba(255,255,255,.07); color:#fff; }
.bwp .sb-link.active{ background:var(--side-active-bg); color:var(--side-active-fg); font-weight:600; }

/* ---- ตาราง ---- */
.bwp-th{
  font-size:11.5px; font-weight:700; letter-spacing:.3px; color:var(--text-2);
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.bwp-td{ font-size:13.5px; border-bottom:1px solid var(--border-2); }

/* เอกสารที่พิมพ์ (.page/.ovpage) คงฟอนต์และสีเดิมไว้ เพื่อไม่ให้ตำแหน่งบนฟอร์มจริงเพี้ยน */
@media print{
  body.bwp{ background:#fff; }
}