/* ============================================================
   KOMPAS V27.18 — RUMUSAN PENEMPATAN
   ============================================================ */

.v2718-placement-root { width: 100%; }
.v2718-card { width: 100%; max-width: none !important; margin: 0 0 24px !important; }
.v2718-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.v2718-heading-row h2 { margin: 6px 0 8px; }
.v2718-breadcrumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 4px; color:#64748b; font-size:13px; }
.v2718-breadcrumb strong { color:#0b2948; }

.v2718-kpis {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}
.v2718-kpi {
  min-width:0;
  min-height:112px;
  padding:17px 16px;
  border:1px solid #dbe3ee;
  border-radius:16px;
  background:linear-gradient(180deg,#fff,#f8fafc);
  box-shadow:0 4px 14px rgba(15,42,72,.04);
  position:relative;
  overflow:hidden;
}
.v2718-kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:#0b2948; }
.v2718-kpi span { display:block; color:#59677c; font-size:13px; font-weight:700; line-height:1.35; }
.v2718-kpi strong { display:block; margin-top:12px; color:#0b2948; font-size:clamp(24px,2vw,32px); line-height:1; font-weight:850; }

.tone-navy::before { background:#0b2948; }
.tone-green::before { background:#16875b; }
.tone-amber::before { background:#d97706; }
.tone-blue::before { background:#2563eb; }
.tone-teal::before { background:#0f8b8d; }
.tone-red::before { background:#c93636; }

.v2718-summary-table { min-width:1180px !important; }
.v2718-sort {
  display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:transparent;
  color:inherit; font:inherit; font-weight:800; cursor:pointer; white-space:nowrap;
}
.v2718-sort:hover { color:#0b2948; }
.v2718-sort span { min-width:12px; color:#0b2948; }

.v2718-name-link {
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; padding:0;
  border:0; background:transparent; text-align:left; color:#0b2948; cursor:pointer; font:inherit;
}
.v2718-name-link:hover strong { text-decoration:underline; }
.v2718-name-link small { color:#738097; font-size:12px; }

.v2718-metric {
  min-width:58px; min-height:34px; padding:7px 10px; border-radius:10px; border:1px solid transparent;
  font:inherit; font-weight:850; cursor:pointer; background:#eef3f8; color:#0b2948;
}
.v2718-metric:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(15,42,72,.08); }
.v2718-metric.tone-navy { background:#eaf0f7; border-color:#c7d4e3; color:#0b2948; }
.v2718-metric.tone-green { background:#e9f7f0; border-color:#b9e4cf; color:#10734d; }
.v2718-metric.tone-amber { background:#fff5e6; border-color:#f5d5a4; color:#a95706; }
.v2718-metric.tone-blue { background:#edf4ff; border-color:#c8dcff; color:#1d5ec9; }
.v2718-metric.tone-teal { background:#e8f7f7; border-color:#bce1e2; color:#087779; }
.v2718-metric.tone-red { background:#fff0f0; border-color:#f1c1c1; color:#b12626; }

.v2718-percent { width:120px; padding:0; border:0; background:transparent; cursor:pointer; text-align:left; }
.v2718-percent span { display:block; margin-bottom:6px; font-weight:850; color:#10734d; }
.v2718-percent i { display:block; height:7px; border-radius:99px; overflow:hidden; background:#e7edf4; }
.v2718-percent b { display:block; height:100%; border-radius:inherit; background:#16875b; }

.v2718-pagination { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; }
.v2718-pagination .pagination-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.v2718-pagination select { min-height:38px; border:1px solid #cfd8e5; border-radius:9px; padding:6px 10px; background:white; }
.v2718-page-btn { min-width:38px; min-height:38px; padding:6px 10px; border:1px solid #d4deea; border-radius:9px; background:#fff; color:#0b2948; cursor:pointer; font-weight:750; }
.v2718-page-btn:hover:not(:disabled), .v2718-page-btn.active { background:#0b2948; color:#fff; border-color:#0b2948; }
.v2718-page-btn:disabled { opacity:.42; cursor:not-allowed; }
.v2718-page-ellipsis { padding:0 4px; color:#8290a4; }

.v2718-filter-pill { display:inline-flex; vertical-align:middle; margin-left:8px; padding:5px 9px; border-radius:99px; background:#edf4ff; color:#1d5ec9; font-size:12px; font-weight:800; }
.v2718-student-toolbar { display:flex; justify-content:flex-end; margin:18px 0 6px; }
.v2718-student-toolbar input { width:min(460px,100%); min-height:44px; border:1px solid #cfd8e5; border-radius:11px; padding:10px 13px; font:inherit; }
.v2718-student-table { min-width:1050px !important; }
.v2718-domain-list { display:flex; gap:5px; flex-wrap:wrap; }
.v2718-domain-badge { display:inline-flex; align-items:center; padding:4px 7px; border:1px solid #f0b8b8; border-radius:8px; background:#fff1f1; color:#ac2525; font-size:12px; font-weight:850; }
.v2718-placement-badge { display:inline-flex; align-items:center; padding:6px 9px; border-radius:9px; font-size:12px; font-weight:850; }
.v2718-placement-badge.tone-amber { background:#fff4e3; color:#a95706; }
.v2718-placement-badge.tone-blue { background:#edf4ff; color:#1d5ec9; }
.v2718-placement-badge.tone-teal { background:#e8f7f7; color:#087779; }

/* Tiga tab seimbang untuk JPN & PPD */
#viewJPN .jpn-workspace-nav .jpn-workspace-tab,
#viewPPD .jpn-workspace-nav .jpn-workspace-tab { flex:1 1 0; }

@media (max-width:1250px) {
  .v2718-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:820px) {
  .v2718-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .v2718-heading-row { flex-direction:column; }
  .v2718-pagination { align-items:flex-start; }
  #viewJPN .jpn-workspace-nav, #viewPPD .jpn-workspace-nav { overflow-x:auto; }
  #viewJPN .jpn-workspace-nav .jpn-workspace-tab, #viewPPD .jpn-workspace-nav .jpn-workspace-tab { flex:0 0 auto; min-width:150px; }
}
@media (max-width:520px) {
  .v2718-kpis { grid-template-columns:1fr; }
  .v2718-kpi { min-height:92px; }
}

/* ============================================================
   V27.18.3 - PPD THREE-TAB LAYOUT HOTFIX
   ============================================================ */
#viewPPD .v2718-ppd-workspace-nav {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  width: 100% !important;
}
#viewPPD .v2718-ppd-workspace-nav > button,
#viewPPD .v2718-ppd-workspace-nav .jpn-workspace-tab {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
}
@media (max-width: 820px) {
  #viewPPD .v2718-ppd-workspace-nav {
    display: flex !important;
    overflow-x: auto !important;
  }
  #viewPPD .v2718-ppd-workspace-nav > button,
  #viewPPD .v2718-ppd-workspace-nav .jpn-workspace-tab {
    flex: 0 0 160px !important;
    min-width: 160px !important;
    width: auto !important;
  }
}


/* V27.18.4 - PPD detail visibility fix */
#viewPPD > #ppdAssessmentDetailSection {
  width: 100%;
  margin-top: 24px;
}