/* =========================================================
   SMART POSYANDU — APPLICATION SHELL
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: Arial, sans-serif;
  background: #f5f7fa;
  color: #1f2937;
}

button {
  font-family: inherit;
}


/* =========================================================
   APP
   ========================================================= */

.app {
  display: flex;
  min-height: 100vh;
}


/* =========================================================
   SIDEBAR
   SMART MCU STYLE
   ========================================================= */

.sidebar {
  width: 250px;
  height: 100vh;

  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;

  display: flex;
  flex-direction: column;

  padding: 18px 14px;

  background: #ffffff;

  border-right: 1px solid #e5e7eb;

  z-index: 1000;

  overflow-y: auto;

  transition:
    width .25s ease,
    transform .25s ease;
}


/* =========================================================
   BRAND
   ========================================================= */

.sidebar-brand {
  display: flex;
  align-items: center;

  gap: 12px;

  min-height: 72px;

  padding: 4px 10px 18px;

  margin-bottom: 20px;

  border-bottom: 1px solid #eef1f3;
}

.sidebar-brand-logo {
  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-logo {
  width: 46px;
  height: 46px;

  display: block;

  object-fit: contain;
}

.sidebar-brand-text {
  min-width: 0;
}

.sidebar-brand h1 {
  margin: 0;

  color: #2e7d32;

  font-size: 20px;
  line-height: 1.15;

  font-weight: 700;

  letter-spacing: -.3px;
}

.sidebar-brand span {
  display: block;

  margin-top: 5px;

  color: #64748b;

  font-size: 11px;
  line-height: 1.3;

  white-space: nowrap;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.sidebar-nav {
  display: flex;
  flex-direction: column;

  gap: 6px;

  flex: 1;

  min-height: 0;
}

.nav-item {
  width: 100%;
  min-height: 46px;

  display: flex;
  align-items: center;

  gap: 13px;

  padding: 10px 14px;

  border: 0;
  border-radius: 11px;

  background: transparent;

  color: #1f2937;

  font-size: 14px;
  font-weight: 500;

  text-align: left;

  cursor: pointer;

  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}

.nav-item:hover {
  background: #f4f7f4;

  color: #1f2937;
}

.nav-item.active {
  background: #2e7d32;

  color: #ffffff;

  font-weight: 700;
}

.nav-item.active:hover {
  background: #2e7d32;

  color: #ffffff;
}


/* =========================================================
   NAV ICON
   ========================================================= */

.nav-icon {
  width: 22px;
  height: 22px;

  flex: 0 0 22px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon svg {
  width: 19px;
  height: 19px;

  display: block;

  stroke: currentColor;

  fill: none;

  transition:
    stroke .18s ease,
    transform .18s ease;
}

.nav-item:hover .nav-icon svg {
  transform: scale(1.04);
}

.nav-label {
  min-width: 0;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}


/* =========================================================
   SIDEBAR FOOTER
   ========================================================= */

.sidebar-footer {
  margin-top: auto;

  padding-top: 14px;

  border-top: 1px solid #eef1f3;
}

.nav-item-logout {
  color: #64748b;
}

.nav-item-logout:hover {
  background: #f8fafc;

  color: #374151;
}


/* =========================================================
   MAIN
   ========================================================= */

.main {
  width: calc(100% - 250px);

  min-height: 100vh;

  margin-left: 250px;

  transition:
    width .25s ease,
    margin-left .25s ease;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
  min-height: 72px;

  display: flex;
  align-items: center;

  background: #ffffff;

  border-bottom: 1px solid #e5e7eb;

  padding: 14px 28px;
}

.topbar h2 {
  margin: 0;

  color: #1f2937;

  font-size: 22px;
  line-height: 1.2;

  font-weight: 700;
}

.topbar p {
  margin: 5px 0 0;

  color: #64748b;

  font-size: 12px;
}


/* =========================================================
   PAGE CONTENT
   ========================================================= */

#page-content {
  padding: 28px;
}

.loading {
  background: #ffffff;

  padding: 30px;

  border-radius: 12px;

  color: #64748b;
}


/* =========================================================
   SIDEBAR TOGGLE
   ========================================================= */

.sidebar-toggle {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-right: 12px;

  border: 1px solid #dfe4e1;
  border-radius: 9px;

  background: #ffffff;

  color: #374151;

  font-size: 18px;
  line-height: 1;

  cursor: pointer;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.sidebar-toggle:hover {
  background: #f4f7f4;

  border-color: #b9c8bc;

  color: #2e7d32;
}


/* =========================================================
   DESKTOP — SIDEBAR HIDDEN / COLLAPSED
   ========================================================= */

@media (min-width: 769px) {

  body.sidebar-collapsed .sidebar {
    width: 76px;
  }

  body.sidebar-collapsed .main {
    width: calc(100% - 76px);

    margin-left: 76px;
  }

  body.sidebar-collapsed .sidebar-brand {
    justify-content: center;

    padding-left: 0;
    padding-right: 0;
  }

  body.sidebar-collapsed .sidebar-brand-text {
    display: none;
  }

  body.sidebar-collapsed .sidebar-brand-logo {
    margin: 0 auto;
  }

  body.sidebar-collapsed .nav-item {
    justify-content: center;

    padding-left: 8px;
    padding-right: 8px;
  }

  body.sidebar-collapsed .nav-label {
    display: none;
  }

  body.sidebar-collapsed .nav-icon {
    margin: 0;
  }

  body.sidebar-collapsed .sidebar-footer .nav-item {
    justify-content: center;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .sidebar {
    width: 250px;

    transform: translateX(-100%);

    box-shadow:
      5px 0 20px rgba(15, 23, 42, .10);
  }

  .main {
    width: 100%;

    margin-left: 0;
  }

  .topbar {
    min-height: 64px;

    padding: 12px 18px;
  }

  #page-content {
    padding: 20px 18px 28px;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open::before {
    content: "";

    position: fixed;

    inset: 0;

    background: rgba(15, 23, 42, .35);

    z-index: 999;
  }

  body.sidebar-open .sidebar {
    z-index: 1000;
  }

}

/* DASHBOARD */

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
}

.page-header p {
  margin: 6px 0 0;
  color: #6b7280;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.stat-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 22px;
}

.stat-label {
  display: block;
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 10px;
}

.stat-card strong {
  display: block;
  font-size: 30px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}

.dashboard-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 22px;
  min-height: 220px;
}

.card-header {
  margin-bottom: 20px;
}

.card-header h3 {
  margin: 0;
  font-size: 17px;
}

@media (max-width: 1000px) {

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 600px) {

  .stats-grid {
    grid-template-columns: 1fr;
  }

}

/* DASHBOARD DATA */

.status-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: #f8fafc;
  border-radius: 8px;
}

.status-row span {
  color: #4b5563;
}

.status-row strong {
  font-size: 20px;
}


/* KUNJUNGAN */

#chartKunjungan {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chart-row {
  display: grid;
  grid-template-columns: 70px 1fr 30px;
  align-items: center;
  gap: 10px;
}

.chart-date {
  font-size: 12px;
  color: #6b7280;
}

.chart-bar-container {
  height: 12px;
  background: #f1f5f9;
  border-radius: 20px;
  overflow: hidden;
}

.chart-bar {
  height: 100%;
  background: #4f46e5;
  border-radius: 20px;
  min-width: 4px;
}

.chart-value {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
}

/* DATA PAGE */

.data-page {
  width: 100%;
}

.data-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.data-toolbar input,
.data-toolbar select {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  font-size: 14px;
}

.data-toolbar input {
  width: 320px;
}

.data-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

thead {
  background: #f8fafc;
}

th,
td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
}

th {
  color: #6b7280;
  font-weight: 600;
}

td {
  color: #374151;
}

tbody tr:hover {
  background: #f9fafb;
}

.btn-primary {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: #4f46e5;
  color: #ffffff;
  cursor: pointer;
}

.btn-detail {
  padding: 7px 11px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  background: #ffffff;
  cursor: pointer;
}

.btn-detail:hover {
  background: #f3f4f6;
}

.status-badge {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 20px;
  background: #ecfdf5;
  font-size: 12px;
  font-weight: 600;
}

.table-loading,
.table-empty,
.table-error {
  text-align: center;
  padding: 30px;
  color: #6b7280;
}

/* DETAIL BALITA */

.btn-back {
  border: none;
  background: transparent;
  padding: 0;
  margin-bottom: 12px;
  color: #4f46e5;
  cursor: pointer;
  font-size: 14px;
}

.profile-card,
.detail-section {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.profile-header h3 {
  margin: 8px 0 0;
  font-size: 24px;
}

.profile-id {
  color: #6b7280;
  font-size: 13px;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.profile-item span,
.profile-address span {
  display: block;
  color: #6b7280;
  font-size: 13px;
  margin-bottom: 6px;
}

.profile-item strong,
.profile-address strong {
  font-size: 14px;
}

.profile-address {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.detail-section-header h3 {
  margin: 0;
}

.history-tabs {
  display: flex;
  gap: 8px;
  margin: 20px 0;
  border-bottom: 1px solid #e5e7eb;
}

.history-tab {
  border: none;
  background: transparent;
  padding: 10px 14px;
  cursor: pointer;
  color: #6b7280;
}

.history-tab.active {
  color: #4f46e5;
  font-weight: 600;
  border-bottom: 2px solid #4f46e5;
}

.history-content {
  padding: 20px 0;
  color: #6b7280;
}

@media (max-width: 1000px) {

  .profile-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 600px) {

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-header {
    flex-direction: column;
    gap: 15px;
  }

}

/* HISTORY */

.history-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

.history-table th,
.history-table td {
  padding: 11px 13px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  font-size: 13px;
  vertical-align: top;
}

.history-table th {
  background: #f8fafc;
  color: #6b7280;
  font-weight: 600;
}

.history-table tbody tr:hover {
  background: #f9fafb;
}

.history-empty {
  padding: 30px;
  text-align: center;
  color: #6b7280;
}

.perkembangan-result {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.status-sesuai {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-melebihi {
  background: #e3f2fd;
  color: #1565c0;
}

.status-terlambat {
  background: #ffebee;
  color: #c62828;
}

.status-netral {
  background: #f5f5f5;
  color: #616161;
}

/* =========================================================
   GRAFIK PERTUMBUHAN - KMS STYLE
========================================================= */

.kms-chart-card {
  margin-top: 22px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe5e1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}


/* =========================
   HEADER
========================= */

.kms-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 18px 20px;

  border-bottom: 1px solid #e8ece9;
  background: #fafcfb;
}


.kms-chart-header h4 {
  margin: 0;

  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}


.kms-chart-header span {
  display: block;

  margin-top: 4px;

  font-size: 12px;
  color: #6b746e;
}


.kms-gender {
  flex-shrink: 0;

  padding: 6px 10px;

  border-radius: 999px;

  background: #eef3ef;

  font-size: 12px !important;
  font-weight: 600;

  color: #4d5b51 !important;
}


/* =========================
   AREA GRAFIK
========================= */

.kms-chart-wrapper {
  width: 100%;

  padding: 18px 18px 8px;

  overflow-x: auto;
  overflow-y: hidden;
}


.kms-chart {
  display: block;

  width: 100%;
  min-width: 760px;
  height: auto;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


/* =========================
   GRID
========================= */

.kms-grid {
  stroke: #cfd7d1;

  stroke-width: 1;

  opacity: 0.55;
}


.kms-axis-text {
  fill: #657068;

  font-size: 12px;

  font-weight: 400;
}


.kms-axis-title {
  fill: #4f5b54;

  font-size: 12px;

  font-weight: 600;
}


/* =========================
   KURVA REFERENSI
========================= */

.kms-line {
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.kms-sd-minus3 {
  stroke: #c6ceca;

  stroke-width: 2;

  stroke-dasharray: 6 5;
}


.kms-sd-minus2 {
  stroke: #aeb9b2;

  stroke-width: 2.5;
}


.kms-sd-minus1 {
  stroke: #c2cac5;

  stroke-width: 1.8;
}


.kms-median {
  stroke: #7d8982;

  stroke-width: 3;
}


.kms-sd-plus1 {
  stroke: #c2cac5;

  stroke-width: 1.8;
}


.kms-sd-plus2 {
  stroke: #aeb9b2;

  stroke-width: 2.5;
}


.kms-sd-plus3 {
  stroke: #c6ceca;

  stroke-width: 2;

  stroke-dasharray: 6 5;
}


/* =========================
   GARIS PERTUMBUHAN ANAK
========================= */

.kms-child-line {
  fill: none;

  stroke: #26352d;

  stroke-width: 3.5;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.kms-child-point {
  fill: #ffffff;

  stroke: #26352d;

  stroke-width: 3;

  cursor: pointer;
}


.kms-child-point:hover {
  r: 8;
}


/* =========================
   LABEL SD
========================= */

.kms-curve-label {
  fill: #657068;

  font-size: 11px;

  font-weight: 600;
}


/* =========================
   KETERANGAN
========================= */

.kms-chart-note {
  padding: 12px 20px 16px;

  border-top: 1px solid #edf0ee;

  font-size: 12px;

  line-height: 1.5;

  color: #727b75;

  background: #fafcfb;
}


/* =========================
   MOBILE
========================= */

@media (
  max-width: 768px
) {

  .kms-chart-header {
    align-items: flex-start;

    padding: 15px;
  }


  .kms-chart-header h4 {
    font-size: 15px;
  }


  .kms-chart-wrapper {
    padding: 12px 8px 6px;
  }


  .kms-chart-note {
    padding: 10px 15px 14px;
  }

}

/* =========================================================
   REKAM POSYANDU — VISUAL DESIGN
========================================================= */

.rekam-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.rekam-page-header h2 {
  margin: 0;
  font-size: 24px;
  color: #263238;
}

.rekam-page-header p {
  margin: 5px 0 0;
  font-size: 14px;
  color: #69746d;
}


/* =========================================================
   BUTTON
========================================================= */

.rekam-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rekam-header-actions .btn-secondary,
.rekam-balita-actions .btn-secondary {
  border: 1px solid #d7ddd9;
  border-radius: 8px;
  background: #ffffff;
  color: #46514a;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
}

.rekam-header-actions .btn-secondary:hover,
.rekam-balita-actions .btn-secondary:hover {
  background: #f3f6f4;
  border-color: #bfc8c2;
}


/* =========================================================
   PROFILE BALITA
========================================================= */

.rekam-balita-header {
  position: relative;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;

  padding: 22px 24px;

  margin-bottom: 18px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f4f8ff 100%
    );

  border: 1px solid #dfe6e2;
  border-radius: 16px;

  box-shadow:
    0 3px 12px rgba(31, 45, 38, .045);

  overflow: hidden;
}

.rekam-balita-header::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 5px;

  background:
    linear-gradient(
      180deg,
      #4f46e5,
      #7c6ff2
    );
}

.rekam-balita-profile {
  padding-left: 5px;
}

.rekam-balita-profile .profile-id {
  display: inline-flex;

  padding: 4px 8px;

  border-radius: 6px;

  background: #eef0ff;

  color: #4b46a8;

  font-size: 11px;
  font-weight: 700;
}

.rekam-balita-profile h3 {
  margin: 7px 0 4px;

  font-size: 22px;
  line-height: 1.2;

  color: #27313a;
}

.rekam-balita-profile p {
  margin: 0;

  font-size: 13px;

  color: #59645d;
}

.profile-birth {
  margin-top: 7px !important;

  font-size: 12px !important;

  color: #7b847e !important;
}

.rekam-balita-actions {
  flex-shrink: 0;
}


/* =========================================================
   SECTION DASAR
========================================================= */

.rekam-section {
  position: relative;

  margin-bottom: 18px;

  padding: 20px 22px;

  background: #ffffff;

  border: 1px solid #e0e6e2;

  border-radius: 16px;

  box-shadow:
    0 3px 12px rgba(31, 45, 38, .035);

  overflow: hidden;
}

.rekam-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 15px;

  margin-bottom: 17px;
}

.rekam-section-header h3 {
  margin: 0;

  font-size: 18px;

  color: #29333b;
}

.section-subtitle {
  display: block;

  margin-top: 4px;

  font-size: 12px;

  color: #7a837d;
}


/* =========================================================
   KUNJUNGAN
========================================================= */

.rekam-section:has(
  .rekam-section-header h3:first-child
) {
  --section-color: #4f7cac;
}


/*
   Jika browser mendukung :has(), warna kiri
   diberikan berdasarkan section berikut.
*/

.rekam-section:nth-of-type(2)::before {
  background: #4f8ac9;
}


/* =========================================================
   PEMERIKSAAN TERAKHIR
========================================================= */

.rekam-section:has(
  #grafikPertumbuhan
) {
  border-color: #d9e6d9;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdfb 100%
    );
}

.rekam-section:has(
  #grafikPertumbuhan
)::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 5px;

  background:
    linear-gradient(
      180deg,
      #42a66a,
      #79c58d
    );
}

.rekam-section:has(
  #grafikPertumbuhan
)
.rekam-section-header h3 {
  color: #27683e;
}


/* =========================================================
   PERKEMBANGAN
========================================================= */

.rekam-section:has(
  .perkembangan-grid
) {
  border-color: #e2daf4;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fcfaff 100%
    );
}

.rekam-section:has(
  .perkembangan-grid
)::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 5px;

  background:
    linear-gradient(
      180deg,
      #8269d6,
      #aa96e8
    );
}

.rekam-section:has(
  .perkembangan-grid
)
.rekam-section-header h3 {
  color: #5d48a4;
}


/* =========================================================
   IMUNISASI
   WARNA MENGIKUTI JENIS KELAMIN BALITA
========================================================= */


/* =========================================================
   LAKI-LAKI
========================================================= */

.imunisasi-section {

  border-color: #bfdbfe;

  background:

    linear-gradient(

      180deg,

      #ffffff 0%,

      #f8fbff 100%

    );

}


/* garis kiri */

.imunisasi-section::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  width: 5px;

  background:

    linear-gradient(

      180deg,

      #4285c5,

      #72a9d8

    );

}


/* judul */

.imunisasi-section
.rekam-section-header h3 {

  color: #356b9c;

}


/* =========================================================
   PEREMPUAN
========================================================= */

.imunisasi-section.perempuan {

  border-color: #f9b6d3;

  background:

    linear-gradient(

      180deg,

      #ffffff 0%,

      #fffafd 100%

    );

}


/* garis kiri */

.imunisasi-section.perempuan::before {

  background:

    linear-gradient(

      180deg,

      #ec4899,

      #f472b6

    );

}


/* judul */

.imunisasi-section.perempuan
.rekam-section-header h3 {

  color: #c0266b;

}


/* =========================================================
   HEADER ICON
========================================================= */

.imunisasi-section
.rekam-section-header .section-icon {

  background: #eaf5ff;

  border-color: #cfe5ff;

}


.imunisasi-section.perempuan
.rekam-section-header .section-icon {

  background: #ffe4ef;

  border-color: #ffd0e1;

}


/* =========================================================
   GARIS PEMISAH HEADER
========================================================= */

.imunisasi-section
.rekam-section-header {

  border-bottom-color: #dbe7f2;

}


.imunisasi-section.perempuan
.rekam-section-header {

  border-bottom-color: #f9d5e4;

}


/* =========================================================
   RIWAYAT IMUNISASI
========================================================= */

.imunisasi-section
.imunisasi-riwayat-header {

  background: #f8fbff;

  border-color: #d6e5f2;

}


.imunisasi-section.perempuan
.imunisasi-riwayat-header {

  background: #fff4f8;

  border-color: #f9c9dc;

}


/* =========================================================
   JUMLAH PENCATATAN
========================================================= */

.imunisasi-section
.imunisasi-riwayat-header small {

  color: #356b9c;

}


.imunisasi-section.perempuan
.imunisasi-riwayat-header small {

  color: #c0266b;

}


/* =========================================================
   JENIS IMUNISASI
========================================================= */

.imunisasi-section
.imunisasi-jenis strong {

  color: #356b9c;

}


.imunisasi-section.perempuan
.imunisasi-jenis strong {

  color: #c0266b;

}


/* =========================================================
   BARIS TERBARU
========================================================= */

.imunisasi-section
.imunisasi-riwayat-table tbody tr:first-child {

  background: #f5f9ff;

}


.imunisasi-section.perempuan
.imunisasi-riwayat-table tbody tr:first-child {

  background: #fff7fa;

}


/* =========================================================
   TANGGAL TERBARU
========================================================= */

.imunisasi-section
.imunisasi-riwayat-table tbody tr:first-child
.imunisasi-tanggal {

  color: #356b9c;

}


.imunisasi-section.perempuan
.imunisasi-riwayat-table tbody tr:first-child
.imunisasi-tanggal {

  color: #c0266b;

}


/* =========================================================
   HOVER
========================================================= */

.imunisasi-section
.imunisasi-riwayat-table tbody tr:hover {

  background: #f8fbff;

}


.imunisasi-section.perempuan
.imunisasi-riwayat-table tbody tr:hover {

  background: #fff8fb;

}


/* =========================================================
   IMUNISASI — TEMA REKAM POSYANDU
========================================================= */

.rekam-posyandu-layout
.imunisasi-section {

  position: relative;

  width: 100%;

  box-sizing: border-box;

  background: #ffffff;

  border: 1px solid
    var(--imunisasi-border);

  border-left:
    4px solid
    var(--imunisasi-primary);

  border-radius: 14px;

  overflow: hidden;

}


/* =========================================================
   HEADER
========================================================= */

.rekam-posyandu-layout
.imunisasi-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 16px 20px;

  background: #ffffff;

  border-bottom:
    1px solid
    var(--imunisasi-border);

}


/* =========================================================
   JUDUL + ICON
========================================================= */

.rekam-posyandu-layout
.imunisasi-header
.section-title-with-icon {

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

}


/* =========================================================
   ICON
========================================================= */

.rekam-posyandu-layout
.imunisasi-icon {

  width: 34px;

  height: 34px;

  min-width: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  background:
    var(--imunisasi-icon);

  border:
    1px solid
    var(--imunisasi-border);

  border-radius: 9px;

  color:
    var(--imunisasi-primary);

  font-size: 18px;

  line-height: 1;

}


/* =========================================================
   JUDUL
========================================================= */

.rekam-posyandu-layout
.imunisasi-header h3 {

  margin: 0 0 3px;

  color:
    var(--imunisasi-primary-dark);

  font-size: 17px;

  line-height: 1.25;

  font-weight: 700;

}


/* =========================================================
   SUBTITLE
========================================================= */

.rekam-posyandu-layout
.imunisasi-header
.section-subtitle {

  display: block;

  margin: 0;

  color: #64748B;

  font-size: 10px;

  line-height: 1.4;

}


/* =========================================================
   CONTENT
========================================================= */

.rekam-posyandu-layout
.imunisasi-content {

  padding: 10px 20px 4px;

  box-sizing: border-box;

}


/* =========================================================
   RIWAYAT
========================================================= */

.rekam-posyandu-layout
.imunisasi-history {

  width: 100%;

}


/* =========================================================
   1 BARIS = 1 DATA
========================================================= */

.rekam-posyandu-layout
.imunisasi-history-row {

  position: relative;

  display: grid;

  /*
     1. Timeline
     2. Tanggal
     3. Jenis Imunisasi
     4. Dosis
     5. Tempat Pemberian
  */

  grid-template-columns:

    14px

    175px

    minmax(170px, 1fr)

    80px

    minmax(150px, 1fr);

  align-items: center;

  column-gap: 8px;

  min-height: 52px;

  padding: 7px 0;

  box-sizing: border-box;

  border-bottom:

    1px solid #E8EDF3;

}


.rekam-posyandu-layout
.imunisasi-history-row:last-child {

  border-bottom: none;

}


/* =========================================================
   TIMELINE
========================================================= */

.rekam-posyandu-layout
.imunisasi-timeline {

  position: relative;

  width: 14px;

  height: 100%;

  min-height: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

}


/* =========================================================
   GARIS TIMELINE
========================================================= */

.rekam-posyandu-layout
.imunisasi-history-row:not(:last-child)
.imunisasi-timeline::after {

  content: "";

  position: absolute;

  top: calc(50% + 5px);

  bottom: -8px;

  left: 50%;

  width: 1px;

  background: #D9E1EA;

}


/* =========================================================
   TITIK TIMELINE
========================================================= */

.rekam-posyandu-layout
.imunisasi-dot {

  position: relative;

  z-index: 2;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #CBD5E1;

  box-shadow:
    0 0 0 1px #CBD5E1;

}


/* =========================================================
   TITIK DATA TERBARU
========================================================= */

.rekam-posyandu-layout
.imunisasi-history-row.is-terbaru
.imunisasi-dot {

  background:
    var(--imunisasi-primary);

  box-shadow:
    0 0 0 1px
    var(--imunisasi-primary);

}


/* =========================================================
   TANGGAL
========================================================= */

.rekam-posyandu-layout
.imunisasi-date {

  min-width: 0;

  display: flex;

  align-items: center;

  gap: 6px;

  flex-wrap: wrap;

}


.rekam-posyandu-layout
.imunisasi-date strong {

  color: #334155;

  font-size: 10px;

  line-height: 1.35;

  font-weight: 700;

}


.rekam-posyandu-layout
.imunisasi-history-row.is-terbaru
.imunisasi-date strong {

  color: var(--imunisasi-primary-dark);

}


/* =========================================================
   LABEL TERBARU
========================================================= */

.rekam-posyandu-layout
.imunisasi-terbaru {

  display: inline-flex;

  align-items: center;

  padding: 2px 6px;

  border-radius: 999px;

  background: var(--imunisasi-icon);

  color: var(--imunisasi-primary-dark);

  font-size: 7px;

  line-height: 1.2;

  font-weight: 800;

}


/* =========================================================
   JENIS IMUNISASI
========================================================= */

.rekam-posyandu-layout
.imunisasi-jenis {

  min-width: 0;

}


.rekam-posyandu-layout
.imunisasi-jenis strong {

  display: block;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  color: #1E293B;

  font-size: 10px;

  line-height: 1.35;

  font-weight: 800;

}


/* =========================================================
   DOSIS
========================================================= */

.rekam-posyandu-layout
.imunisasi-dosis {

  min-width: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

}


.rekam-posyandu-layout
.imunisasi-dosis span {

  display: inline;

  margin-right: 4px;

  margin-bottom: 0;

  color: #94A3B8;

  font-size: 8px;

  line-height: 1.2;

  text-align: center;

}


.rekam-posyandu-layout
.imunisasi-dosis strong {

  display: inline;

  color: #334155;

  font-size: 10px;

  line-height: 1.3;

  font-weight: 700;

  text-align: center;

}


/* =========================================================
   TEMPAT PEMBERIAN
========================================================= */

.rekam-posyandu-layout
.imunisasi-tempat {

  min-width: 0;

  overflow: hidden;

}


.rekam-posyandu-layout
.imunisasi-tempat span {

  display: block;

  margin-bottom: 2px;

  color: #94A3B8;

  font-size: 8px;

  line-height: 1.2;

}


.rekam-posyandu-layout
.imunisasi-tempat strong {

  display: block;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  color: #334155;

  font-size: 10px;

  line-height: 1.3;

  font-weight: 700;

}


/* =========================================================
   KETERANGAN
========================================================= */

.rekam-posyandu-layout
.imunisasi-keterangan {

  grid-column: 2 / -1;

  margin-top: -2px;

  padding-top: 5px;

  border-top: 1px dashed #E2E8F0;

  color: #64748B;

  font-size: 8px;

  line-height: 1.35;

}


/* =========================================================
   JUMLAH DATA
========================================================= */

.rekam-posyandu-layout
.imunisasi-total {

  padding: 11px 0 7px;

  text-align: center;

  color: #64748B;

  font-size: 9px;

  line-height: 1.3;

  font-weight: 600;

}


/* =========================================================
   HEADER RIWAYAT IMUNISASI
========================================================= */

.rekam-posyandu-layout
.imunisasi-history-header {

  display: grid;

  grid-template-columns:
    14px
    190px
    220px
    90px
    minmax(150px, 1fr);

  align-items: center;

  column-gap: 8px;

  min-height: 30px;

  padding: 4px 0 6px;

  box-sizing: border-box;

  color: #94A3B8;

  font-size: 8px;

  line-height: 1.3;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.02em;

  border-bottom:
    1px solid #E2E8F0;

}


/* =========================================================
   SEMUA KOLOM HEADER
========================================================= */

.rekam-posyandu-layout
.imunisasi-history-header > div {

  min-width: 0;

}


/* =========================================================
   TANGGAL
========================================================= */

.rekam-posyandu-layout
.imunisasi-history-header > div:nth-child(2) {

  text-align: left;

}


/* =========================================================
   JENIS IMUNISASI
========================================================= */

.rekam-posyandu-layout
.imunisasi-history-header > div:nth-child(3) {

  text-align: left;

}


/* =========================================================
   DOSIS / KE-
========================================================= */

.rekam-posyandu-layout
.imunisasi-history-header > div:nth-child(4) {

  text-align: center;

}


/* =========================================================
   TEMPAT PEMBERIAN
========================================================= */

.rekam-posyandu-layout
.imunisasi-history-header > div:nth-child(5) {

  text-align: left;

}


/* =========================================================
   GARIS PEMISAH HEADER
========================================================= */

.rekam-posyandu-layout
.imunisasi-history-header {

  border-bottom:
    1px solid #E2E8F0;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .rekam-posyandu-layout
  .imunisasi-history-row {

    grid-template-columns:
      14px
      minmax(125px, 1fr)
      minmax(120px, 1fr)
      85px
      110px;

  }

}


@media (max-width: 700px) {

  .rekam-posyandu-layout
  .imunisasi-history-row {

    grid-template-columns:
      14px
      minmax(120px, 1fr)
      minmax(120px, 1fr);

    row-gap: 4px;

  }


  .rekam-posyandu-layout
  .imunisasi-dosis,

  .rekam-posyandu-layout
  .imunisasi-tempat {

    display: none;

  }

}


@media (max-width: 480px) {

  .rekam-posyandu-layout
  .imunisasi-header {

    align-items: flex-start;

    flex-direction: column;

  }


  .rekam-posyandu-layout
  .imunisasi-header
  .btn-secondary {

    width: 100%;

  }

}


/* =========================================================
   VITAMIN & PMT
========================================================= */

.vitamin-pmt-section {

  position: relative;

  border-color: var(--tema-border);

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      var(--tema-bg) 100%
    );

}


/* =========================================================
   GARIS AKSEN SISI KIRI
========================================================= */

.vitamin-pmt-section::before {

  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  background:
    linear-gradient(
      180deg,
      var(--tema-primary),
      var(--tema-secondary)
    );

  border-radius:
    14px 0 0 14px;

}


/* =========================================================
   HEADER CARD
========================================================= */

.vitamin-pmt-section
.rekam-section-header {

  position: relative;

  display: flex;

  align-items: center;

  min-height: 58px;

  gap: 10px;

}


/* =========================================================
   ICON HEADER
========================================================= */

.vitamin-pmt-section
.rekam-section-header
.rekam-section-icon {

  width: 34px;

  height: 34px;

  flex: 0 0 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 9px;

  background: var(--tema-soft-strong);

  border: 1px solid var(--tema-border);

  font-size: 17px;

  line-height: 1;

}


/* =========================================================
   JUDUL
========================================================= */

.vitamin-pmt-section
.rekam-section-header h3 {

  margin: 0;

  color: var(--tema-primary-dark);

  font-size: 16px;

  line-height: 1.2;

  font-weight: 700;

}


/* =========================================================
   SUBJUDUL
========================================================= */

.vitamin-pmt-section
.rekam-section-header p {

  margin: 3px 0 0;

  color: #64748b;

  font-size: 9px;

  line-height: 1.35;

}


/* =========================================================
   AREA HISTORY
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-history {

  width: 100%;

  min-width: 0;

  margin-top: 4px;

}


/* =========================================================
   TABLE
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-table {

  width: 100%;

  max-height: 245px;

  overflow-y: auto;

  overflow-x: hidden;

  background: #ffffff;

  border: 1px solid var(--tema-border);

  border-radius: 10px;

  scrollbar-width: thin;

  scrollbar-color:
    var(--tema-secondary)
    transparent;

}


/* =========================================================
   SCROLLBAR — CHROME / EDGE / SAFARI
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-table::-webkit-scrollbar {

  width: 5px;

}


.rekam-posyandu-layout
.vitamin-pmt-table::-webkit-scrollbar-track {

  background: transparent;

}


.rekam-posyandu-layout
.vitamin-pmt-table::-webkit-scrollbar-thumb {

  background: var(--tema-secondary);

  border-radius: 999px;

}


/* =========================================================
   ROW
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-row {

  display: grid;

  grid-template-columns:
    1.05fr
    .75fr
    1.55fr
    .75fr
    1.05fr;

  min-height: 43px;

  border-bottom:
    1px solid #eef2f7;

}


.rekam-posyandu-layout
.vitamin-pmt-row:last-child {

  border-bottom: 0;

}


/* =========================================================
   CELL
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-row > div {

  min-width: 0;

  padding:
    9px 9px;

  color: #334155;

  font-size: 10px;

  line-height: 1.4;
}


/* =========================================================
   HEADER TABLE
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-row.vitamin-pmt-header {

  position: sticky;

  top: 0;

  z-index: 5;

  min-height: 34px;

  background:
    var(--tema-bg);

  border-bottom:
    1px solid var(--tema-border);
}


.rekam-posyandu-layout
.vitamin-pmt-row.vitamin-pmt-header > div {

  display: flex;

  align-items: center;

  color:
    var(--tema-primary-dark);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .03em;

  text-transform: uppercase;
}


/* =========================================================
   TANGGAL
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-date {

  font-size: 10px;

  font-weight: 600;

  white-space: nowrap;
}


/* =========================================================
   TERBARU
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-latest {

  display: inline-flex;

  align-items: center;

  margin-left: 5px;

  padding:
    2px 5px;

  border-radius: 999px;

  background:
    var(--tema-soft-strong);

  color:
    var(--tema-primary-dark);

  font-size: 7px;

  font-weight: 700;

  line-height: 1;

  vertical-align: middle;
}


/* =========================================================
   JENIS
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    4px 7px;

  border-radius: 999px;

  background:
    var(--tema-soft-strong);

  color:
    var(--tema-primary-dark);

  font-size: 8px;

  font-weight: 600;

  white-space: nowrap;
}


/* =========================================================
   PRODUK / PMT
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-row strong {

  display: block;

  color: #334155;

  font-size: 10px;

  font-weight: 600;

  line-height: 1.35;
}


.rekam-posyandu-layout
.vitamin-pmt-row small {

  display: block;

  margin-top: 3px;

  color: #94a3b8;

  font-size: 8px;

  line-height: 1.35;
}


/* =========================================================
   TOTAL
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-total {

  margin-top: 8px;

  padding-right: 2px;

  text-align: right;

  color:
    var(--tema-primary-dark);

  font-size: 8px;

  font-weight: 600;

}


/* =========================================================
   DATA KOSONG
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-empty {

  padding: 22px 15px;

  text-align: center;

  color: #94a3b8;

  font-size: 9px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .rekam-posyandu-layout
  .vitamin-pmt-table {

    max-height: 230px;

    overflow-x: auto;

  }


  .rekam-posyandu-layout
  .vitamin-pmt-row {

    min-width: 680px;

  }

}


/* =========================================================
   RECORD SUMMARY
========================================================= */

.record-summary {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 16px;

  padding: 13px 15px;

  background: #f7f9f8;

  border: 1px solid #e5ebe7;

  border-radius: 10px;
}

.record-summary span {
  font-size: 13px;
  color: #707872;
}

.record-summary strong {
  font-size: 13px;
  color: #303832;
}


/* =========================================================
   RECORD NOTE
========================================================= */

.record-note {
  margin-top: 10px;

  padding: 12px 14px;

  background: #f9fbfa;

  border: 1px solid #e7ece8;

  border-left: 3px solid #77a88a;

  border-radius: 8px;

  font-size: 13px;

  line-height: 1.5;

  color: #505b54;
}


/* =========================================================
   PERKEMBANGAN
========================================================= */

.perkembangan-last-date {
  margin-bottom: 15px;

  padding: 9px 12px;

  border-radius: 8px;

  background: #f7f4fd;

  color: #746b83;

  font-size: 12px;
}

.perkembangan-last-date strong {
  color: #51466d;
}


/* =========================================================
   TARGET / CAPAIAN / INTERPRETASI
========================================================= */

.perkembangan-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin-top: 14px;
}

.perkembangan-card {
  position: relative;

  min-height: 110px;

  padding: 17px;

  border-radius: 12px;

  overflow: hidden;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.perkembangan-card:hover {
  transform: translateY(-2px);

  box-shadow:
    0 5px 15px rgba(0,0,0,.05);
}

.perkembangan-card span {
  display: block;

  margin-bottom: 10px;

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .35px;
}

.perkembangan-card strong {
  display: block;

  font-size: 14px;

  line-height: 1.55;
}


/* TARGET */

.perkembangan-card.target {
  border: 1px solid #ddd3f5;

  background:
    linear-gradient(
      145deg,
      #faf7ff,
      #f3efff
    );
}

.perkembangan-card.target::before {
  content: "🎯";

  position: absolute;

  right: 14px;
  top: 12px;

  font-size: 18px;

  opacity: .65;
}

.perkembangan-card.target span {
  color: #7560b7;
}

.perkembangan-card.target strong {
  color: #493a79;
}


/* CAPAIAN */

.perkembangan-card.capaian {
  border: 1px solid #cfe1f3;

  background:
    linear-gradient(
      145deg,
      #f8fcff,
      #eef7ff
    );
}

.perkembangan-card.capaian::before {
  content: "✓";

  position: absolute;

  right: 15px;
  top: 10px;

  font-size: 20px;
  font-weight: 700;

  color: #6b9fd0;

  opacity: .65;
}

.perkembangan-card.capaian span {
  color: #5784aa;
}

.perkembangan-card.capaian strong {
  color: #345e83;
}


/* INTERPRETASI */

.perkembangan-card.interpretasi {
  border: 1px solid #cfe5d4;

  background:
    linear-gradient(
      145deg,
      #f8fcf8,
      #eef9f0
    );
}

.perkembangan-card.interpretasi::before {
  content: "●";

  position: absolute;

  right: 15px;
  top: 12px;

  font-size: 17px;

  color: #6da67b;

  opacity: .65;
}

.perkembangan-card.interpretasi span {
  color: #5c8b66;
}

.perkembangan-card.interpretasi strong {
  color: #386442;
}


/* =========================================================
   PEMERIKSAAN / INTERPRETASI
========================================================= */

.pertumbuhan-table {
  overflow: hidden;

  border: 1px solid #e2e8e3;

  border-radius: 11px;

  background: #ffffff;
}

.pertumbuhan-row {
  display: grid;

  grid-template-columns:
    1.3fr
    .8fr
    1fr;

  align-items: center;

  min-height: 43px;

  border-bottom: 1px solid #edf0ee;
}

.pertumbuhan-row:last-child {
  border-bottom: 0;
}

.pertumbuhan-row > * {
  padding: 9px 12px;
}

.pertumbuhan-row.header {
  background: #edf7ef;

  color: #356642;

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .3px;
}

.pertumbuhan-row:not(.header):nth-child(even) {
  background: #fbfcfb;
}


/* =========================================================
   BADGE INTERPRETASI
========================================================= */

.interpretasi-badge {
  display: inline-flex;

  align-items: center;

  width: fit-content;

  padding: 5px 9px;

  border-radius: 999px;

  background: #edf7ef;

  color: #3d724b;

  font-size: 11px;

  font-weight: 700;
}


/* =========================================================
   STATUS PERTUMBUHAN
========================================================= */

.pertumbuhan-status {
  display: flex;

  justify-content: space-between;
  align-items: center;

  margin-top: 12px;

  padding: 13px 15px;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #edf8ef,
      #f8fcf9
    );

  border: 1px solid #d6e8da;
}

.pertumbuhan-status span {
  font-size: 12px;
  color: #667168;
}

.pertumbuhan-status strong {
  padding: 5px 10px;

  border-radius: 999px;

  background: #dff0e2;

  color: #367145;

  font-size: 12px;
}


/* =========================================================
   CATATAN
========================================================= */

.pertumbuhan-catatan {
  margin-top: 12px;

  padding: 13px 15px;

  background: #fffaf0;

  border: 1px solid #f0e3c8;

  border-left: 4px solid #d9a34c;

  border-radius: 9px;
}

.pertumbuhan-catatan span {
  display: block;

  margin-bottom: 5px;

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  color: #987033;
}

.pertumbuhan-catatan p {
  margin: 0;

  font-size: 13px;

  line-height: 1.5;

  color: #5e574b;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

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

}


@media (max-width: 768px) {

  .rekam-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .rekam-header-actions {
    width: 100%;
  }

  .rekam-header-actions button {
    flex: 1;
  }

  .rekam-balita-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .rekam-balita-actions {
    width: 100%;
  }

  .rekam-balita-actions button {
    width: 100%;
  }

  .rekam-section-header {
    align-items: flex-start;
  }

  .perkembangan-grid {
    grid-template-columns: 1fr;
  }

  .pertumbuhan-row {
    grid-template-columns:
      1fr
      .8fr
      1fr;
  }

}


@media (max-width: 480px) {

  .rekam-section,
  .rekam-balita-header {
    padding: 16px;
  }

  .rekam-section-header {
    flex-direction: column;
  }

  .rekam-section-header button {
    width: 100%;
  }

  .rekam-balita-profile h3 {
    font-size: 20px;
  }

}


/* ==================================================
   FORM PERTUMBUHAN MODERN
================================================== */

.pertumbuhan-form-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}

.pertumbuhan-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modern-card {
  background: #ffffff;
  border: 1px solid #e5e8f0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(42, 48, 80, 0.05);
}

.balita-info-card {
  position: relative;
}

.card-icon,
.section-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.card-icon svg,
.section-icon svg,
.section-title-icon svg,
.input-icon svg,
.measurement-icon svg,
.textarea-icon > svg,
.btn-save-modern svg,
.btn-cancel-modern svg,
.btn-outline-full svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-icon.purple,
.section-icon.purple {
  color: #6047e8;
  background: #f0edff;
}

.card-icon.green {
  color: #20a464;
  background: #e9f8f0;
}

.card-label {
  font-size: 11px;
  font-weight: 700;
  color: #777f91;
  letter-spacing: .7px;
  margin-bottom: 6px;
}

.balita-info-card h3 {
  margin: 0;
  font-size: 20px;
  color: #1f2940;
}

.balita-id {
  margin-top: 5px;
  font-size: 13px;
  color: #6f7787;
}

.balita-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #edf0f4;
  color: #687181;
  font-size: 12px;
}

.usia-box {
  margin-top: 16px;
  padding: 13px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    #f3efff,
    #faf8ff
  );
}

.usia-box span {
  display: block;
  font-size: 11px;
  color: #706b82;
  margin-bottom: 5px;
}

.usia-box strong {
  font-size: 13px;
  color: #4933c8;
}

.card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-heading .card-icon {
  margin: 0;
}

.card-heading h4 {
  margin: 0;
  color: #29324a;
}

.tips-card {
  padding: 18px;
}

.tip-item {
  display: flex;
  gap: 9px;
  margin-top: 13px;
  color: #626b7b;
  font-size: 12px;
  line-height: 1.55;
}

.tip-check {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dcf7e9;
  color: #19a15c;
  font-size: 11px;
  font-weight: 700;
}

.btn-outline-full {
  width: 100%;
  min-height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid #dfe3eb;
  background: #ffffff;
  border-radius: 10px;
  color: #535c6e;
  cursor: pointer;
}

.btn-outline-full:hover {
  background: #f8f9fc;
}

.pertumbuhan-main-card {
  padding: 24px;
}

.form-main-header > div {
  display: flex;
  align-items: center;
  gap: 13px;
}

.form-main-header .section-icon {
  margin: 0;
}

.form-main-header h2 {
  margin: 0 0 4px;
  color: #1f2940;
  font-size: 22px;
}

.form-main-header p {
  margin: 0;
  color: #737b8b;
  font-size: 13px;
}

.form-section-modern {
  margin-top: 24px;
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 9px;
  background: linear-gradient(
    90deg,
    #f4f0ff,
    #faf9ff
  );
  color: #5540d4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}

.section-title-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-title-icon svg {
  width: 17px;
  height: 17px;
}

.auto-label {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 20px;
  background: #e7f8ef;
  color: #179258;
  font-size: 9px;
}

.form-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}

.measurement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.modern-field label,
.result-field label {
  display: block;
  margin-bottom: 7px;
  color: #394258;
  font-size: 12px;
  font-weight: 600;
}

.input-icon,
.measurement-input,
.textarea-icon {
  display: flex;
  align-items: center;
  min-height: 46px;
  border: 1px solid #dfe4ec;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  transition: .2s ease;
}

.input-icon:focus-within,
.measurement-input:focus-within,
.textarea-icon:focus-within {
  border-color: #6549ea;
  box-shadow: 0 0 0 3px rgba(101, 73, 234, .09);
}

.input-icon > svg,
.measurement-icon {
  flex: 0 0 42px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6248e8;
  background: #f6f3ff;
}

.input-icon input,
.measurement-input input,
.result-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 10px;
  color: #293248;
  font-size: 13px;
}

.input-icon input:focus,
.measurement-input input:focus,
.result-field input:focus {
  outline: none;
}

.input-icon.locked input {
  color: #596276;
}

.field-lock {
  display: flex;
  align-items: center;
  padding-right: 13px;
  color: #8a92a1;
}

.field-lock svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.measurement-icon {
  border-right: 1px solid #eceef3;
}

.measurement-input .unit {
  padding-right: 12px;
  color: #8a92a1;
  font-size: 11px;
  font-weight: 600;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.result-field > div {
  display: flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid #dfe7e3;
  border-radius: 10px;
  background: #f8fcf9;
  overflow: hidden;
}

.result-field input {
  font-weight: 600;
}

.result-icon {
  flex: 0 0 38px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1da866;
  background: #eaf8f0;
  font-weight: 700;
}

.status-result {
  grid-column: span 3;
  max-width: 50%;
}

.textarea-icon {
  align-items: flex-start;
}

.textarea-icon > svg {
  flex: 0 0 42px;
  margin-top: 13px;
  color: #6248e8;
}

.textarea-icon textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 0;
  outline: 0;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  color: #30394d;
}

.form-actions-modern {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 12px;
  margin-top: 24px;
}

.btn-cancel-modern,
.btn-save-modern {
  min-height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.btn-cancel-modern {
  border: 1px solid #dfe3eb;
  background: #ffffff;
  color: #5d6575;
}

.btn-save-modern {
  border: 0;
  background: linear-gradient(
    135deg,
    #6041ed,
    #734fe9
  );
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(96, 65, 237, .22);
}

.btn-save-modern:hover {
  transform: translateY(-1px);
}

.btn-save-modern svg {
  width: 18px;
  height: 18px;
}

.btn-save-modern .arrow-icon {
  margin-left: auto;
  margin-right: 5px;
}

.form-message {
  margin-top: 10px;
  color: #c53b3b;
  font-size: 12px;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1050px) {

  .pertumbuhan-form-layout {
    grid-template-columns: 1fr;
  }

  .pertumbuhan-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .btn-outline-full {
    grid-column: span 2;
  }

}


@media (max-width: 760px) {

  .pertumbuhan-side,
  .form-grid-two,
  .measurement-grid,
  .result-grid,
  .form-actions-modern {
    grid-template-columns: 1fr;
  }

  .status-result {
    grid-column: span 1;
    max-width: none;
  }

  .btn-outline-full {
    grid-column: span 1;
  }

  .pertumbuhan-main-card {
    padding: 16px;
  }

}

/* =========================================================
   FORM UPDATE PERKEMBANGAN
   ========================================================= */

.perkembangan-form-wrapper {
  width: 100%;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid #e2e5ee;
  border-radius: 18px;
  padding: 24px;
  box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.perkembangan-form-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}

.perkembangan-form-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #20283a;
}

.perkembangan-form-header p {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 14px;
}

.form-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f0edff;
  color: #5b45e6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}


/* =========================================================
   DATA BALITA
   ========================================================= */

.perkembangan-balita-card {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.5fr)
    minmax(150px, 1fr)
    minmax(200px, 1.2fr);

  gap: 18px;

  padding: 18px;

  background: #fafbff;

  border: 1px solid #e3e6ef;

  border-radius: 14px;

  margin-bottom: 22px;
}

.perkembangan-balita-card > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.perkembangan-balita-card span {
  font-size: 10px;
  font-weight: 700;
  color: #737b91;
  letter-spacing: .7px;
}

.perkembangan-balita-card strong {
  font-size: 17px;
  color: #263047;
}

.perkembangan-balita-card small {
  font-size: 12px;
  color: #70798d;
}


/* =========================================================
   SECTION
   ========================================================= */

.form-section {
  margin-top: 20px;
}

.form-section-header {
  min-height: 42px;

  display: flex;
  align-items: center;

  gap: 10px;

  padding: 0 14px;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #f2efff,
      #faf9ff
    );

  color: #5943e6;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .5px;
}

.form-section-header > span:first-child {
  font-size: 16px;
}

.form-section-description {
  margin: 10px 2px 16px;

  font-size: 13px;

  color: #697386;
}


/* =========================================================
   AUTO BADGE
   ========================================================= */

.auto-badge {
  margin-left: auto;

  padding: 5px 10px;

  border-radius: 999px;

  background: #e8f8ef;

  color: #15945a;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .5px;
}


/* =========================================================
   FORM GRID
   ========================================================= */

.form-grid-2 {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 18px;

  margin-top: 14px;
}

.form-group {
  display: flex;

  flex-direction: column;

  gap: 7px;
}

.form-group label {
  font-size: 12px;

  font-weight: 700;

  color: #3f475a;
}


/* =========================================================
   INPUT
   ========================================================= */

.input-icon-wrapper {
  height: 48px;

  display: flex;

  align-items: center;

  border: 1px solid #dfe3ec;

  border-radius: 10px;

  overflow: hidden;

  background: #ffffff;
}

.input-icon-wrapper > span {
  width: 48px;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #f2efff;

  color: #6247e8;

  font-size: 18px;

  flex-shrink: 0;
}

.input-icon-wrapper input {
  flex: 1;

  height: 100%;

  border: none;

  outline: none;

  padding: 0 14px;

  font-size: 13px;

  color: #30384a;

  background: #ffffff;
}

.input-icon-wrapper input:read-only {
  background: #ffffff;
}


/* =========================================================
   DOMAIN CARD
   ========================================================= */

.perkembangan-domain-card {
  margin-top: 18px;

  border: 1px solid #e0e4ec;

  border-radius: 14px;

  overflow: hidden;

  background: #ffffff;
}

.perkembangan-domain-header {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 16px 18px;

  background: #fafbff;

  border-bottom: 1px solid #e8eaf0;
}

.perkembangan-domain-icon {
  width: 38px;

  height: 38px;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #f0edff;

  color: #5d45e7;

  font-size: 16px;

  font-weight: 700;
}

.perkembangan-domain-header h3 {
  margin: 0;

  font-size: 16px;

  color: #273044;
}

.perkembangan-domain-header p {
  margin: 3px 0 0;

  font-size: 12px;

  color: #747c8e;
}


/* =========================================================
   TARGET LIST
   ========================================================= */

.perkembangan-target-list {
  display: flex;
  flex-direction: column;

  gap: 12px;

  padding: 14px;
}


/* =========================================================
   TARGET ITEM
   ========================================================= */

.perkembangan-target-item {

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    240px;

  gap: 18px;

  padding: 18px;

  border: 1px solid #e1e5ef;

  border-radius: 14px;

  background: #ffffff;

  align-items: start;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;

}


.perkembangan-target-item:last-child {
  margin-bottom: 0;
}


.perkembangan-target-item:hover {

  border-color: #d4ceff;

  box-shadow:
    0 5px 16px
    rgba(82, 65, 200, .07);

}


/* =========================================================
   NOMOR TARGET
   ========================================================= */

.perkembangan-target-number {

  width: 32px;
  height: 32px;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  background: #f0edff;

  color: #5b45e6;

  font-size: 12px;

  font-weight: 700;

}


/* =========================================================
   KONTEN TARGET
   ========================================================= */

.perkembangan-target-content {

  min-width: 0;

}


/* LABEL TARGET CAPAIAN */

.perkembangan-target-title {

  margin-bottom: 6px;

  font-size: 10px;

  font-weight: 800;

  color: #7a8192;

  text-transform: uppercase;

  letter-spacing: .55px;

}


/* ISI TARGET */

.perkembangan-target-text {

  font-size: 14px;

  line-height: 1.55;

  color: #293246;

  font-weight: 600;

}


/* =========================================================
   CONTOH KEGIATAN
   ========================================================= */

.perkembangan-target-activities {

  margin-top: 13px;

  padding: 11px 13px;

  border-radius: 10px;

  background: #faf9ff;

}


.perkembangan-target-subtitle {

  display: flex;

  align-items: center;

  gap: 6px;

  margin-bottom: 8px;

  color: #4f46e5;

  font-size: 12px;

  font-weight: 700;

}


/* LIST KEGIATAN */

.perkembangan-target-activities ol {

  margin: 0;

  padding-left: 21px;

}


.perkembangan-target-activities li {

  margin-bottom: 4px;

  color: #4f596d;

  font-size: 12px;

  line-height: 1.45;

}


.perkembangan-target-activities li:last-child {

  margin-bottom: 0;

}


/* =========================================================
   METODE PENILAIAN
   ========================================================= */

.perkembangan-target-method {

  margin-top: 11px;

  font-size: 11px;

  line-height: 1.4;

  color: #737b8c;

}


.perkembangan-target-method strong {

  color: #596176;

}


/* =========================================================
   HASIL / CAPAIAN
   ========================================================= */

.perkembangan-target-result {

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  gap: 7px;

  padding-top: 2px;

}


/* LABEL */

.perkembangan-target-result label {

  font-size: 11px;

  font-weight: 700;

  color: #596176;

}


/* SELECT */

.perkembangan-target-result select {

  width: 100%;

  height: 42px;

  padding:
    0 12px;

  border:

    1px solid #d9deea;

  border-radius: 9px;

  background: #ffffff;

  color: #30394b;

  font-size: 13px;

  outline: none;

  cursor: pointer;

  transition:

    border-color .2s ease,

    box-shadow .2s ease;

}


.perkembangan-target-result select:hover {

  border-color: #bdb5ff;

}


.perkembangan-target-result select:focus {

  border-color: #5b45e6;

  box-shadow:

    0 0 0 3px
    rgba(91, 69, 230, .10);

}


/* =========================================================
   INTERPRETASI TARGET
   ========================================================= */

.target-interpretasi {

  min-height: 18px;

  font-size: 11px;

  font-weight: 600;

  color: #138a46;

}


/* =========================================================
   TARGET BELUM TERSEDIA
   ========================================================= */

.perkembangan-no-target {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 16px;

  margin: 14px;

  border:

    1px dashed #d8dce6;

  border-radius: 12px;

  background: #ffffff;

}


.perkembangan-no-target-icon {

  width: 32px;
  height: 32px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #fff4dc;

  color: #e69b00;

  font-weight: 700;

}


.perkembangan-no-target strong {

  display: block;

  margin-bottom: 3px;

  color: #4c5568;

  font-size: 12px;

}


.perkembangan-no-target p {

  margin: 0;

  color: #7b8497;

  font-size: 11px;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .perkembangan-target-item {

    grid-template-columns:
      36px
      minmax(0, 1fr);

  }


  .perkembangan-target-result {

    grid-column: 2;

    width: 100%;

    padding-top: 4px;

  }

}


@media (max-width: 600px) {

  .perkembangan-target-list {

    padding: 10px;

  }


  .perkembangan-target-item {

    grid-template-columns: 1fr;

    gap: 10px;

    padding: 14px;

  }


  .perkembangan-target-result {

    grid-column: auto;

  }


  .perkembangan-target-number {

    width: 30px;
    height: 30px;

  }

}


/* =========================================================
   SELECT
   ========================================================= */

.hasil-target {
  width: 100%;

  height: 44px;

  border: 1px solid #dfe3ec;

  border-radius: 9px;

  background: #ffffff;

  padding: 0 12px;

  font-size: 13px;

  color: #30384a;

  outline: none;

  cursor: pointer;
}

.hasil-target:focus {
  border-color: #6547e9;

  box-shadow:
    0 0 0 3px
    rgba(101, 71, 233, .1);
}


/* =========================================================
   INTERPRETASI TARGET
   ========================================================= */

.target-interpretasi {
  min-height: 18px;

  font-size: 11px;

  font-weight: 700;

  color: #15945a;
}


/* =========================================================
   SUMMARY DOMAIN
   ========================================================= */

.perkembangan-domain-summary {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 16px;

  background: #f7fbf8;

  border-top: 1px solid #e4eee7;

  font-size: 12px;

  color: #596274;
}

.perkembangan-domain-summary strong {
  color: #208552;

  font-size: 12px;
}


/* =========================================================
   KESIMPULAN
   ========================================================= */

.kesimpulan-card {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 14px;

  margin-top: 14px;
}

.kesimpulan-card > div {
  min-height: 80px;

  padding: 16px;

  border-radius: 12px;

  background: #f5fbf7;

  border: 1px solid #dceee2;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 7px;
}

.kesimpulan-card span {
  font-size: 11px;

  color: #667084;
}

.kesimpulan-card strong {
  font-size: 14px;

  color: #23804f;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

#keteranganPerkembangan {
  width: 100%;

  box-sizing: border-box;

  min-height: 110px;

  padding: 14px;

  border: 1px solid #dfe3ec;

  border-radius: 10px;

  resize: vertical;

  outline: none;

  font-family: inherit;

  font-size: 13px;

  color: #30384a;
}

#keteranganPerkembangan:focus {
  border-color: #6547e9;

  box-shadow:
    0 0 0 3px
    rgba(101, 71, 233, .1);
}


/* =========================================================
   BUTTON
   ========================================================= */

.form-actions {
  display: grid;

  grid-template-columns:
    170px
    1fr;

  gap: 12px;

  margin-top: 22px;
}

.form-actions button {
  height: 48px;

  border-radius: 10px;

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  transition:
    transform .15s,
    box-shadow .15s;
}

.form-actions button:hover {
  transform: translateY(-1px);
}

.btn-secondary {
  background: #ffffff;

  border: 1px solid #dfe3ec;

  color: #596176;
}

.btn-primary {
  background: #5b43e6;

  border: none;

  color: #ffffff;

  box-shadow:
    0 6px 15px
    rgba(91, 67, 230, .22);
}

.btn-primary:hover {
  background: #5038d8;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.form-message {
  margin-top: 12px;

  font-size: 12px;

  font-weight: 600;
}

.form-message.error {
  color: #dc3545;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 900px
) {

  .perkembangan-target-item {
    grid-template-columns:
      34px
      1fr;
  }

  .perkembangan-target-result {
    grid-column: 2;
  }

}


@media (
  max-width: 650px
) {

  .perkembangan-form-wrapper {
    padding: 16px;

    border-radius: 12px;
  }

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

  .form-grid-2 {
    grid-template-columns: 1fr;
  }

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

  .form-actions {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   LAYOUT UPDATE PERKEMBANGAN
   ========================================================= */

.perkembangan-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 20px;
  width: 100%;
  align-items: start;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.perkembangan-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.perkembangan-side-card {
  background: #fff;
  border: 1px solid #e1e5ed;
  border-radius: 16px;
  padding: 20px;
  box-sizing: border-box;
}

.side-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.side-card-icon.purple {
  background: #f0edff;
  color: #5b43e6;
}

.side-card-icon.green {
  background: #e8f8ef;
  color: #19a463;
}

.side-card-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .6px;
  color: #778096;
}

.side-card-name {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  color: #263047;
}

.side-card-id {
  margin-top: 3px;
  font-size: 12px;
  color: #70798d;
}

.side-card-divider {
  height: 1px;
  background: #e7eaf0;
  margin: 14px 0;
}

.side-card-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: #596176;
}

.side-age-box {
  margin-top: 15px;
  padding: 13px;
  border-radius: 11px;
  background: #f5f1ff;
}

.side-age-box span {
  display: block;
  font-size: 10px;
  color: #70798d;
  margin-bottom: 5px;
}

.side-age-box strong {
  display: block;
  font-size: 13px;
  color: #5b43e6;
}


/* =========================================================
   TIPS
   ========================================================= */

.perkembangan-side-card.tips {
  padding: 18px;
}

.tips-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  color: #30394d;
}

.tips-title .side-card-icon {
  margin: 0;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 11px;
  font-size: 11px;
  line-height: 1.5;
  color: #596176;
}

.tip-item > span {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dff7e9;
  color: #16a15f;
  font-size: 10px;
  font-weight: 800;
}

.perkembangan-cancel-side {
  width: 100%;
  height: 46px;
  border: 1px solid #dfe3ec;
  background: #fff;
  border-radius: 10px;
  color: #596176;
  font-weight: 600;
  cursor: pointer;
}


/* =========================================================
   MAIN
   ========================================================= */

.perkembangan-main {
  min-width: 0;
  background: #fff;
  border: 1px solid #e1e5ed;
  border-radius: 18px;
  padding: 24px;
  box-sizing: border-box;
}

.perkembangan-main-header {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 24px;
}

.perkembangan-main-header h2 {
  margin: 0;
  font-size: 24px;
  color: #252e40;
}

.perkembangan-main-header p {
  margin: 4px 0 0;
  color: #6c7588;
  font-size: 13px;
}


/* =========================================================
   SECTION
   ========================================================= */

.perkembangan-section {
  margin-top: 18px;
}

.perkembangan-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 14px;
}


/* =========================================================
   TARGET
   ========================================================= */

.perkembangan-target-item {
  grid-template-columns: 34px minmax(0, 1fr) 240px;
}

.perkembangan-target-label {
  font-size: 10px;
  font-weight: 800;
  color: #778096;
  letter-spacing: .5px;
  margin-bottom: 5px;
}

.perkembangan-target-text {
  font-size: 13px;
  line-height: 1.5;
}

.perkembangan-target-method {
  margin-top: 7px;
  font-size: 11px;
  color: #7a8292;
}

.perkembangan-no-target {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border: 1px dashed #d9dce5;
  border-radius: 11px;
  color: #687184;
}

.perkembangan-no-target-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff4df;
  color: #d99120;
  font-weight: 800;
}

.perkembangan-no-target strong {
  display: block;
  color: #3b4354;
  font-size: 12px;
}

.perkembangan-no-target p {
  margin: 3px 0 0;
  font-size: 11px;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.perkembangan-summary-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.perkembangan-summary-card > div {
  min-height: 75px;
  padding: 15px;
  border: 1px solid #dcebe1;
  border-radius: 11px;
  background: #f6fbf8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.perkembangan-summary-card span {
  font-size: 10px;
  color: #687184;
}

.perkembangan-summary-card strong {
  font-size: 13px;
  color: #218251;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.textarea-icon-wrapper {
  display: flex;
  align-items: flex-start;
  border: 1px solid #dfe3ec;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 3px;
}

.textarea-icon-wrapper > span {
  width: 48px;
  min-height: 110px;
  display: flex;
  justify-content: center;
  padding-top: 14px;
  box-sizing: border-box;
  background: #f2efff;
  color: #6045e6;
}

.textarea-icon-wrapper textarea {
  flex: 1;
  border: 0;
  outline: 0;
  resize: vertical;
  min-height: 110px;
  padding: 13px;
  font-family: inherit;
  font-size: 13px;
}


/* =========================================================
   BUTTON
   ========================================================= */

.perkembangan-form-actions {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 12px;
  margin-top: 22px;
}

.perkembangan-form-actions button {
  height: 48px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.perkembangan-form-actions .btn-primary {
  background: #5b43e6;
  color: #fff;
  border: 0;
  box-shadow: 0 6px 15px rgba(91, 67, 230, .22);
}

.perkembangan-form-actions .btn-secondary {
  background: #fff;
  color: #596176;
  border: 1px solid #dfe3ec;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

  .perkembangan-layout {
    grid-template-columns: 1fr;
  }

  .perkembangan-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .perkembangan-cancel-side {
    grid-column: 1 / -1;
  }

}


@media (max-width: 700px) {

  .perkembangan-sidebar {
    display: flex;
  }

  .perkembangan-form-grid,
  .perkembangan-summary-card {
    grid-template-columns: 1fr;
  }

  .perkembangan-target-item {
    grid-template-columns: 34px 1fr;
  }

  .perkembangan-target-result {
    grid-column: 2;
  }

  .perkembangan-form-actions {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   GRAFIK PERTUMBUHAN
   ========================================================= */

.pertumbuhan-chart {

  margin-top: 18px;

  padding: 18px;

  border:
    1px solid #e5e8ef;

  border-radius: 14px;

  background:
    #ffffff;

}


.pertumbuhan-chart-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 14px;

}


.pertumbuhan-chart-header h3 {

  margin: 0 0 4px;

  font-size: 16px;

  color:
    #293246;

}


.pertumbuhan-chart-header p {

  margin: 0;

  font-size: 12px;

  color:
    #737b8c;

}


/* =========================================================
   TAB
   ========================================================= */

.pertumbuhan-chart-tabs {

  display: flex;

  gap: 6px;

  margin-bottom: 14px;

  padding: 4px;

  background:
    #f5f3ff;

  border-radius: 10px;

  width: fit-content;

}


.pertumbuhan-chart-tab {

  border: 0;

  background:
    transparent;

  color:
    #626a7b;

  padding:
    7px 14px;

  border-radius: 7px;

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

}


.pertumbuhan-chart-tab:hover {

  color:
    #5b45e6;

}


.pertumbuhan-chart-tab.active {

  background:
    #ffffff;

  color:
    #5b45e6;

  box-shadow:
    0 1px 4px
    rgba(0,0,0,.08);

}


/* =========================================================
   CANVAS
   ========================================================= */

.pertumbuhan-chart-wrapper {

  position: relative;

  width: 100%;

  min-height: 430px;

  overflow-x: auto;

}


#grafikPertumbuhanCanvas {

  display: block;

  width: 100%;

  min-width: 650px;

  height: 430px;

}


/* =========================================================
   LEGENDA
   ========================================================= */

.pertumbuhan-chart-legend {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 12px;

  font-size: 11px;

  color:
    #687083;

}


.pertumbuhan-chart-legend span {

  display: flex;

  align-items: center;

  gap: 5px;

}


.legend-dot {

  width: 9px;

  height: 9px;

  border-radius: 50%;

}


.legend-dot.normal {

  background:
    #86c79a;

}


.legend-dot.perhatian {

  background:
    #f5b84b;

}


.legend-dot.risiko {

  background:
    #f29b59;

}


.legend-dot.bahaya {

  background:
    #e66a6a;

}


.legend-line {

  width: 18px;

  height: 3px;

  border-radius: 3px;

  background:
    #5b45e6;

}


/* =========================================================
   INFO TITIK
   ========================================================= */

.pertumbuhan-chart-info {

  margin-top: 12px;

  padding:
    10px 12px;

  border-radius: 8px;

  background:
    #f7f8fa;

  color:
    #596176;

  font-size: 11px;

}


.pertumbuhan-chart-empty {

  padding: 30px;

  text-align: center;

  color:
    #737b8c;

  font-size: 13px;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width: 700px
) {

  .pertumbuhan-chart {

    padding: 12px;

  }

  .pertumbuhan-chart-tabs {

    width: 100%;

    overflow-x: auto;

  }

  .pertumbuhan-chart-tab {

    flex:
      0 0 auto;

  }

}

/* =========================================================
   REKAM POSYANDU - MODERN LAYOUT
   ========================================================= */

.rekam-posyandu-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  width: 100%;
}


/* =========================================================
   SIDEBAR BALITA
   ========================================================= */

.rekam-posyandu-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 20px;
}


/* =========================================================
   PROFILE BALITA
   ========================================================= */

.rekam-balita-profile {
  background: #ffffff;
  border: 1px solid #e2e6ee;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(30, 41, 59, 0.04);
}


.profile-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #f0edff;
  color: #5b45e6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}


.profile-id {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: #eef0ff;
  color: #4b3fc8;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 7px;
}


.rekam-balita-profile h3 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.3;
  color: #273043;
}


.rekam-balita-profile p {
  margin: 4px 0;
  font-size: 13px;
  color: #667085;
}


.rekam-balita-profile .profile-birth {
  font-size: 12px;
  color: #7b8495;
}


.profile-age-box {
  margin-top: 16px;
  padding: 12px;
  border-radius: 12px;
  background: #f5f2ff;
}


.profile-age-box span {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  color: #77708f;
}


.profile-age-box strong {
  display: block;
  font-size: 13px;
  color: #5743d6;
}


/* =========================================================
   TIPS
   ========================================================= */

.rekam-sidebar-card {
  background: #ffffff;
  border: 1px solid #e2e6ee;
  border-radius: 16px;
  padding: 18px;
}


.sidebar-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  color: #344054;
}


.sidebar-tip {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 11px;
}


.sidebar-tip:last-child {
  margin-bottom: 0;
}


.sidebar-tip > span {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a05d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}


.sidebar-tip p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: #667085;
}


/* =========================================================
   REKAM POSYANDU — FINAL CLEAN CSS
   =========================================================
   Ganti SELURUH blok CSS Rekam POSYANDU lama dengan file ini.

   Prinsip desain:
   - Putih sebagai warna utama
   - Gender hanya sebagai aksen
   - Laki-laki  : biru muda
   - Perempuan  : pink muda
   - Tidak ada warna berbeda untuk tiap modul
   - Icon pemeriksaan tetap ada
   - Typography compact dan nyaman
   - Grafik KMS tetap netral dan tidak diubah isi grafiknya
   - CSS dipasang scoped pada .rekam-posyandu-layout
   ========================================================= */


/* =========================================================
   01. LAYOUT
   ========================================================= */

.rekam-posyandu-layout {
  --rekam-primary: #64748b;
  --rekam-primary-dark: #475569;
  --rekam-soft: #f8fafc;
  --rekam-border: #e2e8f0;
  --rekam-text: #1e293b;
  --rekam-muted: #64748b;

  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 24px;
  align-items: start;

  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.rekam-posyandu-layout.gender-laki {
  --rekam-primary: #3b82f6;
  --rekam-primary-dark: #2563eb;
  --rekam-soft: #eff6ff;
  --rekam-border: #dbeafe;
}

.rekam-posyandu-layout.gender-perempuan {
  --rekam-primary: #ec4899;
  --rekam-primary-dark: #db2777;
  --rekam-soft: #fdf2f8;
  --rekam-border: #fbcfe8;
}

.rekam-posyandu-layout,
.rekam-posyandu-layout * {
  box-sizing: border-box;
}


/* =========================================================
   02. SIDEBAR
   ========================================================= */

.rekam-posyandu-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.rekam-balita-profile {
  position: relative;

  padding: 20px !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid var(--rekam-primary) !important;

  border-radius: 16px !important;

  box-shadow: 0 2px 8px rgba(15, 23, 42, .04) !important;
}

.rekam-balita-profile .profile-icon {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 12px;

  border-radius: 12px;

  background: var(--rekam-soft);

  color: var(--rekam-primary-dark);

  font-size: 20px;
}

.rekam-balita-profile .profile-id {
  display: inline-flex;
  align-items: center;

  margin-bottom: 8px;
  padding: 4px 8px;

  border-radius: 6px;

  background: var(--rekam-soft);
  color: var(--rekam-primary-dark);

  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
}

.rekam-balita-profile h3 {
  margin: 2px 0 5px;

  color: #1e293b;

  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}

.rekam-balita-profile p {
  margin: 3px 0;

  color: #64748b;

  font-size: 12px;
  line-height: 1.45;
}

.rekam-balita-profile .profile-birth {
  color: #64748b;
  font-size: 11px;
}

.rekam-balita-profile .profile-age-box {
  margin-top: 14px;
  padding: 11px 12px;

  background: #f8fafc;

  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.rekam-balita-profile .profile-age-box span {
  display: block;

  margin-bottom: 4px;

  color: #64748b;

  font-size: 9px;
  line-height: 1.3;
}

.rekam-balita-profile .profile-age-box strong {
  display: block;

  color: var(--rekam-primary-dark);

  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}


/* =========================================================
   03. SIDEBAR TIPS
   ========================================================= */

.rekam-sidebar-card {
  padding: 18px !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;

  box-shadow: 0 2px 8px rgba(15, 23, 42, .03) !important;
}

.sidebar-card-title {
  margin-bottom: 13px;

  color: #334155;

  font-size: 14px;
  font-weight: 700;
}

.sidebar-tip {
  display: flex;
  align-items: flex-start;
  gap: 9px;

  margin-bottom: 10px;
}

.sidebar-tip:last-child {
  margin-bottom: 0;
}

.sidebar-tip > span {
  width: 18px;
  height: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 18px;

  border-radius: 50%;

  background: #dcfce7;
  color: #16a34a;

  font-size: 10px;
  font-weight: 700;
}

.sidebar-tip p {
  margin: 0;

  color: #64748b;

  font-size: 10px;
  line-height: 1.5;
}


/* =========================================================
   REKAM POSYANDU — FINAL VISUAL SYSTEM
   =========================================================
   Prinsip:
   1. Layout mengikuti struktur loadRekamPosyandu_FINAL.js
   2. Satu aksen warna berdasarkan gender
      - Laki-laki  : biru
      - Perempuan  : pink
   3. Tidak ada warna modul terpisah
   4. Tidak ada gradient / double accent
   5. Grafik KMS tetap memiliki visualnya sendiri
   6. CSS ini scoped agar tidak mengganggu halaman lain
   ========================================================= */


/* =========================================================
   01. PAGE HEADER
   ========================================================= */

#rekamPageHeader {
  margin-bottom: 20px;
}

#rekamPageHeader h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: #263238;
}

#rekamPageHeader p {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #69746d;
}


/* =========================================================
   02. CONTAINER
   ========================================================= */

.rekam-posyandu-container {
  width: 100%;
  min-width: 0;
}


/* =========================================================
   03. PANEL PILIH BALITA
   ========================================================= */

.select-balita-card {
  width: 100%;
  margin-bottom: 18px;
  padding: 20px 22px;
  box-sizing: border-box;

  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;

  box-shadow: 0 2px 8px rgba(30, 41, 59, .035);
}

.select-balita-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.select-balita-header h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: #1e293b;
}

.select-balita-header p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}

.select-balita-card .btn-primary {
  flex-shrink: 0;
  min-height: 34px;
  padding: 0 14px;

  border: 1px solid #2563eb;
  border-radius: 8px;

  background: #2563eb;
  color: #ffffff;

  font-size: 12px;
  font-weight: 600;
  cursor: pointer;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.select-balita-card .btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}


/* =========================================================
   04. EMPTY STATE
   ========================================================= */

.rekam-balita-content {
  width: 100%;
  min-width: 0;
}

.rekam-balita-content > .history-empty {
  min-height: 150px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 30px 20px;

  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;

  color: #64748b;
  text-align: center;
}

.history-empty-icon {
  margin-bottom: 2px;
  font-size: 30px;
  line-height: 1;
}

.rekam-balita-content > .history-empty strong {
  font-size: 14px;
  color: #475569;
}

.rekam-balita-content > .history-empty span {
  max-width: 420px;
  font-size: 12px;
  line-height: 1.5;
  color: #94a3b8;
}


/* =========================================================
   05. MAIN LAYOUT
   ========================================================= */

.rekam-posyandu-layout {
  --gender-primary: #64748b;
  --gender-primary-dark: #475569;
  --gender-soft: #f8fafc;
  --gender-soft-strong: #f1f5f9;
  --gender-header: #f8fafc;
  --gender-border: #e2e8f0;
  --gender-border-strong: #cbd5e1;
  --gender-icon: #f1f5f9;
  --gender-badge: #f1f5f9;
  --gender-text: #475569;

  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;

  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.rekam-posyandu-layout,
.rekam-posyandu-layout * {
  box-sizing: border-box;
}


/* =========================================================
   06. GENDER COLOR SYSTEM
   ========================================================= */

.rekam-posyandu-layout.gender-laki {
  --gender-primary: #3b82f6;
  --gender-primary-dark: #2563eb;
  --gender-soft: #eff6ff;
  --gender-soft-strong: #dbeafe;
  --gender-header: #f8fbff;
  --gender-border: #dbeafe;
  --gender-border-strong: #bfdbfe;
  --gender-icon: #eff6ff;
  --gender-badge: #dbeafe;
  --gender-text: #2563eb;
}

.rekam-posyandu-layout.gender-perempuan {
  --gender-primary: #ec4899;
  --gender-primary-dark: #db2777;
  --gender-soft: #fdf2f8;
  --gender-soft-strong: #fce7f3;
  --gender-header: #fffafd;
  --gender-border: #fbcfe8;
  --gender-border-strong: #f9a8d4;
  --gender-icon: #fdf2f8;
  --gender-badge: #fce7f3;
  --gender-text: #db2777;
}


/* =========================================================
   07. SIDEBAR
   ========================================================= */

.rekam-posyandu-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;

  min-width: 0;
}

.rekam-balita-profile {
  position: relative;

  padding: 20px !important;

  border-radius: 14px !important;
  border-top: 1px solid var(--gender-border) !important;
  border-right: 1px solid var(--gender-border) !important;
  border-bottom: 1px solid var(--gender-border) !important;
  border-left: 4px solid var(--gender-primary) !important;

  box-shadow: none !important;
}

.profile-icon {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 10px;

  border-radius: 10px !important;

  font-size: 20px;
  line-height: 1;
}

.rekam-balita-profile .profile-id {
  display: inline-flex;
  align-items: center;

  padding: 4px 8px;

  border-radius: 6px !important;

  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
}

.rekam-balita-profile h3 {
  color: #1e293b;
}

.profile-birth {
  color: #64748b;
}

.profile-age-box {
  display: flex;
  flex-direction: column;
  gap: 3px;

  margin-top: 14px;
  padding: 10px 12px;

  border-radius: 9px !important;
}

.profile-age-box span {
  color: #64748b;
}

.profile-age-box strong {
  color: var(--gender-primary-dark) !important;
}


/* =========================================================
   08. TIPS CARD
   ========================================================= */

.rekam-sidebar-card {
  background: #ffffff !important;

  border: 1px solid var(--gender-border) !important;
  border-radius: 14px !important;

  padding: 18px !important;

  box-shadow: none !important;
}

.sidebar-card-title {
  margin-bottom: 12px;
  color: #334155;
}

.sidebar-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;

  margin-top: 9px;
}

.sidebar-tip:first-of-type {
  margin-top: 0;
}

.sidebar-tip > span {
  flex: 0 0 auto;

  color: var(--gender-primary) !important;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.sidebar-tip p {
  margin: 0;

  color: #64748b;

  font-size: 11px;
  line-height: 1.5;
}


/* =========================================================
   09. MAIN PANEL
   ========================================================= */

.rekam-posyandu-main {
  min-width: 0;
}

.rekam-posyandu-topbar {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  margin-bottom: 18px;

  border-radius: 14px !important;
  border-top: 1px solid var(--gender-border) !important;
  border-right: 1px solid var(--gender-border) !important;
  border-bottom: 1px solid var(--gender-border) !important;
  border-left: 4px solid var(--gender-primary) !important;

  box-shadow: none !important;
}

.rekam-posyandu-topbar h2 {
  color: #1e293b;
}

.rekam-posyandu-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  flex-shrink: 0;
}

.rekam-posyandu-actions .btn-secondary {
  height: 34px;
  padding: 0 13px;

  border: 1px solid #d9dee8;
  border-radius: 8px;

  background: #ffffff;
  color: #596176;

  font-size: 12px;
  font-weight: 600;

  cursor: pointer;

  transition:
    border-color .18s ease,
    color .18s ease,
    background .18s ease;
}

.rekam-posyandu-actions .btn-secondary:hover {
  border-color: var(--gender-primary);
  color: var(--gender-primary-dark);
  background: var(--gender-soft);
}

.rekam-posyandu-actions .btn-secondary:disabled {
  opacity: .6;
  cursor: wait;
}


/* =========================================================
   10. SECTION CARD
   ========================================================= */

.rekam-posyandu-layout .rekam-section {
  position: relative;

  margin-bottom: 18px;

  background: #ffffff !important;

  border-top: 1px solid var(--gender-border) !important;
  border-right: 1px solid var(--gender-border) !important;
  border-bottom: 1px solid var(--gender-border) !important;
  border-left: 4px solid var(--gender-primary) !important;

  border-radius: 14px !important;

  overflow: hidden;

  box-shadow: none !important;
}

.rekam-posyandu-layout .rekam-section:last-child {
  margin-bottom: 0;
}


/* Remove legacy decorative accents */

.rekam-posyandu-layout .rekam-section::before,
.rekam-posyandu-layout .rekam-section::after,
.rekam-posyandu-layout .rekam-section-header::before,
.rekam-posyandu-layout .rekam-section-header::after,
.rekam-posyandu-layout .rekam-section-content::before,
.rekam-posyandu-layout .rekam-section-content::after {
  content: none !important;
  display: none !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   11. SECTION HEADER
   ========================================================= */

.rekam-posyandu-layout .rekam-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  min-width: 0;

  padding: 18px 20px !important;

  background: #ffffff !important;

  border: 0 !important;
  border-bottom: 1px solid var(--gender-border) !important;

  box-shadow: none !important;
}

.rekam-section-header > div {
  min-width: 0;
}

.rekam-section-header h3 {
  margin: 0 0 3px !important;

  color: var(--gender-primary-dark) !important;

  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 700;
}

.rekam-section-header .section-subtitle {
  display: block;

  margin: 0;

  color: #64748b !important;

  font-size: 11px !important;
  line-height: 1.4;
}

.rekam-section-header .btn-secondary {
  flex-shrink: 0;

  min-height: 30px;
  padding: 5px 10px;

  border: 1px solid #d9dee8 !important;
  border-radius: 7px !important;

  background: #ffffff !important;
  color: #596176 !important;

  font-size: 12px;
  font-weight: 600;

  cursor: pointer;

  transition:
    border-color .18s ease,
    color .18s ease,
    background .18s ease;
}

.rekam-section-header .btn-secondary:hover {
  border-color: var(--gender-primary) !important;
  color: var(--gender-primary-dark) !important;
  background: var(--gender-soft) !important;
}


/* =========================================================
   12. SECTION CONTENT
   ========================================================= */

.rekam-posyandu-layout .rekam-section-content {
  min-width: 0;

  padding: 18px 20px !important;

  background: #ffffff !important;

  border: 0 !important;
  box-shadow: none !important;
}


/* No secondary vertical accents inside cards */

.rekam-posyandu-layout .rekam-section > * {
  border-left-color: transparent !important;
}


/* =========================================================
   13. RECORD SUMMARY
   ========================================================= */

.rekam-posyandu-layout .record-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  margin: 0 0 14px;
  padding: 11px 14px;

  background: var(--gender-soft) !important;

  border: 1px solid var(--gender-border) !important;
  border-radius: 9px;

  border-left: 0 !important;
}

.record-summary span {
  color: #64748b;

  font-size: 12px;
  line-height: 1.4;
}

.record-summary strong {
  color: var(--gender-primary-dark);

  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}


/* =========================================================
   14. EMPTY INSIDE SECTION
   ========================================================= */

.rekam-posyandu-layout .history-empty {
  padding: 24px 15px;

  color: #94a3b8;

  font-size: 12px;
  line-height: 1.5;

  text-align: center;
}


/* =========================================================
   15. TABLE PEMERIKSAAN
   ========================================================= */

.rekam-posyandu-layout .rekam-section-content table {
  width: 100%;

  border-collapse: separate;
  border-spacing: 0;

  overflow: hidden;

  border: 1px solid #e2e8f0;
  border-radius: 10px;

  background: #ffffff;
}

.rekam-posyandu-layout .rekam-section-content th {
  padding: 11px 12px;

  background: #f8fafc !important;

  border-bottom: 1px solid #e2e8f0;

  color: #475569;

  font-size: 10px;
  font-weight: 700;

  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .03em;

  text-align: left;
}

.rekam-posyandu-layout .rekam-section-content td {
  padding: 11px 12px;

  background: #ffffff !important;

  border-bottom: 1px solid #eef2f7;

  color: #334155;

  font-size: 13px;
  line-height: 1.4;
}

.rekam-posyandu-layout .rekam-section-content tr:last-child td {
  border-bottom: 0;
}

.rekam-posyandu-layout .rekam-section-content td strong {
  color: #1e293b;

  font-size: 13px;
  font-weight: 700;
}


/* =========================================================
   16. PERTUMBUHAN STATUS
   ========================================================= */

.rekam-posyandu-layout .pertumbuhan-status,
.rekam-posyandu-layout .status-pertumbuhan {
  margin-top: 10px;
  padding: 10px 12px;

  background: #f0fdf4 !important;

  border: 1px solid #dcfce7 !important;
  border-radius: 9px;
}

.rekam-posyandu-layout .pertumbuhan-status span {
  color: #64748b !important;
  font-size: 11px !important;
}

.rekam-posyandu-layout .pertumbuhan-status strong {
  color: #287a43 !important;

  font-size: 10px !important;
  font-weight: 700;
}


/* =========================================================
   17. CATATAN PERTUMBUHAN
   ========================================================= */

.rekam-posyandu-layout .pertumbuhan-catatan {
  margin-top: 10px;

  padding: 10px 12px;

  background: #fffaf0 !important;

  border: 1px solid #f1e3c7 !important;
  border-left: 3px solid #d9a34c !important;
  border-radius: 8px;
}

.rekam-posyandu-layout .pertumbuhan-catatan span {
  display: block;

  margin-bottom: 3px !important;

  color: #8a7655;

  font-size: 9px !important;
  font-weight: 700;
}

.rekam-posyandu-layout .pertumbuhan-catatan p {
  margin: 0;

  color: #6b7280;

  font-size: 11px !important;
  line-height: 1.45 !important;
}


/* =========================================================
   18. PERKEMBANGAN
   ========================================================= */

.rekam-posyandu-layout .perkembangan-last-date {
  margin-bottom: 10px;
  padding: 8px 11px;

  background: #f8fafc !important;

  border: 1px solid #e2e8f0 !important;
  border-radius: 8px;

  color: #64748b;

  font-size: 10px;
}

.rekam-posyandu-layout .perkembangan-grid {
  gap: 10px !important;
  margin-top: 10px;
}

.rekam-posyandu-layout .perkembangan-card {
  min-height: 85px;

  padding: 13px !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;
  border-radius: 10px;

  box-shadow: none !important;
}

.rekam-posyandu-layout .perkembangan-card span {
  display: block;

  margin-bottom: 6px !important;

  color: #64748b !important;

  font-size: 9px !important;
}

.rekam-posyandu-layout .perkembangan-card strong {
  color: #334155 !important;

  font-size: 12px !important;
  line-height: 1.45 !important;
}


/* =========================================================
   19. HASIL PERKEMBANGAN
   ========================================================= */

.rekam-posyandu-layout .perkembangan-result {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}


/* Semantic status colors remain semantic,
   not module colors. */

.rekam-posyandu-layout .status-sesuai {
  background: #e8f5e9;
  color: #2e7d32;
}

.rekam-posyandu-layout .status-melebihi {
  background: #e3f2fd;
  color: #1565c0;
}

.rekam-posyandu-layout .status-terlambat {
  background: #ffebee;
  color: #c62828;
}

.rekam-posyandu-layout .status-netral {
  background: #f5f5f5;
  color: #616161;
}


/* =========================================================
   20. IMUNISASI & VITAMIN
   ========================================================= */

.rekam-posyandu-layout .imunisasi-section,
.rekam-posyandu-layout .vitamin-pmt-section {
  background: #ffffff !important;

  border-top: 1px solid var(--gender-border) !important;
  border-right: 1px solid var(--gender-border) !important;
  border-bottom: 1px solid var(--gender-border) !important;
  border-left: 4px solid var(--gender-primary) !important;
}


/* =========================================================
   21. GRAFIK PERTUMBUHAN / KMS
   ========================================================= */

.rekam-posyandu-layout .grafik-pertumbuhan-container {
  margin: 16px 0 0;

  border: 1px solid #e0e5ec;

  border-radius: 12px;

  overflow: hidden;

  background: #ffffff;
}

.rekam-posyandu-layout .grafik-pertumbuhan-container svg {
  display: block;

  width: 100%;
  height: auto;
}

.rekam-posyandu-layout .grafik-pertumbuhan-info {
  margin: 10px 0 0;

  padding: 10px 14px;

  background: #f8fafc !important;

  border: 1px solid #e2e8f0;
  border-radius: 8px;

  color: #64748b;

  font-size: 10px;
  line-height: 1.5;
}


/* =========================================================
   22. KMS CARD
   Grafik tidak mengikuti aksen modul.
   Badge gender saja yang mengikuti gender anak.
   ========================================================= */

.rekam-posyandu-layout .kms-chart-card {
  margin-top: 16px !important;
  padding: 0 !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;

  overflow: hidden;

  box-shadow: none !important;
}

.rekam-posyandu-layout .kms-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 13px 16px !important;

  background: #ffffff !important;

  border: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.rekam-posyandu-layout .kms-chart-header h4 {
  margin: 0 0 4px;

  color: #1e293b !important;

  font-size: 14px !important;
  line-height: 1.3;
}

.rekam-posyandu-layout .kms-chart-header span {
  color: #64748b !important;

  font-size: 10px;
  line-height: 1.4;
}

.rekam-posyandu-layout .kms-gender {
  display: inline-flex;
  align-items: center;

  flex-shrink: 0;

  padding: 5px 9px !important;

  border-radius: 999px;

  background: #f8fafc !important;

  color: #475569 !important;

  font-size: 10px !important;
  font-weight: 700;
}

.rekam-posyandu-layout.gender-laki .kms-gender {
  background: #eff6ff !important;
  color: #2563eb !important;
}

.rekam-posyandu-layout.gender-perempuan .kms-gender {
  background: #fdf2f8 !important;
  color: #db2777 !important;
}

.rekam-posyandu-layout .kms-chart-wrapper {
  width: 100%;

  padding: 12px 14px 6px !important;

  background: #ffffff !important;

  overflow-x: auto;
  overflow-y: hidden;
}

.rekam-posyandu-layout .kms-chart {
  display: block;

  width: 100%;
  min-width: 700px;
  height: auto;
}


/* =========================================================
   23. KMS INTERNAL GRAPH
   Dipertahankan dari desain grafik yang sudah ada.
   ========================================================= */

.kms-grid {
  stroke: #cfd7d1;
  stroke-width: 1;
  opacity: .55;
}

.kms-axis-text {
  fill: #657068;
  font-size: 12px;
  font-weight: 400;
}

.kms-axis-title {
  fill: #4f5b54;
  font-size: 12px;
  font-weight: 600;
}

.kms-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kms-sd-minus3 {
  stroke: #c6ceca;
  stroke-width: 2;
  stroke-dasharray: 6 5;
}

.kms-sd-minus2 {
  stroke: #aeb9b2;
  stroke-width: 2.5;
}

.kms-sd-minus1 {
  stroke: #c2cac5;
  stroke-width: 1.8;
}

.kms-median {
  stroke: #7d8982;
  stroke-width: 3;
}

.kms-sd-plus1 {
  stroke: #c2cac5;
  stroke-width: 1.8;
}

.kms-sd-plus2 {
  stroke: #aeb9b2;
  stroke-width: 2.5;
}

.kms-sd-plus3 {
  stroke: #c6ceca;
  stroke-width: 2;
  stroke-dasharray: 6 5;
}

.kms-child-line {
  fill: none;

  stroke: #26352d;
  stroke-width: 3.5;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.kms-child-point {
  fill: #ffffff;

  stroke: #26352d;
  stroke-width: 3;

  cursor: pointer;
}

.kms-child-point:hover {
  r: 8;
}

.kms-curve-label {
  fill: #657068;

  font-size: 11px;
  font-weight: 600;
}

.rekam-posyandu-layout .kms-chart-note {
  padding: 9px 14px 11px !important;

  background: #f8fafc !important;

  border: 0 !important;
  border-top: 1px solid #e2e8f0 !important;

  color: #64748b !important;

  font-size: 10px !important;
  line-height: 1.45;
}


/* =========================================================
   24. LOADING / ERROR
   ========================================================= */

.rekam-posyandu-layout .loading,
.rekam-posyandu-container .loading {
  min-height: 120px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 25px;

  color: #64748b;

  font-size: 13px;
}

.rekam-posyandu-container .table-error {
  padding: 18px;

  background: #fff7f7;

  border: 1px solid #fecaca;
  border-radius: 10px;

  color: #b91c1c;

  font-size: 13px;
  line-height: 1.5;
}


/* =========================================================
   25. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .rekam-posyandu-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
  }

}


/* =========================================================
   26. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 780px) {

  .rekam-posyandu-layout {
    grid-template-columns: 1fr;
  }

  .rekam-posyandu-sidebar {
    position: static;
  }

  .rekam-posyandu-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .rekam-posyandu-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .rekam-posyandu-actions .btn-secondary {
    flex: 0 0 auto;
  }

  .rekam-section-header {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .rekam-section-header .btn-secondary {
    align-self: flex-start;
  }

  .select-balita-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .select-balita-card .btn-primary {
    width: 100%;
  }

}


/* =========================================================
   27. RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  #rekamPageHeader h2 {
    font-size: 21px;
  }

  #rekamPageHeader p {
    font-size: 12px;
  }

  .rekam-posyandu-layout {
    gap: 12px;
  }

  .rekam-posyandu-layout .rekam-section-content {
    padding: 14px !important;
  }

  .rekam-posyandu-layout .rekam-section-header {
    padding: 15px 16px !important;
  }

  .rekam-posyandu-actions {
    width: 100%;
  }

  .rekam-posyandu-actions .btn-secondary {
    flex: 1;
  }

  .record-summary {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 5px !important;
  }

  .rekam-posyandu-layout .kms-chart-wrapper {
    padding: 10px 8px 5px !important;
  }

}


/* =========================================================
   28. IMPORTANT — LEGACY COLOR OVERRIDES
   =========================================================
   Hanya berlaku di Rekam POSYANDU.
   ========================================================= */

/* Tidak ada warna khusus untuk Imunisasi */
.rekam-posyandu-layout .imunisasi-section {
  border-left-color: var(--gender-primary) !important;
}

/* Tidak ada warna khusus untuk Vitamin & PMT */
.rekam-posyandu-layout .vitamin-pmt-section {
  border-left-color: var(--gender-primary) !important;
}

/* Semua section menggunakan satu aksen */
.rekam-posyandu-layout .rekam-section {
  border-left-color: var(--gender-primary) !important;
}

/* Header/content tidak membuat aksen kedua */
.rekam-posyandu-layout .rekam-section-header,
.rekam-posyandu-layout .rekam-section-content {
  border-left-color: transparent !important;
}

/* Grafik tetap netral */
.rekam-posyandu-layout .kms-chart-card,
.rekam-posyandu-layout .kms-chart-wrapper {
  border-left-color: #e2e8f0 !important;
}


/* =========================================================
   END — REKAM POSYANDU FINAL
   ========================================================= */

   /* =========================================================
   PICKER PILIH BALITA
   ========================================================= */

.select-balita-card {
  width: 100%;
  margin-bottom: 20px;
  padding: 24px 22px;

  background: #ffffff;

  border: 1px solid #e2e8f0;
  border-radius: 16px;

  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);

  box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.select-balita-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 18px;
}

.select-balita-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.select-balita-icon {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 12px;

  background: #eef2ff;

  font-size: 21px;
  line-height: 1;
}

.select-balita-title h3 {
  margin: 0;

  color: #1e293b;

  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}

.select-balita-title p {
  margin: 3px 0 0;

  color: #64748b;

  font-size: 12px;
  line-height: 1.45;
}


/* =========================================================
   SEARCH
   ========================================================= */

.select-balita-search {
  position: relative;

  width: 100%;
  margin-bottom: 18px;
}

.select-search-icon {
  position: absolute;

  left: 14px;
  top: 50%;

  transform: translateY(-50%);

  color: #64748b;

  font-size: 16px;

  pointer-events: none;
}

.search-balita-input {
  width: 100%;
  height: 44px;

  padding: 0 14px 0 42px;

  border: 1px solid #dbe2ea;
  border-radius: 10px;

  background: #ffffff;

  color: #334155;

  font-family: inherit;
  font-size: 13px;

  outline: none;

  box-sizing: border-box;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.search-balita-input::placeholder {
  color: #94a3b8;
}

.search-balita-input:focus {
  border-color: #94a3b8;

  box-shadow:
    0 0 0 3px rgba(100, 116, 139, .08);
}


/* =========================================================
   GRID BALITA
   ========================================================= */

.pilih-balita-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;

  width: 100%;
}


/* =========================================================
   KARTU BALITA
   ========================================================= */

.pilih-balita-item {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  min-width: 0;
  min-height: 108px;

  padding: 16px;

  border: 1px solid #e2e8f0;
  border-radius: 13px;

  background: #ffffff;

  color: #334155;

  font-family: inherit;

  text-align: left;

  cursor: pointer;

  box-sizing: border-box;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.pilih-balita-item:hover {
  transform: translateY(-1px);

  box-shadow:
    0 4px 12px rgba(15, 23, 42, .06);
}

.pilih-balita-item:active {
  transform: translateY(0);
}


/* =========================================================
   WARNA BERDASARKAN JENIS KELAMIN
   ========================================================= */

.pilih-balita-item.laki-laki {
  background: #eff6ff;

  border-color: #bfdbfe;
}

.pilih-balita-item.laki-laki:hover {
  background: #eaf3ff;

  border-color: #93c5fd;
}

.pilih-balita-item.perempuan {
  background: #fdf2f8;

  border-color: #fbcfe8;
}

.pilih-balita-item.perempuan:hover {
  background: #fcebf5;

  border-color: #f9a8d4;
}

.pilih-balita-item.gender-tidak-diketahui {
  background: #f8fafc;

  border-color: #e2e8f0;
}


/* =========================================================
   ICON GENDER
   ========================================================= */

.pilih-balita-gender {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 38px;

  margin-right: 12px;

  border-radius: 10px;

  font-size: 20px;
  line-height: 1;
}

.pilih-balita-item.laki-laki .pilih-balita-gender {
  background: #dbeafe;
}

.pilih-balita-item.perempuan .pilih-balita-gender {
  background: #fce7f3;
}

.pilih-balita-item.gender-tidak-diketahui .pilih-balita-gender {
  background: #e2e8f0;
}


/* =========================================================
   DATA BALITA
   ========================================================= */

.pilih-balita-data {
  min-width: 0;

  flex: 1;
}

.pilih-balita-nama {
  margin-bottom: 5px;

  color: #1e293b;

  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pilih-balita-info {
  display: flex;
  align-items: center;
  gap: 4px;

  color: #64748b;

  font-size: 11px;
  line-height: 1.4;

  white-space: nowrap;
}


/* =========================================================
   ID BALITA
   ========================================================= */

.pilih-balita-id {
  position: absolute;

  top: 12px;
  right: 12px;

  padding: 4px 7px;

  border-radius: 6px;

  background: rgba(255,255,255,.8);

  color: #64748b;

  font-size: 9px;
  line-height: 1.2;
  font-weight: 700;
}


/* =========================================================
   EMPTY / LOADING
   ========================================================= */

.pilih-balita-empty {
  grid-column: 1 / -1;

  min-height: 150px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 30px;

  border: 1px dashed #dbe2ea;
  border-radius: 12px;

  background: #fafbfc;

  text-align: center;
}

.pilih-balita-empty-icon {
  margin-bottom: 3px;

  font-size: 28px;
  line-height: 1;
}

.pilih-balita-empty strong {
  color: #475569;

  font-size: 13px;
}

.pilih-balita-empty span {
  color: #94a3b8;

  font-size: 11px;
}


/* =========================================================
   HINT
   ========================================================= */

.select-balita-hint {
  margin-top: 15px;

  color: #64748b;

  font-size: 11px;
  line-height: 1.5;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

  .pilih-balita-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 480px) {

  .select-balita-card {
    padding: 18px 16px;
  }

  .select-balita-title {
    align-items: flex-start;
  }

  .pilih-balita-item {
    min-height: 96px;

    padding: 13px;
  }

  .pilih-balita-gender {
    width: 34px;
    height: 34px;

    flex-basis: 34px;

    margin-right: 10px;

    font-size: 18px;
  }

}

/* =========================================================
   PERTUMBUHAN — PEMERIKSAAN + GRAFIK
   ========================================================= */

.pertumbuhan-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 14px;

  width: 100%;
}


/* =========================================================
   CARD PEMERIKSAAN & GRAFIK
   ========================================================= */

.pertumbuhan-hasil-panel,
.pertumbuhan-grafik-panel {
  min-width: 0;

  background: #ffffff;

  border: 1px solid #e1e6ed;

  border-radius: 11px;

  overflow: hidden;
}


/* =========================================================
   HEADER CARD
   ========================================================= */

.pertumbuhan-panel-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  min-height: 48px;

  padding: 10px 13px;

  background: #ffffff;

  border-bottom: 1px solid #e8edf2;
}


.pertumbuhan-panel-header h4 {
  margin: 0;

  color: #293244;

  font-size: 12px;

  line-height: 1.3;

  font-weight: 700;
}


.pertumbuhan-panel-header span {
  display: block;

  margin-top: 2px;

  color: #7a8495;

  font-size: 9px;

  line-height: 1.35;
}


.pertumbuhan-panel-header strong {
  flex-shrink: 0;

  color: #475569;

  font-size: 9px;

  font-weight: 600;

  white-space: nowrap;
}


/* =========================================================
   TABEL PEMERIKSAAN
   ========================================================= */

.pertumbuhan-hasil-panel .pertumbuhan-table {
  width: 100%;

  margin: 0;

  border: 0;

  border-radius: 0;

  overflow: hidden;
}


.pertumbuhan-hasil-panel .pertumbuhan-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(70px, .65fr)
    minmax(90px, 1fr);

  align-items: center;

  min-height: 38px;

  border-bottom: 1px solid #edf1f5;
}


.pertumbuhan-hasil-panel .pertumbuhan-row:last-child {
  border-bottom: 0;
}


.pertumbuhan-hasil-panel .pertumbuhan-row > * {
  min-width: 0;

  padding: 7px 9px;

  font-size: 9px;

  line-height: 1.35;

  box-sizing: border-box;
}


.pertumbuhan-hasil-panel
.pertumbuhan-row.header {
  min-height: 32px;

  background: #f7f9fb;
}


.pertumbuhan-hasil-panel
.pertumbuhan-row.header > * {
  color: #64748b;

  font-size: 8px;

  font-weight: 700;

  text-transform: uppercase;
}


.pertumbuhan-hasil-panel
.pertumbuhan-row:not(.header)
> span:first-child {
  color: #475569;

  font-size: 10px;

  font-weight: 600;
}


.pertumbuhan-hasil-panel
.pertumbuhan-row:not(.header)
> strong {
  color: #293244;

  font-size: 10px;

  font-weight: 700;
}


/* =========================================================
   INTERPRETASI
   ========================================================= */

.pertumbuhan-hasil-panel
.interpretasi-badge {
  display: inline-flex;

  align-items: center;

  width: fit-content;

  max-width: 100%;

  padding: 4px 7px;

  border-radius: 999px;

  background: #eaf7ee;

  color: #39764b;

  font-size: 8px;

  line-height: 1.2;

  font-weight: 700;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


/* =========================================================
   AREA GRAFIK
   ========================================================= */

.pertumbuhan-grafik-panel {
  display: flex;

  flex-direction: column;

  min-height: 0;
}


.pertumbuhan-grafik-placeholder {
  display: flex;

  align-items: center;
  justify-content: center;

  flex: 1;

  min-height: 230px;

  padding: 15px;

  color: #94a3b8;

  background: #ffffff;

  font-size: 10px;

  text-align: center;
}


/* =========================================================
   GRAFIK AKTUAL
   ========================================================= */

.pertumbuhan-grafik-panel
.grafik-pertumbuhan-container {

  width: 100%;

  margin: 0;

  padding: 0;

  border: 0;

  border-radius: 0;

  background: #ffffff;

  overflow: hidden;
}


.pertumbuhan-grafik-panel
.grafik-pertumbuhan-container svg {

  display: block;

  width: 100%;

  height: auto;

  max-width: 100%;
}


/* =========================================================
   STATUS — FULL WIDTH
   ========================================================= */

.pertumbuhan-status {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  width: 100%;

  min-height: 38px;

  margin-top: 12px;

  padding: 8px 12px;

  box-sizing: border-box;

  background: #f5fbf7;

  border: 1px solid #d9ecdf;

  border-radius: 9px;
}


.pertumbuhan-status > span {

  color: #5d6b63;

  font-size: 9px;

  font-weight: 600;
}


.pertumbuhan-status > strong {

  display: inline-flex;

  align-items: center;

  padding: 5px 9px;

  border-radius: 999px;

  background: #dff2e5;

  color: #347346;

  font-size: 8px;

  line-height: 1;

  font-weight: 700;
}


/* =========================================================
   CATATAN — FULL WIDTH
   ========================================================= */

.pertumbuhan-catatan {

  display: flex;

  flex-direction: column;

  gap: 3px;

  width: 100%;

  margin-top: 9px;

  padding: 9px 12px;

  box-sizing: border-box;

  background: #fffaf1;

  border: 1px solid #f0dfbd;

  border-left: 3px solid #d69b38;

  border-radius: 8px;
}


.pertumbuhan-catatan > span {

  color: #896b3d;

  font-size: 8px;

  line-height: 1.2;

  font-weight: 700;

  text-transform: uppercase;
}


.pertumbuhan-catatan > p {

  margin: 0;

  color: #665942;

  font-size: 9px;

  line-height: 1.45;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .pertumbuhan-layout {

    grid-template-columns: 1fr;

  }

}


@media (max-width: 600px) {

  .pertumbuhan-hasil-panel
  .pertumbuhan-row {

    grid-template-columns:
      1.15fr
      .75fr
      1fr;

  }

  .pertumbuhan-hasil-panel
  .pertumbuhan-row > * {

    padding: 7px 7px;

  }

  .pertumbuhan-hasil-panel
  .pertumbuhan-row:not(.header)
  > span:first-child {

    font-size: 9px;

  }

}

/* =========================================================
   REKAM POSYANDU — PERTUMBUHAN FINAL
   ========================================================= */

.rekam-posyandu-layout .pertumbuhan-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 14px;

  width: 100%;
  margin: 0;

  align-items: stretch;
}


/* =========================================================
   CARD HASIL & GRAFIK
========================================================= */

.rekam-posyandu-layout
.pertumbuhan-hasil-panel,

.rekam-posyandu-layout
.pertumbuhan-grafik-panel {

  min-width: 0;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 11px;

  overflow: hidden;

  box-shadow: none;
}


/* =========================================================
   HEADER CARD
========================================================= */

.rekam-posyandu-layout
.pertumbuhan-panel-header {

  min-height: 48px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 10px 13px;

  background: #ffffff;

  border-bottom: 1px solid #e8edf2;
}


.rekam-posyandu-layout
.pertumbuhan-panel-header h4 {

  margin: 0;

  color: #293244;

  font-size: 12px;

  line-height: 1.3;

  font-weight: 700;
}


.rekam-posyandu-layout
.pertumbuhan-panel-header span {

  display: block;

  margin-top: 3px;

  color: #7a8495;

  font-size: 9px;

  line-height: 1.35;
}


.rekam-posyandu-layout
.pertumbuhan-panel-header strong {

  flex-shrink: 0;

  padding: 5px 9px;

  border-radius: 999px;

  background: var(--gender-soft, #f8fafc);

  color: var(--gender-primary-dark, #475569);

  font-size: 9px;

  line-height: 1;

  font-weight: 700;

  white-space: nowrap;
}


/* =========================================================
   TABEL PEMERIKSAAN
========================================================= */

.rekam-posyandu-layout
.pertumbuhan-hasil-panel
.pertumbuhan-table {

  width: 100%;

  margin: 0;

  border: 0;

  border-radius: 0;

  overflow: hidden;

  background: #ffffff;
}


.rekam-posyandu-layout
.pertumbuhan-hasil-panel
.pertumbuhan-row {

  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(70px, .65fr)
    minmax(90px, 1fr);

  align-items: center;

  min-height: 38px;

  border-bottom: 1px solid #edf1f5;
}


.rekam-posyandu-layout
.pertumbuhan-hasil-panel
.pertumbuhan-row:last-child {

  border-bottom: 0;
}


.rekam-posyandu-layout
.pertumbuhan-hasil-panel
.pertumbuhan-row > * {

  min-width: 0;

  padding: 7px 9px;

  box-sizing: border-box;
}


.rekam-posyandu-layout
.pertumbuhan-hasil-panel
.pertumbuhan-row.header {

  min-height: 32px;

  background: #f8fafc;
}


.rekam-posyandu-layout
.pertumbuhan-hasil-panel
.pertumbuhan-row.header > * {

  color: #64748b;

  font-size: 8px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .03em;
}


.rekam-posyandu-layout
.pertumbuhan-hasil-panel
.pertumbuhan-row:not(.header)
> span:first-child {

  color: #475569;

  font-size: 10px;

  font-weight: 600;
}


.rekam-posyandu-layout
.pertumbuhan-hasil-panel
.pertumbuhan-row:not(.header)
> strong {

  color: #293244;

  font-size: 10px;

  font-weight: 700;
}


/* =========================================================
   INTERPRETASI
========================================================= */

.rekam-posyandu-layout
.pertumbuhan-hasil-panel
.interpretasi-badge {

  display: inline-flex;

  align-items: center;

  width: fit-content;

  max-width: 100%;

  padding: 4px 7px;

  border-radius: 999px;

  background: #ecfdf3;

  color: #287a43;

  font-size: 8px;

  line-height: 1.2;

  font-weight: 700;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


/* =========================================================
   GRAFIK
========================================================= */

.rekam-posyandu-layout
.pertumbuhan-grafik-panel {

  display: flex;

  flex-direction: column;

  min-height: 0;
}


.rekam-posyandu-layout
.pertumbuhan-grafik-panel
.grafik-pertumbuhan-container {

  width: 100%;

  margin: 0;

  padding: 0;

  border: 0;

  border-radius: 0;

  background: #ffffff;

  overflow: hidden;
}


.rekam-posyandu-layout
.pertumbuhan-grafik-panel
.grafik-pertumbuhan-container svg {

  display: block;

  width: 100%;

  height: auto;

  max-width: 100%;
}


/* =========================================================
   GRAFIK EMPTY
========================================================= */

.rekam-posyandu-layout
.pertumbuhan-grafik-panel
.pertumbuhan-chart-empty {

  min-height: 230px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

  color: #94a3b8;

  font-size: 10px;

  text-align: center;
}


/* =========================================================
   INFO GRAFIK
========================================================= */

.rekam-posyandu-layout
.grafik-pertumbuhan-info {

  margin: 8px 10px 10px;

  padding: 8px 10px;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 7px;

  color: #64748b;

  font-size: 9px;

  line-height: 1.45;
}


/* =========================================================
   STATUS — DI BAWAH KEDUA CARD
========================================================= */

.rekam-posyandu-layout
.pertumbuhan-status {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  width: 100%;

  min-height: 38px;

  margin-top: 12px;

  padding: 8px 12px;

  background: #f5fbf7 !important;

  border: 1px solid #d9ecdf !important;

  border-radius: 9px;
}


.rekam-posyandu-layout
.pertumbuhan-status > span {

  color: #5d6b63;

  font-size: 9px;

  font-weight: 600;
}


.rekam-posyandu-layout
.pertumbuhan-status > strong {

  display: inline-flex;

  align-items: center;

  padding: 5px 9px;

  border-radius: 999px;

  background: #dff2e5;

  color: #347346;

  font-size: 8px;

  line-height: 1;

  font-weight: 700;
}


/* =========================================================
   CATATAN — FULL WIDTH
========================================================= */

.rekam-posyandu-layout
.pertumbuhan-catatan {

  display: flex;

  flex-direction: column;

  gap: 3px;

  width: 100%;

  margin-top: 9px;

  padding: 9px 12px;

  background: #fffaf1 !important;

  border: 1px solid #f0dfbd !important;

  border-left: 3px solid #d69b38 !important;

  border-radius: 8px;
}


.rekam-posyandu-layout
.pertumbuhan-catatan > span {

  color: #896b3d;

  font-size: 8px;

  line-height: 1.2;

  font-weight: 700;

  text-transform: uppercase;
}


.rekam-posyandu-layout
.pertumbuhan-catatan > p {

  margin: 0;

  color: #665942;

  font-size: 9px;

  line-height: 1.45;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

  .rekam-posyandu-layout
  .pertumbuhan-layout {

    grid-template-columns: 1fr;

  }

}

/* =========================================================
   PERKEMBANGAN
   1 INDIKATOR = 1 BARIS
   KOLOM:
   INDIKATOR | TARGET CAPAIAN | INTERPRETASI | SARAN
========================================================= */


/* =========================================================
   TANGGAL SKRINING
========================================================= */

.perkembangan-last-date {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  width: 100%;

  margin-bottom: 10px;

  padding: 8px 11px;

  box-sizing: border-box;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 8px;

  color: #64748b;

  font-size: 9px;

  line-height: 1.3;

}


.perkembangan-last-date span {

  font-weight: 600;

}


.perkembangan-last-date strong {

  color: #334155;

  font-weight: 700;

}


/* =========================================================
   TABEL PERKEMBANGAN
========================================================= */

.perkembangan-indikator-table {

  width: 100%;

  margin-bottom: 10px;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid #dfe6ef;

  border-radius: 10px;

}


/* =========================================================
   BARIS TABEL PERKEMBANGAN
   KOLOM:
   INDIKATOR | TARGET CAPAIAN | HASIL PENILAIAN | SARAN

   Kolom Saran dibuat paling fleksibel agar teks
   rekomendasi tidak terlalu banyak terpotong.
========================================================= */

.perkembangan-indikator-row {

  display: grid;

  grid-template-columns:
    minmax(125px, 1fr)
    minmax(190px, 1.45fr)
    minmax(115px, 0.85fr)
    minmax(250px, 1.8fr);

  width: 100%;

  box-sizing: border-box;

  border-bottom: 1px solid #e5eaf0;

}


/* Baris terakhir tidak mempunyai garis bawah */

.perkembangan-indikator-row:last-child {

  border-bottom: none;

}


/* =========================================================
   HEADER
========================================================= */

.perkembangan-indikator-header {

  background: #f8fafc;

  color: #64748b;

  font-size: 8px;

  line-height: 1.2;

  font-weight: 800;

  text-transform: uppercase;

}


/* =========================================================
   SEMUA CELL
========================================================= */

.perkembangan-indikator-row > div {

  min-width: 0;

  box-sizing: border-box;

  padding: 9px 10px;

  border-right: 1px solid #e8edf3;

  display: flex;

  align-items: center;

}


.perkembangan-indikator-row > div:last-child {

  border-right: none;

}


/* =========================================================
   NAMA INDIKATOR
========================================================= */

.perkembangan-indikator-name {

  display: flex;

  align-items: center;

  gap: 7px;

  background: #fbfcfe;

}


.perkembangan-indikator-name strong {

  display: block;

  min-width: 0;

  color: #1e293b;

  font-size: 9px;

  line-height: 1.3;

  font-weight: 800;

}


/* =========================================================
   ICON INDIKATOR
========================================================= */

.perkembangan-indikator-icon {

  width: 28px;

  height: 28px;

  flex: 0 0 28px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 8px;

  background: #f1f5f9;

  font-size: 15px;

}


/* =========================================================
   TARGET CAPAIAN
========================================================= */

.perkembangan-target-value {

  color: #334155;

  font-size: 9px;

  line-height: 1.45;

  font-weight: 500;

  overflow-wrap: anywhere;

  word-break: normal;

}


/* =========================================================
   HEADER TABEL PERKEMBANGAN
========================================================= */

.perkembangan-indikator-header > div {

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  min-width: 0;

}


/* =========================================================
   INTERPRETASI
========================================================= */

.perkembangan-status-value {

  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 0;

  min-height: 100%;

  text-align: center;

}


/* =========================================================
   BADGE / TEKS INTERPRETASI
========================================================= */

.perkembangan-status-value span {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: auto;

  max-width: 100%;

  min-height: 22px;

  padding: 4px 8px;

  box-sizing: border-box;

  border-radius: 999px;

  font-size: 8px;

  line-height: 1.25;

  font-weight: 700;

  text-align: center;

  overflow-wrap: anywhere;

}


/* =========================================================
   HIJAU
   TERCAPAI / SESUAI / MELEBIHI
========================================================= */

.perkembangan-status-value span.status-sesuai {

  background: #ecfdf3 !important;

  color: #15803d !important;

}


/* =========================================================
   MERAH
   BELUM TERCAPAI / TERLAMBAT
========================================================= */

.perkembangan-status-value span.status-terlambat {

  background: #fef2f2 !important;

  color: #dc2626 !important;

}


/* =========================================================
   ORANGE
   MERAGUKAN
   TERCAPAI SEBAGIAN
   PERLU PEMANTAUAN
   TIDAK DAPAT DINILAI
========================================================= */

.perkembangan-status-value span.status-meragukan {

  background: #fff7ed !important;

  color: #d97706 !important;

}


/* =========================================================
   NETRAL
========================================================= */

.perkembangan-status-value span.status-netral {

  background: #f1f5f9 !important;

  color: #64748b !important;

}


/* =========================================================
   SARAN
========================================================= */

.perkembangan-saran-value {

  min-width: 0;

  color: #475569;

  font-size: 9px;

  line-height: 1.45;

  font-weight: 500;

  overflow-wrap: break-word;

  word-break: normal;

  white-space: normal;

  display: block !important;

}


/* =========================================================
   KESIMPULAN & TINDAK LANJUT
========================================================= */

.perkembangan-interpretasi {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;

  margin-top: 10px;

}


/* =========================================================
   CARD KESIMPULAN / TINDAK LANJUT
========================================================= */

.perkembangan-interpretasi > div {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  min-width: 0;

  min-height: 46px;

  padding: 9px 12px;

  box-sizing: border-box;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 9px;

}


/* =========================================================
   LABEL
========================================================= */

.perkembangan-interpretasi span {

  flex: 0 0 auto;

  color: #64748b;

  font-size: 9px;

  line-height: 1.25;

  font-weight: 700;

}


/* =========================================================
   NILAI
========================================================= */

.perkembangan-interpretasi strong {

  min-width: 0;

  color: #1e293b;

  font-size: 10px;

  line-height: 1.35;

  font-weight: 700;

  text-align: right;

  overflow-wrap: anywhere;

}


/* =========================================================
   KETERANGAN
========================================================= */

.record-note {

  margin-top: 10px;

  padding: 10px 12px;

  box-sizing: border-box;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 9px;

}


.record-note strong {

  display: block;

  margin-bottom: 4px;

  color: #64748b;

  font-size: 9px;

  font-weight: 700;

}


.record-note div {

  color: #334155;

  font-size: 9px;

  line-height: 1.45;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .perkembangan-indikator-row {

    grid-template-columns:
      120px
      minmax(180px, 1.35fr)
      minmax(110px, 0.8fr)
      minmax(230px, 1.7fr);

  }

}


@media (max-width: 850px) {

  .perkembangan-indikator-table {

    overflow-x: auto;

  }


  .perkembangan-indikator-row {

    min-width: 760px;

    grid-template-columns:
      120px
      210px
      125px
      240px;

  }

}


@media (max-width: 600px) {

  .perkembangan-interpretasi {

    grid-template-columns: 1fr;

  }


  .perkembangan-last-date {

    align-items: flex-start;

    flex-direction: column;

    gap: 3px;

  }

}

/* =========================================================
   KESIMPULAN FULL WIDTH
========================================================= */

.perkembangan-kesimpulan-full {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  width: 100%;

  min-width: 0;

  margin-top: 10px;

  padding: 10px 12px;

  box-sizing: border-box;

  background: #f8fafc;

  border: 1px solid #dfe6ef;

  border-radius: 9px;

}


.perkembangan-kesimpulan-full span {

  flex: 0 0 auto;

  color: #64748b;

  font-size: 9px;

  line-height: 1.3;

  font-weight: 700;

}


.perkembangan-kesimpulan-full strong {

  min-width: 0;

  color: #1e293b;

  font-size: 10px;

  line-height: 1.35;

  font-weight: 700;

  text-align: right;

  overflow-wrap: anywhere;

}


/* =========================================================
   REKOMENDASI STIMULASI
========================================================= */

.perkembangan-rekomendasi {

  width: 100%;

  min-width: 0;

  margin-top: 10px;

  box-sizing: border-box;

  background: #ffffff;

  border: 1px solid #dfe6ef;

  border-radius: 10px;

  overflow: hidden;

}


/* =========================================================
   HEADER REKOMENDASI
========================================================= */

.perkembangan-rekomendasi-title {

  display: grid;

  grid-template-columns:
    22px
    minmax(0, 1fr);

  gap: 8px;

  align-items: center;

  width: 100%;

  min-width: 0;

  padding: 10px 12px;

  box-sizing: border-box;

  background: #f8fafc;

  border-bottom: 1px solid #dfe6ef;

}


/* =========================================================
   ICON
========================================================= */

.perkembangan-rekomendasi-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 22px;

  height: 22px;

  box-sizing: border-box;

  background: #eaf5ff;

  border: 1px solid #cfe5ff;

  border-radius: 6px;

  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    sans-serif;

  font-size: 12px;

  line-height: 1;

}


/* =========================================================
   BLOK JUDUL
========================================================= */

.perkembangan-rekomendasi-heading {

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-width: 0;

  gap: 2px;

}


/* =========================================================
   JUDUL
========================================================= */

.perkembangan-rekomendasi-heading strong {

  display: block;

  margin: 0;

  padding: 0;

  color: #24527a;

  font-size: 10px;

  line-height: 1.3;

  font-weight: 800;

}


/* =========================================================
   DESKRIPSI
========================================================= */

.perkembangan-rekomendasi-heading small {

  display: block;

  margin: 0;

  padding: 0;

  color: #64748b;

  font-size: 8px;

  line-height: 1.4;

  font-weight: 500;

  text-align: left;

}


/* =========================================================
   ITEM DOMAIN
========================================================= */

.perkembangan-rekomendasi-item {

  display: grid;

  grid-template-columns:
    145px
    minmax(0, 1fr);

  gap: 14px;

  align-items: start;

  padding: 11px 12px;

  box-sizing: border-box;

  border-bottom: 1px solid #e8edf3;

}


.perkembangan-rekomendasi-item:last-child {

  border-bottom: none;

}


/* =========================================================
   NAMA DOMAIN
========================================================= */

.perkembangan-rekomendasi-item > strong {

  display: flex;

  align-items: center;

  gap: 6px;

  min-width: 0;

  padding: 6px 8px;

  box-sizing: border-box;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 7px;

  color: #1e293b;

  font-size: 9.5px;

  line-height: 1.35;

  font-weight: 800;

}


/* =========================================================
   ISI AKTIVITAS
========================================================= */

.perkembangan-rekomendasi-item p {

  margin: 0 0 7px;

  color: #334155;

  font-size: 9.5px;

  line-height: 1.5;

  font-weight: 500;

}


/* =========================================================
   LIST AKTIVITAS
========================================================= */

.perkembangan-rekomendasi-item ul {

  margin: 0;

  padding: 0;

  list-style: none;

}


.perkembangan-rekomendasi-item li {

  position: relative;

  margin: 0 0 5px;

  padding-left: 17px;

  color: #334155;

  font-size: 9.5px;

  line-height: 1.55;

  font-weight: 500;

}


.perkembangan-rekomendasi-item li:last-child {

  margin-bottom: 0;

}


/* bullet */

.perkembangan-rekomendasi-item li::before {

  content: "✓";

  position: absolute;

  left: 0;

  top: 0;

  color: #2563eb;

  font-size: 9px;

  line-height: 1.55;

  font-weight: 800;

}


/* =========================================================
   HIGHLIGHT TARGET
========================================================= */

.perkembangan-rekomendasi-item .target-highlight {

  display: block;

  margin-bottom: 7px;

  color: #334155;

  font-size: 8px;

  line-height: 1.45;

  font-weight: 700;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 850px) {

  .perkembangan-rekomendasi-item {

    grid-template-columns:
      125px
      minmax(0, 1fr);

    gap: 10px;

  }

}


@media (max-width: 600px) {

  .perkembangan-kesimpulan-full {

    align-items: flex-start;

    flex-direction: column;

    gap: 4px;

  }


  .perkembangan-kesimpulan-full strong {

    text-align: left;

  }


  .perkembangan-rekomendasi-title {

    align-items: flex-start;

    flex-direction: column;

    gap: 5px;

  }


  .perkembangan-rekomendasi-title small {

    max-width: 100%;

    text-align: left;

  }


  .perkembangan-rekomendasi-item {

    grid-template-columns: 1fr;

    gap: 7px;

  }

}

/* =========================================================
   FORM REKAM POSYANDU
========================================================= */

.rekam-form-card {

  width: 100%;

  box-sizing: border-box;

  background: #ffffff;

  border: 1px solid #dbe4ef;

  border-radius: 12px;

  overflow: hidden;

}


/* =========================================================
   HEADER
========================================================= */

.rekam-form-header {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 16px 18px;

  background: #ffffff;

  border-bottom: 1px solid #e5ebf2;

}


.rekam-form-header-icon {

  width: 36px;

  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  background: #eaf5ff;

  border: 1px solid #cfe5ff;

  border-radius: 9px;

  font-size: 18px;

}


.rekam-form-header h3 {

  margin: 0;

  color: #24527a;

  font-size: 16px;

  line-height: 1.3;

  font-weight: 800;

}


.rekam-form-header p {

  margin: 3px 0 0;

  color: #64748b;

  font-size: 9px;

  line-height: 1.4;

}


/* =========================================================
   BODY
========================================================= */

.rekam-form-body {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px 14px;

  padding: 18px;

  box-sizing: border-box;

}


/* =========================================================
   GROUP
========================================================= */

.rekam-form-group {

  min-width: 0;

}


.rekam-form-group.full {

  grid-column: 1 / -1;

}


.rekam-form-group label {

  display: block;

  margin-bottom: 5px;

  color: #334155;

  font-size: 10px;

  line-height: 1.3;

  font-weight: 700;

}


.rekam-form-group input,
.rekam-form-group select,
.rekam-form-group textarea {

  width: 100%;

  box-sizing: border-box;

  padding: 9px 10px;

  color: #1e293b;

  background: #ffffff;

  border: 1px solid #d6dee9;

  border-radius: 7px;

  outline: none;

  font-family: inherit;

  font-size: 10px;

  line-height: 1.4;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;

}


.rekam-form-group input:focus,
.rekam-form-group select:focus,
.rekam-form-group textarea:focus {

  border-color: #3b82f6;

  box-shadow:
    0 0 0 3px
    rgba(59,130,246,.10);

}


.rekam-form-group input[readonly] {

  background: #f8fafc;

  color: #64748b;

}


.rekam-form-group textarea {

  min-height: 88px;

  resize: vertical;

}


/* =========================================================
   MESSAGE
========================================================= */

.rekam-form-message {

  grid-column: 1 / -1;

  min-height: 0;

  color: #dc2626;

  font-size: 10px;

  line-height: 1.4;

}


.rekam-form-message:empty {

  display: none;

}


/* =========================================================
   FOOTER
========================================================= */

.rekam-form-footer {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 10px;

  padding: 14px 18px;

  background: #f8fafc;

  border-top: 1px solid #e5ebf2;

}


/* =========================================================
   BUTTON
========================================================= */

.rekam-btn-secondary,
.rekam-btn-primary {

  min-height: 36px;

  padding: 0 18px;

  border-radius: 8px;

  font-family: inherit;

  font-size: 10px;

  font-weight: 700;

  cursor: pointer;

}


.rekam-btn-secondary {

  color: #475569;

  background: #ffffff;

  border: 1px solid #d7e0eb;

}


.rekam-btn-primary {

  color: #ffffff;

  background: #2563eb;

  border: 1px solid #2563eb;

}


.rekam-btn-primary:hover {

  background: #1d4ed8;

}


.rekam-btn-secondary:hover {

  background: #f8fafc;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

  .rekam-form-body {

    grid-template-columns: 1fr;

  }


  .rekam-form-group.full {

    grid-column: auto;

  }


  .rekam-form-footer {

    flex-direction: column-reverse;

    align-items: stretch;

  }


  .rekam-btn-secondary,
  .rekam-btn-primary {

    width: 100%;

  }

}

/* =========================================================
   CARD IMUNISASI
========================================================= */

.rekam-imunisasi-card {

  width: 100%;

  box-sizing: border-box;

}


/* =========================================================
   HEADER
========================================================= */

.rekam-imunisasi-card
.rekam-section-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 20px 20px 14px;

  box-sizing: border-box;

}


/* =========================================================
   TITLE WRAPPER
========================================================= */

.rekam-imunisasi-card
.rekam-section-title-wrap {

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

}


/* =========================================================
   ICON
========================================================= */

.rekam-imunisasi-card
.rekam-section-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 34px;

  width: 34px;

  height: 34px;

  background: #ffe4ef;

  border: 1px solid #ffd0e2;

  border-radius: 9px;

  font-size: 18px;

  line-height: 1;

}


/* =========================================================
   JUDUL
========================================================= */

.rekam-imunisasi-card
.rekam-section-title-wrap h3 {

  margin: 0;

  color: #c02668;

  font-size: 17px;

  line-height: 1.25;

  font-weight: 800;

}


/* =========================================================
   SUBTITLE
========================================================= */

.rekam-imunisasi-card
.rekam-section-title-wrap p {

  margin: 3px 0 0;

  color: #64748b;

  font-size: 9px;

  line-height: 1.4;

}


/* =========================================================
   UPDATE BUTTON
========================================================= */

.rekam-imunisasi-card
.rekam-section-update-btn {

  flex: 0 0 auto;

  padding: 7px 12px;

  background: #ffffff;

  border: 1px solid #d5ddea;

  border-radius: 7px;

  color: #475569;

  font-size: 10px;

  line-height: 1;

  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;

}


.rekam-imunisasi-card
.rekam-section-update-btn:hover {

  background: #fff5f9;

  border-color: #f3a9c8;

}


/* =========================================================
   DIVIDER
========================================================= */

.rekam-imunisasi-card
.rekam-section-divider {

  height: 1px;

  margin: 0 20px;

  background: #ffd8e7;

}


/* =========================================================
   CONTENT
========================================================= */

.rekam-imunisasi-content {

  padding: 16px 20px 20px;

}


/* =========================================================
   LAST RECORD
========================================================= */

.rekam-imunisasi-card
.rekam-last-record {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  min-height: 40px;

  padding: 0 13px;

  box-sizing: border-box;

  background: #fff4f8;

  border: 1px solid #ffd5e5;

  border-radius: 8px;

}


.rekam-imunisasi-card
.rekam-last-record span {

  color: #64748b;

  font-size: 10px;

  line-height: 1.3;

  font-weight: 500;

}


.rekam-imunisasi-card
.rekam-last-record strong {

  color: #c02668;

  font-size: 10px;

  line-height: 1.3;

  font-weight: 800;

}


/* =========================================================
   SUMMARY
========================================================= */

.rekam-imunisasi-summary {

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 10px;

  margin-top: 10px;

}


/* =========================================================
   SUMMARY ITEM
========================================================= */

.rekam-imunisasi-summary-item {

  min-width: 0;

  padding: 10px 11px;

  box-sizing: border-box;

  background: #ffffff;

  border: 1px solid #e8edf3;

  border-radius: 8px;

}


.rekam-imunisasi-summary-item span {

  display: block;

  margin-bottom: 4px;

  color: #64748b;

  font-size: 8px;

  line-height: 1.3;

}


.rekam-imunisasi-summary-item strong {

  display: block;

  color: #334155;

  font-size: 10px;

  line-height: 1.35;

  font-weight: 700;

  word-break: break-word;

}


/* =========================================================
   EMPTY
========================================================= */

.rekam-imunisasi-empty {

  margin-top: 10px;

  padding: 18px;

  text-align: center;

  color: #94a3b8;

  font-size: 10px;

  line-height: 1.4;

  background: #fafbfc;

  border: 1px dashed #dfe6ef;

  border-radius: 8px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

  .rekam-imunisasi-summary {

    grid-template-columns: 1fr;

  }

}


@media (max-width: 500px) {

  .rekam-imunisasi-card
  .rekam-section-header {

    align-items: flex-start;

  }


  .rekam-imunisasi-card
  .rekam-last-record {

    align-items: flex-start;

    flex-direction: column;

    justify-content: center;

    gap: 3px;

    padding-top: 9px;

    padding-bottom: 9px;

  }

}

/* =========================================================
   FIX HEADER ICON REKAM POSYANDU
   ========================================================= */

.rekam-posyandu-layout
.rekam-section-header
.section-title-with-icon {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}


.rekam-posyandu-layout
.rekam-section-header
.section-module-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;

  flex: 0 0 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 9px !important;

  font-size: 18px !important;
  line-height: 1 !important;
}


/* MATIKAN SISTEM ICON LAMA */

.rekam-posyandu-layout
.rekam-section-header
h3::before {
  content: none !important;

  display: none !important;

  width: 0 !important;
  height: 0 !important;

  padding: 0 !important;
  margin: 0 !important;
}


/* POSISI JUDUL */

.rekam-posyandu-layout
.rekam-section-header
.section-title-with-icon > div:last-child {
  min-width: 0 !important;
}


.rekam-posyandu-layout
.rekam-section-header
.section-title-with-icon h3 {
  display: block !important;

  margin: 0 0 3px !important;

  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}


.rekam-posyandu-layout
.rekam-section-header
.section-title-with-icon
.section-subtitle {
  display: block !important;

  margin: 0 !important;

  font-size: 10px !important;
  line-height: 1.4 !important;

  color: #64748B !important;
}

/* =========================================================
   SCROLL RIWAYAT IMUNISASI
========================================================= */

.rekam-posyandu-layout
.imunisasi-content {

  scrollbar-width: thin;

  scrollbar-color:
    #cbd5e1
    transparent;
}


.rekam-posyandu-layout
.imunisasi-content::-webkit-scrollbar {

  width: 6px;
}


.rekam-posyandu-layout
.imunisasi-content::-webkit-scrollbar-track {

  background: transparent;
}


.rekam-posyandu-layout
.imunisasi-content::-webkit-scrollbar-thumb {

  background: #cbd5e1;

  border-radius: 999px;
}


.rekam-posyandu-layout
.imunisasi-content::-webkit-scrollbar-thumb:hover {

  background: #94a3b8;
}

/* =========================================================
   HEADER TABEL RIWAYAT IMUNISASI
========================================================= */

.imunisasi-riwayat-table th {

  vertical-align: middle;

}


.imunisasi-riwayat-table
.imunisasi-header-content {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  white-space: nowrap;

}


/* ICON HEADER */

.imunisasi-riwayat-table
.imunisasi-header-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 15px;

  height: 15px;

  flex: 0 0 15px;

  font-size: 11px;

  line-height: 1;

}


/* DOSIS TENGAH */

.imunisasi-riwayat-table
.imunisasi-header-center {

  justify-content: center;

  width: 100%;

}


/* =========================================================
   HEADER ICON — VITAMIN & PMT
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-header
.vitamin-header-item {

  display: flex;

  align-items: center;

  gap: 5px;

  min-width: 0;

}


.rekam-posyandu-layout
.vitamin-pmt-header
.vitamin-header-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 auto;

  width: 14px;

  height: 14px;

  font-size: 10px;

  line-height: 1;

}


.rekam-posyandu-layout
.vitamin-pmt-header
.vitamin-header-center {

  justify-content: center;

}

/* =========================================================
   FORM VITAMIN & PMT
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-form {

  width: 100%;

}


/* =========================================================
   HEADER FORM
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-form-header {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 22px;

  padding-bottom: 16px;

  border-bottom:
    1px solid var(--tema-border);

}


.rekam-posyandu-layout
.vitamin-pmt-form-icon {

  width: 42px;

  height: 42px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 10px;

  background:
    var(--tema-icon);

  border:
    1px solid var(--tema-border);

  font-size: 20px;

}


.rekam-posyandu-layout
.vitamin-pmt-form-title {

  min-width: 0;

}


.rekam-posyandu-layout
.vitamin-pmt-form-title h3 {

  margin: 0 0 3px;

  color:
    var(--tema-primary-dark);

  font-size: 17px;

  line-height: 1.25;

  font-weight: 700;

}


.rekam-posyandu-layout
.vitamin-pmt-form-title span {

  display: block;

  color: #64748B;

  font-size: 10px;

  line-height: 1.4;

}


/* =========================================================
   FORM GRID
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-form-grid {

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  column-gap: 14px;

  row-gap: 13px;

}


/* =========================================================
   FIELD
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-form-field {

  min-width: 0;

}


.rekam-posyandu-layout
.vitamin-pmt-form-field.full {

  grid-column: 1 / -1;

}


/* =========================================================
   LABEL
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-form-field label {

  display: block;

  margin-bottom: 5px;

  color: #475569;

  font-size: 10px;

  line-height: 1.3;

  font-weight: 600;

}


/* =========================================================
   INPUT
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-form-field input,

.rekam-posyandu-layout
.vitamin-pmt-form-field select,

.rekam-posyandu-layout
.vitamin-pmt-form-field textarea {

  width: 100%;

  box-sizing: border-box;

  border:
    1px solid #D7E0EA;

  border-radius: 7px;

  background: #FFFFFF;

  color: #334155;

  font-family: inherit;

  font-size: 11px;

  line-height: 1.4;

  outline: none;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;

}


/* =========================================================
   INPUT / SELECT
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-form-field input,

.rekam-posyandu-layout
.vitamin-pmt-form-field select {

  height: 38px;

  padding:
    0 11px;

}


/* =========================================================
   TEXTAREA
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-form-field textarea {

  min-height: 82px;

  padding:
    9px 11px;

  resize: vertical;

}


/* =========================================================
   PLACEHOLDER
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-form-field input::placeholder,

.rekam-posyandu-layout
.vitamin-pmt-form-field textarea::placeholder {

  color: #94A3B8;

}


/* =========================================================
   DISABLED
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-form-field input:disabled {

  background: #F8FAFC;

  color: #64748B;

  cursor: not-allowed;

}


/* =========================================================
   FOCUS
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-form-field input:focus,

.rekam-posyandu-layout
.vitamin-pmt-form-field select:focus,

.rekam-posyandu-layout
.vitamin-pmt-form-field textarea:focus {

  border-color:
    var(--tema-primary);

  box-shadow:
    0 0 0 3px var(--tema-bg);

}


/* =========================================================
   ACTION
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-form-actions {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 9px;

  margin-top: 20px;

  padding-top: 15px;

  border-top:
    1px solid var(--tema-border);

}


/* =========================================================
   BATAL
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-form-actions
.vitamin-pmt-btn-cancel {

  min-width: 82px;

  height: 36px;

  padding:
    0 14px;

  border:
    1px solid #D7E0EA;

  border-radius: 7px;

  background: #FFFFFF;

  color: #475569;

  font-family: inherit;

  font-size: 10px;

  font-weight: 600;

  cursor: pointer;

}


/* =========================================================
   SIMPAN
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-form-actions
.vitamin-pmt-btn-save {

  min-width: 150px;

  height: 36px;

  padding:
    0 16px;

  border:
    1px solid var(--tema-primary);

  border-radius: 7px;

  background:
    var(--tema-primary);

  color: #FFFFFF;

  font-family: inherit;

  font-size: 10px;

  font-weight: 700;

  cursor: pointer;

  transition:
    opacity .15s ease,
    transform .15s ease;

}


.rekam-posyandu-layout
.vitamin-pmt-form-actions
.vitamin-pmt-btn-save:hover {

  opacity: .92;

}


.rekam-posyandu-layout
.vitamin-pmt-form-actions
.vitamin-pmt-btn-save:disabled {

  opacity: .65;

  cursor: not-allowed;

}


/* =========================================================
   MESSAGE
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-form-message {

  margin-top: 9px;

  font-size: 10px;

  line-height: 1.4;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

  .rekam-posyandu-layout
  .vitamin-pmt-form-grid {

    grid-template-columns: 1fr;

  }


  .rekam-posyandu-layout
  .vitamin-pmt-form-field.full {

    grid-column: auto;

  }


  .rekam-posyandu-layout
  .vitamin-pmt-form-actions {

    justify-content: stretch;

  }


  .rekam-posyandu-layout
  .vitamin-pmt-btn-cancel,

  .rekam-posyandu-layout
  .vitamin-pmt-btn-save {

    flex: 1;

  }

}

/* =========================================================
   FORM VITAMIN & PMT — CHECKLIST
========================================================= */

.vitamin-checklist {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin-top: 8px;

}


.vitamin-check-item {

  display: flex;

  align-items: center;

  gap: 10px;

  min-height: 44px;

  padding: 10px 12px;

  border: 1px solid #e2e8f0;

  border-radius: 9px;

  background: #ffffff;

  cursor: pointer;

  font-size: 12px;

  color: #475569;

  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;

}


.vitamin-check-item:hover {

  border-color: #d89032;

  background: #fffaf3;

}


/* =========================================================
   CHECKBOX
========================================================= */

.vitamin-check-item
input[type="checkbox"] {

  width: 17px;

  height: 17px;

  margin: 0;

  flex-shrink: 0;

  accent-color: #d89032;

  cursor: pointer;

}


/* =========================================================
   CHECKBOX TERPILIH
========================================================= */

.vitamin-check-item
input[type="checkbox"]:checked
+ span {

  font-weight: 700;

  color: #8b5f1d;

}


/* =========================================================
   ITEM TERPILIH
========================================================= */

.vitamin-check-item
input[type="checkbox"]:checked {

  accent-color: #d89032;

}


/* =========================================================
   TANGGAL READONLY
========================================================= */

.rekam-form-readonly {

  display: flex;

  align-items: center;

  gap: 8px;

  min-height: 42px;

  padding: 9px 12px;

  border:
    1px solid #e2e8f0;

  border-radius: 8px;

  background:
    #f8fafc;

  color:
    #64748b;

  font-size: 12px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width: 600px
) {

  .vitamin-checklist {

    grid-template-columns:
      1fr;

  }

}

/* =========================================================
   SIDEBAR TIPS — FORM PERTUMBUHAN
========================================================= */

.tips-card {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.tips-card .card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
}

.tips-card .card-heading h4 {
  margin: 0;
  color: #334155;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

.tips-card .tip-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 0;
}

.tips-card .tip-item:last-child {
  margin-bottom: 0;
}

.tips-card .tip-item .tip-check {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  border-radius: 50%;

  background: #dcfce7;
  color: #16a34a;

  font-size: 11px;
  font-weight: 700;

  line-height: 1;
}

.tips-card .tip-item > span:not(.tip-check) {
  flex: 1 1 auto;
  min-width: 0;

  display: block;

  width: auto;
  height: auto;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;

  color: #64748b;

  font-size: 11px;
  line-height: 1.55;
  font-weight: 400;

  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

/* =========================================================
   ADVICE NAKES
========================================================= */

.rekam-posyandu-layout
.advice-nakes-section {
  overflow: hidden;
}


/* =========================================================
   AREA RIWAYAT
========================================================= */

.rekam-posyandu-layout
.advice-nakes-content {

  scrollbar-width: thin;

  scrollbar-color:
    #cbd5e1
    transparent;

}


.rekam-posyandu-layout
.advice-nakes-content::-webkit-scrollbar {

  width:
    6px;

}


.rekam-posyandu-layout
.advice-nakes-content::-webkit-scrollbar-track {

  background:
    transparent;

}


.rekam-posyandu-layout
.advice-nakes-content::-webkit-scrollbar-thumb {

  background:
    #cbd5e1;

  border-radius:
    999px;

}


.rekam-posyandu-layout
.advice-nakes-content::-webkit-scrollbar-thumb:hover {

  background:
    #94a3b8;

}


/* =========================================================
   TABEL
========================================================= */

.rekam-posyandu-layout
.advice-nakes-table {

  width:
    100%;

}


/* =========================================================
   ROW
========================================================= */

.rekam-posyandu-layout
.advice-nakes-row {

  display:
    grid;

  grid-template-columns:
    105px
    minmax(0, 1fr)
    180px;

  column-gap:
    20px;

  align-items:
    center;

  width:
    100%;

  min-height:
    72px;

  box-sizing:
    border-box;

  padding-left:
    12px;

  padding-right:
    12px;

}


/* =========================================================
   HEADER
========================================================= */

.rekam-posyandu-layout
.advice-nakes-header {

  position:
    sticky;

  top:
    0;

  z-index:
    2;

  min-height:
    42px;

  align-items:
    center;

  background:
    #f8fafc;

  border-bottom:
    1px solid #e2e8f0;

  color:
    #64748b;

  font-size:
    10px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    .02em;

  padding-left:
    12px;

  padding-right:
    12px;

  box-sizing:
    border-box;

}


/* =========================================================
   DATA ROW
========================================================= */

.rekam-posyandu-layout
.advice-nakes-row.is-terbaru {

  background:
    #fffafd;

  border-bottom:
    1px solid #eef2f7;

}


.rekam-posyandu-layout
.advice-nakes-row:not(.advice-nakes-header) {

  border-bottom:
    1px solid #eef2f7;

}


/* =========================================================
   TANGGAL
========================================================= */

.rekam-posyandu-layout
.advice-nakes-date {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;

  min-width:
    0;

  padding:
    8px 0;

  box-sizing:
    border-box;

}


.rekam-posyandu-layout
.advice-nakes-date-day {

  color:
    #334155;

  font-size:
    17px;

  font-weight:
    800;

  line-height:
    1;

}


.rekam-posyandu-layout
.advice-nakes-date-month {

  margin-top:
    3px;

  color:
    #64748b;

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    .06em;

}


.rekam-posyandu-layout
.advice-nakes-date-year {

  margin-top:
    3px;

  color:
    #94a3b8;

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.1;

}


/* =========================================================
   TERBARU
========================================================= */

.rekam-posyandu-layout
.advice-nakes-terbaru {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  margin-top:
    5px;

  padding:
    3px 7px;

  border-radius:
    999px;

  background:
    #fce7f3;

  color:
    #db2777;

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .03em;

}


.rekam-posyandu-layout
.advice-nakes-row.is-terbaru
.advice-nakes-date-day {

  color:
    #db2777;

}


/* =========================================================
   CATATAN
========================================================= */

.rekam-posyandu-layout
.advice-nakes-catatan {

  min-width:
    0;

  color:
    #334155;

  font-size:
    11px;

  font-weight:
    500;

  line-height:
    1.55;

  white-space:
    normal;

  overflow-wrap:
    anywhere;

  word-break:
    break-word;

}


.rekam-posyandu-layout
.advice-nakes-row.is-terbaru
.advice-nakes-catatan {

  color:
    #334155;

  font-weight:
    500;

}


/* =========================================================
   NAKES
========================================================= */

.rekam-posyandu-layout
.advice-nakes-nakes {

  min-width:
    0;

  color:
    #475569;

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.45;

  white-space:
    normal;

  overflow-wrap:
    anywhere;

  word-break:
    break-word;

}


/* =========================================================
   EMPTY STATE
========================================================= */

.rekam-posyandu-layout
.advice-nakes-empty {

  min-height:
    150px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    #94a3b8;

  font-size:
    11px;

  text-align:
    center;

}


.rekam-posyandu-layout
.advice-nakes-empty > div {

  width:
    36px;

  height:
    36px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    10px;

  background:
    #f1f5f9;

  font-size:
    17px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width: 800px
) {

  .rekam-posyandu-layout
  .advice-nakes-row {

    grid-template-columns:
      90px
      minmax(0, 1fr)
      140px;

    column-gap:
      14px;

  }


  .rekam-posyandu-layout
  .advice-nakes-catatan {

    font-size:
      11px;

  }


  .rekam-posyandu-layout
  .advice-nakes-nakes {

    font-size:
      9px;

  }

}


@media (
  max-width: 600px
) {

  .rekam-posyandu-layout
  .advice-nakes-content {

    padding:
      0 14px !important;

  }


  .rekam-posyandu-layout
  .advice-nakes-row {

    grid-template-columns:
      70px
      minmax(0, 1fr);

    column-gap:
      12px;

    min-height:
      70px;

  }


  .rekam-posyandu-layout
  .advice-nakes-header {

    grid-template-columns:
      70px
      minmax(0, 1fr);

  }


  .rekam-posyandu-layout
  .advice-nakes-nakes {

    grid-column:
      2;

    margin-top:
      -2px;

  }

}


@media (
  max-width: 480px
) {

  .rekam-posyandu-layout
  .advice-nakes-row {

    grid-template-columns:
      1fr;

    row-gap:
      6px;

    padding:
      10px 0;

  }


  .rekam-posyandu-layout
  .advice-nakes-header {

    display:
      none;

  }


  .rekam-posyandu-layout
  .advice-nakes-nakes {

    grid-column:
      auto;

  }

}


/* =========================================================
   ADVICE NAKES — DRAWER
========================================================= */

.advice-nakes-overlay {

  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  display:
    flex;

  justify-content:
    flex-end;

  background:
    rgba(
      15,
      23,
      42,
      .28
    );

  box-sizing:
    border-box;

}


/* =========================================================
   DRAWER
========================================================= */

.advice-nakes-drawer {

  width:
    min(
      520px,
      92vw
    );

  height:
    100vh;

  overflow-y:
    auto;

  box-sizing:
    border-box;

  padding:
    24px;

  background:
    #ffffff;

  border-left:
    1px solid #e2e8f0;

  box-shadow:
    -8px 0 30px
    rgba(
      15,
      23,
      42,
      .12
    );

  animation:
    adviceNakesDrawerIn
    .22s
    ease-out;

  scrollbar-width:
    thin;

  scrollbar-color:
    #cbd5e1
    transparent;

}


.advice-nakes-drawer::-webkit-scrollbar {

  width:
    6px;

}


.advice-nakes-drawer::-webkit-scrollbar-track {

  background:
    transparent;

}


.advice-nakes-drawer::-webkit-scrollbar-thumb {

  background:
    #cbd5e1;

  border-radius:
    999px;

}


.advice-nakes-drawer::-webkit-scrollbar-thumb:hover {

  background:
    #94a3b8;

}


/* =========================================================
   ANIMASI
========================================================= */

@keyframes adviceNakesDrawerIn {

  from {

    transform:
      translateX(
        100%
      );

    opacity:
      .7;

  }

  to {

    transform:
      translateX(
        0
      );

    opacity:
      1;

  }

}


/* =========================================================
   MAIN
========================================================= */

.advice-nakes-drawer
.advice-nakes-main {

  width:
    100%;

  min-width:
    0;

  padding:
    0;

  margin:
    0;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;

  box-sizing:
    border-box;

}


/* =========================================================
   HEADER DRAWER
========================================================= */

.advice-nakes-drawer
.advice-nakes-main-header {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin:
    0 0 24px;

  padding:
    0 0 18px;

  border-bottom:
    1px solid #e2e8f0;

}


.advice-nakes-drawer
.advice-nakes-form-icon {

  width:
    44px;

  height:
    44px;

  flex:
    0 0 44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    11px;

  background:
    #f3efff;

  font-size:
    21px;

}


.advice-nakes-drawer
.advice-nakes-main-header h2 {

  margin:
    0 0 4px;

  color:
    #1e293b;

  font-size:
    21px;

  font-weight:
    700;

  line-height:
    1.2;

}


.advice-nakes-drawer
.advice-nakes-main-header p {

  margin:
    0;

  color:
    #64748b;

  font-size:
    10px;

  line-height:
    1.4;

}


/* =========================================================
   FORM SECTION
========================================================= */

.advice-nakes-drawer
.advice-nakes-form-section {

  width:
    100%;

  margin:
    0 0 20px;

  box-sizing:
    border-box;

}


/* =========================================================
   SECTION TITLE
========================================================= */

.advice-nakes-drawer
.advice-nakes-section-title {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  min-height:
    42px;

  padding:
    0 13px;

  border-radius:
    9px;

  background:
    #f6f2ff;

  color:
    #5146d8;

  box-sizing:
    border-box;

}


.advice-nakes-drawer
.advice-nakes-section-title
> span:first-child {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    16px;

  line-height:
    1;

}


.advice-nakes-drawer
.advice-nakes-section-title
strong {

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .02em;

}


/* =========================================================
   BADGE OTOMATIS
========================================================= */

.advice-nakes-drawer
.advice-nakes-auto-badge {

  margin-left:
    auto;

  padding:
    5px 9px;

  border-radius:
    999px;

  background:
    #dcfce7;

  color:
    #15803d;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    .04em;

}


/* =========================================================
   TANGGAL FORM
========================================================= */

.advice-nakes-drawer
.advice-nakes-date-field {

  margin-top:
    12px;

}


.advice-nakes-drawer
.advice-nakes-date-field
label {

  display:
    block;

  margin:
    0 0 7px;

  color:
    #334155;

  font-size:
    10px;

  font-weight:
    700;

}


.advice-nakes-drawer
.advice-nakes-input-wrap {

  display:
    flex;

  align-items:
    center;

  width:
    100%;

  min-height:
    48px;

  overflow:
    hidden;

  box-sizing:
    border-box;

  border:
    1px solid #dbe2ea;

  border-radius:
    9px;

  background:
    #ffffff;

}


.advice-nakes-drawer
.advice-nakes-input-wrap
> span:first-child {

  width:
    48px;

  min-width:
    48px;

  height:
    48px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    #f3efff;

  font-size:
    16px;

}


.advice-nakes-drawer
.advice-nakes-input-wrap
input {

  flex:
    1;

  min-width:
    0;

  height:
    48px;

  padding:
    0 12px;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    #334155;

  font-family:
    inherit;

  font-size:
    11px;

  font-weight:
    600;

}


.advice-nakes-drawer
.advice-nakes-input-wrap
input:read-only {

  cursor:
    default;

  user-select:
    none;

}


.advice-nakes-drawer
.advice-nakes-lock {

  width:
    42px;

  min-width:
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #64748b;

  font-size:
    13px;

  opacity:
    .75;

}


/* =========================================================
   FIELDS
========================================================= */

.advice-nakes-drawer
.advice-nakes-fields {

  display:
    flex;

  flex-direction:
    column;

  gap:
    17px;

  width:
    100%;

  margin-top:
    12px;

}


/* =========================================================
   FIELD
========================================================= */

.advice-nakes-drawer
.advice-nakes-field {

  width:
    100%;

  min-width:
    0;

}


.advice-nakes-drawer
.advice-nakes-field
label {

  display:
    block;

  margin:
    0 0 7px;

  color:
    #334155;

  font-size:
    10px;

  font-weight:
    700;

}


.advice-nakes-drawer
.advice-nakes-field
label span {

  color:
    #dc2626;

}


/* =========================================================
   TEXTAREA
========================================================= */

.advice-nakes-drawer
.advice-nakes-textarea-wrap {

  display:
    flex;

  align-items:
    stretch;

  width:
    100%;

  min-height:
    170px;

  overflow:
    hidden;

  box-sizing:
    border-box;

  border:
    1px solid #dbe2ea;

  border-radius:
    9px;

  background:
    #ffffff;

}


.advice-nakes-drawer
.advice-nakes-textarea-wrap
> span {

  width:
    48px;

  min-width:
    48px;

  display:
    flex;

  justify-content:
    center;

  padding-top:
    15px;

  background:
    #f3efff;

  font-size:
    16px;

}


.advice-nakes-drawer
.advice-nakes-textarea-wrap
textarea {

  flex:
    1;

  min-width:
    0;

  min-height:
    170px;

  padding:
    13px;

  border:
    0;

  outline:
    0;

  resize:
    vertical;

  background:
    transparent;

  color:
    #334155;

  font-family:
    inherit;

  font-size:
    11px;

  line-height:
    1.55;

}


.advice-nakes-drawer
.advice-nakes-textarea-wrap
textarea::placeholder {

  color:
    #94a3b8;

}


/* =========================================================
   NAMA NAKES
========================================================= */

.advice-nakes-drawer
.advice-nakes-nakes-field {

  width:
    100%;

}


/* =========================================================
   VALIDATION MESSAGE
========================================================= */

.advice-nakes-drawer
.advice-nakes-message {

  min-height:
    0;

  margin:
    0;

  font-size:
    10px;

  line-height:
    1.4;

}


.advice-nakes-drawer
.advice-nakes-message.error {

  margin-top:
    4px;

  padding:
    9px 12px;

  border-radius:
    8px;

  background:
    #fef2f2;

  color:
    #dc2626;

}


/* =========================================================
   ACTION
========================================================= */

.advice-nakes-drawer
.advice-nakes-form-actions {

  position:
    sticky;

  bottom:
    0;

  z-index:
    5;

  display:
    grid;

  grid-template-columns:
    130px
    minmax(0, 1fr);

  gap:
    10px;

  margin:
    20px 0 0;

  padding:
    15px 0 0;

  background:
    linear-gradient(
      to bottom,
      rgba(
        255,
        255,
        255,
        0
      ),
      #ffffff 14px
    );

}


.advice-nakes-drawer
.advice-nakes-btn-secondary,
.advice-nakes-drawer
.advice-nakes-btn-primary {

  min-height:
    46px;

  border-radius:
    9px;

  box-sizing:
    border-box;

  font-family:
    inherit;

  font-size:
    10px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    .15s ease;

}


.advice-nakes-drawer
.advice-nakes-btn-secondary {

  border:
    1px solid #dbe2ea;

  background:
    #ffffff;

  color:
    #475569;

}


.advice-nakes-drawer
.advice-nakes-btn-primary {

  border:
    0;

  background:
    #5146d8;

  color:
    #ffffff;

  box-shadow:
    0 5px 14px
    rgba(
      81,
      70,
      216,
      .18
    );

}


.advice-nakes-drawer
.advice-nakes-btn-primary:hover {

  background:
    #4338ca;

}


.advice-nakes-drawer
.advice-nakes-btn-primary:disabled {

  opacity:
    .65;

  cursor:
    wait;

}


/* =========================================================
   HILANGKAN SIDEBAR LAMA DRAWER
========================================================= */

.advice-nakes-drawer
.advice-nakes-sidebar,

.advice-nakes-drawer
.advice-nakes-side-card,

.advice-nakes-drawer
.advice-nakes-cancel-side {

  display:
    none !important;

}


/* =========================================================
   DRAWER RESPONSIVE
========================================================= */

@media (
  max-width: 600px
) {

  .advice-nakes-drawer {

    width:
      100vw;

    padding:
      18px;

  }


  .advice-nakes-drawer
  .advice-nakes-main-header {

    margin-bottom:
      20px;

  }


  .advice-nakes-drawer
  .advice-nakes-form-actions {

    grid-template-columns:
      1fr;

  }

}

/* =========================================================
   FORMAT TANGGAL RIWAYAT POSYANDU
   Digunakan oleh:
   - Advice Nakes
   - Imunisasi
   - Vitamin & PMT
========================================================= */

.riwayat-tanggal {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;

  min-width:
    52px;

  padding:
    4px 0;

  box-sizing:
    border-box;

}


.riwayat-tanggal-day {

  font-size:
    16px;

  font-weight:
    800;

  line-height:
    1;

  color:
    #334155;

}


.riwayat-tanggal-month {

  margin-top:
    3px;

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    .06em;

  color:
    #64748b;

}


.riwayat-tanggal-year {

  margin-top:
    3px;

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.1;

  color:
    #94a3b8;

}


/* =========================================================
   IMUNISASI
========================================================= */

.rekam-posyandu-layout
.imunisasi-date {

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;

}


/* =========================================================
   VITAMIN & PMT
========================================================= */

.rekam-posyandu-layout
.vitamin-pmt-date {

  display:
    flex !important;

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;

}


/* =========================================================
   DATA TERBARU
========================================================= */

.rekam-posyandu-layout
.imunisasi-section
.is-terbaru
.riwayat-tanggal-day,

.rekam-posyandu-layout
.vitamin-pmt-section
.is-terbaru
.riwayat-tanggal-day {

  color:
    var(--imunisasi-primary-dark, #db2777);

}

/* =========================================================
   RESUME POSYANDU
========================================================= */

.resume-preview {

  width:
    100%;

  min-width:
    0;

  box-sizing:
    border-box;

  background:
    #f1f5f9;

  padding:
    18px;

}


/* =========================================================
   TOOLBAR
========================================================= */

.resume-toolbar {

  position:
    sticky;

  top:
    0;

  z-index:
    20;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  width:
    100%;

  max-width:
    900px;

  margin:
    0 auto 16px;

  padding:
    10px 12px;

  box-sizing:
    border-box;

  background:
    #ffffff;

  border:
    1px solid #e2e8f0;

  border-radius:
    10px;

  box-shadow:
    0 4px 14px
    rgba(
      15,
      23,
      42,
      .06
    );

}


.resume-toolbar-title {

  flex:
    1;

  color:
    #334155;

  font-size:
    12px;

  font-weight:
    700;

}


.resume-back-button,
.resume-download-button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    32px;

  padding:
    7px 11px;

  border:
    1px solid #e2e8f0;

  border-radius:
    7px;

  background:
    #ffffff;

  color:
    #475569;

  font-size:
    9px;

  font-weight:
    700;

  cursor:
    pointer;

}


.resume-download-button {

  border-color:
    var(--resume-border, #cbd5e1);

  background:
    var(--resume-soft, #f8fafc);

  color:
    var(--resume-primary-dark, #475569);

}


.resume-back-button:hover,
.resume-download-button:hover {

  background:
    #f8fafc;

}


/* =========================================================
   PAGE
========================================================= */

.resume-page {

  width:
    100%;

  max-width:
    794px;

  min-height:
    1123px;

  margin:
    0 auto 20px;

  padding:
    34px 38px;

  box-sizing:
    border-box;

  background:
    #ffffff;

  box-shadow:
    0 5px 20px
    rgba(
      15,
      23,
      42,
      .08
    );

  color:
    #334155;

}


/* =========================================================
   DOCUMENT HEADER
========================================================= */

.resume-document-header {

  display:
    flex;

  justify-content:
    space-between;

  padding-bottom:
    16px;

  margin-bottom:
    20px;

  border-bottom:
    2px solid #e2e8f0;

}


.resume-overline {

  display:
    block;

  color:
    var(--resume-primary, #5146d8);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .08em;

}


.resume-document-header h1 {

  margin:
    4px 0 3px;

  color:
    #1e293b;

  font-size:
    20px;

  line-height:
    1.2;

}


.resume-document-header p {

  margin:
    0;

  color:
    #64748b;

  font-size:
    10px;

}


/* =========================================================
   SECTION
========================================================= */

.resume-section {

  margin-bottom:
    18px;

}


.resume-section h2 {

  margin:
    0 0 10px;

  padding-bottom:
    6px;

  border-bottom:
    1px solid #e2e8f0;

  color:
    #334155;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    .03em;

}


.resume-section-description {

  margin:
    -3px 0 10px;

  color:
    #64748b;

  font-size:
    9px;

  line-height:
    1.45;

}


/* =========================================================
   DATA BALITA
========================================================= */

.resume-identity-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px 24px;

  padding:
    2px 0;

}


.resume-identity-grid > div {

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  min-width:
    0;

}


.resume-identity-grid span {

  color:
    #94a3b8;

  font-size:
    8px;

}


.resume-identity-grid strong {

  color:
    #334155;

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.35;

}


/* =========================================================
   MODULE
========================================================= */

.resume-module {

  margin-bottom:
    12px;

  padding:
    12px;

  border:
    1px solid #e2e8f0;

  border-radius:
    9px;

  background:
    #fafbfc;

}


.resume-module:last-child {

  margin-bottom:
    0;

}


.resume-module-header {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  margin-bottom:
    10px;

}


.resume-module-header h3 {

  margin:
    0 0 3px;

  color:
    #334155;

  font-size:
    11px;

  font-weight:
    800;

}


.resume-module-header span {

  color:
    #94a3b8;

  font-size:
    8px;

  line-height:
    1.4;

}


/* =========================================================
   PERTUMBUHAN
========================================================= */

.resume-growth-summary {

  width:
    100%;

}


.resume-growth-date {

  margin-bottom:
    9px;

  color:
    #64748b;

  font-size:
    8px;

}


.resume-growth-date strong {

  color:
    #334155;

  font-size:
    9px;

}


.resume-growth-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    7px;

}


.resume-growth-grid > div {

  padding:
    8px;

  border:
    1px solid #e2e8f0;

  border-radius:
    7px;

  background:
    #ffffff;

}


.resume-growth-grid span,
.resume-growth-indicators span {

  display:
    block;

  margin-bottom:
    3px;

  color:
    #94a3b8;

  font-size:
    7px;

}


.resume-growth-grid strong {

  display:
    block;

  color:
    #334155;

  font-size:
    11px;

  font-weight:
    800;

}


.resume-growth-indicators {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    7px;

  margin-top:
    7px;

}


.resume-growth-indicators > div {

  padding:
    7px;

  border-radius:
    7px;

  background:
    #ffffff;

}


.resume-growth-indicators strong {

  display:
    block;

  color:
    #475569;

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1.3;

}


.resume-growth-note {

  margin-top:
    8px;

  padding-top:
    8px;

  border-top:
    1px solid #e2e8f0;

}


.resume-growth-note span {

  color:
    #94a3b8;

  font-size:
    7px;

  font-weight:
    700;

}


.resume-growth-note p {

  margin:
    3px 0 0;

  color:
    #475569;

  font-size:
    8px;

  line-height:
    1.45;

}


/* =========================================================
   PERKEMBANGAN
========================================================= */

.resume-development-date {

  margin-bottom:
    9px;

  color:
    #64748b;

  font-size:
    8px;

}


.resume-development-date strong {

  color:
    #334155;

  font-size:
    9px;

}


/* =========================================================
   4 DOMAIN PERKEMBANGAN
========================================================= */

.resume-development-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;

}


.resume-development-card {

  padding:
    9px;

  border:
    1px solid #e2e8f0;

  border-radius:
    8px;

  background:
    #ffffff;

}


.resume-development-card-header {

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  margin-bottom:
    8px;

}


.resume-development-icon {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    24px;

  height:
    24px;

  border-radius:
    7px;

  background:
    var(
      --resume-soft,
      #f8fafc
    );

  font-size:
    13px;

}


.resume-development-card-header strong {

  color:
    #334155;

  font-size:
    9px;

  font-weight:
    800;

}


.resume-development-field {

  margin-top:
    7px;

}


.resume-development-field span {

  display:
    block;

  margin-bottom:
    2px;

  color:
    #94a3b8;

  font-size:
    7px;

  font-weight:
    700;

}


.resume-development-field p {

  margin:
    0;

  color:
    #475569;

  font-size:
    8px;

  line-height:
    1.45;

  overflow-wrap:
    anywhere;

}


/* =========================================================
   INTERPRETASI PERKEMBANGAN
========================================================= */

/*
   TIDAK LAGI menggunakan:
   max-height:110px;
   overflow:hidden;

   Tujuannya agar informasi perkembangan
   tidak terpotong.
*/

.resume-development-original {

  margin-top:
    10px;

  padding:
    9px;

  border-top:
    1px solid #e2e8f0;

  color:
    #475569;

  font-size:
    8px;

  line-height:
    1.45;

}


.resume-development-original * {

  font-size:
    inherit;

  line-height:
    inherit;

}


.resume-development-original p {

  margin:
    3px 0 7px;

}


.resume-development-original strong {

  font-weight:
    700;

  color:
    #334155;

}


/* =========================================================
   KESIMPULAN PERKEMBANGAN
========================================================= */

.resume-development-summary-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;

  margin-top:
    10px;

}


.resume-development-summary-grid > div {

  padding:
    8px;

  border:
    1px solid #e2e8f0;

  border-radius:
    7px;

  background:
    #ffffff;

}


.resume-development-summary-grid span {

  display:
    block;

  margin-bottom:
    3px;

  color:
    #94a3b8;

  font-size:
    7px;

  font-weight:
    700;

}


.resume-development-summary-grid strong {

  display:
    block;

  color:
    #334155;

  font-size:
    9px;

  line-height:
    1.4;

}


.resume-development-note {

  margin-top:
    8px;

  padding:
    8px;

  border-radius:
    7px;

  background:
    #ffffff;

}


.resume-development-note span {

  display:
    block;

  color:
    #94a3b8;

  font-size:
    7px;

  font-weight:
    700;

}


.resume-development-note p {

  margin:
    3px 0 0;

  color:
    #475569;

  font-size:
    8px;

  line-height:
    1.45;

}


/* =========================================================
   GRAFIK PERTUMBUHAN
========================================================= */

.resume-growth-chart-section {

  page-break-inside:
    avoid;

}


.resume-growth-chart {

  width:
    100%;

  min-height:
    250px;

  padding:
    10px;

  box-sizing:
    border-box;

  border:
    1px solid #e2e8f0;

  border-radius:
    9px;

  background:
    #ffffff;

  overflow:
    hidden;

}


.resume-growth-chart canvas {

  display:
    block;

  max-width:
    100%;

  height:
    auto;

}


/* =========================================================
   KESIMPULAN PEMERIKSAAN
========================================================= */

.resume-conclusion {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;

}


/* =========================================================
   CARD KESIMPULAN
========================================================= */

.resume-conclusion > div {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  min-width:
    0;

  padding:
    8px 11px;

  box-sizing:
    border-box;

  border:
    1px solid #e2e8f0;

  border-radius:
    8px;

  background:
    #fafbfc;

}


/* =========================================================
   LABEL
========================================================= */

.resume-conclusion span {

  color:
    #64748b;

  font-size:
    8px;

  font-weight:
    600;

  line-height:
    1.3;

}


/* =========================================================
   NILAI KESIMPULAN
========================================================= */

.resume-conclusion strong {

  display:
    inline-block;

  flex:
    0 0 auto;

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1.3;

  text-align:
    right;

}


/* =========================================================
   SESUAI / NORMAL / TERCAPAI
   HIJAU
========================================================= */

.resume-conclusion strong.is-success {

  color:
    #15803d;

}


/* =========================================================
   PERLU PEMANTAUAN / MERAGUKAN
   ORANGE
========================================================= */

.resume-conclusion strong.is-warning {

  color:
    #d97706;

}


/* =========================================================
   BUTUH KONSULTASI / RUJUK / TERLAMBAT
   MERAH
========================================================= */

.resume-conclusion strong.is-danger {

  color:
    #dc2626;

}


/* =========================================================
   STATUS NETRAL
========================================================= */

.resume-conclusion strong.is-neutral {

  color:
    #64748b;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width: 700px
) {

  .resume-conclusion {

    grid-template-columns:
      1fr;

  }

}

/* =========================================================
   TABEL
========================================================= */

.resume-table-wrapper {

  width:
    100%;

  overflow-x:
    auto;

  overflow-y:
    hidden;

  border:
    1px solid #e2e8f0;

  border-radius:
    8px;

}


.resume-table {

  width:
    100%;

  border-collapse:
    collapse;

  table-layout:
    fixed;

}


.resume-table th {

  padding:
    7px 8px;

  background:
    #f8fafc;

  color:
    #64748b;

  font-size:
    7px;

  font-weight:
    800;

  text-align:
    left;

  vertical-align:
    middle;

  border-bottom:
    1px solid #e2e8f0;

}


.resume-table td {

  padding:
    7px 8px;

  color:
    #475569;

  font-size:
    8px;

  line-height:
    1.4;

  vertical-align:
    top;

  border-bottom:
    1px solid #f1f5f9;

  overflow-wrap:
    anywhere;

}


.resume-table tr:last-child td {

  border-bottom:
    0;

}


.resume-table tr.is-terbaru td {

  background:
    #fafbfc;

}


.resume-empty {

  padding:
    14px !important;

  color:
    #94a3b8 !important;

  text-align:
    center !important;

}


/* =========================================================
   REKOMENDASI STIMULASI
========================================================= */

.resume-stimulasi-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;

}


.resume-stimulasi-card {

  min-width:
    0;

  padding:
    11px;

  border:
    1px solid #e2e8f0;

  border-radius:
    9px;

  background:
    #fafbfc;

}


.resume-stimulasi-title {

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  margin-bottom:
    6px;

  color:
    var(
      --resume-primary-dark,
      #5146d8
    );

  font-size:
    9px;

  font-weight:
    800;

}


.resume-stimulasi-title span {

  font-size:
    12px;

}


.resume-stimulasi-text {

  color:
    #475569;

  font-size:
    8px;

  line-height:
    1.55;

  overflow-wrap:
    anywhere;

}


/* =========================================================
   ADVICE NAKES
========================================================= */

.resume-advice-list {

  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;

}


.resume-advice-card {

  padding:
    10px 11px;

  border:
    1px solid #e2e8f0;

  border-left:
    3px solid
    var(
      --resume-primary,
      #5146d8
    );

  border-radius:
    8px;

  background:
    #fafbfc;

}


.resume-advice-card.is-terbaru {

  background:
    var(
      --resume-soft,
      #f8fafc
    );

}


.resume-advice-date {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin-bottom:
    7px;

  color:
    #64748b;

  font-size:
    8px;

  font-weight:
    700;

}


.resume-advice-date span {

  display:
    inline-flex;

  align-items:
    center;

  padding:
    3px 6px;

  border-radius:
    999px;

  background:
    var(
      --resume-soft,
      #f1f5f9
    );

  color:
    var(
      --resume-primary-dark,
      #475569
    );

  font-size:
    6px;

  font-weight:
    800;

  line-height:
    1;

}


.resume-advice-content {

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    );

  gap:
    7px;

}


.resume-advice-content > div {

  min-width:
    0;

}


.resume-advice-content span {

  display:
    block;

  margin-bottom:
    2px;

  color:
    #94a3b8;

  font-size:
    7px;

  font-weight:
    700;

}


.resume-advice-content p {

  margin:
    0;

  color:
    #334155;

  font-size:
    9px;

  line-height:
    1.5;

  overflow-wrap:
    anywhere;

}


/* =========================================================
   RINGKASAN RIWAYAT PELAYANAN
========================================================= */

.resume-record-count-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );

  gap:
    7px;

}


.resume-record-count-grid > div {

  min-width:
    0;

  padding:
    8px;

  border:
    1px solid #e2e8f0;

  border-radius:
    7px;

  background:
    #fafbfc;

  text-align:
    center;

}


.resume-record-count-grid span {

  display:
    block;

  min-height:
    24px;

  color:
    #94a3b8;

  font-size:
    7px;

  line-height:
    1.3;

}


.resume-record-count-grid strong {

  display:
    block;

  margin-top:
    4px;

  color:
    #334155;

  font-size:
    13px;

  font-weight:
    800;

}


/* =========================================================
   CATATAN TERBARU NAKES
========================================================= */

.resume-last-advice-box {

  padding:
    11px 12px;

  border:
    1px solid #e2e8f0;

  border-left:
    3px solid
    var(
      --resume-primary,
      #5146d8
    );

  border-radius:
    8px;

  background:
    #fafbfc;

}


.resume-last-advice-box > div {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    6px;

}


.resume-last-advice-box span {

  color:
    #64748b;

  font-size:
    8px;

  font-weight:
    700;

}


.resume-last-advice-box strong {

  color:
    #334155;

  font-size:
    8px;

  font-weight:
    700;

  text-align:
    right;

}


.resume-last-advice-box p {

  margin:
    0;

  color:
    #334155;

  font-size:
    9px;

  line-height:
    1.5;

  overflow-wrap:
    anywhere;

}


/* =========================================================
   EMPTY
========================================================= */

.resume-empty-box {

  padding:
    20px;

  border:
    1px dashed #cbd5e1;

  border-radius:
    8px;

  color:
    #94a3b8;

  font-size:
    9px;

  line-height:
    1.5;

  text-align:
    center;

}


/* =========================================================
   FOOTER
========================================================= */

.resume-footer {

  margin-top:
    20px;

  padding-top:
    10px;

  border-top:
    1px solid #e2e8f0;

  color:
    #94a3b8;

  font-size:
    7px;

  line-height:
    1.5;

  text-align:
    center;

}


/* =========================================================
   PRINT / PDF
========================================================= */

@media print {

  .resume-preview {

    padding:
      0;

    background:
      #ffffff;

  }


  .resume-toolbar {

    display:
      none !important;

  }


  .resume-page {

    width:
      210mm;

    max-width:
      210mm;

    min-height:
      297mm;

    margin:
      0;

    padding:
      12mm;

    box-shadow:
      none;

    page-break-after:
      always;

  }


  .resume-page:last-child {

    page-break-after:
      auto;

  }


  .resume-section {

    break-inside:
      avoid;

  }


  .resume-growth-chart-section {

    break-inside:
      avoid;

  }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width: 700px
) {

  .resume-preview {

    padding:
      8px;

  }


  .resume-page {

    min-height:
      auto;

    padding:
      22px;

  }


  .resume-toolbar {

    flex-wrap:
      wrap;

  }


  .resume-toolbar-title {

    order:
      -1;

    width:
      100%;

    flex:
      none;

  }


  .resume-identity-grid,
  .resume-development-grid,
  .resume-summary-grid {

    grid-template-columns:
      1fr;

  }


  .resume-growth-grid {

    grid-template-columns:
      1fr;

  }


  .resume-growth-indicators {

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

  }


  .resume-conclusion {

    grid-template-columns:
      1fr;

  }


  .resume-stimulasi-grid {

    grid-template-columns:
      1fr;

  }


  .resume-record-count-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

  }


  .resume-last-advice-box > div {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .resume-last-advice-box strong {

    text-align:
      left;

  }

}

/* =========================================================
   RESUME POSYANDU — REVISION
   DATA BALITA
========================================================= */

.resume-identity-balita {

  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, 1fr)
    minmax(0, .75fr);

  gap: 0;

  width: 100%;

  padding: 2px 0;

}


.resume-identity-balita
.resume-identity-column {

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 12px;

}


.resume-identity-balita
.resume-identity-column
> div {

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 3px;

}


.resume-identity-balita
.resume-identity-column
+ .resume-identity-column {

  padding-left: 22px;

  border-left:
    1px solid #eef2f7;

}


.resume-identity-balita span {

  color: #94a3b8;

  font-size: 8px;

  line-height: 1.25;

}


.resume-identity-balita strong {

  color: #334155;

  font-size: 10px;

  font-weight: 700;

  line-height: 1.35;

  overflow-wrap: anywhere;

}


.resume-identity-gender {

  justify-content: flex-start;

}


/* =========================================================
   RESUME — TABEL PERKEMBANGAN
========================================================= */

.resume-development-table-wrapper {

  width: 100%;

  overflow: hidden;

  border:
    1px solid #e2e8f0;

  border-radius: 8px;

  background: #ffffff;

}


.resume-development-table {

  width: 100%;

  border-collapse: collapse;

  table-layout: fixed;

}


.resume-development-col-indikator {

  width: 23%;

}


.resume-development-col-target {

  width: 54%;

}


.resume-development-col-hasil {

  width: 23%;

}


.resume-development-table th {

  padding:
    8px 9px;

  background:
    #f8fafc;

  border-bottom:
    1px solid #e2e8f0;

  color:
    #64748b;

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1.3;

  text-align:
    left;

  vertical-align:
    middle;

}


.resume-development-table td {

  padding:
    9px;

  border-bottom:
    1px solid #f1f5f9;

  color:
    #475569;

  font-size:
    8px;

  line-height:
    1.45;

  text-align:
    left;

  vertical-align:
    top;

  overflow-wrap:
    anywhere;

  word-break:
    normal;

}


.resume-development-table
tr:last-child td {

  border-bottom:
    0;

}


/* =========================================================
   INDIKATOR
========================================================= */

.resume-development-indicator {

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  min-width:
    0;

}


.resume-development-icon {

  flex:
    0 0 auto;

  width:
    20px;

  height:
    20px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid #e2e8f0;

  border-radius:
    6px;

  background:
    #f8fafc;

  font-size:
    11px;

}


.resume-development-indicator strong {

  color:
    #334155;

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1.3;

}


/* =========================================================
   TARGET
========================================================= */

.resume-development-target {

  color:
    #475569;

  font-size:
    8px;

  line-height:
    1.5;

  overflow-wrap:
    anywhere;

}


/* =========================================================
   HASIL PENILAIAN
========================================================= */

.resume-development-result {

  display:
    inline-block;

  max-width:
    100%;

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1.35;

  overflow-wrap:
    anywhere;

}


.resume-development-result.resume-status-success {

  color:
    #15803d;

}


.resume-development-result.resume-status-warning {

  color:
    #d97706;

}


.resume-development-result.resume-status-danger {

  color:
    #dc2626;

}


.resume-development-result.resume-status-neutral {

  color:
    #64748b;

}


/* =========================================================
   ADVICE NAKES — LIST
========================================================= */

.resume-advice-list {

  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;

}


.resume-advice-card {

  padding:
    10px 11px;

  border:
    1px solid #e2e8f0;

  border-left:
    3px solid
    var(
      --resume-primary,
      #5146d8
    );

  border-radius:
    8px;

  background:
    #fafbfc;

}


.resume-advice-card.is-terbaru {

  background:
    var(
      --resume-soft,
      #f8fafc
    );

}


.resume-advice-date {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin-bottom:
    7px;

  color:
    #64748b;

  font-size:
    8px;

  font-weight:
    700;

}


.resume-advice-date span {

  display:
    inline-flex;

  align-items:
    center;

  padding:
    3px 6px;

  border-radius:
    999px;

  background:
    var(
      --resume-soft,
      #f1f5f9
    );

  color:
    var(
      --resume-primary-dark,
      #475569
    );

  font-size:
    6px;

  font-weight:
    800;

  line-height:
    1;

}


.resume-advice-content {

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap:
    8px;

}


.resume-advice-content > div {

  min-width:
    0;

}


.resume-advice-content span {

  display:
    block;

  margin-bottom:
    3px;

  color:
    #94a3b8;

  font-size:
    7px;

  font-weight:
    700;

}


.resume-advice-content p {

  margin:
    0;

  color:
    #334155;

  font-size:
    8px;

  line-height:
    1.45;

  overflow-wrap:
    anywhere;

}


/* =========================================================
   LIST CATATAN
========================================================= */

.resume-advice-list-items {

  margin:
    0;

  padding-left:
    17px;

}


.resume-advice-list-items li {

  margin:
    0 0 4px;

  padding-left:
    1px;

  color:
    #334155;

  font-size:
    9px;

  line-height:
    1.5;

  overflow-wrap:
    anywhere;

}


.resume-advice-list-items li:last-child {

  margin-bottom:
    0;

}


/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width: 700px
) {

  .resume-identity-balita {

    grid-template-columns:
      1fr;

    gap:
      10px;

  }


  .resume-identity-balita
  .resume-identity-column
  + .resume-identity-column {

    padding-left:
      0;

    padding-top:
      10px;

    border-left:
      0;

    border-top:
      1px solid #eef2f7;

  }


  .resume-development-table-wrapper {

    overflow-x:
      auto;

  }


  .resume-development-table {

    min-width:
      620px;

  }

}

/* =========================================================
   RESUME — TABEL PERKEMBANGAN
   DESAIN SESUAI REFERENSI
========================================================= */

.resume-development-table-wrapper {
  width: 100%;
  overflow: hidden;

  border: 1px solid #dce3ea;
  border-radius: 9px;

  background: #ffffff;
}


.resume-development-table {
  width: 100%;

  table-layout: fixed;

  border-collapse: collapse;

  margin: 0;

  font-size: 9px;
}


/* =========================================================
   HEADER
========================================================= */

.resume-development-table thead th {
  padding: 8px 10px;

  background: #f5f7fa;

  border-right: 1px solid #dce3ea;
  border-bottom: 1px solid #dce3ea;

  color: #64748b;

  font-size: 8px;

  font-weight: 800;

  text-align: center;

  text-transform: uppercase;

  letter-spacing: .2px;
}


.resume-development-table thead th:last-child {
  border-right: 0;
}


/* =========================================================
   LEBAR KOLOM
========================================================= */

.resume-development-table thead th:nth-child(1) {
  width: 23%;
}


.resume-development-table thead th:nth-child(2) {
  width: 44%;
}


.resume-development-table thead th:nth-child(3) {
  width: 33%;
}


/* =========================================================
   BODY
========================================================= */

.resume-development-table tbody td {
  padding: 9px 10px;

  vertical-align: middle;

  border-right: 1px solid #dce3ea;
  border-bottom: 1px solid #dce3ea;

  color: #334155;

  line-height: 1.45;
}


.resume-development-table tbody tr:last-child td {
  border-bottom: 0;
}


.resume-development-table tbody td:last-child {
  border-right: 0;
}


/* =========================================================
   INDIKATOR
========================================================= */

.resume-development-indicator {
  display: flex;

  align-items: center;

  gap: 7px;

  min-width: 0;
}


.resume-development-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  flex: 0 0 28px;

  border-radius: 8px;

  background: #f3f6f8;

  font-size: 15px;

  line-height: 1;
}


.resume-development-indicator strong {
  display: block;

  color: #334155;

  font-size: 9px;

  font-weight: 700;

  line-height: 1.3;
}


/* =========================================================
   TARGET CAPAIAN
========================================================= */

.resume-development-target {
  color: #334155;

  font-size: 8.5px;

  line-height: 1.5;
}


/* =========================================================
   HASIL PENILAIAN
========================================================= */

.resume-development-table td:last-child {
  text-align: center;
}


.resume-development-result {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 23px;

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 8px;

  font-weight: 700;

  line-height: 1.2;

  white-space: nowrap;
}


/* =========================================================
   SESUAI
========================================================= */

.resume-development-result.resume-status-success {
  background: #e8f8ef;

  color: #23804a;

  border: 0;
}


/* =========================================================
   PERLU PEMANTAUAN / SEBAGIAN
========================================================= */

.resume-development-result.resume-status-warning {
  background: #fff3e2;

  color: #e87900;

  border: 0;
}


/* =========================================================
   PERLU KONSULTASI / RISIKO
========================================================= */

.resume-development-result.resume-status-danger {
  background: #ffebee;

  color: #c62828;

  border: 0;
}


/* =========================================================
   STATUS NETRAL
========================================================= */

.resume-development-result.resume-status-neutral {
  background: #f1f5f9;

  color: #64748b;

  border: 0;
}


/* =========================================================
   PRINT / PDF
========================================================= */

@media print {

  .resume-development-table-wrapper {
    overflow: visible;
  }

  .resume-development-table {
    page-break-inside: avoid;
  }

  .resume-development-table tr {
    page-break-inside: avoid;
  }

}

/* =========================================================
   RESUME PERKEMBANGAN — FINAL OVERRIDE
========================================================= */

.resume-development-table-wrapper {
  width: 100% !important;
  overflow: hidden !important;

  border: 1px solid #dce3ea !important;
  border-radius: 9px !important;

  background: #ffffff !important;
}


.resume-development-table {
  width: 100% !important;

  min-width: 0 !important;

  margin: 0 !important;

  border-collapse: collapse !important;

  table-layout: fixed !important;
}


/* =========================================================
   KOLOM
========================================================= */

.resume-development-table
.resume-development-col-indikator {
  width: 23% !important;
}


.resume-development-table
.resume-development-col-target {
  width: 54% !important;
}


.resume-development-table
.resume-development-col-hasil {
  width: 23% !important;
}


/* =========================================================
   HEADER
========================================================= */

.resume-development-table thead th {
  padding: 8px 9px !important;

  background: #f5f7fa !important;

  border-right: 1px solid #dce3ea !important;
  border-bottom: 1px solid #dce3ea !important;

  color: #64748b !important;

  font-size: 7px !important;

  font-weight: 800 !important;

  line-height: 1.3 !important;

  text-align: center !important;

  vertical-align: middle !important;

  white-space: normal !important;
}


.resume-development-table
thead th:last-child {
  border-right: 0 !important;
}


/* =========================================================
   BODY
========================================================= */

.resume-development-table tbody td {
  padding: 9px !important;

  background: #ffffff !important;

  border-right: 1px solid #dce3ea !important;
  border-bottom: 1px solid #dce3ea !important;

  color: #475569 !important;

  font-size: 8px !important;

  line-height: 1.45 !important;

  text-align: left !important;

  vertical-align: middle !important;

  overflow: hidden !important;
}


.resume-development-table tbody tr:last-child td {
  border-bottom: 0 !important;
}


.resume-development-table
tbody td:last-child {
  border-right: 0 !important;

  text-align: center !important;
}


/* =========================================================
   INDIKATOR
========================================================= */

.resume-development-indicator {
  display: flex !important;

  align-items: center !important;

  gap: 6px !important;

  min-width: 0 !important;
}


.resume-development-icon {
  width: 20px !important;
  height: 20px !important;

  flex: 0 0 20px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 6px !important;

  background: #f8fafc !important;

  font-size: 11px !important;

  line-height: 1 !important;
}


.resume-development-indicator strong {
  display: block !important;

  min-width: 0 !important;

  color: #334155 !important;

  font-size: 8px !important;

  font-weight: 700 !important;

  line-height: 1.3 !important;
}


/* =========================================================
   TARGET
========================================================= */

.resume-development-target {
  color: #475569 !important;

  font-size: 8px !important;

  line-height: 1.5 !important;

  overflow-wrap: anywhere !important;
}


/* =========================================================
   HASIL PENILAIAN
========================================================= */

.resume-development-result {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  max-width: 100% !important;

  min-height: 20px !important;

  padding: 4px 9px !important;

  border-radius: 999px !important;

  font-size: 7px !important;

  font-weight: 700 !important;

  line-height: 1.2 !important;

  white-space: nowrap !important;
}


/* ORANGE */

.resume-development-result.resume-status-warning {
  background: #fff3e2 !important;

  color: #d97706 !important;
}


/* HIJAU */

.resume-development-result.resume-status-success {
  background: #e8f8ef !important;

  color: #23804a !important;
}


/* MERAH */

.resume-development-result.resume-status-danger {
  background: #ffebee !important;

  color: #c62828 !important;
}


/* NETRAL */

.resume-development-result.resume-status-neutral {
  background: #f1f5f9 !important;

  color: #64748b !important;
}

/* =========================================================
   SIDEBAR HEIGHT & FOOTER
   ========================================================= */

.sidebar {
  height: 100vh;
  box-sizing: border-box;
  overflow-y: auto;
}

.sidebar-nav {
  min-height: 0;
}

.sidebar-footer {
  margin-top: auto;
  flex-shrink: 0;
}

/* =========================================================
   RESPONSIVE SIDEBAR
   ========================================================= */

@media (max-width: 768px) {

  .sidebar {
    width: 250px;

    transform: translateX(-100%);

    box-shadow: 4px 0 18px rgba(0, 0, 0, .08);
  }

  .main {
    margin-left: 0;
  }

  .topbar {
    padding: 14px 18px;
  }

  #page-content {
    padding: 20px 18px 28px;
  }

}


/* =========================================================
   DESKTOP — SIDEBAR COLLAPSE
   ========================================================= */

@media (min-width: 769px) {

  body.sidebar-collapsed .sidebar {
    width: 76px;
  }

  body.sidebar-collapsed .main {
    margin-left: 76px;
  }

  body.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding-left: 4px;
    padding-right: 4px;
  }

  body.sidebar-collapsed .sidebar-brand-text {
    display: none;
  }

  body.sidebar-collapsed .nav-item {
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
  }

  body.sidebar-collapsed .nav-label {
    display: none;
  }

  body.sidebar-collapsed .nav-icon {
    margin: 0;
  }

}


/* =========================================================
   MOBILE TOGGLE
   ========================================================= */

@media (max-width: 768px) {

  .sidebar-toggle {
    display: flex;
  }

}

/* =========================================================
   MOBILE SIDEBAR OPEN
   ========================================================= */

@media (max-width: 768px) {

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open::before {
    content: "";

    position: fixed;

    inset: 0;

    background: rgba(15, 23, 42, .35);

    z-index: 999;

    pointer-events: auto;
  }

  body.sidebar-open .sidebar {
    z-index: 1000;
  }

}

/* =========================================================
   SMART POSYANDU — AUTO HIDE SIDEBAR
   ========================================================= */

@media (min-width: 769px) {

  /*
   * Sidebar tetap dapat dibuka kembali
   * hanya dengan mengarahkan mouse.
   */

  body.sidebar-collapsed .sidebar:hover {
    width: 250px;
  }


  body.sidebar-collapsed .sidebar:hover
  .sidebar-brand {
    justify-content: flex-start;

    padding-left: 10px;
    padding-right: 10px;
  }


  body.sidebar-collapsed .sidebar:hover
  .sidebar-brand-text {
    display: block;
  }


  body.sidebar-collapsed .sidebar:hover
  .sidebar-brand-logo {
    margin: 0;
  }


  body.sidebar-collapsed .sidebar:hover
  .nav-item {
    justify-content: flex-start;

    padding-left: 14px;
    padding-right: 14px;
  }


  body.sidebar-collapsed .sidebar:hover
  .nav-label {
    display: block;
  }


  body.sidebar-collapsed .sidebar:hover
  .nav-icon {
    margin: 0;
  }

}

/* =========================================================
   RESUME POSYANDU — WATERMARK LOGO
========================================================= */

/* =========================================================
   SMART POSYANDU — RESUME
   CLEAN PDF / PRINT STYLE
   ========================================================= */


/* =========================================================
   1. RESUME PAGE + WATERMARK
   ========================================================= */

.resume-page {
  position: relative;
  overflow: hidden;
}

.resume-page::before {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 430px;
  height: 430px;

  transform: translate(-50%, -50%);

  background-image: url("../assets/logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0.10;

  pointer-events: none;
  z-index: 4;
}


/* Semua isi Resume berada di atas watermark */

.resume-page > * {
  position: relative;
  z-index: 5;
}


/* =========================================================
   2. HEADER RESUME
   ========================================================= */

.resume-header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.resume-header-logo {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.resume-header-logo img {
  width: 100%;
  height: 100%;

  object-fit: contain;
  display: block;
}

.resume-header-text {
  min-width: 0;
}

.resume-header-text h1 {
  margin-top: 2px;
}

.resume-header-text p {
  margin-bottom: 0;
}


/* =========================================================
   3. UKURAN KERTAS
   INDIAN LEGAL — PORTRAIT
   8.5 × 14 inch
   215.9 × 355.6 mm
   ========================================================= */

@page {
  size: 215.9mm 355.6mm;
  margin: 0;
}


/* =========================================================
   4. MODE EXPORT PDF
   ========================================================= */

body.pdf-export-mode {
  background: #ffffff !important;
}


/* =========================================================
   5. SEMBUNYIKAN SHELL APLIKASI
   ========================================================= */

body.pdf-export-mode .sidebar,
body.pdf-export-mode .topbar {
  display: none !important;
}


/* =========================================================
   6. RESET CONTAINER
   ========================================================= */

body.pdf-export-mode .app,
body.pdf-export-mode .main,
body.pdf-export-mode #page-content {
  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #ffffff !important;
}


/* =========================================================
   7. RESUME CONTAINER
   ========================================================= */

body.pdf-export-mode .resume-preview {
  width: 215.9mm !important;
  max-width: 215.9mm !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #ffffff !important;
}


body.pdf-export-mode .resume-posyandu {
  width: 215.9mm !important;
  max-width: 215.9mm !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #ffffff !important;
}


/* =========================================================
   8. TOOLBAR / BUTTON TIDAK MASUK PDF
   ========================================================= */

body.pdf-export-mode .resume-toolbar,
body.pdf-export-mode .resume-back-button,
body.pdf-export-mode .resume-download-button {
  display: none !important;
}


/* =========================================================
   9. SETIAP resume-page = SATU HALAMAN INDIAN LEGAL
   ========================================================= */

body.pdf-export-mode .resume-posyandu > .resume-page {
  position: relative !important;

  width: 215.9mm !important;
  height: 355.6mm !important;

  min-width: 215.9mm !important;
  max-width: 215.9mm !important;

  min-height: 355.6mm !important;
  max-height: 355.6mm !important;

  margin: 0 !important;

  padding: 9mm 11mm !important;

  box-sizing: border-box !important;

  overflow: hidden !important;

  background: #ffffff !important;
  box-shadow: none !important;
}


/*
 * Penting:
 *
 * PDF dibuat per .resume-page oleh JavaScript.
 * Karena itu CSS tidak boleh membuat halaman tambahan.
 */

body.pdf-export-mode .resume-posyandu > .resume-page,
body.pdf-export-mode .resume-posyandu > .resume-page * {
  break-before: auto !important;
  break-after: auto !important;
  page-break-before: auto !important;
  page-break-after: auto !important;
}


/* =========================================================
   10. KONTEN RESUME
   ========================================================= */

body.pdf-export-mode .resume-page .resume-section {
  margin-bottom: 9px !important;
}

body.pdf-export-mode .resume-page .resume-section h2 {
  margin-bottom: 5px !important;
  padding-bottom: 3px !important;

  font-size: 9px !important;
}

body.pdf-export-mode .resume-page .resume-module {
  margin-bottom: 7px !important;
  padding: 8px !important;
}

body.pdf-export-mode .resume-page .resume-module-header {
  margin-bottom: 6px !important;
}

body.pdf-export-mode .resume-page .resume-module-header h3 {
  font-size: 9px !important;
}

body.pdf-export-mode .resume-page .resume-module-header span {
  font-size: 7px !important;
}


/* =========================================================
   11. HEADER DOKUMEN
   ========================================================= */

body.pdf-export-mode .resume-page .resume-document-header {
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
}


/* =========================================================
   12. DATA BALITA
   ========================================================= */

body.pdf-export-mode .resume-page .resume-identity-grid {
  gap: 5px 16px !important;
}

body.pdf-export-mode .resume-page .resume-identity-grid span {
  font-size: 7px !important;
}

body.pdf-export-mode .resume-page .resume-identity-grid strong {
  font-size: 8px !important;
}


/* =========================================================
   13. PERTUMBUHAN
   ========================================================= */

body.pdf-export-mode .resume-page .resume-growth-grid {
  gap: 5px !important;
}

body.pdf-export-mode .resume-page .resume-growth-grid > div {
  padding: 6px !important;
}

body.pdf-export-mode .resume-page .resume-growth-grid strong {
  font-size: 9px !important;
}

body.pdf-export-mode .resume-page .resume-growth-indicators {
  gap: 5px !important;
  margin-top: 5px !important;
}

body.pdf-export-mode .resume-page .resume-growth-indicators > div {
  padding: 5px !important;
}


/* =========================================================
   14. GRAFIK PERTUMBUHAN
   ========================================================= */

body.pdf-export-mode
.resume-page
.resume-growth-chart-section {
  margin-bottom: 7px !important;

  break-inside: avoid !important;
  page-break-inside: avoid !important;
}


body.pdf-export-mode
.resume-page
.resume-growth-chart {
  width: 100% !important;

  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;

  padding: 5px !important;

  box-sizing: border-box !important;

  overflow: hidden !important;
}


/* SVG */

body.pdf-export-mode
.resume-page
.resume-growth-chart svg {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: 238px !important;
  min-height: 238px !important;
  max-height: 238px !important;
}


/* Canvas */

body.pdf-export-mode
.resume-page
.resume-growth-chart canvas {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: 238px !important;
  min-height: 238px !important;
  max-height: 238px !important;
}


/* =========================================================
   15. PERKEMBANGAN
   ========================================================= */

body.pdf-export-mode
.resume-page
.resume-development-module {
  margin-bottom: 7px !important;
  padding: 8px !important;
}

body.pdf-export-mode
.resume-page
.resume-development-table-wrapper {
  width: 100% !important;
  overflow: hidden !important;
}

body.pdf-export-mode
.resume-page
.resume-development-table th,
body.pdf-export-mode
.resume-page
.resume-development-table td {
  padding: 5px 6px !important;
  font-size: 6.5px !important;
  line-height: 1.25 !important;
}

body.pdf-export-mode
.resume-page
.resume-development-result {
  font-size: 6.5px !important;
}


/* =========================================================
   16. TABEL RIWAYAT
   ========================================================= */

body.pdf-export-mode
.resume-page
.resume-table th,
body.pdf-export-mode
.resume-page
.resume-table td {
  padding: 5px 6px !important;
  font-size: 6.5px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   17. PAGE 2 — REKOMENDASI
   ========================================================= */

body.pdf-export-mode
.resume-page:nth-of-type(2)
.resume-section {
  margin-bottom: 10px !important;
}

body.pdf-export-mode
.resume-page:nth-of-type(2)
.resume-stimulasi-grid {
  gap: 6px !important;
}

body.pdf-export-mode
.resume-page:nth-of-type(2)
.resume-stimulasi-card {
  padding: 7px !important;
}

body.pdf-export-mode
.resume-page:nth-of-type(2)
.resume-stimulasi-title {
  font-size: 8px !important;
}

body.pdf-export-mode
.resume-page:nth-of-type(2)
.resume-stimulasi-text {
  font-size: 7px !important;
  line-height: 1.3 !important;
}


/* =========================================================
   18. ADVICE TENAGA KESEHATAN
   ========================================================= */

body.pdf-export-mode
.resume-page
.resume-advice-card {
  padding: 7px !important;
}

body.pdf-export-mode
.resume-page
.resume-advice-date,
body.pdf-export-mode
.resume-page
.resume-advice-content {
  font-size: 7px !important;
}

body.pdf-export-mode
.resume-page
.resume-advice-list-items {
  margin: 3px 0 0 !important;
  padding-left: 14px !important;
}

body.pdf-export-mode
.resume-page
.resume-advice-list-items li {
  font-size: 7px !important;
  line-height: 1.3 !important;
}


/* =========================================================
   19. RINGKASAN RIWAYAT
   ========================================================= */

body.pdf-export-mode
.resume-page
.resume-record-count-grid {
  gap: 5px !important;
}

body.pdf-export-mode
.resume-page
.resume-record-count-grid > div {
  padding: 6px !important;
}

body.pdf-export-mode
.resume-page
.resume-record-count-grid span {
  font-size: 6px !important;
}

body.pdf-export-mode
.resume-page
.resume-record-count-grid strong {
  font-size: 10px !important;
}


/* =========================================================
   20. FOOTER
   ========================================================= */

body.pdf-export-mode
.resume-page
.resume-footer {
  margin-top: 8px !important;
  padding-top: 5px !important;

  font-size: 6px !important;
}


/* =========================================================
   21. SEMBUNYIKAN IMUNISASI DARI PDF
   ========================================================= */

body.pdf-export-mode
.resume-section-imunisasi,
body.pdf-export-mode
.resume-count-imunisasi {
  display: none !important;
}


/* =========================================================
   22. SEMBUNYIKAN VITAMIN & PMT DARI PDF
   ========================================================= */

/*
 * Class yang digunakan JavaScript:
 *
 * .resume-section-vitamin
 */

body.pdf-export-mode
.resume-section-vitamin,
body.pdf-export-mode
.resume-count-vitamin-pmt {
  display: none !important;
}


/* =========================================================
   23. WATERMARK PDF
   ========================================================= */

body.pdf-export-mode
.resume-page::before {
  opacity: 0.10 !important;
}


/* =========================================================
   END — RESUME PDF
   ========================================================= */

   /* ============================================================
   LOGIN SCREEN
============================================================ */

.login-screen {

  position: fixed;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;

  background: #f5f7fa;

  z-index: 99999;

}


/* ============================================================
   LOGIN CARD
============================================================ */

.login-card {

  width: 100%;

  max-width: 420px;

  padding: 40px;

  background: #ffffff;

  border-radius: 18px;

  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.10);

}


/* ============================================================
   LOGIN LOGO
============================================================ */

.login-logo {

  display: flex;

  justify-content: center;

  margin-bottom: 20px;

}


.login-logo img {

  width: 90px;

  height: 90px;

  object-fit: contain;

}


/* ============================================================
   LOGIN HEADER
============================================================ */

.login-header {

  text-align: center;

  margin-bottom: 30px;

}


.login-header h1 {

  margin: 0;

  font-size: 24px;

  font-weight: 700;

}


.login-header p {

  margin: 6px 0 0;

  font-size: 14px;

  opacity: 0.7;

}


/* ============================================================
   LOGIN FIELD
============================================================ */

.login-field {

  margin-bottom: 18px;

}


.login-field label {

  display: block;

  margin-bottom: 7px;

  font-size: 14px;

  font-weight: 600;

}


.login-field input {

  width: 100%;

  box-sizing: border-box;

  padding: 12px 14px;

  border: 1px solid #d7dce2;

  border-radius: 10px;

  font-size: 15px;

  outline: none;

  transition:
    border-color 0.2s,
    box-shadow 0.2s;

}


.login-field input:focus {

  border-color: #7b8794;

  box-shadow:
    0 0 0 3px rgba(123, 135, 148, 0.12);

}


/* ============================================================
   LOGIN ERROR
============================================================ */

.login-error {

  margin-bottom: 16px;

  padding: 10px 12px;

  border-radius: 8px;

  font-size: 13px;

  line-height: 1.4;

  background: #fff1f1;

  border: 1px solid #f0caca;

  color: #b42318;

}


/* ============================================================
   LOGIN BUTTON
============================================================ */

.login-button {

  width: 100%;

  padding: 13px 16px;

  border: none;

  border-radius: 10px;

  font-size: 15px;

  font-weight: 600;

  cursor: pointer;

}


.login-button:disabled {

  cursor: not-allowed;

  opacity: 0.65;

}


/* ============================================================
   LOGIN FOOTER
============================================================ */

.login-footer {

  margin-top: 25px;

  text-align: center;

  font-size: 11px;

  line-height: 1.5;

  opacity: 0.55;

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 480px) {

  .login-card {

    padding: 28px 22px;

  }

  .login-header h1 {

    font-size: 21px;

  }

}

/* =========================================================
   DASHBOARD V2
========================================================= */


/* ---------------------------------------------------------
   CONTAINER
--------------------------------------------------------- */

.dashboard {

  width: 100%;

  box-sizing: border-box;

}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.dashboard-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 24px;

  margin-bottom: 24px;

}


.dashboard-title h2 {

  margin: 0;

  font-size: 28px;

  line-height: 1.2;

  font-weight: 700;

}


.dashboard-title p {

  margin: 8px 0 0;

  font-size: 14px;

  color: #667085;

}


.dashboard-actions {

  display: flex;

  align-items: center;

  gap: 8px;

}


.dashboard-month {

  height: 38px;

  padding: 0 12px;

  border: 1px solid #d9dee7;

  border-radius: 8px;

  background: #ffffff;

  color: #1f2937;

  font-size: 14px;

  cursor: pointer;

}


.dashboard-refresh {

  width: 38px;

  height: 38px;

  border: 1px solid #d9dee7;

  border-radius: 8px;

  background: #ffffff;

  color: #344054;

  font-size: 19px;

  line-height: 1;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;

}


.dashboard-refresh:hover {

  background: #f8fafc;

  border-color: #c8ced8;

}


/* ---------------------------------------------------------
   KPI
--------------------------------------------------------- */

.dashboard-kpi-grid {

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 16px;

  margin-bottom: 16px;

}


.dashboard-kpi-card {

  min-height: 108px;

  padding: 18px 20px;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  background: #ffffff;

  border: 1px solid #e4e7ec;

  border-radius: 12px;

  box-shadow:
    0 1px 2px
    rgba(
      16,
      24,
      40,
      0.03
    );

}


.kpi-label {

  font-size: 13px;

  font-weight: 500;

  color: #667085;

}


.kpi-value {

  margin-top: 10px;

  font-size: 28px;

  line-height: 1;

  font-weight: 700;

  color: #1d2939;

}


.kpi-value-small {

  font-size: 18px;

  line-height: 1.2;

}


/* ---------------------------------------------------------
   MAIN GRID
--------------------------------------------------------- */

.dashboard-content-grid {

  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(0, 1fr);

  gap: 16px;

  margin-bottom: 16px;

}


/* ---------------------------------------------------------
   CARD
--------------------------------------------------------- */

.dashboard-card {

  min-width: 0;

  box-sizing: border-box;

  padding: 20px;

  background: #ffffff;

  border: 1px solid #e4e7ec;

  border-radius: 12px;

  box-shadow:
    0 1px 2px
    rgba(
      16,
      24,
      40,
      0.03
    );

}


.dashboard-card-large {

  min-height: 300px;

}


.dashboard-card-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 16px;

  margin-bottom: 18px;

}


.dashboard-card-header h3 {

  margin: 0;

  font-size: 17px;

  line-height: 1.3;

  font-weight: 650;

  color: #1d2939;

}


.dashboard-card-header p {

  margin: 6px 0 0;

  font-size: 13px;

  color: #667085;

}


.dashboard-card-icon {

  margin-right: 5px;

}


/* ---------------------------------------------------------
   EMPTY STATE
--------------------------------------------------------- */

.dashboard-empty {

  min-height: 180px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #98a2b3;

  font-size: 13px;

}


/* =========================================================
   KUNJUNGAN POSYANDU
   LINE CHART
========================================================= */

.dashboard-chart {

  width: 100%;

  min-height: 210px;

}


#chartKunjungan {

  width: 100%;

  min-height: 210px;

  display: flex;

  align-items: center;

  justify-content: center;

}


.visit-chart-wrapper {

  width: 100%;

  height: 210px;

  overflow: hidden;

}


.visit-chart {

  display: block;

  width: 100%;

  height: 100%;

  overflow: visible;

}


/* ---------------------------------------------------------
   GRID LINE
--------------------------------------------------------- */

.visit-grid-line {

  stroke: #e5e7eb;

  stroke-width: 1;

  vector-effect:
    non-scaling-stroke;

}


/* ---------------------------------------------------------
   Y AXIS
--------------------------------------------------------- */

.visit-axis-label {

  fill: #98a2b3;

  font-size: 11px;

  font-family:
    Arial,
    sans-serif;

}


/* ---------------------------------------------------------
   DATE LABEL
--------------------------------------------------------- */

.visit-date-label {

  fill: #667085;

  font-size: 10px;

  font-family:
    Arial,
    sans-serif;

}


/* ---------------------------------------------------------
   LINE
--------------------------------------------------------- */

.visit-line {

  fill: none;

  stroke: #4f46e5;

  stroke-width: 3;

  stroke-linecap: round;

  stroke-linejoin: round;

  vector-effect:
    non-scaling-stroke;

}


/* ---------------------------------------------------------
   DATA POINT
--------------------------------------------------------- */

.visit-point {

  fill: #ffffff;

  stroke: #4f46e5;

  stroke-width: 3;

  vector-effect:
    non-scaling-stroke;

}


/* ---------------------------------------------------------
   CHART EMPTY
--------------------------------------------------------- */

.chart-empty {

  width: 100%;

  min-height: 180px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #98a2b3;

  font-size: 13px;

}


/* =========================================================
   STATUS BALITA
   DONUT CHART
   ========================================================= */

.growth-status-container {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   CONTAINER UTAMA
   ========================================================= */

#statusPertumbuhan {
  width: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}


/* =========================================================
   LAYOUT DONUT + LEGEND
   ========================================================= */

.status-donut-layout {
  width: 100%;
  min-height: 220px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 32px;
  box-sizing: border-box;
}


/*
   Alias struktur lama.
   Dipertahankan agar renderer lama
   tetap kompatibel.
*/

.status-donut-wrapper {
  width: 100%;
  min-height: 220px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 32px;
  box-sizing: border-box;
}


/* =========================================================
   DONUT
   ========================================================= */

.status-donut {
  position: relative;

  width: 150px;
  height: 150px;

  flex: 0 0 150px;

  border-radius: 50%;

  /*
     Fallback awal.
     JavaScript akan mengganti background ini
     sesuai proporsi data:
     - hijau  = Sesuai
     - merah  = Bermasalah
     - kuning = Belum Dinilai
  */

  background: conic-gradient(
    #86efac 0deg,
    #86efac 0deg,
    #ef4444 0deg,
    #ef4444 0deg,
    #facc15 0deg,
    #facc15 360deg
  );

  box-sizing: border-box;
}


/* =========================================================
   LUBANG TENGAH DONUT
   ========================================================= */

.status-donut::after {
  content: "";

  position: absolute;

  inset: 25px;

  background: #ffffff;

  border-radius: 50%;

  z-index: 1;
}


/* =========================================================
   CENTER DONUT
   ========================================================= */

.status-donut-center {
  position: absolute;

  z-index: 2;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;
}


/* =========================================================
   ANGKA TOTAL
   ========================================================= */

.status-donut-total {
  font-size: 26px;

  line-height: 1;

  font-weight: 700;

  color: #1d2939;
}


/* =========================================================
   LABEL TOTAL
   ========================================================= */

.status-donut-label {
  margin-top: 4px;

  font-size: 11px;

  line-height: 1.2;

  color: #667085;
}


/* =========================================================
   LEGEND
   ========================================================= */

.status-donut-legend {
  width: 180px;

  min-width: 165px;

  display: flex;

  flex-direction: column;

  gap: 13px;
}


.status-legend {
  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 13px;
}


/* =========================================================
   LEGEND ROW
   ========================================================= */

.status-legend-row {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  min-width: 0;
}


/* =========================================================
   LEGEND ITEM
   ========================================================= */

.status-legend-item {
  display: flex;

  align-items: center;

  gap: 8px;

  min-width: 0;
}


/* =========================================================
   LEGEND DOT
   ========================================================= */

.status-dot {
  width: 9px;

  height: 9px;

  flex: 0 0 9px;

  border-radius: 50%;
}


/* =========================================================
   SESUAI — HIJAU MUDA
   ========================================================= */

.status-dot-sesuai {
  background: #86efac;
}


/* =========================================================
   BERMASALAH — MERAH
   ========================================================= */

.status-dot-bermasalah {
  background: #ef4444;
}


/* =========================================================
   BELUM DINILAI — KUNING
   ========================================================= */

.status-dot-belum {
  background: #facc15;
}


/* =========================================================
   ALIAS CLASS LAMA
   Dipertahankan untuk kompatibilitas.
   ========================================================= */

.status-legend-dot {
  width: 9px;

  height: 9px;

  border-radius: 50%;

  flex: 0 0 9px;
}


.status-legend-dot.sesuai {
  background: #86efac;
}


.status-legend-dot.bermasalah {
  background: #ef4444;
}


.status-legend-dot.belum {
  background: #facc15;
}


/* =========================================================
   LEGEND LABEL
   ========================================================= */

.status-legend-label {
  display: flex;

  align-items: center;

  gap: 8px;

  min-width: 0;

  font-size: 13px;

  line-height: 1.3;

  color: #667085;
}


/* =========================================================
   LEGEND VALUE
   ========================================================= */

.status-legend-value {
  display: flex;

  align-items: baseline;

  gap: 5px;

  margin-left: auto;

  white-space: nowrap;
}


.status-legend-value strong {
  font-size: 15px;

  line-height: 1;

  font-weight: 650;

  color: #1d2939;
}


.status-legend-value small {
  font-size: 11px;

  line-height: 1;

  color: #98a2b3;
}


/* =========================================================
   EMPTY STATUS
   ========================================================= */

.status-chart-empty {
  width: 100%;

  min-height: 180px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #98a2b3;

  font-size: 13px;
}


/* =========================================================
   SUMMARY
========================================================= */

.dashboard-summary {

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;

  margin-bottom: 20px;

}


/* =========================================================
   SUMMARY ROW
========================================================= */

.dashboard-summary-row {

  position: relative;

  min-height: 76px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  gap: 6px;

  padding: 13px 15px 13px 17px;

  box-sizing: border-box;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fafc 100%
    );

  border: 1px solid #e4e7ec;

  border-radius: 12px;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;

}


/* =========================================================
   ACCENT STATUS
========================================================= */

.dashboard-summary-row::before {

  content: '';

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  width: 4px;

  background: #22c55e;

}


.dashboard-summary-row:nth-child(2)::before {

  background: #ef4444;

}


/* =========================================================
   HOVER SUMMARY
========================================================= */

.dashboard-summary-row:hover {

  transform:
    translateY(-2px);

  border-color:
    #d5dbe3;

  box-shadow:
    0 8px 20px
    rgba(
      16,
      24,
      40,
      0.07
    );

}


/* =========================================================
   STATUS LABEL
========================================================= */

.summary-status {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 11px;

  line-height: 1;

  font-weight: 700;

  letter-spacing:
    0.03em;

  text-transform:
    uppercase;

}


/* =========================================================
   SESUAI
========================================================= */

.summary-status-ok {

  color:
    #15803d;

}


/* =========================================================
   BERMASALAH
========================================================= */

.summary-status-warning {

  color:
    #dc2626;

}


/* =========================================================
   SUMMARY NUMBER
========================================================= */

.dashboard-summary-row strong {

  font-size: 25px;

  line-height: 1;

  font-weight: 750;

  letter-spacing:
    -0.02em;

  color:
    #172033;

}


/* =========================================================
   PROBLEM SECTION
========================================================= */

.dashboard-problem-section {

  margin-top: 2px;

}


/* =========================================================
   PROBLEM TITLE
========================================================= */

.dashboard-problem-title {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 10px;

  font-size: 11px;

  line-height: 1;

  font-weight: 700;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;

  color:
    #667085;

}


.dashboard-problem-title::after {

  content: '';

  flex: 1;

  height: 1px;

  background:
    #eaecf0;

}


/* =========================================================
   PROBLEM LIST
========================================================= */

.dashboard-problem-list {

  display: flex;

  flex-direction: column;

  gap: 3px;

}


/* =========================================================
   PROBLEM ROW
========================================================= */

.dashboard-problem-row {

  min-height: 34px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 4px 7px;

  box-sizing: border-box;

  border-radius: 8px;

  font-size: 12px;

  color:
    #475467;

  transition:
    background 0.16s ease,
    transform 0.16s ease;

}


.dashboard-problem-row:hover {

  background:
    #f8fafc;

  transform:
    translateX(3px);

}


/* =========================================================
   PROBLEM LABEL
========================================================= */

.dashboard-problem-row span {

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}


/* =========================================================
   PROBLEM NUMBER
========================================================= */

.dashboard-problem-row strong {

  min-width: 26px;

  height: 24px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0 7px;

  box-sizing: border-box;

  border-radius: 7px;

  background:
    #f2f4f7;

  color:
    #344054;

  font-size: 11px;

  line-height: 1;

  font-weight: 700;

  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;

}


.dashboard-problem-row:hover strong {

  background:
    #dcfce7;

  color:
    #166534;

  transform:
    scale(1.05);

}

/* =========================================================
   PROBLEM MINI BAR CHART
========================================================= */

.dashboard-problem-row {

  display: grid;

  grid-template-columns:
    minmax(110px, 1fr)
    minmax(150px, 1.8fr);

  align-items: center;

  gap: 14px;

  min-height: 40px;

  padding: 5px 7px;

  box-sizing: border-box;

  border-radius: 8px;

  font-size: 12px;

  color: #475467;

  transition:
    background 0.16s ease,
    transform 0.16s ease;

}


.dashboard-problem-row:hover {

  background: #f8fafc;

  transform: translateX(3px);

}


/* =========================================================
   LABEL
========================================================= */

.dashboard-problem-label {

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}


/* =========================================================
   METRIC AREA
========================================================= */

.dashboard-problem-metric {

  min-width: 0;

  display: flex;

  align-items: center;

  gap: 8px;

}


/* =========================================================
   NUMBERS
========================================================= */

.dashboard-problem-numbers {

  min-width: 68px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 5px;

}


.dashboard-problem-numbers strong {

  min-width: 24px;

  height: 23px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0 6px;

  box-sizing: border-box;

  border-radius: 6px;

  background: #f2f4f7;

  color: #344054;

  font-size: 11px;

  line-height: 1;

  font-weight: 700;

}


.dashboard-problem-percent {

  min-width: 38px;

  color: #98a2b3;

  font-size: 10px;

  font-weight: 600;

  text-align: right;

}


/* =========================================================
   BAR TRACK
========================================================= */

.dashboard-problem-bar {

  flex: 1;

  height: 6px;

  min-width: 40px;

  overflow: hidden;

  border-radius: 999px;

  background: #eef1f4;

}


/* =========================================================
   BAR
========================================================= */

.dashboard-problem-bar-fill {

  height: 100%;

  width: 0;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #86c98f,
      #3d9148
    );

  transition:
    width 0.45s ease;

}


/* =========================================================
   ZERO VALUE
========================================================= */

.dashboard-problem-row.is-zero
.dashboard-problem-bar-fill {

  width: 0 !important;

}


.dashboard-problem-row.is-zero
.dashboard-problem-percent {

  color: #b0b7c3;

}


/* =========================================================
   HOVER BAR
========================================================= */

.dashboard-problem-row:hover
.dashboard-problem-bar-fill {

  background:
    linear-gradient(
      90deg,
      #70bd7a,
      #287a34
    );

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

  .dashboard-problem-row {

    grid-template-columns:
      1fr;

    gap: 5px;

  }


  .dashboard-problem-metric {

    width: 100%;

  }


  .dashboard-problem-bar {

    min-width: 0;

  }

}



/* =========================================================
   AKSES CEPAT
========================================================= */

.dashboard-quick-access {

  margin-bottom: 16px;

}


.quick-access-grid {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 10px;

}


.quick-access-item {

  min-height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 10px 14px;

  box-sizing: border-box;

  border: 1px solid
    #e4e7ec;

  border-radius: 10px;

  background:
    #ffffff;

  color:
    #344054;

  font-size: 13px;

  font-weight: 550;

  cursor: pointer;

  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;

}


.quick-access-item:hover {

  background:
    #f8fbf9;

  border-color:
    #c8d9cc;

  box-shadow:
    0 5px 14px
    rgba(
      16,
      24,
      40,
      0.06
    );

  transform:
    translateY(-1px);

}


.quick-access-item:active {

  transform:
    translateY(0);

  box-shadow:
    none;

}


/* =========================================================
   QUICK ACCESS ICON
========================================================= */

.quick-access-icon {

  width: 25px;

  height: 25px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 7px;

  background:
    #f0fdf4;

  color:
    #287a34;

  font-size: 14px;

  line-height: 1;

  font-weight: 700;

}


/* =========================================================
   CARD INTERACTION
========================================================= */

.dashboard-content-grid
.dashboard-card {

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;

}


.dashboard-content-grid
.dashboard-card:hover {

  border-color:
    #d9e2dc;

  box-shadow:
    0 8px 24px
    rgba(
      16,
      24,
      40,
      0.05
    );

}


/* =========================================================
   CARD ICON
========================================================= */

.dashboard-card-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 30px;

  height: 30px;

  margin-right: 7px;

  border-radius: 9px;

  background:
    #f0fdf4;

  font-size: 15px;

  line-height: 1;

  vertical-align: middle;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .dashboard-kpi-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }


  .dashboard-content-grid {

    grid-template-columns:
      1fr;

  }


  .quick-access-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }

}


/* =========================================================
   TABLET / SMALL SCREEN
========================================================= */

@media (max-width: 700px) {

  .dashboard-summary {

    grid-template-columns:
      1fr;

  }


  .status-donut-layout,

  .status-donut-wrapper {

    flex-direction:
      column;

    gap: 18px;

  }


  .status-donut-legend,

  .status-legend {

    width: 100%;

    max-width: 240px;

  }


  .visit-chart-wrapper {

    height: 190px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

  .dashboard-header {

    flex-direction:
      column;

    gap: 14px;

  }


  .dashboard-actions {

    width: 100%;

  }


  .dashboard-month {

    flex: 1;

  }


  .dashboard-kpi-grid {

    grid-template-columns:
      1fr;

  }


  .dashboard-summary {

    grid-template-columns:
      1fr;

  }


  .quick-access-grid {

    grid-template-columns:
      1fr;

  }


  .dashboard-card {

    padding: 16px;

  }


  .status-donut {

    width: 140px;

    height: 140px;

    flex-basis: 140px;

  }


  .status-donut::after {

    inset: 23px;

  }


  .status-donut-total {

    font-size: 24px;

  }

}