/* ==========================================================================
   Dashboard Kawasan Permukiman Kumuh — tema DPRKP (dominan putih)
   Seluruh rule di-scope ke .kumuh-dashboard agar tidak bentrok
   dengan Bootstrap 4 dan main.css
   ========================================================================== */

.kumuh-dashboard {
  --k-navy: #0b2238;
  --k-blue: #035884;
  --k-blue-soft: rgba(3, 88, 132, 0.08);
  --k-green: #12866c;
  --k-muted: #6c7a87;
  --k-line: #edeef1;
  --k-soft: #f7f8fa;
  --k-white: #ffffff;
  width: 100%;
  background: #ffffff;
  color: var(--k-navy);
  font-family: "CircularStd", Arial, sans-serif;
  overflow-x: hidden;
}

[x-cloak] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Banner judul (komponen tema blog-banner_without_image dipakai apa adanya)
   -------------------------------------------------------------------------- */
.kumuh-dashboard .banner_title_inner h1 {
  font-size: 2.7rem;
}
.kumuh-dashboard .kumuh-hero-meta {
  margin: 6px 0 18px;
}
.kumuh-dashboard .kumuh-updated {
  font-size: 13px;
  color: var(--k-muted);
}

/* --------------------------------------------------------------------------
   Kartu statistik
   -------------------------------------------------------------------------- */
.kumuh-dashboard .kumuh-body {
  padding-bottom: 40px;
}
.kumuh-dashboard .cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
.kumuh-dashboard .cards .card {
  background: var(--k-white);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--k-line);
  box-shadow: 0 4px 14px rgba(11, 34, 56, 0.04);
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kumuh-dashboard .cards .card:hover {
  border-color: var(--k-blue);
  box-shadow: 0 6px 18px rgba(11, 34, 56, 0.07);
}
.kumuh-dashboard .cards .card strong {
  display: block;
  color: var(--k-muted);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}
.kumuh-dashboard .cards .card > div:not(.card-head) {
  margin-top: auto;
  font-size: 24px;
  font-weight: 700;
  color: var(--k-navy);
}
.kumuh-dashboard .cards .card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.kumuh-dashboard .cards .card-head .card-detail-hint {
  font-size: 11px;
  color: var(--k-blue);
  font-weight: 700;
  white-space: nowrap;
}
.kumuh-dashboard .cards .card-clickable {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Tombol (dominan putih; aksi utama biru)
   -------------------------------------------------------------------------- */
.kumuh-dashboard button {
  padding: 8px 14px;
  border: 1px solid var(--k-line);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.2;
  min-height: 36px;
  box-sizing: border-box;
  font-family: inherit;
  background: var(--k-white);
  color: var(--k-navy);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.kumuh-dashboard button:hover {
  background: var(--k-soft);
}
.kumuh-dashboard .secondary-btn {
  background: var(--k-white);
  color: var(--k-navy);
}
.kumuh-dashboard button.map-btn,
.kumuh-dashboard .detail-btn {
  background: var(--k-blue);
  color: var(--k-white);
  border-color: var(--k-blue);
}
.kumuh-dashboard button.map-btn,
.kumuh-dashboard .detail-btn:hover {
  background: var(--k-blue);
  opacity: 0.92;
}
.kumuh-dashboard .detail-btn {
  white-space: nowrap;
}
.kumuh-dashboard .desktop-table-wrapper { display: block; }
.kumuh-dashboard .mobile-table-wrapper { display: none; }
.kumuh-dashboard .mobile-aspect-select-wrap { display: none; }
.kumuh-dashboard .export-btn {
  background: var(--k-white);
  color: var(--k-navy);
}
.kumuh-dashboard .summary-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.kumuh-dashboard .kumuh-actions-bar {
  justify-content: space-between;
  align-items: center;
}
.kumuh-dashboard .kumuh-actions-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kumuh-dashboard .kumuh-doc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kumuh-dashboard .modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kumuh-dashboard .control-action-row button {
  min-width: 120px;
  padding: 8px 12px;
  font-size: 13px;
  min-height: 36px;
}

/* --------------------------------------------------------------------------
   Panel & kontrol
   -------------------------------------------------------------------------- */
.kumuh-dashboard .panel {
  background: var(--k-white);
  border: 1px solid var(--k-line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(11, 34, 56, 0.04);
  margin: 0 0 18px;
  /* netralisasi .panel milik main.css (width:20%; float:left) */
  width: 100%;
  max-width: 100%;
  float: none;
  text-align: left;
  box-sizing: border-box;
}
.kumuh-dashboard .panel h2 {
  font-family: "CircularStd", Arial, sans-serif;
  font-weight: 500;
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--k-navy);
}
.kumuh-dashboard .controls-block {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  max-width: 100%;
}
.kumuh-dashboard .control-filter-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, 0.7fr)) minmax(190px, 0.9fr) minmax(130px, 0.5fr);
  gap: 8px;
  align-items: center;
  width: 100%;
}
.kumuh-dashboard .control-filter-grid input,
.kumuh-dashboard .control-filter-grid select {
  width: 100%;
  min-width: 0;
}
.kumuh-dashboard .control-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.kumuh-dashboard .filter {
  margin: 0 0 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.kumuh-dashboard input,
.kumuh-dashboard select {
  padding: 8px 10px;
  border: 1px solid var(--k-line);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.2;
  min-height: 36px;
  box-sizing: border-box;
  font-family: inherit;
  background: var(--k-white);
  color: var(--k-navy);
}
.kumuh-dashboard input {
  min-width: 0;
}
.kumuh-dashboard input::placeholder {
  color: #9da6af;
}
.kumuh-dashboard input:focus,
.kumuh-dashboard select:focus {
  outline: none;
  border-color: var(--k-blue);
  box-shadow: 0 0 0 3px var(--k-blue-soft);
}

/* --------------------------------------------------------------------------
   Tab aspek (teks + garis bawah, gaya navigasi tema)
   -------------------------------------------------------------------------- */
.kumuh-dashboard .sector-tabs-wrap {
  max-width: 100%;
}
.kumuh-dashboard .aspect-tabs-scroll {
  display: flex;
  overflow-x: visible;
  overflow-y: visible;
  max-width: 100%;
  padding-bottom: 0;
}
.kumuh-dashboard .sector-tabs {
  display: flex;
  gap: 18px;
  flex-wrap: nowrap;
  margin: 4px 0 14px;
  min-width: 0;
  width: 100%;
  border-bottom: 1px solid var(--k-line);
}
.kumuh-dashboard .sector-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--k-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 2px 9px;
  min-height: 0;
  white-space: nowrap;
  flex: 0 0 auto;
  text-align: center;
}
.kumuh-dashboard .sector-tab:hover {
  background: transparent;
  color: var(--k-navy);
}
.kumuh-dashboard .sector-tab.active {
  color: var(--k-blue);
  border-bottom-color: var(--k-blue);
}

/* --------------------------------------------------------------------------
   Tabel
   -------------------------------------------------------------------------- */
.kumuh-dashboard table {
  width: 100%;
  border-collapse: collapse;
  background: var(--k-white);
}
.kumuh-dashboard th,
.kumuh-dashboard td {
  border-bottom: 1px solid var(--k-line);
  text-align: left;
  padding: 9px 10px;
  font-size: 13px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: break-word;
}
.kumuh-dashboard th {
  background: var(--k-soft);
  color: var(--k-navy);
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: normal;
  line-height: 1.3;
}
.kumuh-dashboard th.sortable {
  cursor: pointer;
  user-select: none;
}
.kumuh-dashboard th.sortable:hover {
  background: #eef1f5;
}
.kumuh-dashboard tbody tr:hover {
  background: var(--k-soft);
}
.kumuh-dashboard .table-wrap {
  max-height: 62vh;
  overflow: auto;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--k-line);
}
.kumuh-dashboard .col-id { width: 11%; }
.kumuh-dashboard .col-rt { width: 8%; white-space: nowrap; }
.kumuh-dashboard .col-num { width: 9%; }
.kumuh-dashboard .col-wide { width: 13%; }
.kumuh-dashboard .col-aksi { width: 7%; white-space: nowrap; }
.kumuh-dashboard .num {
  text-align: left;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kumuh-dashboard .center {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Meta & pagination
   -------------------------------------------------------------------------- */
.kumuh-dashboard .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  font-size: 13px;
  color: var(--k-muted);
  flex-wrap: wrap;
}
.kumuh-dashboard .meta h2 {
  font-family: "CircularStd", Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--k-navy);
  margin: 0;
}
.kumuh-dashboard .is-hidden {
  display: none !important;
}
.kumuh-dashboard .pagination.is-hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.kumuh-dashboard .popup-modal,
.kumuh-dashboard .list-modal,
.kumuh-dashboard .map-modal,
.kumuh-dashboard .detail-modal {
  position: fixed;
  inset: 0;
  background: rgba(11, 34, 56, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1200;
}
.kumuh-dashboard .popup-modal.is-hidden,
.kumuh-dashboard .list-modal.is-hidden,
.kumuh-dashboard .map-modal.is-hidden,
.kumuh-dashboard .detail-modal.is-hidden {
  display: none !important;
}
.kumuh-dashboard .popup-card {
  width: min(980px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: var(--k-white);
  border: 1px solid var(--k-line);
  border-radius: 8px;
  padding: 18px;
}
.kumuh-dashboard .list-card {
  width: min(760px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: var(--k-white);
  border: 1px solid var(--k-line);
  border-radius: 8px;
  padding: 16px;
}
.kumuh-dashboard .detail-card {
  width: min(900px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--k-white);
  border: 1px solid var(--k-line);
  border-radius: 8px;
  padding: 18px;
}
.kumuh-dashboard .map-card {
  width: min(980px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: var(--k-white);
  border: 1px solid var(--k-line);
  border-radius: 8px;
  padding: 16px;
}
.kumuh-dashboard .list-scroll {
  max-height: 58vh;
  overflow: auto;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  padding: 10px;
}
.kumuh-dashboard .narrative {
  margin: 0;
  color: var(--k-navy);
  font-size: 13px;
  line-height: 1.7;
}
.kumuh-dashboard .popup-card section h3 {
  font-family: "CircularStd", Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--k-navy);
  margin: 16px 0 10px;
}
.kumuh-dashboard .popup-card section.summary-narasi h3 {
  font-size: 13px;
}
.kumuh-dashboard .popup-card section.summary-top10 h3 {
  font-weight: 600;
}
.kumuh-dashboard .analysis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}
.kumuh-dashboard .analysis-card {
  border: 1px solid var(--k-line);
  border-radius: 8px;
  padding: 12px;
  background: var(--k-soft);
}
.kumuh-dashboard .popup-card .analysis-card h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--k-navy);
}
.kumuh-dashboard .top-list {
  margin: 0;
  padding-left: 22px;
  color: var(--k-navy);
  font-size: 13px;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Rekap & detail
   -------------------------------------------------------------------------- */
.kumuh-dashboard .rekap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 10px;
}
.kumuh-dashboard .rekap-group {
  border: 1px solid var(--k-line);
  border-radius: 8px;
  padding: 12px;
  background: var(--k-soft);
}
.kumuh-dashboard .rekap-group h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--k-navy);
}
.kumuh-dashboard .rekap-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.kumuh-dashboard .rekap-list li {
  color: var(--k-navy);
  font-size: 13px;
}
.kumuh-dashboard .detail-grid {
  display: flex;
  flex-direction: column;
  margin: 2px 0 8px;
}
.kumuh-dashboard .detail-grid > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--k-line);
}
.kumuh-dashboard .detail-grid > div:last-child {
  border-bottom: 0;
}
.kumuh-dashboard .detail-grid strong {
  flex: 0 0 190px;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--k-muted);
}
.kumuh-dashboard .detail-grid strong::after {
  content: ' :';
  color: #9da6af;
}
.kumuh-dashboard .detail-grid > div div {
  flex: 1;
  font-weight: 600;
  color: var(--k-navy);
}
.kumuh-dashboard .detail-card h3 {
  font-family: "CircularStd", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--k-navy);
  margin: 16px 0 8px;
}
.kumuh-dashboard .detail-card h3:first-of-type {
  margin-top: 2px;
}
.kumuh-dashboard .detail-sector {
  border: 1px solid var(--k-line);
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 14px;
}
.kumuh-dashboard .detail-sector tbody tr:nth-child(even) {
  background: var(--k-soft);
}
.kumuh-dashboard .detail-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--k-line);
}
.kumuh-dashboard .detail-close {
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--k-line);
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kumuh-dashboard .detail-sector th:nth-child(1),
.kumuh-dashboard .detail-sector td:nth-child(1) {
  width: 55%;
  text-align: left;
}
.kumuh-dashboard .detail-sector th:nth-child(2),
.kumuh-dashboard .detail-sector td:nth-child(2),
.kumuh-dashboard .detail-sector th:nth-child(3),
.kumuh-dashboard .detail-sector td:nth-child(3) {
  width: 22.5%;
  text-align: left;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Peta
   -------------------------------------------------------------------------- */
.kumuh-dashboard #mapContainer {
  height: 58vh;
  min-height: 320px;
  border: 1px solid var(--k-line);
  border-radius: 8px;
}
.kumuh-dashboard .map-note {
  margin: 8px 0 0;
  color: var(--k-muted);
  font-size: 12px;
  line-height: 1.4;
}
.kumuh-dashboard .map-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  padding: 6px 0;
  background: transparent;
  border: 0;
}
.kumuh-dashboard .map-chip {
  background: var(--k-white);
  border: 1px solid var(--k-line);
  border-radius: 999px;
  color: var(--k-muted);
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
}
.kumuh-dashboard .map-chip.is-on {
  background: var(--k-blue-soft);
  border-color: rgba(3, 88, 132, 0.35);
  color: var(--k-blue);
}
.kumuh-dashboard .map-chip:not(.is-on) {
  background: var(--k-white);
  border-color: var(--k-line);
  color: var(--k-muted);
}
.kumuh-dashboard .map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 6px 0;
  background: transparent;
  border: 0;
  align-items: center;
}
.kumuh-dashboard .map-legend .lg-title {
  font-size: 11px;
  color: var(--k-navy);
  font-weight: 700;
  margin-right: 2px;
}
.kumuh-dashboard .map-legend span {
  font-size: 11px;
}
.kumuh-dashboard .map-legend .lg-kab { color: var(--k-navy); }
.kumuh-dashboard .map-legend .lg-kec { color: var(--k-blue); }
.kumuh-dashboard .map-legend .lg-desa { color: var(--k-muted); }
.kumuh-dashboard .map-legend .lg-match { color: var(--k-green); }
.kumuh-dashboard .map-legend .lg-miss { color: var(--k-muted); }
.kumuh-dashboard .map-filter-info,
.kumuh-dashboard .map-status-info,
.kumuh-dashboard .map-sync-info {
  padding: 3px 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  font-size: 12px;
  color: var(--k-muted);
}
.kumuh-dashboard .map-sync-toggle {
  margin-top: 4px;
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid var(--k-line);
  background: var(--k-white);
  color: var(--k-navy);
  cursor: pointer;
}
.kumuh-dashboard .map-sync-list {
  margin: 6px 0 0 18px;
  padding: 0;
  font-size: 12px;
}
.kumuh-dashboard .map-sync-list li {
  margin: 2px 0;
}
.kumuh-dashboard .map-export-note {
  margin: 6px 0 0;
  color: var(--k-muted);
  font-size: 12px;
}
.kumuh-dashboard .map-export-note.is-hidden {
  display: none !important;
}
.kumuh-dashboard .map-rt-toggle {
  margin-top: 6px;
  padding: 4px 8px;
  font-size: 11px;
  border: 1px solid var(--k-line);
  border-radius: 6px;
  background: var(--k-white);
  color: var(--k-navy);
  cursor: pointer;
}
.kumuh-dashboard .map-rt-detail {
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  background: var(--k-soft);
  max-height: 180px;
  overflow: auto;
  font-size: 11px;
  line-height: 1.45;
}
.kumuh-dashboard .map-rt-detail.is-hidden {
  display: none !important;
}
.kumuh-dashboard .map-rt-detail ul {
  margin: 4px 0 6px 16px;
  padding: 0;
}

/* Export sheet (offscreen capture) */
.kumuh-dashboard .map-modal.export-mode .meta > div {
  display: none !important;
}
.kumuh-dashboard .map-modal.export-mode .leaflet-control-zoom {
  display: none !important;
}
.kumuh-dashboard .map-export-sheet {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 1200px;
  background: var(--k-white);
  padding: 16px;
  z-index: -1;
}
.kumuh-dashboard .map-export-title {
  font-family: "CircularStd", Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--k-navy);
  margin: 0 0 6px;
}
.kumuh-dashboard .map-export-meta {
  font-size: 13px;
  color: var(--k-navy);
  margin: 0 0 6px;
}
.kumuh-dashboard .map-export-canvas {
  width: 1168px;
  height: 760px;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  overflow: hidden;
  margin: 10px 0;
}
.kumuh-dashboard .map-export-legend {
  font-size: 12px;
  color: var(--k-navy);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .kumuh-dashboard .control-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kumuh-dashboard .control-filter-grid #searchInput {
    grid-column: 1 / -1;
  }
}
@media (max-width: 960px) {
  .kumuh-dashboard .analysis-grid,
  .kumuh-dashboard .rekap-grid {
    grid-template-columns: 1fr;
  }
  .kumuh-dashboard .cards {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}
@media (max-width: 768px) {
  .kumuh-dashboard .banner_title_inner h1 {
    font-size: 24px;
    line-height: 1.25;
  }
  .kumuh-dashboard .banner_title_inner p {
    font-size: 14px;
  }
  .kumuh-dashboard .sector-tabs-wrap {
    display: none;
  }
  .kumuh-dashboard .mobile-aspect-select-wrap {
    display: block;
    margin: 6px 0 8px;
  }
  .kumuh-dashboard .mobile-aspect-label {
    display: block;
    font-size: 12px;
    color: var(--k-muted);
    margin-bottom: 4px;
  }
  .kumuh-dashboard .mobile-aspect-select {
    height: 40px;
    width: 100%;
    font-size: 13px;
    padding: 8px 10px;
    margin: 2px 0 6px;
  }
  .kumuh-dashboard .desktop-table-wrapper {
    display: block;
  }
  .kumuh-dashboard .mobile-table-wrapper {
    display: none !important;
  }
  /* di mobile: tabel penuh semua kolom, digulir horizontal */
  .kumuh-dashboard .table-wrap {
    max-height: 62vh;
    overflow: auto;
  }
  .kumuh-dashboard .table-wrap > table {
    min-width: 760px;
  }
  .kumuh-dashboard .kumuh-body {
    padding-left: 12px;
    padding-right: 12px;
  }
  .kumuh-dashboard .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .kumuh-dashboard .cards .card {
    padding: 12px;
    min-width: 0;
  }
  .kumuh-dashboard .cards .card strong {
    font-size: 10px;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
  }
  .kumuh-dashboard .cards .card > div:not(.card-head) {
    font-size: 18px;
  }
  .kumuh-dashboard .cards .card-head .card-detail-hint {
    font-size: 10px;
  }
  .kumuh-dashboard .control-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .kumuh-dashboard .control-filter-grid input {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }
  .kumuh-dashboard .control-filter-grid select {
    width: 100%;
    min-width: 0;
    height: 40px;
    font-size: 13px;
    padding: 8px 10px;
  }
  .kumuh-dashboard .control-filter-grid #pageSizeSelect {
    grid-column: 1 / -1;
  }
  .kumuh-dashboard .control-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .kumuh-dashboard .control-action-row button {
    min-width: 0;
    width: 100%;
    min-height: 36px;
    padding: 7px 8px;
    font-size: 12px;
  }
  .kumuh-dashboard .detail-grid strong {
    flex: 0 0 125px;
  }
  .kumuh-dashboard .popup-card,
  .kumuh-dashboard .detail-card,
  .kumuh-dashboard .map-card,
  .kumuh-dashboard .list-card {
    width: min(95vw, 100%);
    max-height: 90vh;
    padding: 12px;
    border-radius: 8px;
    overflow: auto;
    font-size: 13px;
  }
  .kumuh-dashboard .popup-modal,
  .kumuh-dashboard .detail-modal,
  .kumuh-dashboard .map-modal,
  .kumuh-dashboard .list-modal {
    padding: 10px;
    align-items: flex-start;
    overflow: auto;
  }
  .kumuh-dashboard .meta {
    gap: 6px;
    align-items: flex-start;
  }
  .kumuh-dashboard .meta h2 {
    font-size: 16px;
    margin: 0;
    line-height: 1.25;
  }
  .kumuh-dashboard .meta > div,
  .kumuh-dashboard .summary-actions,
  .kumuh-dashboard .modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .kumuh-dashboard .meta button,
  .kumuh-dashboard .summary-actions button,
  .kumuh-dashboard .modal-actions button,
  .kumuh-dashboard .control-action-row button {
    min-height: 35px;
    padding: 6px 8px;
    font-size: 12px;
  }
  .kumuh-dashboard .detail-card table,
  .kumuh-dashboard .popup-card table,
  .kumuh-dashboard .list-card table {
    font-size: 12px;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .kumuh-dashboard .list-scroll {
    max-height: 52vh;
    overflow: auto;
  }
  .kumuh-dashboard #mapContainer {
    height: 48vh;
    min-height: 280px;
  }
  .kumuh-dashboard .map-controls {
    gap: 6px;
  }
  .kumuh-dashboard .map-chip {
    font-size: 10px;
    padding: 2px 7px;
  }
  .kumuh-dashboard .map-legend,
  .kumuh-dashboard .map-filter-info,
  .kumuh-dashboard .map-sync-info,
  .kumuh-dashboard .map-status-info {
    font-size: 11px;
    line-height: 1.35;
  }
  .kumuh-dashboard .map-sync-list {
    max-height: 120px;
    overflow: auto;
    padding-right: 4px;
  }
  .kumuh-dashboard .map-export-note {
    font-size: 11px;
  }
  .kumuh-dashboard .top-list {
    padding-left: 18px;
    font-size: 12px;
  }
  .kumuh-dashboard .popup-card section {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .kumuh-dashboard .banner_title_inner h1 {
    font-size: 20px;
  }
  .kumuh-dashboard .kumuh-updated {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .kumuh-dashboard .kumuh-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .kumuh-dashboard .kumuh-doc-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kumuh-dashboard .kumuh-doc-actions .map-btn {
    grid-column: 1 / -1;
  }
}