/* Golden Eleven • DO - minimal styles */
body{background:#f7f9fb}
.navbar-brand{font-weight:700}
.card{border:0;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.table td,.table th{vertical-align:middle}
.badge-role{font-size:.75rem}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:12px
}
@media (max-width: 480px){
  .container{padding-left:10px;padding-right:10px}
}

/* sync9 polish */
.card{border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.05);} .btn{border-radius:12px;} @media(max-width:992px){.navbar{position:sticky;top:0;z-index:1000}.offcanvas{width:90%!important}}

/* === FINAL v3 Supervisor Header Polish === */
.nav-tabs { border-bottom: 1px solid rgba(15,20,33,.08); }
.nav-tabs .nav-link { padding: .55rem .9rem; margin-right: .25rem; border: 1px solid transparent; border-top-left-radius: .75rem; border-top-right-radius: .75rem; color:#2a3344; }
.nav-tabs .nav-link:hover { background: #f6f8fb; border-color: rgba(15,20,33,.08); }
.nav-tabs .nav-link.active { background: #ffffff; border-color: rgba(15,20,33,.12) rgba(15,20,33,.12) #ffffff; color:#0f1421; font-weight:600; }
.page-title { font-weight: 700; color: #0f1421; }

/* ===== Monitor page only (scoped) ===== */
#spv-monitor .section-box.sec-in{
  background:#eef6ff;        /* Sedang Dikerjakan: biru muda */
  border-color:#cfe3ff;
}
#spv-monitor .section-box.sec-sub{
  background:#fff8e6;        /* Menunggu Verifikasi: krem */
  border-color:#ffe2a9;
}
#spv-monitor .section-box.sec-decline-pending{
  background:#fff1f2;        /* Pengajuan Penolakan: merah muda */
  border-color:#fecdd3;
}
#spv-monitor .section-box.sec-decline-approved{
  background:#f0fdf4;        /* Penolakan Karyawan: hijau muda */
  border-color:#bbf7d0;
}

/* kartu di dalam section tetap putih & rapi */
#spv-monitor .cardx{ background:#fff; }

/* badge counter di header section tetap kontras */
#spv-monitor .section-head .pill{
  background:rgba(255,255,255,.7);
  border-color:rgba(0,0,0,.08);
}

/* ====== Rapatkan kartu monitor (Grid) — hanya di halaman monitor ====== */
#spv-monitor .cardx{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto; /* kiri fleksibel, kanan rapat */
  grid-template-rows:auto auto;             /* baris 1: nama | kanan, baris 2: judul | kanan */
  grid-template-areas:
    "name right"
    "title right";
  column-gap:12px;
  row-gap:0;
  padding:.22rem .58rem .26rem;             /* padat */
  margin-bottom:.28rem;
}
#spv-monitor .topbar{display:contents}      /* flatten agar anaknya ikut grid */
#spv-monitor .name-line{grid-area:name; gap:4px; line-height:1}
#spv-monitor .rightx{grid-area:right; min-width:130px; text-align:right; display:flex; flex-direction:column; align-items:flex-end}
#spv-monitor .title-line{grid-area:title; margin-top:0; line-height:1.12; font-weight:700}
#spv-monitor .notes,#spv-monitor .metax{grid-column:1 / -1} /* elemen bawah span 2 kolom */

/* komponen kecil dipadatkan */
#spv-monitor .name{line-height:1;margin:0}
#spv-monitor .div-badge{padding:.02rem .34rem;font-size:.64rem;line-height:1;max-width:38vw}
#spv-monitor .code-mini{margin-top:-2px;font-size:.7rem;line-height:1;letter-spacing:.2px;opacity:.85}
#spv-monitor .cap{margin-top:0;line-height:1;font-size:.7rem;color:#6b7280}
#spv-monitor .dur{margin-top:0;line-height:1;font-variant-numeric:tabular-nums;font-weight:800;font-size:15.5px;letter-spacing:.35px}
@media (min-width:992px){#spv-monitor .dur{font-size:17px}}

#spv-monitor .acts{margin-top:4px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#spv-monitor .btn-compact{padding:3px 8px;font-size:.76rem;border-radius:8px}

/* teks meta dipadatkan */
#spv-monitor .notes{margin-top:2px;font-size:.84rem;line-height:1.18}
#spv-monitor .metax{margin-top:2px;gap:6px;font-size:.76rem}
#spv-monitor .cardx + .cardx{margin-top:.24rem}