:root {
  --red: #8B0000;
  --red-2: #B71C1C;
  --red-3: #D32F2F;
  --yellow: #F4C430;
  --yellow-2: #FFD54F;
  --cream: #FFF8E1;
  --ink: #2A1A1A;
  --muted: #745F5F;
  --line: #E7D5D5;
  --surface: #FFFFFF;
  --bg: #FFF9F3;
  --success: #1F7A4C;
  --danger: #A31212;
  --shadow: 0 18px 45px rgba(139, 0, 0, .12);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(18px, 4vw, 58px);
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  color: white;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .04em;
  background: linear-gradient(145deg, var(--red-2), var(--red));
  border: 3px solid var(--yellow);
  box-shadow: 0 8px 22px rgba(139,0,0,.24);
}
.brand h1 { margin: 0; font-size: clamp(17px, 2vw, 23px); }
.brand p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

main { width: min(1500px, 100%); margin: 0 auto; padding: 28px clamp(16px, 4vw, 58px) 54px; }
.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  min-height: 230px;
  padding: clamp(28px, 5vw, 54px);
  border-radius: 28px;
  color: white;
  background:
    radial-gradient(circle at 92% 10%, rgba(242,201,76,.35), transparent 28%),
    linear-gradient(130deg, var(--red), var(--red-2));
  box-shadow: var(--shadow);
}
.hero h2 { margin: 8px 0 12px; font-size: clamp(30px, 5vw, 54px); line-height: 1.05; max-width: 800px; }
.hero p { margin: 0; color: rgba(255,255,255,.82); max-width: 760px; font-size: 17px; }
.eyebrow { display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: .13em; color: #A66A00; }
.hero .eyebrow { color: var(--yellow); }
.status-box {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.18);
}
.status-box strong, .status-box small { display: block; }
.status-box small { color: rgba(255,255,255,.7); margin-top: 3px; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; background: #56d58d; box-shadow: 0 0 0 6px rgba(86,213,141,.16); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(135px, 1fr));
  gap: 14px;
  margin: 22px 0;
}
.stat-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 8px 26px rgba(139,0,0,.06);
}
.stat-card::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(139,0,0,.06);
}
.stat-card strong { display: block; font-size: clamp(25px, 3vw, 38px); color: var(--red-2); }
.stat-card span { color: var(--muted); font-size: 13px; font-weight: 700; }

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.panel {
  min-width: 0;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(139,0,0,.06);
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.panel h3 { margin: 5px 0 0; font-size: 20px; }
.stack { display: grid; gap: 10px; }
.list-card, .announcement-card, .app-card {
  padding: 15px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
}
.list-card strong, .announcement-card strong { display: block; }
.list-card small, .announcement-card p { color: var(--muted); margin: 5px 0 0; }
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app-card { text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease; }
.app-card:hover { transform: translateY(-2px); border-color: #D9A4A4; }
.app-card strong { color: var(--red-2); }

.btn {
  border: 0;
  border-radius: 11px;
  padding: 10px 16px;
  font-weight: 800;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: wait; transform: none; }
.btn-primary { background: var(--red-2); color: white; }
.btn-ghost { background: #FCECEC; color: var(--red-2); }
.btn-danger { background: #fee9e7; color: var(--danger); }
.btn-gold { background: var(--yellow); color: #2d2400; }
.full { width: 100%; }

.input, select {
  width: 100%;
  border: 1px solid #bdc9d7;
  border-radius: 11px;
  padding: 11px 12px;
  background: white;
  color: var(--ink);
  outline: none;
}
.input:focus, select:focus { border-color: var(--red-2); box-shadow: 0 0 0 3px rgba(139,0,0,.11); }
.compact { width: min(360px, 100%); }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 13px; }
th { position: sticky; top: 0; background: #FFF3D6; color: var(--red-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover { background: #f8fbfe; }
.empty { padding: 26px; text-align: center; color: var(--muted); }

.admin-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; }
.sidebar {
  align-self: start;
  position: sticky;
  top: 100px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--red);
  color: white;
  box-shadow: var(--shadow);
}
.user-card { display: flex; align-items: center; gap: 12px; padding: 8px 6px 18px; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 14px; }
.user-card small { display: block; color: rgba(255,255,255,.65); margin-top: 3px; }
.avatar { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--yellow); color: #2f2700; font-weight: 900; }
#adminNav { display: grid; gap: 7px; }
.nav-btn { width: 100%; text-align: left; border: 0; padding: 11px 12px; border-radius: 10px; background: transparent; color: rgba(255,255,255,.78); font-weight: 750; }
.nav-btn:hover, .nav-btn.active { background: rgba(255,255,255,.12); color: white; }
.admin-content { min-width: 0; }
.admin-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.admin-heading h2 { margin: 5px 0 0; }
.admin-page { min-width: 0; }

.import-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); gap: 18px; }
.form-panel label, .dialog-card label, .form-grid label { display: grid; gap: 7px; font-weight: 800; color: #34445b; }
.form-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.form-grid { display: grid; gap: 14px; max-width: 620px; }
.source-summary { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #f8fafc; }
.source-summary div { display: flex; justify-content: space-between; gap: 14px; }
.source-summary span { color: var(--muted); }
.notice { padding: 13px 14px; border-radius: 12px; background: #FFF4D8; color: #6F3A00; border: 1px solid #F1D18A; }
.notice.warning { background: #fff7dc; border-color: #f2d889; color: #6e5600; }
.notice.success { background: #ebf8f0; border-color: #b9e3c9; color: #17633d; }
.error-list { max-height: 280px; overflow: auto; }
.badge { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 999px; background: #FCECEC; color: var(--red-2); font-size: 11px; font-weight: 900; }
.metric-mini-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }

.dialog { padding: 0; border: 0; border-radius: 20px; width: min(460px, calc(100% - 26px)); box-shadow: var(--shadow); }
.dialog::backdrop { background: rgba(6,20,39,.68); backdrop-filter: blur(4px); }
.dialog-card { position: relative; display: grid; gap: 14px; padding: 28px; }
.dialog-card h2 { margin: 0; }
.dialog-card p { margin: -6px 0 2px; color: var(--muted); }
.dialog-close { position: absolute; right: 15px; top: 12px; border: 0; background: transparent; font-size: 27px; color: var(--muted); }
.form-error { padding: 11px; border-radius: 10px; background: #fee9e7; color: var(--danger); }

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100;
  max-width: min(420px, calc(100% - 36px));
  padding: 13px 16px;
  border-radius: 12px;
  background: #172235;
  color: white;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: .2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px clamp(18px, 4vw, 58px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1150px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .admin-shell { grid-template-columns: 220px minmax(0,1fr); }
  .import-layout { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .topbar { position: static; align-items: flex-start; }
  .brand p { display: none; }
  .hero { grid-template-columns: 1fr; }
  .content-grid { grid-template-columns: 1fr; }
  .admin-shell { display: block; }
  .sidebar { position: static; margin-bottom: 18px; }
  #adminNav { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metric-mini-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-heading, .admin-heading { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .topbar { flex-direction: column; }
  .topbar-actions { width: 100%; }
  .topbar-actions .btn { flex: 1; }
  main { padding-inline: 12px; }
  .hero { padding: 26px 20px; border-radius: 20px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card { padding: 16px; }
  .app-grid, #adminNav { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  footer { flex-direction: column; }
}


/* PENAMBAHBAIKAN TEMA MERAH KUNING */
.topbar {
  background: rgba(255, 255, 255, .97);
  border-bottom: 3px solid var(--yellow);
}

.brand-mark {
  background: linear-gradient(145deg, var(--red), var(--red-2));
  border: 3px solid var(--yellow);
}

.hero {
  background:
    radial-gradient(circle at 92% 10%, rgba(244, 196, 48, .38), transparent 30%),
    linear-gradient(135deg, #6F0000 0%, var(--red) 48%, var(--red-2) 100%);
  border: 1px solid rgba(244, 196, 48, .45);
}

.stat-card {
  border-top: 4px solid var(--yellow);
}

.stat-card strong {
  color: var(--red);
}

.btn-primary {
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color: white;
  box-shadow: 0 8px 18px rgba(139, 0, 0, .18);
}

.btn-gold {
  background: linear-gradient(135deg, var(--yellow), var(--yellow-2));
  color: #4A2B00;
  box-shadow: 0 8px 18px rgba(244, 196, 48, .22);
}

.btn-ghost {
  background: #FCECEC;
  color: var(--red);
  border: 1px solid #E7BABA;
}

.sidebar {
  background:
    linear-gradient(180deg, #6F0000 0%, var(--red) 58%, #4F0000 100%);
  border: 1px solid rgba(244, 196, 48, .4);
}

.nav-btn:hover,
.nav-btn.active {
  background: var(--yellow);
  color: #4A2100;
}

.avatar {
  background: var(--yellow);
  color: #4A2100;
}

th {
  background: linear-gradient(180deg, #FFF3D6, #FFE7A3);
  color: var(--red);
}

tbody tr:hover {
  background: #FFF8E6;
}

.badge {
  background: #FCECEC;
  color: var(--red);
  border: 1px solid #E8BABA;
}

.app-card:hover {
  border-color: var(--yellow);
  box-shadow: 0 8px 22px rgba(139, 0, 0, .08);
}

.panel {
  border: 1px solid #E9D4C9;
}

.eyebrow {
  color: #B06B00;
}

.status-dot {
  background: var(--yellow);
  box-shadow: 0 0 0 6px rgba(244, 196, 48, .18);
}

footer {
  border-top: 3px solid var(--yellow);
  background: #FFF5E7;
}


/* LOGO PPDKS DAN HIASAN KPPD */
.brand {
  min-width: 0;
}

.brand-logo {
  width: clamp(210px, 25vw, 340px);
  height: 82px;
  object-fit: contain;
  object-position: left center;
  border-radius: 12px;
  background: #ffffff;
  padding: 6px 10px;
  flex: 0 0 auto;
  border: 1px solid #ead7d0;
  box-shadow: 0 8px 22px rgba(139, 0, 0, .12);
}

.brand-copy {
  min-width: 0;
}

.hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr);
  align-items: center;
  overflow: hidden;
}

.hero-text {
  min-width: 0;
}

.hero-status-row {
  margin-top: 24px;
}

.hero .status-box {
  width: fit-content;
  min-width: 245px;
}

.kppd-card {
  justify-self: end;
  width: min(100%, 330px);
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255, 255, 255, .98);
  color: var(--ink);
  border: 3px solid var(--yellow);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .22);
}

.kppd-photo-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #efefef;
}

.kppd-photo-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 25%;
  background: linear-gradient(to top, rgba(139, 0, 0, .22), transparent);
  pointer-events: none;
}

.hero-kppd {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.kppd-caption {
  display: grid;
  gap: 4px;
  padding: 16px 18px 18px;
  text-align: center;
  border-top: 4px solid var(--yellow);
  background: linear-gradient(180deg, #ffffff, #fff7e8);
}

.kppd-caption strong {
  color: var(--red);
  font-size: 20px;
  line-height: 1.2;
}

.kppd-caption small {
  color: var(--muted);
  font-weight: 700;
}

.kppd-label {
  color: #9a6200;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

@media (max-width: 1100px) {
  .brand-logo {
    width: 250px;
    height: 70px;
  }

  .brand-copy p {
    display: none;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) 285px;
  }
}

@media (max-width: 820px) {
  .topbar {
    align-items: center;
  }

  .brand {
    width: 100%;
  }

  .brand-logo {
    width: min(66vw, 285px);
    height: 68px;
  }

  .brand-copy h1 {
    font-size: 17px;
  }

  .hero {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .kppd-card {
    justify-self: center;
    width: min(100%, 290px);
    order: -1;
  }

  .hero-status-row {
    display: flex;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .topbar {
    gap: 12px;
  }

  .brand {
    align-items: flex-start;
  }

  .brand-logo {
    width: 165px;
    height: 56px;
    padding: 4px 6px;
  }

  .brand-copy h1 {
    font-size: 15px;
    line-height: 1.25;
  }

  .brand-copy p {
    display: none;
  }

  .hero {
    padding: 20px 16px 24px;
  }

  .hero h2 {
    font-size: 31px;
  }

  .hero p {
    font-size: 15px;
  }

  .kppd-card {
    width: min(88vw, 265px);
    border-radius: 20px;
  }

  .kppd-caption {
    padding: 13px 14px 15px;
  }

  .kppd-caption strong {
    font-size: 18px;
  }

  .hero .status-box {
    width: 100%;
    min-width: 0;
  }
}


/* FILTER DAN GRAF PENTADBIR SEKOLAH */
.pentadbir-tools {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: 18px;
}

.pentadbir-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 14px;
  align-items: end;
}

.pentadbir-filter-grid label {
  display: grid;
  gap: 7px;
  color: #493838;
  font-weight: 800;
  font-size: 13px;
}

.pentadbir-filter-grid .btn {
  min-height: 43px;
}

.result-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--yellow);
  color: #4a2600;
  font-size: 12px;
  font-weight: 900;
}

.tenure-chart {
  display: grid;
  gap: 13px;
  min-height: 260px;
  align-content: center;
}

.tenure-bar-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 38px;
  gap: 10px;
  align-items: center;
}

.tenure-bar-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.tenure-bar-track {
  position: relative;
  height: 28px;
  overflow: hidden;
  border-radius: 9px;
  background: #f5e8e1;
  border: 1px solid #ead5ca;
}

.tenure-bar-fill {
  height: 100%;
  min-width: 0;
  width: var(--bar-width);
  border-radius: 8px;
  background: linear-gradient(90deg, var(--red), var(--red-2) 68%, var(--yellow));
  transition: width .28s ease;
}

.tenure-bar-value {
  color: var(--red);
  font-size: 14px;
  font-weight: 900;
  text-align: right;
}

.chart-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1050px) {
  .pentadbir-tools {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .pentadbir-filter-grid {
    grid-template-columns: 1fr;
  }

  .tenure-bar-row {
    grid-template-columns: 92px minmax(0, 1fr) 32px;
    gap: 8px;
  }

  .tenure-bar-label {
    font-size: 11px;
  }

  .tenure-chart {
    min-height: 230px;
  }
}


/* EDIT MANUAL DAN RESET DATA */
.pentadbir-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.table-action-group {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.btn-small {
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 12px;
}

.badge-manual {
  background: #fff0bd;
  color: #684400;
  border-color: #e9c65b;
}

.badge-import {
  background: #f3eeee;
  color: #6f5555;
}

.dialog-wide {
  width: min(720px, calc(100% - 26px));
}

.dialog-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dialog-form-grid label {
  display: grid;
  gap: 7px;
  color: #493838;
  font-weight: 800;
}

.field-span-2 {
  grid-column: 1 / -1;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.reset-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.reset-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 230px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #ead4ca;
  background: linear-gradient(145deg, #ffffff, #fff8f0);
}

.reset-card h4 {
  margin: 0;
  color: var(--red);
  font-size: 18px;
}

.reset-card p {
  margin: 0 0 8px;
  color: var(--muted);
  line-height: 1.55;
}

.reset-card .btn {
  align-self: end;
  margin-top: auto;
}

.reset-card-critical {
  border: 2px solid #c82020;
  background: linear-gradient(145deg, #fff5f4, #ffe8e5);
}

.reset-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--yellow);
  color: #4a2600;
  font-weight: 950;
  font-size: 19px;
}

@media (max-width: 700px) {
  .dialog-form-grid,
  .reset-card-grid {
    grid-template-columns: 1fr;
  }

  .field-span-2 {
    grid-column: auto;
  }

  .dialog-actions {
    flex-direction: column-reverse;
  }

  .dialog-actions .btn {
    width: 100%;
  }

  .pentadbir-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }
}


/* PENANDA VERSI STABIL */
.version-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f9c92f;
  color: #541900;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .05em;
}


/* ANALITIK GURU PINTAR V2.8 */
.analytics-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
  align-items: end;
  margin-top: 16px;
}

.analytics-filter-grid label {
  display: grid;
  gap: 7px;
  color: #493838;
  font-size: 13px;
  font-weight: 800;
}

.analytics-filter-grid .btn {
  min-height: 43px;
}

.analytics-stats {
  margin-top: 18px;
}

.analytics-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.smart-chart {
  display: grid;
  gap: 11px;
  min-height: 280px;
  align-content: start;
}

.smart-bar-row {
  display: grid;
  grid-template-columns: minmax(130px, 185px) minmax(110px, 1fr) 48px;
  gap: 12px;
  align-items: center;
}

.smart-bar-label {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  line-height: 1.25;
  word-break: break-word;
}

.smart-bar-track {
  height: 24px;
  overflow: hidden;
  border: 1px solid #ead5ca;
  border-radius: 8px;
  background: #f5e8e1;
}

.smart-bar-fill {
  height: 100%;
  width: var(--bar-width);
  border-radius: 7px;
  background: linear-gradient(90deg, var(--red), var(--red-2) 68%, var(--yellow));
  transition: width .25s ease;
}

.smart-bar-value {
  color: var(--red);
  font-size: 13px;
  font-weight: 950;
  text-align: right;
}

.subject-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.subject-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #ecd7cd;
  border-radius: 999px;
  background: #fff8f1;
  color: #5e3b34;
  font-size: 11px;
  font-weight: 800;
}

.radius-badge {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  background: #fff0bd;
  color: #684400;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.analytics-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1250px) {
  .analytics-filter-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

  .analytics-chart-grid {
    grid-template-columns: 1fr;
  }

  .smart-chart {
    min-height: 0;
  }
}

@media (max-width: 820px) {
  .analytics-filter-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 560px) {
  .analytics-filter-grid {
    grid-template-columns: 1fr;
  }

 .smart-bar-row {
    grid-template-columns: 90px minmax(0, 1fr) 32px;
  }

  .analytics-pagination {
    justify-content: space-between;
  }
}


/* SPS V2.9 — KEKOSONGAN DAN AKP */
.one-chart-grid {
  grid-template-columns: minmax(0, 760px);
}

.status-vacant {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #ffe0dc;
  color: #a11910;
  border: 1px solid #efaaa3;
  font-size: 11px;
  font-weight: 950;
}

.status-filled {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e2f6e9;
  color: #17633d;
  border: 1px solid #a9d9b9;
  font-size: 11px;
  font-weight: 950;
}

.check-card-grid {
  display: grid;
  gap: 11px;
}

.check-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid #ead4ca;
  border-radius: 13px;
  background: #fff9f3;
}

.check-card input {
  width: 19px;
  height: 19px;
  margin-top: 2px;
}

.check-card span {
  display: grid;
  gap: 3px;
}

.check-card small {
  color: var(--muted);
  line-height: 1.4;
}

@media (max-width: 700px) {
  .one-chart-grid {
    grid-template-columns: 1fr;
  }
}


/* SPS V3.1 — DIREKTORI PEGAWAI PPD */
.public-directory-panel {
  margin-bottom: 18px;
}

.public-directory-heading {
  align-items: flex-end;
}

.directory-view-note {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.public-directory-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(190px, .7fr) minmax(150px, .5fr);
  gap: 10px;
  width: min(760px, 100%);
}

.directory-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.directory-mini-stat {
  padding: 8px 12px;
  border: 1px solid #ead4ca;
  border-radius: 999px;
  background: #fff8f1;
  color: #5e3b34;
  font-size: 12px;
  font-weight: 900;
}

.directory-sector-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.directory-sector-tab {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid #e6cfc4;
  border-radius: 999px;
  background: #fff;
  color: #6b4440;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.directory-sector-tab.active {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.directory-sector-list {
  display: grid;
  gap: 18px;
  margin-top: 12px;
}

.directory-sector-block {
  overflow: hidden;
  border: 1px solid #ead4ca;
  border-radius: 16px;
  background: #fff;
}

.directory-sector-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(90deg, var(--red), #a51919);
  color: #fff;
}

.directory-sector-title h4 {
  margin: 0;
  font-size: 15px;
}

.directory-sector-title span {
  font-size: 12px;
  font-weight: 900;
}

.directory-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 12px;
  padding: 14px;
}

.directory-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 13px;
  min-height: 170px;
  padding: 15px;
  border: 1px solid #eadbd4;
  border-radius: 13px;
  background: linear-gradient(145deg, #ffffff, #fffaf6);
}

.directory-card.vacant {
  border-style: dashed;
  border-color: #df9b93;
  background: #fff5f3;
}

.directory-avatar,
.directory-avatar-placeholder {
  width: 82px;
  height: 100px;
  border-radius: 11px;
  object-fit: cover;
  border: 1px solid #ead4ca;
  background: #f6e8e0;
}

.directory-avatar-placeholder {
  display: grid;
  place-items: center;
  padding: 8px;
  color: #7e514a;
  font-size: 20px;
  font-weight: 950;
  text-align: center;
}

.directory-card-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.directory-card-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.directory-card h5 {
  margin: 0;
  color: var(--red);
  font-size: 14px;
  line-height: 1.35;
}

.directory-card p {
  margin: 0;
  color: #554341;
  font-size: 12px;
  line-height: 1.5;
}

.directory-contact-list {
  display: grid;
  gap: 6px;
  margin-top: auto;
}

.directory-contact-link,
.directory-contact-text {
  overflow-wrap: anywhere;
  color: #70443d;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.directory-contact-link:hover {
  color: var(--red);
  text-decoration: underline;
}

.directory-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
}

.directory-status.filled {
  background: #e2f6e9;
  color: #17633d;
}

.directory-status.vacant {
  background: #ffe0dc;
  color: #a11910;
}

.directory-admin-thumb {
  width: 46px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #e2cbc0;
  background: #f6e8e0;
}

.directory-admin-thumb-placeholder {
  display: grid;
  place-items: center;
  width: 46px;
  height: 54px;
  border-radius: 8px;
  background: #f6e8e0;
  color: #7e514a;
  font-size: 10px;
  font-weight: 950;
  text-align: center;
}

.directory-photo-editor {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 6px 0 18px;
  padding: 15px;
  border: 1px solid #ead4ca;
  border-radius: 14px;
  background: #fff9f3;
}

.directory-image-preview-wrap {
  width: 150px;
  height: 180px;
}

.directory-image-preview,
.directory-image-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 1px solid #dfc8bd;
  background: #f2e3dc;
}

.directory-image-preview {
  object-fit: cover;
}

.directory-image-placeholder {
  display: grid;
  place-items: center;
  padding: 15px;
  color: #7e514a;
  font-size: 12px;
  font-weight: 950;
  text-align: center;
}

.directory-photo-controls {
  display: grid;
  gap: 9px;
}

.directory-photo-controls small {
  color: var(--muted);
}

.directory-textarea {
  resize: vertical;
}

@media (max-width: 1120px) {
  .directory-card-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

@media (max-width: 760px) {
  .public-directory-controls {
    grid-template-columns: 1fr;
  }

  .directory-card-grid {
    grid-template-columns: 1fr;
  }

  .directory-photo-editor {
    grid-template-columns: 1fr;
  }

  .directory-image-preview-wrap {
    width: 130px;
    height: 156px;
  }
}


/* SPS V3.3 — GAMBAR PRIVATE DAN SUSUNAN SEKTOR */
.directory-featured-list {
  margin-bottom: 16px;
}

.directory-featured-list .directory-sector-block {
  border: 2px solid #d5aa27;
}

.directory-featured-list .directory-sector-title {
  background: linear-gradient(90deg, #8f0d0d, #ba1c1c 70%, #d9a818);
}

/* Item pertama dalam DOM bermula dari bahagian kanan. */
.directory-sector-tabs {
  direction: rtl;
}

.directory-sector-tab {
  direction: ltr;
}

.directory-upload-main-btn {
  min-height: 46px;
  font-size: 14px;
}

.upload-directory-btn {
  white-space: nowrap;
}

.directory-image-ready {
  color: #17633d !important;
  font-weight: 900;
}

.directory-image-error {
  color: #a11910 !important;
  font-weight: 900;
}


/* SPS V3.5 — JENIS SEKOLAH */
.school-type-panel {
  margin: 18px 0;
}

.school-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 12px;
}

.school-type-card {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  padding: 16px;
  border: 1px solid #ead4ca;
  border-top: 4px solid var(--yellow);
  border-radius: 15px;
  background: linear-gradient(145deg, #ffffff, #fff8f2);
}

.school-type-card::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -30px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: rgba(139, 0, 0, .06);
}

.school-type-card strong {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--red-2);
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1;
}

.school-type-card span {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.school-directory-controls {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(170px, .55fr);
  gap: 10px;
  width: min(650px, 100%);
}

.admin-school-type-panel {
  margin-top: 18px;
}

@media (max-width: 700px) {
  .school-directory-controls {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .school-type-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}


/* SPS V3.7 — PENGURUSAN PENGGUNA */
.user-filter-grid {
  display: grid;
  grid-template-columns: minmax(230px, 1.4fr) minmax(170px, .7fr) minmax(150px, .6fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 16px;
}

.user-filter-grid label {
  display: grid;
  gap: 7px;
  color: #493838;
  font-size: 13px;
  font-weight: 800;
}

.user-security-stack {
  display: grid;
  gap: 5px;
}

.security-warning {
  color: #a11910;
  font-size: 11px;
  font-weight: 900;
}

.security-ok {
  color: #17633d;
  font-size: 11px;
  font-weight: 900;
}

.temporary-password-card {
  width: min(520px, calc(100vw - 28px));
}

.temporary-user-info {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 9px 12px;
  padding: 14px;
  border: 1px solid #ead4ca;
  border-radius: 13px;
  background: #fff9f3;
}

.temporary-user-info span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.temporary-user-info strong {
  overflow-wrap: anywhere;
  color: #3f2a27;
}

.temporary-password-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding: 14px;
  border: 2px dashed #d6aa29;
  border-radius: 13px;
  background: #fff7d8;
}

.temporary-password-box code {
  overflow-wrap: anywhere;
  color: #820808;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .06em;
}

@media (max-width: 760px) {
  .user-filter-grid {
    grid-template-columns: 1fr;
  }

  .temporary-user-info {
    grid-template-columns: 1fr;
  }

  .temporary-password-box {
    grid-template-columns: 1fr;
  }
}


/* SPS V3.8 — RESET PASSWORD DISAHKAN */
#temporaryPasswordDialog {
  width: min(820px, calc(100vw - 28px));
  max-width: 820px;
  max-height: 92vh;
  overflow-y: auto;
}

.temporary-password-card {
  width: 100%;
  min-height: 500px;
  padding: 34px;
  gap: 18px;
}

.temporary-password-card h2 {
  font-size: clamp(24px, 4vw, 34px);
}

.reset-verified-banner {
  display: grid;
  gap: 5px;
  padding: 15px 17px;
  border: 1px solid #9ccfaf;
  border-radius: 14px;
  background: #e8f7ed;
  color: #17633d;
}

.reset-verified-banner strong {
  font-size: 15px;
}

.reset-verified-banner span {
  font-size: 12px;
  font-weight: 700;
}

.temporary-password-label {
  margin-top: 2px;
  color: #4e3733;
  font-size: 13px;
  font-weight: 900;
}

.temporary-password-box {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 18px;
}

.temporary-password-box input {
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border: 2px solid #d6aa29;
  border-radius: 11px;
  outline: none;
  background: #ffffff;
  color: #820808;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(27px, 5vw, 42px);
  font-weight: 950;
  letter-spacing: .12em;
  text-align: center;
}

.temporary-password-box .btn {
  min-height: 64px;
  padding-inline: 22px;
}

.copy-status {
  min-height: 22px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.copy-status.success {
  color: #17633d;
}

.copy-status.error {
  color: #a11910;
}

@media (max-width: 650px) {
  .temporary-password-card {
    min-height: 0;
    padding: 25px 18px;
  }

  .temporary-password-box {
    grid-template-columns: 1fr;
  }

  .temporary-password-box input {
    font-size: 29px;
    letter-spacing: .08em;
  }
}


/* PPDKS V3.9 — ANALITIK MURID SPM */
.public-spm-panel { margin: 18px 0; }
.public-spm-grid { display:grid; grid-template-columns:repeat(3,minmax(160px,1fr)); gap:14px; }
.public-spm-card { min-height:130px; padding:20px; border:1px solid #ead4ca; border-top:5px solid var(--yellow); border-radius:16px; background:linear-gradient(145deg,#fff,#fff8f2); }
.public-spm-card strong { display:block; color:var(--red-2); font-size:clamp(30px,5vw,46px); line-height:1; }
.public-spm-card span { display:block; margin-top:10px; color:var(--muted); font-size:14px; font-weight:900; }
.privacy-note { margin:13px 0 0; color:var(--muted); font-size:12px; }
.spm-source-grid { display:grid; grid-template-columns:minmax(220px,1.5fr) minmax(180px,.7fr) minmax(120px,.4fr) auto auto; gap:12px; align-items:end; margin-top:16px; }
.spm-source-grid label { display:grid; gap:7px; color:#493838; font-size:13px; font-weight:800; }
.spm-source-info { margin-top:14px; padding:14px; border:1px solid #ead4ca; border-radius:13px; background:#fff9f3; line-height:1.6; }
.spm-chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; }
.spm-school-filter-grid { display:grid; grid-template-columns:minmax(220px,1.3fr) minmax(170px,.7fr) minmax(170px,.7fr) auto; gap:12px; align-items:end; margin-bottom:14px; }
.spm-dashboard-heading { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:16px; }
.spm-dashboard-note { color:var(--muted); font-size:12px; }
@media (max-width:980px){ .spm-source-grid{grid-template-columns:1fr 1fr;} .spm-chart-grid{grid-template-columns:1fr;} }
@media (max-width:700px){ .public-spm-grid{grid-template-columns:1fr;} .spm-source-grid,.spm-school-filter-grid{grid-template-columns:1fr;} }


/* PPDKS V3.9.1 — DATA MURID */
.spm-data-date-banner {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  padding: 13px 16px;
  border: 1px solid #e3c665;
  border-radius: 14px;
  background: #fff8da;
  color: #6d4e00;
  font-size: 13px;
  font-weight: 850;
}

.spm-data-date-banner strong {
  color: #7e0808;
}

@media (max-width: 680px) {
  .spm-data-date-banner {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* PPDKS V3.9.2 — PROSES DATA MURID BERPERINGKAT */
.spm-progress-wrap {
  display: grid;
  gap: 9px;
  margin-top: 15px;
  padding: 15px 17px;
  border: 1px solid #e4c76b;
  border-radius: 14px;
  background: #fff9df;
}

.spm-progress-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #5c4300;
  font-size: 13px;
  font-weight: 900;
}

.spm-progress-heading strong {
  color: #8b0909;
  font-size: 17px;
}

.spm-progress-track {
  overflow: hidden;
  height: 14px;
  border-radius: 999px;
  background: #eadfbd;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
}

.spm-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9f1010, #d8a91c);
  transition: width .28s ease;
}

.spm-progress-wrap small {
  color: #6e5b2a;
  font-weight: 750;
}


/* PPDKS V4.0 — GALERI KEJAYAAN KUSEL */
.kusel-public-panel { margin: 20px 0; }
.kusel-public-heading p { margin: 6px 0 0; color: var(--muted); }
.kusel-public-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:11px; margin:14px 0; }
.kusel-public-stat { padding:14px; border:1px solid #ecd8a6; border-top:4px solid var(--yellow); border-radius:14px; background:#fffaf0; }
.kusel-public-stat strong { display:block; color:var(--red-2); font-size:27px; }
.kusel-public-stat span { font-size:12px; font-weight:850; color:var(--muted); }
.kusel-public-filters { display:grid; grid-template-columns:minmax(250px,1.6fr) repeat(5,minmax(135px,.65fr)) auto; gap:9px; margin:15px 0; }
.kusel-gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.kusel-gallery-card { overflow:hidden; border:1px solid #ead3c8; border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(87,32,20,.08); }
.kusel-gallery-image { position:relative; height:210px; display:grid; place-items:center; background:linear-gradient(135deg,#fff4dc,#f5dddd); color:#8b0a0a; font-weight:950; }
.kusel-gallery-image img { width:100%; height:100%; object-fit:cover; }
.kusel-gallery-level { position:absolute; top:12px; right:12px; padding:6px 10px; border-radius:999px; background:#8b0000; color:#fff; font-size:11px; font-weight:900; }
.kusel-gallery-body { padding:16px; }
.kusel-gallery-body h4 { margin:0 0 7px; color:#3c2420; font-size:18px; }
.kusel-gallery-school { color:#8b0000; font-weight:900; font-size:13px; }
.kusel-gallery-result { margin:10px 0; padding:10px 12px; border-left:4px solid var(--yellow); background:#fff9e6; font-weight:850; }
.kusel-gallery-meta { display:grid; gap:5px; color:var(--muted); font-size:12px; }
.kusel-admin-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; margin-bottom:15px; }
.kusel-filter-grid { display:grid; grid-template-columns:minmax(220px,1.3fr) repeat(4,minmax(145px,.7fr)) auto; gap:10px; margin:15px 0; }
.kusel-dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.kusel-chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.kusel-status { display:inline-flex; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:900; background:#f5e6e1; color:#8b0000; }
.kusel-status.DILULUSKAN { background:#e2f5e8; color:#17633d; }
.kusel-status.DIHANTAR { background:#fff1c9; color:#725100; }
.kusel-status.DIKEMBALIKAN,.kusel-status.DITOLAK { background:#fbe1df; color:#a11910; }
.kusel-form-dialog { max-width:980px; }
.kusel-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.kusel-school-identity { padding:10px 13px; border-radius:12px; background:#fff7d8; color:#6e4f00; font-weight:850; }
.kusel-image-section { margin-top:18px; padding-top:16px; border-top:1px solid #ead8cf; }
.kusel-image-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.kusel-image-input-card { display:grid; gap:9px; padding:12px; border:1px solid #e5d4ca; border-radius:14px; background:#fffaf6; }
.kusel-image-preview { overflow:hidden; min-height:210px; display:grid; place-items:center; border:2px dashed #d8ba55; border-radius:12px; background:#fff; color:#8b0000; font-weight:900; }
.kusel-image-preview img { width:100%; height:210px; object-fit:cover; }
.kusel-consent-card { margin-top:14px; }
.kusel-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; }
.kusel-detail-item { padding:10px 12px; border-radius:11px; background:#faf5f2; }
.kusel-detail-item span { display:block; color:var(--muted); font-size:11px; font-weight:800; }
.kusel-detail-item strong { display:block; margin-top:4px; color:#3f2925; white-space:pre-wrap; }
.kusel-detail-full { grid-column:1/-1; }
.kusel-detail-images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
.kusel-detail-images figure { margin:0; }
.kusel-detail-images img { width:100%; max-height:420px; object-fit:contain; border-radius:13px; background:#f5eeee; }
.kusel-detail-images figcaption { margin-top:6px; color:var(--muted); font-size:12px; }
.kusel-review-actions { flex-wrap:wrap; }
@media(max-width:1050px){.kusel-public-filters,.kusel-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.kusel-public-filters input,.kusel-filter-grid input{grid-column:1/-1;}}
@media(max-width:760px){.kusel-chart-grid,.kusel-image-grid,.kusel-detail-grid,.kusel-detail-images{grid-template-columns:1fr}.kusel-form-grid{grid-template-columns:1fr}.kusel-form-grid .field-span-2{grid-column:auto}.kusel-public-filters,.kusel-filter-grid{grid-template-columns:1fr}.kusel-public-filters input,.kusel-filter-grid input{grid-column:auto}}


/* PPDKS V4.0.1 — GALERI KEJAYAAN DALAM DASHBOARD SPM */
.spm-home-kusel-section {
  margin-top: 22px;
}

.spm-home-kusel-latest {
  margin-top: 18px;
}

.spm-home-kusel-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 15px;
}

.spm-home-kusel-toolbar h2 {
  margin: 3px 0 5px;
}

@media (max-width: 720px) {
  .spm-home-kusel-toolbar {
    flex-direction: column;
  }

  .spm-home-kusel-toolbar .btn {
    width: 100%;
  }
}


/* =========================================================
   PPDKS V4.0.5 — NOMBOR ADMIN TIDAK TERPOTONG
========================================================= */

/*
 * spmMetrics ialah pembungkus bagi banner tarikh dan grid statistik.
 * Ia tidak boleh menjadi grid 4 kolum kerana grid statistik di dalamnya
 * akan terperangkap dalam satu kolum sempit.
 */
#spmMetrics.metric-mini-grid {
  display: block;
  width: 100%;
  margin-bottom: 18px;
}

#spmMetrics > .metric-mini-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(185px, 1fr)
  );
  gap: 14px;
  width: 100%;
  margin-bottom: 18px;
}

/* Semua kumpulan statistik dalam paparan admin menggunakan ruang responsif. */
.admin-content .metric-mini-grid,
.admin-content .kusel-dashboard-grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(175px, 1fr)
  );
}

/* Pastikan nombor besar sentiasa muat dalam kad. */
.admin-content .stat-card {
  min-width: 0;
  padding: 18px;
}

.admin-content .stat-card strong,
.admin-content .school-type-card strong,
.admin-content .public-spm-card strong {
  display: block;
  max-width: 100%;
  color: var(--red-2);
  font-size: clamp(23px, 2.15vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Label dibenarkan turun baris tetapi nombor tidak dipotong. */
.admin-content .stat-card span {
  display: block;
  margin-top: 9px;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  #spmMetrics > .metric-mini-grid,
  .admin-content .metric-mini-grid,
  .admin-content .kusel-dashboard-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(160px, 1fr)
    );
  }

  .admin-content .stat-card strong,
  .admin-content .school-type-card strong,
  .admin-content .public-spm-card strong {
    font-size: clamp(22px, 3vw, 33px);
  }
}

@media (max-width: 560px) {
  #spmMetrics > .metric-mini-grid,
  .admin-content .metric-mini-grid,
  .admin-content .kusel-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-content .stat-card {
    padding: 15px;
  }

  .admin-content .stat-card strong,
  .admin-content .school-type-card strong,
  .admin-content .public-spm-card strong {
    font-size: clamp(20px, 7vw, 29px);
  }
}


/* PPDKS V4.1.0 — BUTANG LIHAT KATA LALUAN */
.password-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.password-input-wrap .input {
  min-width: 0;
}

.password-view-btn {
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid #e0c9c1;
  border-radius: 10px;
  background: #fff8f4;
  color: #860b0b;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.password-view-btn:hover {
  background: #f9e8e2;
}


/* =========================================================
   PPDKS V4.2.0 — MODUL LAPORAN 137
========================================================= */

.report137-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.report137-heading h2,
.report137-receiver-panel h3 {
  margin: 4px 0 6px;
}

.report137-heading p,
.report137-receiver-panel p,
.report137-helper-text {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.report137-heading-actions,
.report137-ai-actions,
.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.report137-receiver-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 18px;
  align-items: center;
  margin-top: 18px;
}

.report137-filter-grid {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.8fr)
    minmax(150px, .8fr)
    minmax(180px, 1fr)
    auto;
  gap: 10px;
  margin-bottom: 14px;
}

.report137-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  background: #edf1f5;
  color: #425466;
}

.report137-status.DRAF {
  background: #f0f1f3;
  color: #4c5661;
}

.report137-status.DIHANTAR {
  background: #fff0c2;
  color: #7b5600;
}

.report137-status.DISEMAK {
  background: #dceeff;
  color: #0e4f86;
}

.report137-status.DIKEMBALIKAN {
  background: #ffe0dd;
  color: #9d1b12;
}

.report137-status.SELESAI {
  background: #dff5e7;
  color: #17623a;
}

.report137-dialog .dialog-card {
  max-width: 1080px;
}

.report137-school-identity {
  margin-top: -8px;
  color: var(--muted);
  font-weight: 700;
}

.report137-form-section,
.report137-ai-section {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.report137-form-grid {
  margin-top: 12px;
}

.report137-prompt,
.report137-result {
  font-family:
    "Consolas",
    "Courier New",
    monospace;
  line-height: 1.55;
}

.report137-prompt {
  background: #f6f8fb;
}

.report137-ai-section {
  background:
    linear-gradient(
      135deg,
      rgba(248, 238, 194, .45),
      rgba(255, 255, 255, .95)
    );
}

.report137-ai-actions {
  margin: 10px 0 16px;
}

.report137-detail-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.report137-detail-grid > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.report137-detail-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.report137-detail-grid small {
  color: var(--muted);
}

.report137-detail-block {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.report137-detail-block h4 {
  margin: 0 0 8px;
}

.report137-detail-block p {
  margin: 0;
  line-height: 1.6;
}

.report137-detail-block pre {
  margin: 0;
  padding: 14px;
  max-height: 480px;
  overflow: auto;
  border-radius: 10px;
  background: #15191f;
  color: #f7f7f7;
  white-space: pre-wrap;
  word-break: break-word;
  font-family:
    "Consolas",
    "Courier New",
    monospace;
  line-height: 1.55;
}

.btn-small {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 11px;
}

@media (max-width: 900px) {
  .report137-heading,
  .report137-receiver-panel {
    grid-template-columns: 1fr;
    display: grid;
  }

  .report137-filter-grid {
    grid-template-columns: 1fr 1fr;
  }

  .report137-detail-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .report137-filter-grid,
  .report137-detail-grid {
    grid-template-columns: 1fr;
  }

  .report137-heading-actions,
  .report137-ai-actions {
    width: 100%;
  }

  .report137-heading-actions .btn,
  .report137-ai-actions .btn {
    flex: 1 1 100%;
  }

  .report137-form-section,
  .report137-ai-section {
    padding: 13px;
  }
}


/* PPDKS V4.2.1 — PAPARAN SEKOLAH LAPORAN 137 */
.report137-school-start {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  border: 2px solid #f2c94c;
  background:
    linear-gradient(
      135deg,
      rgba(255, 247, 205, .9),
      rgba(255, 255, 255, .98)
    );
}

.report137-school-start h3 {
  margin: 4px 0 6px;
}

.report137-school-start p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 680px) {
  .report137-school-start {
    align-items: stretch;
    flex-direction: column;
  }

  .report137-school-start .btn {
    width: 100%;
  }
}


/* PPDKS V4.3.0 — DASHBOARD SPD */
.admin-dashboard-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.admin-dashboard-heading h2 {
  margin: 4px 0 6px;
}

.admin-dashboard-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 680px) {
  .admin-dashboard-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-dashboard-heading .btn {
    width: 100%;
  }
}


/* =========================================================
   PPDKS V4.4.0 — PWA
========================================================= */

.pwa-install-card {
  max-width: 520px;
}

.pwa-install-icon {
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}

.pwa-install-icon img {
  width: 92px;
  height: 92px;
  border-radius: 22px;
  box-shadow: 0 12px 26px rgba(65, 20, 8, .18);
}

.pwa-install-instructions {
  margin: 16px 0;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffaf6;
}

.pwa-install-instructions ol {
  margin: 0;
  padding-left: 22px;
}

.pwa-install-instructions li {
  margin: 8px 0;
  line-height: 1.5;
}

@media (display-mode: standalone) {
  #installAppBtn {
    display: none !important;
  }
}


/* SULUH PPDKS V4.4.7 — ANALITIK AKP */
.akp-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.akp-analytics-chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.analytics-chart-wide{grid-column:1/-1}
.smart-chart-wide{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.akp-donut-wrap{min-height:280px;display:grid;grid-template-columns:minmax(170px,210px) minmax(180px,1fr);align-items:center;gap:22px}
.akp-donut{position:relative;width:min(190px,100%);aspect-ratio:1;margin:auto;border-radius:50%;background:conic-gradient(var(--red) 0 var(--male-end),var(--yellow) var(--male-end) var(--female-end),#d8cbc5 var(--female-end) 100%);box-shadow:inset 0 0 0 1px rgba(98,43,25,.08),0 18px 36px rgba(81,28,13,.12)}
.akp-donut:after{content:"";position:absolute;inset:28%;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(98,43,25,.06)}
.akp-donut-center{position:absolute;z-index:1;inset:28%;display:grid;place-content:center;text-align:center}
.akp-donut-center strong{color:var(--red);font-size:28px;line-height:1}
.akp-donut-center span{margin-top:4px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.08em}
.akp-donut-legend{display:grid;gap:12px;min-width:0}
.akp-donut-legend>div{display:grid;grid-template-columns:14px minmax(0,1fr) minmax(28px,auto);align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fffaf7}
.akp-donut-legend span{display:block;min-width:0;color:var(--muted);font-size:12px;font-weight:800;line-height:1.25;word-break:break-word}
.akp-donut-legend strong{justify-self:end;color:var(--red);font-size:16px;line-height:1;white-space:nowrap}
.legend-dot{width:11px;height:11px;border-radius:50%}.legend-male{background:var(--red)}.legend-female{background:var(--yellow)}.legend-unknown{background:#d8cbc5}
.akp-insight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.akp-insight-card{min-width:0;display:grid;gap:6px;padding:16px;border:1px solid #ead5ca;border-radius:15px;background:linear-gradient(145deg,#fff,#fff7ee)}
.akp-insight-card span{color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.akp-insight-card strong{overflow:hidden;color:var(--red);font-size:18px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.akp-insight-card small{color:var(--muted);line-height:1.45}
@media(max-width:1320px){.akp-analytics-chart-grid{grid-template-columns:1fr}}
@media(max-width:1120px){.akp-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.akp-insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.akp-donut-wrap{grid-template-columns:1fr}.smart-chart-wide{grid-template-columns:1fr}.akp-insight-grid{grid-template-columns:1fr}}
@media(max-width:560px){.akp-stat-grid{grid-template-columns:1fr}.smart-bar-row{grid-template-columns:minmax(110px,1fr) minmax(90px,1fr) 40px;gap:8px}.smart-bar-label{font-size:10px}.smart-bar-track{height:22px}}


/* =========================================================
   SULUH PPDKS V4.5.0 — KEKOSONGAN AKP PINTAR
========================================================= */
.akp-vacancy-source-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fffaf6;
}

.field-label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.akp-source-link {
  display: inline-block;
  color: var(--red);
  font-weight: 900;
  line-height: 1.4;
  text-decoration: none;
}

.akp-source-link:hover {
  text-decoration: underline;
}

.akp-vacancy-source-grid small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.akp-vacancy-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.akp-vacancy-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.akp-vacancy-chart-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.akp-mapping-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.akp-mapping-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffaf7;
}

.akp-mapping-card strong,
.akp-mapping-card small {
  display: block;
}

.akp-mapping-card small {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.akp-mapping-card select {
  width: 100%;
  min-height: 43px;
}

.status-danger {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

.status-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
}

.status-success {
  background: #dcfce7 !important;
  color: #166534 !important;
}

@media (max-width: 1120px) {
  .akp-vacancy-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .akp-mapping-card {
    grid-template-columns: 1fr;
  }

  .akp-mapping-card .btn {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .akp-vacancy-chart-grid {
    grid-template-columns: 1fr;
  }

  .akp-vacancy-source-grid {
    grid-template-columns: 1fr;
  }

  .akp-vacancy-actions {
    justify-content: stretch;
  }

  .akp-vacancy-actions .btn {
    flex: 1 1 180px;
  }
}

@media (max-width: 560px) {
  .akp-vacancy-stat-grid {
    grid-template-columns: 1fr;
  }
}

/* SULUH PPDKS V4.6.1 — MAKLUMAT PPS DINAMIK */
.pps-filter-grid{display:grid;grid-template-columns:minmax(240px,2fr) minmax(180px,1fr) auto;gap:14px;align-items:end;margin-top:16px}
.pps-filter-grid label,.pps-form-grid label{display:grid;gap:7px;color:#493838;font-size:13px;font-weight:800}
.pps-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pps-list-hint{margin:0 0 12px;color:var(--muted);font-size:12px}
.pps-school-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pps-school-card{min-width:0;border:1px solid #ead5ca;border-radius:18px;background:linear-gradient(145deg,#fff,#fffaf7);padding:18px;box-shadow:0 10px 25px rgba(81,28,13,.05)}
.pps-school-heading span{color:var(--red);font-size:11px;font-weight:900;letter-spacing:.06em}
.pps-school-heading h4{margin:4px 0;font-size:18px;line-height:1.25;color:#2e2020}
.pps-school-heading small{color:var(--muted)}
.pps-school-officers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px}
.pps-officer-block{min-width:0;display:grid;gap:5px;padding:13px;border-radius:14px;border:1px solid #ead5ca;background:#fff}
.pps-officer-block.is-empty{background:#fbf6f3;border-style:dashed}
.pps-type-label{color:#9f6600;font-size:10px;font-weight:950;letter-spacing:.08em}
.pps-officer-block strong{color:#351f1f;font-size:14px;line-height:1.3}
.pps-officer-block small,.pps-muted{color:var(--muted);line-height:1.4}
.pps-empty-officer{color:var(--muted);font-size:12px;line-height:1.45}
.pps-contact{display:grid;gap:4px;margin-top:5px;font-size:12px}
.pps-contact a{color:var(--red);font-weight:800;text-decoration:none;overflow-wrap:anywhere}
.pps-source-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.pps-source-row>div{display:grid;gap:4px}.pps-source-row small{color:var(--muted)}
.pps-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.pps-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.pps-form-wide{grid-column:1/-1}
.pps-form-actions{display:flex;gap:10px;flex-wrap:wrap}
.pps-actions{display:flex;gap:6px;flex-wrap:wrap}
.btn-small{padding:7px 10px!important;min-height:auto!important;font-size:11px!important}
@media(max-width:1120px){.pps-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pps-school-grid,.pps-admin-grid{grid-template-columns:1fr}}
@media(max-width:720px){.pps-filter-grid{grid-template-columns:1fr}.pps-school-officers{grid-template-columns:1fr}.pps-form-grid{grid-template-columns:1fr}.pps-form-wide{grid-column:auto}.pps-source-row{align-items:flex-start;flex-direction:column}.pps-stat-grid{grid-template-columns:1fr}}



/* SULUH PPDKS V4.6.1 — IMPORT PPS DINAMIK */
.pps-import-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:16px;margin:14px 0}
.pps-import-card{display:grid;gap:11px;min-width:0;padding:16px;border:1px solid #ead5ca;border-radius:16px;background:linear-gradient(145deg,#fff,#fff9f4)}
.pps-import-card-secondary{background:#fffdfb}
.pps-import-card h4{margin:0;color:#352020;font-size:17px}
.pps-import-card p,.pps-import-card small{margin:0;color:var(--muted);line-height:1.45}
.pps-import-card label{display:grid;gap:7px;color:#493838;font-size:13px;font-weight:800}
.pps-import-status{min-height:22px;padding:9px 11px;border-radius:10px;background:#fbf6f3;font-size:12px;line-height:1.45}
.pps-import-status strong{color:var(--red)}
@media(max-width:900px){.pps-import-grid{grid-template-columns:1fr}}


/* SULUH PPDKS V4.6.2 — PPS ramai pegawai bagi satu sekolah */
.pps-officer-group{
  min-width:0;
  display:grid;
  gap:10px;
  padding:13px;
  border:1px solid #ead5ca;
  border-radius:16px;
  background:#fffaf7;
}
.pps-officer-group.is-empty{
  border-style:dashed;
  background:#fbf6f3;
}
.pps-officer-group-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:8px;
  border-bottom:1px solid #f0ddd4;
}
.pps-officer-count{
  flex:0 0 auto;
  color:var(--red);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.pps-officer-list{
  display:grid;
  gap:9px;
}
.pps-officer-group .pps-officer-block{
  position:relative;
  grid-template-columns:28px minmax(0,1fr);
  align-items:start;
  gap:10px;
  padding:11px;
  background:#fff;
}
.pps-officer-number{
  display:grid;
  width:26px;
  height:26px;
  place-items:center;
  border-radius:999px;
  background:#fff1c4;
  color:#8a5600;
  font-size:11px;
  font-weight:950;
}
.pps-officer-content{
  min-width:0;
  display:grid;
  gap:4px;
}
.pps-officer-content strong{
  overflow-wrap:anywhere;
}
@media(max-width:720px){
  .pps-officer-group-heading{
    align-items:flex-start;
  }
}


/* SULUH PPDKS V4.6.3 — PPS IPD */
.pps-import-grid{
  grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr) minmax(250px,1fr);
}
.pps-import-card-ipd{
  background:linear-gradient(145deg,#fff,#fff8e7);
  border-color:#ead0a5;
}
.pps-role-badge{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:4px 8px;
  border-radius:999px;
  background:#f1e6e1;
  color:#6b342b;
  font-size:10px;
  font-weight:950;
  line-height:1.2;
  letter-spacing:.02em;
}
.pps-role-badge.utama{
  background:#fff0b8;
  color:#784a00;
}
.pps-role-badge.penolong{
  background:#f3e8ff;
  color:#6b2f85;
}
.pps-balai{
  color:#67504a !important;
  font-weight:750;
}
@media(max-width:1180px){
  .pps-import-grid{
    grid-template-columns:1fr 1fr;
  }
  .pps-import-grid>.pps-import-card:first-child{
    grid-column:1/-1;
  }
}
@media(max-width:900px){
  .pps-import-grid{
    grid-template-columns:1fr;
  }
  .pps-import-grid>.pps-import-card:first-child{
    grid-column:auto;
  }
}


/* =========================================================
   SULUH PPDKS V4.6.4 — DASHBOARD PPS KEMAS
   Paparan utama: 1 sekolah = 1 rekod, PPS disusun dalam jadual.
========================================================= */
.pps-filter-grid-v464{
  grid-template-columns:minmax(260px,2fr) repeat(3,minmax(160px,1fr)) auto;
  gap:12px;
}
.pps-filter-search{min-width:0}
.pps-filter-actions{
  display:flex;
  gap:8px;
  align-items:end;
}
.pps-filter-actions .btn{white-space:nowrap}

.pps-school-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.pps-school-card-v464{
  padding:0;
  overflow:hidden;
  border-radius:18px;
  background:#fff;
}
.pps-school-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  background:linear-gradient(135deg,#fff8ef,#fff);
  border-bottom:1px solid #ead5ca;
}
.pps-school-identity{
  min-width:0;
  display:flex;
  align-items:center;
  gap:14px;
}
.pps-school-code{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:86px;
  min-height:38px;
  padding:8px 10px;
  border-radius:11px;
  background:#8f1111;
  color:#fff;
  font-size:12px;
  font-weight:950;
  letter-spacing:.04em;
}
.pps-school-identity h4{
  margin:0 0 4px;
  color:#2e2020;
  font-size:18px;
  line-height:1.25;
}
.pps-school-identity small{color:var(--muted)}
.pps-school-statuses{
  flex:0 0 auto;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.pps-status-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:850;
  border:1px solid transparent;
}
.pps-status-chip.is-ready{
  color:#166534;
  background:#dcfce7;
  border-color:#bbf7d0;
}
.pps-status-chip.is-missing{
  color:#7c2d12;
  background:#fff7ed;
  border-color:#fed7aa;
}
.pps-status-chip strong{font-size:12px}

.pps-school-table-section{
  padding:15px 18px 18px;
}
.pps-school-table-section + .pps-school-table-section{
  border-top:1px solid #f0ddd4;
}
.pps-school-table-section-ipd{
  background:#fffcf5;
}
.pps-table-section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}
.pps-table-section-heading>div{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.pps-table-section-heading strong{
  color:#382525;
  font-size:13px;
}
.pps-table-section-heading>span{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

.pps-readable-table-wrap{
  width:100%;
  overflow-x:auto;
  border:1px solid #ead5ca;
  border-radius:12px;
  background:#fff;
}
.pps-readable-table{
  width:100%;
  border-collapse:collapse;
  min-width:720px;
}
.pps-readable-table-ipd{min-width:900px}
.pps-readable-table th{
  padding:9px 10px;
  background:#f8eee9;
  color:#63382e;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.03em;
  text-align:left;
  border-bottom:1px solid #ead5ca;
}
.pps-readable-table td{
  padding:10px;
  vertical-align:top;
  color:#372929;
  font-size:12px;
  line-height:1.4;
  border-bottom:1px solid #f2e5df;
}
.pps-readable-table tbody tr:last-child td{border-bottom:0}
.pps-readable-table tbody tr:hover{background:#fffaf6}
.pps-readable-table td strong{
  color:#2e2020;
  font-size:12px;
}
.pps-readable-table td small{
  display:block;
  margin-top:3px;
  color:var(--muted);
}
.pps-table-number{
  display:inline-grid;
  width:24px;
  height:24px;
  place-items:center;
  border-radius:999px;
  background:#fff1c4;
  color:#7a4b00;
  font-size:10px;
  font-weight:950;
}
.pps-table-contact{
  display:grid;
  gap:3px;
}
.pps-table-contact a{
  color:var(--red);
  font-weight:850;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.pps-table-empty,
.pps-table-empty-state{
  color:var(--muted);
  font-size:12px;
}
.pps-table-empty-state{
  padding:12px 14px;
  border:1px dashed #dfcbc2;
  border-radius:11px;
  background:#fbf7f5;
}

.pps-admin-details{
  margin-top:18px;
}
.pps-admin-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 17px;
  border:1px solid #ead5ca;
  border-radius:15px;
  background:linear-gradient(135deg,#fff8ef,#fff);
  cursor:pointer;
  list-style:none;
  box-shadow:0 8px 22px rgba(81,28,13,.05);
}
.pps-admin-summary::-webkit-details-marker{display:none}
.pps-admin-summary>div{
  display:grid;
  gap:3px;
}
.pps-admin-summary strong{color:#382525;font-size:15px}
.pps-admin-summary small{color:var(--muted)}
.pps-admin-summary-action{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  background:#8f1111;
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.pps-admin-details[open] .pps-admin-summary-action::after{content:""}
.pps-admin-details[open] .pps-admin-summary-action{background:#5f1717}
.pps-admin-details[open] .pps-admin-summary-action{font-size:0}
.pps-admin-details[open] .pps-admin-summary-action::before{
  content:"Tutup Pengurusan";
  font-size:11px;
}

@media(max-width:1260px){
  .pps-filter-grid-v464{
    grid-template-columns:minmax(240px,2fr) repeat(2,minmax(160px,1fr));
  }
  .pps-filter-actions{
    grid-column:span 1;
  }
}
@media(max-width:900px){
  .pps-filter-grid-v464{
    grid-template-columns:1fr 1fr;
  }
  .pps-filter-search{grid-column:1/-1}
  .pps-filter-actions{grid-column:1/-1}
  .pps-school-summary{
    align-items:flex-start;
    flex-direction:column;
  }
  .pps-school-statuses{justify-content:flex-start}
}
@media(max-width:720px){
  .pps-filter-grid-v464{grid-template-columns:1fr}
  .pps-filter-search,
  .pps-filter-actions{grid-column:auto}
  .pps-filter-actions .btn{flex:1}
  .pps-school-summary{padding:14px}
  .pps-school-identity{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .pps-school-code{min-width:0;min-height:0}
  .pps-school-table-section{padding:13px 14px 15px}
  .pps-table-section-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .pps-readable-table-wrap{
    overflow:visible;
    border:0;
    background:transparent;
  }
  .pps-readable-table,
  .pps-readable-table-ipd{
    min-width:0;
    display:block;
  }
  .pps-readable-table thead{display:none}
  .pps-readable-table tbody{
    display:grid;
    gap:10px;
  }
  .pps-readable-table tr{
    display:grid;
    gap:7px;
    padding:11px;
    border:1px solid #ead5ca;
    border-radius:12px;
    background:#fff;
  }
  .pps-readable-table td{
    display:grid;
    grid-template-columns:110px minmax(0,1fr);
    gap:10px;
    padding:0;
    border:0;
  }
  .pps-readable-table td::before{
    content:attr(data-label);
    color:#6f524a;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
  }
  .pps-admin-summary{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* =========================================================
   SULUH PPDKS V4.7.0 — LAPORAN 137 DUA PERINGKAT
========================================================= */
.report137-category-dialog-card{max-width:820px}
.report137-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.report137-category-option{appearance:none;border:1px solid #e4d4ce;background:#fff;border-radius:18px;padding:18px;text-align:left;display:grid;gap:7px;cursor:pointer;box-shadow:0 8px 22px rgba(61,32,23,.06)}
.report137-category-option:hover{transform:translateY(-1px);border-color:#c8a89c}
.report137-category-option.urgent{border-left:5px solid #b51212}
.report137-category-option.normal{border-left:5px solid #b98500}
.report137-category-option strong{font-size:15px;color:#271813}
.report137-category-option span{font-size:13px;color:#5f4b43}
.report137-category-option small{font-weight:800;color:#8f1111}
.report137-category-badge{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;background:#fff7e2;border:1px solid #efd28a;margin:12px 0 16px;font-size:13px}
.report137-category-badge span{padding:5px 9px;border-radius:999px;background:#b51212;color:#fff;font-size:11px;font-weight:900}
.report137-people-list{display:grid;gap:12px}
.report137-person-row{padding:14px;border:1px solid #ead8d0;border-radius:16px;background:#fffaf7}
.report137-person-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.report137-person-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.report137-statements-grid{display:grid;gap:10px}
.report137-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.report137-contact-card{padding:14px;border:1px solid #ead8d0;border-radius:16px;background:#fff}
.report137-contact-card>strong{display:block;margin-bottom:10px;color:#8f1111}
.report137-contact-card label{display:grid;gap:6px;margin-top:9px}
.report137-preview-section textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.55;background:#fbfaf8}
.report137-category-pill{display:inline-block;max-width:100%;padding:5px 8px;border-radius:999px;background:#f4eee9;color:#4d342b;font-size:10px;font-weight:900;margin-bottom:6px}
.report137-category-pill.VIRAL_MEDIA_SOSIAL,.report137-category-pill.BULI_VIRAL,.report137-category-pill.SEKSUAL{background:#fee2e2;color:#991b1b}
.report137-stage{display:inline-block;padding:6px 9px;border-radius:10px;background:#f4f1ee;font-size:11px;font-weight:900;color:#4f4039}
.report137-stage.needs-full{background:#fff1c2;color:#7c4a00}
.report137-filter-grid-v470{grid-template-columns:minmax(220px,2fr) repeat(4,minmax(150px,1fr)) auto}
.report137-early-detail{border-left:4px solid #b51212}
.report137-detail-block h5{margin:14px 0 6px;color:#6d241b}
.report137-detail-block details{margin-top:12px}
.report137-detail-block summary{cursor:pointer;font-weight:900;color:#6d241b}
@media(max-width:900px){.report137-category-grid,.report137-contact-grid,.report137-person-fields{grid-template-columns:1fr}.report137-filter-grid-v470{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.report137-category-grid,.report137-filter-grid-v470{grid-template-columns:1fr}.report137-category-option{padding:14px}.report137-category-badge{align-items:flex-start;flex-direction:column}}


/* =========================================================
   SULUH PPDKS V4.7.1 — NOTIFIKASI HADAPAN DIALOG
========================================================= */
.dialog-local-toast{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  z-index:2147483647;
  width:min(560px,calc(100vw - 28px));
  padding:13px 16px;
  border-radius:14px;
  background:#172235;
  color:#fff;
  font-weight:850;
  line-height:1.35;
  text-align:center;
  box-shadow:0 18px 48px rgba(0,0,0,.28);
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
}
.dialog-local-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.dialog-local-toast.success{background:#17633d;}
.dialog-local-toast.error{background:#b42318;}
.dialog-local-toast.processing{background:#7a1b15;}
.dialog-local-toast.processing::before{
  content:"";
  display:inline-block;
  width:15px;
  height:15px;
  margin-right:9px;
  vertical-align:-2px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:suluhDialogSpin .75s linear infinite;
}
@keyframes suluhDialogSpin{to{transform:rotate(360deg)}}
#report137ReviewActions{
  position:sticky;
  bottom:0;
  z-index:4;
  padding-top:12px;
  background:linear-gradient(to top,#fff 78%,rgba(255,255,255,.82));
}
@media(max-width:720px){
  .dialog-local-toast{top:10px;font-size:13px;}
  #report137ReviewActions .btn{min-height:44px;}
}


/* V4.7.2 — Padam Laporan 137 */
.report137-delete-btn{border-color:#b91c1c;box-shadow:none}
.report137-delete-btn:hover{filter:brightness(.96)}


/* SULUH PPDKS V4.7.4 — Status tindakan PPD dan penyelesaian */
.report137-status.DALAM_TINDAKAN{
  background:#fff4ce;
  color:#7a4b00;
  border-color:#e8c867;
}
.report137-ppd-action-block{
  border-left:5px solid #d89b16;
  background:#fffdf5;
}
#report137PpdActionDialog .dialog-card{
  max-width:820px;
}
#report137PpdActionDialog textarea{
  min-height:110px;
}

.btn-warning{
  background:#f3c969;
  color:#5b3a00;
  border-color:#d2a33c;
}
.btn-warning:hover{
  filter:brightness(.97);
}


/* SULUH PPDKS V4.7.5 — Laporan asal di atas, tindakan PPD di bawah */
#report137ReviewActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.report137-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
}
.report137-action-label {
  width: 100%;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .72;
}
.report137-action-original { order: 1; }
.report137-action-ppd { order: 2; }
.report137-action-system { order: 3; margin-left: auto; }
.report137-original-report {
  border-left: 5px solid #2563eb;
}
.report137-ppd-action-block {
  border-left: 5px solid #d97706;
}
.report137-block-title {
  margin-bottom: 12px;
}
.report137-block-title h4 {
  margin: 2px 0 0;
}
.report137-early-reference {
  margin-top: 14px;
}
.report137-early-reference > details > summary {
  cursor: pointer;
  font-weight: 700;
}
.report137-early-reference .report137-early-detail {
  margin-top: 10px;
}
@media (max-width: 760px) {
  .report137-action-group,
  .report137-action-system {
    width: 100%;
    margin-left: 0;
  }
  .report137-action-group .btn {
    flex: 1 1 100%;
  }
}

/* SULUH PPDKS V4.7.6 — WhatsApp gabung laporan asal + tindakan PPD; AI salin manual */


/* =========================================================
   SULUH PPDKS V4.8.3 — KAD RINGKASAN KEHADIRAN & DISIPLIN JELAS
========================================================= */
#spmKdMetrics.spm-kd-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  width: 100%;
  margin: 20px 0 10px;
}

#spmKdMetrics .spm-kd-metric-card,
.spm-kd-home-metrics .spm-kd-metric-card {
  min-height: 168px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  border-top: 4px solid var(--yellow);
}

#spmKdMetrics .spm-kd-metric-card::after,
.spm-kd-home-metrics .spm-kd-metric-card::after {
  opacity: .75;
}

#spmKdMetrics .spm-kd-metric-label,
.spm-kd-home-metrics .spm-kd-metric-label {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.admin-content #spmKdMetrics .spm-kd-metric-value,
.admin-content .spm-kd-home-metrics .spm-kd-metric-value {
  display: block;
  margin: 2px 0 0;
  max-width: 100%;
  color: var(--red-2);
  font-size: clamp(28px, 2.25vw, 40px);
  line-height: 1.05;
  letter-spacing: -.03em;
  white-space: normal;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.admin-content #spmKdMetrics .spm-kd-metric-value.is-text,
.admin-content .spm-kd-home-metrics .spm-kd-metric-value.is-text {
  font-size: clamp(22px, 1.9vw, 32px);
  line-height: 1.12;
}

#spmKdMetrics .spm-kd-metric-meta,
.spm-kd-home-metrics .spm-kd-metric-meta {
  display: block;
  margin-top: auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  overflow-wrap: anywhere;
}

#spmKdMetrics .tone-positive,
.spm-kd-home-metrics .tone-positive {
  border-top-color: #1f8a4c;
}

#spmKdMetrics .tone-negative,
.spm-kd-home-metrics .tone-negative {
  border-top-color: #b42318;
}

#spmKdMetrics .tone-warning,
.spm-kd-home-metrics .tone-warning {
  border-top-color: #d99100;
}

#spmKdMetrics .tone-muted,
.spm-kd-home-metrics .tone-muted {
  border-top-color: #8a7b75;
}

.spm-kd-metric-guide {
  margin: 0 0 18px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 193, 7, .08);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.spm-kd-metric-guide strong {
  color: var(--red-2);
}

.spm-kd-home-metrics {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 14px;
}

@media (max-width: 720px) {
  #spmKdMetrics.spm-kd-metrics-grid,
  .spm-kd-home-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #spmKdMetrics .spm-kd-metric-card,
  .spm-kd-home-metrics .spm-kd-metric-card {
    min-height: 158px;
    padding: 15px;
  }

  .admin-content #spmKdMetrics .spm-kd-metric-value,
  .admin-content .spm-kd-home-metrics .spm-kd-metric-value {
    font-size: clamp(24px, 7.5vw, 32px);
  }

  .admin-content #spmKdMetrics .spm-kd-metric-value.is-text,
  .admin-content .spm-kd-home-metrics .spm-kd-metric-value.is-text {
    font-size: clamp(19px, 6vw, 26px);
  }
}

@media (max-width: 430px) {
  #spmKdMetrics.spm-kd-metrics-grid,
  .spm-kd-home-metrics {
    grid-template-columns: 1fr;
  }

  #spmKdMetrics .spm-kd-metric-card,
  .spm-kd-home-metrics .spm-kd-metric-card {
    min-height: 142px;
  }
}


/* V4.8.5 — Navigasi mengikut sektor, hanya untuk PPD01 */
#adminNav.super-admin-sector-nav {
  gap: 8px;
}

#adminNav.super-admin-sector-nav .super-admin-dashboard-nav {
  margin-bottom: 4px;
  border: 1px solid rgba(244, 196, 48, .42);
  background: rgba(255, 255, 255, .06);
}

.super-admin-nav-group {
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .035);
}

.super-admin-nav-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  user-select: none;
}

.super-admin-nav-summary::-webkit-details-marker {
  display: none;
}

.super-admin-nav-summary:hover,
.super-admin-nav-group[open] > .super-admin-nav-summary {
  background: rgba(244, 196, 48, .12);
}

.super-admin-nav-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.super-admin-nav-copy strong {
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
}

.super-admin-nav-copy small {
  color: rgba(255, 255, 255, .62);
  font-size: 10px;
  line-height: 1.25;
}

.super-admin-nav-chevron {
  flex: 0 0 auto;
  color: var(--yellow);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  transition: transform .18s ease;
}

.super-admin-nav-group[open] .super-admin-nav-chevron {
  transform: rotate(180deg);
}

.super-admin-nav-body {
  display: grid;
  gap: 4px;
  padding: 0 7px 8px;
}

.super-admin-nav-body .nav-btn {
  padding: 9px 10px 9px 14px;
  font-size: 12px;
  border-radius: 9px;
}

.super-admin-nav-body .nav-btn:not(.active) {
  color: rgba(255, 255, 255, .72);
}


/* SULUH PPDKS V4.9.0 — MMI */
.mmi-hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:22px;border-radius:22px;background:linear-gradient(135deg,rgba(11,59,117,.10),rgba(245,183,0,.12));border:1px solid rgba(11,59,117,.12);margin-bottom:18px}.mmi-hero h3{margin:5px 0 6px;font-size:1.45rem}.mmi-hero p{margin:0;max-width:760px;color:var(--muted)}.mmi-year-box{min-width:140px}.mmi-year-box label{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.mmi-year-box select{margin-top:6px;width:100%}.mmi-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.mmi-kpi{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}.mmi-kpi small{display:block;color:var(--muted);font-weight:700}.mmi-kpi strong{display:block;font-size:1.65rem;line-height:1.15;margin:6px 0}.mmi-kpi span{font-size:.78rem;color:var(--muted)}.mmi-kpi-alert{border-color:rgba(245,183,0,.5)}.mmi-kpi-danger{border-color:rgba(190,30,45,.45)}.mmi-chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.mmi-setting-form{display:flex;gap:14px;align-items:end;flex-wrap:wrap}.mmi-setting-form>div{min-width:130px}.mmi-setting-form>div strong{display:block;font-size:1.35rem}.mmi-setting-form>div small{display:block;color:var(--muted)}.mmi-setting-form label{min-width:230px}.mmi-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mmi-form-grid label{display:flex;flex-direction:column;gap:6px;font-weight:700}.mmi-form-grid label small{font-weight:400;color:var(--muted)}.mmi-span-2{grid-column:1/-1}.mmi-form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.mmi-form-actions span{font-size:.82rem;color:var(--muted)}.mmi-note{margin:0 0 16px}.mmi-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.72rem;font-weight:800;white-space:nowrap}.mmi-status-ok{background:rgba(22,163,74,.12);color:#15803d}.mmi-status-near{background:rgba(245,183,0,.16);color:#9a6700}.mmi-status-high{background:rgba(234,88,12,.14);color:#c2410c}.mmi-status-over{background:rgba(190,30,45,.12);color:#b91c1c}.btn-small{padding:7px 10px;font-size:.78rem}.mmi-school-panel{border-top:4px solid #0B3B75}
@media(max-width:1050px){.mmi-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mmi-chart-grid{grid-template-columns:1fr}}@media(max-width:700px){.mmi-hero{flex-direction:column}.mmi-year-box{width:100%}.mmi-kpi-grid{grid-template-columns:1fr 1fr}.mmi-form-grid{grid-template-columns:1fr}.mmi-span-2{grid-column:auto}.mmi-kpi strong{font-size:1.4rem}}

.mmi-search-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}.mmi-search-row input{flex:1 1 280px;min-width:200px}

/* =========================================================
   SULUH PPDKS V4.9.2 — TINTA PEGAWAI PENDIDIKAN DAERAH
========================================================= */
.tinta-public-panel {
  margin: 22px 0;
  padding: clamp(18px, 3vw, 28px);
  border-top: 4px solid var(--yellow);
  background:
    radial-gradient(circle at 100% 0%, rgba(244,196,48,.13), transparent 32%),
    var(--surface);
}
.tinta-public-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.tinta-public-heading h3 {
  margin: 4px 0 3px;
  color: var(--red);
  font-size: clamp(20px, 2.5vw, 30px);
  line-height: 1.12;
}
.tinta-tagline {
  margin: 5px 0 0;
  color: #8b5a00;
  font-weight: 800;
  font-style: italic;
}
.tinta-slider {
  position: relative;
  padding: 0 48px;
}
.tinta-slide-card {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .7fr);
  min-height: 470px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(139,0,0,.10);
}
.tinta-poster-stage {
  min-height: 470px;
  width: 100%;
  padding: 18px;
  border: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(139,0,0,.96), rgba(183,28,28,.88)),
    #8b0000;
}
.tinta-poster-stage img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 680px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  background: #fff;
}
.tinta-poster-placeholder {
  display: grid;
  place-items: center;
  min-height: 360px;
  width: 100%;
  color: rgba(255,255,255,.82);
  font-weight: 800;
  text-align: center;
}
.tinta-slide-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 4vw, 42px);
  background: linear-gradient(180deg, #fffdf7, #fff8e8);
}
.tinta-slide-copy h4 {
  margin: 0;
  color: var(--red);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.08;
}
.tinta-slide-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-line;
}
.tinta-slide-position {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(244,196,48,.22);
  color: #7a4d00;
  font-size: 12px;
  font-weight: 900;
}
.tinta-poster-date {
  color: #8a6a4d;
  font-size: 13px;
  font-weight: 700;
}
.tinta-slider-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 58px;
  border: 0;
  border-radius: 14px;
  background: var(--red);
  color: white;
  font-size: 34px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(139,0,0,.22);
}
.tinta-slider-arrow:hover { background: var(--red-2); }
.tinta-slider-prev { left: 0; }
.tinta-slider-next { right: 0; }
.tinta-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 28px;
  margin-top: 14px;
}
.tinta-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #dcc7c7;
  transition: width .18s ease, background .18s ease;
}
.tinta-dot.active {
  width: 28px;
  background: var(--red);
}
.tinta-dialog-card { max-width: 980px; }
.tinta-dialog-image-wrap {
  display: grid;
  place-items: center;
  max-height: 72vh;
  overflow: auto;
  padding: 12px;
  border-radius: 16px;
  background: #f7eeee;
}
.tinta-dialog-image-wrap img {
  display: block;
  max-width: 100%;
  max-height: 68vh;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.tinta-dialog-caption {
  margin: 14px 0 0;
  color: var(--muted);
  white-space: pre-line;
}

.tinta-admin-heading { margin-bottom: 18px; }
.tinta-admin-heading p { color: var(--muted); font-weight: 700; }
.tinta-admin-layout {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: start;
}
.tinta-admin-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.tinta-admin-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 800;
}
.tinta-admin-form label small { color: var(--muted); font-weight: 500; }
.tinta-span-2 { grid-column: 1 / -1; }
.tinta-admin-preview {
  min-height: 280px;
  display: grid;
  place-items: center;
  padding: 12px;
  overflow: hidden;
  border: 1px dashed #d2b7b7;
  border-radius: 16px;
  background: #fffaf3;
  color: var(--muted);
  text-align: center;
}
.tinta-admin-preview img {
  display: block;
  max-width: 100%;
  max-height: 460px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.tinta-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tinta-admin-list-panel table small {
  display: inline-block;
  max-width: 380px;
  color: var(--muted);
  line-height: 1.35;
}
.tinta-admin-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}
.tinta-status-live { background: rgba(31,122,76,.13); color: #17603c; }
.tinta-status-off { background: rgba(116,95,95,.12); color: #675252; }
.tinta-status-scheduled { background: rgba(244,196,48,.18); color: #805600; }
.tinta-status-archive { background: rgba(42,26,26,.10); color: #4e3c3c; }

@media (max-width: 1050px) {
  .tinta-slide-card { grid-template-columns: 1fr; }
  .tinta-poster-stage { min-height: 420px; }
  .tinta-slide-copy { padding: 26px; }
  .tinta-admin-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .tinta-public-heading { flex-direction: column; }
  .tinta-slider { padding: 0; }
  .tinta-slider-arrow {
    top: 42%;
    width: 38px;
    height: 50px;
    background: rgba(139,0,0,.9);
  }
  .tinta-slider-prev { left: 8px; }
  .tinta-slider-next { right: 8px; }
  .tinta-slide-card { min-height: 0; }
  .tinta-poster-stage { min-height: 360px; padding: 10px; }
  .tinta-poster-stage img { max-height: 560px; }
  .tinta-slide-copy { padding: 20px; }
  .tinta-admin-form { grid-template-columns: 1fr; }
  .tinta-span-2 { grid-column: auto; }
}

@media (max-width: 460px) {
  .tinta-public-panel { padding: 14px; }
  .tinta-public-heading h3 { font-size: 20px; }
  .tinta-poster-stage { min-height: 300px; }
  .tinta-slide-copy h4 { font-size: 23px; }
}


/* V4.9.2 — TINTA: tetapan slider + upload pukal pantas */
.tinta-settings-panel,
.tinta-bulk-panel { overflow: hidden; }
.tinta-settings-grid,
.tinta-bulk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}
.tinta-settings-grid label,
.tinta-bulk-grid label {
  display: grid;
  gap: 7px;
  font-weight: 800;
}
.tinta-settings-grid small,
.tinta-bulk-grid small { color: var(--muted); font-weight: 600; }
.tinta-settings-action,
.tinta-bulk-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.tinta-bulk-summary {
  min-height: 24px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(244,196,48,.10);
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .tinta-settings-grid,
  .tinta-bulk-grid { grid-template-columns: 1fr; }
  .tinta-settings-action,
  .tinta-bulk-actions,
  .tinta-span-2 { grid-column: auto; }
}

/* =========================================================
   SULUH PPDKS V4.9.18 — RAKAN STRATEGIK SPM
========================================================= */
.rakan-public-panel { margin-top: 22px; overflow: hidden; }
.rakan-public-heading p { margin: 6px 0 0; color: var(--muted); }
.rakan-public-stats,
.rakan-admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.rakan-stat-card,
.rakan-admin-metric {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, var(--cream));
}
.rakan-stat-card strong,
.rakan-admin-metric strong { display: block; font-size: 26px; color: var(--red); }
.rakan-stat-card span,
.rakan-admin-metric span { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; font-weight: 700; }

.rakan-partner-wall {
  overflow-x: auto;
  padding: 3px 0 10px;
  scrollbar-width: thin;
}
.rakan-wall-track { display: flex; gap: 10px; min-width: max-content; }
.rakan-partner-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 170px;
  max-width: 240px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}
.rakan-partner-chip:hover { border-color: var(--yellow); box-shadow: 0 7px 18px rgba(139,0,0,.08); }
.rakan-wall-logo,
.rakan-logo,
.rakan-table-logo,
.rakan-dialog-logo {
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
}
.rakan-wall-logo { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; }
.rakan-logo { width: 58px; height: 58px; border-radius: 15px; flex: 0 0 auto; }
.rakan-table-logo { width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto; }
.rakan-dialog-logo { width: 54px; height: 54px; border-radius: 14px; flex: 0 0 auto; }
.rakan-logo-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--red), var(--red-2));
  color: #fff;
  font-weight: 900;
  border-color: var(--yellow);
}
.rakan-partner-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; }

.rakan-public-filters,
.rakan-admin-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(135px, 1fr)) auto;
  gap: 10px;
  margin: 14px 0 18px;
}
.rakan-admin-filters { grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(120px, .8fr)) auto auto; }
.rakan-public-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.rakan-public-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 280px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(139,0,0,.05);
}
.rakan-card-top { display: flex; gap: 13px; align-items: center; }
.rakan-card-top h4 { margin: 5px 0 2px; font-size: 16px; }
.rakan-card-top small { color: var(--muted); }
.rakan-kind {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  background: var(--cream);
  color: var(--red);
  border: 1px solid rgba(139,0,0,.12);
}
.rakan-kind-jaringan { background: #fff4c2; }
.rakan-card-body { flex: 1; }
.rakan-card-body > strong { display: block; margin-bottom: 7px; font-size: 16px; }
.rakan-card-body p { margin: 0 0 12px; color: var(--muted); line-height: 1.55; font-size: 13px; }
.rakan-card-meta { display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 12px; }
.rakan-view-certificate { width: 100%; }
.rakan-majlis-thumb {
  display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #f8f5f1; cursor: pointer;
}
.rakan-majlis-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rakan-card-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.rakan-card-actions > :only-child { grid-column: 1 / -1; }


.rakan-sijil-dialog-card { width: min(1000px, 94vw); }
.rakan-sijil-entity { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.rakan-sijil-entity strong,
.rakan-sijil-entity small { display: block; }
.rakan-sijil-entity small { margin-top: 3px; color: var(--muted); }
.rakan-sijil-image-wrap {
  display: grid;
  place-items: center;
  min-height: 280px;
  max-height: 68vh;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8f5f1;
}
.rakan-sijil-image-wrap img { display: block; max-width: 100%; max-height: 64vh; object-fit: contain; }
.rakan-sijil-description { color: var(--muted); line-height: 1.55; }

.rakan-admin-heading { margin-bottom: 16px; }
.rakan-admin-layout {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(620px, 1.5fr);
  gap: 18px;
  align-items: start;
}
.rakan-admin-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-top: 16px;
}
.rakan-admin-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.rakan-admin-form small { color: var(--muted); font-weight: 500; line-height: 1.35; }
.rakan-span-2 { grid-column: 1 / -1; }
.rakan-media-preview > span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; color: var(--muted); }
.rakan-preview-box {
  display: grid;
  place-items: center;
  min-height: 130px;
  padding: 8px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  background: #fffdf9;
  overflow: hidden;
}
.rakan-preview-box img { max-width: 100%; max-height: 220px; object-fit: contain; }
.rakan-form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rakan-table-entity { display: flex; gap: 10px; align-items: center; min-width: 220px; }
.rakan-table-entity strong,
.rakan-table-entity small { display: block; }
.rakan-table-entity small { margin-top: 3px; color: var(--muted); }
.rakan-admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.rakan-badge-active { background: #e9f7ef; color: var(--success); }
.rakan-badge-ended { background: #fff4cc; color: #875c00; }
.rakan-badge-archive { background: #f1eded; color: var(--muted); }

@media (max-width: 1180px) {
  .rakan-public-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rakan-admin-layout { grid-template-columns: 1fr; }
  .rakan-admin-filters { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .rakan-admin-filters > :first-child { grid-column: span 2; }
}
@media (max-width: 780px) {
  .rakan-public-stats,
  .rakan-admin-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rakan-public-filters,
  .rakan-admin-filters { grid-template-columns: 1fr; }
  .rakan-admin-filters > :first-child { grid-column: auto; }
  .rakan-public-grid { grid-template-columns: 1fr; }
  .rakan-admin-form { grid-template-columns: 1fr; }
  .rakan-span-2 { grid-column: auto; }
  .rakan-card-meta { flex-direction: column; }
}


/* V4.9.19 — URUS PENGUMUMAN PPD01 */
#adminAnnouncementsPage .metrics-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:14px 0 18px}
#adminAnnouncementsPage .metric-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:15px;box-shadow:var(--shadow)}
#adminAnnouncementsPage .metric-card strong{display:block;font-size:1.5rem;line-height:1.1;margin-bottom:5px}
#adminAnnouncementsPage .metric-card span{font-size:.8rem;color:var(--muted);font-weight:700}
#adminAnnouncementsPage .admin-two-column{display:grid;grid-template-columns:minmax(320px,.78fr) minmax(560px,1.45fr);gap:16px;align-items:start}
#adminAnnouncementsPage .form-grid{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}
#adminAnnouncementsPage .filter-grid{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(130px,.75fr)) auto auto;gap:10px;align-items:end;margin:0 0 14px}
#adminAnnouncementsPage .form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#adminAnnouncementsPage .table-actions{display:flex;gap:6px;flex-wrap:wrap}
#adminAnnouncementsPage .badge.success{background:rgba(22,163,74,.12);color:#15803d}
#adminAnnouncementsPage .badge.warning{background:rgba(245,183,0,.16);color:#8a5b00}
#adminAnnouncementsPage .badge.danger{background:rgba(190,30,45,.12);color:#b91c1c}
#adminAnnouncementsPage textarea{resize:vertical}
@media(max-width:1150px){#adminAnnouncementsPage .admin-two-column{grid-template-columns:1fr}#adminAnnouncementsPage .metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#adminAnnouncementsPage .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){#adminAnnouncementsPage .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#adminAnnouncementsPage .form-grid,#adminAnnouncementsPage .filter-grid{grid-template-columns:1fr}#adminAnnouncementsPage .field-span-2{grid-column:auto}}


/* =========================================================
   SULUH PPDKS V4.9.23 — GPS SIJIL PELAJARAN MALAYSIA (SPB)
========================================================= */
.spb-gps-hero{display:flex;justify-content:space-between;gap:20px;align-items:stretch;padding:24px;border-radius:22px;background:linear-gradient(135deg,rgba(139,0,0,.98),rgba(187,18,18,.94));color:#fff;box-shadow:0 16px 40px rgba(102,0,0,.2);margin-bottom:18px}.spb-gps-hero h2{margin:4px 0 8px;font-size:clamp(1.5rem,3vw,2.25rem)}.spb-gps-hero p{margin:0;max-width:760px;color:rgba(255,255,255,.88)}.spb-gps-hero .eyebrow{color:#ffd764}.spb-gps-freshness{min-width:310px;max-width:390px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:5px}.spb-gps-freshness span{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:#ffd764}.spb-gps-freshness strong{font-size:.95rem}.spb-gps-freshness small{color:rgba(255,255,255,.8);line-height:1.45}.spb-gps-freshness .btn{margin-top:8px;align-self:flex-start;background:#fff;color:#8b0000;border-color:#fff}.spb-gps-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.spb-gps-stat small{display:block;margin-top:8px;color:var(--muted);font-weight:600}.spb-gps-main-value{font-size:1.15em}.spb-gps-chart-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:18px;margin-top:18px}.spb-gps-line-chart{min-height:250px;display:grid;place-items:center;padding:4px}.spb-gps-line-chart svg,.spb-gps-dialog-chart svg{width:100%;height:auto;overflow:visible}.spb-gps-line{fill:none;stroke:#b20d16;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.spb-gps-dot{fill:#f6c945;stroke:#8b0000;stroke-width:3}.spb-gps-svg-value{font-size:17px;font-weight:900;fill:#7d1118}.spb-gps-svg-year{font-size:14px;font-weight:800;fill:#5d6674}.spb-gps-year-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:8px}.spb-gps-year-card{border:1px solid var(--border);border-radius:14px;padding:12px;background:var(--panel-soft,#fafafa)}.spb-gps-year-card span,.spb-gps-year-card small{display:block;color:var(--muted)}.spb-gps-year-card strong{display:block;font-size:1.65rem;margin:4px 0;color:#8b0000}.spb-gps-trend-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.spb-gps-trend-stat{border:1px solid var(--border);border-radius:16px;padding:16px}.spb-gps-trend-stat strong{display:block;font-size:1.8rem}.spb-gps-trend-stat span{font-size:.86rem;color:var(--muted)}.spb-gps-trend-stat.good strong{color:#0b7a4b}.spb-gps-trend-stat.bad strong{color:#b42318}.spb-gps-insight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}.spb-gps-rank-list{display:grid;gap:8px}.spb-gps-rank-row{width:100%;border:1px solid var(--border);background:var(--surface,#fff);border-radius:13px;padding:10px 12px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:9px;text-align:left;color:inherit;cursor:pointer}.spb-gps-rank-row:hover{border-color:#b20d16;transform:translateY(-1px)}.spb-gps-rank-row span:nth-child(2) strong,.spb-gps-rank-row span:nth-child(2) small{display:block}.spb-gps-rank-row small{color:var(--muted);margin-top:2px}.spb-gps-rank-no{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#fff1c7;color:#7a4c00;font-weight:900}.spb-gps-rank-value{font-size:1.2rem;color:#8b0000}.spb-gps-badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:.75rem;font-weight:800;white-space:nowrap}.spb-gps-badge.good{background:#e9f8f1;color:#087443}.spb-gps-badge.bad{background:#fff0ef;color:#a92318}.spb-gps-badge.neutral{background:#eef1f5;color:#596273}.spb-gps-filter-grid{display:grid;grid-template-columns:minmax(200px,2fr) repeat(3,minmax(150px,1fr)) auto auto;gap:10px;margin-bottom:14px}.spb-gps-table-wrap{max-height:620px}.spb-gps-table-wrap thead{position:sticky;top:0;z-index:2}.spb-gps-no-data{color:var(--muted);font-size:.8rem;font-style:italic}.spb-gps-cohort-small{display:inline-block;margin-top:4px;padding:2px 6px;border-radius:8px;background:#fff4d9;color:#875c00;font-size:.72rem;font-weight:800}.spb-gps-import-panel>summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:4px;padding:18px}.spb-gps-import-panel>summary::-webkit-details-marker{display:none}.spb-gps-import-panel>summary span{font-size:.84rem;color:var(--muted);font-weight:500}.spb-gps-import-body{padding:0 18px 18px}.spb-gps-import-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.spb-gps-import-grid label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.86rem}.spb-gps-process-status{margin-top:14px;border-radius:12px;padding:11px 13px;background:#f4f6f8;color:#4d5868;font-weight:700}.spb-gps-preview-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:14px 0}.spb-gps-preview-kpis>div{border:1px solid var(--border);border-radius:12px;padding:10px}.spb-gps-preview-kpis span,.spb-gps-preview-kpis strong{display:block}.spb-gps-preview-kpis span{font-size:.75rem;color:var(--muted)}.spb-gps-preview-kpis strong{font-size:1.1rem;margin-top:4px}.spb-gps-delete-year{display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);margin-top:14px;padding-top:14px}.spb-gps-delete-year>div{margin-right:auto}.spb-gps-delete-year strong,.spb-gps-delete-year small{display:block}.spb-gps-delete-year small{color:var(--muted);margin-top:3px}.spb-gps-school-dialog .modal-card{max-width:900px}.spb-gps-dialog-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.spb-gps-dialog-summary>div{border:1px solid var(--border);border-radius:13px;padding:12px}.spb-gps-dialog-summary span,.spb-gps-dialog-summary strong,.spb-gps-dialog-summary small{display:block}.spb-gps-dialog-summary span{font-size:.75rem;color:var(--muted)}.spb-gps-dialog-summary strong{font-size:1.3rem;margin-top:4px}.spb-gps-dialog-chart{margin:10px 0 16px;max-height:210px;overflow:hidden}
@media(max-width:1050px){.spb-gps-metrics{grid-template-columns:repeat(2,1fr)}.spb-gps-chart-grid,.spb-gps-insight-grid{grid-template-columns:1fr}.spb-gps-filter-grid{grid-template-columns:1fr 1fr}.spb-gps-import-grid{grid-template-columns:1fr 1fr}.spb-gps-preview-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.spb-gps-hero{flex-direction:column;padding:18px}.spb-gps-freshness{min-width:0;max-width:none}.spb-gps-metrics,.spb-gps-filter-grid,.spb-gps-import-grid,.spb-gps-dialog-summary{grid-template-columns:1fr}.spb-gps-preview-kpis{grid-template-columns:1fr 1fr}.spb-gps-delete-year{align-items:stretch;flex-direction:column}.spb-gps-delete-year>div{margin-right:0}.spb-gps-line-chart{min-height:190px}.spb-gps-table-wrap{max-height:520px}}


/* =========================================================
   SULUH PPDKS V4.9.24 — PENDIDIKAN KHAS: PPKI & MBPK
========================================================= */
.spb-ppki-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:24px;border-radius:22px;background:linear-gradient(135deg,rgba(139,0,0,.98),rgba(183,28,28,.94));color:#fff;box-shadow:var(--shadow);margin-bottom:18px}
.spb-ppki-hero h2{margin:4px 0 8px;font-size:clamp(1.5rem,3vw,2.2rem)}.spb-ppki-hero p{margin:0;max-width:850px;color:rgba(255,255,255,.88)}.spb-ppki-hero .eyebrow{color:var(--yellow-2)}.spb-ppki-hero .btn{background:#fff;color:var(--red);border-color:#fff}
.spb-ppki-source-warning{margin-bottom:18px}.spb-ppki-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.spb-ppki-kpis>div{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}.spb-ppki-kpis span,.spb-ppki-kpis small,.spb-ppki-kpis strong{display:block}.spb-ppki-kpis span{font-size:.78rem;font-weight:800;color:var(--muted)}.spb-ppki-kpis strong{font-size:1.65rem;margin:4px 0;color:var(--red)}.spb-ppki-kpis small{color:var(--muted)}
.spb-ppki-level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}.spb-ppki-level-grid h3{margin:6px 0 12px}.spb-ppki-level-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}.spb-ppki-level-meta span{border-radius:10px;background:var(--cream);padding:8px 10px;font-size:.82rem;font-weight:700}
.spb-ppki-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}.spb-ppki-active-collection{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}.spb-ppki-active-collection>div{border:1px solid var(--line);border-radius:12px;padding:10px}.spb-ppki-active-collection span,.spb-ppki-active-collection strong{display:block}.spb-ppki-active-collection span{font-size:.72rem;color:var(--muted)}.spb-ppki-active-collection strong{margin-top:4px;font-size:.94rem}.spb-ppki-progress-line{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.spb-ppki-progress-line span{border-radius:999px;background:#f5efea;padding:5px 9px;font-size:.75rem;font-weight:800;color:var(--muted)}
.spb-ppki-filter{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:10px;margin-bottom:14px}.spb-ppki-level-chip{display:inline-flex;border-radius:999px;padding:4px 7px;background:#fff3cf;color:#7c5000;font-size:.72rem;font-weight:800;margin:2px}
.spb-ppki-status{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:.72rem;font-weight:900;white-space:nowrap;background:#f1eded;color:var(--muted)}.spb-ppki-status.success{background:#e9f7ef;color:var(--success)}.spb-ppki-status.info{background:#e9f1fb;color:#155a9b}.spb-ppki-status.warning{background:#fff3cf;color:#875c00}.spb-ppki-status.danger{background:#fdeaea;color:var(--danger)}.spb-ppki-status.muted{background:#efefef;color:#666}
.spb-ppki-submission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.spb-ppki-submission-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:14px;text-align:left;color:inherit;display:flex;flex-direction:column;gap:4px}.spb-ppki-submission-card:hover{border-color:var(--red-2);transform:translateY(-1px)}.spb-ppki-submission-card>span{font-size:.73rem;font-weight:800;color:var(--red)}.spb-ppki-submission-card>small{color:var(--muted)}.spb-ppki-submission-card>em{margin-top:8px;color:var(--red);font-style:normal;font-weight:800;font-size:.82rem}
.spb-ppki-history-list{display:grid;gap:9px}.spb-ppki-history-list>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:8px 0}.spb-ppki-history-list small{color:var(--muted)}
.spb-ppki-school-collection{margin-bottom:18px}.spb-ppki-school-levels{display:grid;gap:18px}.spb-ppki-school-level .panel-heading{align-items:flex-start}.spb-ppki-locked{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:1px solid #ead9b5;background:#fffaf0;border-radius:14px;padding:12px;margin-bottom:14px}.spb-ppki-locked>strong{grid-column:1/-1;color:#765000}.spb-ppki-locked>div{display:flex;justify-content:space-between;gap:10px;border-radius:10px;background:#fff;padding:8px 10px}.spb-ppki-locked span{font-size:.77rem;color:var(--muted)}.spb-ppki-edit-section{border:1px solid var(--line);border-radius:14px;margin:12px 0;background:#fff}.spb-ppki-edit-section>summary{cursor:pointer;padding:12px 14px;display:flex;justify-content:space-between;gap:10px}.spb-ppki-edit-section>summary span{font-size:.78rem;color:var(--muted)}.spb-ppki-edit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 14px 14px}.spb-ppki-edit-grid label{font-size:.78rem;font-weight:700;display:flex;flex-direction:column;gap:5px}.spb-ppki-school-actions{position:sticky;bottom:12px;display:flex;justify-content:flex-end;gap:10px;background:rgba(255,249,243,.96);border:1px solid var(--line);border-radius:15px;padding:12px;margin-top:18px;box-shadow:var(--shadow);z-index:4}
.spb-ppki-review-dialog .modal-card{max-width:920px}.spb-ppki-review-level{border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:14px}.spb-ppki-review-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}.spb-ppki-review-cats span{background:var(--cream);padding:8px;border-radius:10px;text-align:center;font-size:.78rem}.spb-ppki-review-cats b{display:block;font-size:1rem;margin-top:2px}.text-danger{color:var(--danger)}.text-success{color:var(--success)}.check-line{display:flex!important;align-items:center;gap:8px!important;min-height:42px}
@media(max-width:1100px){.spb-ppki-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.spb-ppki-grid-2{grid-template-columns:1fr}.spb-ppki-submission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.spb-ppki-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.spb-ppki-active-collection{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.spb-ppki-hero{flex-direction:column;align-items:stretch;padding:18px}.spb-ppki-kpis,.spb-ppki-level-grid,.spb-ppki-submission-grid,.spb-ppki-filter{grid-template-columns:1fr}.spb-ppki-locked,.spb-ppki-edit-grid,.spb-ppki-active-collection{grid-template-columns:1fr}.spb-ppki-school-actions{position:static;flex-direction:column}.spb-ppki-history-list>div{grid-template-columns:1fr}.spb-ppki-review-cats{grid-template-columns:repeat(2,1fr)}}

/* V4.9.25 — Pemulihan Khas */
.spb-pmk-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:24px;border-radius:22px;background:linear-gradient(135deg,rgba(139,0,0,.98),rgba(183,28,28,.94));color:#fff;box-shadow:var(--shadow);margin-bottom:18px}
.spb-pmk-hero h2{margin:4px 0 8px;font-size:clamp(1.5rem,3vw,2.2rem)}.spb-pmk-hero p{margin:0;max-width:880px;color:rgba(255,255,255,.88)}.spb-pmk-hero .eyebrow{color:var(--yellow-2)}.spb-pmk-hero .btn{background:#fff;color:var(--red);border-color:#fff}
.spb-pmk-source-note{margin-bottom:18px}.spb-pmk-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.spb-pmk-kpis>div{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}.spb-pmk-kpis span,.spb-pmk-kpis small,.spb-pmk-kpis strong{display:block}.spb-pmk-kpis span{font-size:.76rem;font-weight:800;color:var(--muted)}.spb-pmk-kpis strong{font-size:1.55rem;margin:4px 0;color:var(--red)}.spb-pmk-kpis small{color:var(--muted)}
.spb-pmk-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}.spb-pmk-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.spb-pmk-type-grid>div{border:1px solid var(--line);border-radius:14px;background:var(--cream);padding:13px}.spb-pmk-type-grid span,.spb-pmk-type-grid strong,.spb-pmk-type-grid small{display:block}.spb-pmk-type-grid span{font-size:.75rem;color:var(--muted);font-weight:800}.spb-pmk-type-grid strong{margin:4px 0}.spb-pmk-type-grid small{color:var(--muted)}
.spb-pmk-active{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}.spb-pmk-active>div{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}.spb-pmk-active span,.spb-pmk-active strong{display:block}.spb-pmk-active span{font-size:.72rem;color:var(--muted)}.spb-pmk-active strong{margin-top:4px;font-size:.94rem}.spb-pmk-progress{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.spb-pmk-progress span{border-radius:999px;background:#f5efea;padding:5px 9px;font-size:.75rem;color:var(--muted)}.spb-pmk-progress b{color:var(--red)}
.spb-pmk-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.spb-pmk-filter{display:grid;grid-template-columns:minmax(240px,1fr) auto auto;gap:10px;margin-bottom:14px}
.spb-pmk-status{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:.72rem;font-weight:900;white-space:nowrap;background:#f1eded;color:var(--muted)}.spb-pmk-status.success{background:#e9f7ef;color:var(--success)}.spb-pmk-status.info{background:#e9f1fb;color:#155a9b}.spb-pmk-status.warning{background:#fff3cf;color:#875c00}.spb-pmk-status.danger{background:#fdeaea;color:var(--danger)}.spb-pmk-status.muted{background:#efefef;color:#666}
.spb-pmk-kpi{display:inline-flex;margin-top:4px;border-radius:999px;padding:3px 6px;font-size:.67rem;font-weight:900}.spb-pmk-kpi.success{background:#e9f7ef;color:var(--success)}.spb-pmk-kpi.warning{background:#fff3cf;color:#875c00}.spb-pmk-kpi.muted{background:#efefef;color:#666}
.spb-pmk-submissions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.spb-pmk-submission-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:14px;text-align:left;color:inherit;display:flex;flex-direction:column;gap:4px}.spb-pmk-submission-card:hover{border-color:var(--red-2);transform:translateY(-1px)}.spb-pmk-submission-card>span{font-size:.72rem;font-weight:900;color:var(--red)}.spb-pmk-submission-card>small{color:var(--muted)}.spb-pmk-submission-card>em{margin-top:7px;color:var(--red);font-style:normal;font-weight:800;font-size:.8rem}
.spb-pmk-history{display:grid;gap:9px}.spb-pmk-history>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:8px 0}.spb-pmk-history small{color:var(--muted)}
.spb-pmk-school-panel .panel-heading{align-items:flex-start}.spb-pmk-no-student{margin:12px 0;padding:10px 12px;border:1px solid #ead9b5;background:#fffaf0;border-radius:12px}.spb-pmk-school-table small{display:block;font-weight:500;color:var(--muted);margin-top:2px}.spb-pmk-school-table input{min-width:78px}.spb-pmk-readonly{display:inline-flex;min-width:64px;justify-content:center;font-weight:800}.spb-pmk-school-table tfoot th{background:#fff7e5}.spb-pmk-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.spb-pmk-preview>div{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--cream)}.spb-pmk-preview span,.spb-pmk-preview strong{display:block}.spb-pmk-preview span{font-size:.75rem;color:var(--muted)}.spb-pmk-preview strong{font-size:1.35rem;color:var(--red);margin-top:3px}.spb-pmk-school-actions{position:sticky;bottom:12px;display:flex;justify-content:flex-end;gap:10px;background:rgba(255,249,243,.96);border:1px solid var(--line);border-radius:15px;padding:12px;margin-top:18px;box-shadow:var(--shadow);z-index:4}
.spb-pmk-review-dialog .modal-card{max-width:920px}.spb-pmk-review-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.spb-pmk-review-summary>div{border:1px solid var(--line);border-radius:14px;padding:12px}.spb-pmk-review-summary span,.spb-pmk-review-summary strong,.spb-pmk-review-summary small{display:block}.spb-pmk-review-summary span{font-size:.75rem;color:var(--muted)}.spb-pmk-review-summary strong{font-size:1.35rem;color:var(--red);margin:4px 0}.spb-pmk-review-summary small{color:var(--muted)}
@media(max-width:1200px){.spb-pmk-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.spb-pmk-grid-2{grid-template-columns:1fr}.spb-pmk-type-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.spb-pmk-hero{flex-direction:column;align-items:stretch;padding:18px}.spb-pmk-kpis,.spb-pmk-type-grid,.spb-pmk-active,.spb-pmk-filter,.spb-pmk-form-grid,.spb-pmk-preview,.spb-pmk-review-summary,.spb-pmk-submissions{grid-template-columns:1fr}.spb-pmk-school-actions{position:static;flex-direction:column}.spb-pmk-history>div{grid-template-columns:1fr}.spb-pmk-school-table{min-width:760px}}


/* SULUH PPDKS V4.9.26 — Kehadiran Tingkatan 5 */
.t5-hero{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:24px;border-radius:22px;background:linear-gradient(135deg,rgba(11,59,117,.12),rgba(220,38,38,.08));border:1px solid rgba(11,59,117,.15);margin-bottom:16px}.t5-hero h2{margin:4px 0 8px}.t5-hero p{max-width:760px;margin:0;color:var(--muted)}.t5-hero-actions{display:flex;gap:10px;align-items:end}.t5-hero-actions label{display:grid;gap:5px;font-size:12px;font-weight:700}.t5-hero-actions select{min-width:100px}.t5-metric-note{margin-bottom:16px}.t5-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}.t5-kpi{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:var(--shadow-soft)}.t5-kpi span,.t5-kpi small{display:block;color:var(--muted)}.t5-kpi span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.t5-kpi strong{display:block;font-size:28px;line-height:1.1;margin:8px 0}.t5-kpi-alert{border-color:rgba(220,38,38,.28)}.t5-kpi-good{border-color:rgba(22,163,74,.28)}.t5-grid-2{display:grid;grid-template-columns:1.45fr 1fr;gap:16px}.t5-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}.t5-chart-wrap{min-height:260px;overflow-x:auto}.t5-trend-svg{width:100%;min-width:620px;height:auto}.t5-chart-grid{stroke:rgba(100,116,139,.22);stroke-width:1}.t5-chart-axis{font-size:11px;fill:#64748b}.t5-chart-line{fill:none;stroke:#0b3b75;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.t5-chart-dot{fill:#fff;stroke:#dc2626;stroke-width:3}.t5-chart-value{font-size:11px;font-weight:800;fill:#0f172a}.t5-status-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.t5-status-summary div{padding:16px;border-radius:16px;background:rgba(148,163,184,.08);border:1px solid var(--border);text-align:center}.t5-status-summary b{display:block;font-size:28px}.t5-status-summary span{font-size:12px;color:var(--muted)}.t5-rank-row{width:100%;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--border);padding:11px 4px;cursor:pointer;color:inherit}.t5-rank-row:hover{background:rgba(11,59,117,.05)}.t5-rank-row strong,.t5-rank-row small{display:block}.t5-rank-row small{color:var(--muted);margin-top:3px}.t5-rank-no{width:28px;height:28px;border-radius:9px;background:rgba(11,59,117,.1);display:grid;place-items:center;font-weight:800}.t5-filter-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(140px,.7fr)) auto auto;gap:10px;margin-bottom:14px}.t5-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}.t5-status-kritikal{background:#fee2e2;color:#991b1b}.t5-status-perhatian{background:#ffedd5;color:#9a3412}.t5-status-memulih{background:#dbeafe;color:#1d4ed8}.t5-status-baik{background:#dcfce7;color:#166534}.t5-negative{color:#b91c1c;font-weight:700}.t5-positive{color:#15803d;font-weight:700}.t5-import-panel summary,.t5-settings-panel summary{cursor:pointer;display:flex;flex-direction:column;gap:4px}.t5-import-panel summary span,.t5-settings-panel summary span{font-size:12px;color:var(--muted);font-weight:400}.t5-import-body,.t5-settings-body{padding-top:16px}.t5-import-grid{display:grid;grid-template-columns:1fr 160px auto auto;gap:10px;align-items:end}.t5-process-status{margin:12px 0;padding:11px 13px;border-radius:12px;background:rgba(11,59,117,.06);font-size:13px}.t5-preview-cards{display:flex;flex-wrap:wrap;gap:10px}.t5-preview-cards span{padding:10px 12px;border:1px solid var(--border);border-radius:12px}.t5-preview-cards b{font-size:18px;margin-right:4px}.t5-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}.t5-settings-grid label{display:grid;gap:6px;font-size:12px;font-weight:700}.t5-school-dialog .modal-card{width:min(920px,94vw);max-height:90vh;overflow:auto}.t5-school-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.t5-school-summary div{padding:13px;border:1px solid var(--border);border-radius:14px}.t5-school-summary span,.t5-school-summary strong{display:block}.t5-school-summary span{font-size:11px;color:var(--muted)}.t5-school-summary strong{font-size:20px;margin-top:5px}.t5-month-bars{display:grid;gap:8px}.t5-month-row{display:grid;grid-template-columns:46px 1fr 70px;gap:10px;align-items:center}.t5-month-track{height:10px;background:rgba(148,163,184,.18);border-radius:999px;overflow:hidden}.t5-month-track i{display:block;height:100%;background:linear-gradient(90deg,#0b3b75,#dc2626);border-radius:999px}.t5-intervention-list{display:grid;gap:9px;margin-bottom:18px}.t5-intervention-item{display:flex;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--border);border-radius:14px}.t5-intervention-item p{margin:4px 0}.t5-intervention-item small{color:var(--muted)}.t5-intervention-form{padding-top:14px;border-top:1px solid var(--border)}.table-sub{display:block;color:var(--muted);font-size:11px;margin-top:2px}
@media(max-width:1100px){.t5-kpi-grid{grid-template-columns:repeat(3,1fr)}.t5-grid-3{grid-template-columns:1fr}.t5-filter-grid{grid-template-columns:1fr 1fr 1fr}.t5-import-grid{grid-template-columns:1fr 1fr}.t5-grid-2{grid-template-columns:1fr}}
@media(max-width:680px){.t5-hero{flex-direction:column}.t5-hero-actions{width:100%;justify-content:space-between}.t5-kpi-grid{grid-template-columns:repeat(2,1fr)}.t5-filter-grid,.t5-settings-grid,.t5-import-grid{grid-template-columns:1fr}.t5-school-summary{grid-template-columns:repeat(2,1fr)}.t5-kpi strong{font-size:23px}}


/* ===== V4.9.27 — SPB Percubaan SPM ===== */
.trial-hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:22px;border-radius:22px;background:linear-gradient(135deg,rgba(15,48,89,.97),rgba(164,24,35,.94));color:#fff;margin-bottom:18px;box-shadow:0 18px 40px rgba(15,23,42,.16)}
.trial-hero h2{margin:5px 0 8px;color:#fff}.trial-hero p{margin:0;max-width:780px;color:rgba(255,255,255,.9)}
.trial-hero .eyebrow{color:#ffd7d7}.trial-hero-actions{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.trial-hero-actions label{display:grid;gap:5px;font-size:.78rem;font-weight:800}.trial-hero-actions select{min-width:110px}
.trial-metrics{margin-bottom:18px}.trial-insight-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;margin-bottom:18px}
.trial-smart-summary p{font-size:1.02rem;line-height:1.65;margin:.35rem 0 1rem}
.trial-benchmark-strip{display:grid;grid-template-columns:auto auto auto auto;gap:8px 12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--surface-soft,#f8fafc);margin-bottom:8px}
.trial-benchmark-strip span{font-size:.78rem;color:var(--muted,#64748b);font-weight:700}.trial-benchmark-strip strong{font-size:1.05rem}
.trial-grade-bars{display:grid;gap:7px;margin-top:8px}.trial-grade-row{display:grid;grid-template-columns:36px 1fr 62px;gap:9px;align-items:center;font-size:.82rem}
.trial-grade-row>div{height:10px;border-radius:999px;background:#e8edf3;overflow:hidden}.trial-grade-row i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#174b8a,#a7192d)}
.trial-grade-row b{text-align:right;font-variant-numeric:tabular-nums}
.trial-core-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:14px;margin-bottom:18px}
.trial-core-card,.trial-core-note{padding:16px;border:1px solid var(--border,#e5e7eb);border-radius:18px;background:var(--surface,#fff)}
.trial-core-card span{display:block;font-size:.78rem;font-weight:800;color:var(--muted,#64748b);text-transform:uppercase;letter-spacing:.05em}.trial-core-card strong{display:block;font-size:1.35rem;margin:6px 0}.trial-core-card small{display:block;margin-top:5px;color:var(--muted,#64748b)}
.trial-core-note{background:linear-gradient(135deg,#fff7ed,#fff)}.trial-core-note p{margin:.4rem 0 0;line-height:1.5;font-size:.88rem}
.trial-rank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.trial-rank-grid h3{margin:.35rem 0}.trial-big{display:block;font-size:1.5rem;margin:.2rem 0}
.trial-filter-grid{display:grid;grid-template-columns:minmax(220px,1fr) 220px auto auto;gap:10px;align-items:end;margin:14px 0}
.trial-filter-school{grid-template-columns:minmax(220px,1fr) 190px 220px auto auto}
.trial-table-wrap table{min-width:1050px}.trial-table-wrap td,.trial-table-wrap th{vertical-align:top}
.cell-sub{display:block;margin-top:3px;color:var(--muted,#64748b);font-size:.75rem}
.trial-pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:.72rem;font-weight:900;white-space:nowrap;background:#eef2f7;color:#334155}
.trial-status-prioriti-tinggi,.trial-status-kritikal{background:#fee2e2;color:#991b1b}
.trial-status-perhatian{background:#ffedd5;color:#9a3412}.trial-status-mengatasi-benchmark,.trial-status-terkawal,.trial-status-stabil,.trial-status-aktif{background:#dcfce7;color:#166534}
.trial-status-arkib{background:#e2e8f0;color:#475569}
.trial-gap-bad{color:#b91c1c;font-weight:900}.trial-gap-good{color:#15803d;font-weight:900}
.trial-import-panel summary{cursor:pointer}.trial-import-body{padding-top:14px}.trial-import-grid{display:grid;grid-template-columns:1fr 170px auto auto;gap:10px;align-items:end}.trial-import-grid .field-span-2{grid-column:span 1}
.trial-school-dialog{width:min(1120px,96vw)}.trial-school-dialog .modal-card{max-height:90vh;overflow:auto}
.trial-dialog-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.trial-row-excluded{opacity:.68;background:#f8fafc}.trial-intervention-block{margin-top:18px;border-top:1px solid var(--border,#e5e7eb);padding-top:16px}
.trial-intervention-list{display:grid;gap:9px;margin-bottom:14px}.trial-intervention-item{display:flex;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--border,#e5e7eb);border-radius:14px}
.trial-intervention-item p{margin:.3rem 0}.trial-intervention-item small{color:var(--muted,#64748b)}
@media(max-width:980px){.trial-insight-grid,.trial-core-grid,.trial-rank-grid{grid-template-columns:1fr}.trial-filter-grid,.trial-filter-school,.trial-import-grid{grid-template-columns:1fr 1fr}.trial-dialog-metrics{grid-template-columns:1fr 1fr}.trial-hero{flex-direction:column}}
@media(max-width:620px){.trial-filter-grid,.trial-filter-school,.trial-import-grid,.trial-dialog-metrics{grid-template-columns:1fr}.trial-benchmark-strip{grid-template-columns:1fr auto}.trial-hero{padding:17px}.trial-core-grid{gap:10px}}



/* =========================================================
   V4.9.27 — Percubaan SPM UI Kemas / mudah dibaca
========================================================= */
.trial-hero-clean{margin-bottom:12px}.trial-reading-guide{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 16px}.trial-reading-guide>div{background:#fff;border:1px solid #dbe3ed;border-radius:14px;padding:11px 13px;display:flex;flex-direction:column;gap:2px;box-shadow:0 3px 12px rgba(15,23,42,.04)}.trial-reading-guide b{font-size:.82rem;color:#0f3059}.trial-reading-guide span{font-size:.75rem;color:#64748b;line-height:1.35}
.trial-kpi-readable{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}.trial-kpi-readable article{background:#fff;border:1px solid #dbe3ed;border-radius:17px;padding:15px;box-shadow:0 5px 16px rgba(15,23,42,.05);min-width:0}.trial-kpi-readable article.primary{border-color:#b9cee7;background:linear-gradient(180deg,#f7fbff,#fff)}.trial-kpi-readable article.trial-gap-bad{border-color:#fecaca;background:#fff8f8}.trial-kpi-readable article.trial-gap-good{border-color:#bbf7d0;background:#f8fff9}.trial-kpi-readable span,.trial-kpi-readable small{display:block}.trial-kpi-readable span{font-size:.75rem;font-weight:800;text-transform:uppercase;color:#64748b;letter-spacing:.04em}.trial-kpi-readable strong{display:block;font-size:1.75rem;line-height:1.1;margin:7px 0;color:#0f172a}.trial-kpi-readable small{font-size:.73rem;color:#64748b}
.trial-overview-grid{display:grid;grid-template-columns:1.05fr 1.35fr;gap:16px;margin-bottom:16px}.trial-version-line{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center;margin-top:15px;padding:10px 12px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;font-size:.78rem}.trial-version-line span{color:#64748b;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trial-grade-summary{display:grid;gap:13px}.trial-grade-stack{height:22px;border-radius:999px;overflow:hidden;display:flex;background:#eef2f7;border:1px solid #e2e8f0}.trial-grade-seg{display:block;height:100%;transition:width .25s}.trial-grade-seg.excellent,.trial-grade-dot.excellent{background:#0f766e}.trial-grade-seg.credit,.trial-grade-dot.credit{background:#2563eb}.trial-grade-seg.pass,.trial-grade-dot.pass{background:#f59e0b}.trial-grade-seg.minimum,.trial-grade-dot.minimum{background:#f97316}.trial-grade-seg.fail,.trial-grade-dot.fail{background:#dc2626}.trial-grade-legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.trial-grade-legend>div{display:grid;grid-template-columns:10px 1fr;gap:3px 7px;align-items:center;border:1px solid #e8edf3;border-radius:11px;padding:8px;background:#fff}.trial-grade-dot{width:9px;height:9px;border-radius:50%;grid-row:1/3}.trial-grade-legend strong,.trial-grade-legend small{display:block}.trial-grade-legend strong{font-size:.72rem}.trial-grade-legend small{font-size:.64rem;color:#64748b}.trial-grade-legend b{font-size:.85rem;grid-column:2}.trial-grade-legend em{font-style:normal;font-size:.66rem;color:#64748b;grid-column:2}
.trial-core-readable-grid{grid-template-columns:1fr 1fr 1.15fr}.trial-core-card-readable{padding:15px}.trial-core-title{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:1px solid #eef2f7;padding-bottom:9px;margin-bottom:10px}.trial-core-title span{font-size:.85rem!important}.trial-core-title b{font-size:.9rem;color:#0f3059}.trial-core-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.trial-core-numbers>div{background:#f8fafc;border-radius:11px;padding:9px;text-align:center}.trial-core-numbers strong,.trial-core-numbers span,.trial-core-numbers small{display:block}.trial-core-numbers strong{font-size:1.2rem}.trial-core-numbers span{font-size:.65rem!important;margin:2px 0;color:#64748b!important}.trial-core-numbers small{font-size:.66rem}.trial-footnote{margin-top:8px!important;font-size:.65rem!important}.trial-certificate-note{padding:16px;border-radius:18px;border:1px solid #fed7aa;background:linear-gradient(135deg,#fff7ed,#fff)}.trial-certificate-note h3{font-size:1rem;margin:5px 0}.trial-certificate-note p{font-size:.8rem;color:#6b7280;line-height:1.5;margin:0}
.trial-action-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-bottom:18px}.trial-focus-list{display:grid;gap:8px}.trial-focus-item{display:grid;grid-template-columns:28px 1fr;gap:9px;align-items:start;padding:9px;border-bottom:1px solid #eef2f7}.trial-focus-rank{width:25px;height:25px;border-radius:8px;background:#eaf1f8;color:#0f3059;display:grid;place-items:center;font-size:.72rem;font-weight:900}.trial-focus-main{min-width:0}.trial-focus-head{display:flex;justify-content:space-between;gap:7px;align-items:center}.trial-focus-head strong{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trial-focus-bar{height:7px;background:#eef2f7;border-radius:999px;overflow:hidden;margin:6px 0}.trial-focus-bar i{display:block;height:100%;background:linear-gradient(90deg,#0f4c81,#b21f2d);border-radius:999px}.trial-focus-main small{font-size:.68rem;color:#64748b}.trial-status-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.trial-status-cards>div{text-align:center;border-radius:12px;padding:10px 6px;border:1px solid #e2e8f0}.trial-status-cards b,.trial-status-cards span{display:block}.trial-status-cards b{font-size:1.25rem}.trial-status-cards span{font-size:.62rem;color:#64748b;line-height:1.2}.trial-status-cards .danger{background:#fff5f5;border-color:#fecaca}.trial-status-cards .warning{background:#fffaf3;border-color:#fed7aa}.trial-status-cards .good{background:#f3fff7;border-color:#bbf7d0}.trial-status-cards .neutral{background:#f8fafc}.trial-subheading{margin-top:14px!important}.trial-priority-school-list{display:grid;gap:6px}.trial-priority-school-list button{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;width:100%;border:0;border-top:1px solid #eef2f7;background:transparent;padding:8px 2px;text-align:left;color:inherit;cursor:pointer}.trial-priority-school-list button:hover{background:#f8fafc}.trial-priority-school-list strong,.trial-priority-school-list small{display:block}.trial-priority-school-list strong{font-size:.76rem}.trial-priority-school-list small{font-size:.63rem;color:#64748b}.trial-priority-numbers{text-align:right}.trial-priority-numbers b{font-size:.74rem}
.trial-section-panel{margin-top:18px}.trial-readable-table{border:1px solid #e5eaf0;border-radius:14px;overflow:auto}.trial-readable-table table{border-collapse:separate;border-spacing:0}.trial-readable-table thead th{position:sticky;top:0;z-index:2;background:#f1f5f9;color:#334155;font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid #dbe3ed;white-space:nowrap}.trial-readable-table tbody tr:nth-child(even){background:#fbfcfe}.trial-readable-table tbody tr:hover{background:#f4f8fc}.trial-readable-table td{font-size:.76rem;padding-top:10px;padding-bottom:10px}.trial-table-number{display:flex;align-items:baseline;gap:6px}.trial-table-number strong{font-size:.9rem}.trial-table-number span{font-size:.68rem;color:#64748b}.trial-mini-bar{height:5px;background:#eef2f7;border-radius:999px;overflow:hidden;margin-top:5px;min-width:90px}.trial-mini-bar i{display:block;height:100%;background:#c62828;border-radius:999px}.trial-gp-value{font-size:.95rem;color:#0f3059}.trial-risk-pills{display:flex;gap:4px;flex-wrap:wrap}.trial-risk-chip{display:inline-flex;padding:3px 6px;border-radius:999px;font-size:.61rem;font-weight:800;background:#eef2f7;color:#475569}.trial-risk-chip.tinggi{background:#fee2e2;color:#991b1b}.trial-risk-chip.sederhana{background:#ffedd5;color:#9a3412}.trial-risk-chip.rendah{background:#dcfce7;color:#166534}.trial-school-link{text-align:left}.trial-school-link small{display:block}.trial-risk-meter{min-width:100px;border-radius:10px;padding:6px 8px;border:1px solid #e5e7eb;background:#f8fafc}.trial-risk-meter b,.trial-risk-meter span{display:block}.trial-risk-meter b{font-size:.8rem}.trial-risk-meter span{font-size:.62rem;color:#64748b;margin-top:2px}.trial-risk-meter.danger{background:#fff1f2;border-color:#fecdd3}.trial-risk-meter.warning{background:#fff7ed;border-color:#fed7aa}.trial-risk-meter.watch{background:#fffbeb;border-color:#fde68a}.trial-risk-meter.good{background:#f0fdf4;border-color:#bbf7d0}.trial-neutral{color:#64748b}
.trial-data-note{margin-top:18px}.trial-data-note summary,.trial-history-panel summary,.trial-import-panel summary{cursor:pointer}.trial-data-note p{font-size:.78rem;line-height:1.55}.trial-import-steps{display:flex;align-items:center;gap:10px;margin-bottom:12px}.trial-import-steps>div{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0}.trial-import-steps b{width:22px;height:22px;border-radius:50%;background:#0f3059;color:#fff;display:grid;place-items:center;font-size:.68rem}.trial-import-steps span{font-size:.72rem;font-weight:700}.trial-import-steps i{font-style:normal;color:#94a3b8}.trial-empty-start{text-align:center;padding:28px}.trial-empty-start h3{margin-top:0}
.trial-school-dialog{width:min(1180px,97vw)}.trial-school-readout{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}.trial-school-readout>div{border:1px solid #e2e8f0;border-radius:13px;padding:11px;background:#fff}.trial-school-readout span,.trial-school-readout strong,.trial-school-readout small{display:block}.trial-school-readout span{font-size:.67rem;text-transform:uppercase;color:#64748b;font-weight:800}.trial-school-readout strong{font-size:1.25rem;margin:4px 0}.trial-school-readout small{font-size:.65rem}.trial-dialog-core{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.trial-school-action-box{border:1px solid #fed7aa;background:#fffaf4;border-radius:14px;padding:12px;margin:10px 0 14px}.trial-school-action-box h4{margin:4px 0 8px}.trial-school-action-box>div{display:flex;gap:6px;flex-wrap:wrap}.trial-school-action-box>div>span{background:#fff;border:1px solid #fed7aa;border-radius:999px;padding:5px 8px;font-size:.67rem}.trial-dialog-table-title{margin-top:12px!important}.trial-intervention-form-readable{border-top:1px solid #e2e8f0;padding-top:14px}
@media(max-width:1180px){.trial-kpi-readable{grid-template-columns:repeat(3,1fr)}.trial-overview-grid,.trial-action-grid{grid-template-columns:1fr}.trial-grade-legend{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.trial-reading-guide{grid-template-columns:repeat(2,1fr)}.trial-kpi-readable{grid-template-columns:repeat(2,1fr)}.trial-core-readable-grid{grid-template-columns:1fr}.trial-grade-legend{grid-template-columns:repeat(2,1fr)}.trial-dialog-core{grid-template-columns:1fr}.trial-school-readout{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.trial-reading-guide,.trial-kpi-readable{grid-template-columns:1fr}.trial-grade-legend{grid-template-columns:1fr}.trial-import-steps{align-items:stretch;flex-direction:column}.trial-import-steps i{display:none}.trial-status-cards{grid-template-columns:repeat(2,1fr)}.trial-school-readout{grid-template-columns:1fr}.trial-readable-table table,.trial-readable-table thead,.trial-readable-table tbody,.trial-readable-table tr,.trial-readable-table th,.trial-readable-table td{display:block}.trial-readable-table thead{display:none}.trial-readable-table tr{border-bottom:1px solid #dbe3ed;padding:8px}.trial-readable-table td{display:grid;grid-template-columns:110px 1fr;gap:10px;border:0!important;padding:6px!important}.trial-readable-table td::before{content:attr(data-label);font-size:.65rem;font-weight:800;color:#64748b;text-transform:uppercase}.trial-readable-table td:empty{display:none}.trial-priority-school-list button{grid-template-columns:1fr auto}.trial-priority-school-list .trial-pill{grid-column:1/3;justify-self:start}}


/* V4.9.28 — Perbandingan Percubaan SPM 2025/2026 */
.trial-compare-panel{margin:16px 0 18px;border:1px solid rgba(11,59,117,.18);background:linear-gradient(135deg,rgba(11,59,117,.05),rgba(220,38,38,.03))}.trial-compare-kpis{display:grid;grid-template-columns:1fr auto 1fr 1fr 1.25fr;gap:12px;align-items:stretch}.trial-compare-kpis article{padding:15px;border:1px solid var(--border);border-radius:16px;background:var(--panel)}.trial-compare-kpis span,.trial-compare-kpis small{display:block;color:var(--muted)}.trial-compare-kpis strong{display:block;font-size:26px;margin:6px 0}.trial-compare-arrow{display:grid;place-items:center;font-size:28px;font-weight:900;color:#64748b}.trial-change-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}.trial-change-grid article>strong{font-size:26px;display:block;margin:8px 0}.trial-change-good{border-left:5px solid #16a34a}.trial-change-bad{border-left:5px solid #dc2626}.trial-kpi-current{grid-template-columns:repeat(4,minmax(0,1fr))}.trial-status-meningkat{background:#dcfce7;color:#166534}.trial-status-merosot{background:#fee2e2;color:#991b1b}.trial-status-stabil,.trial-status-terkawal{background:#e0f2fe;color:#075985}.trial-status-tiada-data{background:#f1f5f9;color:#475569}.trial-compare-empty{margin:16px 0}.trial-readable-table th{white-space:nowrap}
@media(max-width:1100px){.trial-compare-kpis{grid-template-columns:1fr 40px 1fr}.trial-compare-kpis article:nth-of-type(3),.trial-compare-kpis article:nth-of-type(4){grid-column:auto}.trial-kpi-current{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.trial-compare-kpis{grid-template-columns:1fr}.trial-compare-arrow{transform:rotate(90deg)}.trial-change-grid{grid-template-columns:1fr}.trial-kpi-current{grid-template-columns:1fr}}