/* =============================================================
   PANTAU DESIGN SYSTEM V2 — VISUAL TRANSFORMATION
   =============================================================
   Scoped under `body.pantau-ui-v2` only. UI V1 (`?ui=v1`) is untouched.

   Direction: Material 3 Expressive × BPJS/PANTAU × Command Center.
   Goal: in <3s it must read as "new PANTAU", while every business
   function stays identical.

   Constraints:
   - No important-declarations outside the reduced-motion block (enforced by test).
   - Semantic tokens only; no dozens of random hardcoded colors.
   - No full-page animation on polling; only state/element transitions.
   ============================================================= */

/* ---- 1. SEMANTIC COLOR TOKENS (Material 3 surface hierarchy) ---- */
body.pantau-ui-v2 {
  /* BPJS/PANTAU brand anchor */
  --p-brand-blue: #0b5e8a;
  --p-brand-blue-deep: #073a5a;
  --p-brand-teal: #0b8584;
  --p-brand-lime: #a9d824;

  /* Primary (BPJS blue) */
  --p-primary: #0b5e8a;
  --p-on-primary: #ffffff;
  --p-primary-container: #d1e8f7;
  --p-on-primary-container: #063147;
  --p-primary-dim: #b8d9ee;

  /* Secondary (BPJS teal) */
  --p-secondary: #0b8584;
  --p-on-secondary: #ffffff;
  --p-secondary-container: #cbf3ef;
  --p-on-secondary-container: #02322f;

  /* Tertiary (BPJS green/lime grounding) */
  --p-tertiary: #4f6e00;
  --p-on-tertiary: #ffffff;
  --p-tertiary-container: #d7ed83;
  --p-on-tertiary-container: #1b2600;

  /* Neutrals — tonal surface scale */
  --p-surface-dim: #d8dde0;
  --p-surface: #eef3f4;
  --p-surface-bright: #fbfcfd;
  --p-surface-container-lowest: #ffffff;
  --p-surface-container-low: #eef3f5;
  --p-surface-container: #e9eef0;
  --p-surface-container-high: #e2e8ea;
  --p-surface-container-highest: #dce3e5;
  --p-on-surface: #14242e;
  --p-on-surface-variant: #42525c;
  --p-outline: #72828c;
  --p-outline-variant: #c4ced3;
  --p-inverse-surface: #1f2d35;
  --p-inverse-on-surface: #ecf1f3;

  /* Semantic status */
  --p-success: #1d7f46;
  --p-on-success: #ffffff;
  --p-success-container: #c9f2d6;
  --p-on-success-container: #0b3d21;
  --p-warning: #a06a00;
  --p-on-warning: #ffffff;
  --p-warning-container: #ffe8bd;
  --p-on-warning-container: #3d2b00;
  --p-error: #b3261e;
  --p-on-error: #ffffff;
  --p-error-container: #ffd9d5;
  --p-on-error-container: #510b07;
  --p-info: #0b6d8c;
  --p-on-info: #ffffff;
  --p-info-container: #d1edf7;
  --p-on-info-container: #063847;

  /* BPJS/PANTAU → brand gradients (semantic, not garnish) */
  --p-brand-deep: #073a5a;
  --p-brand-gradient: linear-gradient(135deg, #0b5e8a 0%, #073a5a 100%);
  --p-brand-gradient-soft: linear-gradient(135deg, rgba(11,94,138,0.9) 0%, rgba(7,58,90,0.94) 100%);

  /* ---- 2. TYPOGRAPHY ---- */
  --p-font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --p-font-display: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --p-fs-display: clamp(28px, 2.4vw, 40px);
  --p-fs-headline: clamp(22px, 2vw, 30px);
  --p-fs-title: clamp(16px, 1.3vw, 20px);
  --p-fs-body: 14px;
  --p-fs-label: 12.5px;
  --p-fs-meta: 11.5px;
  --p-lh-tight: 1.15;
  --p-lh-body: 1.55;
  --p-tracking-display: -0.02em;
  --p-tracking-label: 0.04em;
  --p-fw-kpi: 650;

  /* ---- 3. SPACING (4px base scale) ---- */
  --p-space-1: 4px;
  --p-space-2: 8px;
  --p-space-3: 12px;
  --p-space-4: 16px;
  --p-space-5: 20px;
  --p-space-6: 24px;
  --p-space-8: 32px;
  --p-space-10: 40px;
  --p-space-12: 48px;

  /* ---- 4. SHAPE ---- */
  --p-radius-xs: 8px;
  --p-radius-sm: 12px;
  --p-radius-md: 16px;
  --p-radius-lg: 22px;
  --p-radius-xl: 28px;
  --p-radius-pill: 999px;

  /* ---- 5. ELEVATION (soft, Material tonal) ---- */
  --p-elev-1: 0 1px 2px rgba(11, 42, 58, 0.06), 0 1px 3px rgba(11, 42, 58, 0.05);
  --p-elev-2: 0 2px 6px rgba(11, 42, 58, 0.07), 0 1px 2px rgba(11, 42, 58, 0.05);
  --p-elev-3: 0 8px 24px rgba(11, 42, 58, 0.09), 0 1px 3px rgba(11, 42, 58, 0.06);
  --p-elev-activate: 0 2px 8px rgba(11, 94, 138, 0.18), 0 1px 2px rgba(11, 94, 138, 0.10);

  /* ---- 6. MOTION ---- */
  --p-motion-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
  --p-motion-standard: 220ms cubic-bezier(0.2, 0, 0, 1);
  --p-motion-emphasized: 320ms cubic-bezier(0.2, 0, 0, 1);

  color: var(--p-on-surface);
  font-family: var(--p-font);
  background:
    radial-gradient(58% 42% at 100% 0%, rgba(169, 216, 36, 0.08) 0%, transparent 54%),
    radial-gradient(46% 40% at 0% 2%, rgba(11, 94, 138, 0.07) 0%, transparent 56%),
    var(--p-surface);
  -webkit-font-smoothing: antialiased;
}

/* =============================================================
   7. APP SHELL — workspace surface, generous but data-dense
   ============================================================= */
/* Lebar kolom sidebar diatur satu variabel per rentang layar (lihat bagian 22).
   Kartu sidebar = lebar kolom dikurangi margin 12px kiri-kanan. */
body.pantau-ui-v2 {
  --p-sidebar-w: 300px;
}

body.pantau-ui-v2 .generated-shell {
  grid-template-columns: var(--p-sidebar-w) minmax(0, 1fr);
  gap: 0;
  background: transparent;
  color: var(--p-on-surface);
}

body.pantau-ui-v2 .generated-main {
  min-width: 0;
  min-height: 100vh;
  background: transparent;
}

body.pantau-ui-v2 .generated-content {
  max-width: 1560px;
  margin: 0 auto;
  padding: 20px 28px 36px;
}

/* =============================================================
   8. SIDEBAR — premium, tonal, collapsible groups
   ============================================================= */
body.pantau-ui-v2 .generated-sidebar {
  position: sticky;
  top: 12px;
  z-index: 20;
  width: calc(100% - 24px);
  height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 12px;
  padding: 16px 10px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(252,254,254,0.94) 100%);
  border: 1px solid rgba(196, 206, 211, 0.55);
  border-radius: 24px;
  box-shadow: var(--p-elev-1);
}

body.pantau-ui-v2 .generated-brand {
  height: 66px;
  display: grid;
  place-items: center;
  padding: 4px 8px 10px;
  color: var(--p-brand-blue);
}

body.pantau-ui-v2 .generated-brand-logo-frame img {
  width: 188px;
  max-width: none;
}

/* Sidebar quick command — compact search affordance */
body.pantau-ui-v2 .generated-sidebar-command {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 8px);
  min-height: 42px;
  margin: 2px 4px 12px;
  padding: 0 14px;
  color: var(--p-on-surface-variant);
  background: var(--p-surface-container);
  border: 1px solid var(--p-outline-variant);
  border-radius: var(--p-radius-pill);
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 560;
  text-align: left;
  transition: background var(--p-motion-fast), border-color var(--p-motion-fast), box-shadow var(--p-motion-fast);
}
body.pantau-ui-v2 .generated-sidebar-command svg { width: 16px; height: 16px; flex: 0 0 16px; }
body.pantau-ui-v2 .generated-sidebar-command kbd {
  margin-left: auto;
  padding: 2px 7px;
  color: var(--p-on-surface-variant);
  background: var(--p-surface-container-lowest);
  border: 1px solid var(--p-outline-variant);
  border-radius: 7px;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
}
body.pantau-ui-v2 .generated-sidebar-command:hover,
body.pantau-ui-v2 .generated-sidebar-command:focus-visible {
  background: var(--p-surface-container-high);
  border-color: var(--p-primary);
}

body.pantau-ui-v2 .generated-nav {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px 5px 4px 2px;
  scrollbar-color: var(--p-outline) transparent;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}
body.pantau-ui-v2 .generated-nav::-webkit-scrollbar { width: 6px; }
body.pantau-ui-v2 .generated-nav::-webkit-scrollbar-track { background: transparent; }
body.pantau-ui-v2 .generated-nav::-webkit-scrollbar-thumb {
  background: var(--p-outline);
  border-radius: 8px;
}
body.pantau-ui-v2 .generated-nav::after { content: ""; display: block; height: 36px; }

/* Section header */
body.pantau-ui-v2 .gen-nav-section { margin-top: 4px; }
body.pantau-ui-v2 .gen-nav-section-header {
  width: 100%;
  gap: 8px;
  padding: 10px 12px;
  margin: 4px 0 2px;
  border-radius: var(--p-radius-pill);
  color: var(--p-on-surface-variant);
  cursor: pointer;
  transition: background var(--p-motion-fast), color var(--p-motion-fast);
}
body.pantau-ui-v2 .gen-nav-section-header:hover {
  background: var(--p-surface-container-high);
  color: var(--p-on-surface);
}
body.pantau-ui-v2 .gen-nav-section-header:hover .gen-nav-section-chevron { color: var(--p-secondary); }
body.pantau-ui-v2 .gen-nav-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
body.pantau-ui-v2 .gen-nav-section-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--p-outline-variant);
  opacity: 0.6;
}
body.pantau-ui-v2 .gen-nav-section-chevron {
  width: 16px;
  height: 16px;
  color: var(--p-on-surface-variant);
  transition: transform var(--p-motion-standard), color var(--p-motion-fast);
}
body.pantau-ui-v2 .gen-nav-section.collapsed .gen-nav-section-chevron { transform: rotate(-90deg); }
body.pantau-ui-v2 .gen-nav-section-body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  overflow: hidden;
  transition: grid-template-rows var(--p-motion-standard), opacity var(--p-motion-fast);
}
body.pantau-ui-v2 .gen-nav-section-links { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; }
body.pantau-ui-v2 .gen-nav-section.collapsed .gen-nav-section-body {
  grid-template-rows: 0fr;
  opacity: 0;
}

/* Nav link — icon container + tonal active pill */
body.pantau-ui-v2 .gen-nav-link {
  position: relative;
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
  padding: 6px 12px;
  color: var(--p-on-surface-variant);
  background: transparent;
  border: 0;
  border-radius: var(--p-radius-pill);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 560;
  text-align: left;
  transition: background var(--p-motion-fast), color var(--p-motion-fast), transform var(--p-motion-fast);
}
body.pantau-ui-v2 .gen-nav-link svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  stroke-width: 1.9;
}
body.pantau-ui-v2 .gen-nav-link:hover {
  background: var(--p-surface-container-high);
  color: var(--p-on-surface);
  transform: translateX(1px);
}
body.pantau-ui-v2 .gen-nav-link.active {
  min-height: 46px;
  background: var(--p-secondary-container);
  color: var(--p-on-secondary-container);
  font-weight: 650;
  box-shadow: none;
  border-radius: var(--p-radius-pill);
}
body.pantau-ui-v2 .gen-nav-link::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 4px;
  height: 20px;
  border-radius: 4px;
  background: var(--p-secondary);
  transform: translateY(-50%) scaleY(0);
  opacity: 0;
  transition: opacity var(--p-motion-fast), transform var(--p-motion-fast);
}
body.pantau-ui-v2 .gen-nav-link.active::before {
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
}
body.pantau-ui-v2 .gen-nav-link.active svg { color: var(--p-secondary); }
body.pantau-ui-v2 .gen-nav-link.subitem { min-height: 40px; font-size: 13.5px; }

body.pantau-ui-v2 .generated-sidebar-bottom {
  padding-top: 8px;
  border-top: 1px solid var(--p-outline-variant);
  opacity: 1;
}
body.pantau-ui-v2 .generated-sidebar-bottom .gen-nav-link { min-height: 40px; }

/* =============================================================
   9. TOPBAR — modern, sticky, clear hierarchy
   ============================================================= */
body.pantau-ui-v2 .generated-topbar {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 26px 8px 18px;
  /* Tanpa kotak: bar atas menyatu dengan latar halaman. Latar tipis baru
     muncul saat halaman digulir (body.p-scrolled), supaya isi yang lewat di
     belakang bar tetap tidak menabrak judul dan tombol. */
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 30;
  transition: background var(--p-motion-fast), backdrop-filter var(--p-motion-fast);
}
body.pantau-ui-v2.p-scrolled .generated-topbar {
  background: rgba(238, 243, 244, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.pantau-ui-v2 .generated-topbar-title {
  min-width: 0;
  display: grid;
  gap: 2px;
  line-height: 1.15;
}
body.pantau-ui-v2 .generated-topbar-title .generated-topbar-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--p-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
body.pantau-ui-v2 .generated-topbar-title h1 {
  margin: 0;
  color: var(--p-on-surface);
  font-family: var(--p-font-display);
  font-size: 18px;
  font-weight: 680;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.pantau-ui-v2 .generated-search {
  width: min(520px, 44%);
  height: 44px;
  gap: 11px;
  padding: 0 18px;
  color: var(--p-on-surface-variant);
  background: var(--p-surface-container);
  border: 1px solid var(--p-outline-variant);
  border-radius: var(--p-radius-pill);
  box-shadow: none;
  transition: background var(--p-motion-fast), border-color var(--p-motion-fast), box-shadow var(--p-motion-fast);
}
body.pantau-ui-v2 .generated-search svg { width: 17px; height: 17px; flex: 0 0 17px; }
body.pantau-ui-v2 .generated-search input {
  width: 100%;
  color: var(--p-on-surface);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 14.5px;
}
/* Aturan input global (input:not([type=...])) lebih spesifik dan memberi kotak
   putih ber-border di dalam kapsul pencarian; selektor ini menandinginya. */
body.pantau-ui-v2 .generated-search input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  height: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Cincin fokus sudah digambar kapsul (.generated-search:focus-within). */
body.pantau-ui-v2 .generated-search input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
body.pantau-ui-v2 .generated-search input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible {
  outline: none;
  box-shadow: none;
}
body.pantau-ui-v2 .generated-search input::placeholder { color: var(--p-on-surface-variant); opacity: 1; }
body.pantau-ui-v2 .generated-search:focus-within {
  background: var(--p-surface-container-lowest);
  border-color: var(--p-primary);
  box-shadow: 0 0 0 3px rgba(11, 94, 138, 0.14);
}

body.pantau-ui-v2 .generated-account { display: flex; align-items: center; gap: 10px; }

body.pantau-ui-v2 .generated-round-button,
body.pantau-ui-v2 .generated-profile {
  height: 44px;
  color: var(--p-on-surface-variant);
  background: var(--p-surface-container-lowest);
  border: 1px solid var(--p-outline-variant);
  border-radius: var(--p-radius-pill);
  box-shadow: none;
  transition: background var(--p-motion-fast), border-color var(--p-motion-fast), transform var(--p-motion-fast);
}
body.pantau-ui-v2 .generated-round-button { width: 44px; }
body.pantau-ui-v2 .generated-round-button:hover,
body.pantau-ui-v2 .generated-profile:hover {
  background: var(--p-surface-container);
  border-color: var(--p-primary);
}
body.pantau-ui-v2 .generated-round-button:active,
body.pantau-ui-v2 .generated-profile:active {
  transform: scale(0.96);
}
body.pantau-ui-v2 .generated-round-button svg { width: 19px; height: 19px; }
body.pantau-ui-v2 .generated-profile span {
  background: var(--p-primary-container);
  color: var(--p-on-primary-container);
}

body.pantau-ui-v2 .global-search-results {
  border-color: var(--p-outline-variant);
  border-radius: var(--p-radius-lg);
  box-shadow: var(--p-elev-3);
}
body.pantau-ui-v2 .global-search-results button { border-radius: var(--p-radius-md); }
body.pantau-ui-v2 .global-search-results button:hover { background: var(--p-primary-container); }

/* =============================================================
   10. DASHBOARD CONTROLS & PAGE HEAD
   ============================================================= */
body.pantau-ui-v2 .generated-controls {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px 0 18px;
}

body.pantau-ui-v2 .generated-control-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.pantau-ui-v2 .generated-greeting-mark {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  color: var(--p-on-primary);
  background: var(--p-brand-gradient);
  border-radius: var(--p-radius-md);
  box-shadow: var(--p-elev-2);
}
body.pantau-ui-v2 .generated-greeting-copy small { color: var(--p-primary); }
body.pantau-ui-v2 .generated-greeting-copy strong { color: var(--p-on-surface); font-weight: 720; }
body.pantau-ui-v2 .generated-greeting-copy > span { color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .generated-weather { border-left-color: var(--p-outline-variant); }
body.pantau-ui-v2 .generated-weather > svg { color: var(--p-warning); }

/* Filter controls -> M3 filled/tonal/outlined field */
body.pantau-ui-v2 .generated-date,
body.pantau-ui-v2 .generated-period,
body.pantau-ui-v2 .generated-filter,
body.pantau-ui-v2 .generated-export,
body.pantau-ui-v2 .generated-custom-range {
  height: 42px;
  color: var(--p-on-surface-variant);
  background: var(--p-surface-container-lowest);
  border: 1px solid var(--p-outline-variant);
  border-radius: var(--p-radius-pill);
  font-size: 13.5px;
  font-weight: 560;
  transition: border-color var(--p-motion-fast), background var(--p-motion-fast), box-shadow var(--p-motion-fast);
}
body.pantau-ui-v2 .generated-date { gap: 9px; padding: 0 16px; border-radius: var(--p-radius-pill); }
body.pantau-ui-v2 .generated-date svg { color: var(--p-primary); }
body.pantau-ui-v2 .generated-period { margin-left: 0; border-radius: var(--p-radius-pill); }
body.pantau-ui-v2 .generated-period select,
body.pantau-ui-v2 .generated-filter select { font: inherit; cursor: pointer; }
body.pantau-ui-v2 .generated-period svg,
body.pantau-ui-v2 .generated-filter svg { color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .generated-date:hover,
body.pantau-ui-v2 .generated-period:hover,
body.pantau-ui-v2 .generated-filter:hover,
body.pantau-ui-v2 .generated-custom-range:hover {
  border-color: var(--p-primary);
}

/* FILLED export button */
body.pantau-ui-v2 .generated-export {
  color: var(--p-on-primary);
  background: var(--p-primary);
  border: none;
  font-weight: 650;
}
body.pantau-ui-v2 .generated-export:hover {
  background: var(--p-brand-blue-deep);
}
body.pantau-ui-v2 .generated-export:active { transform: scale(0.97); }

/* =============================================================
   11. COMMAND HERO — visually strong, compact
   ============================================================= */
body.pantau-ui-v2 .p-command-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) auto;
  grid-template-rows: auto auto;
  gap: 18px 28px;
  align-items: center;
  padding: 28px 30px 26px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: var(--p-radius-xl);
  background:
    radial-gradient(110% 180% at 100% 0%, rgba(169, 216, 36, 0.16) 0%, transparent 50%),
    radial-gradient(110% 180% at 0% 100%, rgba(11, 133, 132, 0.16) 0%, transparent 50%),
    var(--p-brand-gradient-soft);
  color: var(--p-on-primary);
  box-shadow: var(--p-elev-3);
  isolation: isolate;
}
body.pantau-ui-v2 .p-command-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image:
    linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px);
  background-size: 30px 30px;
  z-index: 0;
  pointer-events: none;
}
body.pantau-ui-v2 .p-command-hero-copy,
body.pantau-ui-v2 .p-command-hero-health,
body.pantau-ui-v2 .p-command-hero-actions { position: relative; z-index: 1; }

body.pantau-ui-v2 .p-command-hero .p-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.84);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.pantau-ui-v2 .p-command-hero-copy h1 {
  margin: 8px 0 6px;
  font-family: var(--p-font-display);
  font-size: var(--p-fs-display);
  font-weight: 640;
  letter-spacing: var(--p-tracking-display);
  color: #ffffff;
}
body.pantau-ui-v2 .p-command-hero-copy p {
  max-width: 640px;
  margin: 0;
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: rgba(255,255,255,0.84);
}
body.pantau-ui-v2 .p-command-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
body.pantau-ui-v2 .p-command-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  font-size: var(--p-fs-label);
  font-weight: 580;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--p-radius-pill);
  backdrop-filter: blur(4px);
}
body.pantau-ui-v2 .p-command-hero-meta span svg { width: 15px; height: 15px; }

body.pantau-ui-v2 .p-command-hero-health {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
body.pantau-ui-v2 .p-health-ring {
  width: 118px;
  height: 118px;
  flex: 0 0 118px;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(#b8e72f calc(var(--health, 0) * 1%), rgba(255,255,255,0.16) 0);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
body.pantau-ui-v2 .p-health-ring::before {
  content: "";
  position: absolute;
  inset: 10px;
  background: var(--p-brand-deep);
  border-radius: 50%;
}
body.pantau-ui-v2 .p-health-ring.is-empty { background: rgba(255,255,255,0.14); }
body.pantau-ui-v2 .p-health-ring span {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
body.pantau-ui-v2 .p-health-ring strong {
  font-family: var(--p-font-display);
  font-size: 32px;
  font-weight: 660;
  line-height: 1;
}
body.pantau-ui-v2 .p-health-ring small { margin-top: 2px; font-size: var(--p-fs-meta); color: rgba(255,255,255,0.72); }

body.pantau-ui-v2 .p-health-legend {
  display: grid;
  gap: 8px;
  min-width: 180px;
}
body.pantau-ui-v2 .p-health-legend span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--p-fs-label);
  color: rgba(255,255,255,0.88);
}
body.pantau-ui-v2 .p-health-legend i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
body.pantau-ui-v2 .p-health-legend .ok i { background: #b8e72f; }
body.pantau-ui-v2 .p-health-legend .watch i { background: #ffd85c; }
body.pantau-ui-v2 .p-health-legend .critical i { background: #ff8a80; }
body.pantau-ui-v2 .p-health-legend strong { margin-left: auto; font-weight: 680; }

body.pantau-ui-v2 .p-command-hero-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}
body.pantau-ui-v2 .p-command-hero-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  font-size: var(--p-fs-body);
  font-weight: 620;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: var(--p-radius-pill);
  cursor: pointer;
  transition: background var(--p-motion-fast), transform var(--p-motion-fast), border-color var(--p-motion-fast);
}
body.pantau-ui-v2 .p-command-hero-actions button:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.36);
}
body.pantau-ui-v2 .p-command-hero-actions button:active { transform: scale(0.97); }
body.pantau-ui-v2 .p-command-hero-actions button svg { width: 17px; height: 17px; }

/* =============================================================
   12. CARD SYSTEM — surface hierarchy, less "white boxes"
   ============================================================= */
body.pantau-ui-v2 .generated-dashboard {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.12fr) minmax(0, .94fr);
  grid-template-rows: auto auto auto;
  gap: 16px;
}

body.pantau-ui-v2 .generated-card,
body.pantau-ui-v2 .generated-assistant,
body.pantau-ui-v2 .wtwl-card,
body.pantau-ui-v2 .lanuri-target-card {
  min-width: 0;
  overflow: hidden;
  background: var(--p-surface-container-lowest);
  border: 1px solid rgba(196, 206, 211, 0.42);
  border-radius: var(--p-radius-lg);
  box-shadow: var(--p-elev-1);
  transition: box-shadow var(--p-motion-standard), transform var(--p-motion-standard), border-color var(--p-motion-fast);
}
body.pantau-ui-v2 .generated-card { padding: 18px 18px; }
body.pantau-ui-v2 .generated-card:hover,
body.pantau-ui-v2 .generated-assistant:hover {
  border-color: rgba(11, 94, 138, 0.28);
  box-shadow: var(--p-elev-2);
}

body.pantau-ui-v2 .generated-card-head { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.pantau-ui-v2 .generated-card-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--p-on-surface);
  font-size: var(--p-fs-title);
  font-weight: 660;
  letter-spacing: -0.01em;
}
body.pantau-ui-v2 .generated-card-head h2 > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--p-on-primary-container);
  background: var(--p-primary-container);
  border-radius: var(--p-radius-sm);
}
body.pantau-ui-v2 .generated-card-head h2 svg { width: 16px; height: 16px; stroke-width: 2; }
body.pantau-ui-v2 .generated-card-head button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  color: var(--p-primary);
  background: transparent;
  border: 0;
  border-radius: var(--p-radius-pill);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  transition: background var(--p-motion-fast);
}
body.pantau-ui-v2 .generated-card-head button:hover { background: var(--p-primary-container); }
body.pantau-ui-v2 .generated-card-head button svg { width: 15px; height: 15px; }
body.pantau-ui-v2 .generated-card-head > small {
  padding: 6px 11px;
  color: var(--p-on-surface-variant);
  background: var(--p-surface-container);
  border-radius: var(--p-radius-pill);
  font-size: var(--p-fs-meta);
  font-weight: 600;
}

/* =============================================================
   14. KPI SCORECARD — soft tonal Material 3 (blue/teal/lime/slate)
   ============================================================= */
/* Scorecard panel: tinted surface instead of a stark white box */
body.pantau-ui-v2 .generated-kpi-card {
  background:
    linear-gradient(135deg, rgba(209, 232, 247, 0.5) 0%, rgba(238, 243, 245, 0.72) 34%, rgba(203, 243, 239, 0.4) 66%, rgba(215, 237, 131, 0.26) 100%);
  border-color: rgba(11, 94, 138, 0.14);
}

body.pantau-ui-v2 .generated-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding-top: 14px;
}

/* KPI tiles — tonal containers with a soft top-light, no hard border */
body.pantau-ui-v2 .generated-kpi-row > div {
  position: relative;
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 116px;
  padding: 18px 16px 16px;
  border: 0;
  border-radius: var(--p-radius-md);
  box-shadow: var(--p-elev-1);
  overflow: hidden;
}
body.pantau-ui-v2 .generated-kpi-row > div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 52%);
  pointer-events: none;
}
body.pantau-ui-v2 .generated-kpi-row > div > * { position: relative; z-index: 1; }

/* Semantic tonal containers — soft blue / teal / lime / slate */
body.pantau-ui-v2 .generated-kpi-row > div:nth-child(1) { background: var(--p-primary-container); color: var(--p-on-primary-container); }
body.pantau-ui-v2 .generated-kpi-row > div:nth-child(2) { background: var(--p-secondary-container); color: var(--p-on-secondary-container); }
body.pantau-ui-v2 .generated-kpi-row > div:nth-child(3) { background: var(--p-tertiary-container); color: var(--p-on-tertiary-container); }
body.pantau-ui-v2 .generated-kpi-row > div:nth-child(4) { background: var(--p-surface-container-high); color: var(--p-on-surface); }

body.pantau-ui-v2 .generated-kpi-row p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: inherit;
  font-size: 11.5px;
  font-weight: 680;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.pantau-ui-v2 .generated-kpi-row p svg { width: 17px; height: 17px; flex: 0 0 17px; color: inherit; opacity: 0.82; }
/* Stronger KPI numbers */
body.pantau-ui-v2 .generated-kpi-row strong {
  color: inherit;
  font-family: var(--p-font-display);
  font-size: 34px;
  font-weight: 720;
  letter-spacing: -0.015em;
  line-height: 0.98;
  overflow-wrap: break-word;
  word-break: break-word;
}
body.pantau-ui-v2 .generated-kpi-row strong small { font-size: 14px; font-weight: 640; letter-spacing: 0; opacity: 0.82; }
body.pantau-ui-v2 .generated-kpi-row em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  color: inherit;
  font-size: 11px;
  font-style: normal;
  font-weight: 680;
  opacity: 0.88;
  white-space: nowrap;
}
body.pantau-ui-v2 .generated-kpi-row em svg { width: 12px; height: 12px; }

/* =============================================================
   15. STATUS AREA / MINI CHARTS / OVERVIEW
   ============================================================= */
body.pantau-ui-v2 .generated-status-list { display: grid; gap: 16px; padding: 14px 2px 0; }
body.pantau-ui-v2 .generated-status-item { display: grid; gap: 7px; }
body.pantau-ui-v2 .generated-status-copy {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 8px;
  color: var(--p-on-surface);
}
body.pantau-ui-v2 .generated-status-copy > svg { width: 18px; height: 18px; color: var(--p-primary); }
body.pantau-ui-v2 .generated-status-copy span { overflow: hidden; color: var(--p-on-surface-variant); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
body.pantau-ui-v2 .generated-status-copy strong { color: var(--p-on-surface); font-size: 12.5px; font-weight: 680; }
body.pantau-ui-v2 .generated-status-copy small { min-width: 48px; color: var(--p-on-surface-variant); font-size: 11px; text-align: right; }

body.pantau-ui-v2 .generated-progress {
  height: 9px;
  margin-left: 30px;
  overflow: hidden;
  background: var(--p-surface-container-high);
  border-radius: var(--p-radius-pill);
}
body.pantau-ui-v2 .generated-progress i {
  display: block;
  height: 100%;
  background: var(--p-info);
  border-radius: inherit;
  transition: width var(--p-motion-standard);
}
body.pantau-ui-v2 .generated-progress .bar-0,
body.pantau-ui-v2 .generated-progress .bar-1 { background: var(--p-primary); }
body.pantau-ui-v2 .generated-progress .bar-2 { background: var(--p-secondary); }
body.pantau-ui-v2 .generated-progress .bar-3,
body.pantau-ui-v2 .generated-progress .bar-4 { background: var(--p-tertiary); }
body.pantau-ui-v2 .generated-progress .bar-5 { background: var(--p-warning); }
body.pantau-ui-v2 .generated-progress .bar-6 { background: var(--p-info); }

body.pantau-ui-v2 .generated-donut-mini {
  background: conic-gradient(var(--donut-color) calc(var(--value) * 1%), var(--p-surface-container-high) 0);
}
body.pantau-ui-v2 .generated-donut-mini::before { background: var(--p-surface-container-lowest); }
body.pantau-ui-v2 .generated-donut-mini.navy { --donut-color: var(--p-primary); }
body.pantau-ui-v2 .generated-donut-mini.teal { --donut-color: var(--p-secondary); }
body.pantau-ui-v2 .generated-donut-mini.lime { --donut-color: var(--p-tertiary); }
body.pantau-ui-v2 .generated-donut-mini strong { color: var(--p-on-surface); }
body.pantau-ui-v2 .generated-donut-mini span { color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .generated-donut-mini small { color: var(--p-on-surface-variant); }

body.pantau-ui-v2 .generated-bar-chart { gap: 8px; }
body.pantau-ui-v2 .generated-bar-column > div { border-radius: var(--p-radius-xs); }
body.pantau-ui-v2 .generated-bar-column i.navy { background: var(--p-primary); }
body.pantau-ui-v2 .generated-bar-column i.lime { background: var(--p-tertiary); }

body.pantau-ui-v2 .generated-multi-donut { background: conic-gradient(var(--p-primary) 0 calc(var(--watch) * 1%), var(--p-secondary) 0 calc((var(--watch) + var(--good)) * 1%), var(--p-tertiary) 0); }
body.pantau-ui-v2 .generated-multi-donut span strong { color: var(--p-on-surface); }

body.pantau-ui-v2 .generated-snapshot-summary i.navy,
body.pantau-ui-v2 .generated-usage-legend i.navy,
body.pantau-ui-v2 .generated-overview-legend i.navy { background: var(--p-primary); }
body.pantau-ui-v2 .generated-snapshot-summary i.lime,
body.pantau-ui-v2 .generated-usage-legend i.lime,
body.pantau-ui-v2 .generated-overview-legend i.lime { background: var(--p-tertiary); }
body.pantau-ui-v2 .generated-overview-legend i.teal { background: var(--p-secondary); }
body.pantau-ui-v2 .generated-overview-legend i.pale { background: var(--p-outline-variant); }

/* Assistant card */
body.pantau-ui-v2 .generated-assistant { background: var(--p-secondary-container); color: var(--p-on-secondary-container); }
body.pantau-ui-v2 .generated-assistant h2 { color: var(--p-on-secondary-container); }
body.pantau-ui-v2 .generated-assistant p { color: var(--p-on-secondary-container); opacity: 0.82; }
body.pantau-ui-v2 .generated-assistant-action {
  color: var(--p-on-secondary);
  background: var(--p-secondary);
  border: none;
  border-radius: var(--p-radius-pill);
  font-weight: 650;
  transition: filter var(--p-motion-fast), transform var(--p-motion-fast);
}
body.pantau-ui-v2 .generated-assistant-action:hover { filter: brightness(1.06); }
body.pantau-ui-v2 .generated-assistant-action:active { transform: scale(0.97); }

/* =============================================================
   16. DATA TABLE — clean, rounded, sticky header
   ============================================================= */
body.pantau-ui-v2 .wtwl-table-wrap {
  overflow: auto;
  border: 1px solid rgba(196, 206, 211, 0.42);
  border-radius: var(--p-radius-md);
}
body.pantau-ui-v2 .wtwl-table { border-spacing: 0; width: 100%; }
body.pantau-ui-v2 .wtwl-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--p-surface-container);
  color: var(--p-on-surface-variant);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
}
body.pantau-ui-v2 .wtwl-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--p-outline-variant);
  color: var(--p-on-surface);
  font-size: 13px;
  vertical-align: middle;
}
body.pantau-ui-v2 .wtwl-table tbody tr:last-child td { border-bottom: 0; }
body.pantau-ui-v2 .wtwl-table tbody tr { transition: background var(--p-motion-fast); }
body.pantau-ui-v2 .wtwl-table tbody tr:hover { background: var(--p-surface-container-low); }
body.pantau-ui-v2 .wtwl-table td > small { color: var(--p-on-surface-variant); }

/* =============================================================
   17. STATUS CHIP SYSTEM (success/warning/error/info/neutral/live)
   ============================================================= */
body.pantau-ui-v2 .wtwl-batch-status,
body.pantau-ui-v2 .wa-conn-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--p-radius-pill);
  font-size: 12px;
  font-weight: 680;
  white-space: nowrap;
}
body.pantau-ui-v2 .wtwl-batch-status i,
body.pantau-ui-v2 .wa-conn-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p-info);
  box-shadow: 0 0 0 3px var(--p-info-container);
}

body.pantau-ui-v2 .wtwl-batch-status.active { color: var(--p-on-success-container); background: var(--p-success-container); }
body.pantau-ui-v2 .wtwl-batch-status.active i { background: var(--p-success); box-shadow: 0 0 0 3px rgba(29,127,70,0.16); }
body.pantau-ui-v2 .wtwl-batch-status.replaced,
body.pantau-ui-v2 .wtwl-batch-status.partially_replaced { color: var(--p-on-warning-container); background: var(--p-warning-container); }
body.pantau-ui-v2 .wtwl-batch-status.replaced i,
body.pantau-ui-v2 .wtwl-batch-status.partially_replaced i { background: var(--p-warning); box-shadow: 0 0 0 3px rgba(160,106,0,0.16); }

body.pantau-ui-v2 .wtwl-batch-download {
  width: 34px;
  height: 34px;
  border-radius: var(--p-radius-sm, 10px);
  border: 1px solid var(--p-outline-variant);
  background: var(--p-surface-container-lowest);
  color: var(--p-primary);
}
body.pantau-ui-v2 .wtwl-batch-download:hover {
  background: var(--p-primary-container);
  border-color: var(--p-primary);
}
body.pantau-ui-v2 .wtwl-batch-delete {
  width: 34px;
  height: 34px;
  border-radius: var(--p-radius-sm, 10px);
  border: 1px solid var(--p-outline-variant);
  background: var(--p-surface-container-lowest);
  color: var(--p-error, #b3261e);
}
body.pantau-ui-v2 .wtwl-batch-delete:hover {
  background: var(--p-error-container, #f9dedc);
  border-color: var(--p-error, #b3261e);
}

body.pantau-ui-v2 .wtwl-batch-download.is-disabled {
  color: var(--p-on-surface-variant);
  border-color: var(--p-outline-variant);
  background: var(--p-surface-container);
  opacity: 0.55;
}

body.pantau-ui-v2 .wa-conn-status.wa-conn-connected { color: var(--p-on-success-container); background: var(--p-success-container); }
body.pantau-ui-v2 .wa-conn-status.wa-conn-connected i { background: var(--p-success); box-shadow: 0 0 0 3px rgba(29,127,70,0.16); }
body.pantau-ui-v2 .wa-conn-status.wa-conn-warning { color: var(--p-on-warning-container); background: var(--p-warning-container); }
body.pantau-ui-v2 .wa-conn-status.wa-conn-warning i { background: var(--p-warning); box-shadow: 0 0 0 3px rgba(160,106,0,0.16); }
body.pantau-ui-v2 .wa-conn-status.wa-conn-connecting { color: var(--p-on-info-container); background: var(--p-info-container); }
body.pantau-ui-v2 .wa-conn-status.wa-conn-connecting i { background: var(--p-info); box-shadow: 0 0 0 3px rgba(11,109,140,0.16); }
body.pantau-ui-v2 .wa-conn-status.wa-conn-danger { color: var(--p-on-error-container); background: var(--p-error-container); }
body.pantau-ui-v2 .wa-conn-status.wa-conn-danger i { background: var(--p-error); box-shadow: 0 0 0 3px rgba(179,38,30,0.16); }

body.pantau-ui-v2 .csti-connection { border-radius: var(--p-radius-pill); }

/* =============================================================
   18. DIALOGS — rounded, soft, M3 surface
   ============================================================= */
body.pantau-ui-v2 dialog[open] {
  border: none;
  border-radius: var(--p-radius-lg);
  color: var(--p-on-surface);
}
body.pantau-ui-v2 dialog::backdrop { background: rgba(20, 36, 46, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

body.pantau-ui-v2 .header-menu-dialog {
  width: min(420px, calc(100vw - 24px));
  padding: 0;
  border-radius: var(--p-radius-lg);
  box-shadow: var(--p-elev-3);
  overflow: hidden;
}
body.pantau-ui-v2 .header-menu-shell footer button,
body.pantau-ui-v2 .survey-aoi-dialog-shell > footer button {
  border-radius: var(--p-radius-pill);
  font-weight: 650;
}

/* =============================================================
   19. EMPTY / LOADING / ERROR / TOAST
   ============================================================= */
body.pantau-ui-v2 .empty-state {
  color: var(--p-on-surface-variant);
  background: var(--p-surface-container-low);
  border-radius: var(--p-radius-md);
}
body.pantau-ui-v2 .toast {
  border-radius: var(--p-radius-pill);
  background: var(--p-inverse-surface);
  color: var(--p-inverse-on-surface);
  box-shadow: var(--p-elev-3);
}
body.pantau-ui-v2 .toast.error { background: var(--p-error); color: var(--p-on-error); }
body.pantau-ui-v2 .busy-overlay { background: rgba(238, 243, 244, 0.55); backdrop-filter: blur(3px); }
body.pantau-ui-v2 .busy-overlay .spinner { border-color: var(--p-primary); border-top-color: transparent; }

/* =============================================================
   20. MOBILE NAVIGATION — bottom bar + "Lainnya" drawer
   ============================================================= */
body.pantau-ui-v2 .v2-mobile-nav {
  display: none;
}
body.pantau-ui-v2 .v2-mobile-nav {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 40;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 2px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(196, 206, 211, 0.6);
  border-radius: 22px;
  box-shadow: var(--p-elev-3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.pantau-ui-v2 .v2-mobile-nav button {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  padding: 6px 4px;
  color: var(--p-on-surface-variant);
  background: transparent;
  border: 0;
  border-radius: var(--p-radius-md);
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--p-motion-fast), color var(--p-motion-fast);
}
body.pantau-ui-v2 .v2-mobile-nav button svg { width: 21px; height: 21px; }
body.pantau-ui-v2 .v2-mobile-nav button.is-active { background: var(--p-secondary-container); color: var(--p-on-secondary-container); }
body.pantau-ui-v2 .v2-mobile-nav button.is-active svg { color: var(--p-secondary); }

body.pantau-ui-v2 .v2-mobile-drawer {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  align-self: end;
  border: none;
  border-radius: 24px 24px 0 0;
  background: var(--p-surface-container-lowest);
  box-shadow: var(--p-elev-3);
}
body.pantau-ui-v2 .v2-mobile-drawer::backdrop { background: rgba(20, 36, 46, 0.5); backdrop-filter: blur(5px); }
body.pantau-ui-v2 .v2-mobile-drawer-shell { padding: 10px 12px 22px; max-height: 78vh; overflow-y: auto; }
body.pantau-ui-v2 .v2-mobile-drawer-grab { width: 42px; height: 4px; margin: 6px auto 12px; background: var(--p-outline-variant); border-radius: 4px; }
body.pantau-ui-v2 .v2-mobile-drawer-title {
  margin: 0 0 10px;
  padding: 0 8px;
  color: var(--p-on-surface);
  font-size: 16px;
  font-weight: 680;
}
body.pantau-ui-v2 .v2-mobile-drawer .gen-nav-link { background: transparent; }
body.pantau-ui-v2 .v2-mobile-drawer .gen-nav-section-header { padding-top: 12px; }
body.pantau-ui-v2 .v2-mobile-drawer .generated-sidebar-bottom { display: block; border-top: 1px solid var(--p-outline-variant); }

/* =============================================================
   21. ACCESSIBILITY, FOCUS & MICROINTERACTION
   ============================================================= */
body.pantau-ui-v2 :focus-visible {
  outline: 2px solid var(--p-primary);
  outline-offset: 2px;
  border-radius: var(--p-radius-xs);
}
body.pantau-ui-v2 .generated-search input:focus-visible,
body.pantau-ui-v2 button:focus-visible,
body.pantau-ui-v2 select:focus-visible {
  outline: 2px solid var(--p-primary);
}

body.pantau-ui-v2 .generated-card,
body.pantau-ui-v2 .generated-kpi-row > div {
  will-change: transform;
}
body.pantau-ui-v2 .generated-kpi-row > div {
  transition: transform var(--p-motion-standard), box-shadow var(--p-motion-standard);
}
body.pantau-ui-v2 .generated-kpi-row > div:hover {
  transform: translateY(-2px);
  box-shadow: var(--p-elev-2);
}

/* =============================================================
   22. RESPONSIVE — real adaptation
   ============================================================= */
@media (min-width: 1680px) {
  body.pantau-ui-v2 { --p-sidebar-w: 320px; }
}

@media (max-width: 1280px) {
  body.pantau-ui-v2 { --p-sidebar-w: 272px; }
  body.pantau-ui-v2 .generated-kpi-row strong { font-size: 26px; }
  body.pantau-ui-v2 .p-health-legend { min-width: 150px; }
}

@media (max-width: 1060px) {
  /* Tablet: sidebar tetap tampil tapi tidak memakan ruang konten. */
  body.pantau-ui-v2 { --p-sidebar-w: 248px; }
  body.pantau-ui-v2 .generated-dashboard {
    grid-template-columns: 1fr 1.1fr;
    grid-template-rows: auto auto auto auto;
  }
  body.pantau-ui-v2 .generated-kpi-card { grid-column: 1 / 3; }
  body.pantau-ui-v2 .generated-quality-card { grid-column: 1; grid-row: 2; }
  body.pantau-ui-v2 .generated-snapshot-card { grid-column: 2; grid-row: 2; }
  body.pantau-ui-v2 .generated-overview-card { grid-column: 1; grid-row: 3; }
  body.pantau-ui-v2 .generated-usage-card { grid-column: 2; grid-row: 3; }
  body.pantau-ui-v2 .generated-status-card { grid-column: 1; grid-row: 4; }
  body.pantau-ui-v2 .generated-assistant { grid-column: 2; grid-row: 4; }
}

@media (max-width: 900px) {
  body.pantau-ui-v2 .generated-content { padding: 16px 18px 30px; }
  body.pantau-ui-v2 .p-command-hero { grid-template-columns: 1fr; }
  body.pantau-ui-v2 .p-command-hero-health { flex-direction: row; }
  body.pantau-ui-v2 .p-health-legend { grid-template-columns: repeat(3, auto); }
  body.pantau-ui-v2 .generated-kpi-row { grid-template-columns: 1fr 1fr; }
}

/* Tablet & mobile: hide desktop sidebar, show content full width */
@media (max-width: 780px) {
  body.pantau-ui-v2 .generated-shell { display: block; }
  body.pantau-ui-v2 .generated-sidebar { display: none; }
  body.pantau-ui-v2 .generated-topbar { height: 60px; padding: 6px 12px 6px 14px; gap: 10px; }
  body.pantau-ui-v2 .generated-topbar-title h1 { font-size: 15.5px; }
  body.pantau-ui-v2 .generated-topbar-title .generated-topbar-kicker { display: none; }
  body.pantau-ui-v2 .generated-search { width: auto; flex: 1 1 auto; height: 40px; }
  body.pantau-ui-v2 .generated-profile,
  body.pantau-ui-v2 .generated-round-button { height: 40px; }
  body.pantau-ui-v2 .generated-round-button { width: 40px; }
  body.pantau-ui-v2 .generated-content { padding: 12px 12px 100px; }
  body.pantau-ui-v2 .generated-controls { align-items: flex-start; }
  body.pantau-ui-v2 .generated-dashboard { grid-template-columns: 1fr; grid-template-rows: none; }
  body.pantau-ui-v2 .generated-kpi-card,
  body.pantau-ui-v2 .generated-quality-card,
  body.pantau-ui-v2 .generated-snapshot-card,
  body.pantau-ui-v2 .generated-overview-card,
  body.pantau-ui-v2 .generated-usage-card,
  body.pantau-ui-v2 .generated-status-card,
  body.pantau-ui-v2 .generated-assistant { grid-column: 1; grid-row: auto; }
  body.pantau-ui-v2 .generated-kpi-row { grid-template-columns: 1fr; }
  body.pantau-ui-v2 .p-command-hero { padding: 20px 18px; }
  body.pantau-ui-v2 .p-command-hero-health { flex-direction: column; align-items: flex-start; }
  body.pantau-ui-v2 .p-health-legend { grid-template-columns: 1fr; width: 100%; }

  /* Bottom nav */
  body.pantau-ui-v2 .v2-mobile-nav { display: flex; }
}
@media (min-width: 781px) {
  body.pantau-ui-v2 .v2-mobile-nav { display: none; }
  body.pantau-ui-v2 .v2-mobile-drawer { display: none; }
}

@media (max-width: 600px) {
  body.pantau-ui-v2 .generated-greeting { flex-wrap: wrap; }
  body.pantau-ui-v2 .generated-weather { margin-left: 0; padding-left: 0; border-left: 0; }
  body.pantau-ui-v2 .generated-control-filters { width: 100%; }
  body.pantau-ui-v2 .generated-kpi-row > div { padding: 13px 13px 12px; }
}

/* =============================================================
   23. REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  body.pantau-ui-v2 *,
  body.pantau-ui-v2 *::before,
  body.pantau-ui-v2 *::after,
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================
   23A. VIEW / TAB TRANSITION — content workspace only
   =============================================================
   Animasi hanya pada .generated-content (main content). Sidebar,
   topbar, global search, dan app shell tidak disentuh sehingga shell
   tetap stabil. Class diberikan dari JS hanya saat explicit navigation
   dan dihapus setelah animasi selesai. */
body.pantau-ui-v2 .generated-content {
  view-transition-name: p-v2-content;
}

/* View Transition API (progressive enhancement): root transition
   dimatikan agar sidebar/topbar/app shell tetap diam & tidak blink.
   Hanya snapshot konten workspace (p-v2-content) yang dianimasikan:
   old view fade out, new view fade in + translateY 8px -> 0. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
::view-transition-old(p-v2-content) {
  animation: p-v2-vt-old 200ms cubic-bezier(0.2, 0, 0, 1) both;
}
::view-transition-new(p-v2-content) {
  animation: p-v2-vt-new 200ms cubic-bezier(0.2, 0, 0, 1) both;
}
@keyframes p-v2-vt-old {
  to { opacity: 0; }
}
@keyframes p-v2-vt-new {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes p-v2-view-enter-anim {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes p-v2-tab-enter-anim {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
body.pantau-ui-v2 .generated-content.p-v2-view-enter {
  animation: p-v2-view-enter-anim 180ms cubic-bezier(0.2, 0, 0, 1) both;
}
body.pantau-ui-v2 .generated-content.p-v2-tab-enter {
  animation: p-v2-tab-enter-anim 150ms cubic-bezier(0.2, 0, 0, 1) both;
}

/* Exit stage untuk navigasi eksplisit: old content fade out sangat singkat
   (~80ms via JS) sebelum view baru dirender. Tidak pernah blank karena busy
   overlay dirender sebelum view baru masuk. */
body.pantau-ui-v2 .generated-content.p-v2-view-exit {
  animation: p-v2-view-exit-anim 80ms cubic-bezier(0.2, 0, 0, 1) both;
  pointer-events: none;
}
@keyframes p-v2-view-exit-anim {
  to { opacity: 0; transform: translate3d(0, -3px, 0); }
}

/* prefers-reduced-motion: matikan semua motion content */
@media (prefers-reduced-motion: reduce) {
  body.pantau-ui-v2 .generated-content.p-v2-view-enter,
  body.pantau-ui-v2 .generated-content.p-v2-tab-enter,
  body.pantau-ui-v2 .generated-content.p-v2-view-exit {
    animation: none;
  }
}

/* Dialog / popover polish (V2 only). Dialog memakai fade+scale halus,
   sedangkan popover header memakai fade+translateY ringan. Tidak
   mengubah logic dialog. */
@keyframes p-v2-dialog-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes p-v2-popover-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
body.pantau-ui-v2 dialog[open] {
  animation: p-v2-dialog-in 160ms var(--p-motion-emphasized) both;
}
body.pantau-ui-v2 dialog.header-menu-dialog[open] {
  animation-name: p-v2-popover-in;
}

/* =============================================================
   24. V2 ROLLOUT — MODULE PROPAGATION
   =============================================================
   Visual-only propagation of the V2 language to every workspace.
   No business logic, no polling, no V1 impact. All rules scoped
   under body.pantau-ui-v2.
   ============================================================= */

/* ---- 24.1 PAGE HEAD — compact command-center hierarchy ---- */
body.pantau-ui-v2 .wtwl-page,
body.pantau-ui-v2 .csti-page,
body.pantau-ui-v2 .mpp-page,
body.pantau-ui-v2 .complaint-page,
body.pantau-ui-v2 .survey-page,
body.pantau-ui-v2 .reference-page,
body.pantau-ui-v2 .reports-page,
body.pantau-ui-v2 .whatsapp-page,
body.pantau-ui-v2 .fourdx-page,
body.pantau-ui-v2 .smartbox-page,
body.pantau-ui-v2 .lanuri-target-page,
body.pantau-ui-v2 .user-page,
body.pantau-ui-v2 .laporan-page,
body.pantau-ui-v2 .generated-page,
body.pantau-ui-v2 .bpjs-page { padding: 2px 0 28px; }

body.pantau-ui-v2 .wtwl-page-head,
body.pantau-ui-v2 .csti-page-head,
body.pantau-ui-v2 .bpjs-page-head,
body.pantau-ui-v2 .generated-page-head,
body.pantau-ui-v2 .user-page-head,
body.pantau-ui-v2 .lanuri-target-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

body.pantau-ui-v2 .eyebrow,
body.pantau-ui-v2 .bpjs-eyebrow,
body.pantau-ui-v2 .user-eyebrow,
body.pantau-ui-v2 .lanuri-target-eyebrow,
body.pantau-ui-v2 .generated-eyebrow,
body.pantau-ui-v2 .lanuri-kicker,
body.pantau-ui-v2 .fourdx-kicker,
body.pantau-ui-v2 .smartbox-kicker,
body.pantau-ui-v2 .bpjs-calendar-kicker {
  display: block;
  margin: 0 0 6px;
  color: var(--p-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

body.pantau-ui-v2 .wtwl-page-head h1,
body.pantau-ui-v2 .csti-page-head h1,
body.pantau-ui-v2 .bpjs-page-head h1,
body.pantau-ui-v2 .generated-page-head h1,
body.pantau-ui-v2 .user-page-head h1,
body.pantau-ui-v2 .lanuri-target-head h1,
body.pantau-ui-v2 .fourdx-hero h1,
body.pantau-ui-v2 .reports-hero h1 {
  margin: 0 0 6px;
  color: var(--p-on-surface);
  font-family: var(--p-font-display);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 680;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

body.pantau-ui-v2 .wtwl-page-head p,
body.pantau-ui-v2 .csti-page-head p,
body.pantau-ui-v2 .bpjs-page-head p,
body.pantau-ui-v2 .generated-page-head p,
body.pantau-ui-v2 .user-page-head p,
body.pantau-ui-v2 .lanuri-target-head p,
body.pantau-ui-v2 .fourdx-hero p,
body.pantau-ui-v2 .reports-hero p {
  max-width: 680px;
  margin: 0;
  color: var(--p-on-surface-variant);
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
}

/* ---- 24.2 CARD SYSTEM — one surface language ---- */
body.pantau-ui-v2 .lanuri-target-card,
body.pantau-ui-v2 .bpjs-form-card,
body.pantau-ui-v2 .bpjs-calendar-card,
body.pantau-ui-v2 .bpjs-agenda-card,
body.pantau-ui-v2 .smartbox-card,
body.pantau-ui-v2 .reports-card,
body.pantau-ui-v2 .reference-card,
body.pantau-ui-v2 .user-directory-card,
body.pantau-ui-v2 .fourdx-form-card,
body.pantau-ui-v2 .fourdx-scoreboard,
body.pantau-ui-v2 .fourdx-goal-card,
body.pantau-ui-v2 .gemba-kpi-card,
body.pantau-ui-v2 .csti-settings-card,
body.pantau-ui-v2 .csti-table-card,
body.pantau-ui-v2 .csti-hour-card,
body.pantau-ui-v2 .csti-service-card,
body.pantau-ui-v2 .wtwl-trend-card,
body.pantau-ui-v2 .wtwl-office-card,
body.pantau-ui-v2 .wtwl-visits-card,
body.pantau-ui-v2 .wtwl-service-card,
body.pantau-ui-v2 .wtwl-sla-card,
body.pantau-ui-v2 .wtwl-sla-officer-card,
body.pantau-ui-v2 .complaint-trend-card,
body.pantau-ui-v2 .complaint-kind-card,
body.pantau-ui-v2 .complaint-list-card,
body.pantau-ui-v2 .complaint-officer-card,
body.pantau-ui-v2 .survey-priority-card,
body.pantau-ui-v2 .survey-journey-card,
body.pantau-ui-v2 .survey-record-card,
body.pantau-ui-v2 .survey-aoi-table-card,
body.pantau-ui-v2 .wtwl-upload-card,
body.pantau-ui-v2 .wtwl-rules-card,
body.pantau-ui-v2 .wtwl-history-card,
body.pantau-ui-v2 .csti-insight-grid > .generated-card,
body.pantau-ui-v2 .complaint-main-grid > .generated-card,
body.pantau-ui-v2 .complaint-detail-grid > .generated-card,
body.pantau-ui-v2 .survey-insight-grid > .generated-card {
  min-width: 0;
  overflow: hidden;
  background: var(--p-surface-container-lowest);
  border: 1px solid rgba(196, 206, 211, 0.42);
  border-radius: var(--p-radius-lg);
  box-shadow: var(--p-elev-1);
  transition: box-shadow var(--p-motion-standard), border-color var(--p-motion-fast);
}

/* Card family above declared the transition but had no :hover state to
   trigger it — no feedback on Alarm Layanan / Pengaduan / WT-WL / CSTI /
   Survey cards. Same subtle lift as .generated-card:hover, for consistency
   across every workspace that shares this card system. */
body.pantau-ui-v2 .lanuri-target-card:hover,
body.pantau-ui-v2 .bpjs-form-card:hover,
body.pantau-ui-v2 .bpjs-calendar-card:hover,
body.pantau-ui-v2 .bpjs-agenda-card:hover,
body.pantau-ui-v2 .smartbox-card:hover,
body.pantau-ui-v2 .reports-card:hover,
body.pantau-ui-v2 .reference-card:hover,
body.pantau-ui-v2 .user-directory-card:hover,
body.pantau-ui-v2 .fourdx-form-card:hover,
body.pantau-ui-v2 .fourdx-scoreboard:hover,
body.pantau-ui-v2 .fourdx-goal-card:hover,
body.pantau-ui-v2 .gemba-kpi-card:hover,
body.pantau-ui-v2 .csti-settings-card:hover,
body.pantau-ui-v2 .csti-table-card:hover,
body.pantau-ui-v2 .csti-hour-card:hover,
body.pantau-ui-v2 .csti-service-card:hover,
body.pantau-ui-v2 .wtwl-trend-card:hover,
body.pantau-ui-v2 .wtwl-office-card:hover,
body.pantau-ui-v2 .wtwl-visits-card:hover,
body.pantau-ui-v2 .wtwl-service-card:hover,
body.pantau-ui-v2 .wtwl-sla-card:hover,
body.pantau-ui-v2 .wtwl-sla-officer-card:hover,
body.pantau-ui-v2 .complaint-trend-card:hover,
body.pantau-ui-v2 .complaint-kind-card:hover,
body.pantau-ui-v2 .complaint-list-card:hover,
body.pantau-ui-v2 .complaint-officer-card:hover,
body.pantau-ui-v2 .survey-priority-card:hover,
body.pantau-ui-v2 .survey-journey-card:hover,
body.pantau-ui-v2 .survey-record-card:hover,
body.pantau-ui-v2 .survey-aoi-table-card:hover,
body.pantau-ui-v2 .wtwl-upload-card:hover,
body.pantau-ui-v2 .wtwl-rules-card:hover,
body.pantau-ui-v2 .wtwl-history-card:hover,
body.pantau-ui-v2 .csti-insight-grid > .generated-card:hover,
body.pantau-ui-v2 .complaint-main-grid > .generated-card:hover,
body.pantau-ui-v2 .complaint-detail-grid > .generated-card:hover,
body.pantau-ui-v2 .survey-insight-grid > .generated-card:hover {
  border-color: rgba(11, 94, 138, 0.28);
  box-shadow: var(--p-elev-2);
}

body.pantau-ui-v2 .lanuri-target-card,
body.pantau-ui-v2 .bpjs-form-card,
body.pantau-ui-v2 .bpjs-calendar-card,
body.pantau-ui-v2 .bpjs-agenda-card,
body.pantau-ui-v2 .smartbox-card,
body.pantau-ui-v2 .reports-card,
body.pantau-ui-v2 .reference-card,
body.pantau-ui-v2 .user-directory-card,
body.pantau-ui-v2 .fourdx-form-card,
body.pantau-ui-v2 .fourdx-scoreboard,
body.pantau-ui-v2 .fourdx-goal-card,
body.pantau-ui-v2 .csti-settings-card,
body.pantau-ui-v2 .csti-table-card,
body.pantau-ui-v2 .csti-hour-card,
body.pantau-ui-v2 .csti-service-card,
body.pantau-ui-v2 .wtwl-trend-card,
body.pantau-ui-v2 .wtwl-office-card,
body.pantau-ui-v2 .wtwl-visits-card,
body.pantau-ui-v2 .wtwl-service-card,
body.pantau-ui-v2 .wtwl-sla-card,
body.pantau-ui-v2 .wtwl-sla-officer-card,
body.pantau-ui-v2 .complaint-trend-card,
body.pantau-ui-v2 .complaint-kind-card,
body.pantau-ui-v2 .complaint-list-card,
body.pantau-ui-v2 .complaint-officer-card,
body.pantau-ui-v2 .survey-priority-card,
body.pantau-ui-v2 .survey-journey-card,
body.pantau-ui-v2 .survey-record-card,
body.pantau-ui-v2 .survey-aoi-table-card,
body.pantau-ui-v2 .wtwl-upload-card,
body.pantau-ui-v2 .wtwl-rules-card,
body.pantau-ui-v2 .wtwl-history-card { padding: 18px 18px; }

body.pantau-ui-v2 .smartbox-card { padding: 20px; }
body.pantau-ui-v2 .lanuri-target-card { padding: 18px; }

/* ---- 24.3 KPI SCORECARD — blue/teal/lime/slate tonal tiles ---- */
body.pantau-ui-v2 .csti-kpi-grid,
body.pantau-ui-v2 .complaint-kpi-grid,
body.pantau-ui-v2 .survey-kpi-grid,
body.pantau-ui-v2 .wtwl-summary-grid,
body.pantau-ui-v2 .survey-aoi-summary,
body.pantau-ui-v2 .user-summary,
body.pantau-ui-v2 .lanuri-target-summary,
body.pantau-ui-v2 .gemba-dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

body.pantau-ui-v2 .csti-kpi-grid > article,
body.pantau-ui-v2 .complaint-kpi-grid > article,
body.pantau-ui-v2 .survey-kpi-grid > article,
body.pantau-ui-v2 .wtwl-summary-grid > article,
body.pantau-ui-v2 .survey-aoi-summary > article,
body.pantau-ui-v2 .user-summary > article,
body.pantau-ui-v2 .lanuri-target-summary > article,
body.pantau-ui-v2 .gemba-dash-kpis .gemba-kpi-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 16px;
  border: 0;
  border-radius: var(--p-radius-md);
  box-shadow: var(--p-elev-1);
  overflow: hidden;
  background: var(--p-surface-container-high);
  color: var(--p-on-surface);
}

body.pantau-ui-v2 .csti-kpi-grid > article:nth-child(1) { background: var(--p-primary-container); color: var(--p-on-primary-container); }
body.pantau-ui-v2 .csti-kpi-grid > article:nth-child(2) { background: var(--p-secondary-container); color: var(--p-on-secondary-container); }
body.pantau-ui-v2 .csti-kpi-grid > article:nth-child(3) { background: var(--p-tertiary-container); color: var(--p-on-tertiary-container); }
body.pantau-ui-v2 .csti-kpi-grid > article:nth-child(4) { background: var(--p-surface-container-high); color: var(--p-on-surface); }

body.pantau-ui-v2 .complaint-kpi-grid > article:nth-child(1) { background: var(--p-primary-container); color: var(--p-on-primary-container); }
body.pantau-ui-v2 .complaint-kpi-grid > article:nth-child(2) { background: var(--p-secondary-container); color: var(--p-on-secondary-container); }
body.pantau-ui-v2 .complaint-kpi-grid > article:nth-child(3) { background: var(--p-tertiary-container); color: var(--p-on-tertiary-container); }
body.pantau-ui-v2 .complaint-kpi-grid > article:nth-child(4) { background: var(--p-surface-container-high); color: var(--p-on-surface); }

body.pantau-ui-v2 .survey-kpi-grid > article:nth-child(1) { background: var(--p-primary-container); color: var(--p-on-primary-container); }
body.pantau-ui-v2 .survey-kpi-grid > article:nth-child(2) { background: var(--p-error-container); color: var(--p-on-error-container); }
body.pantau-ui-v2 .survey-kpi-grid > article:nth-child(3) { background: var(--p-warning-container); color: var(--p-on-warning-container); }
body.pantau-ui-v2 .survey-kpi-grid > article:nth-child(4) { background: var(--p-surface-container-high); color: var(--p-on-surface); }

body.pantau-ui-v2 .wtwl-summary-grid > article:nth-child(1),
body.pantau-ui-v2 .survey-aoi-summary > article:nth-child(1) { background: var(--p-primary-container); color: var(--p-on-primary-container); }
body.pantau-ui-v2 .wtwl-summary-grid > article:nth-child(2),
body.pantau-ui-v2 .survey-aoi-summary > article:nth-child(2) { background: var(--p-secondary-container); color: var(--p-on-secondary-container); }
body.pantau-ui-v2 .wtwl-summary-grid > article:nth-child(3),
body.pantau-ui-v2 .survey-aoi-summary > article:nth-child(3) { background: var(--p-tertiary-container); color: var(--p-on-tertiary-container); }
body.pantau-ui-v2 .wtwl-summary-grid > article:nth-child(4),
body.pantau-ui-v2 .survey-aoi-summary > article:nth-child(4) { background: var(--p-surface-container-high); color: var(--p-on-surface); }

body.pantau-ui-v2 .user-summary > article:nth-child(1),
body.pantau-ui-v2 .lanuri-target-summary > article:nth-child(1) { background: var(--p-primary-container); color: var(--p-on-primary-container); }
body.pantau-ui-v2 .user-summary > article:nth-child(2),
body.pantau-ui-v2 .lanuri-target-summary > article:nth-child(2) { background: var(--p-secondary-container); color: var(--p-on-secondary-container); }
body.pantau-ui-v2 .user-summary > article:nth-child(3),
body.pantau-ui-v2 .lanuri-target-summary > article:nth-child(3) { background: var(--p-tertiary-container); color: var(--p-on-tertiary-container); }
body.pantau-ui-v2 .user-summary > article:nth-child(4) { background: var(--p-surface-container-high); color: var(--p-on-surface); }

/* KPI inner content */
body.pantau-ui-v2 .csti-kpi-grid > article > span,
body.pantau-ui-v2 .complaint-kpi-grid > article > span,
body.pantau-ui-v2 .survey-kpi-grid > article > span,
body.pantau-ui-v2 .wtwl-summary-grid > article > span,
body.pantau-ui-v2 .user-summary > article > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: var(--p-radius-sm);
  background: rgba(255, 255, 255, 0.5);
  color: inherit;
}
body.pantau-ui-v2 .csti-kpi-grid > article > span svg,
body.pantau-ui-v2 .complaint-kpi-grid > article > span svg,
body.pantau-ui-v2 .survey-kpi-grid > article > span svg,
body.pantau-ui-v2 .wtwl-summary-grid > article > span svg,
body.pantau-ui-v2 .user-summary > article > span svg { width: 20px; height: 20px; }

body.pantau-ui-v2 .csti-kpi-grid p,
body.pantau-ui-v2 .complaint-kpi-grid p,
body.pantau-ui-v2 .survey-kpi-grid p,
body.pantau-ui-v2 .user-summary article > div {
  display: grid;
  gap: 2px;
  margin: 0;
  min-width: 0;
}
body.pantau-ui-v2 .csti-kpi-grid p small,
body.pantau-ui-v2 .complaint-kpi-grid p small,
body.pantau-ui-v2 .survey-kpi-grid p small,
body.pantau-ui-v2 .wtwl-summary-grid > article > small,
body.pantau-ui-v2 .user-summary article small { color: inherit; opacity: 0.8; font-size: 11.5px; font-weight: 620; }
body.pantau-ui-v2 .csti-kpi-grid p strong,
body.pantau-ui-v2 .complaint-kpi-grid p strong,
body.pantau-ui-v2 .survey-kpi-grid p strong,
body.pantau-ui-v2 .wtwl-summary-grid > article > strong,
body.pantau-ui-v2 .user-summary article strong,
body.pantau-ui-v2 .lanuri-target-summary article strong,
body.pantau-ui-v2 .gemba-kpi-card .gemba-kpi-value {
  color: inherit;
  font-family: var(--p-font-display);
  font-size: 28px;
  font-weight: 720;
  letter-spacing: -0.015em;
  line-height: 1;
}
body.pantau-ui-v2 .csti-kpi-grid p em,
body.pantau-ui-v2 .complaint-kpi-grid p em,
body.pantau-ui-v2 .survey-kpi-grid p em,
body.pantau-ui-v2 .user-summary article em { color: inherit; font-size: 11px; font-style: normal; font-weight: 640; opacity: 0.85; }

/* wtwl-summary / bpjs summary use vertical text layout */
body.pantau-ui-v2 .wtwl-summary-grid > article,
body.pantau-ui-v2 .survey-aoi-summary > article,
body.pantau-ui-v2 .lanuri-target-summary > article { display: grid; grid-template-columns: auto 1fr; align-content: center; column-gap: 12px; }
body.pantau-ui-v2 .wtwl-summary-grid > article > .wtwl-kpi-icon,
body.pantau-ui-v2 .survey-aoi-summary > article > span,
body.pantau-ui-v2 .lanuri-target-summary > article > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--p-radius-sm);
  background: rgba(255,255,255,0.5);
}
body.pantau-ui-v2 .wtwl-summary-grid > article > .wtwl-kpi-icon svg,
body.pantau-ui-v2 .survey-aoi-summary > article > span svg { width: 20px; height: 20px; }
body.pantau-ui-v2 .wtwl-summary-grid > article > .wtwl-kpi-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  align-content: center;
}
body.pantau-ui-v2 .wtwl-summary-grid > article > .wtwl-kpi-copy > small,
body.pantau-ui-v2 .survey-aoi-summary > article > small,
body.pantau-ui-v2 .lanuri-target-summary article small { color: inherit; opacity: 0.82; font-size: 11.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.pantau-ui-v2 .wtwl-summary-grid > article > .wtwl-kpi-copy > em {
  display: block;
  color: inherit;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 680;
  opacity: 0.95;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.pantau-ui-v2 .wtwl-summary-grid > article > .wtwl-kpi-copy > strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- 24.4 HERO COMPACT ---- */
body.pantau-ui-v2 .wtwl-hero,
body.pantau-ui-v2 .complaint-hero,
body.pantau-ui-v2 .survey-hero,
body.pantau-ui-v2 .reports-hero,
body.pantau-ui-v2 .fourdx-hero {
  border-radius: var(--p-radius-xl);
  background: var(--p-brand-gradient-soft);
  color: var(--p-on-primary);
  box-shadow: var(--p-elev-3);
  margin-bottom: 16px;
  overflow: hidden;
}
body.pantau-ui-v2 .wtwl-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 26px; }
body.pantau-ui-v2 .complaint-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 26px; }
body.pantau-ui-v2 .survey-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 26px; }
body.pantau-ui-v2 .reports-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; flex-wrap: wrap; }
body.pantau-ui-v2 .fourdx-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 26px; }

body.pantau-ui-v2 .wtwl-hero-copy h2,
body.pantau-ui-v2 .complaint-hero-copy h2,
body.pantau-ui-v2 .survey-hero h2 { margin: 8px 0 6px; color: #fff; font-family: var(--p-font-display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 660; letter-spacing: -0.015em; }
body.pantau-ui-v2 .wtwl-hero-copy p,
body.pantau-ui-v2 .complaint-hero-copy p,
body.pantau-ui-v2 .survey-hero p { color: rgba(255,255,255,0.84); }
body.pantau-ui-v2 .wtwl-live,
body.pantau-ui-v2 .complaint-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.84); }
body.pantau-ui-v2 .wtwl-live svg,
body.pantau-ui-v2 .complaint-live svg { width: 15px; height: 15px; }

/* Lima angka (WT, WL, kepuasan, lewat SLA WT, lewat SLA WL) harus boleh turun
   baris; tanpa wrap, layar laptop sempit memotong angka paling kanan. */
body.pantau-ui-v2 .wtwl-hero-stats { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 14px; }
body.pantau-ui-v2 .wtwl-hero-stats span { display: grid; gap: 2px; }
body.pantau-ui-v2 .wtwl-hero-stats b { color: #fff; font-family: var(--p-font-display); font-size: 22px; font-weight: 680; }
body.pantau-ui-v2 .wtwl-hero-stats small { color: rgba(255,255,255,0.8); font-size: 11.5px; }
body.pantau-ui-v2 .wtwl-rings { display: flex; gap: 18px; }

/* .reports-hero / .fourdx-hero use plain h1/p/.eyebrow (not a `-copy h2`
   wrapper like the other heroes above), so the generic light-surface header
   rule earlier in this file (`.reports-hero h1`, `.reports-hero p`,
   `.eyebrow`) was winning the cascade and painting dark text on their dark
   gradient background — unreadable. Restore light text here, same as the
   other hero variants. */
body.pantau-ui-v2 .reports-hero h1,
body.pantau-ui-v2 .fourdx-hero h1 { color: #fff; }
body.pantau-ui-v2 .reports-hero p,
body.pantau-ui-v2 .fourdx-hero p { color: rgba(255, 255, 255, 0.84); }
body.pantau-ui-v2 .reports-hero .eyebrow,
body.pantau-ui-v2 .fourdx-hero .eyebrow { color: rgba(255, 255, 255, 0.78); }

body.pantau-ui-v2 .complaint-kind-pills { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
body.pantau-ui-v2 .complaint-kind-pills span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--p-radius-pill); font-size: 12.5px; font-weight: 580; }
body.pantau-ui-v2 .complaint-kind-pills i { width: 8px; height: 8px; border-radius: 50%; }
body.pantau-ui-v2 .complaint-kind-pills .info { background: #b8e72f; }
body.pantau-ui-v2 .complaint-kind-pills .complaint { background: #ffd85c; }
body.pantau-ui-v2 .complaint-kind-pills .request { background: #7fd4e8; }
body.pantau-ui-v2 .complaint-kind-pills b { color: #fff; }
body.pantau-ui-v2 .survey-score { display: grid; gap: 4px; min-width: 160px; text-align: right; }
body.pantau-ui-v2 .survey-score span { color: rgba(255,255,255,0.8); font-size: 11.5px; }
body.pantau-ui-v2 .survey-score strong { color: #fff; font-size: 34px; font-weight: 720; line-height: 1; }
body.pantau-ui-v2 .survey-score small { color: rgba(255,255,255,0.78); font-size: 11.5px; }

/* rings on hero */
body.pantau-ui-v2 .wtwl-ring {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: conic-gradient(var(--ring, var(--p-tertiary)) calc(var(--value, 0) * 1%), rgba(255,255,255,0.16) 0);
}
body.pantau-ui-v2 .wtwl-ring > span {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--p-brand-deep);
  color: #fff;
}
body.pantau-ui-v2 .wtwl-ring b { font-size: 18px; font-weight: 700; }
body.pantau-ui-v2 .wtwl-ring small { font-size: 10px; color: rgba(255,255,255,0.8); }

/* ---- 24.5 TABLES — rounded container + clean rows ---- */
body.pantau-ui-v2 .user-table-wrap,
body.pantau-ui-v2 .mpp-matrix-wrap { overflow: auto; border: 1px solid rgba(196,206,211,0.42); border-radius: var(--p-radius-md); }
body.pantau-ui-v2 .user-table,
body.pantau-ui-v2 .mpp-matrix,
body.pantau-ui-v2 .gemba-detail-table { border-spacing: 0; width: 100%; }
body.pantau-ui-v2 .user-table thead th,
body.pantau-ui-v2 .mpp-matrix thead th,
body.pantau-ui-v2 .gemba-detail-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--p-surface-container);
  color: var(--p-on-surface-variant);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
}
body.pantau-ui-v2 .user-table tbody td,
body.pantau-ui-v2 .mpp-matrix tbody td,
body.pantau-ui-v2 .gemba-detail-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--p-outline-variant);
  color: var(--p-on-surface);
  font-size: 13px;
  vertical-align: middle;
}
body.pantau-ui-v2 .user-table tbody tr:last-child td,
body.pantau-ui-v2 .mpp-matrix tbody tr:last-child td,
body.pantau-ui-v2 .gemba-detail-table tbody tr:last-child td { border-bottom: 0; }
body.pantau-ui-v2 .user-table tbody tr,
body.pantau-ui-v2 .gemba-detail-table tbody tr { transition: background var(--p-motion-fast); }
body.pantau-ui-v2 .user-table tbody tr:hover,
body.pantau-ui-v2 .gemba-detail-table tbody tr:hover { background: var(--p-surface-container-low); }
body.pantau-ui-v2 .user-table td > small,
body.pantau-ui-v2 .gemba-detail-table td > small { color: var(--p-on-surface-variant); }

/* ---- 24.6 FORMS — M3 inspired fields ---- */
body.pantau-ui-v2 .input,
body.pantau-ui-v2 input:not([type=checkbox]):not([type=radio]):not([type=file]),
body.pantau-ui-v2 select,
body.pantau-ui-v2 textarea {
  font: inherit;
  color: var(--p-on-surface);
  background: var(--p-surface-container-lowest);
  border: 1px solid var(--p-outline-variant);
  border-radius: var(--p-radius-sm);
  transition: border-color var(--p-motion-fast), box-shadow var(--p-motion-fast);
}
body.pantau-ui-v2 .input,
body.pantau-ui-v2 input:not([type=checkbox]):not([type=radio]):not([type=file]),
body.pantau-ui-v2 select { min-height: 40px; padding: 8px 12px; font-size: 13.5px; }
body.pantau-ui-v2 textarea { padding: 10px 12px; font-size: 13.5px; line-height: 1.5; }
body.pantau-ui-v2 .input:focus,
body.pantau-ui-v2 input:focus,
body.pantau-ui-v2 select:focus,
body.pantau-ui-v2 textarea:focus {
  outline: none;
  border-color: var(--p-primary);
  box-shadow: 0 0 0 3px rgba(11,94,138,0.14);
}

/* Labels + field hierarchy */
body.pantau-ui-v2 .lanuri-form-field,
body.pantau-ui-v2 .bpjs-field,
body.pantau-ui-v2 .fourdx-field,
body.pantau-ui-v2 .user-form-field,
body.pantau-ui-v2 .wtwl-filter-row label,
body.pantau-ui-v2 .survey-filter-grid label,
body.pantau-ui-v2 .user-directory-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--p-on-surface-variant);
  font-size: 11.5px;
  font-weight: 620;
}
body.pantau-ui-v2 .lanuri-form-field > span,
body.pantau-ui-v2 .bpjs-field > span,
body.pantau-ui-v2 .fourdx-field > span,
body.pantau-ui-v2 .wtwl-filter-row label > span,
body.pantau-ui-v2 .survey-filter-grid label > span,
body.pantau-ui-v2 .user-directory-toolbar label > span { font-weight: 650; }

/* drop zones */
body.pantau-ui-v2 .wtwl-drop-zone {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 26px 18px;
  color: var(--p-on-surface-variant);
  background: var(--p-surface-container-low);
  border: 2px dashed var(--p-outline-variant);
  border-radius: var(--p-radius-lg);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--p-motion-fast), background var(--p-motion-fast);
}
body.pantau-ui-v2 .wtwl-drop-zone:hover { border-color: var(--p-primary); background: var(--p-primary-container); }
body.pantau-ui-v2 .wtwl-drop-zone svg { width: 28px; height: 28px; color: var(--p-primary); }
body.pantau-ui-v2 .wtwl-drop-zone strong { color: var(--p-on-surface); }
body.pantau-ui-v2 .wtwl-drop-zone span { font-size: 12px; }

body.pantau-ui-v2 .wtwl-upload-note,
body.pantau-ui-v2 .csti-template-help,
body.pantau-ui-v2 .wa-message-help {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  color: var(--p-on-surface-variant);
  background: var(--p-surface-container-low);
  border-radius: var(--p-radius-sm);
  font-size: 12px;
}
body.pantau-ui-v2 .wtwl-upload-note svg { width: 16px; height: 16px; color: var(--p-primary); flex: 0 0 16px; }
body.pantau-ui-v2 .wtwl-upload-note code,
body.pantau-ui-v2 .csti-template-help code,
body.pantau-ui-v2 .wa-message-help code { background: var(--p-primary-container); color: var(--p-on-primary-container); padding: 1px 6px; border-radius: 6px; }

/* ---- 24.7 BUTTON SYSTEM ---- */
body.pantau-ui-v2 .btn,
body.pantau-ui-v2 .btn-primary,
body.pantau-ui-v2 .btn-danger,
body.pantau-ui-v2 .btn-secondary,
body.pantau-ui-v2 .btn-ghost,
body.pantau-ui-v2 .btn-small,
body.pantau-ui-v2 .btn-accent,
body.pantau-ui-v2 .user-primary-button,
body.pantau-ui-v2 .bpjs-save-button,
body.pantau-ui-v2 .fourdx-primary,
body.pantau-ui-v2 .fourdx-secondary,
body.pantau-ui-v2 .laporan-save-btn,
body.pantau-ui-v2 .laporan-clear-btn,
body.pantau-ui-v2 .laporan-delete-btn,
body.pantau-ui-v2 .laporan-download-btn,
body.pantau-ui-v2 .mpp-download-btn,
body.pantau-ui-v2 .mpp-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 16px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 640;
  border-radius: var(--p-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--p-motion-fast), transform var(--p-motion-fast), background var(--p-motion-fast), border-color var(--p-motion-fast);
}
body.pantau-ui-v2 .btn { color: var(--p-on-surface-variant); background: var(--p-surface-container-lowest); border: 1px solid var(--p-outline-variant); }
body.pantau-ui-v2 .btn-primary,
body.pantau-ui-v2 .user-primary-button,
body.pantau-ui-v2 .bpjs-save-button,
body.pantau-ui-v2 .fourdx-primary,
body.pantau-ui-v2 .laporan-save-btn,
body.pantau-ui-v2 .mpp-add-btn { color: var(--p-on-primary); background: var(--p-primary); border: none; }
body.pantau-ui-v2 .btn-danger,
body.pantau-ui-v2 .laporan-delete-btn { color: var(--p-on-error); background: var(--p-error); border: none; }
body.pantau-ui-v2 .btn-secondary,
body.pantau-ui-v2 .fourdx-secondary { color: var(--p-on-secondary-container); background: var(--p-secondary-container); border: none; }
body.pantau-ui-v2 .btn-ghost { color: var(--p-primary); background: transparent; border: 1px solid var(--p-outline-variant); }
body.pantau-ui-v2 .btn-accent { color: var(--p-on-tertiary-container); background: var(--p-tertiary-container); border: none; }
body.pantau-ui-v2 .laporan-clear-btn { color: var(--p-on-surface-variant); background: var(--p-surface-container); border: 1px solid var(--p-outline-variant); }
body.pantau-ui-v2 .laporan-download-btn,
body.pantau-ui-v2 .mpp-download-btn { color: var(--p-on-primary); background: var(--p-primary); border: none; }
body.pantau-ui-v2 .btn:hover,
body.pantau-ui-v2 .btn-primary:hover,
body.pantau-ui-v2 .user-primary-button:hover,
body.pantau-ui-v2 .bpjs-save-button:hover,
body.pantau-ui-v2 .fourdx-primary:hover { filter: brightness(1.06); }
body.pantau-ui-v2 .btn:active,
body.pantau-ui-v2 .btn-primary:active,
body.pantau-ui-v2 .user-primary-button:active { transform: scale(0.97); }
body.pantau-ui-v2 .btn svg { width: 15px; height: 15px; }
body.pantau-ui-v2 .btn:disabled,
body.pantau-ui-v2 .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---- 24.8 STATUS / BADGES — dot+label, not color only ---- */
body.pantau-ui-v2 .csti-status,
body.pantau-ui-v2 .schedule-status,
body.pantau-ui-v2 .wa-blast-status,
body.pantau-ui-v2 .wa-message-status,
body.pantau-ui-v2 .survey-workflow-status,
body.pantau-ui-v2 .access-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--p-radius-pill);
  font-size: 12px;
  font-weight: 680;
  white-space: nowrap;
}
body.pantau-ui-v2 .csti-status::before,
body.pantau-ui-v2 .schedule-status::before,
body.pantau-ui-v2 .wa-blast-status::before,
body.pantau-ui-v2 .wa-message-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.9; box-shadow: 0 0 0 3px rgba(127,127,127,0.14); }

/* CSTI statuses */
body.pantau-ui-v2 .csti-status.waiting,
body.pantau-ui-v2 .csti-status.called { color: var(--p-on-success-container); background: var(--p-success-container); }
body.pantau-ui-v2 .csti-status.warning { color: var(--p-on-warning-container); background: var(--p-warning-container); }
body.pantau-ui-v2 .csti-status.exceeded { color: var(--p-on-error-container); background: var(--p-error-container); }
/* 'muted' = antrian yang datanya terputus. Sengaja netral, bukan merah:
   penyebabnya gangguan sistem, bukan kelalaian petugas. */
body.pantau-ui-v2 .csti-status.muted { color: var(--p-on-surface-variant); background: var(--p-surface-container-high); }
body.pantau-ui-v2 .csti-tutup-btn { margin-left: 8px; padding: 3px 10px; font-size: 11.5px; }

/* Spanduk gangguan aliran data CSTI */
body.pantau-ui-v2 .csti-feed-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: var(--p-radius-lg, 14px);
  color: var(--p-on-warning-container);
  background: var(--p-warning-container);
  border: 1px solid color-mix(in srgb, var(--p-on-warning-container) 22%, transparent);
}
body.pantau-ui-v2 .csti-feed-banner svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
body.pantau-ui-v2 .csti-feed-banner strong { display: block; font-size: 14px; font-weight: 720; margin-bottom: 3px; }
body.pantau-ui-v2 .csti-feed-banner span { display: block; font-size: 12.5px; line-height: 1.5; opacity: 0.92; }

/* Loket sepi bukan gangguan: nadanya netral, bukan peringatan. Memberi warna
   waspada pada keadaan yang normal hanya membuat warna waspada berhenti
   berarti apa-apa. */
body.pantau-ui-v2 .csti-feed-banner.tenang {
  color: var(--p-on-surface-variant);
  background: var(--p-surface-variant);
  border-color: color-mix(in srgb, var(--p-on-surface-variant) 18%, transparent);
}

/* schedule status */
body.pantau-ui-v2 .schedule-status.scheduled { color: var(--p-on-info-container); background: var(--p-info-container); }
body.pantau-ui-v2 .schedule-status.completed { color: var(--p-on-success-container); background: var(--p-success-container); }
body.pantau-ui-v2 .schedule-status.cancelled { color: var(--p-on-surface-variant); background: var(--p-surface-container-high); }

/* wa blast status */
body.pantau-ui-v2 .wa-blast-status.wa-blast-running { color: var(--p-on-info-container); background: var(--p-info-container); }
body.pantau-ui-v2 .wa-blast-status.wa-blast-done { color: var(--p-on-success-container); background: var(--p-success-container); }
body.pantau-ui-v2 .wa-blast-status.wa-blast-paused { color: var(--p-on-warning-container); background: var(--p-warning-container); }
body.pantau-ui-v2 .wa-blast-status.wa-blast-danger { color: var(--p-on-error-container); background: var(--p-error-container); }
body.pantau-ui-v2 .wa-blast-status.wa-blast-scheduled { color: var(--p-on-secondary-container); background: var(--p-secondary-container); }
body.pantau-ui-v2 .wa-blast-status.wa-blast-draft { color: var(--p-on-surface-variant); background: var(--p-surface-container-high); }

/* wa message status */
body.pantau-ui-v2 .wa-message-status.sent { color: var(--p-on-success-container); background: var(--p-success-container); }
body.pantau-ui-v2 .wa-message-status.failed { color: var(--p-on-error-container); background: var(--p-error-container); }
body.pantau-ui-v2 .wa-message-status.queued { color: var(--p-on-warning-container); background: var(--p-warning-container); }

/* survey workflow */
body.pantau-ui-v2 .survey-workflow-status.completed { color: var(--p-on-success-container); background: var(--p-success-container); }
body.pantau-ui-v2 .survey-workflow-status.process { color: var(--p-on-info-container); background: var(--p-info-container); }
body.pantau-ui-v2 .survey-workflow-status.not_started,
body.pantau-ui-v2 .survey-workflow-status:empty { color: var(--p-on-surface-variant); background: var(--p-surface-container-high); }

/* lanuri target status */
body.pantau-ui-v2 .lanuri-target-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--p-radius-pill); font-size: 12px; font-weight: 680; }
body.pantau-ui-v2 .lanuri-target-status.danger { color: var(--p-on-error-container); background: var(--p-error-container); }
body.pantau-ui-v2 .lanuri-target-status.warning { color: var(--p-on-warning-container); background: var(--p-warning-container); }
body.pantau-ui-v2 .lanuri-target-status.success { color: var(--p-on-success-container); background: var(--p-success-container); }
body.pantau-ui-v2 .lanuri-target-status.neutral { color: var(--p-on-surface-variant); background: var(--p-surface-container-high); }
body.pantau-ui-v2 .lanuri-target-status.info { color: var(--p-on-info-container); background: var(--p-info-container); }

/* access pill */
body.pantau-ui-v2 .access-pill.super_admin { color: var(--p-on-primary-container); background: var(--p-primary-container); }
body.pantau-ui-v2 .access-pill.admin { color: var(--p-on-secondary-container); background: var(--p-secondary-container); }
body.pantau-ui-v2 .access-pill.staff { color: var(--p-on-tertiary-container); background: var(--p-tertiary-container); }

/* user status */
body.pantau-ui-v2 .user-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--p-radius-pill); font-size: 12px; font-weight: 680; }
body.pantau-ui-v2 .user-status i { width: 7px; height: 7px; border-radius: 50%; }
body.pantau-ui-v2 .user-status.active { color: var(--p-on-success-container); background: var(--p-success-container); }
body.pantau-ui-v2 .user-status.active i { background: var(--p-success); }
body.pantau-ui-v2 .user-status.inactive { color: var(--p-on-surface-variant); background: var(--p-surface-container-high); }
body.pantau-ui-v2 .user-status.inactive i { background: var(--p-outline); }

/* fourdx status */
body.pantau-ui-v2 .fourdx-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--p-radius-pill); font-size: 11.5px; font-weight: 680; }
body.pantau-ui-v2 .fourdx-status.achieved { color: var(--p-on-success-container); background: var(--p-success-container); }
body.pantau-ui-v2 .fourdx-status.overdue { color: var(--p-on-error-container); background: var(--p-error-container); }
body.pantau-ui-v2 .fourdx-status.watch { color: var(--p-on-warning-container); background: var(--p-warning-container); }
body.pantau-ui-v2 .fourdx-status.active { color: var(--p-on-info-container); background: var(--p-info-container); }

/* reference ready */
body.pantau-ui-v2 .reference-ready { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--p-radius-pill); background: var(--p-success-container); color: var(--p-on-success-container); font-size: 12px; font-weight: 680; }
body.pantau-ui-v2 .reference-ready svg { width: 15px; height: 15px; }

/* survey priority badge */
body.pantau-ui-v2 .survey-priority-badge { display: inline-block; padding: 3px 8px; border-radius: var(--p-radius-pill); font-size: 11px; font-weight: 700; }
body.pantau-ui-v2 .survey-priority-badge.priority-hpi { background: var(--p-error-container); color: var(--p-on-error-container); }
body.pantau-ui-v2 .survey-priority-badge.priority-pi { background: var(--p-warning-container); color: var(--p-on-warning-container); }
body.pantau-ui-v2 .survey-priority-badge.priority-mo { background: var(--p-info-container); color: var(--p-on-info-container); }
body.pantau-ui-v2 .survey-priority-badge.priority-mt { background: var(--p-secondary-container); color: var(--p-on-secondary-container); }
body.pantau-ui-v2 .survey-priority-badge.priority-ra { background: var(--p-surface-container-high); color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .survey-priority-badge.priority-scd { background: var(--p-tertiary-container); color: var(--p-on-tertiary-container); }

/* ---- 24.9 TABS — segmented pills ----

   Satu gaya untuk seluruh tab sub-menu. Daftar selektornya panjang karena tiap
   modul lahir dengan nama kelasnya sendiri; menyatukannya di sini lebih murah
   daripada mengganti nama kelas di seluruh render.

   Sebelumnya tab aktif memakai warna tonal (secondary-container) yang nyaris
   sewarna dengan latar bilahnya sendiri, sehingga pengguna harus mencari tab
   mana yang sedang terbuka. Tab aktif kini pil terisi warna primer — lompatan
   figur/latar yang terbaca sekali lihat. Tab tidak aktif juga mendapat keadaan
   hover dan tekan, yang sebelumnya hanya dimiliki csti-tabs dan wa-tabs;
   tanpa itu bilah tab terbaca seperti label statis, bukan sesuatu yang bisa
   diklik. */
body.pantau-ui-v2 .csti-tabs,
body.pantau-ui-v2 .wa-tabs,
body.pantau-ui-v2 .reference-tabs,
body.pantau-ui-v2 .survey-module-tabs,
body.pantau-ui-v2 .laporan-tab-bar,
body.pantau-ui-v2 .user-management-tabs,
body.pantau-ui-v2 .fourdx-tabs,
body.pantau-ui-v2 .settings-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 5px;
  background: var(--p-surface-container);
  border: 1px solid var(--p-outline-variant);
  /* 26px, bukan radius-pill. Pada bilah satu baris (tinggi 52px) hasilnya
     sama-sama bulat penuh, tetapi saat tab terbungkus ke beberapa baris,
     radius 999px mengubah kotaknya menjadi elips besar. */
  border-radius: 26px;
  width: fit-content;
  max-width: 100%;
}
body.pantau-ui-v2 .csti-tabs button,
body.pantau-ui-v2 .wa-tabs button,
body.pantau-ui-v2 .reference-tabs button,
body.pantau-ui-v2 .survey-module-tabs button,
body.pantau-ui-v2 .laporan-tab-bar button,
body.pantau-ui-v2 .user-management-tabs button,
body.pantau-ui-v2 .fourdx-tabs button,
body.pantau-ui-v2 .settings-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 16px;
  color: var(--p-on-surface-variant);
  background: transparent;
  border: 0;
  border-radius: var(--p-radius-pill);
  font: inherit;
  font-size: 13px;
  font-weight: 640;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--p-motion-fast), color var(--p-motion-fast),
              box-shadow var(--p-motion-fast), transform var(--p-motion-fast);
}

/* Ikon tab yang tidak aktif diredupkan sedikit sehingga label tetap yang
   dibaca lebih dulu; ikon tab aktif kembali penuh. */
body.pantau-ui-v2 .csti-tabs button svg,
body.pantau-ui-v2 .wa-tabs button svg,
body.pantau-ui-v2 .reference-tabs button svg,
body.pantau-ui-v2 .survey-module-tabs button svg,
body.pantau-ui-v2 .laporan-tab-bar button svg,
body.pantau-ui-v2 .user-management-tabs button svg,
body.pantau-ui-v2 .fourdx-tabs button svg,
body.pantau-ui-v2 .settings-tabs button svg { width: 15px; height: 15px; flex: 0 0 15px; opacity: 0.72; }

body.pantau-ui-v2 .csti-tabs button:hover,
body.pantau-ui-v2 .wa-tabs button:hover,
body.pantau-ui-v2 .reference-tabs button:hover,
body.pantau-ui-v2 .survey-module-tabs button:hover,
body.pantau-ui-v2 .laporan-tab-bar button:hover,
body.pantau-ui-v2 .user-management-tabs button:hover,
body.pantau-ui-v2 .fourdx-tabs button:hover,
body.pantau-ui-v2 .settings-tabs button:hover {
  background: var(--p-surface-container-lowest);
  color: var(--p-on-surface);
}
body.pantau-ui-v2 .csti-tabs button:hover svg,
body.pantau-ui-v2 .wa-tabs button:hover svg,
body.pantau-ui-v2 .reference-tabs button:hover svg,
body.pantau-ui-v2 .survey-module-tabs button:hover svg,
body.pantau-ui-v2 .laporan-tab-bar button:hover svg,
body.pantau-ui-v2 .user-management-tabs button:hover svg,
body.pantau-ui-v2 .fourdx-tabs button:hover svg,
body.pantau-ui-v2 .settings-tabs button:hover svg { opacity: 1; }

/* Cincin fokus keyboard. Sebelumnya tidak ada sama sekali, sehingga pengguna
   yang berpindah dengan Tab tidak dapat melihat posisinya. */
body.pantau-ui-v2 .csti-tabs button:focus-visible,
body.pantau-ui-v2 .wa-tabs button:focus-visible,
body.pantau-ui-v2 .reference-tabs button:focus-visible,
body.pantau-ui-v2 .survey-module-tabs button:focus-visible,
body.pantau-ui-v2 .laporan-tab-bar button:focus-visible,
body.pantau-ui-v2 .user-management-tabs button:focus-visible,
body.pantau-ui-v2 .fourdx-tabs button:focus-visible,
body.pantau-ui-v2 .settings-tabs button:focus-visible {
  outline: 2px solid var(--p-primary);
  outline-offset: 2px;
}

body.pantau-ui-v2 .csti-tabs button:active,
body.pantau-ui-v2 .wa-tabs button:active,
body.pantau-ui-v2 .reference-tabs button:active,
body.pantau-ui-v2 .survey-module-tabs button:active,
body.pantau-ui-v2 .laporan-tab-bar button:active,
body.pantau-ui-v2 .user-management-tabs button:active,
body.pantau-ui-v2 .fourdx-tabs button:active,
body.pantau-ui-v2 .settings-tabs button:active { transform: scale(0.97); }

body.pantau-ui-v2 .csti-tabs button.active,
body.pantau-ui-v2 .wa-tabs button.active,
body.pantau-ui-v2 .reference-tabs button.active,
body.pantau-ui-v2 .survey-module-tabs button.active,
body.pantau-ui-v2 .laporan-tab-bar button.active,
body.pantau-ui-v2 .user-management-tabs button.active,
body.pantau-ui-v2 .fourdx-tabs button.active,
body.pantau-ui-v2 .settings-tabs button.active {
  background: var(--p-primary);
  color: var(--p-on-primary);
  font-weight: 700;
  box-shadow: var(--p-elev-2);
}
body.pantau-ui-v2 .csti-tabs button.active svg,
body.pantau-ui-v2 .wa-tabs button.active svg,
body.pantau-ui-v2 .reference-tabs button.active svg,
body.pantau-ui-v2 .survey-module-tabs button.active svg,
body.pantau-ui-v2 .laporan-tab-bar button.active svg,
body.pantau-ui-v2 .user-management-tabs button.active svg,
body.pantau-ui-v2 .fourdx-tabs button.active svg,
body.pantau-ui-v2 .settings-tabs button.active svg { opacity: 1; }

/* Layar sentuh: 40px masih di bawah sasaran sentuh 44px yang dianjurkan. */
@media (pointer: coarse) {
  body.pantau-ui-v2 .csti-tabs button,
  body.pantau-ui-v2 .wa-tabs button,
  body.pantau-ui-v2 .reference-tabs button,
  body.pantau-ui-v2 .survey-module-tabs button,
  body.pantau-ui-v2 .laporan-tab-bar button,
  body.pantau-ui-v2 .user-management-tabs button,
  body.pantau-ui-v2 .fourdx-tabs button,
  body.pantau-ui-v2 .settings-tabs button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  body.pantau-ui-v2 .csti-tabs button,
  body.pantau-ui-v2 .wa-tabs button,
  body.pantau-ui-v2 .reference-tabs button,
  body.pantau-ui-v2 .survey-module-tabs button,
  body.pantau-ui-v2 .laporan-tab-bar button,
  body.pantau-ui-v2 .user-management-tabs button,
  body.pantau-ui-v2 .fourdx-tabs button,
  body.pantau-ui-v2 .settings-tabs button { transition: none; }
  body.pantau-ui-v2 .csti-tabs button:active,
  body.pantau-ui-v2 .wa-tabs button:active,
  body.pantau-ui-v2 .reference-tabs button:active,
  body.pantau-ui-v2 .survey-module-tabs button:active,
  body.pantau-ui-v2 .laporan-tab-bar button:active,
  body.pantau-ui-v2 .user-management-tabs button:active,
  body.pantau-ui-v2 .fourdx-tabs button:active,
  body.pantau-ui-v2 .settings-tabs button:active { transform: none; }
}

/* Lencana hitungan pada tab 4DX (mis. jumlah check-in tertunda). Sebelumnya
   tanpa gaya sama sekali sehingga tampil sebagai angka miring bawaan
   peramban. Warnanya mengikuti keadaan tab agar tetap terbaca di atas pil
   aktif yang gelap. */
body.pantau-ui-v2 .fourdx-tab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: var(--p-radius-pill);
  background: var(--p-error-container, #fbe4e2);
  color: var(--p-on-error-container, #8f1d17);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}
body.pantau-ui-v2 .fourdx-tabs button.active .fourdx-tab-badge { background: var(--p-on-primary); color: var(--p-primary); }

body.pantau-ui-v2 .gemba-year-filter { display: inline-flex; gap: 5px; padding: 4px; background: var(--p-surface-container); border: 1px solid var(--p-outline-variant); border-radius: var(--p-radius-pill); }
body.pantau-ui-v2 .gemba-year-btn { padding: 6px 13px; border-radius: var(--p-radius-pill); border: 0; background: transparent; color: var(--p-on-surface-variant); font: inherit; font-size: 12.5px; font-weight: 640; cursor: pointer; }
body.pantau-ui-v2 .gemba-year-btn.active { background: var(--p-secondary-container); color: var(--p-on-secondary-container); }

/* ---- 24.10 FILTER TOOLBARS ---- */
body.pantau-ui-v2 .wtwl-filter-row,
body.pantau-ui-v2 .csti-head-right,
body.pantau-ui-v2 .csti-office-filter,
/* Kolom Kantor pada riwayat WhatsApp — memakai token tema v2. */
body.pantau-ui-v2 .wa-kantor { font-weight: 700; color: var(--p-on-surface); }
body.pantau-ui-v2 .wa-kantor-sub { color: var(--p-on-surface-variant); font-size: 11px; }
body.pantau-ui-v2 .wa-kantor-asing { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--p-on-error-container); }
body.pantau-ui-v2 .wa-kantor-asing svg { width: 13px; height: 13px; flex: 0 0 13px; }

/* Penyaring kantor pada Riwayat WhatsApp, tinggi disamakan dengan
   penyaring tanggal di sebelahnya. */
body.pantau-ui-v2 .wa-history-unit { display: inline-flex; align-items: center; gap: 6px; color: var(--p-on-surface-variant); font-size: 12px; font-weight: 700; }
body.pantau-ui-v2 .wa-history-unit select { min-height: 38px; }

body.pantau-ui-v2 .wa-history-toolbar,
body.pantau-ui-v2 .wa-blast-recipient-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.pantau-ui-v2 .wtwl-filter-row select,
body.pantau-ui-v2 .csti-office-filter select,
body.pantau-ui-v2 .survey-filter-grid select,
body.pantau-ui-v2 .user-directory-toolbar select { min-height: 38px; }

body.pantau-ui-v2 .survey-filter-panel {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--p-surface-container-low);
  border: 1px solid rgba(196,206,211,0.42);
  border-radius: var(--p-radius-lg);
  flex-wrap: wrap;
}
body.pantau-ui-v2 .survey-filter-intro { display: flex; align-items: center; gap: 10px; min-width: 220px; }
body.pantau-ui-v2 .survey-filter-intro > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--p-radius-sm); background: var(--p-primary-container); color: var(--p-on-primary-container); }
body.pantau-ui-v2 .survey-filter-intro p { display: grid; gap: 2px; margin: 0; }
body.pantau-ui-v2 .survey-filter-intro strong { color: var(--p-on-surface); font-size: 13px; }
body.pantau-ui-v2 .survey-filter-intro small { color: var(--p-on-surface-variant); font-size: 11.5px; }
body.pantau-ui-v2 .survey-filter-grid { display: flex; flex: 1 1 auto; gap: 10px; flex-wrap: wrap; }

body.pantau-ui-v2 .user-directory-toolbar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
body.pantau-ui-v2 .user-search-field { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; background: var(--p-surface-container-lowest); border: 1px solid var(--p-outline-variant); border-radius: var(--p-radius-sm); flex: 1 1 220px; }
body.pantau-ui-v2 .user-search-field input { border: 0; outline: none; background: transparent; flex: 1; font: inherit; font-size: 13.5px; color: var(--p-on-surface); }
body.pantau-ui-v2 .user-search-field svg { width: 16px; height: 16px; color: var(--p-on-surface-variant); }

/* Baris filter: tanggal berdampingan dengan kantor/loket, tepat di bawah tab. */
body.pantau-ui-v2 .csti-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
body.pantau-ui-v2 .csti-filter-bar .csti-office-filter { margin: 0; }
/* Tinggi filter kantor disamakan dengan pemilih tanggal supaya satu baris
   filter terbaca sebagai satu kelompok, bukan dua kendali yang kebetulan
   bersebelahan. */
body.pantau-ui-v2 .csti-filter-bar .csti-office-filter label { min-height: 48px; box-sizing: border-box; padding: 6px 14px; }

/* date picker */
body.pantau-ui-v2 .csti-date-picker { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--p-surface-container-lowest); border: 1px solid var(--p-outline-variant); border-radius: var(--p-radius-pill); }
body.pantau-ui-v2 .csti-date-picker button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; min-width: 40px; padding: 8px 14px; border: 0; border-radius: var(--p-radius-pill); background: transparent; color: var(--p-on-surface-variant); font: inherit; font-size: 13.5px; font-weight: 640; cursor: pointer; transition: background var(--p-motion-fast), color var(--p-motion-fast); }
body.pantau-ui-v2 .csti-date-picker button:hover { background: var(--p-surface-container); color: var(--p-on-surface); }
body.pantau-ui-v2 .csti-date-picker button:focus-visible { outline: 2px solid var(--p-primary); outline-offset: 2px; }
body.pantau-ui-v2 .csti-date-picker button:disabled { opacity: 0.4; cursor: default; }
body.pantau-ui-v2 .csti-date-picker button:disabled:hover { background: transparent; }

/* Tanggal yang sedang dipilih adalah nilai, bukan sekadar label — diberi isian
   tonal dan teks penuh kontras supaya terbaca sebagai kendali aktif. Ikon
   kalender memakai warna primer agar bilah filter langsung terkenali. */
body.pantau-ui-v2 .csti-date-picker .csti-date-label { padding: 8px 16px; background: var(--p-primary-container); color: var(--p-on-primary-container); font-weight: 700; }
body.pantau-ui-v2 .csti-date-picker .csti-date-label:hover { background: var(--p-primary-dim); color: var(--p-on-primary-container); }
body.pantau-ui-v2 .csti-date-picker .csti-date-label svg { color: var(--p-primary); }
body.pantau-ui-v2 .csti-date-picker .csti-date-today-btn { background: var(--p-secondary-container); color: var(--p-on-secondary-container); font-weight: 700; }
body.pantau-ui-v2 .csti-date-picker svg { width: 16px; height: 16px; flex: 0 0 16px; }

@media (pointer: coarse) {
  body.pantau-ui-v2 .csti-date-picker button { min-height: 44px; min-width: 44px; }
}
@media (max-width: 640px) {
  body.pantau-ui-v2 .csti-filter-bar { align-items: stretch; }
  body.pantau-ui-v2 .csti-date-picker { width: 100%; justify-content: space-between; flex-wrap: wrap; row-gap: 4px; }
  body.pantau-ui-v2 .csti-date-picker .csti-date-label { flex: 1 1 auto; }
  /* Tanggal panjang ("Selasa, 9 September 2026") menyisakan ruang sempit untuk
     tombol kembali ke hari ini. Tombol itu turun ke baris kedua selebar penuh
     alih-alih terhimpit. */
  body.pantau-ui-v2 .csti-date-picker .csti-date-today-btn { flex: 1 1 100%; }
}

/* connect indicator */
body.pantau-ui-v2 .csti-connection { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--p-radius-pill); font-size: 12px; font-weight: 640; }
body.pantau-ui-v2 .csti-connection i { width: 8px; height: 8px; border-radius: 50%; }
body.pantau-ui-v2 .csti-connection.online { background: var(--p-success-container); color: var(--p-on-success-container); }
body.pantau-ui-v2 .csti-connection.online i { background: var(--p-success); box-shadow: 0 0 0 3px rgba(29,127,70,0.16); }
body.pantau-ui-v2 .csti-connection.offline { background: var(--p-error-container); color: var(--p-on-error-container); }
body.pantau-ui-v2 .csti-connection.offline i { background: var(--p-error); box-shadow: 0 0 0 3px rgba(179,38,30,0.16); }
body.pantau-ui-v2 .csti-connection span { font-weight: 650; }
body.pantau-ui-v2 .csti-connection small { font-size: 11px; opacity: 0.8; }

/* ---- 24.10b CSTI · GEMBA ONLINE — rekaman antrian selesai ---- */
body.pantau-ui-v2 .csti-gemba-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.pantau-ui-v2 .csti-gemba-kpi article:nth-child(2) p strong,
body.pantau-ui-v2 .csti-gemba-kpi article:nth-child(3) p strong { font-size: 21px; font-variant-numeric: tabular-nums; }

body.pantau-ui-v2 .csti-gemba-card { padding: 18px 18px 20px; }
body.pantau-ui-v2 .csti-gemba-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 16px;
  padding: 10px 12px;
  color: var(--p-on-secondary-container);
  background: var(--p-secondary-container);
  border-radius: var(--p-radius-md);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.5;
}
body.pantau-ui-v2 .csti-gemba-note svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }

body.pantau-ui-v2 .csti-gemba-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
body.pantau-ui-v2 .csti-gemba-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--p-on-surface-variant);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.pantau-ui-v2 .csti-gemba-filter-label svg { width: 14px; height: 14px; }
body.pantau-ui-v2 .csti-gemba-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--p-surface-container);
  border: 1px solid var(--p-outline-variant);
  border-radius: var(--p-radius-pill);
}
body.pantau-ui-v2 .csti-gemba-filter button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 13px;
  border: 0;
  border-radius: var(--p-radius-pill);
  background: transparent;
  color: var(--p-on-surface-variant);
  font: inherit;
  font-size: 12.5px;
  font-weight: 660;
  cursor: pointer;
  transition: background var(--p-motion-fast), color var(--p-motion-fast);
}
body.pantau-ui-v2 .csti-gemba-filter button:hover { background: var(--p-surface-container-high); }
body.pantau-ui-v2 .csti-gemba-filter button.active { background: var(--p-secondary-container); color: var(--p-on-secondary-container); box-shadow: var(--p-elev-1); }
body.pantau-ui-v2 .csti-gemba-filter button em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
body.pantau-ui-v2 .csti-gemba-filter button.active em { opacity: 0.9; }

body.pantau-ui-v2 .csti-gemba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
}

body.pantau-ui-v2 .csti-gemba-clip {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--p-outline-variant);
  border-radius: var(--p-radius-md);
  background: var(--p-surface-container-lowest);
  overflow: hidden;
  transition: box-shadow var(--p-motion-standard), border-color var(--p-motion-fast), transform var(--p-motion-fast);
}
body.pantau-ui-v2 .csti-gemba-clip:hover {
  border-color: var(--p-primary-dim);
  box-shadow: var(--p-elev-2);
  transform: translateY(-2px);
}

body.pantau-ui-v2 .csti-gemba-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(11, 133, 132, 0.34) 0%, transparent 60%),
    linear-gradient(150deg, #0c2f45 0%, #08405a 55%, #05243a 100%);
  color: #eaf6f5;
  overflow: hidden;
}
body.pantau-ui-v2 .csti-gemba-scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px);
  opacity: 0.5;
  pointer-events: none;
}
body.pantau-ui-v2 .csti-gemba-play {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--p-radius-pill);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  transition: transform var(--p-motion-standard), background var(--p-motion-fast);
}
body.pantau-ui-v2 .csti-gemba-clip:hover .csti-gemba-play { transform: scale(1.08); background: rgba(255, 255, 255, 0.22); }
body.pantau-ui-v2 .csti-gemba-play svg { width: 20px; height: 20px; margin-left: 2px; }

body.pantau-ui-v2 .csti-gemba-no {
  position: absolute;
  top: 8px;
  left: 10px;
  font-family: var(--p-font-display);
  font-size: 15px;
  font-weight: 740;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
}
body.pantau-ui-v2 .csti-gemba-runtime {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--p-radius-pill);
  background: rgba(4, 18, 28, 0.66);
  color: #eaf6f5;
  font-size: 11px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
}
body.pantau-ui-v2 .csti-gemba-runtime svg { width: 12px; height: 12px; }
body.pantau-ui-v2 .csti-gemba-clip.is-over .csti-gemba-runtime { background: rgba(179, 38, 30, 0.82); color: #fff; }

body.pantau-ui-v2 .csti-gemba-info { display: grid; align-content: start; gap: 8px; padding: 12px; }
body.pantau-ui-v2 .csti-gemba-layanan {
  margin: 0;
  /* dikunci 2 baris supaya tinggi tiap kartu identik dan blok tombol sejajar */
  height: 2.7em;
  color: var(--p-on-surface);
  font-size: 13px;
  font-weight: 660;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.pantau-ui-v2 .csti-gemba-tags { display: flex; flex-wrap: wrap; gap: 6px; }
body.pantau-ui-v2 .csti-gemba-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--p-radius-pill);
  background: var(--p-surface-container-high);
  color: var(--p-on-surface-variant);
  font-size: 11px;
  font-weight: 640;
  white-space: nowrap;
}
body.pantau-ui-v2 .csti-gemba-tag svg { width: 12px; height: 12px; }
body.pantau-ui-v2 .csti-gemba-tag.csti-gemba-time { background: var(--p-primary-container); color: var(--p-on-primary-container); font-variant-numeric: tabular-nums; }
body.pantau-ui-v2 .csti-gemba-tag.csti-gemba-dur { background: var(--p-tertiary-container); color: var(--p-on-tertiary-container); font-variant-numeric: tabular-nums; }
body.pantau-ui-v2 .csti-gemba-tag.csti-gemba-layan { background: var(--p-surface-container-high); color: var(--p-on-surface-variant); font-variant-numeric: tabular-nums; }

body.pantau-ui-v2 .csti-gemba-actions {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--p-outline-variant);
}
body.pantau-ui-v2 .csti-gemba-download,
body.pantau-ui-v2 .csti-gemba-score {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--p-radius-pill);
  font: inherit;
  font-size: 12.5px;
  font-weight: 680;
  cursor: pointer;
  transition: filter var(--p-motion-fast), background var(--p-motion-fast), border-color var(--p-motion-fast), transform var(--p-motion-fast);
}
body.pantau-ui-v2 .csti-gemba-download { background: var(--p-primary); color: var(--p-on-primary); }
body.pantau-ui-v2 .csti-gemba-download:hover { filter: brightness(1.07); }
body.pantau-ui-v2 .csti-gemba-score {
  background: var(--p-surface-container-lowest);
  color: var(--p-primary);
  border-color: var(--p-outline-variant);
}
body.pantau-ui-v2 .csti-gemba-score:hover { background: var(--p-surface-container-high); border-color: var(--p-primary-dim); }
body.pantau-ui-v2 .csti-gemba-download:active,
body.pantau-ui-v2 .csti-gemba-score:active { transform: scale(0.97); }
body.pantau-ui-v2 .csti-gemba-download svg,
body.pantau-ui-v2 .csti-gemba-score svg { width: 15px; height: 15px; }

body.pantau-ui-v2 .csti-gemba-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 40px 20px;
  text-align: center;
  color: var(--p-on-surface-variant);
}
body.pantau-ui-v2 .csti-gemba-empty svg { width: 34px; height: 34px; color: var(--p-primary); }
body.pantau-ui-v2 .csti-gemba-empty h3 { margin: 4px 0 0; color: var(--p-on-surface); font-size: 15px; font-weight: 680; }
body.pantau-ui-v2 .csti-gemba-empty p { margin: 0; font-size: 12.5px; max-width: 360px; }

@media (max-width: 560px) {
  body.pantau-ui-v2 .csti-gemba-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.pantau-ui-v2 .csti-gemba-actions { padding: 10px; gap: 6px; }
  body.pantau-ui-v2 .csti-gemba-download,
  body.pantau-ui-v2 .csti-gemba-score { font-size: 12px; }
}
@media (max-width: 380px) {
  body.pantau-ui-v2 .csti-gemba-grid { grid-template-columns: 1fr; }
}

/* ---- 24.11 DIALOG — consistent surface ---- */
body.pantau-ui-v2 .user-dialog,
body.pantau-ui-v2 .lanuri-dialog,
body.pantau-ui-v2 .password-dialog,
body.pantau-ui-v2 .assistant-dialog,
body.pantau-ui-v2 .assistant-report-dialog,
body.pantau-ui-v2 .assistant-chat-dialog,
body.pantau-ui-v2 .survey-aoi-dialog { padding: 0; border: none; border-radius: var(--p-radius-xl); box-shadow: var(--p-elev-3); color: var(--p-on-surface); }
body.pantau-ui-v2 .user-dialog .dialog-head,
body.pantau-ui-v2 .lanuri-dialog .dialog-head,
body.pantau-ui-v2 .password-dialog .dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; }
body.pantau-ui-v2 .user-dialog .dialog-head h2,
body.pantau-ui-v2 .lanuri-dialog .dialog-head h2,
body.pantau-ui-v2 .password-dialog .dialog-head h2 { margin: 0 0 4px; color: var(--p-on-surface); font-size: 17px; font-weight: 680; }
body.pantau-ui-v2 .user-dialog .dialog-head p,
body.pantau-ui-v2 .lanuri-dialog .dialog-head p,
body.pantau-ui-v2 .password-dialog .dialog-head p { margin: 0; color: var(--p-on-surface-variant); font-size: 12.5px; }
body.pantau-ui-v2 .dialog-kicker { color: var(--p-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
body.pantau-ui-v2 .dialog-close { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--p-radius-pill); background: var(--p-surface-container); color: var(--p-on-surface-variant); cursor: pointer; }
body.pantau-ui-v2 .dialog-close:hover { background: var(--p-surface-container-high); }
body.pantau-ui-v2 .dialog-close svg { width: 17px; height: 17px; }
body.pantau-ui-v2 .dialog-inner { padding: 0 0 16px; }
body.pantau-ui-v2 .dialog-inner .form-grid,
body.pantau-ui-v2 .dialog-inner .user-form-grid,
body.pantau-ui-v2 .dialog-inner .lanuri-form-grid { padding: 0 20px; }
body.pantau-ui-v2 .form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--p-outline-variant); }

/* ---- 24.12 EMPTY / LOADING / ERROR ---- */
body.pantau-ui-v2 .lanuri-target-empty,
body.pantau-ui-v2 .fourdx-empty-portfolio,
body.pantau-ui-v2 .fourdx-empty-score,
body.pantau-ui-v2 .bpjs-empty-agenda,
body.pantau-ui-v2 .lanuri-placeholder {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 36px 20px;
  text-align: center;
  color: var(--p-on-surface-variant);
}
body.pantau-ui-v2 .lanuri-target-empty svg,
body.pantau-ui-v2 .fourdx-empty-portfolio svg,
body.pantau-ui-v2 .fourdx-empty-score svg,
body.pantau-ui-v2 .bpjs-empty-agenda svg,
body.pantau-ui-v2 .lanuri-placeholder-icon svg { width: 34px; height: 34px; color: var(--p-primary); }
body.pantau-ui-v2 .lanuri-target-empty h2,
body.pantau-ui-v2 .fourdx-empty-portfolio h3,
body.pantau-ui-v2 .fourdx-empty-score h2,
body.pantau-ui-v2 .lanuri-placeholder h1 { margin: 0; color: var(--p-on-surface); font-size: 16px; font-weight: 680; }
body.pantau-ui-v2 .lanuri-target-empty p,
body.pantau-ui-v2 .fourdx-empty-portfolio p,
body.pantau-ui-v2 .fourdx-empty-score p,
body.pantau-ui-v2 .lanuri-placeholder p { margin: 0; color: var(--p-on-surface-variant); font-size: 13px; }
body.pantau-ui-v2 .lanuri-placeholder { padding: 40px 20px; background: var(--p-surface-container-lowest); border: 1px solid rgba(196,206,211,0.42); border-radius: var(--p-radius-xl); }
body.pantau-ui-v2 .lanuri-placeholder-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--p-radius-lg); background: var(--p-primary-container); color: var(--p-on-primary-container); }
body.pantau-ui-v2 .lanuri-status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--p-radius-pill); background: var(--p-success-container); color: var(--p-on-success-container); font-size: 12.5px; font-weight: 660; }

/* warning banner */
body.pantau-ui-v2 .csti-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  color: var(--p-on-warning-container);
  background: var(--p-warning-container);
  border-radius: var(--p-radius-md);
}
body.pantau-ui-v2 .csti-warning > svg { width: 18px; height: 18px; flex: 0 0 18px; }
body.pantau-ui-v2 .csti-warning strong { font-size: 13px; }
body.pantau-ui-v2 .csti-warning span { font-size: 12px; }
body.pantau-ui-v2 .csti-warning button { margin-left: auto; padding: 6px 12px; border: 0; border-radius: var(--p-radius-pill); background: var(--p-warning); color: var(--p-on-warning); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }

/* ---- 24.13 MISC MODULE SURFACES ---- */
body.pantau-ui-v2 .wtwl-office-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--p-secondary-container);
  border: 1px solid rgba(11,133,132,0.2);
  border-radius: var(--p-radius-lg);
  flex-wrap: wrap;
}
body.pantau-ui-v2 .wtwl-office-filter-copy { display: flex; align-items: center; gap: 10px; }
body.pantau-ui-v2 .wtwl-office-filter-copy > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--p-radius-sm); background: rgba(255,255,255,0.6); color: var(--p-on-secondary-container); }
body.pantau-ui-v2 .wtwl-office-filter-copy strong { display: block; color: var(--p-on-secondary-container); font-size: 13px; }
body.pantau-ui-v2 .wtwl-office-filter-copy small { color: var(--p-on-secondary-container); opacity: 0.8; font-size: 11.5px; }

/* ---- WT-WL: Insight AI & Rekomendasi ---- */
body.pantau-ui-v2 .wtwl-ai-card {
  padding: 20px 22px 22px;
  margin-bottom: 18px;
  overflow: hidden;
  background:
    radial-gradient(110% 130% at 0% 0%, rgba(203, 243, 239, 0.55) 0%, rgba(203, 243, 239, 0) 55%),
    radial-gradient(90% 110% at 100% 0%, rgba(209, 232, 247, 0.6) 0%, rgba(209, 232, 247, 0) 58%),
    var(--p-surface-container-lowest);
}

body.pantau-ui-v2 .wtwl-ai-banner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
body.pantau-ui-v2 .wtwl-ai-banner-copy { flex: 1 1 320px; min-width: 0; }
body.pantau-ui-v2 .wtwl-ai-banner-copy h3 { margin: 0 0 4px; font-size: 17px; font-weight: 760; letter-spacing: -0.01em; color: var(--p-on-surface); }
body.pantau-ui-v2 .wtwl-ai-banner-copy p { margin: 0; max-width: 62ch; font-size: 13px; line-height: 1.6; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .wtwl-ai-banner-copy p.is-error { color: var(--p-error); font-weight: 600; }

body.pantau-ui-v2 .wtwl-ai-orb {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: var(--p-primary);
  background: radial-gradient(circle at 32% 26%, #ffffff 0%, var(--p-primary-container) 46%, var(--p-secondary-container) 100%);
  box-shadow: inset 0 0 0 1px rgba(11, 94, 138, 0.14), 0 8px 22px rgba(11, 94, 138, 0.16);
}
body.pantau-ui-v2 .wtwl-ai-orb svg { width: 25px; height: 25px; }
body.pantau-ui-v2 .wtwl-ai-orb.is-sm { width: 38px; height: 38px; box-shadow: inset 0 0 0 1px rgba(11, 94, 138, 0.14), 0 4px 12px rgba(11, 94, 138, 0.12); }
body.pantau-ui-v2 .wtwl-ai-orb.is-sm svg { width: 18px; height: 18px; }
body.pantau-ui-v2 .wtwl-ai-orb.is-pulsing { animation: p-ai-orb-pulse 1.8s ease-in-out infinite; }

body.pantau-ui-v2 .wtwl-ai-cta {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 30px;
  border: 0;
  border-radius: var(--p-radius-pill);
  background: linear-gradient(135deg, #0b5e8a 0%, #1180ab 52%, #12a394 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 720;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 94, 138, 0.26), 0 1px 2px rgba(11, 42, 58, 0.14);
  transition: transform 0.16s ease, box-shadow 0.22s ease;
}
body.pantau-ui-v2 .wtwl-ai-cta svg { width: 19px; height: 19px; flex: 0 0 auto; }
body.pantau-ui-v2 .wtwl-ai-cta > span:not(.wtwl-ai-cta-sheen) { position: relative; z-index: 1; }
body.pantau-ui-v2 .wtwl-ai-cta-sheen {
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 55%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
}
body.pantau-ui-v2 .wtwl-ai-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(11, 94, 138, 0.32), 0 1px 2px rgba(11, 42, 58, 0.14); }
body.pantau-ui-v2 .wtwl-ai-cta:hover .wtwl-ai-cta-sheen { animation: p-ai-cta-sheen 0.85s ease; }
body.pantau-ui-v2 .wtwl-ai-cta:active { transform: translateY(0) scale(0.985); }
body.pantau-ui-v2 .wtwl-ai-cta:focus-visible { outline: 3px solid var(--p-primary-dim); outline-offset: 3px; }
body.pantau-ui-v2 .wtwl-ai-cta:disabled { cursor: progress; opacity: 0.7; transform: none; box-shadow: var(--p-elev-1); }

body.pantau-ui-v2 .wtwl-ai-skeleton { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
body.pantau-ui-v2 .wtwl-ai-skeleton > div { display: grid; gap: 10px; }
body.pantau-ui-v2 .wtwl-ai-skeleton span {
  display: block;
  height: 40px;
  border-radius: var(--p-radius-sm);
  background: linear-gradient(90deg, var(--p-surface-container) 25%, var(--p-surface-container-high) 37%, var(--p-surface-container) 63%);
  background-size: 400% 100%;
  animation: p-ai-shimmer 1.5s ease infinite;
}
body.pantau-ui-v2 .wtwl-ai-skeleton span:nth-child(2) { opacity: 0.8; }
body.pantau-ui-v2 .wtwl-ai-skeleton span:nth-child(3) { opacity: 0.6; }

body.pantau-ui-v2 .wtwl-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
body.pantau-ui-v2 .wtwl-ai-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.pantau-ui-v2 .wtwl-ai-title > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.pantau-ui-v2 .wtwl-ai-title strong { font-size: 16px; font-weight: 760; letter-spacing: -0.01em; color: var(--p-on-surface); }
body.pantau-ui-v2 .wtwl-ai-title small { font-size: 11px; font-weight: 600; color: var(--p-on-surface-variant); }

body.pantau-ui-v2 .wtwl-ai-lead {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--p-primary);
  border-radius: 0 var(--p-radius-sm) var(--p-radius-sm) 0;
  background: rgba(209, 232, 247, 0.42);
  color: var(--p-on-surface);
  font-size: 14px;
  font-weight: 620;
  line-height: 1.55;
}
body.pantau-ui-v2 .wtwl-ai-error {
  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--p-radius-xs);
  background: var(--p-error-container); color: var(--p-error); font-size: 12.5px; font-weight: 600;
}

body.pantau-ui-v2 .wtwl-ai-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
body.pantau-ui-v2 .wtwl-ai-column { display: grid; gap: 10px; align-content: start; min-width: 0; }
body.pantau-ui-v2 .wtwl-ai-column > h3 {
  display: flex; align-items: center; gap: 7px; margin: 0 0 2px;
  font-size: 11.5px; font-weight: 740; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--p-on-surface-variant);
}
body.pantau-ui-v2 .wtwl-ai-column > h3 svg { width: 15px; height: 15px; color: var(--p-primary); }
body.pantau-ui-v2 .wtwl-ai-column-empty { margin: 0; font-size: 13px; color: var(--p-on-surface-variant); }

body.pantau-ui-v2 .wtwl-ai-finding {
  padding: 13px 15px;
  border: 1px solid var(--p-outline-variant);
  border-left: 3px solid var(--level-color, var(--p-outline));
  border-radius: var(--p-radius-sm);
  background: var(--p-surface-container-lowest);
}
body.pantau-ui-v2 .wtwl-ai-finding.is-critical { --level-color: var(--p-error); }
body.pantau-ui-v2 .wtwl-ai-finding.is-watch { --level-color: var(--p-warning); }
body.pantau-ui-v2 .wtwl-ai-finding.is-good { --level-color: var(--p-success); }
body.pantau-ui-v2 .wtwl-ai-finding header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.pantau-ui-v2 .wtwl-ai-finding-mark { display: grid; place-items: center; color: var(--level-color); }
body.pantau-ui-v2 .wtwl-ai-finding-mark svg { width: 16px; height: 16px; }
body.pantau-ui-v2 .wtwl-ai-finding h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--p-on-surface); }
body.pantau-ui-v2 .wtwl-ai-metric {
  margin-left: auto; padding: 3px 9px; border-radius: var(--p-radius-pill);
  background: var(--p-surface-container); color: var(--p-on-surface-variant);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.pantau-ui-v2 .wtwl-ai-finding p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--p-on-surface-variant); }

body.pantau-ui-v2 .wtwl-ai-action {
  display: flex; gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--p-outline-variant);
  border-radius: var(--p-radius-sm);
  background: var(--p-surface-container-lowest);
}
body.pantau-ui-v2 .wtwl-ai-action > div { min-width: 0; flex: 1; }
body.pantau-ui-v2 .wtwl-ai-action-num {
  flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--p-primary-container); color: var(--p-on-primary-container);
  font-size: 11.5px; font-weight: 760; font-variant-numeric: tabular-nums;
}
body.pantau-ui-v2 .wtwl-ai-action header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.pantau-ui-v2 .wtwl-ai-action h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--p-on-surface); }
body.pantau-ui-v2 .wtwl-ai-priority {
  margin-left: auto; padding: 3px 9px; border-radius: var(--p-radius-pill);
  font-size: 10.5px; font-weight: 720; letter-spacing: 0.02em; white-space: nowrap;
  background: var(--p-surface-container); color: var(--p-on-surface-variant);
}
body.pantau-ui-v2 .wtwl-ai-action.is-high .wtwl-ai-priority { background: var(--p-error-container); color: var(--p-error); }
body.pantau-ui-v2 .wtwl-ai-action.is-high .wtwl-ai-action-num { background: var(--p-error-container); color: var(--p-error); }
body.pantau-ui-v2 .wtwl-ai-action.is-mid .wtwl-ai-priority { background: var(--p-warning-container); color: var(--p-warning); }
body.pantau-ui-v2 .wtwl-ai-action.is-low .wtwl-ai-priority { background: var(--p-success-container); color: var(--p-success); }
body.pantau-ui-v2 .wtwl-ai-action p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .wtwl-ai-action footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
body.pantau-ui-v2 .wtwl-ai-action footer span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--p-radius-pill);
  background: var(--p-surface-container-low); border: 1px solid var(--p-outline-variant);
  font-size: 11px; font-weight: 620; color: var(--p-on-surface-variant);
}
body.pantau-ui-v2 .wtwl-ai-action footer svg { width: 13px; height: 13px; }

body.pantau-ui-v2 .wtwl-ai-markdown { font-size: 13.5px; line-height: 1.65; color: var(--p-on-surface); }
body.pantau-ui-v2 .wtwl-ai-markdown > :first-child { margin-top: 0; }
body.pantau-ui-v2 .wtwl-ai-markdown h2,
body.pantau-ui-v2 .wtwl-ai-markdown h3,
body.pantau-ui-v2 .wtwl-ai-markdown h4 { font-size: 13.5px; font-weight: 740; margin: 16px 0 6px; color: var(--p-primary); }
body.pantau-ui-v2 .wtwl-ai-markdown ul { margin: 6px 0; padding-left: 18px; }
body.pantau-ui-v2 .wtwl-ai-markdown li { margin: 4px 0; }

body.pantau-ui-v2 .wtwl-ai-disclaimer {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 18px 0 0; padding-top: 14px;
  border-top: 1px solid var(--p-outline-variant);
  font-size: 11.5px; line-height: 1.55; color: var(--p-on-surface-variant);
}
body.pantau-ui-v2 .wtwl-ai-disclaimer svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; }

@media (max-width: 900px) {
  body.pantau-ui-v2 .wtwl-ai-columns,
  body.pantau-ui-v2 .wtwl-ai-skeleton { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body.pantau-ui-v2 .wtwl-ai-card { padding: 16px 14px 18px; }
  body.pantau-ui-v2 .wtwl-ai-cta { width: 100%; min-height: 48px; padding: 0 20px; }
  body.pantau-ui-v2 .wtwl-ai-metric,
  body.pantau-ui-v2 .wtwl-ai-priority { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.pantau-ui-v2 .wtwl-ai-orb.is-pulsing,
  body.pantau-ui-v2 .wtwl-ai-skeleton span { animation: none; }
  body.pantau-ui-v2 .wtwl-ai-cta { transition: none; }
  body.pantau-ui-v2 .wtwl-ai-cta:hover { transform: none; }
  body.pantau-ui-v2 .wtwl-ai-cta:hover .wtwl-ai-cta-sheen { animation: none; }
}

body.pantau-ui-v2 .wtwl-upload-success { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 14px; background: var(--p-success-container); color: var(--p-on-success-container); border-radius: var(--p-radius-md); font-size: 13px; }
body.pantau-ui-v2 .wtwl-upload-success svg { width: 18px; height: 18px; flex: 0 0 18px; }
body.pantau-ui-v2 .wtwl-upload-success button { margin-left: auto; padding: 6px 12px; border: 0; border-radius: var(--p-radius-pill); background: var(--p-success); color: var(--p-on-success); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
body.pantau-ui-v2 .wtwl-upload-errors { padding: 12px 14px; margin-bottom: 14px; background: var(--p-error-container); color: var(--p-on-error-container); border-radius: var(--p-radius-md); font-size: 13px; }
body.pantau-ui-v2 .wtwl-upload-errors ol { margin: 8px 0 0 18px; padding: 0; }

/* ---- 24.14 PROGRESS & METRIC BASICS ---- */
body.pantau-ui-v2 .lanuri-target-track,
body.pantau-ui-v2 .fourdx-score-track,
body.pantau-ui-v2 .wa-blast-progress-bar { height: 8px; overflow: hidden; background: var(--p-surface-container-high); border-radius: var(--p-radius-pill); }
body.pantau-ui-v2 .lanuri-target-track i,
body.pantau-ui-v2 .fourdx-score-track i,
body.pantau-ui-v2 .wa-blast-progress-bar i { display: block; height: 100%; background: var(--p-primary); border-radius: inherit; }
body.pantau-ui-v2 .fourdx-progress-ring {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: conic-gradient(var(--p-primary) calc(var(--progress, 0) * 1%), var(--p-surface-container-high) 0);
}
body.pantau-ui-v2 .fourdx-progress-ring span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--p-surface-container-lowest);
  text-align: center;
}
body.pantau-ui-v2 .fourdx-progress-ring strong { color: var(--p-on-surface); font-size: 20px; font-weight: 720; }
body.pantau-ui-v2 .fourdx-progress-ring small { color: var(--p-on-surface-variant); font-size: 10.5px; }

/* MPP segment buttons */
body.pantau-ui-v2 .mpp-segment-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--p-surface-container-lowest);
  border: 1px solid rgba(196,206,211,0.42);
  border-radius: var(--p-radius-lg);
  cursor: pointer;
  text-align: left;
  transition: box-shadow var(--p-motion-standard), border-color var(--p-motion-fast);
}
body.pantau-ui-v2 .mpp-segment-btn:hover { border-color: var(--p-primary); box-shadow: var(--p-elev-2); }
body.pantau-ui-v2 .mpp-segment-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--p-radius-sm); background: color-mix(in srgb, var(--seg-color, var(--p-primary)) 16%, transparent); color: var(--seg-color, var(--p-primary)); }
body.pantau-ui-v2 .mpp-segment-icon svg { width: 20px; height: 20px; }
body.pantau-ui-v2 .mpp-segment-body { display: grid; gap: 2px; }
body.pantau-ui-v2 .mpp-segment-code { color: var(--p-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
body.pantau-ui-v2 .mpp-segment-body strong { color: var(--p-on-surface); font-size: 13.5px; }
body.pantau-ui-v2 .mpp-segment-body em { color: var(--p-on-surface-variant); font-size: 11.5px; font-style: normal; }
body.pantau-ui-v2 .mpp-segment-arrow { margin-left: auto; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .mpp-segment-arrow svg { width: 18px; height: 18px; }

/* reports cards */
body.pantau-ui-v2 .reports-card { display: flex; align-items: center; gap: 14px; padding: 16px; }
body.pantau-ui-v2 .reports-card-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--p-radius-sm); background: var(--p-primary-container); color: var(--p-on-primary-container); }
body.pantau-ui-v2 .reports-card-icon svg { width: 21px; height: 21px; }
body.pantau-ui-v2 .reports-card-content { flex: 1 1 auto; min-width: 0; }
body.pantau-ui-v2 .reports-card-content h2 { margin: 0 0 4px; color: var(--p-on-surface); font-size: 14.5px; font-weight: 680; }
body.pantau-ui-v2 .reports-card-content p { margin: 0 0 4px; color: var(--p-on-surface-variant); font-size: 12.5px; }
body.pantau-ui-v2 .reports-card-content small { color: var(--p-primary); font-size: 11.5px; font-weight: 620; }
body.pantau-ui-v2 .reports-download { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: var(--p-radius-pill); background: var(--p-primary); color: var(--p-on-primary); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; white-space: nowrap; }
body.pantau-ui-v2 .reports-download svg { width: 15px; height: 15px; }
body.pantau-ui-v2 .reports-download-all { flex: 0 0 auto; }

/* calendar cards */
body.pantau-ui-v2 .bpjs-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
body.pantau-ui-v2 .bpjs-calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
body.pantau-ui-v2 .bpjs-calendar-weekdays span { color: var(--p-on-surface-variant); font-size: 11px; font-weight: 700; text-align: center; text-transform: uppercase; }
body.pantau-ui-v2 .bpjs-calendar-day {
  display: grid;
  gap: 5px;
  min-height: 74px;
  padding: 8px;
  color: var(--p-on-surface);
  background: var(--p-surface-container-low);
  border: 1px solid var(--p-outline-variant);
  border-radius: var(--p-radius-sm);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color var(--p-motion-fast), background var(--p-motion-fast);
}
body.pantau-ui-v2 .bpjs-calendar-day:hover { border-color: var(--p-primary); }
body.pantau-ui-v2 .bpjs-calendar-day.selected { background: var(--p-primary-container); border-color: var(--p-primary); }
body.pantau-ui-v2 .bpjs-calendar-day.today { border-color: var(--p-secondary); }
body.pantau-ui-v2 .bpjs-calendar-day.muted { visibility: hidden; }
body.pantau-ui-v2 .bpjs-calendar-number { font-size: 13px; font-weight: 680; }
body.pantau-ui-v2 .bpjs-calendar-events { display: grid; gap: 3px; }
body.pantau-ui-v2 .bpjs-calendar-event { display: grid; padding: 3px 6px; background: var(--p-secondary-container); border-radius: 6px; }
body.pantau-ui-v2 .bpjs-calendar-event strong { font-size: 10.5px; color: var(--p-on-secondary-container); }
body.pantau-ui-v2 .bpjs-calendar-event small { font-size: 10px; color: var(--p-on-secondary-container); opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.pantau-ui-v2 .bpjs-calendar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
body.pantau-ui-v2 .bpjs-calendar-head h2 { margin: 0; color: var(--p-on-surface); font-size: 16px; font-weight: 680; }
body.pantau-ui-v2 .bpjs-calendar-head p { margin: 2px 0 0; color: var(--p-on-surface-variant); font-size: 12px; }
body.pantau-ui-v2 .bpjs-calendar-nav { display: inline-flex; gap: 5px; }
/* min-width, bukan width: tombol "Bulan ini" berisi teks dan harus melebar
   mengikuti isinya. Dengan width tetap 32px teksnya terpotong. */
body.pantau-ui-v2 .bpjs-calendar-nav button { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 10px; white-space: nowrap; border: 0; border-radius: var(--p-radius-pill); background: var(--p-surface-container); color: var(--p-on-surface-variant); cursor: pointer; font: inherit; font-size: 12.5px; }
body.pantau-ui-v2 .bpjs-calendar-nav button:hover { background: var(--p-surface-container-high); }
body.pantau-ui-v2 .bpjs-calendar-nav svg { width: 15px; height: 15px; }
body.pantau-ui-v2 .bpjs-calendar-legend { display: flex; align-items: center; gap: 14px; margin-top: 10px; color: var(--p-on-surface-variant); font-size: 11.5px; }
body.pantau-ui-v2 .bpjs-calendar-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
body.pantau-ui-v2 .bpjs-calendar-legend .today { background: var(--p-secondary); }
body.pantau-ui-v2 .bpjs-calendar-legend .scheduled { background: var(--p-warning); }
body.pantau-ui-v2 .bpjs-calendar-legend strong { margin-left: auto; color: var(--p-on-surface); }

/* ---- 24.15 MODULE RESPONSIVE ---- */
@media (max-width: 1120px) {
  body.pantau-ui-v2 .csti-kpi-grid,
  body.pantau-ui-v2 .complaint-kpi-grid,
  body.pantau-ui-v2 .survey-kpi-grid,
  body.pantau-ui-v2 .wtwl-summary-grid,
  body.pantau-ui-v2 .survey-aoi-summary,
  body.pantau-ui-v2 .user-summary,
  body.pantau-ui-v2 .lanuri-target-summary { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  body.pantau-ui-v2 .wtwl-hero,
  body.pantau-ui-v2 .complaint-hero,
  body.pantau-ui-v2 .survey-hero { flex-direction: column; align-items: flex-start; }
  body.pantau-ui-v2 .survey-score { text-align: left; }
}

@media (max-width: 600px) {
  body.pantau-ui-v2 .csti-kpi-grid,
  body.pantau-ui-v2 .complaint-kpi-grid,
  body.pantau-ui-v2 .survey-kpi-grid,
  body.pantau-ui-v2 .wtwl-summary-grid,
  body.pantau-ui-v2 .survey-aoi-summary,
  body.pantau-ui-v2 .user-summary,
  body.pantau-ui-v2 .lanuri-target-summary,
  body.pantau-ui-v2 .gemba-dash-kpis { grid-template-columns: 1fr; }
  body.pantau-ui-v2 .bpjs-calendar-grid { gap: 4px; }
  body.pantau-ui-v2 .bpjs-calendar-day { min-height: 56px; padding: 5px; }
  body.pantau-ui-v2 .reports-card { flex-wrap: wrap; }
  /* Di layar sempit tab dibungkus ke baris berikutnya, bukan digulir mendatar.
     Gulir mendatar menyembunyikan tab paling kanan tanpa penanda apa pun —
     kesimpulan yang sudah diambil lebih dulu untuk tab Pengaduan, dan berlaku
     sama untuk seluruh bilah tab. */
  body.pantau-ui-v2 .csti-tabs,
  body.pantau-ui-v2 .wa-tabs,
  body.pantau-ui-v2 .reference-tabs,
  body.pantau-ui-v2 .survey-module-tabs,
  body.pantau-ui-v2 .laporan-tab-bar,
  body.pantau-ui-v2 .user-management-tabs,
  body.pantau-ui-v2 .fourdx-tabs,
  body.pantau-ui-v2 .settings-tabs {
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
    flex-wrap: wrap;
    row-gap: 4px;
    border-radius: 22px;
  }
  /* Tema lama meregangkan tiap tab (flex: 1) sehingga tab yang sendirian di
     satu baris melar selebar layar dan terbaca seperti judul, bukan tab.
     Lebarnya dikembalikan mengikuti isi. */
  body.pantau-ui-v2 .csti-tabs button,
  body.pantau-ui-v2 .wa-tabs button,
  body.pantau-ui-v2 .reference-tabs button,
  body.pantau-ui-v2 .survey-module-tabs button,
  body.pantau-ui-v2 .laporan-tab-bar button,
  body.pantau-ui-v2 .user-management-tabs button,
  body.pantau-ui-v2 .fourdx-tabs button,
  body.pantau-ui-v2 .settings-tabs button { flex: 0 0 auto; padding: 8px 14px; }
}

/* =============================================================
   DASHBOARD AMBIENT MOTION — subtle, GPU-friendly (opacity/transform)
   Alive on entry, calm while monitoring.
   ============================================================= */
body.pantau-ui-v2 .p-command-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  background:
    radial-gradient(38% 46% at 12% 20%, rgba(255,255,255,0.24) 0%, transparent 70%),
    radial-gradient(30% 40% at 88% 30%, rgba(169,216,36,0.42) 0%, transparent 70%),
    radial-gradient(42% 52% at 78% 84%, rgba(11,133,132,0.44) 0%, transparent 70%);
  animation: p-v2-hero-drift 16s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes p-v2-hero-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.28; }
  50% { transform: translate3d(0, -11px, 0) scale(1.06); opacity: 0.32; }
}

/* KPI entrance sekali saat masuk Dashboard (tidak replay saat polling) */
body.pantau-ui-v2 .p-v2-dash-enter {
  animation: p-v2-dash-enter-anim 240ms cubic-bezier(0.2, 0, 0, 1) both;
}
body.pantau-ui-v2 .p-v2-kpi-enter > * {
  animation: p-v2-kpi-enter-anim 240ms cubic-bezier(0.2, 0, 0, 1) both;
}
body.pantau-ui-v2 .p-v2-kpi-enter > *:nth-child(1) { animation-delay: 0ms; }
body.pantau-ui-v2 .p-v2-kpi-enter > *:nth-child(2) { animation-delay: 50ms; }
body.pantau-ui-v2 .p-v2-kpi-enter > *:nth-child(3) { animation-delay: 100ms; }
body.pantau-ui-v2 .p-v2-kpi-enter > *:nth-child(4) { animation-delay: 150ms; }
@keyframes p-v2-dash-enter-anim {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes p-v2-kpi-enter-anim {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Card hover lift — desktop only */
@media (hover: hover) and (pointer: fine) {
  body.pantau-ui-v2 .generated-dashboard > .generated-card,
  body.pantau-ui-v2 .generated-dashboard > .generated-assistant {
    transition: transform var(--p-motion-fast), box-shadow var(--p-motion-fast), border-color var(--p-motion-fast);
  }
  body.pantau-ui-v2 .generated-dashboard > .generated-card:hover,
  body.pantau-ui-v2 .generated-dashboard > .generated-assistant:hover {
    transform: translateY(-3px);
    box-shadow: var(--p-elev-3);
  }
}

/* Scroll reveal (animate once, no replay on scroll up/down) */
body.pantau-ui-v2 .p-v2-reveal { opacity: 0; transform: translate3d(0, 8px, 0); }
body.pantau-ui-v2 .p-v2-reveal.p-v2-reveal-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 220ms cubic-bezier(0.2, 0, 0, 1), transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  body.pantau-ui-v2 .p-command-hero::after,
  body.pantau-ui-v2 .p-v2-dash-enter,
  body.pantau-ui-v2 .p-v2-kpi-enter > * {
    animation: none;
  }
  body.pantau-ui-v2 .p-v2-reveal { opacity: 1; transform: none; }
  body.pantau-ui-v2 .p-v2-reveal.p-v2-reveal-in { transition: none; }
  body.pantau-ui-v2 .fourdx-live-dot { animation: none; }
}

/* =============================================================
   25. 4DX COMMAND CENTER — tonal execution scoreboard (V2)
   ============================================================= */

/* ---- COMMAND CENTER HEADER: high-contrast text on navy hero ---- */
body.pantau-ui-v2 .fourdx-hero .fourdx-kicker { color: #d7f174; }
body.pantau-ui-v2 .fourdx-hero h1 { color: #ffffff; }
body.pantau-ui-v2 .fourdx-hero p { color: rgba(255,255,255,0.84); }
body.pantau-ui-v2 .fourdx-hero-score small { color: rgba(255,255,255,0.82); }
body.pantau-ui-v2 .fourdx-hero-score strong { color: #ffffff; }

/* ---- LIVE SCOREBOARD: navy focal surface, tonal metric cards ---- */
body.pantau-ui-v2 .fourdx-scoreboard {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(169,216,36,0.18) 0%, transparent 45%),
    linear-gradient(150deg, #073b59 0%, #0b5e8a 100%);
  color: #ffffff;
  border: 0;
  box-shadow: var(--p-elev-3);
}

/* Wipe the old white ring decoration so it doesn't clash on navy. */
body.pantau-ui-v2 .fourdx-scoreboard::after { opacity: 0; }

body.pantau-ui-v2 .fourdx-scoreboard-top { align-items: center; }
body.pantau-ui-v2 .fourdx-scoreboard-top > span { gap: 5px; }
body.pantau-ui-v2 .fourdx-scoreboard-top small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d7f174;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
body.pantau-ui-v2 .fourdx-scoreboard-top strong {
  color: rgba(255,255,255,0.94);
  font-size: 12.5px;
  font-weight: 620;
}
body.pantau-ui-v2 .fourdx-live-dot {
  width: 9px;
  height: 9px;
  background: #a9dd27;
  border: 2px solid rgba(255,255,255,0.45);
  box-shadow: 0 0 0 5px rgba(169,221,39,0.16), 0 0 12px rgba(169,221,39,0.55);
  animation: p-v2-fourdx-live 2.2s ease-in-out infinite;
}
@keyframes p-v2-fourdx-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

body.pantau-ui-v2 .fourdx-featured { grid-template-columns: 104px 1fr; gap: 16px; margin-top: 22px; }

/* Big readable progress ring on the navy surface */
body.pantau-ui-v2 .fourdx-scoreboard .fourdx-progress-ring {
  width: 108px;
  height: 108px;
  background: conic-gradient(#a9dd27 calc(var(--progress, 0) * 1%), rgba(255,255,255,0.14) 0);
}
body.pantau-ui-v2 .fourdx-scoreboard .fourdx-progress-ring::before {
  content: "";
  grid-area: 1 / 1;
  width: 84px;
  height: 84px;
  background: #073b59;
  border-radius: 50%;
}
body.pantau-ui-v2 .fourdx-scoreboard .fourdx-progress-ring span {
  grid-area: 1 / 1;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  width: 84px;
  height: 84px;
  background: transparent;
  text-align: center;
}
body.pantau-ui-v2 .fourdx-scoreboard .fourdx-progress-ring strong {
  color: #ffffff;
  font-size: 22px;
  font-weight: 760;
  font-family: var(--p-font-display);
  letter-spacing: -0.02em;
  line-height: 1;
  max-width: 80px;
  overflow: hidden;
  white-space: nowrap;
}
body.pantau-ui-v2 .fourdx-scoreboard .fourdx-progress-ring small {
  color: rgba(255,255,255,0.78);
  font-size: 10px;
  font-weight: 620;
}

body.pantau-ui-v2 .fourdx-featured-copy h2 {
  margin: 12px 0 8px;
  color: #ffffff;
  font-size: 22px;
  letter-spacing: -0.02em;
}
body.pantau-ui-v2 .fourdx-featured-copy p { color: rgba(255,255,255,0.82); font-size: 11px; }

/* CURRENT / TARGET / GAP focal band */
body.pantau-ui-v2 .fourdx-score-focal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 20px;
}
body.pantau-ui-v2 .fourdx-score-focal > span {
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
}
body.pantau-ui-v2 .fourdx-score-focal small { color: rgba(255,255,255,0.8); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
body.pantau-ui-v2 .fourdx-score-focal strong { color: #ffffff; font-size: 19px; font-weight: 720; font-family: var(--p-font-display); }
body.pantau-ui-v2 .fourdx-score-focal em { color: rgba(255,255,255,0.76); font-size: 10px; font-style: normal; font-weight: 620; }

/* Lag / Lead measure tonal cards */
body.pantau-ui-v2 .fourdx-score-pair { gap: 10px; margin-top: 14px; }
body.pantau-ui-v2 .fourdx-score-pair > span {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
}
body.pantau-ui-v2 .fourdx-score-pair > span:first-child {
  background: linear-gradient(135deg, rgba(11,133,132,0.95), rgba(7,58,90,0.88));
  border-color: rgba(127,212,200,0.28);
}
body.pantau-ui-v2 .fourdx-score-pair > span:last-child {
  background: linear-gradient(135deg, rgba(169,216,36,0.16), rgba(255,255,255,0.05));
  border-color: rgba(201,239,104,0.28);
}
body.pantau-ui-v2 .fourdx-score-pair small { color: #a9d9d2; font-size: 9.5px; font-weight: 720; letter-spacing: 0.05em; text-transform: uppercase; }
body.pantau-ui-v2 .fourdx-score-pair > span:last-child small { color: #d4f17a; }
body.pantau-ui-v2 .fourdx-score-pair strong { color: #ffffff; font-size: 22px; font-weight: 730; font-family: var(--p-font-display); }
body.pantau-ui-v2 .fourdx-score-pair em { color: rgba(255,255,255,0.82); font-size: 10px; font-style: normal; font-weight: 620; }
body.pantau-ui-v2 .fourdx-score-pair p { margin: 0; color: rgba(255,255,255,0.82); font-size: 10px; font-weight: 620; }

/* Progress track: bolder, rounded, readable */
body.pantau-ui-v2 .fourdx-scoreboard .fourdx-score-track {
  height: 10px;
  margin-top: 14px;
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
}
body.pantau-ui-v2 .fourdx-scoreboard .fourdx-score-track i {
  background: linear-gradient(90deg, #19b2a4, #a9dd27);
}

/* Komitmen terakhir — compact action/check-in strip */
body.pantau-ui-v2 .fourdx-next-commitment {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 13px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
}
body.pantau-ui-v2 .fourdx-next-commitment > svg { width: 16px; height: 16px; color: #b4e538; flex: 0 0 auto; }
body.pantau-ui-v2 .fourdx-next-commitment small { color: #a9d9d2; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
body.pantau-ui-v2 .fourdx-next-commitment strong { color: #ffffff; font-size: 11px; font-weight: 650; line-height: 1.45; }

/* scoreboard mini list */
body.pantau-ui-v2 .fourdx-scoreboard-list { margin-top: auto; padding-top: 16px; }
body.pantau-ui-v2 .fourdx-scoreboard-list > span { border-top: 1px solid rgba(255,255,255,0.14); }
body.pantau-ui-v2 .fourdx-scoreboard-list > span > b { color: #a9dd27; }
body.pantau-ui-v2 .fourdx-scoreboard-list strong { color: #ffffff; }
body.pantau-ui-v2 .fourdx-scoreboard-list small { color: rgba(255,255,255,0.74); }

body.pantau-ui-v2 .fourdx-empty-score h2 { color: #ffffff; }
body.pantau-ui-v2 .fourdx-empty-score p { color: rgba(255,255,255,0.82); }
body.pantau-ui-v2 .fourdx-empty-score svg { color: #a9dd27; }

/* ---- OUTPUT 4DX: portfolio WIG cards — tonal header accent, surface hierarchy ---- */
body.pantau-ui-v2 .fourdx-goal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  body.pantau-ui-v2 .fourdx-goal-grid { grid-template-columns: 1fr; }
}

body.pantau-ui-v2 .fourdx-goal-card {
  position: relative;
  background-color: var(--p-surface-container-lowest);
  background-image: linear-gradient(180deg, rgba(11,94,138,0.06) 0%, rgba(255,255,255,0) 34%);
  border: 1px solid rgba(196,206,211,0.5);
  border-radius: 18px;
  box-shadow: var(--p-elev-1);
}
body.pantau-ui-v2 .fourdx-goal-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--p-primary), var(--p-secondary), var(--p-tertiary));
}
body.pantau-ui-v2 .fourdx-goal-card-head { padding: 17px 17px 14px; }
body.pantau-ui-v2 .fourdx-goal-index {
  color: #ffffff;
  background: linear-gradient(145deg, #0b5e8a, #073a5a);
  border-radius: 11px;
}
body.pantau-ui-v2 .fourdx-goal-card-head h3 { margin: 8px 0 4px; color: #0b2f42; font-size: 15px; line-height: 1.4; }
body.pantau-ui-v2 .fourdx-goal-card-head p { color: #42525c; font-size: 10px; font-weight: 560; }

body.pantau-ui-v2 .fourdx-goal-progress { padding: 0 17px 14px; }
body.pantau-ui-v2 .fourdx-goal-progress > span strong { color: #0b2f42; font-size: 17px; font-weight: 700; }
body.pantau-ui-v2 .fourdx-goal-progress > span small { color: #42525c; font-size: 10px; }
body.pantau-ui-v2 .fourdx-goal-progress > b { color: #0b8584; font-size: 17px; font-weight: 740; }
body.pantau-ui-v2 .fourdx-goal-progress > div { height: 9px; background: #e2e8ea; border-radius: 999px; }
body.pantau-ui-v2 .fourdx-goal-progress > div i { background: linear-gradient(90deg, #0b8584, #a9d824); }

/* measures: tonal slate cells with high-contrast text */
body.pantau-ui-v2 .fourdx-measures > span {
  gap: 5px;
  padding: 13px 17px;
  background: var(--p-surface-container-low);
  border-color: #e2e8ea;
}
body.pantau-ui-v2 .fourdx-measures small { color: #42525c; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
body.pantau-ui-v2 .fourdx-measures strong { color: #0b2f42; font-size: 11px; line-height: 1.45; }
body.pantau-ui-v2 .fourdx-measures em { color: #4f6e00; font-size: 10px; font-weight: 720; }

/* latest check-in compact strip */
body.pantau-ui-v2 .fourdx-latest-checkin {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 17px;
  margin: 0 17px 12px;
  background: var(--p-secondary-container);
  border-radius: 11px;
}
body.pantau-ui-v2 .fourdx-latest-checkin > svg { width: 15px; height: 15px; color: var(--p-on-secondary-container); flex: 0 0 auto; }
body.pantau-ui-v2 .fourdx-latest-checkin span { min-width: 0; display: grid; gap: 2px; }
body.pantau-ui-v2 .fourdx-latest-checkin small { color: var(--p-on-secondary-container); opacity: 0.75; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
body.pantau-ui-v2 .fourdx-latest-checkin strong { overflow: hidden; color: var(--p-on-secondary-container); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
body.pantau-ui-v2 .fourdx-latest-checkin em { margin-left: auto; color: var(--p-on-secondary-container); opacity: 0.8; font-style: normal; font-size: 10px; font-weight: 620; white-space: nowrap; }

body.pantau-ui-v2 .fourdx-checkin summary { color: #0b5e8a; }
body.pantau-ui-v2 .fourdx-checkin summary svg { color: var(--p-secondary); }

/* =============================================================
   26. COMPLAINT INTELLIGENCE — Pengaduan tabs (V2)
   ============================================================= */

/* 8 tab tidak muat pada layar sempit. Sebelumnya baris tab menjadi area
   scroll horizontal sehingga tab paling kanan (Hotspot dan seterusnya)
   terpotong tanpa penanda. Sekarang tab dibungkus ke baris berikutnya agar
   seluruh tab selalu terlihat. */
body.pantau-ui-v2 .complaint-intel-tabs {
  /* fit-content, bukan 100%: dengan lebar penuh, bilah menyisakan ruang kosong
     lebar di kanan pada layar besar dan tab aktif terlempar jauh dari judul
     halaman. Pembungkusan baris tetap bekerja karena max-width dibatasi. */
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  row-gap: 6px;
  overflow: visible;
}
/* Penanda proses Insight AI pada tab Insight — terlihat dari tab mana pun. */
body.pantau-ui-v2 .complaint-intel-tabs button.is-busy { position: relative; }
body.pantau-ui-v2 .complaint-tab-busy-dot {
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--p-primary);
  animation: p-ai-tab-dot 1.2s ease-in-out infinite;
}
/* Tab aktif kini pil terisi warna primer, sehingga titik berwarna primer di
   atasnya akan hilang. Pada tab aktif titiknya dibalik menjadi warna teks. */
body.pantau-ui-v2 .complaint-intel-tabs button.active .complaint-tab-busy-dot { background: var(--p-on-primary); }
@keyframes p-ai-tab-dot {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

body.pantau-ui-v2 .complaint-intel-head { flex-wrap: wrap; gap: 12px; }
body.pantau-ui-v2 .complaint-last-update {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--p-radius-pill);
  background: var(--p-surface-container); border: 1px solid var(--p-outline-variant);
  color: var(--p-on-surface-variant); font-size: 12px; font-weight: 620;
}
body.pantau-ui-v2 .complaint-last-update svg { width: 14px; height: 14px; }

body.pantau-ui-v2 .complaint-filter-panel {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; margin: 0 0 16px;
  background: var(--p-surface-container-low); border: 1px solid var(--p-outline-variant);
  border-radius: var(--p-radius-md);
}
body.pantau-ui-v2 .complaint-filter-intro { display: flex; align-items: center; gap: 10px; min-width: 180px; }
body.pantau-ui-v2 .complaint-filter-intro > svg { width: 18px; height: 18px; color: var(--p-primary); flex: 0 0 auto; }
body.pantau-ui-v2 .complaint-filter-intro p { display: grid; gap: 1px; }
body.pantau-ui-v2 .complaint-filter-intro strong { font-size: 12.5px; color: var(--p-on-surface); }
body.pantau-ui-v2 .complaint-filter-intro small { font-size: 11px; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-filter-grid { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; flex: 1; }
body.pantau-ui-v2 .complaint-filter-grid label { display: grid; gap: 4px; }
body.pantau-ui-v2 .complaint-filter-grid label > span { font-size: 11px; font-weight: 620; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-filter-grid select { min-height: 36px; min-width: 130px; }
body.pantau-ui-v2 .complaint-filter-reset {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 8px 14px; border-radius: var(--p-radius-pill);
  background: transparent; border: 1px solid var(--p-outline-variant);
  color: var(--p-on-surface-variant); font: inherit; font-size: 12.5px; font-weight: 620; cursor: pointer;
}
body.pantau-ui-v2 .complaint-filter-reset:hover { background: var(--p-surface-container-high); }
body.pantau-ui-v2 .complaint-filter-reset svg { width: 14px; height: 14px; }

/* Complaint global context — shared by all eight tabs, outside Ringkasan body. */
body.pantau-ui-v2 .complaint-global-context {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 10px 0 12px; border-bottom: 1px solid var(--p-outline-variant); margin-bottom: 12px;
}
body.pantau-ui-v2 .complaint-global-context > label { display: grid; gap: 4px; }
body.pantau-ui-v2 .complaint-global-context > label > span { color: var(--p-on-surface-variant); font-size: 10.5px; font-weight: 650; }
body.pantau-ui-v2 .complaint-global-context select { min-height: 36px; }
body.pantau-ui-v2 .complaint-global-context #complaint-global-period { min-width: 165px; }
body.pantau-ui-v2 .complaint-global-context #complaint-global-unit { min-width: 280px; max-width: 340px; }
body.pantau-ui-v2 .complaint-global-type { display: inline-flex; align-items: center; gap: 4px; padding: 3px; background: var(--p-surface-container); border: 1px solid var(--p-outline-variant); border-radius: var(--p-radius-pill); }
body.pantau-ui-v2 .complaint-global-type button { min-height: 30px; padding: 5px 11px; border: 0; border-radius: var(--p-radius-pill); background: transparent; color: var(--p-on-surface-variant); font: inherit; font-size: 11.5px; font-weight: 650; cursor: pointer; }
body.pantau-ui-v2 .complaint-global-type button.active { background: var(--p-secondary-container); color: var(--p-on-secondary-container); box-shadow: var(--p-elev-1); }
body.pantau-ui-v2 .complaint-global-type button:focus-visible,
body.pantau-ui-v2 .complaint-global-context select:focus-visible { outline: 2px solid var(--p-primary); outline-offset: 2px; }

/* Early warning cards */
body.pantau-ui-v2 .complaint-ew-monthly {
  display: grid; grid-template-columns: minmax(220px, 1fr) auto auto minmax(260px, 1.2fr);
  align-items: center; gap: 14px; margin-bottom: 12px; padding: 16px;
  background: var(--p-surface-container-lowest); border: 1px solid var(--p-outline-variant);
  border-radius: var(--p-radius-md); box-shadow: var(--p-elev-1);
}
body.pantau-ui-v2 .complaint-ew-monthly-title h2 { margin: 2px 0; color: var(--p-on-surface); font-size: 18px; }
body.pantau-ui-v2 .complaint-ew-monthly-title p { margin: 0; color: var(--p-on-surface-variant); font-size: 11.5px; }
body.pantau-ui-v2 .complaint-ew-monthly-status,
body.pantau-ui-v2 .complaint-ew-monthly-total { display: grid; gap: 4px; min-width: 105px; }
body.pantau-ui-v2 .complaint-ew-monthly-status > small,
body.pantau-ui-v2 .complaint-ew-monthly-total > small { color: var(--p-on-surface-variant); font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
body.pantau-ui-v2 .complaint-ew-monthly-total b { color: var(--p-on-surface); font-size: 25px; }
body.pantau-ui-v2 .complaint-ew-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding-left: 14px; border-left: 1px solid var(--p-outline-variant); }
body.pantau-ui-v2 .complaint-ew-comparison p { display: grid; gap: 1px; margin: 0; }
body.pantau-ui-v2 .complaint-ew-comparison strong { color: var(--p-on-surface); font-size: 11.5px; }
body.pantau-ui-v2 .complaint-ew-comparison span { color: var(--p-on-surface-variant); font-size: 11px; }
body.pantau-ui-v2 .complaint-ew-comparison em { grid-column: 1 / -1; color: var(--p-primary); font-size: 11px; font-style: normal; font-weight: 650; }
body.pantau-ui-v2 .complaint-ew-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
body.pantau-ui-v2 .complaint-ew-summary span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--p-radius-pill); color: var(--p-on-surface-variant); background: var(--p-surface-container-low); font-size: 11px; font-weight: 650; }
body.pantau-ui-v2 .complaint-ew-summary span b { color: var(--p-on-surface); font-size: 14px; }
body.pantau-ui-v2 .complaint-ew-summary .critical { background: var(--p-error-container); color: var(--p-on-error-container); }
body.pantau-ui-v2 .complaint-ew-summary .high { background: #ffe0c2; color: #7a3d00; }
body.pantau-ui-v2 .complaint-ew-summary .watch { background: var(--p-warning-container); color: var(--p-on-warning-container); }
body.pantau-ui-v2 .complaint-ew-summary .normal { background: var(--p-success-container); color: var(--p-on-success-container); }
body.pantau-ui-v2 .complaint-empty-state,
body.pantau-ui-v2 .complaint-ew-normal-state,
body.pantau-ui-v2 .complaint-ew-error-state { display: grid; gap: 6px; min-height: 120px; place-content: center; text-align: center; }
body.pantau-ui-v2 .complaint-empty-state strong { color: var(--p-on-surface); font-size: 14.5px; font-weight: 720; }
body.pantau-ui-v2 .complaint-empty-state span { color: var(--p-on-surface-variant); font-size: 12.5px; line-height: 1.55; max-width: 48ch; }
body.pantau-ui-v2 .complaint-ew-normal-state strong { color: var(--p-success); font-size: 15px; }
body.pantau-ui-v2 .complaint-ew-error-state strong { color: var(--p-error); font-size: 15px; }
body.pantau-ui-v2 .complaint-ew-normal-state span,
body.pantau-ui-v2 .complaint-ew-error-state span { color: var(--p-on-surface-variant); font-size: 12.5px; }
body.pantau-ui-v2 .complaint-ew-error-state .btn { justify-self: center; margin-top: 4px; }
body.pantau-ui-v2 .complaint-ew-normal-list { margin-top: 12px; }
body.pantau-ui-v2 .complaint-ew-normal-list > summary { cursor: pointer; color: var(--p-on-surface-variant); font-size: 12px; font-weight: 650; }
body.pantau-ui-v2 .complaint-ew-normal-list > .complaint-ew-grid { margin-top: 10px; }
body.pantau-ui-v2 .complaint-ew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
/* Tiap kartu mewarisi satu warna aksen dari level risikonya, lalu rel kiri,
   angka skor, dan bar memakai warna itu. Kartu dengan skor sama pun tetap
   terbaca berbeda begitu levelnya berbeda. */
body.pantau-ui-v2 .complaint-ew-card {
  --ew-accent: var(--p-outline);
  --ew-accent-soft: var(--p-surface-container-high);
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 18px 18px 22px;
  overflow: hidden;
}
body.pantau-ui-v2 .complaint-ew-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--ew-accent);
}
body.pantau-ui-v2 .complaint-ew-card.level-critical { --ew-accent: var(--p-error); --ew-accent-soft: var(--p-error-container); }
body.pantau-ui-v2 .complaint-ew-card.level-high { --ew-accent: #d97706; --ew-accent-soft: #ffe0c2; }
body.pantau-ui-v2 .complaint-ew-card.level-watch { --ew-accent: var(--p-warning); --ew-accent-soft: var(--p-warning-container); }
body.pantau-ui-v2 .complaint-ew-card.level-normal { --ew-accent: var(--p-success); --ew-accent-soft: var(--p-success-container); }
/* Yang paling gawat dinaikkan sedikit bobotnya, bukan sekadar diberi warna. */
body.pantau-ui-v2 .complaint-ew-card.level-critical,
body.pantau-ui-v2 .complaint-ew-card.level-high { box-shadow: var(--p-elev-2); }
body.pantau-ui-v2 .complaint-ew-card.level-critical::before,
body.pantau-ui-v2 .complaint-ew-card.level-high::before { width: 6px; }
body.pantau-ui-v2 .complaint-ew-rank {
  display: inline-block; margin-bottom: 5px;
  padding: 2px 8px; border-radius: var(--p-radius-pill);
  background: var(--ew-accent-soft); color: var(--p-on-surface);
  font-size: 10px; font-weight: 720; letter-spacing: 0.05em; text-transform: uppercase;
}
body.pantau-ui-v2 .complaint-ew-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
body.pantau-ui-v2 .complaint-ew-head h3 { margin: 0; font-size: 15px; font-weight: 660; color: var(--p-on-surface); line-height: 1.3; }
body.pantau-ui-v2 .complaint-ew-head small { display: block; margin-top: 2px; color: var(--p-on-surface-variant); font-size: 11.5px; }
body.pantau-ui-v2 .complaint-level-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--p-radius-pill);
  font-size: 11px; font-weight: 720; letter-spacing: 0.03em; white-space: nowrap;
}
body.pantau-ui-v2 .complaint-level-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body.pantau-ui-v2 .complaint-level-badge.critical { background: var(--p-error-container); color: var(--p-on-error-container); }
body.pantau-ui-v2 .complaint-level-badge.high { background: #ffe0c2; color: #7a3d00; }
body.pantau-ui-v2 .complaint-level-badge.watch { background: var(--p-warning-container); color: var(--p-on-warning-container); }
body.pantau-ui-v2 .complaint-level-badge.normal { background: var(--p-success-container); color: var(--p-on-success-container); }

body.pantau-ui-v2 .complaint-ew-score { display: flex; align-items: center; gap: 12px; }
body.pantau-ui-v2 .complaint-ew-score > span { font-size: 26px; font-weight: 720; color: var(--ew-accent, var(--p-on-surface)); line-height: 1; }
body.pantau-ui-v2 .complaint-ew-score > span small { font-size: 12px; color: var(--p-on-surface-variant); font-weight: 620; }
body.pantau-ui-v2 .complaint-score-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--p-surface-container-high); overflow: hidden; }
body.pantau-ui-v2 .complaint-score-bar i { display: block; height: 100%; border-radius: 99px; }
body.pantau-ui-v2 .complaint-score-bar i.critical { background: var(--p-error); }
body.pantau-ui-v2 .complaint-score-bar i.high { background: #d97706; }
body.pantau-ui-v2 .complaint-score-bar i.watch { background: var(--p-warning); }
body.pantau-ui-v2 .complaint-score-bar i.normal { background: var(--p-success); }

body.pantau-ui-v2 .complaint-ew-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
body.pantau-ui-v2 .complaint-ew-metrics > div { display: grid; gap: 2px; padding: 8px 10px; background: var(--p-surface-container-low); border-radius: 10px; }
body.pantau-ui-v2 .complaint-ew-metrics small { font-size: 10px; color: var(--p-on-surface-variant); font-weight: 620; }
body.pantau-ui-v2 .complaint-ew-metrics b { font-size: 14px; color: var(--p-on-surface); font-weight: 680; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Metrik diwarnai oleh arah datanya: memburuk, membaik, berulang, atau aman.
   Ini yang memecah keseragaman antar kartu, bukan warna dekoratif. */
body.pantau-ui-v2 .ew-metric.is-current { background: var(--ew-accent-soft); }
body.pantau-ui-v2 .ew-metric.is-current small,
body.pantau-ui-v2 .ew-metric.is-current b { color: var(--p-on-surface); }
body.pantau-ui-v2 .ew-metric.is-up { background: var(--p-error-container); }
body.pantau-ui-v2 .ew-metric.is-up small,
body.pantau-ui-v2 .ew-metric.is-up b { color: var(--p-on-error-container); }
body.pantau-ui-v2 .ew-metric.is-new { background: #ffe0c2; }
body.pantau-ui-v2 .ew-metric.is-new small,
body.pantau-ui-v2 .ew-metric.is-new b { color: #7a3d00; }
body.pantau-ui-v2 .ew-metric.is-down { background: var(--p-success-container); }
body.pantau-ui-v2 .ew-metric.is-down small,
body.pantau-ui-v2 .ew-metric.is-down b { color: var(--p-on-success-container); }
body.pantau-ui-v2 .ew-metric.is-warn { background: var(--p-warning-container); }
body.pantau-ui-v2 .ew-metric.is-warn small,
body.pantau-ui-v2 .ew-metric.is-warn b { color: var(--p-on-warning-container); }
body.pantau-ui-v2 .ew-metric.is-clear b { color: var(--p-success); }
/* Nama faskes butuh satu baris penuh; dipaksa ke kolom sempit ia selalu
   berakhir sebagai ellipsis. */
body.pantau-ui-v2 .ew-metric.is-wide { grid-column: 1 / -1; }
body.pantau-ui-v2 .complaint-ew-actions { display: flex; gap: 8px; margin-top: auto; }
body.pantau-ui-v2 .complaint-ew-actions .btn { font-size: 12px; padding: 7px 12px; }
body.pantau-ui-v2 .complaint-ew-actions .btn svg { width: 14px; height: 14px; }

/* Hotspot table */
body.pantau-ui-v2 .complaint-table-wrap { overflow: auto; }
body.pantau-ui-v2 .complaint-table { border-spacing: 0; width: 100%; }
body.pantau-ui-v2 .complaint-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--p-surface-container);
  color: var(--p-on-surface-variant); font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 11px 12px; text-align: left; white-space: nowrap;
}
body.pantau-ui-v2 .complaint-table tbody td { padding: 11px 12px; border-bottom: 1px solid var(--p-outline-variant); font-size: 12.5px; color: var(--p-on-surface); vertical-align: middle; }
body.pantau-ui-v2 .complaint-table tbody tr:last-child td { border-bottom: 0; }
body.pantau-ui-v2 .complaint-table tbody tr:hover { background: var(--p-surface-container-low); }
body.pantau-ui-v2 .complaint-table td small { display: block; color: var(--p-on-surface-variant); font-size: 10.5px; }
body.pantau-ui-v2 .complaint-table td.muted { color: var(--p-on-surface-variant); font-size: 11.5px; }
body.pantau-ui-v2 .complaint-rank { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--p-surface-container-high); color: var(--p-on-surface-variant); font-size: 12px; font-weight: 700; }
body.pantau-ui-v2 .btn-sm { font-size: 11.5px; padding: 5px 10px; }
body.pantau-ui-v2 .btn-sm svg { width: 13px; height: 13px; }

/* SLA */
body.pantau-ui-v2 .complaint-sla-kpi { margin-bottom: 14px; }
body.pantau-ui-v2 .complaint-sla-list { display: flex; flex-direction: column; }
body.pantau-ui-v2 .complaint-sla-list > div { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--p-outline-variant); }
body.pantau-ui-v2 .complaint-sla-list > div:last-child { border-bottom: 0; }
body.pantau-ui-v2 .complaint-sla-list p { display: grid; gap: 1px; min-width: 0; }
body.pantau-ui-v2 .complaint-sla-list strong { font-size: 13px; color: var(--p-on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.pantau-ui-v2 .complaint-sla-list small { font-size: 10.5px; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-sla-split { display: flex; gap: 6px; }
body.pantau-ui-v2 .complaint-sla-split span { padding: 3px 8px; border-radius: var(--p-radius-pill); font-size: 10.5px; font-weight: 650; }
body.pantau-ui-v2 .complaint-sla-split .ok { background: var(--p-success-container); color: var(--p-on-success-container); }
body.pantau-ui-v2 .complaint-sla-split .warn { background: var(--p-error-container); color: var(--p-on-error-container); }
body.pantau-ui-v2 .complaint-sla-list > div > b { text-align: right; color: var(--p-on-surface); font-size: 13px; }
body.pantau-ui-v2 .complaint-sla-list > div > b small { display: block; font-size: 10px; color: var(--p-on-surface-variant); font-weight: 600; }

/* Bottleneck + recurring */
body.pantau-ui-v2 .complaint-bottleneck { display: flex; flex-direction: column; gap: 10px; }
body.pantau-ui-v2 .complaint-bottleneck > div { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 12px; }
body.pantau-ui-v2 .complaint-bottleneck p { display: grid; gap: 1px; }
body.pantau-ui-v2 .complaint-bottleneck strong { font-size: 13px; color: var(--p-on-surface); }
body.pantau-ui-v2 .complaint-bottleneck small { font-size: 10.5px; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-bottleneck > div > span { height: 8px; border-radius: 99px; background: var(--p-surface-container-high); overflow: hidden; }
body.pantau-ui-v2 .complaint-bottleneck > div > span i { display: block; height: 100%; background: var(--p-error); border-radius: 99px; }
body.pantau-ui-v2 .complaint-bottleneck > div > b { font-size: 13px; color: var(--p-on-surface); font-weight: 700; }
body.pantau-ui-v2 .complaint-recurring-list { display: flex; flex-direction: column; }
body.pantau-ui-v2 .complaint-recurring-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--p-outline-variant); }
body.pantau-ui-v2 .complaint-recurring-list > div:last-child { border-bottom: 0; }
body.pantau-ui-v2 .complaint-recurring-list p { display: grid; gap: 1px; min-width: 0; }
body.pantau-ui-v2 .complaint-recurring-list strong { font-size: 13px; color: var(--p-on-surface); }
body.pantau-ui-v2 .complaint-recurring-list small { font-size: 10.5px; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-recurring-list b { color: var(--p-on-surface); font-size: 14px; }
body.pantau-ui-v2 .complaint-recurring-list b small { font-size: 10px; color: var(--p-on-surface-variant); font-weight: 600; }

/* Insight */
body.pantau-ui-v2 .complaint-insight-list { display: flex; flex-direction: column; gap: 10px; }
body.pantau-ui-v2 .complaint-insight-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
body.pantau-ui-v2 .complaint-insight-num { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--p-primary-container); color: var(--p-on-primary-container); font-size: 12px; font-weight: 720; }
body.pantau-ui-v2 .complaint-insight-card p { margin: 0; font-size: 13.5px; color: var(--p-on-surface); line-height: 1.5; }

/* Insight AI */
body.pantau-ui-v2 .complaint-ai-insight {
  padding: 20px 20px 22px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(203, 243, 239, 0.5) 0%, rgba(203, 243, 239, 0) 58%),
    radial-gradient(100% 100% at 100% 0%, rgba(209, 232, 247, 0.62) 0%, rgba(209, 232, 247, 0) 62%),
    var(--p-surface-container-lowest);
}

/* Hero — dipakai saat belum ada hasil dan saat proses berjalan. */
body.pantau-ui-v2 .complaint-ai-insight-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding: 22px 8px 6px;
}
body.pantau-ui-v2 .complaint-ai-insight-hero h3 { margin: 0; font-size: 17px; font-weight: 760; letter-spacing: -0.01em; color: var(--p-on-surface); }
body.pantau-ui-v2 .complaint-ai-insight-hero p { margin: 0; max-width: 46ch; font-size: 13px; line-height: 1.6; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-ai-insight-hero p.is-error { color: var(--p-error); font-weight: 600; }
body.pantau-ui-v2 .complaint-ai-insight-hero .complaint-ai-insight-cta { margin-top: 6px; }

body.pantau-ui-v2 .complaint-ai-insight-orb {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--p-primary);
  background: radial-gradient(circle at 32% 26%, #ffffff 0%, var(--p-primary-container) 46%, var(--p-secondary-container) 100%);
  box-shadow: inset 0 0 0 1px rgba(11, 94, 138, 0.14), 0 8px 22px rgba(11, 94, 138, 0.16);
}
body.pantau-ui-v2 .complaint-ai-insight-orb svg { width: 26px; height: 26px; }
body.pantau-ui-v2 .complaint-ai-insight-orb.is-sm { width: 36px; height: 36px; box-shadow: inset 0 0 0 1px rgba(11, 94, 138, 0.14), 0 4px 12px rgba(11, 94, 138, 0.12); }
body.pantau-ui-v2 .complaint-ai-insight-orb.is-sm svg { width: 17px; height: 17px; }
body.pantau-ui-v2 .complaint-ai-insight-orb.is-pulsing { animation: p-ai-orb-pulse 1.8s ease-in-out infinite; }
@keyframes p-ai-orb-pulse {
  0%, 100% { transform: scale(1); box-shadow: inset 0 0 0 1px rgba(11, 94, 138, 0.14), 0 8px 22px rgba(11, 94, 138, 0.16); }
  50% { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(11, 94, 138, 0.2), 0 12px 30px rgba(11, 94, 138, 0.24); }
}

/* Tombol utama — CTA besar, satu-satunya aksi pada kartu. */
body.pantau-ui-v2 .complaint-ai-insight-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 30px;
  border: 0;
  border-radius: var(--p-radius-pill);
  background: linear-gradient(135deg, #0b5e8a 0%, #1180ab 52%, #12a394 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 720;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 94, 138, 0.26), 0 1px 2px rgba(11, 42, 58, 0.14);
  transition: transform 0.16s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
body.pantau-ui-v2 .complaint-ai-insight-cta svg { width: 19px; height: 19px; flex: 0 0 auto; }
body.pantau-ui-v2 .complaint-ai-insight-cta > span:not(.complaint-ai-insight-cta-sheen) { position: relative; z-index: 1; }
body.pantau-ui-v2 .complaint-ai-insight-cta-sheen {
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 55%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
}
body.pantau-ui-v2 .complaint-ai-insight-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(11, 94, 138, 0.32), 0 1px 2px rgba(11, 42, 58, 0.14);
}
body.pantau-ui-v2 .complaint-ai-insight-cta:hover .complaint-ai-insight-cta-sheen { animation: p-ai-cta-sheen 0.85s ease; }
@keyframes p-ai-cta-sheen {
  from { left: -60%; }
  to { left: 115%; }
}
body.pantau-ui-v2 .complaint-ai-insight-cta:active { transform: translateY(0) scale(0.985); }
body.pantau-ui-v2 .complaint-ai-insight-cta:focus-visible { outline: 3px solid var(--p-primary-dim); outline-offset: 3px; }
body.pantau-ui-v2 .complaint-ai-insight-cta:disabled {
  cursor: progress;
  opacity: 0.7;
  transform: none;
  box-shadow: var(--p-elev-1);
}

/* Header saat hasil sudah ada. */
body.pantau-ui-v2 .complaint-ai-insight-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
body.pantau-ui-v2 .complaint-ai-insight-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.pantau-ui-v2 .complaint-ai-insight-title > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.pantau-ui-v2 .complaint-ai-insight-title strong { font-size: 15.5px; font-weight: 760; letter-spacing: -0.01em; color: var(--p-on-surface); }
body.pantau-ui-v2 .complaint-ai-insight-title small { font-size: 11px; font-weight: 600; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-ai-insight-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--p-radius-xs);
  background: var(--p-error-container);
  color: var(--p-error);
  font-size: 12.5px;
  font-weight: 600;
}

/* Skeleton saat menunggu respons model. */
body.pantau-ui-v2 .complaint-ai-insight-skeleton { display: grid; gap: 10px; margin-top: 20px; }
body.pantau-ui-v2 .complaint-ai-insight-skeleton span {
  display: block;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--p-surface-container) 25%, var(--p-surface-container-high) 37%, var(--p-surface-container) 63%);
  background-size: 400% 100%;
  animation: p-ai-shimmer 1.5s ease infinite;
}
body.pantau-ui-v2 .complaint-ai-insight-skeleton span:nth-child(2) { width: 92%; }
body.pantau-ui-v2 .complaint-ai-insight-skeleton span:nth-child(3) { width: 78%; }
body.pantau-ui-v2 .complaint-ai-insight-skeleton span:nth-child(4) { width: 86%; }
@keyframes p-ai-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

/* Isi narasi markdown. */
body.pantau-ui-v2 .complaint-ai-insight-body { font-size: 13.5px; color: var(--p-on-surface); line-height: 1.65; }
body.pantau-ui-v2 .complaint-ai-insight-body > :first-child { margin-top: 0; }
body.pantau-ui-v2 .complaint-ai-insight-body h2,
body.pantau-ui-v2 .complaint-ai-insight-body h3,
body.pantau-ui-v2 .complaint-ai-insight-body h4 { font-size: 13.5px; font-weight: 740; margin: 16px 0 6px; color: var(--p-primary); letter-spacing: 0.01em; }
body.pantau-ui-v2 .complaint-ai-insight-body ul { margin: 6px 0; padding-left: 18px; }
body.pantau-ui-v2 .complaint-ai-insight-body li { margin: 4px 0; }
body.pantau-ui-v2 .complaint-ai-insight-body p { margin: 8px 0; }
body.pantau-ui-v2 .complaint-ai-insight-body strong { font-weight: 700; color: var(--p-on-surface); }
body.pantau-ui-v2 .complaint-ai-insight-body hr { border: 0; border-top: 1px solid var(--p-outline-variant); margin: 14px 0; }
body.pantau-ui-v2 .complaint-ai-insight-body .md-table-wrap { overflow-x: auto; margin: 10px 0; }

@media (max-width: 520px) {
  body.pantau-ui-v2 .complaint-ai-insight { padding: 16px 14px 18px; }
  body.pantau-ui-v2 .complaint-ai-insight-cta { width: 100%; min-height: 48px; padding: 0 20px; }
  body.pantau-ui-v2 .complaint-ai-insight-head { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  body.pantau-ui-v2 .complaint-ai-insight-orb.is-pulsing,
  body.pantau-ui-v2 .complaint-tab-busy-dot,
  body.pantau-ui-v2 .complaint-ai-insight-skeleton span { animation: none; }
  body.pantau-ui-v2 .complaint-ai-insight-cta:hover .complaint-ai-insight-cta-sheen { animation: none; }
  body.pantau-ui-v2 .complaint-ai-insight-cta { transition: none; }
  body.pantau-ui-v2 .complaint-ai-insight-cta:hover { transform: none; }
}

/* AoI */
body.pantau-ui-v2 .complaint-aoi-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
body.pantau-ui-v2 .complaint-aoi-head .generated-card-head { margin: 0; }
body.pantau-ui-v2 .complaint-aoi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px; }
body.pantau-ui-v2 .complaint-aoi-summary { margin-bottom: 14px; }
/* Aksen kartu AoI mengikuti tahap pengerjaannya, sejalan dengan pil status. */
body.pantau-ui-v2 .complaint-aoi-card {
  --aoi-accent: var(--p-outline);
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 24px 20px;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--aoi-accent) 9%, transparent) 0, transparent 120px),
    var(--p-surface, #fff);
  box-shadow: 0 1px 2px rgba(7, 60, 92, .05), 0 8px 24px rgba(7, 60, 92, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
body.pantau-ui-v2 .complaint-aoi-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(7, 60, 92, .06), 0 16px 36px rgba(7, 60, 92, .12); }
body.pantau-ui-v2 .complaint-aoi-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--aoi-accent);
}
@media (prefers-reduced-motion: reduce) { body.pantau-ui-v2 .complaint-aoi-card, body.pantau-ui-v2 .complaint-aoi-card:hover { transition: none; transform: none; } }
body.pantau-ui-v2 .complaint-aoi-card.status-open { --aoi-accent: var(--p-info, var(--p-primary)); }
body.pantau-ui-v2 .complaint-aoi-card.status-in_progress { --aoi-accent: var(--p-warning); }
body.pantau-ui-v2 .complaint-aoi-card.status-monitoring { --aoi-accent: var(--p-primary); }
body.pantau-ui-v2 .complaint-aoi-card.status-completed { --aoi-accent: var(--p-success); }
body.pantau-ui-v2 .complaint-aoi-card.status-cancelled { --aoi-accent: var(--p-outline-variant); opacity: .72; }
/* Stepper 4 tahap: OPEN, Dikerjakan, Monitoring, Selesai. */
body.pantau-ui-v2 .complaint-aoi-progress { display: grid; gap: 8px; }
body.pantau-ui-v2 .complaint-aoi-progress-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-aoi-progress-label b { color: var(--p-on-surface); font-weight: 700; }
body.pantau-ui-v2 .complaint-aoi-stepper { display: flex; gap: 6px; }
body.pantau-ui-v2 .complaint-aoi-stepper i { flex: 1; height: 8px; border-radius: 99px; background: var(--p-surface-container-high); }
body.pantau-ui-v2 .complaint-aoi-stepper i.done { background: var(--aoi-accent); }
body.pantau-ui-v2 .complaint-aoi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.pantau-ui-v2 .complaint-aoi-code { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 720; letter-spacing: 0.05em; color: var(--p-primary); }
body.pantau-ui-v2 .complaint-aoi-code svg { width: 15px; height: 15px; }
body.pantau-ui-v2 .complaint-aoi-status { padding: 5px 12px; border-radius: var(--p-radius-pill); font-size: 12px; font-weight: 700; }
body.pantau-ui-v2 .complaint-aoi-status.status-open { background: var(--p-info-container); color: var(--p-on-info-container); }
body.pantau-ui-v2 .complaint-aoi-status.status-in_progress { background: var(--p-warning-container); color: var(--p-on-warning-container); }
body.pantau-ui-v2 .complaint-aoi-status.status-monitoring { background: var(--p-primary-container); color: var(--p-on-primary-container); }
body.pantau-ui-v2 .complaint-aoi-status.status-completed { background: var(--p-success-container); color: var(--p-on-success-container); }
body.pantau-ui-v2 .complaint-aoi-status.status-cancelled { background: var(--p-surface-container-high); color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-aoi-card h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--p-on-surface); line-height: 1.3; }
body.pantau-ui-v2 .complaint-aoi-context { display: grid; gap: 8px; }
body.pantau-ui-v2 .complaint-aoi-issue { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-aoi-issue svg { width: 16px; height: 16px; margin-top: 2px; color: var(--p-warning); flex: 0 0 auto; }
body.pantau-ui-v2 .complaint-aoi-meta { display: inline-flex; align-items: center; align-self: flex-start; gap: 7px; margin: 0; padding: 5px 12px; border-radius: var(--p-radius-pill); font-size: 13px; font-weight: 600; color: var(--p-on-surface); background: var(--p-surface-container-low); }
body.pantau-ui-v2 .complaint-aoi-meta svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--p-primary); }
body.pantau-ui-v2 .complaint-aoi-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.pantau-ui-v2 .complaint-aoi-stats > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--p-surface-container-low); }
body.pantau-ui-v2 .complaint-aoi-stats small { font-size: 12px; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-aoi-stats b { font-size: 24px; line-height: 1.1; font-weight: 760; color: var(--p-on-surface); }
body.pantau-ui-v2 .complaint-aoi-stats em { font-style: normal; font-size: 12px; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-aoi-meta-row { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-aoi-meta-row span { display: inline-flex; align-items: center; gap: 6px; }
body.pantau-ui-v2 .complaint-aoi-meta-row .due-overdue { color: var(--p-error); font-weight: 680; }
body.pantau-ui-v2 .complaint-aoi-meta-row .due-due { color: #b45309; font-weight: 680; }
body.pantau-ui-v2 .complaint-aoi-meta-row .is-empty { font-style: italic; opacity: .75; }
body.pantau-ui-v2 .complaint-aoi-meta-row svg { width: 15px; height: 15px; }
body.pantau-ui-v2 .complaint-aoi-actions { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--p-outline-variant); display: flex; gap: 10px; }
body.pantau-ui-v2 .complaint-aoi-actions .btn { min-height: 40px; padding-inline: 18px; }

/* Detail dialog */
body.pantau-ui-v2 .complaint-detail-dialog { border: 0; padding: 0; max-width: 640px; width: calc(100% - 32px); border-radius: var(--p-radius-lg, 20px); background: var(--p-surface-bright); color: var(--p-on-surface); }
body.pantau-ui-v2 .complaint-detail-dialog::backdrop { background: rgba(20, 36, 46, 0.5); }
body.pantau-ui-v2 .complaint-detail-shell { display: flex; flex-direction: column; max-height: 86vh; }
body.pantau-ui-v2 .complaint-detail-shell > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--p-outline-variant); }
body.pantau-ui-v2 .complaint-detail-shell > header h2 { margin: 4px 0 2px; font-size: 17px; font-weight: 660; }
body.pantau-ui-v2 .complaint-detail-shell > header p { margin: 0; font-size: 12px; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-detail-shell > header button { background: transparent; border: 0; cursor: pointer; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-detail-shell > header button svg { width: 18px; height: 18px; }
body.pantau-ui-v2 .dialog-kicker { font-size: 10.5px; font-weight: 720; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-primary); }
body.pantau-ui-v2 .complaint-detail-body { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
body.pantau-ui-v2 .complaint-detail-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
body.pantau-ui-v2 .complaint-detail-kpis > div { display: grid; gap: 3px; padding: 10px 12px; background: var(--p-surface-container-low); border-radius: 10px; }
body.pantau-ui-v2 .complaint-detail-kpis small { font-size: 10px; color: var(--p-on-surface-variant); font-weight: 620; }
body.pantau-ui-v2 .complaint-detail-kpis b { font-size: 15px; color: var(--p-on-surface); font-weight: 680; }
body.pantau-ui-v2 .complaint-detail-kpis em { font-style: normal; font-size: 11px; color: var(--p-success); font-weight: 680; }
body.pantau-ui-v2 .complaint-detail-block h3, .complaint-detail-why h3, .complaint-detail-trend h3, .complaint-detail-issues h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-detail-block p, .complaint-detail-why p { margin: 0; font-size: 13px; color: var(--p-on-surface); line-height: 1.55; }
body.pantau-ui-v2 .complaint-detail-trend .complaint-trend-bars { display: flex; align-items: flex-end; gap: 4px; height: 90px; padding: 8px; background: var(--p-surface-container-low); border-radius: 10px; }
body.pantau-ui-v2 .complaint-trend-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
body.pantau-ui-v2 .complaint-trend-bars i { width: 70%; max-width: 34px; background: var(--p-primary); border-radius: 4px 4px 0 0; }
body.pantau-ui-v2 .complaint-trend-bars small { font-size: 9.5px; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-detail-issues > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--p-outline-variant); }
body.pantau-ui-v2 .complaint-detail-issues > div:last-child { border-bottom: 0; }
body.pantau-ui-v2 .complaint-detail-issues p { display: grid; gap: 1px; min-width: 0; }
body.pantau-ui-v2 .complaint-detail-issues strong { font-size: 12.5px; color: var(--p-on-surface); }
body.pantau-ui-v2 .complaint-detail-issues small { font-size: 10.5px; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-detail-issues span { font-size: 11px; color: var(--p-error); font-weight: 650; white-space: nowrap; }
body.pantau-ui-v2 .complaint-detail-shell > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--p-outline-variant); }
body.pantau-ui-v2 .complaint-detail-samples h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-sample { padding: 10px 12px; background: var(--p-surface-container-low); border-radius: 10px; margin-bottom: 6px; }
body.pantau-ui-v2 .complaint-sample:last-child { margin-bottom: 0; }
body.pantau-ui-v2 .complaint-sample p { margin: 0 0 4px; font-size: 13px; color: var(--p-on-surface); line-height: 1.5; }
body.pantau-ui-v2 .complaint-sample small { font-size: 10.5px; color: var(--p-on-surface-variant); }

body.pantau-ui-v2 .complaint-aoi-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.pantau-ui-v2 .complaint-aoi-form-grid label { display: grid; gap: 4px; }
body.pantau-ui-v2 .complaint-aoi-form-grid label.full { grid-column: 1 / -1; }
body.pantau-ui-v2 .complaint-aoi-form-grid label > span { font-size: 11px; font-weight: 620; color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .complaint-aoi-form-grid input, body.pantau-ui-v2 .complaint-aoi-form-grid select, body.pantau-ui-v2 .complaint-aoi-form-grid textarea {
  min-height: 38px; padding: 8px 10px; border: 1px solid var(--p-outline-variant); border-radius: 10px;
  background: var(--p-surface-bright); color: var(--p-on-surface); font: inherit; font-size: 13px;
}

@media (max-width: 920px) {
  body.pantau-ui-v2 .complaint-ew-monthly { grid-template-columns: 1fr 1fr; }
  body.pantau-ui-v2 .complaint-ew-comparison { grid-column: 1 / -1; padding-left: 0; padding-top: 10px; border-left: 0; border-top: 1px solid var(--p-outline-variant); }
}
@media (max-width: 720px) {
  body.pantau-ui-v2 .complaint-global-context { align-items: stretch; flex-direction: column; }
  body.pantau-ui-v2 .complaint-global-type { align-self: flex-start; max-width: 100%; overflow-x: auto; }
  body.pantau-ui-v2 .complaint-global-context #complaint-global-period,
  body.pantau-ui-v2 .complaint-global-context #complaint-global-unit { width: 100%; min-width: 0; max-width: none; }
  body.pantau-ui-v2 .complaint-aoi-form-grid { grid-template-columns: 1fr; }
  body.pantau-ui-v2 .complaint-ew-metrics { grid-template-columns: repeat(2, 1fr); }
  body.pantau-ui-v2 .complaint-ew-monthly { grid-template-columns: 1fr; }
  body.pantau-ui-v2 .complaint-ew-comparison { grid-column: auto; grid-template-columns: 1fr; }
  body.pantau-ui-v2 .complaint-ew-comparison em { grid-column: auto; }
}

/* ===========================================================================
   Analitik Fasilitas Kesehatan — namespace faskes-analytics-* saja.
   Tidak meng-override .card/.metric/.tabs/.dashboard/.filter agar modul lain
   (termasuk Pengaduan) tidak terpengaruh.
   =========================================================================== */
body.pantau-ui-v2 .faskes-analytics-google-state {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--p-radius-pill); font-size: 11px; font-weight: 650;
  background: var(--p-surface-container-low); color: var(--p-on-surface-variant);
}
body.pantau-ui-v2 .faskes-analytics-google-state.is-on { background: var(--p-success-container); color: var(--p-on-success-container); }
body.pantau-ui-v2 .faskes-analytics-google-state.is-off { background: var(--p-warning-container); color: var(--p-on-warning-container); }

body.pantau-ui-v2 .faskes-analytics-context {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 10px 0 12px; border-bottom: 1px solid var(--p-outline-variant); margin-bottom: 12px;
}
body.pantau-ui-v2 .faskes-analytics-context > label { display: grid; gap: 4px; }
body.pantau-ui-v2 .faskes-analytics-context > label > span { color: var(--p-on-surface-variant); font-size: 10.5px; font-weight: 650; }
body.pantau-ui-v2 .faskes-analytics-context select { min-height: 36px; min-width: 260px; }
body.pantau-ui-v2 .faskes-analytics-level {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px;
  background: var(--p-surface-container); border: 1px solid var(--p-outline-variant); border-radius: var(--p-radius-pill);
}
body.pantau-ui-v2 .faskes-analytics-level button {
  min-height: 30px; padding: 5px 14px; border: 0; border-radius: var(--p-radius-pill);
  background: transparent; color: var(--p-on-surface-variant); font: inherit; font-size: 11.5px; font-weight: 650; cursor: pointer;
}
body.pantau-ui-v2 .faskes-analytics-level button.active { background: var(--p-secondary-container); color: var(--p-on-secondary-container); box-shadow: var(--p-elev-1); }
body.pantau-ui-v2 .faskes-analytics-level button:focus-visible,
body.pantau-ui-v2 .faskes-analytics-context select:focus-visible { outline: 2px solid var(--p-primary); outline-offset: 2px; }

/* Kartu KPI berwarna solid, mengikuti pola yang sudah dipakai di menu lain
   (csti-kpi-grid, complaint-kpi-grid, wtwl-summary-grid, dst.): 3 kartu
   pertama berputar primary/secondary/tertiary-container, kartu bermakna
   status (Terhubung/Peringatan/Belum Terhubung) memakai warna semantiknya
   sendiri lewat is-good/is-warn/is-muted — dipakai bersama oleh Faskes dan
   Kantor lewat class .faskes-analytics-kpi yang sama. */
body.pantau-ui-v2 .faskes-analytics-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; margin-bottom: 12px; }
body.pantau-ui-v2 .faskes-analytics-kpi article {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--p-surface-container-high); color: var(--p-on-surface);
  border: 0; border-radius: var(--p-radius-md); box-shadow: var(--p-elev-1);
}
body.pantau-ui-v2 .faskes-analytics-kpi article:nth-child(1):not(.is-good):not(.is-warn):not(.is-muted) { background: var(--p-primary-container); color: var(--p-on-primary-container); }
body.pantau-ui-v2 .faskes-analytics-kpi article:nth-child(2):not(.is-good):not(.is-warn):not(.is-muted) { background: var(--p-secondary-container); color: var(--p-on-secondary-container); }
body.pantau-ui-v2 .faskes-analytics-kpi article:nth-child(3):not(.is-good):not(.is-warn):not(.is-muted) { background: var(--p-tertiary-container); color: var(--p-on-tertiary-container); }
body.pantau-ui-v2 .faskes-analytics-kpi article.is-good { background: var(--p-success-container); color: var(--p-on-success-container); }
body.pantau-ui-v2 .faskes-analytics-kpi article.is-warn { background: var(--p-warning-container); color: var(--p-on-warning-container); }
body.pantau-ui-v2 .faskes-analytics-kpi article.is-muted { background: var(--p-surface-container-high); color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .faskes-analytics-kpi article > span {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; background: rgba(255, 255, 255, 0.5); color: inherit;
}
body.pantau-ui-v2 .faskes-analytics-kpi article p { display: grid; gap: 2px; margin: 0; min-width: 0; }
body.pantau-ui-v2 .faskes-analytics-kpi small { color: inherit; opacity: .82; font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; }
body.pantau-ui-v2 .faskes-analytics-kpi strong { color: inherit; font-size: 22px; font-weight: 720; line-height: 1.1; }
body.pantau-ui-v2 .faskes-analytics-kpi em { color: inherit; opacity: .85; font-size: 10.5px; font-style: normal; font-weight: 620; }

body.pantau-ui-v2 .faskes-analytics-card { padding: 0; overflow: hidden; }
body.pantau-ui-v2 .faskes-analytics-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.pantau-ui-v2 .faskes-analytics-toolbar input[type="search"] { min-height: 34px; min-width: 210px; }
body.pantau-ui-v2 .faskes-analytics-table-wrap { overflow-x: auto; }
body.pantau-ui-v2 .faskes-analytics-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
body.pantau-ui-v2 .faskes-analytics-table th {
  position: sticky; top: 0; padding: 9px 12px; text-align: left; white-space: nowrap;
  background: var(--p-surface-container); color: var(--p-on-surface-variant);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
body.pantau-ui-v2 .faskes-analytics-table td { padding: 9px 12px; border-top: 1px solid var(--p-outline-variant); color: var(--p-on-surface); vertical-align: middle; }
body.pantau-ui-v2 .faskes-analytics-table td small { display: block; color: var(--p-on-surface-variant); font-size: 10.5px; }
body.pantau-ui-v2 .faskes-analytics-table tbody tr:hover { background: var(--p-surface-container-low); }
body.pantau-ui-v2 .faskes-analytics-source { margin: 0; padding: 10px 15px; border-top: 1px solid var(--p-outline-variant); color: var(--p-on-surface-variant); font-size: 11px; }

body.pantau-ui-v2 .faskes-analytics-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--p-radius-pill); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
body.pantau-ui-v2 .faskes-analytics-badge.critical { background: var(--p-error-container); color: var(--p-on-error-container); }
body.pantau-ui-v2 .faskes-analytics-badge.high { background: #ffe0c2; color: #7a3d00; }
body.pantau-ui-v2 .faskes-analytics-badge.watch { background: var(--p-warning-container); color: var(--p-on-warning-container); }
body.pantau-ui-v2 .faskes-analytics-badge.normal { background: var(--p-success-container); color: var(--p-on-success-container); }
body.pantau-ui-v2 .faskes-analytics-badge.unmapped { background: var(--p-surface-container-high); color: var(--p-on-surface-variant); }

body.pantau-ui-v2 .faskes-analytics-notice {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 12px 14px;
  background: var(--p-warning-container); color: var(--p-on-warning-container);
  border-radius: var(--p-radius-md); font-size: 11.5px;
}
body.pantau-ui-v2 .faskes-analytics-notice p { display: grid; gap: 2px; margin: 0; }
body.pantau-ui-v2 .faskes-analytics-notice code { padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .08); font-size: 10.5px; }

body.pantau-ui-v2 .faskes-analytics-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
body.pantau-ui-v2 .faskes-analytics-summary span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--p-radius-pill); background: var(--p-surface-container-low); color: var(--p-on-surface-variant); font-size: 11px; font-weight: 650; }
body.pantau-ui-v2 .faskes-analytics-summary span b { font-size: 14px; }
body.pantau-ui-v2 .faskes-analytics-summary .critical { background: var(--p-error-container); color: var(--p-on-error-container); }
body.pantau-ui-v2 .faskes-analytics-summary .high { background: #ffe0c2; color: #7a3d00; }
body.pantau-ui-v2 .faskes-analytics-summary .watch { background: var(--p-warning-container); color: var(--p-on-warning-container); }
body.pantau-ui-v2 .faskes-analytics-summary .normal { background: var(--p-success-container); color: var(--p-on-success-container); }

body.pantau-ui-v2 .faskes-analytics-warning-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
body.pantau-ui-v2 .faskes-analytics-warning-card { display: grid; gap: 10px; padding: 15px; }
body.pantau-ui-v2 .faskes-analytics-warning-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
body.pantau-ui-v2 .faskes-analytics-warning-head h3 { margin: 0; color: var(--p-on-surface); font-size: 14px; }
body.pantau-ui-v2 .faskes-analytics-warning-head small { color: var(--p-on-surface-variant); font-size: 11px; }
body.pantau-ui-v2 .faskes-analytics-warning-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }
body.pantau-ui-v2 .faskes-analytics-warning-metrics > div { display: grid; gap: 1px; }
body.pantau-ui-v2 .faskes-analytics-warning-metrics small { color: var(--p-on-surface-variant); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; }
body.pantau-ui-v2 .faskes-analytics-warning-metrics b { color: var(--p-on-surface); font-size: 12.5px; }
body.pantau-ui-v2 .faskes-analytics-warning-reason { margin: 0; color: var(--p-on-surface-variant); font-size: 11px; }
body.pantau-ui-v2 .faskes-analytics-warning-actions { display: flex; gap: 8px; }

body.pantau-ui-v2 .faskes-analytics-insight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; }
body.pantau-ui-v2 .faskes-analytics-insight-card { display: grid; gap: 3px; align-content: start; padding: 15px; }
body.pantau-ui-v2 .faskes-analytics-insight-card > small { color: var(--p-on-surface-variant); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
body.pantau-ui-v2 .faskes-analytics-insight-card > strong { color: var(--p-on-surface); font-size: 14.5px; }
body.pantau-ui-v2 .faskes-analytics-insight-card > em { color: var(--p-on-surface-variant); font-size: 11px; font-style: normal; }
body.pantau-ui-v2 .faskes-analytics-insight-card > b { margin-top: 4px; color: var(--p-primary); font-size: 13px; }
body.pantau-ui-v2 .faskes-analytics-insight-list { display: grid; gap: 3px; margin: 6px 0 0; padding-left: 16px; color: var(--p-on-surface); font-size: 11px; }
body.pantau-ui-v2 .faskes-analytics-insight-list small { color: var(--p-on-surface-variant); }
body.pantau-ui-v2 .faskes-analytics-empty-inline { margin: 0; color: var(--p-on-surface-variant); font-size: 11.5px; }

/* Dialog: bentuk shell sendiri (header/body scrollable) — mengikuti pola
   .complaint-detail-dialog agar konsisten dengan modul lain, bukan bergantung
   pada class .generated-dialog yang sebenarnya tidak pernah ada style-nya. */
body.pantau-ui-v2 .faskes-analytics-dialog {
  border: 0; padding: 0; max-width: 780px; width: min(94vw, 780px);
  border-radius: var(--p-radius-lg, 20px); background: var(--p-surface-bright); color: var(--p-on-surface);
}
body.pantau-ui-v2 .faskes-analytics-dialog::backdrop { background: rgba(20, 36, 46, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
body.pantau-ui-v2 .faskes-analytics-dialog-shell { display: flex; flex-direction: column; max-height: 86vh; }
body.pantau-ui-v2 .faskes-analytics-dialog-shell > header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--p-outline-variant);
}
body.pantau-ui-v2 .faskes-analytics-dialog-shell > header h2 { margin: 4px 0 3px; color: var(--p-on-surface); font-size: 18px; font-weight: 660; }
body.pantau-ui-v2 .faskes-analytics-dialog-shell > header p { margin: 0; color: var(--p-on-surface-variant); font-size: 12px; }
body.pantau-ui-v2 .faskes-analytics-dialog-close {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 999px; background: var(--p-surface-container-low); color: var(--p-on-surface-variant); cursor: pointer;
}
body.pantau-ui-v2 .faskes-analytics-dialog-close:hover { background: var(--p-surface-container-high); }
body.pantau-ui-v2 .faskes-analytics-dialog-close svg { width: 16px; height: 16px; }
body.pantau-ui-v2 .faskes-analytics-dialog-body { padding: 20px 24px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; }

body.pantau-ui-v2 .faskes-analytics-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
body.pantau-ui-v2 .faskes-analytics-detail-grid > div { display: grid; gap: 4px; padding: 11px 13px; background: var(--p-surface-container-low); border-radius: var(--p-radius-md, 12px); }
body.pantau-ui-v2 .faskes-analytics-detail-grid small { color: var(--p-on-surface-variant); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
body.pantau-ui-v2 .faskes-analytics-detail-grid b { color: var(--p-on-surface); font-size: 13px; font-weight: 660; }

body.pantau-ui-v2 .faskes-analytics-detail-block { padding-top: 18px; border-top: 1px solid var(--p-outline-variant); }
body.pantau-ui-v2 .faskes-analytics-detail-block:first-child { padding-top: 0; border-top: 0; }
body.pantau-ui-v2 .faskes-analytics-detail-block h3 { margin: 0 0 12px; color: var(--p-on-surface-variant); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
body.pantau-ui-v2 .faskes-analytics-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

body.pantau-ui-v2 .faskes-analytics-spark {
  display: flex; align-items: flex-end; gap: 3px; height: 72px; margin-bottom: 12px;
  padding: 10px; background: var(--p-surface-container-low); border-radius: var(--p-radius-md, 12px);
}
body.pantau-ui-v2 .faskes-analytics-spark > div { flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; }
body.pantau-ui-v2 .faskes-analytics-spark i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--p-primary); }

body.pantau-ui-v2 .faskes-analytics-mapped {
  display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 10px 13px;
  background: var(--p-success-container); color: var(--p-on-success-container); border-radius: var(--p-radius-md, 12px); font-size: 12px;
}
body.pantau-ui-v2 .faskes-analytics-mapped a { color: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
body.pantau-ui-v2 .faskes-analytics-empty-inline { margin: 0 0 4px; padding: 10px 13px; background: var(--p-surface-container-low); border-radius: var(--p-radius-md, 12px); color: var(--p-on-surface-variant); font-size: 12px; }

body.pantau-ui-v2 .faskes-analytics-candidates { display: grid; gap: 10px; margin-top: 14px; }
body.pantau-ui-v2 .faskes-analytics-candidates article {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px;
  background: var(--p-surface-container-low); border: 1px solid var(--p-outline-variant); border-radius: var(--p-radius-md, 12px);
}
body.pantau-ui-v2 .faskes-analytics-candidates div { display: grid; gap: 3px; min-width: 0; }
body.pantau-ui-v2 .faskes-analytics-candidates strong { color: var(--p-on-surface); font-size: 13px; }
body.pantau-ui-v2 .faskes-analytics-candidates small { color: var(--p-on-surface-variant); font-size: 11px; }
body.pantau-ui-v2 .faskes-analytics-candidates em { color: var(--p-primary); font-size: 11px; font-style: normal; font-weight: 650; }

body.pantau-ui-v2 .faskes-analytics-field { display: grid; gap: 6px; margin-bottom: 14px; }
body.pantau-ui-v2 .faskes-analytics-field > span { color: var(--p-on-surface-variant); font-size: 11px; font-weight: 650; }
body.pantau-ui-v2 .faskes-analytics-field input {
  min-height: 38px; padding: 8px 12px; border: 1px solid var(--p-outline-variant); border-radius: var(--p-radius-md, 10px);
  background: var(--p-surface-bright); color: var(--p-on-surface); font: inherit; font-size: 13px;
}
body.pantau-ui-v2 .faskes-analytics-import-result dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin: 4px 0 0; }
body.pantau-ui-v2 .faskes-analytics-import-result dl > div { display: grid; gap: 3px; padding: 10px 12px; background: var(--p-surface-container-low); border-radius: var(--p-radius-md, 10px); }
body.pantau-ui-v2 .faskes-analytics-import-result dt { color: var(--p-on-surface-variant); font-size: 10px; font-weight: 650; text-transform: uppercase; }
body.pantau-ui-v2 .faskes-analytics-import-result dd { margin: 0; color: var(--p-on-surface); font-size: 16px; font-weight: 700; }

@media (max-width: 720px) {
  body.pantau-ui-v2 .faskes-analytics-context { align-items: stretch; }
  body.pantau-ui-v2 .faskes-analytics-context > label,
  body.pantau-ui-v2 .faskes-analytics-context select { width: 100%; min-width: 0; }
  body.pantau-ui-v2 .faskes-analytics-level { width: 100%; justify-content: space-between; }
  body.pantau-ui-v2 .faskes-analytics-level button { flex: 1 1 0; }
  body.pantau-ui-v2 .faskes-analytics-toolbar { width: 100%; }
  body.pantau-ui-v2 .faskes-analytics-toolbar input[type="search"] { flex: 1 1 100%; min-width: 0; }
  body.pantau-ui-v2 .faskes-analytics-warning-grid,
  body.pantau-ui-v2 .faskes-analytics-insight-grid { grid-template-columns: 1fr; }
  body.pantau-ui-v2 .faskes-analytics-dialog { width: calc(100% - 24px); }
  body.pantau-ui-v2 .faskes-analytics-dialog-shell > header,
  body.pantau-ui-v2 .faskes-analytics-dialog-body { padding-left: 16px; padding-right: 16px; }
  body.pantau-ui-v2 .faskes-analytics-candidates article { flex-direction: column; align-items: stretch; }
}

/* ===========================================================================
   Google Rating Kantor — namespace office-ratings-* saja (di atas namespace
   faskes-analytics-* yang dipakai ulang untuk struktur dialog/tabel/badge).
   Tidak meng-override .card/.metric/.tabs/.dashboard/.filter.
   =========================================================================== */
body.pantau-ui-v2 .office-ratings-scope-badge,
body.pantau-ui-v2 .faskes-analytics-scope-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  background: var(--p-secondary-container); color: var(--p-on-secondary-container);
  border-radius: var(--p-radius-pill); font-size: 12px; font-weight: 650;
}
body.pantau-ui-v2 .office-ratings-scope-badge b,
body.pantau-ui-v2 .faskes-analytics-scope-badge b { font-weight: 700; }

body.pantau-ui-v2 .office-ratings-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
/* Warna kartu Kantor sepenuhnya diwarisi dari .faskes-analytics-kpi article
   (nth-child rotasi + is-good/is-warn/is-muted) — sama seperti kartu Faskes,
   supaya kedua modul konsisten. Tidak ada override tambahan di sini. */

/* .faskes-analytics-card default padding:0 cocok buat kartu berisi tabel
   (Faskes), tapi kartu Pengaturan berisi form/teks biasa — kalau dibiarkan
   0 kontennya nempel ke tepi kartu (border jadi kelihatan "gak rapi").
   Override di sini beri padding lagi KHUSUS untuk kartu Pengaturan, dan
   tabel di dalamnya (kartu terakhir) tetap bleed edge-to-edge lewat margin
   negatif supaya scroll horizontal tabel tetap penuh sampai tepi kartu. */
body.pantau-ui-v2 .faskes-analytics-settings-card {
  margin-bottom: 14px; padding: 18px 20px 20px;
}
body.pantau-ui-v2 .faskes-analytics-settings-card .generated-card-head {
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--p-outline-variant);
}
body.pantau-ui-v2 .faskes-analytics-settings-card .faskes-analytics-table-wrap {
  margin: 0 -20px -20px; border-top: 1px solid var(--p-outline-variant);
}
body.pantau-ui-v2 .faskes-analytics-settings-card .faskes-analytics-table-wrap table { border-radius: 0; }
body.pantau-ui-v2 .faskes-analytics-key-note { margin: 0 0 14px; color: var(--p-on-surface-variant); font-size: 12px; line-height: 1.5; }
body.pantau-ui-v2 .faskes-analytics-key-note b { color: var(--p-on-surface); font-weight: 650; }
body.pantau-ui-v2 .faskes-analytics-key-form { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
body.pantau-ui-v2 .faskes-analytics-key-form .faskes-analytics-field { flex: 1 1 260px; margin-bottom: 0; }
body.pantau-ui-v2 .faskes-analytics-key-form .faskes-analytics-field input { min-height: 38px; padding: 8px 12px; border: 1px solid var(--p-outline-variant); border-radius: var(--p-radius-md, 10px); background: var(--p-surface-bright); color: var(--p-on-surface); font: inherit; font-size: 13px; width: 100%; }
body.pantau-ui-v2 .faskes-analytics-key-form .faskes-analytics-detail-actions { margin-top: 0; }
body.pantau-ui-v2 .faskes-analytics-settings-block { display: block; }
body.pantau-ui-v2 .faskes-analytics-settings-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 16px;
}
body.pantau-ui-v2 .faskes-analytics-settings-form .faskes-analytics-detail-actions { grid-column: 1 / -1; margin-top: 4px; }

@media (max-width: 720px) {
  body.pantau-ui-v2 .office-ratings-context { align-items: stretch; }
  body.pantau-ui-v2 .office-ratings-scope-badge { width: 100%; justify-content: center; }
  body.pantau-ui-v2 .faskes-analytics-key-form { align-items: stretch; }
  body.pantau-ui-v2 .faskes-analytics-key-form .faskes-analytics-detail-actions { width: 100%; }
}

/* =============================================================
   CROSS-MODULE INTELLIGENCE (Analitik)
   Data-dense, institusional, memakai token M3 yang sama dengan
   modul analitik lain. Tidak memperkenalkan palet baru.
   ============================================================= */
body.pantau-ui-v2 .cmi-context {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 12px 14px;
  background: var(--p-surface-container-lowest);
  border: 1px solid var(--p-outline-variant);
  border-radius: var(--p-radius-lg);
}
body.pantau-ui-v2 .cmi-context label { display: grid; gap: 4px; min-width: 190px; }
body.pantau-ui-v2 .cmi-context label > span { color: var(--p-on-surface-variant); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body.pantau-ui-v2 .cmi-context select {
  padding: 8px 10px; background: var(--p-surface-container-low); color: var(--p-on-surface);
  border: 1px solid var(--p-outline-variant); border-radius: var(--p-radius-sm); font: inherit; font-size: 12.5px;
}
body.pantau-ui-v2 .cmi-level { display: inline-flex; gap: 4px; padding: 3px; background: var(--p-surface-container-low); border-radius: var(--p-radius-pill); }
body.pantau-ui-v2 .cmi-level button {
  padding: 6px 14px; background: transparent; color: var(--p-on-surface-variant);
  border: 0; border-radius: var(--p-radius-pill); cursor: pointer; font: inherit; font-size: 12px; font-weight: 650;
  transition: background var(--p-motion-fast), color var(--p-motion-fast);
}
body.pantau-ui-v2 .cmi-level button.active { background: var(--p-secondary-container); color: var(--p-on-secondary-container); }

body.pantau-ui-v2 .cmi-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
body.pantau-ui-v2 .cmi-kpi article {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px;
  background: var(--p-surface-container-lowest); border: 1px solid var(--p-outline-variant);
  border-radius: var(--p-radius-lg);
}
body.pantau-ui-v2 .cmi-kpi article > span {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px;
  background: var(--p-surface-container-low); color: var(--p-on-surface-variant); border-radius: var(--p-radius-md);
}
body.pantau-ui-v2 .cmi-kpi article > span svg { width: 17px; height: 17px; }
body.pantau-ui-v2 .cmi-kpi p { display: grid; gap: 1px; margin: 0; min-width: 0; }
body.pantau-ui-v2 .cmi-kpi small { color: var(--p-on-surface-variant); font-size: 10.5px; font-weight: 650; }
body.pantau-ui-v2 .cmi-kpi strong { color: var(--p-on-surface); font-size: 20px; font-weight: 700; line-height: 1.1; }
body.pantau-ui-v2 .cmi-kpi em { color: var(--p-on-surface-variant); font-style: normal; font-size: 10.5px; }
body.pantau-ui-v2 .cmi-kpi .is-critical > span { background: var(--p-error-container); color: var(--p-on-error-container); }
body.pantau-ui-v2 .cmi-kpi .is-high > span { background: #ffe0c2; color: #7a3d00; }
body.pantau-ui-v2 .cmi-kpi .is-watch > span { background: var(--p-warning-container); color: var(--p-on-warning-container); }
body.pantau-ui-v2 .cmi-kpi .is-muted > span { background: var(--p-surface-container-high); color: var(--p-on-surface-variant); }

body.pantau-ui-v2 .cmi-coverage {
  margin-bottom: 14px; padding: 13px 15px;
  background: var(--p-surface-container-lowest); border: 1px solid var(--p-outline-variant);
  border-radius: var(--p-radius-lg);
}
body.pantau-ui-v2 .cmi-coverage-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
body.pantau-ui-v2 .cmi-coverage-head h3 { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--p-on-surface); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body.pantau-ui-v2 .cmi-coverage-head h3 svg { width: 15px; height: 15px; }
body.pantau-ui-v2 .cmi-coverage-head small { color: var(--p-on-surface-variant); font-size: 10.5px; }
body.pantau-ui-v2 .cmi-coverage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
body.pantau-ui-v2 .cmi-coverage-grid > div { display: grid; gap: 2px; padding: 9px 12px; background: var(--p-surface-container-low); border-radius: var(--p-radius-md); }
body.pantau-ui-v2 .cmi-coverage-grid small { color: var(--p-on-surface-variant); font-size: 10.5px; font-weight: 650; }
body.pantau-ui-v2 .cmi-coverage-grid b { color: var(--p-on-surface); font-size: 17px; font-weight: 700; }
body.pantau-ui-v2 .cmi-coverage-notes:not(:empty) { margin-top: 10px; display: grid; gap: 6px; }
body.pantau-ui-v2 .cmi-note {
  margin: 0; padding: 9px 12px; background: var(--p-surface-container-low);
  color: var(--p-on-surface-variant); border-left: 3px solid var(--p-outline);
  border-radius: var(--p-radius-sm); font-size: 11.5px; line-height: 1.5;
}
body.pantau-ui-v2 .cmi-confirmation-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
body.pantau-ui-v2 .cmi-confirmation-summary span {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  background: var(--p-surface-container-low); color: var(--p-on-surface-variant);
  border-radius: var(--p-radius-pill); font-size: 11px; font-weight: 650;
}
body.pantau-ui-v2 .cmi-confirmation-summary b { font-size: 13px; }
body.pantau-ui-v2 .cmi-confirmation-summary .confirmed { background: var(--p-secondary-container); color: var(--p-on-secondary-container); }

body.pantau-ui-v2 .cmi-section { margin-bottom: 16px; }
body.pantau-ui-v2 .cmi-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
body.pantau-ui-v2 .cmi-section-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--p-on-surface); font-size: 15px; font-weight: 700; }
body.pantau-ui-v2 .cmi-section-head h2 svg { width: 17px; height: 17px; color: var(--p-secondary); }
body.pantau-ui-v2 .cmi-section-head small { color: var(--p-on-surface-variant); font-size: 11px; }
body.pantau-ui-v2 .cmi-signal-filters { display: flex; gap: 8px; }
body.pantau-ui-v2 .cmi-signal-filters select {
  padding: 6px 10px; background: var(--p-surface-container-low); color: var(--p-on-surface);
  border: 1px solid var(--p-outline-variant); border-radius: var(--p-radius-sm); font: inherit; font-size: 12px;
}

body.pantau-ui-v2 .cmi-badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--p-radius-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
body.pantau-ui-v2 .cmi-badge.critical { background: var(--p-error-container); color: var(--p-on-error-container); }
body.pantau-ui-v2 .cmi-badge.high { background: #ffe0c2; color: #7a3d00; }
body.pantau-ui-v2 .cmi-badge.watch { background: var(--p-warning-container); color: var(--p-on-warning-container); }
body.pantau-ui-v2 .cmi-badge.normal { background: var(--p-success-container); color: var(--p-on-success-container); }
body.pantau-ui-v2 .cmi-confirm {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--p-radius-pill);
  background: var(--p-surface-container-high); color: var(--p-on-surface-variant);
  font-size: 10px; font-weight: 650; white-space: nowrap;
}
body.pantau-ui-v2 .cmi-confirm.confirmed { background: var(--p-secondary-container); color: var(--p-on-secondary-container); }

body.pantau-ui-v2 .cmi-watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 11px; }
body.pantau-ui-v2 .cmi-watch-card {
  display: grid; gap: 8px; padding: 14px;
  background: var(--p-surface-container-lowest); border: 1px solid var(--p-outline-variant);
  border-left: 3px solid var(--p-outline); border-radius: var(--p-radius-lg);
  animation: p-v2-cmi-in 200ms ease both;
  transition: box-shadow var(--p-motion-fast);
}
body.pantau-ui-v2 .cmi-watch-card:hover { box-shadow: var(--p-elev-1); }
body.pantau-ui-v2 .cmi-watch-card.critical { border-left-color: var(--p-error); }
body.pantau-ui-v2 .cmi-watch-card.high { border-left-color: #d97706; }
body.pantau-ui-v2 .cmi-watch-card.watch { border-left-color: var(--p-warning); }
body.pantau-ui-v2 .cmi-watch-card > header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.pantau-ui-v2 .cmi-watch-card h3 { margin: 0; color: var(--p-on-surface); font-size: 14px; font-weight: 700; line-height: 1.25; }
body.pantau-ui-v2 .cmi-watch-meta { margin: 0; color: var(--p-on-surface-variant); font-size: 11px; }
body.pantau-ui-v2 .cmi-watch-count { margin: 0; color: var(--p-secondary); font-size: 11px; font-weight: 650; }
body.pantau-ui-v2 .cmi-watch-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body.pantau-ui-v2 .cmi-watch-metrics > div { display: grid; gap: 1px; padding: 7px 10px; background: var(--p-surface-container-low); border-radius: var(--p-radius-sm); min-width: 0; }
body.pantau-ui-v2 .cmi-watch-metrics small { color: var(--p-on-surface-variant); font-size: 10px; font-weight: 650; }
body.pantau-ui-v2 .cmi-watch-metrics b { color: var(--p-on-surface); font-size: 12px; font-weight: 680; overflow-wrap: anywhere; }
body.pantau-ui-v2 .cmi-watch-card > footer { display: flex; justify-content: flex-end; }

body.pantau-ui-v2 .cmi-table-wrap { overflow-x: auto; background: var(--p-surface-container-lowest); border: 1px solid var(--p-outline-variant); border-radius: var(--p-radius-lg); }
body.pantau-ui-v2 .cmi-table { width: 100%; border-collapse: collapse; font-size: 12px; }
body.pantau-ui-v2 .cmi-table th {
  padding: 10px 12px; background: var(--p-surface-container-low); color: var(--p-on-surface-variant);
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
body.pantau-ui-v2 .cmi-table td { padding: 10px 12px; border-top: 1px solid var(--p-outline-variant); color: var(--p-on-surface); vertical-align: middle; }
body.pantau-ui-v2 .cmi-table td strong { display: block; font-size: 12px; font-weight: 650; }
body.pantau-ui-v2 .cmi-table td small { color: var(--p-on-surface-variant); font-size: 10.5px; }
body.pantau-ui-v2 .cmi-table tbody tr:hover { background: var(--p-surface-container-low); }

body.pantau-ui-v2 .cmi-dialog { width: min(760px, 94vw); max-height: 90vh; padding: 0; border: 0; border-radius: var(--p-radius-xl); background: var(--p-surface-container-lowest); }
body.pantau-ui-v2 .cmi-dialog-shell { display: flex; flex-direction: column; max-height: 90vh; }
body.pantau-ui-v2 .cmi-dialog-shell > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--p-outline-variant); }
body.pantau-ui-v2 .cmi-dialog-shell > header h2 { margin: 3px 0 2px; color: var(--p-on-surface); font-size: 17px; }
body.pantau-ui-v2 .cmi-dialog-shell > header p { margin: 0; color: var(--p-on-surface-variant); font-size: 11.5px; }
body.pantau-ui-v2 .cmi-dialog-shell > header button { background: transparent; border: 0; color: var(--p-on-surface-variant); cursor: pointer; }
body.pantau-ui-v2 .cmi-dialog-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; overflow-y: auto; }
body.pantau-ui-v2 .cmi-dialog-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.pantau-ui-v2 .cmi-dialog-status small { color: var(--p-on-surface-variant); font-size: 11px; }
body.pantau-ui-v2 .cmi-dialog-block h3 { margin: 0 0 7px; color: var(--p-on-surface-variant); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body.pantau-ui-v2 .cmi-dialog-block p { margin: 0; color: var(--p-on-surface); font-size: 12.5px; line-height: 1.55; }
body.pantau-ui-v2 .cmi-reason-list { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: var(--p-on-surface); font-size: 12.5px; line-height: 1.5; }
body.pantau-ui-v2 .cmi-reason-list.muted { color: var(--p-on-surface-variant); font-size: 11.5px; }
body.pantau-ui-v2 .cmi-evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px; }
body.pantau-ui-v2 .cmi-evidence > div { display: grid; gap: 2px; padding: 8px 11px; background: var(--p-surface-container-low); border-radius: var(--p-radius-sm); }
body.pantau-ui-v2 .cmi-evidence small { color: var(--p-on-surface-variant); font-size: 10px; font-weight: 650; }
body.pantau-ui-v2 .cmi-evidence b { color: var(--p-on-surface); font-size: 12.5px; font-weight: 680; overflow-wrap: anywhere; }
body.pantau-ui-v2 .cmi-signal-list { display: grid; gap: 7px; }
body.pantau-ui-v2 .cmi-signal-item { padding: 9px 12px; background: var(--p-surface-container-low); border-radius: var(--p-radius-md); }
body.pantau-ui-v2 .cmi-signal-item p { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 2px; }
body.pantau-ui-v2 .cmi-signal-item strong { color: var(--p-on-surface); font-size: 12px; font-weight: 680; }
body.pantau-ui-v2 .cmi-signal-item small { display: block; color: var(--p-on-surface); font-size: 11.5px; line-height: 1.5; }
body.pantau-ui-v2 .cmi-signal-item em { display: block; margin-top: 3px; color: var(--p-on-surface-variant); font-style: normal; font-size: 10.5px; }
body.pantau-ui-v2 .cmi-timeline { display: flex; align-items: flex-end; gap: 4px; height: 88px; padding: 8px; background: var(--p-surface-container-low); border-radius: var(--p-radius-md); }
body.pantau-ui-v2 .cmi-timeline > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
body.pantau-ui-v2 .cmi-timeline i { width: 70%; max-width: 32px; background: var(--p-primary); border-radius: 4px 4px 0 0; }
body.pantau-ui-v2 .cmi-timeline small { color: var(--p-on-surface-variant); font-size: 9.5px; }
body.pantau-ui-v2 .cmi-dialog-shell > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--p-outline-variant); }

@keyframes p-v2-cmi-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.pantau-ui-v2 .cmi-watch-card { animation: none; transition: none; }
  body.pantau-ui-v2 .cmi-level button { transition: none; }
}

@media (max-width: 900px) {
  body.pantau-ui-v2 .cmi-context { align-items: stretch; }
  body.pantau-ui-v2 .cmi-context label { min-width: 0; flex: 1 1 100%; }
  body.pantau-ui-v2 .cmi-section-head { align-items: flex-start; flex-direction: column; }
  body.pantau-ui-v2 .cmi-watch-metrics { grid-template-columns: 1fr; }
}

/* Sub-menu Pengaturan CSTI. Mewarisi seluruh gaya .csti-tabs; yang diubah
   hanya ukurannya, supaya hierarkinya terbaca: baris ini anak dari tab di
   atasnya, bukan saudaranya. */
body.pantau-ui-v2 .csti-tabs.csti-subtabs {
  /* Jarak ke bilah tab di atasnya: -18px membatalkan margin-bawah bilah itu,
     sehingga yang tersisa hanya gap 16px milik grid halaman. Tanpa ini
     jaraknya menumpuk jadi 42px dan kedua bilah terbaca seperti dua bagian
     halaman yang tidak berhubungan. */
  margin: -18px 0 18px;
  gap: 4px;
}
body.pantau-ui-v2 .csti-tabs.csti-subtabs button {
  font-size: 12px;
  padding: 7px 12px;
}

/* Tombol simpan selalu terlihat, di luar kartu mana pun: pengaturan yang
   diubah di satu sub-menu ikut tersimpan walau sub-menu lain sedang dibuka. */
body.pantau-ui-v2 .csti-settings-simpan {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
body.pantau-ui-v2 .csti-settings-simpan small {
  opacity: .7;
}