/* ============================================================================
 *  shared.css -- gaya bersama untuk semua halaman.
 *
 *  Sebelumnya setiap halaman punya salinan CSS sendiri dengan lebar berbeda
 *  (820 sampai 1560 px), sehingga tata letak melompat setiap kali berpindah
 *  menu. Satu berkas membuat posisi navigasi dan tepi kartu tetap sama.
 * ==========================================================================*/

:root {
  --navy: #0B2545;  --navy2: #123A64;  --blue: #1D4E89;
  --teal: #0E7C7B;  --amber: #B7791F;  --red: #9B2C2C;
  --green: #2F855A; --purple: #5B4B8A;
  --ink: #1B2733;   --muted: #6B7787;  --line: #E2E8F0;
  --bg: #F5F7FA;    --card: #fff;
  --sh: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -12px rgba(16,24,40,.18);

  /* Satu lebar untuk semua halaman.
     1200 px: tabel talent pool punya banyak kolom dan butuh ruang, tapi di
     atas ~1300 px baris jadi terlalu panjang untuk dibaca nyaman. Angka ini
     juga pas untuk laptop 1366 px. */
  --wrap: 1200px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Inter, system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px 56px; }

/* ------------------------------------------------------------------ hero -*/
.hero {
  background: linear-gradient(135deg, #0B2545 0%, #123A64 48%, #0E7C7B 100%);
  color: #fff;
  padding: 26px 0 74px;
  margin-bottom: -54px;
}
.hero .wrap { padding-bottom: 0; }
.hero-row {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 20px; flex-wrap: wrap;
}
.hero h1 { margin: 0; font-size: 23px; font-weight: 650; letter-spacing: -.3px; }
.hero .sub { margin-top: 5px; font-size: 13px; opacity: .85; }
.hero .meta { font-size: 11.5px; opacity: .82; margin-top: 8px; }

/* -------------------------------------------------------------- navigasi -*/
.nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nav a, .nav button {
  color: #fff; text-decoration: none;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.5;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.1);
  cursor: pointer; transition: .15s;
}
.nav a:hover, .nav button:hover { background: rgba(255,255,255,.2); }
.nav a.on { background: #fff; color: var(--navy); border-color: #fff; }
.nav button#signout {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.4);
}
.nav button#signout:hover { background: rgba(255,255,255,.22); }

/* Tautan Users disembunyikan sampai loadMe memastikan perannya
   administrator. Menyembunyikan lebih dulu mencegah kedipan. */
.admin-only { display: none; }
.admin-only.show { display: inline-block; }

/* ------------------------------------------------------------------ KPI --*/
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.kpi {
  border-radius: 13px; padding: 16px 18px; color: #fff;
  box-shadow: var(--sh); position: relative; overflow: hidden;
  min-height: 104px; display: flex; flex-direction: column;
  justify-content: space-between;
}
.kpi::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 104px; height: 104px; border-radius: 50%;
  background: rgba(255,255,255,.09);
}
.kpi .l {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
  opacity: .9; font-weight: 600;
}
.kpi .v {
  font-size: 28px; font-weight: 680; line-height: 1.05;
  margin: 6px 0 0; letter-spacing: -.8px;
}
.kpi .v small { font-size: 14px; font-weight: 600; opacity: .85; margin-left: 2px; }
.kpi .f { font-size: 11.5px; opacity: .88; margin-top: 5px; position: relative; z-index: 1; }
.g1 { background: linear-gradient(135deg, #1D4E89, #123A64); }
.g2 { background: linear-gradient(135deg, #0E7C7B, #0F5F66); }
.g3 { background: linear-gradient(135deg, #B7791F, #8C5A12); }
.g4 { background: linear-gradient(135deg, #5B4B8A, #3E3468); }
.g5 { background: linear-gradient(135deg, #2F855A, #22613F); }
.g6 { background: linear-gradient(135deg, #9B2C2C, #732020); }

/* ---------------------------------------------------------------- bagian -*/
section { margin-top: 20px; }
.sec { display: flex; align-items: baseline; gap: 11px; margin: 0 0 13px; flex-wrap: wrap; }
.sec h2 { margin: 0; font-size: 16px; font-weight: 650; color: var(--navy); }
.sec .n {
  width: 23px; height: 23px; border-radius: 7px;
  background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; flex: none; align-self: center;
}
.sec .n.off { background: #C3CFDD; }
.sec .note { font-size: 12.5px; color: var(--muted); }

.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 19px 21px; box-shadow: var(--sh);
  margin-bottom: 18px;
}
.panel h2 { margin: 0 0 4px; font-size: 15.5px; font-weight: 650; color: var(--navy); }
.panel h3 { margin: 0 0 3px; font-size: 13.5px; font-weight: 650; color: var(--navy); }
.panel .hint { font-size: 12.5px; color: var(--muted); margin: 0 0 16px; }

/* ----------------------------------------------------------------- tabel -*/
.scroll { overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--navy); color: #fff; text-align: left;
  padding: 9px 11px; font-weight: 600; font-size: 11.5px; white-space: nowrap;
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { background: var(--navy2); }
thead th.sortable::after { content: "⇅"; opacity: .34; margin-left: 5px; font-size: 10px; }
thead th.asc::after { content: "↑"; opacity: 1; }
thead th.desc::after { content: "↓"; opacity: 1; }
tbody td { padding: 9px 11px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: #F7FAFD; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; }
.empty { padding: 30px; text-align: center; color: var(--muted); }

/* ------------------------------------------------------------------ pil --*/
.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 650; white-space: nowrap;
}
.p-Strong, .s-active, .p-done { background: #D9F2EF; color: #0A5D5C; }
.p-Good, .p-processing     { background: #DCE9F8; color: #164E87; }
.p-Possible, .s-locked     { background: #FBEFD5; color: #8C5A12; }
.p-Weak, .s-off, .p-error  { background: #F7DCDC; color: #8A2626; }
.p-queued                  { background: #EDF1F6; color: #5A6472; }
.r-admin     { background: #E9E3F7; color: #4A3B78; }
.r-recruiter { background: #DCE9F8; color: #164E87; }
.r-viewer    { background: #EDF1F6; color: #5A6472; }
.badge {
  font-size: 10px; background: var(--navy); color: #fff;
  padding: 2px 8px; border-radius: 999px; font-weight: 700;
}

.mini {
  width: 56px; height: 6px; background: #EDF1F6; border-radius: 4px;
  display: inline-block; vertical-align: middle; margin-left: 7px; overflow: hidden;
}
.mini i { display: block; height: 100%; border-radius: 4px; }
.rk {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; border-radius: 7px;
  background: #EDF1F6; color: var(--muted); font-weight: 700; font-size: 11.5px;
}
.rk.top { background: var(--navy); color: #fff; }
.rk.t2  { background: #DCE9F8; color: #164E87; }
.rk.t3  { background: #E8EEF6; color: #3D5A80; }

/* ---------------------------------------------------------------- kontrol*/
input, select, textarea {
  width: 100%; font: inherit; font-size: 13px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 9px;
  background: #fff; color: var(--ink); outline: none; transition: .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,78,137,.12);
}
input:disabled, select:disabled { background: #F3F6FA; color: var(--muted); }
label {
  display: block; font-size: 11.5px; font-weight: 600;
  color: var(--navy); margin-bottom: 4px;
}

.btn {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 8px 15px; border-radius: 9px;
  border: 1px solid var(--line); background: #fff; color: var(--navy);
  cursor: pointer; transition: .15s; text-decoration: none;
  display: inline-block; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #F3F6FA; }
.btn.dark { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn.dark:hover:not(:disabled) { background: var(--navy2); }
.btn.danger { color: var(--red); border-color: #F0C0C0; }
.btn.danger:hover:not(:disabled) { background: #FDF2F2; }
.btn.sm { padding: 5px 11px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ----------------------------------------------------------------- pesan -*/
.msg {
  padding: 11px 14px; border-radius: 9px; font-size: 12.5px;
  margin-bottom: 16px; display: none;
}
.msg.on { display: block; }
.msg.err  { background: #F7DCDC; color: #8A2626; border: 1px solid #F0C0C0; }
.msg.ok   { background: #D9F2EF; color: #0A5D5C; border: 1px solid #A8DED8; }
.msg.warn { background: #FBEFD5; color: #7A4E06; border: 1px solid #F0D9A0; }
.msg.info { background: #DCE9F8; color: #164E87; border: 1px solid #BCD4EE; }

/* ------------------------------------------------------------------ laci -*/
#ov {
  position: fixed; inset: 0; background: rgba(11,37,69,.45);
  display: none; z-index: 50; backdrop-filter: blur(2px);
}
#ov.on { display: block; }
#dw {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(660px, 94vw); background: #fff; z-index: 51;
  box-shadow: -14px 0 40px -12px rgba(11,37,69,.4);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  overflow: auto;
}
#dw.on { transform: none; }
.dw-h { background: var(--navy); color: #fff; padding: 18px 22px; position: sticky; top: 0; z-index: 2; }
.dw-h h3 { margin: 0; font-size: 17px; font-weight: 650; }
.dw-h .s { font-size: 12.5px; opacity: .82; margin-top: 3px; }
.dw-h .x {
  position: absolute; top: 16px; right: 18px;
  background: rgba(255,255,255,.16); border: none; color: #fff;
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  font-size: 16px; line-height: 1;
}
.dw-b { padding: 20px 22px; }
.dw-b h4 {
  margin: 20px 0 8px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .7px; color: var(--muted);
}
.dw-b h4:first-child { margin-top: 0; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 5px 12px; font-size: 12.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

.mrow { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin-bottom: 9px; }
.mrow.applied { border-color: var(--navy); border-width: 2px; background: #F7FAFD; }
.mrow .t { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mrow .t b { font-size: 13px; color: var(--navy); }
.mrow .sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.mrow .fits { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-top: 7px; }
.mrow .gap { font-size: 11.5px; color: #8C5A12; margin-top: 6px; }
.mrow .gate { font-size: 11.5px; color: #8A2626; margin-top: 4px; }

/* ------------------------------------------------------------------- lain*/
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  background: #EDF1F6; border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 11px; font-size: 11.5px;
}
.chip b { color: var(--navy); margin-left: 5px; }
.chip.hot { background: #FBEFD5; border-color: #F0D9A0; color: #7A4E06; }

.spin {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid #C3CFDD; border-top-color: var(--blue);
  border-radius: 50%; animation: sp .7s linear infinite;
  vertical-align: -1px; margin-right: 6px;
}
.spin.light { border-color: rgba(255,255,255,.4); border-top-color: #fff; }
@keyframes sp { to { transform: rotate(360deg); } }

.flag { color: var(--amber); font-weight: 700; cursor: help; }
.hidden { display: none !important; }

footer {
  margin-top: 26px; padding: 16px 19px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px;
  font-size: 11.5px; color: var(--muted); line-height: 1.6;
}
footer b { color: var(--navy); }

/* Lebar halaman.
   1200px terasa sempit: tabel talent pool punya sepuluh kolom, dan tabel
   perbandingan bisa memuat empat kandidat sekaligus. 1560px memberi ruang
   tanpa membuat baris terlalu panjang di layar besar. */
:root{--wrap:1560px}

/* ---- rincian skor: tiga bagian yang belum rapi --------------------- */

/* Tombol "Why this score?".
   Sebelumnya memakai tampilan bawaan browser -- kotak abu-abu dengan tepi
   tebal yang bertabrakan dengan gaya kartu di sekitarnya. */
.mrow .toggle{
  background:transparent;
  border:1px solid #C9D6E4;
  color:var(--blue);
  font:inherit;font-size:11.5px;font-weight:600;
  padding:5px 13px;border-radius:7px;
  cursor:pointer;margin-top:10px;
  transition:background .14s,border-color .14s;
  display:inline-block;line-height:1.4;
}
.mrow .toggle:hover{background:#EEF4FA;border-color:var(--blue)}
.mrow .toggle:active{background:#E2ECF6}

/* Daftar chip di bawah tabel rincian.
   Sebelumnya berdempetan dengan baris subtotal di atasnya, dan kedua
   kolomnya tidak sejajar. */
.bd-sk{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line);
}
@media (max-width:620px){.bd-sk{grid-template-columns:1fr;gap:14px}}
.bd-h{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);font-weight:650;margin-bottom:8px;
}
.bd-sk .chips{gap:6px}
.bd-sk .chip{
  font-size:11px;padding:4px 10px;border-radius:6px;line-height:1.4;
}
.chip.ok{background:#E4F4F1;border-color:#B4DED7;color:#0A5D5C}
.chip.no{background:#FAF0DA;border-color:#EBD6A6;color:#7A4E06}

/* Baris subtotal diberi ruang bernapas. */
table.bd tfoot td{padding-top:11px;padding-bottom:11px}

/* ---- blok penandaan ------------------------------------------------ */
/* Dropdown sebelumnya melebar penuh tanpa gaya, sehingga terlihat
   terpisah dari kartu yang memuatnya. */
.tagbox select{
  max-width:420px;font-size:12.5px;padding:8px 11px;
  border-color:#C9D6E4;background:#fff;
}
.tagbox select:focus{border-color:var(--blue)}
.tagbox .btn{margin-top:2px}

/* Penanda baris hasil penandaan manual di tabel. */
.pill.tagged{background:#D9F2EF;color:#0A5D5C}