:root {
  --bg: #fff6ef;
  --bg2: #ffe9dc;
  --sidebar: #fff1e8;
  --panel: rgba(255,255,255,.92);
  --panel2: #fff8f3;
  --line: rgba(104, 64, 45, .14);
  --line2: rgba(219, 128, 91, .28);
  --text: #2d211b;
  --muted: #7c6458;
  --peach: #f4a786;
  --peach2: #e8835d;
  --coral: #ef6f5e;
  --red: #d84545;
  --orange: #dd8a2f;
  --green: #2f9b68;
  --blue: #3b82c4;
  --yellow: #b88918;
  --shadow: 0 24px 70px rgba(145, 84, 54, .16);
}

* { box-sizing: border-box; }

/* the `hidden` attribute must beat .btn's explicit `display` (equal
   specificity → author rule would otherwise win and leave it visible).
   Scoped to buttons that opt in with the attribute — not a global rule. */
button[hidden], a.btn[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 12% 0%, rgba(244,167,134,.38), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(255,214,190,.65), transparent 26%),
    linear-gradient(135deg, #fff8f3 0%, #ffeade 42%, #fff6ef 100%);
  color: var(--text);
}

body {
  min-width: 1180px;
  overflow-x: auto;
}

.app-shell {
  display: grid;
  grid-template-columns: 286px minmax(894px, 1fr);
  min-height: 100vh;
}

/* LEFT NAV */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background:
    linear-gradient(180deg, rgba(255,246,240,.98), rgba(255,232,219,.98)),
    var(--sidebar);
  border-right: 1px solid var(--line);
  padding: 26px 18px;
  overflow-y: auto;
}

.brand {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 28px;
  padding: 12px;
  border: 1px solid rgba(219,128,91,.24);
  border-radius: 20px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 12px 32px rgba(145,84,54,.08);
}

.brand-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    linear-gradient(135deg, #f7b08e, #e87558),
    #e8835d;
  color: white;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 14px 34px rgba(232,117,88,.25);
}

.brand h1 {
  margin: 0;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.02em;
  color: #2d211b;
}

.brand p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}

nav {
  display: grid;
  gap: 8px;
}

nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #5f4a40;
  text-decoration: none;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 650;
}

nav a:hover,
nav a.active {
  background: linear-gradient(90deg, rgba(244,167,134,.30), rgba(255,255,255,.55));
  border-color: rgba(232,117,88,.30);
  color: #2d211b;
}

.nav-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 11px;
  opacity: .8;
}

.nav-icon svg,
.nav-icon .rn-ic {
  width: 18px;
  height: 18px;
}

nav a.active .nav-icon,
nav a:hover .nav-icon {
  opacity: 1;
}

/* MAIN */
.main {
  padding: 26px 30px 34px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 20px;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--coral);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 850;
}

h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: #251914;
}

h3 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -.02em;
  color: #2d211b;
}

h4 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #2d211b;
}

.subtitle {
  color: var(--muted);
  max-width: 920px;
  line-height: 1.52;
  margin: 8px 0 0;
  font-size: 14px;
}

.status-pill {
  white-space: nowrap;
  padding: 11px 15px;
  border-radius: 999px;
  background: rgba(47,155,104,.10);
  border: 1px solid rgba(47,155,104,.22);
  color: #226d4a;
  font-size: 13px;
  font-weight: 750;
}

/* KPI */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 18px;
}

.kpi-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  column-gap: 12px;
  min-height: 128px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,243,.88));
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 20px 50px rgba(145,84,54,.11);
}

/* inline "Ubah" on the Jiwa Dilayani KPI (operator only, posko-logistik) */
.rn-kpi-edit {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}

/* KPI tile that opens a drill-down */
.rn-kpi-clickable { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.rn-kpi-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(145,84,54,.18);
}
#urgentNeedsBody a { color: var(--peach2); font-weight: 700; }
#urgentNeedsBody .rn-needs-hidden td { background: rgba(255,248,243,.7); font-size: 12px; }

/* cross-posko KPI drill (posko-logistik openLogistikDrill) */
.rn-drill-group { border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; overflow: hidden; }
.rn-drill-group.is-closed { opacity: .82; }
.rn-drill-group-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 9px 12px; background: rgba(255,248,243,.9); font-size: 13px;
}
.rn-drill-group-body { padding: 6px 8px; display: grid; gap: 6px; }
.rn-drill-item, a.rn-drill-item {
  display: block; padding: 8px 10px; border-radius: 9px;
  background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit;
}
a.rn-drill-item.is-link:hover { border-color: var(--peach2); background: #fff8f3; }
.rn-drill-item-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.rn-drill-go { color: var(--peach2); font-weight: 800; }
.rn-drill-locked { margin: 4px 6px; font-size: 12px; color: #8a5a45; }

/* icon chip sits beside the title on row 1 (mock-up composition), not
   stacked above it — a bare 12%-opacity chip on a near-white card was
   effectively invisible, so the default (non-status) chip also gets a
   stronger tint here. */
.kpi-icon {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(230,95,60,.16);
  color: #c9502f;
}

.kpi-icon svg,
.kpi-icon .rn-ic {
  width: 22px;
  height: 22px;
}

.kpi-card:not(:has(.kpi-icon))::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(230,95,60,.16);
}

.kpi-card > span:not(.kpi-icon) {
  grid-column: 2;
  grid-row: 1;
}

.kpi-card span,
.kpi-card small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  /* long slash-lists / IDs in a caption ("bayi/anak/lansia/bumil/disabilitas")
     must wrap, not set the card's min-content width and push a multi-column
     KPI grid wider than a phone viewport. */
  overflow-wrap: anywhere;
}

.kpi-card strong {
  grid-column: 1 / -1;
  display: block;
  margin: 10px 0 8px;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.05em;
  color: #2d211b;
}

.kpi-card small {
  grid-column: 1 / -1;
}

.kpi-card.danger {
  border-color: rgba(216,69,69,.25);
  background: linear-gradient(180deg, rgba(255,236,232,.94), rgba(255,250,246,.90));
}

.kpi-card.danger::before { background: rgba(216,69,69,.16); }
.kpi-card.danger strong { color: #c23a3a; }
.kpi-card.danger .kpi-icon { background: rgba(216,69,69,.16); color: #c23a3a; }

.kpi-card.warning {
  border-color: rgba(221,138,47,.28);
  background: linear-gradient(180deg, rgba(255,241,218,.94), rgba(255,250,246,.90));
}

.kpi-card.warning::before { background: rgba(221,138,47,.18); }
.kpi-card.warning strong { color: #b0741f; }
.kpi-card.warning .kpi-icon { background: rgba(221,138,47,.18); color: #b0741f; }

.kpi-card.good {
  border-color: rgba(63,143,101,.25);
  background: linear-gradient(180deg, rgba(232,247,238,.94), rgba(255,250,246,.90));
}

.kpi-card.good::before { background: rgba(63,143,101,.16); }
.kpi-card.good strong { color: #2f8a5c; }
.kpi-card.good .kpi-icon { background: rgba(63,143,101,.16); color: #2f8a5c; }

/* RN TABLE (used for critical-needs style panels) */
.rn-table-wrap {
  overflow-x: auto;
}

.rn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.rn-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.rn-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(104,64,45,.08);
  vertical-align: top;
}

.rn-table tbody tr:last-child td {
  border-bottom: 0;
}

.rn-table .gap-value {
  font-weight: 800;
  color: #c23a3a;
}

.rn-table .gap-value.ok {
  color: #2f8a5c;
}

/* DASHBOARD LAYOUT */
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 18px;
  align-items: start;
}

/* Grid items default to min-width:auto, so a wide child (a table with many
   columns, a long unbroken string) can force the track — and the whole page
   — wider than the viewport even though the table's own .rn-table-wrap has
   overflow-x:auto. min-width:0 lets the track shrink to the grid's own
   width so that inner scroll actually contains the overflow. Applies to
   every *-row*/*-grid* content-grid variant across all mockup-alignment
   pages, not just .content-grid itself. */
.content-grid > *,
.kpi-grid > * {
  min-width: 0;
}

/* `.content-grid`'s own `display:grid` otherwise wins over the `[hidden]`
   attribute (author CSS beats the UA default regardless of order/
   specificity), so a <section class="content-grid" hidden> meant to be
   gated behind login/ownership rendered anyway — real instances found on
   koordinasi-organisasi.html (a guest saw the full org-hierarchy/AI-key
   admin console) and verifikator.html (guest saw the verifier inbox). */
.content-grid[hidden] {
  display: none;
}

/* Named divider between unrelated groups stacked on one page (e.g. the
   Setting page's Ganti Password / Reset Password / Backup & Restore / AI
   Setting blocks) — a lighter rule than a full new .panel, just enough to
   read as separate sections instead of one long undifferentiated list. */
.rn-settings-group {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.rn-settings-group:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.rn-settings-group[hidden] {
  display: none;
}

.rn-settings-group-title {
  margin: 0 0 16px;
}

.rn-settings-group-title h2 {
  font-size: 21px;
  margin: 0 0 4px;
}

.rn-settings-group-title p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,248,243,.94));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.panel.large {
  min-height: 640px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}

.panel-header p {
  color: var(--muted);
  margin: 4px 0 0;
  font-size: 13px;
}

.search {
  width: 320px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.88);
  color: var(--text);
  outline: none;
}

/* EVENT TREE */
.event-list {
  display: grid;
  gap: 14px;
}

.event-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  padding: 16px;
}

.event-card.selected {
  border-color: rgba(232,117,88,.36);
  background:
    linear-gradient(180deg, rgba(255,232,219,.78), rgba(255,255,255,.78));
}

.rn-rollup-card {
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}

.rn-rollup-card:hover {
  border-color: rgba(232,117,88,.3);
}

.rn-rollup-hint {
  color: var(--coral, #c9502f);
  font-weight: 700;
}

.rn-dup-dismissed {
  opacity: .55;
}

/* Brief flash on a panel after a KPI card jump-scrolls to it. */
.rn-kpi-jump-highlight {
  animation: rn-kpi-jump-flash 1.6s ease;
}

@keyframes rn-kpi-jump-flash {
  0%, 100% { box-shadow: var(--shadow); border-color: var(--line); }
  15% { box-shadow: 0 0 0 3px rgba(232,117,88,.35), var(--shadow); border-color: rgba(232,117,88,.55); }
}

.event-main {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.event-main p,
.event-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 29px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
}

.chip.danger {
  color: #a92f2f;
  border-color: rgba(216,69,69,.28);
  background: rgba(255,235,232,.90);
}

.chip.warning {
  color: #995f14;
  border-color: rgba(221,138,47,.28);
  background: rgba(255,241,218,.90);
}

.chip.neutral {
  color: #59483f;
}

/* Shared posko verification-level badge (rn-verif-badge.js) */
.rn-vbadge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.6;
  border: 1px solid var(--line2, rgba(120,80,60,.22)); color: var(--muted, #7a6a60);
  background: rgba(255,255,255,.7); white-space: nowrap;
}
.rn-vbadge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.rn-vbadge-n {
  margin-left: 2px; padding: 0 5px; border-radius: 999px;
  background: currentColor; color: #fff; font-size: 10px;
}
.rn-vbadge--self { color: #8a7d74; }
.rn-vbadge--warn { color: #a92f2f; border-color: rgba(216,69,69,.3); background: rgba(255,235,232,.85); }
.rn-vbadge--pend { color: #995f14; border-color: rgba(221,138,47,.32); background: rgba(255,241,218,.85); }
.rn-vbadge--comm { color: #2c6fb0; border-color: rgba(59,130,196,.35); background: rgba(232,242,252,.85); }
.rn-vbadge--org  { color: #1c7f6b; border-color: rgba(28,127,107,.32); background: rgba(226,246,241,.85); }
.rn-vbadge--off  { color: #1f8a4c; border-color: rgba(47,155,104,.36); background: rgba(228,247,236,.9); }
.rn-vf-ends { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.rn-vf-end { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-size: 13px; background: var(--panel2, #fff); }
.rn-vf-end .rn-muted { font-size: 12px; margin-top: 3px; }

.tree {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,248,243,.82);
  border: 1px solid rgba(104,64,45,.10);
}

.tree-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.tree-row span,
.tree-child {
  color: var(--muted);
}

.tree-child {
  padding: 5px 0 5px 22px;
  font-size: 14px;
}

/* SUMMARY */
.summary {
  position: sticky;
  top: 22px;
}

.summary-status {
  margin: 14px 0;
  padding: 12px;
  border-radius: 16px;
  text-align: center;
  font-weight: 900;
  letter-spacing: .12em;
}

.summary-status.danger {
  background: rgba(255,235,232,.95);
  color: #a92f2f;
  border: 1px solid rgba(216,69,69,.30);
}

.summary-list {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.summary-list span {
  color: var(--muted);
}

.issue-list {
  color: #4c3a31;
  line-height: 1.55;
  padding-left: 22px;
  font-size: 14px;
}

.button-stack {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.btn {
  display: block;
  text-align: center;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: #3b2a22;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.80);
  font-weight: 800;
}

.btn.primary {
  color: white;
  background: linear-gradient(135deg, #f3a17f, #e66f57);
  border-color: rgba(232,117,88,.45);
  box-shadow: 0 14px 30px rgba(232,117,88,.20);
}

.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

/* IMAGE PAGES */
.image-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.image-board .panel {
  min-height: 360px;
}

.design-img {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--line);
  margin-top: 14px;
  background: #fff8f3;
}

.text-danger { color: var(--red); }
.text-warning { color: var(--orange); }
.text-muted { color: var(--yellow); }

/* Welcome landing page */
body.home-page {
  min-width: 0;
  overflow-x: hidden;
}

.welcome-shell {
  width: min(1480px, calc(100% - 56px));
  margin: 32px auto;
  border: 1px solid rgba(232,117,88,.24);
  border-radius: 24px;
  background: rgba(255,255,255,.64);
  box-shadow: 0 28px 90px rgba(145,84,54,.18);
  overflow: hidden;
}

.welcome-nav {
  min-height: 78px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 18px 42px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.70);
}

.welcome-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--coral);
  text-decoration: none;
  font-size: 20px;
}

.welcome-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff714f, #ef4f3d);
  color: white;
  font-weight: 900;
}

.welcome-links {
  display: flex;
  justify-content: center;
  gap: 22px;
}

.welcome-links a {
  min-height: auto;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: #40312b;
}

.welcome-actions,
.welcome-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.welcome-actions .btn,
.welcome-cta .btn {
  min-width: 92px;
}

.welcome-hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: 36px;
  padding: 64px 56px 34px;
}

.welcome-copy h1 {
  margin: 0;
  font-size: 70px;
  line-height: .95;
  letter-spacing: -.06em;
  color: #ef523d;
}

.welcome-lead {
  margin: 16px 0 0;
  font-size: 18px;
  font-weight: 800;
  color: #241916;
}

.welcome-cta {
  margin-top: 28px;
}

.welcome-cta.secondary {
  margin-top: 14px;
}

.welcome-cta .help {
  color: #2f7c55;
  border-color: rgba(47,155,104,.28);
}

.welcome-visual {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(244,167,134,.18), transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.82), transparent 48%);
}

.welcome-visual img {
  width: min(100%, 660px);
  display: block;
  border-radius: 28px;
  filter: drop-shadow(0 28px 42px rgba(145,84,54,.18));
}

.welcome-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 800;
  color: #40312b;
  box-shadow: 0 14px 30px rgba(145,84,54,.16);
  white-space: nowrap;
}

.welcome-badge i {
  font-style: normal;
  display: inline-flex;
  width: 15px;
  height: 15px;
  color: #2f8b61;
}
.welcome-badge i svg, .welcome-badge i .rn-ic { width: 15px; height: 15px; }

.welcome-badge.badge-top {
  top: 8%;
  right: 6%;
}

.welcome-badge.badge-left {
  bottom: 22%;
  left: -4%;
}

.welcome-badge.badge-right {
  bottom: 6%;
  right: 2%;
}

@media (max-width: 900px) {
  .welcome-badge {
    display: none;
  }
}

.welcome-kpis {
  margin: 0 56px 30px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 42px rgba(145,84,54,.10);
  overflow: hidden;
}

.welcome-kpi {
  position: relative;
  min-height: 112px;
  padding: 20px 24px;
  border-right: 1px solid var(--line);
}

.metric-icon,
.role-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: rgba(255,234,224,.82);
  color: #ef5c45;
  font-style: normal;
  font-weight: 900;
  border: 1px solid rgba(232,117,88,.18);
}
.metric-icon svg, .metric-icon .rn-ic,
.role-icon svg, .role-icon .rn-ic { width: 22px; height: 22px; }

.welcome-kpi:nth-child(3) .metric-icon,
.role-card:nth-child(2) .role-icon,
.role-card:nth-child(5) .role-icon {
  background: rgba(226,244,234,.88);
  color: #2f8b61;
}

.welcome-kpi:nth-child(4) .metric-icon,
.role-card:nth-child(4) .role-icon,
.role-card:nth-child(6) .role-icon {
  background: rgba(255,241,224,.88);
  color: #dd7431;
}

.welcome-kpi:last-child {
  border-right: 0;
}

.welcome-kpi span,
.welcome-kpi small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.welcome-kpi strong {
  display: block;
  margin: 7px 0 4px;
  font-size: 29px;
  letter-spacing: -.04em;
}

.welcome-roles {
  padding: 0 56px 44px;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.role-card {
  min-height: 126px;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 7px;
  padding: 14px 8px;
  border-radius: 0;
  border: 0;
  background: transparent;
  text-decoration: none;
  color: var(--text);
}

.role-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.role-card .role-more {
  margin-top: 6px;
  color: var(--rn-orange, #e8622a);
  font-weight: 600;
  font-size: 12px;
}

.role-card:nth-child(2) .role-more,
.role-card:nth-child(5) .role-more {
  color: #2f9e59;
}

.welcome-cta .btn i,
.welcome-footer b i {
  font-style: normal;
  display: inline-flex;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -3px;
}
.welcome-cta .btn i svg, .welcome-cta .btn i .rn-ic,
.welcome-footer b i svg, .welcome-footer b i .rn-ic { width: 15px; height: 15px; }

.welcome-live-grid {
  padding: 0 56px 44px;
}

.welcome-live-grid .panel.large {
  min-height: auto;
}

.welcome-footer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 22px 56px;
  background: rgba(255,235,222,.68);
  border-top: 1px solid var(--line);
}

.welcome-footer div {
  display: grid;
  gap: 4px;
  padding: 0 18px;
  border-right: 1px solid var(--line);
}

.welcome-footer div:last-child {
  border-right: 0;
}

.welcome-footer span {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  body.home-page {
    min-width: 0;
    overflow-x: hidden;
  }

  .welcome-shell {
    width: 100%;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .welcome-nav {
    grid-template-columns: 1fr auto;
    padding: 14px 16px;
    gap: 12px;
  }

  .welcome-nav::after {
    content: none;
    font-size: 22px;
    font-weight: 800;
    color: #40312b;
  }

  .welcome-links {
    display: none;
  }

  .welcome-actions {
    display: none;
  }

  .welcome-hero {
    grid-template-columns: 1fr;
    padding: 28px 18px 18px;
    gap: 16px;
    text-align: center;
  }

  .welcome-copy h1 {
    font-size: 38px;
    letter-spacing: -.04em;
  }

  .welcome-lead {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.35;
  }

  .welcome-copy .subtitle {
    margin-left: auto;
    margin-right: auto;
    max-width: 340px;
    font-size: 12px;
    line-height: 1.45;
  }

  .welcome-visual {
    min-height: auto;
  }

  .welcome-visual img {
    width: 100%;
    border-radius: 20px;
  }

  .welcome-cta {
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;
    gap: 10px;
  }

  .welcome-cta.secondary {
    margin-top: 10px;
  }

  .welcome-cta .btn {
    min-width: 120px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
  }

  .welcome-kpis {
    margin: 0 18px 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .welcome-kpi {
    min-height: 92px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--line);
  }

  .metric-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 6px;
    font-size: 17px;
    box-shadow: 0 10px 22px rgba(145,84,54,.08);
  }

  .welcome-kpi span,
  .welcome-kpi small {
    font-size: 10px;
  }

  .welcome-kpi strong {
    margin: 4px 0 3px;
    font-size: 23px;
  }

  .welcome-kpi:nth-child(2n) {
    border-right: 0;
  }

  .welcome-kpi:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .welcome-live-grid {
    padding-left: 18px;
    padding-right: 18px;
  }

  .welcome-roles {
    padding: 4px 18px 24px;
  }

  .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    padding: 4px 8px 0;
  }

  .role-card {
    min-height: 104px;
    padding: 8px 4px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .role-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 5px;
    font-size: 17px;
    box-shadow: 0 12px 24px rgba(145,84,54,.08);
  }

  .role-card b {
    font-size: 13px;
  }

  .role-card span:not(.role-icon) {
    font-size: 10px;
  }

  .welcome-live-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .welcome-live-grid .summary {
    position: static;
  }

  .event-main,
  .panel-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .chips {
    justify-content: flex-start;
  }

  .welcome-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px;
    gap: 14px;
  }

  .welcome-footer div {
    padding: 0;
    border-right: 0;
  }
}

@media (max-width: 900px) {
  body { min-width: 1180px; }
}

/* Rescue-Net image viewer pages with working menu */
body.viewer-page {
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(244,167,134,.38), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(255,214,190,.65), transparent 26%),
    linear-gradient(135deg, #fff8f3 0%, #ffeade 42%, #fff6ef 100%);
}

.viewer-shell {
  height: 100vh;
  display: grid;
  grid-template-rows: 64px 1fr;
}

.viewer-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(104,64,45,.14);
  backdrop-filter: blur(10px);
}

.viewer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.viewer-logo {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, #f3a17f, #e66f57);
  box-shadow: 0 10px 22px rgba(232,117,88,.22);
}

.viewer-brand strong {
  display: block;
  color: #2d211b;
  line-height: 1;
}

.viewer-brand span {
  display: block;
  color: #7c6458;
  font-size: 11px;
  margin-top: 3px;
}

.viewer-links {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
}

.viewer-links a {
  text-decoration: none;
  color: #5f4a40;
  font-weight: 750;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.viewer-links a:hover,
.viewer-links a.active {
  color: #2d211b;
  background: rgba(244,167,134,.24);
  border-color: rgba(232,117,88,.24);
}

.viewer-stage {
  height: calc(100vh - 64px);
  padding: 16px;
  display: grid;
  place-items: center;
}

.viewer-card {
  width: 100%;
  height: 100%;
  max-width: 1500px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(104,64,45,.14);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(145,84,54,.20);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.viewer-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.viewer-placeholder {
  text-align: center;
  max-width: 680px;
  padding: 40px;
}

.viewer-placeholder h1 {
  margin: 0 0 10px;
  color: #2d211b;
  font-size: 34px;
}

.viewer-placeholder p {
  margin: 0;
  color: #7c6458;
  line-height: 1.55;
}

.viewer-placeholder code {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff1e8;
  border: 1px solid rgba(104,64,45,.14);
  color: #7b3e2c;
}

@media (max-width: 900px) {
  body.viewer-page {
    min-width: 0;
    overflow: auto;
  }

  .viewer-shell {
    height: auto;
    min-height: 100vh;
  }

  .viewer-nav {
    height: auto;
    min-height: 64px;
  }

  .viewer-stage {
    height: calc(100vh - 64px);
  }
}

.create-panel {
  margin-bottom: 18px;
}

.rn-form {
  margin-top: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr .8fr;
  gap: 12px;
}

.rn-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.rn-form input,
.rn-form select,
.rn-form textarea {
  width: 100%;
  min-height: 42px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.88);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
  font: inherit;
}

.rn-form textarea {
  resize: vertical;
}

.rn-form .rn-form-wide {
  grid-column: 1 / -1;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.form-actions .btn {
  width: fit-content;
  border: 0;
  cursor: pointer;
}

.form-message {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.rn-separator {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}

.summary .rn-form {
  display: grid;
  gap: 12px;
}

.summary .rn-form label {
  display: grid;
  gap: 7px;
}

.rn-create-event-card {
  border-color: rgba(232,117,88,.26);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,244,237,.94));
}

.status-pill.mini {
  padding: 8px 12px;
  font-size: 12px;
}

.event-form-grid {
  grid-template-columns: 1.35fr .85fr 1.2fr .7fr;
  align-items: end;
}

.event-form-grid label.wide input {
  font-weight: 650;
}

.rn-event-form input,
.rn-event-form select {
  background: #fffaf6;
  border-color: rgba(104,64,45,.16);
}

.quick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.quick-chip {
  border: 1px solid rgba(232,117,88,.25);
  background: rgba(244,167,134,.18);
  color: #6a3d2d;
  border-radius: 999px;
  padding: 7px 11px;
  cursor: pointer;
  font-weight: 750;
}

.quick-chip:hover {
  background: rgba(244,167,134,.30);
}

@media (max-width: 1200px) {
  .event-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.success-box,
.alert {
  margin-top: 18px;
  border-radius: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
}

.alert.danger {
  border-color: rgba(215, 68, 68, .25);
  background: rgba(255, 232, 232, .92);
}

.alert.neutral {
  background: rgba(255,255,255,.92);
}

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

.code-grid div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,250,246,.95);
}

.code-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.code-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
}

.source-list {
  display: grid;
  gap: 8px;
}

.source-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
}

.source-row span {
  color: var(--muted);
  font-weight: 800;
}

.source-row b {
  font-size: 13px;
  word-break: break-all;
}

/* Rescue-Net War Room Polish */
.warroom-hero {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 18px;
  margin-bottom: 18px;
}

.warroom-command-card {
  border-radius: 28px;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(255, 179, 102, 0.28), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 244, 232, 0.96));
  border: 1px solid rgba(196, 120, 65, 0.18);
  box-shadow: 0 22px 60px rgba(115, 71, 42, 0.12);
}

.warroom-command-card h3 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.1;
}

.warroom-command-card p {
  color: var(--muted);
  max-width: 760px;
}

.warroom-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.warroom-status-strip .chip {
  padding: 9px 12px;
  border-radius: 999px;
}

.warroom-clock-card {
  border-radius: 28px;
  padding: 22px;
  background: linear-gradient(180deg, #28443c, #173029);
  color: white;
  box-shadow: 0 22px 60px rgba(23, 48, 41, 0.22);
}

.warroom-clock-card .eyebrow,
.warroom-clock-card .subtitle {
  color: rgba(255,255,255,0.74);
}

.warroom-clock-card h3 {
  color: white;
  font-size: 30px;
  margin: 8px 0;
}

.warroom-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.warroom-kpi {
  border-radius: 22px;
  padding: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(129, 87, 55, 0.12);
  box-shadow: 0 12px 34px rgba(80, 50, 30, 0.08);
}

.warroom-kpi span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}

.warroom-kpi b {
  font-size: 26px;
  color: var(--ink);
}

.warroom-kpi.critical {
  background: linear-gradient(180deg, #fff8f2, #ffe8d6);
  border-color: rgba(221, 92, 32, 0.24);
}

.warroom-board {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.warroom-column {
  display: grid;
  gap: 16px;
}

.warroom-panel {
  border-radius: 26px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(129, 87, 55, 0.12);
  box-shadow: 0 18px 48px rgba(80, 50, 30, 0.08);
  overflow: hidden;
}

.warroom-panel-header {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(129, 87, 55, 0.10);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.warroom-panel-header h3 {
  margin: 0;
}

.warroom-panel-body {
  padding: 16px 20px 20px;
}

.warroom-list {
  display: grid;
  gap: 10px;
}

.warroom-item {
  border-radius: 18px;
  padding: 12px 14px;
  background: #fff9f3;
  border: 1px solid rgba(129, 87, 55, 0.10);
}

.warroom-item b {
  display: block;
  margin-bottom: 4px;
}

.warroom-item small {
  color: var(--muted);
}

.warroom-item.urgent {
  background: #fff2e8;
  border-color: rgba(222, 96, 45, 0.22);
}

@media (max-width: 1280px) {
  .warroom-kpi-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .warroom-board,
  .warroom-hero {
    grid-template-columns: 1fr;
  }
}

.hero-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 24px;
  align-items: center;
  margin-bottom: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,236,226,.9)),
    radial-gradient(circle at top right, rgba(230,95,60,.22), transparent 36%);
}

.hero-command h3 {
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -.04em;
}

.command-clock {
  background: white;
  border: 1px solid var(--rn-border);
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--rn-shadow);
}

.command-clock span {
  display: block;
  color: var(--rn-muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 900;
}

.command-clock strong {
  display: block;
  margin: 10px 0 6px;
  font-size: 44px;
  line-height: 1;
}

.command-clock small {
  color: var(--rn-muted);
}

@media (max-width: 900px) {
  .hero-command {
    grid-template-columns: 1fr;
  }
}

/* Final RN logo sidebar sizing */
.brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.brand-logo {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  padding: 3px !important;
  background: rgba(255,255,255,.75) !important;
}

.brand h1 {
  margin: 0 !important;
  font-size: 19px !important;
  line-height: 1.05 !important;
}

.brand p {
  margin: 3px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

/* RN logo medium sizing override */
.brand-logo {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  padding: 3px !important;
}

.brand {
  gap: 13px !important;
  margin-bottom: 20px !important;
}

.brand h1 {
  font-size: 20px !important;
}

.brand p {
  font-size: 11.5px !important;
}

/* RN logo large sizing override */
.brand-logo {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
}

/* RN logo bigger final override */
.app-shell {
  grid-template-columns: 300px minmax(0, 1fr) !important;
}

.sidebar {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.brand-logo {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  padding: 3px !important;
}

.brand {
  gap: 14px !important;
  align-items: center !important;
  margin-bottom: 22px !important;
}

.brand h1 {
  font-size: 21px !important;
  line-height: 1.05 !important;
}

.brand p {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

/* Bigger Rescue-Net sidebar logo */
.sidebar .brand {
  min-height: 150px;
  padding: 18px 16px;
  border-radius: 28px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(126,72,55,.14);
  box-shadow: 0 14px 34px rgba(126,72,55,.10);
  align-items: center;
}

.sidebar .brand img,
.sidebar .brand-logo,
.sidebar .brand-mark img {
  width: 118px !important;
  height: 118px !important;
  min-width: 118px !important;
  min-height: 118px !important;
  object-fit: contain !important;
}

.sidebar .brand-mark {
  width: 118px !important;
  height: 118px !important;
  min-width: 118px !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
}

.sidebar .brand h1 {
  font-size: 32px !important;
  line-height: 1 !important;
}

.sidebar .brand p {
  font-size: 18px !important;
  line-height: 1.15 !important;
  margin-top: 8px !important;
}

.sidebar nav a {
  font-size: 17px !important;
  padding: 15px 18px !important;
  border-radius: 18px !important;
}


/* Rescue-Net sidebar logo balanced size */
.sidebar .brand {
  min-height: 118px !important;
  padding: 14px 14px !important;
  border-radius: 24px !important;
  gap: 14px !important;
}

.sidebar .brand img,
.sidebar .brand-logo,
.sidebar .brand-mark img {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  min-height: 88px !important;
  object-fit: contain !important;
}

.sidebar .brand-mark {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
}

.sidebar .brand h1 {
  font-size: 27px !important;
  line-height: 1 !important;
}

.sidebar .brand p {
  font-size: 15px !important;
  line-height: 1.2 !important;
  margin-top: 6px !important;
}

.sidebar nav a {
  font-size: 15px !important;
  padding: 12px 15px !important;
  border-radius: 16px !important;
}


/* Rescue-Net sidebar logo slightly smaller */
.sidebar .brand {
  min-height: 106px !important;
  padding: 12px 14px !important;
  gap: 13px !important;
}

.sidebar .brand img,
.sidebar .brand-logo,
.sidebar .brand-mark img {
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  min-height: 78px !important;
  object-fit: contain !important;
}

.sidebar .brand-mark {
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
}

.sidebar .brand h1 {
  font-size: 25px !important;
}

.sidebar .brand p {
  font-size: 14px !important;
  line-height: 1.18 !important;
}

/* Rescue-Net sidebar logo compact final */
.sidebar .brand {
  min-height: 88px !important;
  padding: 10px 12px !important;
  gap: 12px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

.sidebar .brand img,
.sidebar .brand-logo,
.sidebar .brand-mark img {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  object-fit: contain !important;
}

.sidebar .brand-mark {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.sidebar .brand h1 {
  font-size: 22px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  letter-spacing: -0.04em !important;
}

.sidebar .brand p {
  font-size: 13px !important;
  line-height: 1.12 !important;
  margin-top: 5px !important;
}

.sidebar nav a {
  font-size: 14px !important;
  padding: 11px 14px !important;
}




/* long sidebar support */
.sidebar {
  max-height: 100vh;
  overflow-y: auto;
}

.sidebar nav {
  padding-bottom: 28px;
}

.sidebar nav a {
  white-space: normal;
}

/* LIVE PROTOTYPE ONLY: domain/external */
html.rn-external-access body:not(.mockup-viewer) .app-shell {
  zoom: 1.08;
}

/* MOCK-UP ONLY: local LAN */
html.rn-local-access body.mockup-viewer .mock-main {
  transform: scale(1.08);
  transform-origin: top center;
  width: 92.6%;
  margin-left: auto;
  margin-right: auto;
}

html.rn-local-access body.mockup-viewer .mock-header {
  transform: scale(0.98);
  transform-origin: top center;
}

/* keep mobile natural */
@media (max-width: 900px) {
  html.rn-external-access body:not(.mockup-viewer) .app-shell {
    zoom: 1;
  }

  html.rn-external-access body:not(.mockup-viewer) .main {
    min-height: auto !important;
  }

  html.rn-local-access body.mockup-viewer .mock-main,
  html.rn-local-access body.mockup-viewer .mock-header {
    transform: none;
    width: 100%;
  }
}



/* Live prototype: no forced scaling for local or domain. */

.sidebar {
  max-height: 100vh;
  overflow-y: auto;
}

.sidebar nav {
  padding-bottom: 32px;
}

.sidebar nav a {
  white-space: normal;
}

/* Mock-up local only: enlarge local mock-up to match domain mock-up */
html.rn-local-access body.mockup-viewer .mock-main {
  transform: scale(1.08);
  transform-origin: top center;
  width: 92.6%;
  margin-left: auto;
  margin-right: auto;
}

html.rn-local-access body.mockup-viewer .mock-header {
  transform: scale(0.98);
  transform-origin: top center;
}


/* RN clean layout rule
   Live prototype: no zoom/scale for local or domain.
   Mock-up: only local LAN mock-up is slightly enlarged.
*/

.sidebar {
  max-height: 100vh;
  overflow-y: auto;
}

.sidebar nav {
  padding-bottom: 32px;
}

.sidebar nav a {
  white-space: normal;
}

/* Mock-up local only. Domain mock-up stays normal. */
html.rn-local-access body.mockup-viewer .mock-main {
  transform: scale(1.08);
  transform-origin: top center;
  width: 92.6%;
  margin-left: auto;
  margin-right: auto;
}

html.rn-local-access body.mockup-viewer .mock-header {
  transform: scale(0.98);
  transform-origin: top center;
}

@media (max-width: 900px) {
  html.rn-local-access body.mockup-viewer .mock-main,
  html.rn-local-access body.mockup-viewer .mock-header {
    transform: none;
    width: 100%;
  }
}

/* Sidebar full-height fix for zoomed external live layout */
html.rn-external-access body:not(.mockup-viewer) .sidebar {
  height: 133.333vh !important;
  min-height: 133.333vh !important;
  max-height: 133.333vh !important;
  overflow-y: auto !important;
}

html.rn-external-access body:not(.mockup-viewer) .sidebar nav {
  padding-bottom: 80px !important;
}

html.rn-external-access body:not(.mockup-viewer) .main {
  min-height: 133.333vh !important;
}

/* Final welcome polish: floating logo/icons and integrated mobile menu */
.welcome-kicker {
  justify-content: flex-start;
}

.welcome-kicker img {
  width: 86px;
  height: 86px;
  border-radius: 0;
  filter: drop-shadow(0 18px 30px rgba(145,84,54,.18));
}

.metric-icon,
.role-icon {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 28px !important;
  line-height: 1 !important;
  text-shadow: 0 12px 26px rgba(145,84,54,.15);
}

@media (max-width: 900px) {
  .welcome-nav {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    background: rgba(255,248,243,.96) !important;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(145,84,54,.08);
  }

  .welcome-menu-toggle {
    grid-column: 2;
    display: grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid rgba(104,64,45,.12);
    background: rgba(255,246,240,.82);
    border-radius: 14px;
  }

  .welcome-menu-toggle span {
    width: 20px;
    margin: 3px 0;
  }

  body.home-menu-open .welcome-nav {
    align-items: start !important;
    gap: 10px;
  }

  body.home-menu-open .welcome-links {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(104,64,45,.10);
    border-radius: 18px;
    background: rgba(255,248,243,.86);
  }

  body.home-menu-open .welcome-links a {
    justify-content: center;
    min-height: 40px;
    padding: 10px;
    border-radius: 13px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.74);
    text-align: center;
    font-size: 12px;
  }

  body.home-menu-open .welcome-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    padding: 0 10px 10px;
  }

  .welcome-kicker {
    justify-content: center;
  }

  .welcome-kicker img {
    width: 88px !important;
    height: 88px !important;
  }

  .metric-icon,
  .role-icon {
    font-size: 27px !important;
  }
}

/* Welcome header and mobile menu refinement */
.welcome-nav {
  grid-template-columns: 1fr auto auto;
}

.welcome-links {
  justify-content: flex-start;
}

.welcome-menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 9px;
  cursor: pointer;
}

.welcome-menu-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  border-radius: 999px;
  background: #40312b;
}

.welcome-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.welcome-kicker img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 14px;
}

.welcome-kicker .eyebrow {
  margin: 0;
}

.welcome-copy h1 {
  max-width: 680px;
  font-size: 50px;
  line-height: 1.02;
}

.welcome-title-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.welcome-title-row img {
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(145,84,54,.18));
}

.welcome-title-row h1 {
  margin: 0;
}

@media (max-width: 900px) {
  .welcome-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 54px;
  }

  .welcome-nav::after {
    content: none;
  }

  .welcome-menu-toggle {
    display: block;
  }

  .welcome-links,
  .welcome-actions {
    display: none;
  }

  body.home-menu-open .welcome-nav {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  body.home-menu-open .welcome-menu-toggle {
    grid-column: 2;
    grid-row: 1;
  }

  body.home-menu-open .welcome-links {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    gap: 8px;
    width: 100%;
    padding-top: 8px;
  }

  body.home-menu-open .welcome-links a {
    display: block;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.72);
  }

  body.home-menu-open .welcome-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  .welcome-kicker {
    justify-content: center;
    gap: 9px;
    margin-bottom: 10px;
  }

  .welcome-kicker img {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .welcome-copy h1 {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    font-size: 30px;
    line-height: 1.08;
  }

  .welcome-title-row {
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
  }

  .welcome-title-row img {
    width: 64px;
    height: 64px;
  }

  .welcome-title-row h1 {
    max-width: 250px;
    margin: 0;
    text-align: left;
    font-size: 26px;
  }
}

/* Mobile operational layout for live module pages */
@media (max-width: 900px) {
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .app-shell {
    display: block !important;
    min-height: 100vh;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .sidebar {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .brand {
    min-height: auto !important;
    margin-bottom: 10px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .brand-logo,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .brand-mark,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .brand-mark img {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .brand h1 {
    font-size: 18px !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .brand p {
    font-size: 11px !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .sidebar nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .sidebar nav a {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 9px 12px !important;
    border-radius: 999px;
    font-size: 12px !important;
    white-space: nowrap;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .main {
    padding: 16px 12px 24px;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .topbar,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .panel-header,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .event-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) h2 {
    font-size: 28px;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .kpi-card {
    grid-template-columns: 34px 1fr;
    min-height: 98px;
    padding: 13px;
    border-radius: 16px;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .kpi-icon,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .kpi-card:not(:has(.kpi-icon))::before {
    width: 34px;
    height: 34px;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .content-grid,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .image-board,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .form-grid,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .event-form-grid {
    grid-template-columns: 1fr !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .panel,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .event-card {
    border-radius: 16px;
    padding: 14px;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .panel.large {
    min-height: auto;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .summary {
    position: static;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .chips {
    justify-content: flex-start;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .search,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) input,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) select,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) textarea {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .rn-form,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .form-grid,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) label {
    min-width: 0;
    width: 100%;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .form-actions .btn,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) button.btn {
    width: 100%;
  }
}

/* Public header final: logo + mockup menu in one colored field */
.welcome-nav {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  background: rgba(255,248,243,.94) !important;
}

.welcome-brand {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  text-decoration: none;
}

.welcome-brand img {
  display: block;
  width: 66px;
  height: 66px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 15px 24px rgba(145,84,54,.18));
}

.welcome-links {
  justify-content: center !important;
  align-items: center;
}

.welcome-links a {
  background: transparent;
  border: 0;
}

.welcome-links a:hover,
.welcome-links a.active,
.welcome-login-link {
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(232,117,88,.22);
}

.welcome-title-row img,
.sidebar .brand-logo {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .welcome-nav {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    min-height: 66px !important;
    padding: 9px 13px !important;
    gap: 10px !important;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(145,84,54,.08);
  }

  .welcome-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .welcome-brand img {
    width: 52px;
    height: 52px;
  }

  .welcome-menu-toggle {
    grid-column: 3;
    grid-row: 1;
    display: grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid rgba(104,64,45,.12);
    background: rgba(255,255,255,.58);
    border-radius: 14px;
  }

  .welcome-menu-toggle span {
    width: 20px;
    height: 2px;
    margin: 3px 0;
  }

  .welcome-links,
  .welcome-actions {
    display: none !important;
  }

  body.home-menu-open .welcome-nav {
    align-items: start !important;
  }

  body.home-menu-open .welcome-links {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding-top: 8px;
  }

  body.home-menu-open .welcome-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    padding: 10px;
    border-radius: 13px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.70);
    text-align: center;
    font-size: 12px;
  }
}

/* Operational pages keep the operational side menu, including on phones. */
@media (max-width: 900px) {
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) {
    min-width: 1180px !important;
    overflow-x: auto !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .app-shell {
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1fr) !important;
    min-height: 100vh;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .sidebar {
    position: sticky !important;
    top: 0 !important;
    width: auto !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding: 26px 18px !important;
    border-right: 1px solid var(--line) !important;
    border-bottom: 0 !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .sidebar nav {
    display: grid !important;
    gap: 8px !important;
    overflow-x: visible !important;
    padding-bottom: 32px !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .sidebar nav a {
    flex: initial !important;
    min-height: 44px !important;
    padding: 11px 14px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    white-space: normal !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .brand {
    min-height: 88px !important;
    margin-bottom: 22px !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .main {
    padding: 26px 30px 34px !important;
  }
}

/* Header/logo clean pass: one floating logo, integrated menu button. */
.home-page .welcome-shell {
  background: rgba(255,248,243,.58);
}

.home-page .welcome-nav {
  min-height: 68px !important;
  padding: 8px 42px !important;
  background:
    linear-gradient(180deg, rgba(255,246,240,.98), rgba(255,232,219,.96)) !important;
  border-bottom: 1px solid rgba(104,64,45,.12) !important;
  box-shadow: 0 14px 34px rgba(145,84,54,.08) !important;
}

.home-page .welcome-brand img {
  width: 54px !important;
  height: 54px !important;
  display: block;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 16px 22px rgba(145,84,54,.18));
}

.home-page .welcome-menu-toggle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.home-page .welcome-menu-toggle span {
  background: #40312b !important;
}

.home-page .welcome-title-row {
  display: block !important;
  margin-bottom: 18px !important;
}

.home-page .welcome-title-row h1 {
  max-width: 760px !important;
}

@media (max-width: 900px) {
  .home-page .welcome-shell {
    background: rgba(255,248,243,.60);
  }

  .home-page .welcome-nav {
    min-height: 64px !important;
    padding: 7px 20px !important;
    grid-template-columns: auto 1fr auto !important;
    background:
      linear-gradient(180deg, rgba(255,246,240,.98), rgba(255,232,219,.96)) !important;
  }

  .home-page .welcome-brand img {
    width: 50px !important;
    height: 50px !important;
  }

  .home-page .welcome-menu-toggle {
    width: 46px !important;
    height: 46px !important;
    padding: 8px !important;
  }

  .home-page .welcome-menu-toggle span {
    width: 31px !important;
    height: 3px !important;
    margin: 4px 0 !important;
  }

  .home-page .welcome-title-row {
    margin-bottom: 14px !important;
  }

  .home-page .welcome-title-row h1 {
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    font-size: 31px !important;
    line-height: 1.08 !important;
  }

  body.home-menu-open .welcome-links {
    padding: 10px 0 0 !important;
  }
}

/* Global public header shown above operational pages. */
.rn-public-header {
  min-height: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 0 24px;
  background: #fffaf6;
  border-bottom: 1px solid rgba(104,64,45,.10);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Right-side cluster: event picker + auth (name / Login / Logout) + posko ⚙.
   One flex box so the items never wrap out of alignment, and `order` keeps a
   stable left→right sequence no matter which script injects its item first. */
.rn-public-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-left: auto;
}
.rn-public-actions > .rn-event-picker    { order: 1; }
.rn-public-actions > .rn-public-user     { order: 2; }
.rn-public-actions > #rnPoskoSettingsBtn { order: 3; }
.rn-public-actions > .rn-public-login    { order: 4; }
.rn-public-actions > .rn-public-logout   { order: 5; }

.rn-public-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.rn-public-brand img {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
}

.rn-public-brand-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #2d211b;
  white-space: nowrap;
}

.rn-public-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.rn-public-links a {
  min-height: auto;
  padding: 6px 6px;
  border-radius: 6px;
  color: #5a4a40;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}

.rn-public-links a:hover {
  background: rgba(104,64,45,.06);
  color: #2d211b;
}

.rn-public-login {
  display: inline-flex;
  align-items: center;
  min-height: auto;
  padding: 7px 16px;
  border-radius: 7px;
  background: var(--coral, #e8835d);
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--coral, #e8835d);
  transition: background .12s ease;
}

.rn-public-login:hover {
  background: #d96f49;
}

/* after login: name chip + a lighter Logout pill */
.rn-public-user {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--coral, #c9502f);
  white-space: nowrap;
}
.rn-public-login.rn-public-logout {
  background: #fff;
  color: var(--coral, #c9502f) !important;
  border-color: rgba(232, 117, 88, .45);
}
.rn-public-login.rn-public-logout:hover {
  background: #fff2ec;
}

.rn-public-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.rn-public-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  border-radius: 999px;
  background: #40312b;
}

/* Posko share-mode banner (Control Centre drill-down) */
.rn-share-banner {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid transparent;
}

.rn-share-banner.is-full {
  color: #1c5b34;
  background: #e7f6ec;
  border-color: rgba(28,91,52,.25);
}

.rn-share-banner.is-summary {
  color: #7a4a12;
  background: #fff3e0;
  border-color: rgba(166,91,19,.28);
}

/* Shared disaster-event picker in the public header */
.rn-event-picker {
  display: inline-flex;
  align-items: center;
}

.rn-event-picker label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rn-event-picker label > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a5a45;
}

.rn-event-picker select {
  max-width: 200px;
  min-height: 32px;
  padding: 5px 26px 5px 10px;
  border-radius: 7px;
  border: 1px solid rgba(104,64,45,.18);
  background: #fff;
  color: #40312b;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.rn-event-picker select:focus-visible {
  outline: 2px solid rgba(232,117,88,.55);
  outline-offset: 1px;
}

body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .app-shell {
  min-height: calc(100vh - 56px);
}

body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .sidebar {
  top: 56px;
  height: calc(100vh - 56px);
}

@media (max-width: 900px) {
  .rn-public-header {
    min-height: 64px;
    padding: 7px 20px;
    row-gap: 8px;
  }

  .rn-public-brand img {
    width: 50px;
    height: 50px;
  }

  .rn-public-toggle {
    display: block;
    order: 1;
    margin-left: auto;
  }

  /* auth cluster drops to its own full-width row under the brand */
  .rn-public-actions {
    order: 5;
    flex-basis: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .rn-event-picker {
    width: 100%;
  }

  .rn-event-picker label {
    width: 100%;
  }

  .rn-event-picker select {
    flex: 1;
    max-width: none;
  }

  .rn-public-links {
    display: none;
    flex-basis: 100%;
  }

  .rn-public-header.is-open .rn-public-links {
    order: 10;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding-top: 8px;
  }

  .rn-public-header.is-open .rn-public-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.70);
    text-align: center;
    font-size: 12px;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .sidebar {
    top: 64px !important;
    height: calc(100vh - 64px) !important;
    min-height: calc(100vh - 64px) !important;
    max-height: calc(100vh - 64px) !important;
  }
}

/* Public community report page */
body.public-report-page {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.public-report-shell {
  width: min(1380px, calc(100% - 56px));
  margin: 32px auto 44px;
}

.public-report-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: stretch;
  padding: 52px 56px;
  border: 1px solid rgba(232,117,88,.20);
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% 15%, rgba(244,167,134,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,248,243,.94), rgba(255,232,219,.78));
  box-shadow: 0 24px 70px rgba(145,84,54,.14);
}

.public-report-hero h1 {
  max-width: 840px;
  margin: 0;
  color: #ef523d;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -.06em;
}

.public-report-hero p {
  max-width: 840px;
  color: var(--muted);
  line-height: 1.58;
  font-size: 16px;
}

.public-report-card,
.public-report-panel {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 42px rgba(145,84,54,.10);
}

.community-report-predicted {
  background: rgba(232,131,93,.12);
  border: 1px solid rgba(232,131,93,.35);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  margin: 6px 0;
}

.rn-report-login {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(232,117,88,.35);
  border-radius: 12px;
  background: rgba(255,240,232,.9);
}

.rn-report-login span { color: var(--muted); font-size: 14px; }
.rn-report-login .form-actions { margin: 4px 0 0; }

.rn-report-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rn-report-mode label {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.rn-report-mode label:has(input:checked) {
  border-color: rgba(232,117,88,.6);
  background: rgba(255,240,232,.7);
}

.rn-report-mode input { grid-row: span 2; margin-top: 3px; }
.rn-report-mode span { color: var(--muted); font-size: 13px; line-height: 1.4; font-weight: 400; }
.rn-report-mode b { font-weight: 700; }
.rn-report-login[hidden], .rn-report-mode[hidden], .rn-report-draft[hidden] { display: none; }

.rn-report-draft {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px dashed rgba(232,131,93,.55);
  border-radius: 10px;
  background: rgba(232,131,93,.07);
  font-size: 13px;
}

.rn-report-draft ul { margin: 2px 0 0; padding-left: 18px; }

form[data-mode="narrative"]:not([data-drafted]) [data-report-fields] { display: none; }
form[data-mode="form"] [data-narrative-block] { display: none; }

.rn-report-thread {
  display: grid;
  gap: 6px;
  margin: 8px 0;
  padding-left: 10px;
  border-left: 3px solid rgba(232,131,93,.35);
  font-size: 13px;
}

.rn-report-thread small { color: var(--muted); }
.rn-report-followup { display: grid; gap: 8px; grid-template-columns: 160px minmax(0, 1fr); align-items: end; }
.rn-report-followup textarea, .rn-report-followup .form-actions { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .rn-report-mode, .rn-report-followup { grid-template-columns: 1fr; }
}

.public-report-card {
  display: grid;
  align-content: center;
  gap: 10px;
  border-radius: 22px;
  padding: 26px;
}

.public-report-card strong {
  color: #2d211b;
  font-size: 22px;
}

.public-report-card span {
  color: var(--muted);
  line-height: 1.55;
}

.public-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 22px;
  margin-top: 22px;
  align-items: start;
}

.public-report-panel {
  border-radius: 22px;
  padding: 22px;
}

.public-report-actions {
  display: grid;
  gap: 12px;
}

.public-report-actions a {
  display: grid;
  gap: 5px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,248,243,.76);
  color: var(--text);
  text-decoration: none;
}

.public-report-actions span {
  color: var(--muted);
  line-height: 1.45;
  font-size: 13px;
}

.location-input-panel {
  display: grid;
  gap: 16px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(54, 143, 130, .18);
  border-radius: 18px;
  background: rgba(248, 253, 250, .78);
}

.location-input-panel .panel-header {
  margin: 0;
}

.location-input-panel h3 {
  margin: 0;
}

.location-input-panel p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.location-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.location-method {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-content: start;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(54, 143, 130, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .74);
}

.location-method input {
  width: auto;
  margin-top: 3px;
}

.location-method b,
.location-method span {
  grid-column: 2;
}

.location-method span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.chip.success {
  color: #176f5f;
  border-color: rgba(54,143,130,.26);
  background: rgba(231,248,240,.90);
}

.public-report-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.public-report-steps div {
  display: grid;
  gap: 6px;
  min-height: 116px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}

.public-report-steps span {
  color: var(--muted);
  line-height: 1.45;
  font-size: 13px;
}

@media (max-width: 900px) {
  .public-report-shell {
    width: 100%;
    margin: 0;
    padding: 18px;
  }

  .public-report-hero,
  .public-report-grid,
  .public-report-steps {
    grid-template-columns: 1fr;
  }

  .public-report-hero {
    padding: 30px 20px;
    text-align: center;
    border-radius: 22px;
  }

  .public-report-hero h1 {
    font-size: 34px;
    letter-spacing: -.04em;
  }

  .public-report-hero p {
    font-size: 13px;
  }

  .public-report-panel {
    padding: 16px;
  }

  .location-input-panel {
    padding: 14px;
    border-radius: 16px;
  }

  .location-methods {
    grid-template-columns: 1fr;
  }

  .location-method {
    width: 100%;
  }

  .public-report-card {
    padding: 18px;
  }
}

/* Final responsive guard for community report and global operational header */
.public-report-shell,
.public-report-shell * {
  min-width: 0;
}

.public-report-hero h1 {
  overflow-wrap: anywhere;
}

body:not(.home-page):not(.viewer-page):not(.mockup-viewer) .rn-public-header + .app-shell .sidebar .brand {
  display: none !important;
}

@media (max-width: 900px) {
  body.public-report-page.public-report-page,
  body.public-report-page:not(.home-page):not(.viewer-page):not(.mockup-viewer) {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .public-report-shell {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  .public-report-page .form-grid,
  .public-report-page .event-form-grid {
    grid-template-columns: 1fr !important;
  }

  .public-report-page input,
  .public-report-page select,
  .public-report-page textarea,
  .public-report-page label,
  .public-report-page .btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  .public-report-hero h1 {
    font-size: 30px !important;
  }
}

/* Final mobile-native operational layout.
   Keep the operational menu available, but stop forcing a desktop canvas on phones. */
@media (max-width: 900px) {
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .app-shell {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .sidebar {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    overflow: hidden !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .sidebar nav {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 6px !important;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .sidebar nav a {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .main {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 12px 24px !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .topbar,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .panel-header,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .event-main,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .hero-command {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) h2 {
    font-size: 28px !important;
    letter-spacing: -.03em !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) h3 {
    font-size: 17px !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .subtitle,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) p {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .kpi-grid,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .warroom-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .content-grid,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .image-board,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .form-grid,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .event-form-grid,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .code-grid,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .warroom-board,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .warroom-hero {
    grid-template-columns: 1fr !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .panel,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .event-card,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .kpi-card {
    grid-template-columns: 34px 1fr !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    padding: 14px !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .kpi-icon,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .kpi-card:not(:has(.kpi-icon))::before {
    width: 34px !important;
    height: 34px !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .panel.large {
    min-height: auto !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .summary {
    position: static !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) input,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) select,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) textarea,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) label,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .rn-form,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .search {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .form-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) .form-actions .btn,
  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) button.btn {
    width: 100% !important;
  }

  body:not(.home-page):not(.viewer-page):not(.mockup-viewer):not(.public-report-page) table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
  }
}


/* Rescue-Net mobile welcome header fix - HP only */
@media (max-width: 768px) {
  body.home-page header,
  body.home-page .topbar,
  body.home-page .site-header,
  body.home-page .main-header,
  body.home-page .mobile-header,
  body.home-page .hero-header {
    background: #fff7f1 !important;
    background-color: #fff7f1 !important;
    box-shadow: none !important;
  }

  body.home-page header::before,
  body.home-page .topbar::before,
  body.home-page .site-header::before,
  body.home-page .main-header::before,
  body.home-page .mobile-header::before,
  body.home-page .hero-header::before {
    background: transparent !important;
    background-color: transparent !important;
  }

  body.home-page .hamburger,
  body.home-page .menu-toggle,
  body.home-page .mobile-menu-toggle,
  body.home-page .nav-toggle {
    background: transparent !important;
    color: #27323a !important;
    border: none !important;
  }

  body.home-page .hamburger span,
  body.home-page .menu-toggle span,
  body.home-page .mobile-menu-toggle span,
  body.home-page .nav-toggle span {
    background: #27323a !important;
  }
}


/* Rescue-Net FINAL: welcome page mobile header/menu only */
@media (max-width: 768px) {
  .welcome-nav,
  .welcome-nav::before,
  .welcome-nav::after,
  .welcome-header,
  .welcome-header::before,
  .welcome-header::after {
    background: #fff7f1 !important;
    background-color: #fff7f1 !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  .welcome-menu-toggle {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .welcome-menu-toggle span {
    background: #263238 !important;
    background-color: #263238 !important;
  }

  body.home-menu-open .welcome-nav,
  body.home-menu-open .welcome-links,
  body.home-menu-open .welcome-actions {
    background: #fff7f1 !important;
    background-color: #fff7f1 !important;
    background-image: none !important;
  }
}


/* Rescue-Net: move welcome title into mobile header only */
.welcome-mobile-title {
  display: none;
}

@media (max-width: 768px) {
  body.home-page .welcome-nav {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    column-gap: 10px !important;
  }

  body.home-page .welcome-brand {
    grid-column: 1 !important;
  }

  body.home-page .welcome-mobile-title {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    text-align: left !important;
    color: #ef523d !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    font-size: clamp(13px, 3.6vw, 17px) !important;
  }

  body.home-page .welcome-mobile-title span {
    display: block !important;
    white-space: nowrap !important;
  }

  body.home-page .welcome-menu-toggle {
    grid-column: 3 !important;
    justify-self: end !important;
  }

  body.home-page .welcome-copy h1,
  body.home-page .welcome-title-row h1,
  body.home-page .welcome-hero h1 {
    display: none !important;
  }
}


/* Rescue-Net mobile welcome layout polish */
@media (max-width: 768px) {
  body.home-page .welcome-nav {
    grid-template-columns: 48px 1fr 48px !important;
    column-gap: 6px !important;
    padding: 10px 12px !important;
    align-items: center !important;
  }

  body.home-page .welcome-brand {
    justify-self: start !important;
  }

  body.home-page .welcome-brand img {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
  }

  body.home-page .welcome-mobile-title {
    justify-self: center !important;
    align-self: center !important;
    text-align: center !important;
    align-items: center !important;
    width: 100% !important;
    font-size: clamp(12px, 3.25vw, 15px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    padding: 0 2px !important;
  }

  body.home-page .welcome-mobile-title span {
    text-align: center !important;
    white-space: nowrap !important;
  }

  body.home-page .welcome-menu-toggle {
    justify-self: end !important;
    width: 44px !important;
    height: 44px !important;
  }

  body.home-page .welcome-hero {
    padding-top: 10px !important;
    margin-top: 0 !important;
    gap: 14px !important;
  }

  body.home-page .welcome-copy {
    padding-top: 0 !important;
    margin-top: -8px !important;
  }

  body.home-page .welcome-copy .subtitle,
  body.home-page .welcome-hero .subtitle {
    margin-top: 6px !important;
    margin-bottom: 8px !important;
    line-height: 1.45 !important;
  }

  body.home-page .welcome-title-row {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }

  body.home-page .welcome-visual {
    margin-top: 8px !important;
  }

  body.home-page .welcome-kpis {
    margin-top: 12px !important;
  }
}


/* Rescue-Net mobile header title: slightly bigger */
@media (max-width: 768px) {
  body.home-page .welcome-mobile-title {
    font-size: clamp(13.5px, 3.75vw, 17px) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
  }
}


/* Rescue-Net mobile header title: bigger v2 */
@media (max-width: 768px) {
  body.home-page .welcome-mobile-title {
    font-size: clamp(14.5px, 4.1vw, 18px) !important;
  }
}


/* Rescue-Net WELCOME ONLY final mobile header layout */
@media (max-width: 768px) {
  body.home-page .welcome-nav {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
  }

  body.home-page .welcome-brand {
    position: relative !important;
    z-index: 30 !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  body.home-page .welcome-brand img {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
  }

  body.home-page .welcome-menu-toggle {
    position: relative !important;
    z-index: 30 !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
  }

  body.home-page .welcome-mobile-title {
    display: flex !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;

    width: min(235px, calc(100vw - 132px)) !important;
    z-index: 20 !important;
    pointer-events: none !important;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    color: #ef523d !important;
    font-size: clamp(14.5px, 4.1vw, 18px) !important;
    line-height: 1.06 !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  body.home-page .welcome-mobile-title span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  body.home-page .welcome-title-row,
  body.home-page .welcome-copy h1 {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }

  body.home-page .welcome-hero {
    padding-top: 4px !important;
    margin-top: 0 !important;
    gap: 12px !important;
  }

  body.home-page .welcome-copy {
    margin-top: -10px !important;
    padding-top: 0 !important;
  }

  body.home-page .welcome-copy .subtitle,
  body.home-page .welcome-hero .subtitle {
    margin-top: 6px !important;
    margin-bottom: 8px !important;
    line-height: 1.45 !important;
  }
}


/* Rescue-Net WELCOME ONLY: repair 3-line mobile menu button */
@media (max-width: 768px) {
  body.home-page .welcome-menu-toggle {
    position: relative !important;
    z-index: 80 !important;

    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    flex: 0 0 46px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    padding: 0 !important;
    margin: 0 0 0 auto !important;

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

  body.home-page .welcome-menu-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2.5px !important;
    min-height: 2.5px !important;
    flex: 0 0 2.5px !important;

    border-radius: 999px !important;
    background: #263238 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body.home-page.home-menu-open .welcome-menu-toggle span,
  body.home-menu-open .welcome-menu-toggle span {
    transform: none !important;
  }

  body.home-page .welcome-mobile-title {
    pointer-events: none !important;
    z-index: 20 !important;
  }

  body.home-page .welcome-brand {
    z-index: 70 !important;
  }

  body.home-page.home-menu-open .welcome-links,
  body.home-menu-open .welcome-links {
    z-index: 60 !important;
  }
}


/* Rescue-Net internal mobile page title - War Room first */
.rn-page-mobile-title {
  display: none;
}

@media (max-width: 768px) {
  body:not(.home-page) .topbar {
    position: relative !important;
  }

  body:not(.home-page) .topbar .rn-page-mobile-title {
    display: block !important;
    position: absolute !important;
    top: 22px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: min(180px, calc(100vw - 140px)) !important;
    text-align: center !important;
    white-space: nowrap !important;

    color: #ef523d !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;

    z-index: 30 !important;
    pointer-events: none !important;
  }
}


/* Rollback: hide accidental duplicated War Room mobile title */
@media (max-width: 768px) {
  body:not(.home-page) .topbar .rn-page-mobile-title,
  .rn-page-mobile-title {
    display: none !important;
  }
}


/* Rescue-Net War Room mobile: move existing H2 into empty top header space */
@media (max-width: 768px) {
  body:has(.topbar #refreshWarRoom) .topbar h2 {
    position: fixed !important;
    top: 104px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: min(180px, calc(100vw - 140px)) !important;
    text-align: center !important;
    white-space: nowrap !important;

    color: #ef523d !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;

    z-index: 80 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  /* rapatkan area topbar karena H2 sudah dipindahkan ke atas */
  body:has(.topbar #refreshWarRoom) .topbar {
    padding-top: 14px !important;
  }

  body:has(.topbar #refreshWarRoom) .topbar h2 + p,
  body:has(.topbar #refreshWarRoom) .topbar p {
    margin-top: 0 !important;
  }
}


/* Rescue-Net War Room mobile title: move much higher */
@media (max-width: 768px) {
  body:has(.topbar #refreshWarRoom) .topbar h2 {
    top: 96px !important;
    color: #263238 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
  }
}


/* Rescue-Net War Room mobile title: higher + bigger */
@media (max-width: 768px) {
  body:has(.topbar #refreshWarRoom) .topbar h2 {
    top: 74px !important;
    color: #263238 !important;
    font-size: 24px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
  }
}


/* Rescue-Net War Room mobile title: much higher + bigger */
@media (max-width: 768px) {
  body:has(.topbar #refreshWarRoom) .topbar h2 {
    top: 38px !important;
    color: #263238 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.04em !important;
  }
}


/* Rescue-Net War Room mobile title final nudge */
@media (max-width: 768px) {
  body:has(.topbar #refreshWarRoom) .topbar h2 {
    top: 20px !important;
    font-size: 32px !important;
  }
}


/* Rescue-Net War Room mobile title: turun sedikit */
@media (max-width: 768px) {
  body:has(.topbar #refreshWarRoom) .topbar h2 {
    top: 28px !important;
    font-size: 32px !important;
  }
}


/* Rescue-Net internal pages: mobile title in empty header space */
.rn-page-mobile-title {
  display: none;
}

@media (max-width: 768px) {
  body:not(.home-page) .topbar {
    position: relative !important;
  }

  body:not(.home-page) .topbar .rn-page-mobile-title {
    display: block !important;
    position: fixed !important;
    top: 28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: min(220px, calc(100vw - 130px)) !important;
    text-align: center !important;
    white-space: nowrap !important;

    color: #263238 !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;

    z-index: 90 !important;
    pointer-events: none !important;
  }
}


/* Rescue-Net Organisasi & Posko mobile title: turun sedikit + hide original */
@media (max-width: 768px) {
  body:has(.topbar .rn-page-mobile-title) .topbar .rn-page-mobile-title {
    top: 34px !important;
  }

  body:has(.topbar .rn-page-mobile-title) .topbar h1,
  body:has(.topbar .rn-page-mobile-title) .topbar h2,
  body:has(.topbar .rn-page-mobile-title) .topbar h3 {
    display: none !important;
  }
}


/* Rescue-Net internal mobile page title reusable */
.rn-page-mobile-title {
  display: none;
}

@media (max-width: 768px) {
  body:not(.home-page) .topbar {
    position: relative !important;
  }

  body:not(.home-page) .topbar .rn-page-mobile-title {
    display: block !important;
    position: fixed !important;
    top: 34px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: min(230px, calc(100vw - 130px)) !important;
    text-align: center !important;
    white-space: nowrap !important;

    color: #263238 !important;
    font-size: 23px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;

    z-index: 90 !important;
    pointer-events: none !important;
  }

  body:not(.home-page) .topbar:has(.rn-page-mobile-title) h1,
  body:not(.home-page) .topbar:has(.rn-page-mobile-title) h2,
  body:not(.home-page) .topbar:has(.rn-page-mobile-title) h3 {
    display: none !important;
  }
}


/* Rescue-Net: hide War Room menu on internal pages only, keep welcome page */
body:not(.home-page) nav a[href*="war-room.html"],
body:not(.home-page) .welcome-links a[href*="war-room.html"],
body:not(.home-page) .topbar a[href*="war-room.html"] {
  display: none !important;
}


/* Rescue-Net: War Room visible in horizontal scroll nav, hidden only in mobile hamburger menu */
body:not(.home-page) nav a[href*="war-room.html"] {
  display: inline-flex !important;
}

/* hide War Room only when hamburger/mobile menu is opened */
@media (max-width: 768px) {
  body:not(.home-page).menu-open nav a[href*="war-room.html"],
  body:not(.home-page).nav-open nav a[href*="war-room.html"],
  body:not(.home-page).mobile-menu-open nav a[href*="war-room.html"],
  body:not(.home-page).rn-menu-open nav a[href*="war-room.html"],
  body:not(.home-page).rn-mobile-menu-open nav a[href*="war-room.html"],
  body:not(.home-page) .mobile-menu nav a[href*="war-room.html"],
  body:not(.home-page) .mobile-nav a[href*="war-room.html"],
  body:not(.home-page) .drawer-menu a[href*="war-room.html"],
  body:not(.home-page) .menu-panel a[href*="war-room.html"] {
    display: none !important;
  }
}

/* ============ Posko Logistik dashboard (DMS mock-up) ============ */
.rn-logistik-topbar { flex-wrap: wrap; gap: 16px; }
.rn-logistik-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rn-inline-select { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: #8a5a45; }
.rn-inline-select select {
  min-height: 38px; padding: 6px 30px 6px 12px; border-radius: 10px;
  border: 1px solid rgba(232,117,88,.35); background: #fff; font-size: 13px; font-weight: 700;
  max-width: 320px;
}

.rn-logistik-grid { align-items: start; }
.rn-logistik-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.rn-table-wrap { overflow-x: auto; }
.rn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rn-table th, .rn-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid rgba(120,80,60,.12); vertical-align: middle; }
.rn-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8c827c; font-weight: 800; }
.rn-table td small { color: #9a8f88; display: block; font-size: 11px; }
.rn-table tr:last-child td { border-bottom: 0; }
.rn-table .rn-gap { color: #c0392b; font-weight: 800; }

.rn-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 12px; color: #8c827c; }

.rn-tabs { display: inline-flex; gap: 6px; }
.rn-tab { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(232,117,88,.28); background: #fff; font-size: 12px; font-weight: 800; color: #8a5a45; cursor: pointer; }
.rn-tab.is-active { background: #e87558; color: #fff; border-color: #e87558; }

.rn-sub-h { margin: 20px 0 10px; font-size: 14px; }
.rn-muted { color: #9a8f88; font-size: 12px; }

.rn-trace { border: 1px solid rgba(120,80,60,.14); border-radius: 12px; padding: 14px; background: #fff8f4; }
.rn-trace-line { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12.5px; }
.rn-trace-line span { color: #8c827c; }
.rn-trace-steps { display: flex; align-items: center; margin-top: 14px; }
.rn-trace-seg { flex: 1; height: 2px; background: rgba(120,80,60,.2); }
.rn-trace-seg.is-done { background: #e8573f; }
.rn-trace-node {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(120,80,60,.1);
  color: #9a8f88;
}
.rn-trace-node.is-done { background: rgba(63,143,101,.16); color: #2f8a5c; }
.rn-trace-node.is-current {
  background: #e8573f;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(232,87,63,.18);
}
.rn-trace-icon svg { width: 14px; height: 14px; }

.rn-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rn-upload-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px dashed rgba(232,117,88,.45); border-radius: 12px; text-decoration: none; color: #40312b; background: #fff; }
.rn-upload-tile b { font-size: 13px; }
.rn-upload-tile span { font-size: 11px; font-weight: 800; color: #e87558; }

.rn-conv { display: grid; gap: 8px; }
.rn-conv-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid rgba(120,80,60,.12); border-radius: 9px; font-size: 12.5px; }
.rn-conv-row span { color: #8c827c; }

.rn-input-drawer > summary { list-style: none; cursor: pointer; }
.rn-input-drawer > summary::-webkit-details-marker { display: none; }
.rn-input-drawer > summary h3::after { content: " ⌄"; }
.rn-input-drawer[open] > summary h3::after { content: " ⌃"; }
.rn-input-drawer .rn-form h4 { margin: 18px 0 8px; font-size: 13px; }

.rn-page-status { margin-top: 14px; font-size: 12px; color: #8c827c; }

.btn.ghost { background: transparent; border: 1px solid rgba(232,117,88,.4); color: #e87558; }

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

/* Posko Logistik — kartu stok extras + drawer */
.rn-kpi-edit {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  background: rgba(232,117,88,.15);
  color: #c0392b;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
}
.rn-kpi-edit svg { width: 11px; height: 11px; }
.btn.mini { min-height:auto; padding:5px 10px; font-size:11px; }
.rn-table .rn-in { color:#1c5b34; }
.rn-table .rn-table .rn-out, .rn-table .rn-out { color:#c0392b; }
.rn-table td small { color:#9a8f88; }
.rn-otw { font-weight:800; color:#b26a1a; text-decoration:underline; }

.rn-drawer { position:fixed; inset:0; background:rgba(20,16,14,.55); display:none; z-index:99999; }
.rn-drawer.is-open { display:grid; place-items:center; }
.rn-drawer-card { width:min(560px,94vw); max-height:88vh; overflow:auto; background:#fff; border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.3); }
.rn-drawer-card header { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid #eee6e1; }
.rn-drawer-card header button { border:0; background:transparent; font-size:22px; cursor:pointer; color:#8a5a45; }
.rn-drawer-card > div:last-child { padding:16px 18px; }
.rn-drawer-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #f0e8e2; }
.rn-drawer-row:last-child { border-bottom:0; }
.rn-drawer .rn-form label { display:block; margin:10px 0 4px; font-size:12px; font-weight:800; }
.rn-drawer .rn-form input { width:100%; }

/* Posko function sub-nav + logistics role banner */
.rn-fn-nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.rn-fn-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#8a5a45; }
.rn-fn-tab { padding:7px 14px; border-radius:999px; border:1px solid rgba(232,117,88,.3); background:#fff; font-size:12px; font-weight:800; color:#8a5a45; text-decoration:none; }
.rn-fn-tab.is-active { background:#e87558; color:#fff; border-color:#e87558; }
.rn-role-banner { margin:0 0 14px; padding:11px 15px; border-radius:11px; font-size:12.5px; border:1px solid transparent; }
.rn-role-banner.is-collector { color:#1e4f7a; background:#e6f1fb; border-color:rgba(30,79,122,.25); }
.rn-role-banner.is-receiver { color:#7a4a12; background:#fff3e0; border-color:rgba(166,91,19,.25); }

.rn-fn-picker { border:1px solid rgba(120,80,60,.18); border-radius:10px; padding:10px 12px; margin:6px 0; }
.rn-fn-picker legend { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#8a5a45; padding:0 4px; }
.rn-check { display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; margin:4px 0; }
.rn-check input { width:auto; }

/* ===== Posko Logistik — mockup pass: clickable KPIs, bukti photos ===== */
/* "Bantuan Menuju Posko" uses a green icon chip in the mock-up (truck =
   incoming aid, positive), but its big number stays plain dark text there —
   unlike .kpi-card.good, which also recolors <strong>. Scope the accent to
   just the icon so the number doesn't turn green. */
#kpiMenujuCard .kpi-icon,
#kpiMenujuCard:not(:has(.kpi-icon))::before {
  background: rgba(63,143,101,.16);
  color: #2f8a5c;
}
.kpi-card.is-clickable { cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.kpi-card.is-clickable:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(120,80,60,.16); }
.kpi-card.is-clickable:focus-visible { outline:2px solid #e87558; outline-offset:2px; }
.kpi-card.is-clickable::after {
  content:"↗"; position:absolute; top:10px; right:12px; font-size:12px; font-weight:800;
  color:#b58a72; opacity:0; transition:opacity .12s ease;
}
.kpi-card.is-clickable:hover::after { opacity:1; }
.rn-flash { animation:rnFlash 1.1s ease; }
@keyframes rnFlash {
  0%,100% { box-shadow:0 0 0 0 rgba(232,117,88,0); }
  25% { box-shadow:0 0 0 3px rgba(232,117,88,.55); }
}

.rn-sub-h-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.rn-seeall { font-size:11px; font-weight:800; color:#e87558; text-decoration:none; white-space:nowrap; }
.rn-seeall:hover { text-decoration:underline; }

.rn-habis { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; }
.rn-habis-dot { width:8px; height:8px; border-radius:50%; background:#9a8f88; flex:none; }
.rn-habis-dot.hi { background:#d8455c; }
.rn-habis-dot.mid { background:#dd8a2f; }
.rn-habis-dot.lo { background:#3f8f65; }

.rn-stockcards-panel > summary h3 .chip { vertical-align:middle; }

/* Bukti thumbnails */
.rn-bukti-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rn-bukti-item {
  display:flex; flex-direction:column; gap:4px; padding:0 0 4px; border:1px solid rgba(120,80,60,.14);
  border-radius:10px; overflow:hidden; background:#fff; text-align:left; cursor:pointer;
  font:inherit; color:inherit; transition:border-color .12s ease, transform .12s ease;
}
.rn-bukti-item:hover { border-color:rgba(232,117,88,.55); transform:translateY(-1px); }
.rn-bukti-thumb { position:relative; display:block; height:80px; background:#eee; }
.rn-bukti-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.rn-bukti-thumb::after {
  content:"⌕"; position:absolute; right:5px; bottom:5px; width:20px; height:20px; display:grid;
  place-items:center; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:11px;
}
.rn-bukti-cap {
  padding:4px 8px 0; font-size:11px; font-weight:700; color:#40312b; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rn-bukti-sub { padding:0 8px; font-size:10px; color:#9a8f88; }

/* Kondisi Stok / Kondisi Posko tiles — filled with latest photo */
#buktiTiles { margin-bottom:10px; }
.rn-upload-tile.is-filled {
  padding:0; overflow:hidden; border-style:solid; border-color:rgba(120,80,60,.16);
  cursor:pointer; font:inherit; text-align:left; color:#40312b; gap:0;
}
.rn-upload-tile.is-filled:hover { border-color:rgba(232,117,88,.55); }
.rn-upload-tile-thumb { position:relative; display:block; height:70px; background:#eee; }
.rn-upload-tile-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.rn-upload-tile-thumb::after {
  content:"⌕"; position:absolute; right:5px; bottom:5px; width:19px; height:19px; display:grid;
  place-items:center; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:10px;
}
.rn-upload-tile.is-filled b { padding:6px 10px 0; font-size:12px; }
.rn-upload-tile.is-filled span { padding:0 10px 8px; font-size:10px; font-weight:700; color:#9a8f88; }

/* Bukti modal */
.rn-bukti-modal { position:fixed; inset:0; z-index:100000; display:grid; place-items:center; padding:28px; background:rgba(20,16,14,.82); }
.rn-bukti-modal[hidden] { display:none; }
.rn-bukti-modal-close {
  position:absolute; top:16px; right:20px; width:40px; height:40px; border:0; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff; font-size:24px; line-height:1; cursor:pointer;
}
.rn-bukti-modal-card {
  width:min(900px,94vw); max-height:90vh; overflow:auto; display:grid;
  grid-template-columns:1.15fr 1fr; background:#fff; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.rn-bukti-modal-image { background:#12100e; display:flex; align-items:center; justify-content:center; }
.rn-bukti-modal-image img { width:100%; height:100%; max-height:90vh; object-fit:contain; display:block; }
.rn-bukti-modal-body { padding:22px 24px; }
.rn-bukti-badge {
  display:inline-block; padding:3px 9px; border-radius:999px; background:#fef3d8; color:#9a6a12;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
}
.rn-bukti-modal-body h3 { margin:10px 0 4px; font-size:17px; }
.rn-bukti-modal-loc { margin:0 0 10px; color:#8c827c; font-size:12.5px; }
.rn-bukti-modal-body > p { font-size:13px; line-height:1.55; color:#4b423d; }
.rn-bukti-modal-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin:16px 0; }
.rn-bukti-modal-meta dt { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:#9a8f88; font-weight:800; margin:0; }
.rn-bukti-modal-meta dd { margin:2px 0 0; font-size:12.5px; font-weight:700; color:#40312b; }

@media (max-width:760px) {
  .rn-bukti-modal { padding:8px; }
  .rn-bukti-modal-card { grid-template-columns:1fr; }
  .rn-bukti-modal-image img { max-height:40vh; }
}

/* =========================================================
   Masuk & Registrasi  (pages/auth.html)
   matches assets/img/mockup/login & registrasi.png
   ========================================================= */
.rn-auth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 6px;
}

.rn-auth-card { padding: 22px 22px 24px; }

.rn-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border-radius: 14px;
  background: rgba(104,64,45,.06);
  margin-bottom: 18px;
}

.rn-auth-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 750;
}
.rn-auth-tab i { font-style: normal; }
.rn-auth-tab.is-active {
  background: #fff;
  color: var(--rn-orange, #e8622a);
  box-shadow: 0 1px 3px rgba(104,64,45,.12);
}

.rn-auth-form { margin-top: 0; display: grid; gap: 14px; }
.rn-auth-form[hidden] { display: none; }

.rn-auth-reference { display: grid; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2, #f7f5f2); }
.rn-auth-reference[hidden] { display: none; }

.rn-auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.rn-auth-mini-link {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  color: var(--rn-orange, #e8622a);
  text-decoration: none;
}
.rn-auth-mini-link:hover { text-decoration: underline; }

.rn-auth-pw { position: relative; display: block; }
.rn-auth-pw input { padding-right: 42px; }
.rn-auth-pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 15px;
  opacity: .55;
  padding: 6px;
  line-height: 1;
}
.rn-auth-pw-toggle.is-on { opacity: 1; }

.rn-auth-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text);
}
.rn-auth-check input { width: auto; min-height: 0; }

.rn-auth-submit {
  width: 100%;
  justify-content: center;
  border: 0;
  cursor: pointer;
  min-height: 46px;
  font-weight: 800;
}

.rn-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.rn-auth-divider::before,
.rn-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.rn-auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  font-weight: 750;
}
.rn-auth-g {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
}
.rn-auth-g svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rn-auth-switch {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin: 2px 0 0;
}

.rn-auth-phone {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.rn-auth-phone-cc {
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(104,64,45,.05);
  font-weight: 800;
  color: var(--text);
}
.rn-auth-phone input { flex: 1; }

.rn-auth-rules {
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
  border-radius: 13px;
  background: rgba(104,64,45,.05);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}
.rn-auth-rules i { font-style: normal; margin-right: 6px; color: var(--muted); }
.rn-auth-rules li.is-ok { color: #2f9e59; }
.rn-auth-rules li.is-ok i { color: #2f9e59; }

.rn-auth-roles {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.rn-auth-roles legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.rn-auth-roles label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.rn-auth-roles input { width: auto; min-height: 0; }

.rn-auth-rail { display: grid; gap: 16px; }
.rn-auth-rail .panel { padding: 18px 18px 20px; }

.rn-auth-trust { display: grid; gap: 10px; margin-top: 10px; }
.rn-auth-trust > div {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.7);
}
.rn-auth-trust i {
  font-style: normal;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(232,117,88,.14);
  color: #c9502f;
}
.rn-auth-trust i svg, .rn-auth-trust i .rn-ic { width: 18px; height: 18px; }
.rn-auth-trust b { display: block; font-size: 13px; }
.rn-auth-trust span:not(.chip) { color: var(--muted); font-size: 12px; }

.chip.ok {
  background: rgba(47,158,89,.14);
  color: #2f9e59;
  border-color: rgba(47,158,89,.3);
}

.rn-auth-rolecards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.rn-auth-rolecard {
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.7);
  cursor: pointer;
  font: inherit;
}
.rn-auth-rolecard i {
  font-style: normal;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
  border-radius: 10px;
  background: rgba(232,117,88,.14);
  color: #c9502f;
}
.rn-auth-rolecard i svg, .rn-auth-rolecard i .rn-ic { width: 18px; height: 18px; }
.rn-auth-rolecard b { font-size: 13px; }
.rn-auth-rolecard span { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.rn-auth-rolecard.is-active {
  border-color: var(--rn-orange, #e8622a);
  box-shadow: 0 0 0 2px rgba(232,117,88,.18) inset;
}

.rn-auth-footer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--line);
}
.rn-auth-footer > div {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 10px;
}
.rn-auth-footer i {
  font-style: normal;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(232,117,88,.14);
  color: #c9502f;
}
.rn-auth-footer i svg, .rn-auth-footer i .rn-ic { width: 16px; height: 16px; }
.rn-auth-footer b { display: block; font-size: 12.5px; }
.rn-auth-footer span { color: var(--muted); font-size: 11.5px; }

.form-message.is-error { color: #d5453b; }
.form-message.is-ok { color: #2f9e59; }

@media (max-width: 960px) {
  .rn-auth-grid { grid-template-columns: 1fr; }
  .rn-auth-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .rn-auth-roles,
  .rn-auth-rolecards { grid-template-columns: 1fr; }
  .rn-auth-footer { grid-template-columns: 1fr; }
}

/* =========================================================
   Bencana Aktif  (pages/bencana-aktif.html)
   matches assets/img/mockup/bencana aktif.png
   ========================================================= */
.rn-ba-topbar { align-items: start; }
.rn-ba-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.rn-ba-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 8px 12px;
  min-width: 280px;
}
.rn-ba-search-ic { color: var(--muted); font-size: 15px; }
.rn-ba-search input {
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--text);
  width: 100%;
}

/* align-items: stretch (the grid default) so .rn-ba-list-panel's
   flex/flex:1-on-table-wrap trick below can actually fill the row height
   instead of shrink-wrapping its own (often shorter) content while the
   taller .rn-ba-summary sibling leaves it looking cut short. */
.rn-ba-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: stretch; }
.rn-ba-list-panel { display: flex; flex-direction: column; }
.rn-ba-list-panel .rn-table-wrap { flex: 1 1 auto; }
.rn-ba-list-panel .rn-table-foot { margin-top: auto; }
.rn-ba-list-actions { display: flex; gap: 8px; }

.rn-ba-table { table-layout: auto; }
.rn-ba-table th:not(:first-child),
.rn-ba-table td:not(:first-child) { text-align: center; white-space: nowrap; }
.rn-ba-table tbody tr { border-top: 1px solid var(--line); }

.rn-ba-row { cursor: pointer; }
.rn-ba-row:hover { background: rgba(232, 131, 93, .07); }
.rn-ba-row.is-selected { background: rgba(59, 130, 196, .10); }

.rn-ba-clickcell { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.rn-ba-clickcell:hover { color: var(--peach2); font-weight: 700; }

.rn-ba-name { display: flex; align-items: flex-start; gap: 8px; text-align: left; }
.rn-ba-name > span { display: flex; flex-direction: column; }
.rn-ba-name small { color: var(--muted); font-size: 12px; }
.rn-ba-caret {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  padding: 2px 4px;
  line-height: 1;
}
.rn-ba-caret:hover { color: var(--peach2); }

.rn-ba-sub td { background: var(--panel2); font-size: 13px; }
.rn-ba-subname {
  padding-left: 26px !important;
  position: relative;
  text-align: left !important;
}
.rn-ba-subname small { display: block; font-size: 11px; }
.rn-ba-subname > span {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-left: 2px solid var(--line2);
  border-bottom: 2px solid var(--line2);
}

.rn-ba-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}
.rn-ba-pill.is-kritis { background: rgba(216, 69, 69, .14); color: var(--red); }
.rn-ba-pill.is-siaga { background: rgba(221, 138, 47, .16); color: var(--orange); }
.rn-ba-pill.is-waspada { background: rgba(184, 137, 24, .14); color: var(--yellow); }
.rn-ba-pill.is-ok { background: rgba(47, 158, 89, .12); color: #2f9e59; }

.rn-ba-catbtn {
  width: 100%;
  font: inherit;
  cursor: pointer;
}
.rn-ba-catbtn.is-disabled { cursor: default; opacity: .55; }
.rn-ba-back { margin-bottom: 10px; }

.rn-ba-pager { display: flex; gap: 4px; }
.rn-ba-pg {
  min-width: 30px;
  height: 30px;
  border: 1px solid var(--line2);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.rn-ba-pg.is-active { background: var(--coral); border-color: var(--coral); color: #fff; }
.rn-ba-pg[disabled] { opacity: .4; cursor: default; }

.rn-ba-summary .panel-header { align-items: center; }
.rn-ba-sumcard { margin-bottom: 8px; }
.rn-ba-sum-head { display: flex; align-items: flex-start; gap: 10px; }
.rn-ba-sum-head b { display: block; }
.rn-ba-sum-head small { color: var(--muted); }
.rn-ba-sum-ic {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(239, 111, 94, .14);
  color: var(--coral);
  flex: none;
}
.rn-ba-sum-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0;
  font-size: 12px;
  color: var(--muted);
}
.rn-ba-sum-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rn-ba-stat {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}
.rn-ba-stat span { display: block; font-size: 11px; color: var(--muted); }
.rn-ba-stat b { font-size: 17px; }

.rn-ba-isu { display: flex; flex-direction: column; gap: 6px; }
.rn-ba-isu-item {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.rn-ba-isu-ic {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(221, 138, 47, .14);
  color: var(--orange);
  font-size: 13px;
}
.rn-ba-isu-item b { font-size: 13px; }
.rn-ba-isu-item small { display: block; font-size: 11px; color: var(--muted); }
.rn-ba-lvl {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.rn-ba-lvl.is-hi { background: rgba(216, 69, 69, .14); color: var(--red); }
.rn-ba-lvl.is-mid { background: rgba(221, 138, 47, .16); color: var(--orange); }

.rn-ba-sum-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.rn-ba-sum-actions .btn { width: 100%; text-align: center; }

@media (max-width: 1100px) {
  .rn-ba-grid { grid-template-columns: 1fr; }
}

/* KPI as button (clickable drill-down) — keep .kpi-card look */
.rn-kpi-btn {
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line);
  width: 100%;
  transition: transform .08s ease, box-shadow .15s ease;
}
.rn-kpi-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.rn-kpi-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* Isu item as link */
.rn-ba-isu-item.is-link { text-decoration: none; color: inherit; cursor: pointer; }
.rn-ba-isu-item.is-link:hover { border-color: var(--peach2); background: rgba(232,131,93,.06); }

/* Generic small "add" modal (e.g. quick-add forms opened from a panel header) */
.rn-add-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rn-add-modal[hidden] { display: none; }
.rn-add-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45, 33, 27, .55);
}
.rn-add-modal-card {
  position: relative;
  background: var(--panel2);
  border-radius: 16px;
  box-shadow: var(--shadow);
  width: min(560px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: 20px 22px 24px;
}
.rn-add-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.rn-add-modal-head h3 { margin: 0; }
.rn-add-modal-close {
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}
.rn-add-modal-close:hover { color: var(--red); }
.rn-add-modal .form-grid { grid-template-columns: 1fr 1fr; }
.rn-add-modal .form-actions { margin-top: 4px; }

/* KPI drill-down modal */
.rn-ba-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rn-ba-modal[hidden] { display: none; }
.rn-ba-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45, 33, 27, .55);
}
.rn-ba-modal-card {
  position: relative;
  background: var(--panel2);
  border-radius: 16px;
  box-shadow: var(--shadow);
  width: min(760px, 100%);
  max-height: 84vh;
  overflow: auto;
  padding: 20px 22px 24px;
}
.rn-ba-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rn-ba-modal-head h3 { margin: 0; }
.rn-ba-modal-close {
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}
.rn-ba-modal-close:hover { color: var(--red); }
.rn-ba-modal-body { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }
.rn-ba-modal-body .rn-table { width: 100%; }
.rn-ba-modal-body .rn-table td small { display: block; color: var(--muted); font-size: 11px; }

.rn-ba-drow { cursor: pointer; }
.rn-ba-drow:hover { background: rgba(59,130,196,.10); }

.rn-ba-dg { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff; }
.rn-ba-dg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rn-ba-dg-head b { font-size: 14px; }
.rn-ba-dg-head small { flex: 1 1 100%; }
.rn-ba-dg .btn.mini { margin-top: 8px; }
.rn-ba-drill-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rn-ba-drill-links .btn.mini { margin-top: 0; }

.rn-ba-ditems { display: flex; flex-direction: column; gap: 6px; }
.rn-ba-ditem {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel2);
  text-decoration: none;
  color: inherit;
}
.rn-ba-ditem:hover { border-color: var(--peach2); background: rgba(232,131,93,.07); }
.rn-ba-ditem b { font-size: 13px; }
.rn-ba-ditem small { display: block; font-size: 11px; color: var(--muted); }
.rn-ba-ditem-go { color: var(--muted); }

/* ============================================================
   Shared: .rn-donut (SVG-free CSS conic-gradient ring + legend)
   Reused by any mockup-alignment page needing a donut breakdown
   (Dapur Umum "Produksi Makanan", Shelter "Kapasitas & Okupansi",
   Search & Found "Status Identifikasi", Verification trust/risk).
   ============================================================ */
.rn-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rn-donut {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: conic-gradient(#e5e0da 0% 100%);
}
.rn-donut::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: var(--panel, #fff);
}
.rn-donut-center {
  position: absolute;
  inset: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
}
.rn-donut-center strong { font-size: 20px; line-height: 1; color: #2d211b; }
.rn-donut-center small { font-size: 11px; color: var(--muted); }
.rn-donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1 1 160px; min-width: 160px; }
.rn-donut-legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.rn-donut-legend li b { margin-left: auto; }
.rn-donut-legend li small { color: var(--muted); }
.rn-donut-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* ============================================================
   Dapur Umum — pages/dapur-umum.html
   ============================================================ */
/* column ratios measured on assets/img/mockup/dapur umum.png */
.rn-dp-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.rn-dp-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1.85fr) minmax(0, 1.7fr); align-items: stretch; gap: 12px; }
.rn-dp-row2 > .panel { padding: 14px; }
.rn-dp-page .rn-seeall { font-size: 10px; }
.rn-dp-page .rn-table th { text-transform: none; letter-spacing: 0; }
.rn-dp-grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1.3fr); align-items: stretch; }
.rn-dp-row4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.03fr); align-items: stretch; }
.rn-dp-page .panel { padding: 16px; }
.rn-dp-meta { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.rn-dp-meta b { color: var(--text, #2d211b); font-weight: 600; }
/* the public header already shows login state; the mock-up header has none */
.rn-dp-page .topbar [data-rn-session-pill] { display: none; }
.rn-dp-page .kpi-card .rn-dp-unit { font-size: 12px; font-weight: 600; color: var(--text, #2d211b); }
/* donut + legend side by side like the mock-up */
.rn-dp-donut-panel .rn-donut-wrap { flex-wrap: nowrap; gap: 14px; }
.rn-dp-donut-panel .rn-donut { width: 96px; height: 96px; }
.rn-dp-donut-panel .rn-donut::after, .rn-dp-donut-panel .rn-donut-center { inset: 14px; }
.rn-dp-donut-panel .rn-donut-legend { flex: 1 1 auto; min-width: 0; gap: 6px; }
.rn-dp-donut-panel .rn-donut-legend li { font-size: 11px; gap: 6px; align-items: flex-start; line-height: 1.35; }
.rn-dp-donut-panel .rn-donut-legend li b { margin-left: 0; font-weight: 600; }
.rn-dp-donut-panel .rn-donut-dot { margin-top: 3px; }
.rn-dp-page .kpi-card .rn-dp-unit { display: inline; }
.rn-dp-page .panel-header { gap: 8px; margin-bottom: 10px; }
.rn-dp-page .panel-header h3 { font-size: 13px; white-space: nowrap; }
.rn-dp-kritis-list .event-card h4 { font-size: 13px; margin: 0; }
.rn-dp-kritis-list .event-card p { font-size: 11px; margin: 2px 0 0; }

/* Target Layanan — plain stacked rows (matches the mock-up; no boxed cards
   since this panel sits in a narrow column next to the donut). */
.rn-dp-target { display: flex; flex-direction: column; gap: 14px; }
.rn-dp-target > div + div { padding-top: 12px; border-top: 1px solid var(--line); }
.rn-dp-target > div > span { display: block; font-size: 11px; color: var(--muted); }
.rn-dp-target b { display: block; font-size: 18px; margin-top: 4px; white-space: nowrap; }
.rn-dp-target b small { font-size: 12px; font-weight: 600; color: var(--text, #2d211b); }
.rn-dp-target small { color: var(--muted); font-size: 11px; }
.rn-dp-target .rn-dp-rasio { display: block; margin-top: 8px; }
.rn-dp-target-modal { flex-direction: row; gap: 12px; }
.rn-dp-target-modal > div { flex: 1 1 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; border-top: 0; }

.rn-dp-relawan-foot { margin-top: 8px; font-size: 11px; }
#relawanCount { font-size: 11px; }
.rn-dp-vol { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.rn-dp-vol-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: rgba(230,95,60,.14); color: #c2482c; }
.rn-dp-vol-main { min-width: 0; display: flex; flex-direction: column; }
.rn-dp-vol-main strong { font-size: 12px; }
.rn-dp-vol-main small { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-dp-vol-status { font-size: 11px; font-weight: 600; color: var(--muted); }
.rn-dp-vol-status.ok { color: #2f8a57; }
.rn-dp-vol-status.warning { color: #c97a1f; }
.rn-dp-page #relawanList { gap: 6px; }

/* KPI "Produksi Hari Ini" — produced vs capacity bar (mock-up) */
.rn-dp-kpi-bar { display: block; height: 5px; border-radius: 99px; background: rgba(230,95,60,.14); overflow: hidden; margin: 2px 0; }
.rn-dp-kpi-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--coral, #e65f3c); transition: width .4s; }

/* Jadwal Masak — one card per meal slot (time | meal + portions | status) */
.rn-dp-jadwal { display: flex; flex-direction: column; gap: 8px; }
.rn-dp-slot { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); color: inherit; text-decoration: none; }
.rn-dp-slot-time { font-size: 13px; text-align: center; padding: 6px 0; border-radius: 9px; background: var(--panel, #fff); border: 1px solid var(--line); }
.rn-dp-slot-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rn-dp-slot-main strong { font-size: 12px; }
.rn-dp-slot-main small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-dp-slot.is-empty .rn-dp-slot-time { color: var(--muted); }
.rn-dp-slot .chip { height: 20px; font-size: 10px; padding: 0 8px; }
.rn-dp-page .chip.info { background: rgba(59,130,196,.12); color: #2f6fa8; border-color: rgba(59,130,196,.25); }

/* Status Gas / BBM — icon | name, amount, days-left + bar | status */
.rn-dp-fuel { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.rn-dp-fuel-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--panel2);
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.rn-dp-fuel-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 20px;
  background: rgba(230,95,60,.16); color: var(--coral, #e65f3c); }
.rn-dp-fuel-icon.warning { background: rgba(221,138,47,.16); color: #c97a1f; }
.rn-dp-fuel-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rn-dp-fuel-body > span { font-size: 11px; color: var(--muted); }
.rn-dp-fuel-body b { font-size: 18px; line-height: 1.2; }
.rn-dp-fuel-body small { font-size: 11px; color: var(--muted); }
.rn-dp-fuel-card.is-empty b { font-size: 14px; color: var(--muted); }
.rn-dp-fuel-card.is-empty .rn-dp-fuel-icon { background: var(--line); color: var(--muted); }
.rn-dp-fuel-card > .chip { height: 20px; font-size: 10px; padding: 0 8px; }
.rn-dp-fuel-bar { display: block; height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 3px; }
.rn-dp-fuel-bar i { display: block; height: 100%; border-radius: inherit; background: #3f8f65; }
.rn-dp-fuel-bar.warning i { background: #dd8a2f; }
.rn-dp-fuel-bar.danger i { background: var(--coral, #e65f3c); }

.rn-dp-kritis-list .event-card { padding: 10px 12px; }

/* Evidence strip — square thumbnails in a row + an "Unggah Foto" tile,
   matching the mock-up's photo row. Placeholder tiles (no real photo yet)
   render as a labeled gradient + icon, never a fabricated photograph. */
.rn-dp-evidence-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.rn-dp-evidence-strip .rn-bukti-thumb,
.rn-dp-evidence-strip .rn-dp-photo-placeholder,
.rn-dp-evidence-strip .rn-dp-upload-tile {
  width: 92px; height: 92px; border-radius: 12px; flex: 0 0 auto;
}
.rn-dp-evidence-strip .rn-bukti-thumb { height: 92px; }
.rn-dp-photo-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: #fff; font-size: 22px;
  background: linear-gradient(135deg, var(--coral, #e8835d), #d98a3f);
  position: relative;
}
.rn-dp-photo-placeholder small { font-size: 9px; color: rgba(255,255,255,.85); text-align: center; padding: 0 4px; }
.rn-dp-upload-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; border: 1.5px dashed var(--line); background: var(--panel2); color: var(--muted);
  font-size: 11px; text-decoration: none; text-align: center;
}
.rn-dp-upload-tile span { font-size: 20px; }

@media (max-width: 1100px) {
  .rn-dp-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rn-dp-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-dp-grid3, .rn-dp-row4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rn-dp-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-dp-row2 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Shelter & Akomodasi — pages/shelter-detail.html
   ============================================================ */
.rn-sh-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.rn-sh-row-a { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.rn-sh-row-a.rn-sh-row-b { grid-template-columns: minmax(0, 2fr) minmax(0, 1.25fr) minmax(0, 1fr); }
/* mock-up density (scoped to Shelter, Dapur Umum, Manajemen Distribusi: style.css is shared by ~38 pages):
   icon left, label / value / note stacked in the right column */
:is(.rn-sh-page, .rn-dp-page, .rn-md-page, .rn-dense) .kpi-grid .kpi-card {
  min-height: 96px; padding: 14px; border-radius: 16px;
  grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  align-items: start; row-gap: 2px; text-align: left;
}
:is(.rn-sh-page, .rn-dp-page, .rn-md-page, .rn-dense) .kpi-grid .kpi-icon { grid-row: 1 / span 3; width: 44px; height: 44px; }
:is(.rn-sh-page, .rn-dp-page, .rn-md-page, .rn-dense) .kpi-grid .kpi-card > span:not(.kpi-icon),
:is(.rn-sh-page, .rn-dp-page, .rn-md-page, .rn-dense) .kpi-grid .kpi-card > strong,
:is(.rn-sh-page, .rn-dp-page, .rn-md-page, .rn-dense) .kpi-grid .kpi-card > small { grid-column: 2; grid-row: auto; margin: 0; }
:is(.rn-sh-page, .rn-dp-page, .rn-md-page, .rn-dense) .kpi-grid .kpi-card > span:not(.kpi-icon) { font-size: 11px; line-height: 1.3; }
:is(.rn-sh-page, .rn-dp-page, .rn-md-page, .rn-dense) .kpi-grid .kpi-card > strong { font-size: 20px; line-height: 1.2; white-space: nowrap; }
:is(.rn-sh-page, .rn-dp-page, .rn-md-page, .rn-dense) .kpi-grid .kpi-card > small { font-size: 10px; line-height: 1.3; }
.rn-dp-page .kpi-grid .kpi-card { padding: 12px; column-gap: 8px; grid-template-columns: 36px minmax(0, 1fr); min-height: 88px; }
.rn-dp-page .kpi-grid .kpi-icon { width: 36px; height: 36px; }
.rn-dp-page .kpi-grid .kpi-card > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-sh-page .panel { padding: 16px; }
:is(.rn-sh-page, .rn-dp-page, .rn-md-page, .rn-dense) .panel-header h3 { font-size: 14px; }
:is(.rn-sh-page, .rn-dp-page, .rn-md-page, .rn-dense) .rn-table { font-size: 11px; }
:is(.rn-sh-page, .rn-dp-page, .rn-md-page, .rn-dense) .rn-table th { font-size: 10px; padding: 6px 5px; white-space: nowrap; }
:is(.rn-sh-page, .rn-dp-page, .rn-md-page, .rn-dense) .rn-table td { padding: 8px 5px; white-space: nowrap; }
.rn-sh-page .rn-table td:first-child { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
/* Daftar Shelter: Lokasi / Kelompok Rentan: Lokasi Terbanyak — truncate, full text in title */
.rn-sh-page #akomodasiRelawanBody td:first-child { max-width: 90px; }
.rn-sh-page #daftarShelterBody td:nth-child(2),
.rn-sh-page #kelompokRentanBody td:nth-child(4) { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.rn-sh-page #peringatanList { gap: 8px; }
.rn-sh-page #peringatanList .event-card { padding: 8px 10px; border-radius: 10px; }
.rn-sh-page #peringatanList .event-card h4 { font-size: 12px; margin: 0; }
.rn-sh-page #peringatanList .event-card p { font-size: 11px; margin: 2px 0 0; }
.rn-sh-page #peringatanList .event-card .chip,
.rn-sh-page #peringatanList .event-card [class*=pill] { font-size: 10px; padding: 2px 8px; }
.rn-sh-kebutuhan { gap: 6px; }
.rn-sh-kebutuhan .event-card { padding: 6px 10px; border-radius: 10px; min-width: 0; }
.rn-sh-kebutuhan .event-main { min-width: 0; gap: 6px; }
.rn-sh-page .rn-sh-kebutuhan .chip,
:is(.rn-sh-page, .rn-dp-page, .rn-md-page, .rn-dense) .rn-table .chip,
:is(.rn-sh-page, .rn-dp-page, .rn-md-page, .rn-dense) .rn-table [class*=pill] { height: 20px; font-size: 10px; padding: 0 7px; }
.rn-sh-kebutuhan .event-card p { display: none; }
.rn-sh-kebutuhan h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; }
.rn-sh-wash { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rn-sh-wash-tile { border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.rn-sh-wash-tile h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; color: #2563eb; }
.rn-sh-wash-row { display: flex; justify-content: space-between; gap: 6px; padding: 4px 0; font-size: 11px; }
.rn-sh-wash-row b { white-space: nowrap; }
.rn-sh-wash-row.is-bad b { color: #c0392b; }
.rn-sh-need-icon {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(230,95,60,.12); color: #c9502f;
}
.rn-sh-need-icon svg, .rn-sh-need-icon .rn-ic { width: 14px; height: 14px; }
.rn-sh-gap-note { font-size: 12px; line-height: 1.5; margin-top: 8px; }

.rn-sh-sanitasi-row, .rn-sh-checkinout-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.rn-sh-sanitasi-row:last-of-type, .rn-sh-checkinout-row:last-of-type { border-bottom: 0; }
.rn-sh-checkinout-row b { font-size: 18px; }
.rn-sh-checkinout-row small { color: var(--muted); }
.rn-sh-checkinout-row .rn-in { color: #2f9e59; }
.rn-sh-checkinout-row .rn-out { color: #c0392b; }

.rn-sh-alert { display: block; text-decoration: none; color: inherit; }
.rn-sh-alert:hover { background: rgba(216,69,69,.06); }

@media (max-width: 1100px) {
  .rn-sh-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rn-sh-row-a, .rn-sh-row-a.rn-sh-row-b { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rn-sh-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Manajemen Relawan — pages/management-relawan.html
   ============================================================ */
/* column ratios measured on assets/img/mockup/manajemen relawan.png */
.rn-rw-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.rn-rw-row2 { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: stretch; }
.rn-rw-row3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.08fr); align-items: stretch; }
.rn-page-meta { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.rn-rw-page .topbar [data-rn-session-pill] { display: none; }
.rn-rw-page .panel { padding: 16px; }
.rn-rw-page .panel-header { gap: 8px; margin-bottom: 10px; }
.rn-rw-page .panel-header h3 { font-size: 14px; white-space: nowrap; }
.rn-rw-page .panel-header small { font-size: 11px; }
/* KPI: label / value / note on the left, round icon on the right (mock-up) */
.rn-rw-page .kpi-grid .kpi-card {
  min-height: 92px; padding: 14px; border-radius: 16px; text-align: left;
  grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: auto auto 1fr; align-items: start; row-gap: 2px; column-gap: 8px;
}
.rn-rw-page .kpi-grid .kpi-icon { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 44px !important; height: 44px !important; border-radius: 50%;
  display: grid; place-items: center; }
.rn-rw-page .kpi-grid .kpi-icon .rn-ic { margin: 0; }
.rn-rw-page .kpi-grid .kpi-card > span:not(.kpi-icon),
.rn-rw-page .kpi-grid .kpi-card > strong,
.rn-rw-page .kpi-grid .kpi-card > small { grid-column: 1; grid-row: auto; margin: 0; }
.rn-rw-page .kpi-grid .kpi-card > span:not(.kpi-icon) { font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-rw-page .kpi-grid .kpi-card > strong { font-size: 22px; line-height: 1.25; }
.rn-rw-page .kpi-grid .kpi-card > small { font-size: 10px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Daftar Relawan: one line per volunteer */
.rn-rw-page .rn-table { font-size: 11px; table-layout: fixed; width: 100%; }
.rn-rw-page .kpi-grid .kpi-card > strong { color: var(--text); }
.rn-rw-page .rn-table th { font-size: 10px; padding: 6px 5px; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.rn-rw-page .rn-table td { padding: 7px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-rw-page .rn-table .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 20px; vertical-align: middle; }
.rn-rw-page .rn-table .chip.rn-rw-skill { flex: 0 1 auto; min-width: 0; }
.rn-rw-page .rn-rw-skills { max-width: 100%; }
.rn-rw-person b { overflow: hidden; text-overflow: ellipsis; }
.rn-rw-page .rn-table .chip { height: 20px; font-size: 10px; padding: 0 7px; }
.rn-rw-person { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rn-rw-avatar { width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 9px; font-weight: 700;
  background: rgba(230,95,60,.14); color: #c2482c; }
.rn-rw-skills { display: flex; gap: 4px; align-items: center; min-width: 0; }
.rn-rw-page .rn-table .chip.rn-rw-skill { background: rgba(230,95,60,.1); color: #c2482c; border-color: transparent; font-weight: 600; }
.rn-rw-more { font-size: 10px; color: var(--muted); }
.rn-rw-search { margin-bottom: 10px; }
.rn-rw-search input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel2); font-size: 13px;
}

.rn-rw-skill-list { display: flex; flex-direction: column; gap: 9px; }
.rn-rw-page .rn-rw-skill-head { font-size: 12px; }
.rn-rw-skill-row { display: flex; flex-direction: column; gap: 5px; }
.rn-rw-skill-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.rn-rw-skill-bar { height: 5px; border-radius: 4px; background: var(--line); overflow: hidden; }
.rn-rw-skill-bar i { display: block; height: 100%; background: var(--coral, #e8835d); border-radius: 4px; }

.rn-rw-jenis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rn-rw-jenis-tile {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--panel2);
  display: flex; flex-direction: column; gap: 4px;
}
.rn-rw-page .rn-rw-jenis-tile { align-items: center; text-align: center; padding: 10px; background: rgba(230,95,60,.05); }
.rn-rw-tile-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(230,95,60,.14); color: #c2482c; font-style: normal; }
.rn-rw-tile-icon svg { width: 16px; height: 16px; }
.rn-rw-page .rn-rw-safety-tile { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; align-items: center; }
.rn-rw-safety-tile .rn-rw-tile-icon { grid-row: 1 / span 3; }
.rn-rw-page .rn-rw-safety-tile > span, .rn-rw-page .rn-rw-safety-tile > b, .rn-rw-page .rn-rw-safety-tile > small { grid-column: 2; margin: 0; line-height: 1.3; }
.rn-rw-jenis-tile b { font-size: 20px; }
.rn-rw-jenis-tile span { font-size: 12px; color: var(--muted); }

@media (max-width: 1100px) {
  .rn-rw-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rn-rw-row2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .rn-rw-row3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* mock-up (HP): compact tiles — icon on top, value, label; no note line */
  /* #relawanKpi + !important: the site-wide mobile rules force every .kpi-grid/.kpi-card with (0,5,1) !important selectors */
  #relawanKpi { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  #relawanKpi .kpi-card {
    min-height: 0 !important; padding: 10px 6px !important; grid-template-columns: minmax(0, 1fr) !important; text-align: center !important; justify-items: center !important; row-gap: 2px;
  }
  #relawanKpi .kpi-icon { grid-column: 1; grid-row: 1; width: 32px !important; height: 32px !important; }
  #relawanKpi .kpi-card > strong { grid-row: 2; font-size: 18px; }
  #relawanKpi .kpi-card > span:not(.kpi-icon) { grid-column: 1 !important; grid-row: 3; max-width: 100%; font-size: 10px; }
  #relawanKpi .kpi-card > strong, #relawanKpi .kpi-icon { grid-column: 1 !important; }
  #relawanKpi .kpi-card > small { display: none; }
  /* Daftar Relawan: each row becomes a card (name + status, org + durasi, skill + lokasi) */
  .rn-rw-page .rn-table-wrap { overflow: visible; }
  .rn-rw-page .rn-table, .rn-rw-page .rn-table tbody { display: block; }
  .rn-rw-page .rn-table colgroup, .rn-rw-page .rn-table thead { display: none; }
  .rn-rw-page #daftarRelawanBody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 3px;
    padding: 10px 0; border-bottom: 1px solid var(--line);
  }
  .rn-rw-page #daftarRelawanBody td { display: block; padding: 0; border: 0; max-width: none; }
  .rn-rw-page #daftarRelawanBody td[colspan] { grid-column: 1 / -1; }
  .rn-rw-page #daftarRelawanBody td:nth-child(1) { grid-area: 1 / 1; font-size: 12px; }
  .rn-rw-page #daftarRelawanBody td:nth-child(6) { grid-area: 1 / 2; text-align: right; }
  .rn-rw-page #daftarRelawanBody td:nth-child(2) { grid-area: 2 / 1; padding-left: 31px; color: var(--muted); }
  .rn-rw-page #daftarRelawanBody td:nth-child(5) { grid-area: 2 / 2; text-align: right; color: var(--muted); max-width: 120px; }
  .rn-rw-page #daftarRelawanBody td:nth-child(3) { grid-area: 3 / 1; padding-left: 31px; }
  .rn-rw-page #daftarRelawanBody td:nth-child(4) { grid-area: 3 / 2; text-align: right; color: var(--muted); max-width: 140px; }
  .rn-rw-jenis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Manajemen Distribusi — pages/management-distribusi.html
   ============================================================ */
/* column ratios measured on assets/img/mockup/manajemen distribusi.png */
.rn-md-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.rn-md-row2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.rn-md-page .rn-md-row2 { grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); align-items: stretch; }
.rn-md-page .rn-md-row2.rn-md-row3 { grid-template-columns: minmax(0, 2.45fr) minmax(0, 1fr); }
.rn-md-page .panel { padding: 16px; }
.rn-md-page .topbar [data-rn-session-pill] { display: none; }
.rn-md-page .topbar { align-items: flex-start; }
.rn-md-page .topbar .rn-md-toolbar { flex: 0 1 560px; justify-content: flex-end; flex-wrap: nowrap; margin: 0; }
.rn-md-page .rn-md-toolbar input[type="search"], .rn-md-page .rn-md-toolbar select { min-height: 36px; font-size: 12px; border-radius: 10px; }
.rn-md-page .rn-md-toolbar input[type="search"] { flex: 1 1 220px; min-width: 0; }
.rn-md-page .rn-md-toolbar select { flex: 0 0 auto; max-width: 150px; }
.rn-md-page .rn-md-toolbar .btn { min-height: 36px; padding: 0 14px; font-size: 12px; }
.rn-md-page .kpi-grid .kpi-card { padding: 12px; column-gap: 8px; grid-template-columns: 36px minmax(0, 1fr); min-height: 88px; }
.rn-md-page .kpi-grid .kpi-icon { width: 36px; height: 36px; }
.rn-md-page .kpi-grid .kpi-card > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-md-page .kpi-grid .kpi-card > .rn-dp-kpi-bar { grid-column: 1 / -1; margin-top: 6px; }
.rn-md-page .kpi-grid .kpi-card > strong { color: var(--text); }
/* mock-up: plain white cards, one colour per moda on the icon chip and its bar */
.rn-md-page .kpi-grid .kpi-card { background: var(--panel, #fff); border-color: var(--line); }
.rn-md-page .kpi-grid .kpi-icon { border-radius: 50%; display: grid; place-items: center; align-self: start; }
.rn-md-page .kpi-grid .kpi-icon .rn-ic { margin: 0; }
.rn-md-page .kpi-grid .kpi-card > span:not(.kpi-icon):not(.rn-dp-kpi-bar) { color: var(--text); font-weight: 600; font-size: 10.5px; }
.rn-md-page .kpi-grid .kpi-icon svg { width: 19px; height: 19px; }
.rn-md-page [data-kpi="transport"] { --md-c: #e0503a; --md-bg: rgba(224,80,58,.14); }
.rn-md-page [data-kpi="darat"] { --md-c: #e08a1e; --md-bg: rgba(224,138,30,.16); }
.rn-md-page [data-kpi="laut"] { --md-c: #2f6fc4; --md-bg: rgba(47,111,196,.14); }
.rn-md-page [data-kpi="udara"] { --md-c: #2f9a5c; --md-bg: rgba(47,154,92,.15); }
.rn-md-page [data-kpi="kebutuhan"] { --md-c: #e08a1e; --md-bg: rgba(224,138,30,.16); }
.rn-md-page [data-kpi="terhambat"] { --md-c: #d23c3c; --md-bg: rgba(210,60,60,.13); }
.rn-md-page .kpi-grid [data-kpi] .kpi-icon { background: var(--md-bg); color: var(--md-c); }
.rn-md-page .kpi-grid [data-kpi] .rn-dp-kpi-bar { background: var(--md-bg); }
.rn-md-page .kpi-grid [data-kpi] .rn-dp-kpi-bar i { background: var(--md-c); }
.rn-md-page .panel-header { gap: 8px; margin-bottom: 10px; }
.rn-md-page .panel-header h3 { font-size: 14px; white-space: nowrap; }
.rn-md-page .panel-header p { font-size: 11px; margin: 2px 0 0; }
.rn-md-page .rn-table { table-layout: fixed; width: 100%; }
.rn-md-page .rn-table th { text-transform: none; letter-spacing: 0; }
.rn-md-page .rn-table td { overflow: hidden; text-overflow: ellipsis; }
.rn-md-page .rn-table .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 20px; vertical-align: middle; }
.rn-md-page .rn-md-xref { margin: 0; font-size: 11px; }
/* Papan Pencocokan: four compact columns, one line per item (mock-up) */
.rn-md-page .rn-md-board { gap: 8px; }
.rn-md-page .rn-md-board-col { padding: 8px; gap: 6px; min-height: 0; border-radius: 10px; }
.rn-md-page .rn-md-board-head { font-size: 11px; }
.rn-md-page .rn-md-board-list { max-height: 196px; gap: 4px; }
.rn-md-page .rn-md-board-item { padding: 5px 7px; border-radius: 7px; }
.rn-md-page .rn-md-board-item b, .rn-md-page .rn-md-board-item small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-md-page .rn-md-board-item b { font-size: 11px; padding-right: 2px; }
.rn-md-page .rn-md-board-item small { font-size: 10px; }
.rn-md-page .rn-md-board-item .chip { margin: 0 2px 0 0; height: 15px; line-height: 15px; font-size: 9px; padding: 0 5px; vertical-align: 1px; }
.rn-md-page .rn-md-row3 { align-items: start; }
.rn-md-page #peringatanList { max-height: 560px; overflow-y: auto; padding-right: 2px; }
.rn-md-page .rn-md-alur-wrap { max-height: 520px; overflow-y: auto; }
.rn-md-page .rn-md-alur-wrap thead th { position: sticky; top: 0; z-index: 1; background: var(--panel, #fff); }
.rn-md-page .rn-md-row3 > .panel:first-child .rn-table td { padding: 7px 5px; }
.rn-md-page .rn-md-board-foot { margin-top: 10px; font-size: 11px; }
/* Ruang Transportasi: donut + legend side by side, units table fits the panel */
.rn-md-page .rn-donut-wrap { flex-wrap: nowrap; gap: 14px; margin: 8px 0; }
.rn-md-page .rn-donut { width: 104px; height: 104px; flex: 0 0 auto; }
.rn-md-page .rn-donut::after, .rn-md-page .rn-donut-center { inset: 14px; }
.rn-md-page .rn-donut-legend { flex: 1 1 auto; min-width: 0; gap: 8px; }
.rn-md-page .rn-donut-legend li { font-size: 11px; }
.rn-md-page .rn-tabs .rn-tab { padding: 5px 12px; font-size: 12px; }
.rn-md-page #peringatanList { gap: 8px; }
.rn-md-page #peringatanList .event-card { padding: 8px 10px; border-radius: 10px; }
.rn-md-page #peringatanList .event-card h4 { font-size: 12px; margin: 0; }
.rn-md-page #peringatanList .event-card p { font-size: 11px; margin: 2px 0 0; }
.rn-md-page #peringatanList .event-card .chip { height: 20px; font-size: 10px; padding: 0 7px; }
.rn-md-page .rn-lacak-btn { font-size: 10px; padding: 2px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-md-page .rn-md-ref-list { font-size: 11px; line-height: 1.6; }
.rn-md-row2--solo { grid-template-columns: minmax(0, 1fr); }

.rn-md-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.rn-md-board-col { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.rn-md-board-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; }
.rn-md-board-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.rn-md-board-item { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; position: relative; }
.rn-md-board-item b { display: block; font-size: 12px; }
.rn-md-board-item small { display: block; font-size: 11px; color: var(--muted); }
.rn-md-board-item .chip { margin-top: 4px; font-size: 10px; }
.rn-md-board-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.rn-md-board-foot .btn.mini { padding: 6px 12px; font-size: 12px; }

.rn-md-ref-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.rn-md-ref-list code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; }

/* Armada Distribusi — space/booking + kurir pickup */
.rn-md-wide { grid-template-columns: minmax(0, 1fr); }
.rn-md-xref { font-size: 12px; margin: -6px 0 2px; }
.rn-md-toolbar { display: flex; gap: 10px; align-items: center; margin: 0 0 4px; flex-wrap: wrap; }
.rn-md-toolbar input[type="search"] { flex: 1 1 260px; min-width: 200px; min-height: 40px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font: inherit; background: #fff; }
.rn-md-toolbar select { min-height: 40px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font: inherit; background: #fff; }
.rn-md-toolbar .btn { white-space: nowrap; border: 0; cursor: pointer; }
@media (max-width: 640px) { .rn-md-toolbar .btn { flex: 1 1 100%; } }
.rn-md-armada-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.rn-md-armada-table td small { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
.rn-md-cap { min-width: 150px; }
.rn-md-cap-bar { height: 7px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); overflow: hidden; position: relative; }
.rn-md-cap-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: #2ea066; }
.rn-md-cap-bar i.warn { background: #e09900; }
.rn-md-cap-bar i.bad { background: #d84545; }
.rn-md-book-btn { padding: 4px 10px; font-size: 11px; }
.rn-md-armada-link { display: inline-block; margin-left: 8px; font-size: 11px; white-space: nowrap; }
.rn-md-bk-row td { background: var(--panel2); }
.rn-md-bk-list { display: flex; flex-direction: column; gap: 8px; }
.rn-md-bk-hd { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; }
.rn-md-bk { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) auto; gap: 8px 14px; align-items: start; font-size: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.rn-md-bk-main b { font-size: 12px; }
.rn-md-bk-contacts { display: flex; flex-direction: column; gap: 2px; }
.rn-md-bk-contacts span { font-size: 11px; color: var(--muted); }
.rn-md-bk-contacts b { color: var(--text); }
.rn-md-bk-meta { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.rn-md-bk-id { font-size: 10px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }

.rn-md-bkctx { display: flex; flex-direction: column; gap: 3px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; font-size: 12px; }
.rn-md-bkctx b { font-size: 13px; }
.rn-md-bkctx span { color: var(--muted); }
.rn-md-bkctx-note { color: #8a5a45 !important; font-weight: 700; }
.rn-md-radio-row { display: flex; flex-wrap: wrap; gap: 14px; }
.rn-md-radio { display: flex; align-items: center; gap: 6px; flex-direction: row; font-weight: 600; font-size: 13px; }
.rn-md-radio input { width: auto; min-height: 0; }
.rn-md-radio.is-disabled { opacity: .45; }

.rn-md-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.rn-md-dl { display: flex; flex-direction: column; padding: 5px 0; border-bottom: 1px solid var(--line); }
.rn-md-dl span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.rn-md-dl b { font-size: 13px; }
.rn-md-detail-h { margin: 14px 0 6px; font-size: 13px; }
.rn-md-detail-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .rn-md-detail { grid-template-columns: minmax(0, 1fr); } }

/* "Perbarui armada" editor inside the Posko Distribusi armada-detail modal */
.rn-pd-edit { margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; background: var(--panel2); }
.rn-pd-edit > summary { cursor: pointer; font-size: 13px; font-weight: 700; padding: 8px 0; }
.rn-pd-edit[open] > summary { margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.rn-pd-edit .rn-form { padding-bottom: 10px; }

.rn-md-pm { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.rn-md-pm-head { font-size: 13px; }
.rn-md-pm-cands { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 1100px) {
  .rn-md-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rn-md-row2 { grid-template-columns: minmax(0, 1fr); }
  .rn-md-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-md-bk { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 640px) {
  .rn-md-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-md-board { grid-template-columns: minmax(0, 1fr); }
  .rn-md-page .topbar .rn-md-toolbar { flex: 1 1 100%; flex-wrap: wrap; }
  .rn-md-page .rn-md-toolbar input[type="search"] { flex: 1 1 100%; }
  .rn-md-page .rn-md-toolbar select { flex: 1 1 100%; max-width: none; }
  /* phones: keep the columns that identify a row (unit/kapasitas/status; id/bantuan/moda/status/trace) */
  .rn-md-page #transportUnitBody td:nth-child(3), .rn-md-page .rn-md-row2:not(.rn-md-row3) .rn-table th:nth-child(3),
  .rn-md-page #alurBody td:is(:nth-child(2), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7)),
  .rn-md-page .rn-md-alur-wrap th:is(:nth-child(2), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7)) { display: none; }
  .rn-md-page .rn-md-row2 .rn-table colgroup { display: none; }
  .rn-md-page .rn-md-row2 .rn-table td { max-width: 150px; }
  .rn-md-page #alurBody td:is(:nth-child(1), :nth-child(3)) { max-width: 96px; }
}

/* Manajemen Relawan — header CTA + Akomodasi & Keselamatan (real data) */
.rn-rw-header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rn-rw-safety-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.rn-rw-safety-tile { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel2); }
.rn-rw-safety-tile span { display: block; font-size: 10px; color: var(--muted); }
.rn-rw-safety-tile b { display: block; font-size: 18px; margin-top: 2px; }
.rn-rw-page .rn-rw-safety-tile { padding: 8px 10px; }
.rn-rw-page #safetyBriefingList .event-card,
.rn-rw-page #papanPenugasan .event-card { padding: 8px 10px; border-radius: 10px; }
.rn-rw-page #safetyBriefingList h4, .rn-rw-page #papanPenugasan h4 { font-size: 12px; margin: 0; }
.rn-rw-page #papanPenugasan p { font-size: 11px; margin: 2px 0 0; }
.rn-rw-page #papanPenugasan .chip { height: 20px; font-size: 10px; padding: 0 7px; }
.rn-rw-page #papanPenugasan { gap: 8px; }
.rn-rw-safety-tile small { color: var(--muted); font-size: 11px; }
.rn-rw-checkbox-label { display: flex; align-items: center; gap: 8px; flex-direction: row; font-size: 13px; }
.rn-rw-checkbox-label input { width: auto; }

/* ============================================================
   Evidence Center — pages/evidence.html
   ============================================================ */
.rn-ev-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.rn-ev-modul-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.rn-ev-chip {
  border: 1px solid var(--line); background: var(--panel2); border-radius: 999px;
  padding: 7px 14px; font-size: 12px; cursor: pointer; color: inherit;
}
.rn-ev-chip span { color: var(--muted); margin-left: 4px; }
.rn-ev-chip.is-active { background: var(--coral, #e8835d); border-color: var(--coral, #e8835d); color: #fff; }
.rn-ev-chip.is-active span { color: rgba(255,255,255,.85); }

.rn-ev-toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.rn-ev-toolbar input[type="search"] {
  flex: 1 1 260px; min-width: 0; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel2); font-size: 13px;
}

.rn-ev-table td { vertical-align: middle; }
.rn-ev-cell { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.rn-ev-thumb { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; background: var(--panel2); display: flex; align-items: center; justify-content: center; }
.rn-ev-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rn-ev-thumb-icon { font-size: 20px; }
.rn-ev-cell b { display: block; font-size: 13px; max-width: 220px; white-space: normal; }
.rn-ev-cell small { display: block; color: var(--muted); font-size: 11px; }
.rn-ev-geo { color: var(--muted); font-size: 10px; }

.rn-ev-pager { display: flex; gap: 4px; }
.rn-ev-page {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel2); font-size: 12px; cursor: pointer;
}
.rn-ev-page.is-active { background: var(--coral, #e8835d); border-color: var(--coral, #e8835d); color: #fff; }

@media (max-width: 1100px) {
  .rn-ev-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rn-ev-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-ev-cell b { max-width: 140px; }
}

/* ============================================================
   Verification & Approval — pages/verification-approval.html
   ============================================================ */
.rn-va-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rn-va-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.rn-va-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.rn-va-tabs .rn-tab { padding: 6px 12px; font-size: 11px; }

.rn-va-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.rn-va-fields div { background: var(--panel2); border-radius: 8px; padding: 6px 8px; }
.rn-va-fields span { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; }
.rn-va-fields b { font-size: 12px; }

.rn-va-trust { display: flex; gap: 16px; margin: 10px 0; padding: 10px; background: var(--panel2); border-radius: 10px; }
.rn-va-trust span { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; }
.rn-va-trust b { font-size: 16px; }

.rn-va-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rn-va-steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.rn-va-steps li.is-done { color: #2f9e59; }
.rn-va-steps li.is-current { color: #2d211b; font-weight: 700; }
.rn-va-step-num {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 11px; flex: 0 0 auto;
}
.rn-va-steps li.is-done .rn-va-step-num { background: #2f9e59; border-color: #2f9e59; color: #fff; }
.rn-va-steps li.is-current .rn-va-step-num { background: var(--coral, #e8835d); border-color: var(--coral, #e8835d); color: #fff; }

.rn-va-timeline { list-style: none; margin: 0; padding: 0; }
.rn-va-timeline li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.rn-va-timeline li:last-child { border-bottom: 0; }
.rn-va-timeline b { font-size: 11px; color: var(--muted); }

.rn-va-actionbar .rn-va-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rn-va-action {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px;
  border-radius: 14px; font-weight: 700;
}
.rn-va-action small { font-weight: 400; opacity: .85; }
.rn-va-action-icon { display: inline-flex; width: 20px; height: 20px; }
.rn-va-action-icon svg, .rn-va-action-icon .rn-ic { width: 20px; height: 20px; }
.rn-va-action.ok { background: rgba(47,158,89,.12); color: #2f9e59; border-color: rgba(47,158,89,.3); }
.rn-va-action.danger { background: rgba(216,69,69,.12); color: #c23a3a; border-color: rgba(216,69,69,.3); }
.rn-va-action.warning { background: rgba(221,138,47,.14); color: #b0741f; border-color: rgba(221,138,47,.3); }
.rn-va-action:disabled { opacity: .45; cursor: not-allowed; }
.rn-va-merge-note { margin-top: 12px; font-size: 12px; }

@media (max-width: 1100px) {
  .rn-va-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rn-va-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rn-va-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-va-actionbar .rn-va-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-va-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Organisasi & Posko — pages/organisasi-posko.html
   ============================================================ */
.rn-op-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rn-op-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }

.rn-op-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.rn-op-org, .rn-op-tree-org {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel2); cursor: pointer;
}
.rn-op-org.is-selected, .rn-op-tree-node.is-selected .rn-op-tree-org { border-color: var(--coral, #e8835d); background: rgba(232,131,93,.08); }
.rn-op-org-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.rn-op-org small { color: var(--muted); font-size: 11px; }

.rn-op-tree { display: flex; flex-direction: column; gap: 10px; }
.rn-op-tree-node { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rn-op-tree-org { display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 0; }
.rn-op-tree-poskos { display: flex; flex-direction: column; }
.rn-op-posko-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 8px 24px;
  border-top: 1px solid var(--line); text-decoration: none; color: inherit; font-size: 12px;
}
.rn-op-posko-row:hover { background: rgba(232,131,93,.06); }
.rn-op-tree-poskos .rn-muted { padding: 8px 12px 8px 24px; display: block; border-top: 1px solid var(--line); font-size: 12px; }

.rn-op-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rn-op-detail-tabs { margin: 12px 0; flex-wrap: wrap; }
.rn-op-detail-tabs .rn-tab { font-size: 11px; padding: 6px 10px; }
.rn-op-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.rn-op-detail-row:last-child { border-bottom: 0; }
.rn-op-checklist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.rn-op-checklist li.is-done { color: #2f9e59; }

@media (max-width: 1100px) {
  .rn-op-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-op-row { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Registrasi & Verifikasi Posko — pages/registrasi-posko.html
   ============================================================ */
.rn-rp-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rn-rp-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.rn-rp-full { grid-column: 1 / -1; }
.rn-rp-search { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); font-size: 13px; min-width: 200px; }

.rn-rp-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rn-rp-checklist li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.rn-rp-checklist li.is-done { color: #2f9e59; }
.rn-rp-checklist li small { margin-left: auto; color: var(--muted); font-size: 11px; }
.rn-rp-check-icon { display: inline-flex; flex: none; width: 16px; height: 16px; color: var(--orange, #dd8a2f); }
.rn-rp-check-icon.done { color: #2f9e59; }
.rn-rp-check-icon svg, .rn-rp-check-icon .rn-ic { width: 16px; height: 16px; }
.rn-rp-note { margin-top: 10px; }

.rn-rp-actions { display: flex; flex-direction: column; gap: 8px; }
.btn.danger { background: rgba(216,69,69,.1); color: #c23a3a; border-color: rgba(216,69,69,.3); }

@media (max-width: 1100px) {
  .rn-rp-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-rp-row { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Kebutuhan & Manajemen Alat Kerja — pages/alat-kerja.html
   Layout of manajemen alat kerja.png (pass 2, 2026-10-01): <main class="rn-dense rn-ak-page">
   row 1 Inventaris | Operator | Matching (kondisi lapangan first) — measured 346/329/366 px
   row 2 Dispatch | Lokasi Kerja | BBM + QR — row 3 Hambatan | Ringkasan (534/518 px)
   ============================================================ */
.rn-ak-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rn-ak-page .content-grid { gap: 12px; margin-top: 12px; align-items: stretch; }
.rn-ak-r1, .rn-ak-r2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.11fr); }
.rn-ak-r3 { grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr); }
.rn-ak-page .panel-header { align-items: flex-start; }
.rn-ak-link { border: 0; background: none; padding: 0; color: #d9482f; font-size: 10.5px; font-weight: 600; cursor: pointer;
  text-decoration: none; white-space: nowrap; }
.rn-ak-link[hidden] { display: none; }
.rn-ak-page :is(#categoryGrid, #operatorList, #needList, #dispatchList, #siteList, #fuelList, #blockerBody):not(.is-all) .rn-ak-extra { display: none; }
.rn-ak-page .chip { height: 19px; font-size: 9.5px; padding: 0 7px; white-space: nowrap; }
.rn-ak-page .chip.info { background: rgba(59,130,196,.12); color: #2c6aa6; border-color: rgba(59,130,196,.25); }

/* inventaris: 3 × 2 tiles */
.rn-ak-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rn-ak-cat-tile { border: 1px solid var(--line); border-radius: 10px; padding: 8px 8px 7px; background: var(--panel, #fff);
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.rn-ak-cat-tile > b { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rn-ak-cat-art { width: 100%; height: 58px; border-radius: 8px; display: grid; place-items: center; color: #d9672f;
  background: linear-gradient(160deg, rgba(240,140,60,.16), rgba(240,140,60,.05)); }
.rn-ak-cat-art .rn-ic { width: 40px; height: 40px; stroke-width: 1.5; }
.rn-ak-cat-bar { display: flex; width: 100%; height: 4px; border-radius: 4px; overflow: hidden; gap: 1px; background: var(--line); }
.rn-ak-cat-bar i { display: block; height: 100%; }
.rn-ak-cat-foot { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 10px; gap: 4px; }
.rn-ak-cat-foot b { font-size: 12px; }
.rn-ak-cat-foot em { font-style: normal; font-size: 9px; font-weight: 600; color: #2f9e59; white-space: nowrap; }
.rn-ak-cat-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 10px; color: var(--muted); }
.rn-ak-cat-key span { display: inline-flex; align-items: center; gap: 5px; }
.rn-ak-cat-key i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.rn-ak-dot-ready { background: #2f9e59; }
.rn-ak-dot-assigned { background: #3b82c4; }
.rn-ak-dot-maintenance { background: #e0912e; }
.rn-ak-dot-critical { background: #d84545; }

/* operator rows: avatar · name/skill · chip · Penugasan */
.rn-ak-op-list { display: flex; flex-direction: column; }
.rn-ak-op-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 70px; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.rn-ak-op-row:last-child { border-bottom: 0; }
.rn-ak-op-row .rn-kom-op-av { width: 30px; height: 30px; }
.rn-ak-op-id, .rn-ak-op-job { min-width: 0; }
.rn-ak-op-id b { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-ak-op-id small { display: block; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-ak-op-job { font-size: 10.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rn-ak-op-job small { display: block; font-size: 9.5px; color: var(--muted); }

/* matching kebutuhan: numbered cards */
.rn-ak-need-list { display: flex; flex-direction: column; gap: 7px; }
.rn-ak-need-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel, #fff); }
.rn-ak-need-row[data-object] { cursor: pointer; }
.rn-ak-need-row[data-object]:hover { border-color: rgba(217,72,47,.35); }
.rn-ak-need-no { font-size: 15px; font-weight: 700; color: #d9482f; text-align: center; }
.rn-ak-need-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rn-ak-need-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rn-ak-need-head { align-items: flex-start; }
.rn-ak-need-head b { font-size: 11.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rn-ak-need-body > small { font-size: 10px; color: var(--muted); line-height: 1.35; }
.rn-ak-need-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.rn-ak-mini { border: 1px solid rgba(217,72,47,.35); background: rgba(217,72,47,.06); color: #c2402a; border-radius: 7px;
  font-size: 10px; font-weight: 600; padding: 2px 8px; cursor: pointer; }
.rn-ak-need-st { font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 8px; white-space: nowrap; }
.rn-ak-need-st.ok { color: #23824a; background: rgba(47,158,89,.1); border: 1px solid rgba(47,158,89,.25); }
.rn-ak-need-st.bad { color: #c2332f; background: rgba(216,69,69,.08); border: 1px solid rgba(216,69,69,.22); }
.rn-ak-add { width: 100%; margin-top: 8px; justify-content: center; font-size: 11.5px; padding: 6px 10px; background: transparent; }
.rn-ak-page .content-grid > .panel { display: flex; flex-direction: column; }

/* dispatch rows: time · icon · tool/operator · destination · chip */
.rn-ak-disp-list, .rn-ak-site-list, .rn-ak-fuel-list { display: flex; flex-direction: column; }
.rn-ak-disp-row { display: grid; grid-template-columns: 34px 26px minmax(0, 1fr) minmax(0, .6fr) auto; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 10.5px; }
.rn-ak-disp-row:last-child, .rn-ak-site-row:last-child, .rn-ak-fuel-row:last-child { border-bottom: 0; }
.rn-ak-disp-time { font-size: 11px; font-weight: 600; line-height: 1.2; }
.rn-ak-disp-time small { display: block; font-size: 9px; font-weight: 400; color: var(--muted); }
.rn-ak-disp-ic, .rn-ak-cell-ic { color: #d9672f; display: grid; place-items: center; }
.rn-ak-disp-ic .rn-ic { width: 24px; height: 24px; }
.rn-ak-disp-id { min-width: 0; }
.rn-ak-disp-id b { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-ak-disp-id small { display: block; font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-ak-disp-dest { font-size: 10px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* lokasi kerja: pin · name · progress bar · % · alat */
.rn-ak-site-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 74px 30px 26px; gap: 8px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--line); }
.rn-ak-site-pin { color: #d9482f; display: grid; place-items: center; }
.rn-ak-site-pin .rn-ic { width: 15px; height: 15px; }
.rn-ak-site-id { min-width: 0; }
.rn-ak-site-id b { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-ak-site-id small { display: block; font-size: 9.5px; color: var(--muted); }
.rn-ak-site-prog small, .rn-ak-site-n small { display: block; font-size: 9px; color: var(--muted); margin-bottom: 3px; }
.rn-ak-site-prog .rn-kom-batt-bar, .rn-ak-fuel-row .rn-kom-batt-bar { display: block; height: 6px; }
.rn-ak-site-pct { font-size: 10.5px; font-weight: 700; text-align: right; }
.rn-ak-site-n { font-size: 12px; font-weight: 700; text-align: center; }

/* BBM rows + QR card stacked in column 3 */
.rn-ak-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rn-ak-stack > .panel:first-child { flex: 1; }
.rn-ak-fuel-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 54px 74px 40px; gap: 8px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.rn-ak-fuel-row { cursor: pointer; }
.rn-ak-fuel-id { min-width: 0; }
.rn-ak-fuel-id b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-ak-fuel-id small { display: block; font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-ak-ditem { border-bottom: 1px solid var(--line); }
.rn-ak-ditem .rn-ba-ditem { border-bottom: 0; }
.rn-ak-contact { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 12px; padding: 0 12px 10px; }
.rn-ak-contact small { display: block; font-size: 10px; color: var(--muted); }
.rn-ak-contact > small { flex-basis: 100%; }
.rn-ak-contact a { color: #d9482f; font-weight: 600; }
.rn-ak-contact.is-locked { color: var(--muted); font-size: 11.5px; }
.rn-ak-block-table a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,.2); }
.rn-ak-fuel-ic { color: #2f9e59; display: grid; place-items: center; }
.rn-ak-fuel-ic.warn { color: #e08a1e; } .rn-ak-fuel-ic.bad { color: #d23c3c; }
.rn-ak-fuel-ic .rn-ic { width: 15px; height: 15px; }
.rn-ak-fuel-q { text-align: right; white-space: nowrap; }
.rn-ak-fuel-st { font-size: 10px; color: #2f9e59; text-align: right; }
.rn-ak-fuel-st.warn { color: #c77a12; } .rn-ak-fuel-st.bad { color: #c2332f; }
.rn-ak-qr { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 10px; align-items: center; text-align: left;
  cursor: pointer; font: inherit; color: inherit; width: 100%; }
.rn-ak-qr b { display: block; font-size: 13px; margin-bottom: 4px; }
.rn-ak-qr small { display: block; font-size: 10px; color: var(--muted); line-height: 1.35; }
.rn-ak-qr-ic { width: 46px; height: 46px; border: 1.5px solid var(--text); border-radius: 8px; display: grid; place-items: center; }
.rn-ak-qr-ic .rn-ic { width: 28px; height: 28px; margin: 0; }

/* hambatan table + ringkasan tiles */
.rn-ak-block-table { table-layout: fixed; width: 100%; }
.rn-ak-block-table td { overflow: hidden; text-overflow: ellipsis; }
.rn-ak-block-table :is(th, td):nth-child(1) { width: 30%; }
.rn-ak-block-table :is(th, td):nth-child(2) { width: 27%; }
.rn-ak-block-table :is(th, td):nth-child(4) { width: 62px; }
.rn-ak-cell-ic { display: inline-grid; vertical-align: -2px; margin-right: 4px; }
.rn-ak-cell-ic .rn-ic { width: 13px; height: 13px; }
.rn-ak-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: 1; }
.rn-ak-sum-tile { border: 1px solid var(--line); border-radius: 10px; padding: 12px 10px; display: grid; grid-template-columns: 26px minmax(0, 1fr);
  gap: 6px; align-items: center; align-content: center; background: var(--panel, #fff); }
.rn-ak-sum-tile small { grid-column: 1 / -1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-ak-sum-tile small { display: block; font-size: 9.5px; color: var(--muted); }
.rn-ak-sum-tile b { font-size: 18px; white-space: nowrap; }
.rn-ak-sum-tile b em { font-style: normal; font-size: 11px; font-weight: 600; margin-left: 2px; }
.rn-ak-sum-ic { color: #3b82c4; display: grid; place-items: center; }
.rn-ak-sum-ic.ok { color: #2f9e59; } .rn-ak-sum-ic.warn { color: #e08a1e; } .rn-ak-sum-ic.bad { color: #d23c3c; }
.rn-ak-sum-ic .rn-ic { width: 22px; height: 22px; }
.rn-ak-footnote { font-size: 10.5px; text-align: right; margin: 10px 2px 14px; }

/* drawers + drill content */
.rn-ak-condition-form { display: grid; gap: 8px; }
.rn-ak-cond-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rn-ak-object-preds { display: flex; flex-direction: column; gap: 4px; }
.rn-ak-pred-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); font-size: 11px; }
.rn-ak-pred-row b { font-size: 12px; }
.rn-ak-pred-row small { color: var(--muted); display: block; }
.rn-ak-group-row { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,.9fr) minmax(0,1.3fr) minmax(0,.7fr) minmax(0,.7fr); gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.rn-ak-group-row:last-child { border-bottom: 0; }
.rn-ak-group-row.is-head { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; }
.rn-ak-group-row b { display: block; font-size: 13px; }
.rn-ak-group-row small { color: var(--muted); }
.rn-ak-unit-chip { display: inline-block; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; margin: 1px 2px 1px 0; font-size: 10px; }

@media (max-width: 1100px) {
  .rn-ak-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rn-ak-r1, .rn-ak-r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-ak-r3 { grid-template-columns: minmax(0, 1fr); }
  .rn-ak-cond-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rn-ak-r1, .rn-ak-r2 { grid-template-columns: minmax(0, 1fr); }
  .rn-ak-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #akKpi.rn-ak-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  /* phone mock-up: label over icon + value, no note (site-wide mobile kpi rules win without the id) */
  #akKpi .kpi-card { grid-template-columns: 26px minmax(0, 1fr) !important; grid-template-rows: auto auto !important;
    min-height: 0 !important; padding: 9px 8px !important; column-gap: 6px !important; align-items: center !important; }
  #akKpi .kpi-card > span:not(.kpi-icon) { grid-column: 1 / -1 !important; grid-row: 1 !important; font-size: 9.5px !important;
    white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
  #akKpi .kpi-card > .kpi-icon { grid-column: 1 !important; grid-row: 2 !important; width: 26px !important; height: 26px !important; }
  #akKpi .kpi-card > strong { grid-column: 2 !important; grid-row: 2 !important; font-size: 17px !important; }
  #akKpi .kpi-card > small { display: none !important; }
  /* beats the site-wide phone rule (body:not()… .panel-header → one column, specificity 0,5,1) */
  main.rn-ak-page.rn-dense .content-grid .panel .panel-header.panel-header { grid-template-columns: minmax(0, 1fr) auto !important; }
  .rn-ak-page .panel-header .rn-ak-link { margin: 2px 0 0 !important; }
  .rn-ak-cond-grid { grid-template-columns: minmax(0, 1fr); }
  .rn-ak-op-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .rn-ak-op-job { display: none; }
  .rn-ak-disp-row { grid-template-columns: 34px 26px minmax(0, 1fr) auto; }
  .rn-ak-disp-dest { display: none; }
  .rn-ak-group-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rn-ak-group-row.is-head { display: none; }
}

/* ============================================================
   Program Khusus — pages/program-khusus.html
   ============================================================ */
.rn-pk-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rn-pk-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; }

.rn-pk-filter-tabs { margin-bottom: 10px; flex-wrap: wrap; }

.rn-pk-list { display: flex; flex-direction: column; gap: 8px; max-height: 720px; overflow-y: auto; }
.rn-pk-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 2px 2px; font-size: 12px; }
.rn-pk-group-head:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.rn-pk-card { display: block; text-align: left; width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel2); cursor: pointer; }
.rn-pk-card.is-selected { border-color: var(--coral, #e8835d); background: rgba(232,131,93,.08); }
.rn-pk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.rn-pk-card-head b { font-size: 13px; }
.rn-pk-card-meta { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.rn-pk-bar { height: 6px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.rn-pk-bar > div { height: 100%; background: var(--coral, #e8835d); }
.rn-pk-bar-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 2px; }

.rn-pk-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rn-pk-detail-head h3 { margin: 0; }
.rn-pk-detail-meta { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.rn-pk-progress-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.rn-pk-progress-bar-wrap { flex: 1 1 220px; min-width: 0; }
.rn-pk-progress-bar { height: 10px; background: var(--line); border-radius: 6px; overflow: hidden; }
.rn-pk-progress-bar > div { height: 100%; background: var(--coral, #e8835d); }
.rn-pk-progress-pct { font-size: 22px; font-weight: 800; }
.rn-pk-detail-tabs { margin: 12px 0; }

.rn-pk-budget-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.rn-pk-budget-tile { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel2); }
.rn-pk-budget-tile span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.rn-pk-budget-tile b { display: block; font-size: 17px; margin-top: 4px; }

.rn-pk-support-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.rn-pk-support-tile { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--panel2); text-align: center; }
.rn-pk-support-tile b { display: block; font-size: 12px; margin-bottom: 6px; }
.rn-pk-support-tile a { display: block; font-size: 11px; }
.rn-pk-support-icon {
  display: grid; place-items: center; margin: 0 auto 6px;
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(230,95,60,.12); color: #c9502f;
}
.rn-pk-support-icon svg, .rn-pk-support-icon .rn-ic { width: 16px; height: 16px; }

@media (max-width: 1100px) {
  .rn-pk-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rn-pk-row { grid-template-columns: minmax(0, 1fr); }
  .rn-pk-budget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-pk-support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rn-pk-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Profil Sumber Daya — pages/resource-profile.html
   ============================================================ */
.rn-pr-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rn-pr-chip-card { display: flex; flex-direction: column; gap: 2px; }
.rn-pr-chip-card span { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.rn-pr-chip-card b { font-size: 15px; }
.rn-pr-chip-card small { font-size: 11px; color: var(--muted); }

.rn-pr-card { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.rn-pr-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--coral, #e8835d), #c25a3a);
  color: #fff; font-size: 22px; font-weight: 700;
}
.rn-pr-card-main { flex: 1 1 260px; min-width: 0; }
.rn-pr-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rn-pr-name-row h3 { margin: 0; }
.rn-pr-role { color: var(--muted); font-size: 13px; margin: 2px 0 8px; }
.rn-pr-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.rn-pr-about { flex: 1 1 260px; min-width: 0; }
.rn-pr-about p { font-size: 13px; margin: 0 0 6px; }
.rn-pr-joined { font-size: 11px; color: var(--muted); }
.rn-pr-edit-btn { flex: 0 0 auto; }

.rn-pr-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rn-pr-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.rn-pr-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.rn-pr-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); font-size: 12px;
}
.rn-pr-item b { display: block; font-size: 13px; }
.rn-pr-item small { color: var(--muted); }
.rn-pr-item-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rn-pr-item-icon {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(230,95,60,.12); color: #c9502f;
}
.rn-pr-item-icon svg, .rn-pr-item-icon .rn-ic { width: 16px; height: 16px; }
.rn-inline-icon { display: inline-flex; vertical-align: -3px; width: 14px; height: 14px; margin-right: 5px; color: var(--muted); }
.rn-inline-icon svg, .rn-inline-icon .rn-ic { width: 14px; height: 14px; }
.rn-pr-add-btn { width: 100%; background: none; border: 1px dashed var(--line); border-radius: 10px; padding: 8px; font-size: 12px; color: var(--muted); cursor: pointer; }
.rn-pr-add-btn:hover { border-color: var(--coral, #e8835d); color: var(--coral, #e8835d); }
.rn-pr-add-form { display: none; flex-direction: column; gap: 6px; margin-top: 8px; }
.rn-pr-add-form.is-open { display: flex; }
.rn-pr-add-form input, .rn-pr-add-form select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; background: var(--panel); }
.rn-pr-add-form .rn-pr-add-actions { display: flex; gap: 6px; }
.rn-pr-add-form .rn-pr-add-actions button { flex: 1 1 0; padding: 6px; font-size: 12px; }
.rn-pr-add-msg { font-size: 11px; color: var(--muted); }

.rn-pr-edit-form { display: none; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.rn-pr-edit-form.is-open { display: flex; }
.rn-pr-edit-form textarea, .rn-pr-edit-form input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; background: var(--panel); width: 100%; }

.rn-pr-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .rn-pr-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rn-pr-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-pr-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rn-pr-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-pr-grid3 { grid-template-columns: minmax(0, 1fr); }
  .rn-pr-grid4 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Alat Komunikasi — pages/alat-komunikasi.html
   ============================================================ */
/* column ratios measured on assets/img/mockup/alat komunikasi.png */
.rn-kom-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rn-kom-row1 { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr) minmax(0, .85fr); align-items: stretch; }
.rn-kom-row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.15fr); align-items: stretch; }
.rn-kom-page .rn-kom-row1 > .panel:first-child .panel-header { flex-wrap: wrap; }
.rn-kom-page .rn-kom-row1 > .panel:first-child .rn-table td,
.rn-kom-page .rn-kom-row1 > .panel:first-child .rn-table th { padding: 6px 4px; text-align: center; }
.rn-kom-page .rn-kom-row1 > .panel:first-child .rn-table :is(td, th):first-child { text-align: left; white-space: nowrap; }
.rn-kom-map { height: 190px; border-radius: 12px; border: 1px solid var(--line); background: #eef0ea; overflow: hidden; }
.rn-kom-page .rn-kom-conn-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 6px; }
.rn-kom-conn-tile { border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; display: grid; grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 5px; align-items: center; font-size: 10px; color: var(--muted); background: var(--panel, #fff); }
.rn-kom-conn-tile b { grid-column: 1 / -1; font-size: 15px; color: var(--text); text-align: center; margin-top: 2px; }
.rn-kom-conn-tile b small { font-size: 10px; font-weight: 600; }
.rn-kom-conn-dot { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; }
.rn-kom-conn-tile.ok .rn-kom-conn-dot { background: #2f9a5c; }
.rn-kom-conn-tile.warn .rn-kom-conn-dot { background: #e08a1e; }
.rn-kom-conn-tile.bad .rn-kom-conn-dot { background: #d23c3c; }
.rn-kom-conn-list > summary { cursor: pointer; font-size: 11px; color: var(--muted); padding: 4px 0; }
.rn-kom-conn-list .rn-table-wrap { max-height: 220px; overflow-y: auto; }
.rn-kom-op-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700;
  background: rgba(230,95,60,.14); color: #c2482c; }
.rn-kom-page .rn-kom-op-row { grid-template-columns: 28px minmax(0,1fr) auto auto; gap: 8px; padding: 7px 0; }
.rn-kom-page .rn-kom-op-id b { font-size: 12px; }
.rn-kom-page .rn-kom-op-id small { font-size: 10px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-kom-page .rn-kom-op-row .chip { height: 20px; font-size: 10px; padding: 0 7px; }
.rn-kom-page .rn-kom-batt-row { grid-template-columns: minmax(0,1fr) 90px 38px; gap: 8px; padding: 6px 0; }
.rn-kom-page .rn-kom-batt-id b { font-size: 12px; }
.rn-kom-page .rn-kom-batt-id small { font-size: 10px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-kom-page .rn-kom-batt-list { max-height: 300px; overflow-y: auto; }
.rn-kom-page #alertList { max-height: 330px; overflow-y: auto; }

.rn-kom-op-list { display: flex; flex-direction: column; }
.rn-kom-op-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px;
  align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--line);
}
.rn-kom-op-row:last-child { border-bottom: 0; }
.rn-kom-op-id b { display: block; font-size: 13px; }
.rn-kom-op-id small { color: var(--muted); font-size: 11px; }
.rn-kom-op-ch { font-size: 11px; font-weight: 800; color: #8a5a45; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; }

.rn-kom-conn-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rn-kom-conn-pill { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; border: 1px solid var(--line); }
.rn-kom-conn-pill b { font-weight: 900; margin-right: 4px; }
.rn-kom-conn-pill.ok { background: rgba(46,160,102,.12); color: #1f7a4d; border-color: rgba(46,160,102,.3); }
.rn-kom-conn-pill.warn { background: rgba(224,153,0,.14); color: #9a6b00; border-color: rgba(224,153,0,.32); }
.rn-kom-conn-pill.bad { background: rgba(216,69,69,.12); color: #b23; border-color: rgba(216,69,69,.3); }

.rn-kom-batt-list { display: flex; flex-direction: column; }
.rn-kom-batt-row {
  display: grid; grid-template-columns: minmax(0,1fr) 120px 46px; gap: 10px;
  align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--line);
}
.rn-kom-batt-row:last-child { border-bottom: 0; }
.rn-kom-batt-id b { display: block; font-size: 13px; }
.rn-kom-batt-id small { color: var(--muted); font-size: 11px; }
.rn-kom-batt-bar { position: relative; height: 8px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); overflow: hidden; }
.rn-kom-batt-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: #2ea066; }
.rn-kom-batt-bar i.warn { background: #e09900; }
.rn-kom-batt-bar i.bad { background: #d84545; }
.rn-kom-batt-pct { font-size: 12px; font-weight: 800; text-align: right; }
.rn-kom-batt-pct.warn { color: #9a6b00; }
.rn-kom-batt-pct.bad { color: #b23; }

.rn-kom-footnote { font-size: 11px; margin: 4px 2px 0; }

@media (max-width: 1100px) {
  .rn-kom-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rn-kom-row1, .rn-kom-row3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rn-kom-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-kom-batt-row { grid-template-columns: minmax(0,1fr) 80px 40px; }
  .rn-kom-page .rn-kom-op-row { grid-template-columns: 28px minmax(0,1fr) auto; }
  .rn-kom-op-ch { display: none; }
}

/* ============================================================
   Posko Distribusi — pages/posko-distribusi.html
   ============================================================ */
.rn-pd-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rn-pd-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rn-pd-selector { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.rn-pd-selector select { min-height: 34px; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--line); background: #fff; max-width: 320px; }
.rn-pd-assign { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.rn-pd-bk-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rn-pd-pin { width: 74px; min-height: 32px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.rn-pd-bk-act .btn.mini { padding: 4px 10px; font-size: 11px; }
.rn-pd-bk-msg { font-size: 11px; color: var(--muted); }

@media (max-width: 1100px) {
  .rn-pd-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-pd-head-right { align-items: flex-start; }
}
@media (max-width: 640px) {
  .rn-pd-kpi { grid-template-columns: minmax(0, 1fr); }
  .rn-pd-selector select { max-width: 100%; }
}

/* Kirim Bantuan — repeatable item rows */
.rn-aid-items { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--panel2); }
.rn-aid-items-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rn-aid-items-head h4 { margin: 0; font-size: 13px; }
.rn-aid-items-head .btn.mini { padding: 5px 12px; font-size: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.rn-aid-row { display: grid; grid-template-columns: 1.5fr .65fr .7fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 8px; }
.rn-aid-row:last-child { margin-bottom: 0; }
.rn-aid-row label { display: grid; gap: 6px; font-size: 12px; font-weight: 750; color: var(--muted); }
.rn-aid-row input { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; background: #fff; }
.rn-aid-row-del { height: 40px; width: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: #b23; cursor: pointer; font-size: 15px; }
.rn-aid-row-del:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 640px) {
  .rn-aid-row { grid-template-columns: 1fr 1fr; }
  .rn-aid-row label:first-child { grid-column: 1 / -1; }
  .rn-aid-row-del { width: 100%; }
}

/* Posko Distribusi — pickup queue (aktif pickup) */
.rn-pd-dest { min-height: 34px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; max-width: 220px; }
#pdModeBadge { align-self: center; }

/* Kelompok Barang (Normalisasi AI) — rn-item-groups.js */
#itemGroupPanel td small { display:block; font-size:10px; color:var(--muted); }
.rn-ig-merge { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 10px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; margin-bottom:10px; font-size:12px; }
.rn-ig-merge input { min-height:32px; padding:4px 8px; border:1px solid var(--line); border-radius:8px; font:inherit; }
.rn-ig-mem { border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px; }
.rn-ig-mem-head { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; margin-bottom:6px; }
.rn-ig-mem-body { display:flex; flex-direction:column; gap:3px; font-size:12px; }
.rn-ig-mem-body .btn.mini { align-self:flex-start; margin-top:4px; }
.rn-ig-fix { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); }
.rn-ig-fix label { display:grid; gap:4px; font-size:11px; font-weight:700; color:var(--muted); }
.rn-ig-fix input[type=text],.rn-ig-fix input:not([type]) { min-height:34px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; font:inherit; }
.rn-ig-fix-chk { flex-direction:row !important; align-items:center; gap:6px; }
.rn-ig-fix-chk input { width:auto; }
.rn-ig-fix-actions { grid-column:1/-1; display:flex; align-items:center; gap:10px; }
.rn-ig-fix-msg { font-size:11px; color:var(--muted); }
@media (max-width:640px){ .rn-ig-fix { grid-template-columns:minmax(0,1fr); } }

/* ============================================================
   .rn-dense — mock-up density shared by the pass-2 pages (set on <main>).
   Builds on the :is(.rn-sh-page, …, .rn-dense) KPI/table rules above; each
   page only adds its own column ratios and special components.
   ============================================================ */
.rn-dense .topbar { align-items: flex-start; }
.rn-dense .topbar .eyebrow,
.rn-dense .topbar > .status-pill,
.rn-dense .topbar [data-rn-session-pill] { display: none; }
.rn-dense .topbar .subtitle + .subtitle { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.rn-dense .panel { padding: 16px; }
.rn-dense .panel-header { gap: 8px; margin-bottom: 10px; }
.rn-dense .panel-header h3 { font-size: 14px; }
.rn-dense .panel-header p { font-size: 11px; margin: 2px 0 0; }
.rn-dense .panel-header .btn.mini, .rn-dense .panel-header .rn-tab { padding: 4px 10px; font-size: 11px; }
.rn-dense .kpi-grid { gap: 12px; }
.rn-dense .kpi-grid .kpi-card { padding: 12px; column-gap: 8px; grid-template-columns: 36px minmax(0, 1fr); min-height: 84px;
  background: var(--panel, #fff); border-color: var(--line); }
.rn-dense .kpi-grid .kpi-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; align-self: start; }
.rn-dense .kpi-grid .kpi-icon .rn-ic { margin: 0; }
.rn-dense .kpi-grid .kpi-card > span:not(.kpi-icon) { color: var(--text); font-weight: 600; font-size: 10.5px; }
.rn-dense .kpi-grid .kpi-card > strong { color: var(--text); }
.rn-dense .kpi-grid .kpi-card > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-dense .rn-table th { text-transform: none; letter-spacing: 0; }
.rn-dense .rn-table td { padding: 7px 5px; }
.rn-dense .event-list { gap: 8px; }
.rn-dense .event-list .event-card { padding: 8px 10px; border-radius: 10px; }
.rn-dense .event-list .event-card h4 { font-size: 12px; margin: 0; }
.rn-dense .event-list .event-card p { font-size: 11px; margin: 2px 0 0; }
.rn-dense .event-list .event-card .chip { height: 20px; font-size: 10px; padding: 0 7px; }
.rn-dense .rn-input-drawer > summary h3 { font-size: 14px; }
.rn-dense .rn-input-drawer > summary p { font-size: 11px; }
@media (max-width: 640px) {
  .rn-dense .kpi-grid .kpi-card > span:not(.kpi-icon) { white-space: normal; }
}

/* Alat Komunikasi pass 2 (2026-09-30): row spacing, operator add button at the bottom,
   one-line frequency rows, alert cards with a round icon and "Sejak" time on the right */
.rn-kom-page .rn-kom-row3 { margin-top: 18px; }
.rn-kom-page .rn-kom-footnote { margin: 10px 2px 14px; }
.rn-kom-page .rn-kom-row1 > aside.panel { display: flex; flex-direction: column; }
.rn-kom-page .rn-kom-op-list { flex: 1; }
.rn-kom-op-add { width: 100%; margin-top: 8px; justify-content: center; font-size: 12px; padding: 7px 10px; background: transparent; }
.rn-kom-page .rn-kom-op-row { grid-template-columns: 28px minmax(0,1fr) auto auto; }
.rn-kom-page .rn-kom-op-id b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-kom-freq-list { display: flex; flex-direction: column; }
.rn-kom-freq-row { display: grid; grid-template-columns: 18px minmax(0,1fr) auto 8px; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; }
.rn-kom-freq-row:last-child { border-bottom: 0; }
.rn-kom-freq-ic { color: #7a6a62; display: grid; place-items: center; }
.rn-kom-freq-ic .rn-ic, .rn-kom-freq-ic svg { width: 15px; height: 15px; }
.rn-kom-freq-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-kom-freq-name small { color: var(--muted); font-size: 11px; }
.rn-kom-freq-st { font-size: 11px; color: var(--muted); }
.rn-kom-freq-st.warn { color: #c77a12; } .rn-kom-freq-st.bad { color: #c2332f; }
.rn-kom-freq-dot { width: 7px; height: 7px; border-radius: 50%; background: #2f9a5c; }
.rn-kom-freq-dot.warn { background: #e08a1e; } .rn-kom-freq-dot.bad { background: #d23c3c; }
.rn-kom-page #alertList { display: flex; flex-direction: column; gap: 8px; }
.rn-kom-alert { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel, #fff); color: inherit; text-decoration: none; }
.rn-kom-alert-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.rn-kom-alert-ic.bad { background: #d23c3c; } .rn-kom-alert-ic.warn { background: #e08a1e; }
.rn-kom-alert-ic .rn-ic, .rn-kom-alert-ic svg { width: 17px; height: 17px; }
.rn-kom-alert-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.rn-kom-alert-body b { font-size: 12px; }
.rn-kom-alert-body .chip { height: 18px; font-size: 10px; padding: 0 6px; }
.rn-kom-alert-body small { font-size: 10.5px; color: var(--muted); }
.rn-kom-alert-time { font-size: 10px; color: var(--muted); white-space: nowrap; }
.rn-kom-page .rn-kom-op-row { grid-template-columns: 28px minmax(0,1fr) auto; }
.rn-kom-op-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.rn-kom-op-st { font-size: 10px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.rn-kom-op-st i { width: 6px; height: 6px; border-radius: 50%; background: #a89a91; }
.rn-kom-op-st.ok { color: #2f9a5c; } .rn-kom-op-st.ok i { background: #2f9a5c; }
.rn-kom-op-st.warning { color: #c77a12; } .rn-kom-op-st.warning i { background: #e08a1e; }
.rn-kom-op-st.danger { color: #c2332f; } .rn-kom-op-st.danger i { background: #d23c3c; }
.rn-kom-page .rn-kom-op-ch { font-size: 10px; padding: 0 6px; }
.rn-kom-page .rn-kom-batt-id b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .rn-kom-page .rn-kom-op-ch { display: inline-block; } }
.rn-kom-page :is(#battList, #alertList):not(.is-all) .rn-kom-extra { display: none; }
.rn-kom-page :is(#battList, #alertList) { max-height: none; overflow: visible; }
.rn-kom-more { margin-top: 6px; width: 100%; border: 1px solid var(--line); border-radius: 10px; background: transparent;
  color: #d9482f; font-size: 11px; font-weight: 600; padding: 6px 10px; cursor: pointer; }
.rn-kom-page .rn-kom-freq-row { padding: 4px 0; }
.rn-kom-page .rn-kom-row3 .panel-header p { display: none; }

/* Pelapor Terverifikasi (2026-10-01): label on needs reported by a verified outsider */
.rn-rep-badge { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600; color: #8a5a00; }
.rn-rep-badge.confirmed { color: #23824a; }
.rn-rep-badge.rejected { color: #c2332f; }
.rn-rep-act { display: inline-flex; gap: 6px; margin-top: 4px; }
.rn-rep-act .btn.mini { padding: 2px 9px; font-size: 11px; }

/* ============================================================
   Search & Found pass 2 (2026-10-07) — layout of "search & found.png".
   <main class="rn-dense rn-sf-page">: 6 KPI, kind tabs, board | reunification |
   identification donut, then claims | photos | verification actions.
   ============================================================ */
.rn-sf-page .rn-sf-actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.rn-sf-page .rn-sf-actions .btn { font-size: 12px; padding: 7px 12px; }
.rn-sf-page .rn-sf-actions[hidden], .rn-sf-page .rn-input-drawer[hidden] { display: none !important; }
.rn-sf-page .rn-sf-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rn-sf-page .rn-sf-kpi .kpi-card > small.rn-sf-up { color: #23824a; }
.rn-sf-page .rn-sf-tabs-wrap { margin-top: 12px; padding: 0 0 14px; }
.rn-sf-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); padding: 0 16px; overflow-x: auto; }
.rn-sf-tabs button { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 14px 14px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.rn-sf-tabs button.is-active { color: var(--primary, #ef523d); border-bottom-color: var(--primary, #ef523d); }
.rn-sf-rowa { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, .9fr); gap: 12px; padding: 14px 14px 0; align-items: start; }
.rn-sf-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--panel, #fff); min-width: 0; }
.rn-sf-card .panel-header { margin-bottom: 8px; }
.rn-sf-board, .rn-sf-reuni { display: grid; gap: 10px; }
.rn-sf-pair { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; background: #fff; }
.rn-sf-faces { position: relative; display: flex; gap: 4px; align-items: center; }
.rn-sf-av { position: relative; width: 44px; height: 54px; border-radius: 8px; background: linear-gradient(160deg, #fde3d8, #f3c9b8); display: grid; place-items: center; color: #b8553c; overflow: hidden; }
.rn-sf-av .rn-sf-ico { font-size: 22px; opacity: .85; }
.rn-sf-av em { position: absolute; bottom: 2px; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .5px; }
.rn-sf-score { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); min-width: 34px; height: 22px; border-radius: 11px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; border: 2px solid #fff; background: #2fa66a; }
.rn-sf-score.mid { background: #f59e0b; }
.rn-sf-score.lo { background: #e06a4a; }
.rn-sf-pairbody { display: grid; gap: 8px; min-width: 0; }
.rn-sf-pairtext { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 10px; font-size: 11px; }
.rn-sf-pairtext b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.rn-sf-pairtext small { display: block; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.rn-sf-pin { display: inline-block; margin-right: 3px; vertical-align: -1px; }
.rn-sf-pairbtns { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; }
.rn-sf-page .rn-sf-b { font-size: 11px; padding: 6px 8px; }
.rn-sf-link { display: block; margin: 12px 2px 0; background: none; border: 0; padding: 0; font: inherit; font-size: 11.5px; color: var(--primary, #ef523d); cursor: pointer; text-align: left; text-decoration: none; }
.rn-sf-more { font-size: 11px; color: var(--primary, #ef523d); text-decoration: none; white-space: nowrap; }
.rn-sf-reunirow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.rn-sf-reunirow:last-child { border-bottom: 0; }
.rn-sf-reunirow b { display: block; font-size: 12px; }
.rn-sf-reunirow small { display: block; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.rn-sf-reunirow .rn-sf-av { width: 38px; height: 44px; }
.rn-sf-reunistat { display: grid; gap: 4px; justify-items: end; }
.rn-sf-idsel { font-size: 10.5px; padding: 3px 4px; max-width: 140px; }
.rn-sf-ident { display: grid; gap: 12px; }
.rn-sf-ident svg { width: 128px; height: 128px; margin: 6px auto 0; display: block; }
.rn-sf-ident ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 11px; }
.rn-sf-ident li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.rn-sf-ident li i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.rn-sf-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; font-size: 12px; font-weight: 600; }
.rn-sf-total strong { font-size: 20px; }
.rn-sf-empty { font-size: 11.5px; margin: 6px 0; }
.rn-sf-rowb { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, .9fr); gap: 12px; margin-top: 12px; align-items: stretch; }
.rn-sf-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rn-sf-photos figure { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: 9.5px; color: var(--muted); background: #fff; }
.rn-sf-photos img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.rn-sf-photos figcaption { padding: 4px 5px; line-height: 1.35; }
.rn-sf-photos .rn-sf-empty { grid-column: 1 / -1; }
.rn-sf-acts { display: grid; gap: 8px; }
.rn-sf-acts > a, .rn-sf-acts > button { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; text-decoration: none;
  border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; background: #fff; color: var(--text); font: inherit; cursor: pointer; }
.rn-sf-acts b { display: block; font-size: 12px; }
.rn-sf-acts small { display: block; font-size: 10.5px; color: var(--muted); }
.rn-sf-acts i { font-style: normal; color: var(--muted); font-size: 18px; }
.rn-sf-ico { display: inline-grid; place-items: center; }
.rn-sf-acts .rn-sf-ico { width: 34px; height: 34px; border-radius: 50%; background: rgba(230, 95, 60, .12); color: #d8573a; font-size: 16px; }
.rn-sf-footnote { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; margin: 14px 2px; }
.rn-sf-footnote .rn-sf-updated { margin-left: auto; }
.rn-sf-page .rn-sf-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.rn-sf-page .rn-input-drawer { margin-top: 12px; }
.rn-sf-sub { margin: 14px 0 6px; font-size: 12.5px; }
.rn-sf-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rn-sf-side { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.rn-sf-side h4 { margin: 0 0 8px; font-size: 13px; }
.rn-sf-side dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 11.5px; }
.rn-sf-side dt { color: var(--muted); }
.rn-sf-side dd { margin: 0; word-break: break-word; }
@media (max-width: 1100px) {
  .rn-sf-page .rn-sf-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rn-sf-rowa, .rn-sf-rowb { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rn-sf-page .rn-sf-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-sf-rowa { padding: 10px 10px 0; }
  .rn-sf-pairtext { grid-template-columns: minmax(0, 1fr); }
  .rn-sf-sides { grid-template-columns: minmax(0, 1fr); }
  .rn-sf-reunirow { grid-template-columns: auto minmax(0, 1fr); }
  .rn-sf-reunistat { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; }
}
.rn-sf-page .chip { height: 19px; font-size: 9.5px; padding: 0 7px; white-space: nowrap; }
.rn-sf-page .rn-sf-reunirow .btn.mini { margin-top: 5px; padding: 2px 8px; font-size: 10.5px; }
.rn-sf-faces { align-self: start; padding-bottom: 8px; }
#claimTable { table-layout: auto; }
#claimTable td { white-space: normal; vertical-align: top; }
#claimTable td small { display: block; color: var(--muted); font-size: 10px; }
#claimTable td .btn.mini { display: block; margin-top: 4px; padding: 2px 8px; font-size: 10px; }
.rn-sf-photos figure.rn-sf-ph { aspect-ratio: 1 / 1; display: grid; place-items: center; align-content: center; gap: 2px; background: linear-gradient(160deg, #fde3d8, #f3c9b8); color: #b8553c; }
.rn-sf-photos figure.rn-sf-ph .rn-sf-ico { font-size: 22px; }
.rn-sf-photos figure.rn-sf-ph figcaption { padding: 0; font-size: 9px; }
#claimTable td:first-child, #claimTable td:last-child { white-space: nowrap; }
#claimTable td .chip + .btn.mini { display: inline-block; margin: 4px 0 0; }
.rn-sf-page .rn-sf-reunirow .btn.mini { display: inline-block; white-space: nowrap; }

/* ============================================================
   Program Khusus pass 2 (2026-10-07) — layout of "program khusus.png".
   <main class="rn-dense rn-pk-page">: list with photo cards | detail with hero,
   milestone / location map / needs, 4 support cards, field progress / evidence / output check.
   ============================================================ */
.rn-pk-page .rn-pk-row { grid-template-columns: minmax(0, .82fr) minmax(0, 2fr); gap: 12px; margin-top: 12px; }
.rn-pk-page .rn-pk-list { max-height: 980px; gap: 10px; }
.rn-pk-page .rn-pk-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 8px; background: #fff; align-items: center; }
.rn-pk-page .rn-pk-card > span { display: block; min-width: 0; }
.rn-pk-page .rn-pk-card .rn-pk-card-body { display: grid; gap: 3px; }
.rn-pk-page .rn-pk-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.rn-pk-page .rn-pk-card-head b { font-size: 12px; flex: 1 1 100px; }
.rn-pk-page .rn-pk-card-meta { font-size: 10.5px; line-height: 1.4; margin: 0; }
.rn-pk-page .rn-pk-card-meta .rn-pk-kind { font-style: normal; color: var(--coral, #d8573a); }
.rn-pk-page .rn-pk-bar { margin-top: 2px; }
.rn-pk-page .rn-pk-bar-label { justify-content: flex-end; font-size: 10.5px; font-weight: 700; color: var(--text); }
.rn-pk-thumb { width: 76px; height: 64px; border-radius: 8px; background-size: cover; background-position: center; display: block; }
.rn-pk-thumb-ph { background: linear-gradient(160deg, #fde3d8, #f3c9b8); display: grid !important; place-items: center; align-content: center; color: #b8553c; font-size: 22px; gap: 2px; }
.rn-pk-thumb-ph small { font-size: 9px; }
.rn-pk-hero { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.05fr); gap: 14px; align-items: start; margin-bottom: 8px; }
.rn-pk-cover { width: 150px; height: 118px; border-radius: 10px; background-size: cover; background-position: center; }
.rn-pk-hero-main h3 { margin: 0 0 6px; font-size: 18px; }
.rn-pk-hero-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.rn-pk-hero-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 11px; color: var(--muted); }
.rn-pk-hero-meta li { display: flex; gap: 6px; align-items: flex-start; }
.rn-pk-overall { border-left: 1px solid var(--line); padding-left: 14px; display: grid; gap: 8px; }
.rn-pk-overall-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); }
.rn-pk-page .rn-pk-progress-row { margin: 0; flex-wrap: nowrap; }
.rn-pk-page .rn-pk-progress-pct { font-size: 24px; }
.rn-pk-overall-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 11px; color: var(--muted); }
.rn-pk-overall-nums b { display: block; font-size: 14px; color: var(--text); margin-top: 2px; }
.rn-pk-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.rn-pk-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff; min-width: 0; }
.rn-pk-box-h h4 { margin: 0 0 8px; font-size: 12.5px; }
.rn-pk-empty { font-size: 11px; margin: 4px 0; }
.rn-pk-ms { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rn-pk-ms li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 11px; }
.rn-pk-ms li b { display: block; font-weight: 600; }
.rn-pk-ms li small { display: block; color: var(--muted); font-size: 10px; }
.rn-pk-ms li em { font-style: normal; font-size: 10px; color: var(--muted); text-align: right; white-space: nowrap; }
.rn-pk-ms li.is-late small { color: #c2332f; }
.rn-pk-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #cfc6c1; margin-top: 1px; display: block; }
.rn-pk-dot.done { background: #2fa66a; border-color: #2fa66a; }
.rn-pk-dot.run { border-color: #e8553d; }
.rn-pk-map { height: 112px; border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, #f4ece7, #eadfd9); }
.rn-pk-loc-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; font-size: 10px; color: var(--muted); }
.rn-pk-loc-nums b { display: block; font-size: 11.5px; color: var(--text); margin-top: 2px; }
.rn-pk-needs { display: grid; gap: 7px; }
.rn-pk-need { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 11px; align-items: center; }
.rn-pk-need small { display: block; color: var(--muted); font-size: 10px; }
.rn-pk-need em { font-style: normal; font-size: 10px; text-align: right; }
.rn-pk-need em.gap { color: #c2332f; }
.rn-pk-need em.ok { color: #23824a; }
.rn-pk-page .rn-pk-support-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.rn-pk-sup { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; display: grid; gap: 6px; align-content: start; font-size: 11px; }
.rn-pk-sup-h { display: flex; align-items: center; gap: 8px; }
.rn-pk-sup-h b { font-size: 12px; }
.rn-pk-sup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.rn-pk-sup li { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; color: var(--muted); }
.rn-pk-sup li b { color: var(--text); }
.rn-pk-sup .btn.mini { justify-self: stretch; text-align: center; margin-top: 2px; }
.rn-pk-fieldprog { display: grid; gap: 8px; font-size: 11px; }
.rn-pk-fieldprog small { display: block; color: var(--muted); font-size: 10px; }
.rn-pk-verif { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; font-size: 11px; }
.rn-pk-verif dt { color: var(--muted); font-size: 10px; }
.rn-pk-verif dd { margin: 2px 0 0; font-weight: 600; }
.rn-pk-verif dd.ok { color: #23824a; }
.rn-pk-verif dd.warn { color: #c47a12; }
.rn-pk-edit { display: grid; gap: 6px; margin-bottom: 8px; }
.rn-pk-erow { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 11.5px; }
.rn-pk-eact { display: flex; gap: 6px; flex-shrink: 0; }
.rn-pk-addform { display: flex !important; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.rn-pk-addform input, .rn-pk-addform select { flex: 1 1 110px; min-width: 0; font-size: 11.5px; padding: 6px 8px; }
@media (max-width: 1100px) {
  .rn-pk-page .rn-pk-row { grid-template-columns: minmax(0, 1fr); }
  .rn-pk-hero { grid-template-columns: 120px minmax(0, 1fr); }
  .rn-pk-overall { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
  .rn-pk-cover { width: 120px; height: 96px; }
  .rn-pk-row3 { grid-template-columns: minmax(0, 1fr); }
  .rn-pk-page .rn-pk-support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rn-pk-page .rn-pk-row { grid-template-columns: minmax(0, .95fr) minmax(0, 2fr); }
.rn-pk-page .rn-pk-filter-tabs { gap: 6px; flex-wrap: nowrap; }
.rn-pk-page .rn-pk-filter-tabs .rn-tab { padding: 4px 10px; font-size: 11px; white-space: nowrap; }
.rn-pk-page .rn-pk-card { grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
.rn-pk-thumb { width: 64px; height: 56px; }
.rn-pk-page .rn-pk-card-head b { flex: 1 1 70px; }
.rn-pk-page .rn-pk-card-head .chip { flex: 0 0 auto; }
.rn-pk-page .rn-dp-target { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.rn-pk-page .rn-dp-target b { font-size: 13px; }
.rn-pk-page .rn-dp-target > div { border: 0; padding: 0; }

/* ============================================================
   Evidence Center pass 2 (2026-10-07) — layout of "evidence centre.png".
   <main class="rn-dense rn-evc-page">: filter box + tools, 9-column table with
   checkbox / GPS / actions, per-page select, ellipsis pager; phone = cards.
   ============================================================ */
.rn-evc-page .rn-ev-main { margin-top: 12px; padding: 14px 16px; }
.rn-evc-page .rn-ev-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.rn-evc-page .rn-ev-filterbox { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; }
.rn-evc-page .rn-ev-filterbox h3 { margin: 0 0 8px; font-size: 12px; }
.rn-evc-page .rn-ev-modul-chips { margin: 0; gap: 6px; }
.rn-evc-page .rn-ev-chip { padding: 5px 12px; font-size: 11px; border-radius: 8px; }
.rn-evc-page .rn-ev-tools { display: flex; gap: 8px; align-items: center; flex: 1 1 360px; justify-content: flex-end; flex-wrap: wrap; }
.rn-evc-page .rn-ev-tools input[type="search"] { flex: 1 1 200px; min-width: 160px; max-width: 280px; font-size: 11.5px; padding: 9px 12px; }
.rn-evc-page .rn-ev-tools .btn { font-size: 11.5px; padding: 8px 12px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; list-style: none; }
.rn-ev-more-filter { position: relative; }
.rn-ev-more-filter > summary::-webkit-details-marker { display: none; }
.rn-ev-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 230px; display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(80, 40, 20, .18); font-size: 11px; }
.rn-ev-pop label { display: grid; gap: 3px; color: var(--muted); }
.rn-ev-pop select { font-size: 11.5px; padding: 6px; }
.rn-ev-pop .rn-ev-chk { display: flex; gap: 6px; align-items: center; }
.rn-evc-page .rn-ev-table { table-layout: auto; }
.rn-evc-page .rn-ev-table th { white-space: nowrap; }
.rn-evc-page .rn-ev-table td { white-space: normal; padding: 10px 6px; vertical-align: middle; font-size: 11px; }
.rn-evc-page .rn-ev-table td small { display: block; color: var(--muted); font-size: 10px; margin-top: 1px; }
.rn-ev-c0 { width: 28px; text-align: center; }
.rn-evc-page .rn-ev-thumb { position: relative; width: 72px; height: 52px; border-radius: 8px; overflow: visible; }
.rn-evc-page .rn-ev-thumb img { border-radius: 8px; }
.rn-ev-type { position: absolute; left: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 5px; background: #fff; color: #2fa66a; display: grid; place-items: center; font-size: 11px; font-style: normal; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.rn-ev-type.video { color: #8a5ad6; }
.rn-ev-type.document { color: #3b6fd6; }
.rn-evc-page .rn-ev-cell b { font-size: 12px; max-width: 200px; }
.rn-evc-page .rn-ev-geo { color: #3b6fd6; display: block; }
.rn-evc-page .rn-ev-geo [data-icon] { margin-right: 3px; vertical-align: -1px; }
.rn-evc-page .rn-ev-loc { max-width: 130px; text-align: center; }
.rn-evc-page .rn-ev-when { text-align: center; white-space: nowrap; }
.rn-evc-page .rn-ev-table td b { font-size: 11.5px; }
.rn-evc-page .chip { height: 22px; font-size: 10.5px; padding: 0 9px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.rn-ev-mod[data-mod="Logistik"] { background: #fde3d8; color: #c2512f; }
.rn-ev-mod[data-mod="Medis"] { background: #dff3e6; color: #23824a; }
.rn-ev-mod[data-mod="Distribusi"] { background: #dfe9fb; color: #3b6fd6; }
.rn-ev-mod[data-mod="Program"] { background: #ece3fa; color: #7a4fc4; }
.rn-ev-mod[data-mod="Search & Found"] { background: #fbe0e8; color: #c23a63; }
.rn-ev-act { position: relative; text-align: center; }
.rn-ev-menu summary { list-style: none; cursor: pointer; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; display: inline-grid; place-items: center; background: #fff; font-size: 16px; }
.rn-ev-menu summary::-webkit-details-marker { display: none; }
.rn-ev-menu > div { position: absolute; right: 0; top: 32px; z-index: 15; min-width: 130px; display: grid; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(80, 40, 20, .18); overflow: hidden; text-align: left; }
.rn-ev-menu > div a, .rn-ev-menu > div button, .rn-ev-menu > div span { padding: 8px 12px; font: inherit; font-size: 11.5px; color: var(--text); background: none; border: 0; text-align: left; text-decoration: none; cursor: pointer; }
.rn-ev-menu > div a:hover, .rn-ev-menu > div button:hover { background: #fdf0ea; }
.rn-evc-page .rn-table-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 11px; }
.rn-evc-page .rn-ev-pager { align-items: center; }
.rn-ev-gap { padding: 0 4px; color: var(--muted); }
.rn-ev-per { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); }
.rn-ev-per select { font-size: 11px; padding: 6px 8px; }
@media (max-width: 760px) {
  .rn-evc-page .rn-ev-table thead { display: none; }
  .rn-evc-page .rn-ev-table, .rn-evc-page .rn-ev-table tbody { display: block; }
  .rn-evc-page .rn-ev-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 10px; background: #fff; }
  .rn-evc-page .rn-ev-table td { display: block; padding: 0; border: 0; }
  .rn-evc-page .rn-ev-table td.rn-ev-c0 { display: none; }
  .rn-evc-page .rn-ev-table td[data-label="Evidence"] { grid-column: 1; grid-row: 1 / span 3; }
  .rn-evc-page .rn-ev-table td.rn-ev-act { grid-column: 2; grid-row: 1; justify-self: end; }
  .rn-evc-page .rn-ev-table td[data-label="Modul"], .rn-evc-page .rn-ev-table td[data-label="Uploader"] { display: none; }
  .rn-evc-page .rn-ev-table td[data-label="Lokasi"], .rn-evc-page .rn-ev-table td[data-label="Waktu"] { grid-column: 1; text-align: left; max-width: none; padding-left: 82px; }
  .rn-evc-page .rn-ev-table td[data-label="Verifikasi"], .rn-evc-page .rn-ev-table td[data-label="Visibilitas"] { display: inline-block; grid-column: 1; }
  .rn-evc-page .rn-ev-table td[data-label="Verifikasi"] { padding-left: 82px; }
  .rn-evc-page .rn-ev-bar { align-items: stretch; }
  .rn-evc-page .rn-ev-tools { justify-content: stretch; }
  .rn-evc-page .rn-ev-tools input[type="search"] { max-width: none; flex-basis: 100%; }
}
.rn-evc-page .rn-ev-table td.rn-ev-when { white-space: nowrap; }
@media (max-width: 760px) { .rn-evc-page .rn-ev-table td[data-label="Visibilitas"] { padding-left: 82px; } }

/* Profil Sumber Daya pass 2 (2026-10-07) — density of "Profil Sumber Daya.png" (<main class="rn-dense rn-prx-page">) */
.rn-prx-page .rn-pr-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.rn-prx-page .rn-pr-chip-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; row-gap: 1px; align-items: center; padding: 12px; min-height: 76px; text-align: left; }
.rn-prx-page .rn-pr-chip-card .kpi-icon { grid-row: 1 / span 3; width: 38px; height: 38px; border-radius: 50%; margin: 0; }
.rn-prx-page .rn-pr-chip-card > span:not(.kpi-icon) { grid-column: 2; font-size: 10px; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; }
.rn-prx-page .rn-pr-chip-card > b { grid-column: 2; font-size: 13px; line-height: 1.25; }
.rn-prx-page .rn-pr-chip-card > small { grid-column: 2; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-prx-page .rn-pr-card { gap: 18px; align-items: center; }
.rn-prx-page .rn-pr-avatar { width: 96px; height: 96px; font-size: 28px; border-radius: 14px; }
.rn-prx-page .rn-pr-name-row h3 { font-size: 20px; }
.rn-prx-page .rn-pr-role { font-size: 12px; }
.rn-prx-page .rn-pr-meta { flex-direction: column; gap: 4px; font-size: 11.5px; }
.rn-prx-page .rn-pr-about { border-left: 1px solid var(--line); padding-left: 18px; }
.rn-prx-page .rn-pr-about p { font-size: 11.5px; }
.rn-prx-page .rn-pr-edit-btn { background: var(--coral, #e8553d); color: #fff; border-color: transparent; font-size: 12px; align-self: flex-start; }
.rn-prx-page .content-grid { gap: 12px; margin-top: 12px; align-items: stretch; }
.rn-prx-page .rn-pr-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rn-prx-page .content-grid > .panel { padding: 14px; }
.rn-prx-page .content-grid > .panel > h3 { font-size: 13px; margin: 0 0 10px; }
.rn-prx-page .rn-pr-item { padding: 7px 9px; font-size: 11px; background: #fff; }
.rn-prx-page .rn-pr-item b { font-size: 11.5px; }
.rn-prx-page .rn-pr-item small { font-size: 10px; display: block; line-height: 1.35; }
.rn-prx-page .rn-pr-item .chip { height: 20px; font-size: 9.5px; padding: 0 8px; white-space: nowrap; flex: none; }
.rn-prx-page .rn-pr-item-icon { width: 28px; height: 28px; }
.rn-prx-page .rn-pr-add-btn { font-size: 11px; padding: 7px; }
.rn-prx-page .rn-pr-footer { margin-top: 12px; padding: 10px 16px; font-size: 11px; }

/* Verification & Approval pass 2 (2026-10-07) — layout of "verification & Approval.png" (<main class="rn-dense rn-vax-page">) */
.rn-vax-page .rn-va-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .85fr); gap: 12px; margin-top: 12px; align-items: start; }
.rn-vax-page .rn-va-tabs { gap: 6px; margin-bottom: 10px; flex-wrap: nowrap; overflow-x: auto; }
.rn-vax-page .rn-va-tabs .rn-tab { padding: 5px 11px; font-size: 11px; white-space: nowrap; }
.rn-vax-page .rn-table td { white-space: normal; padding: 9px 5px; vertical-align: middle; font-size: 11px; }
.rn-vax-page .rn-table td b { font-size: 11.5px; display: block; }
.rn-vax-page .rn-table td small { display: block; color: var(--muted); font-size: 10px; margin-top: 1px; }
.rn-vax-page .rn-table th { white-space: nowrap; }
.rn-vax-page .rn-table .chip { height: 20px; font-size: 9.5px; padding: 0 8px; white-space: nowrap; }
.rn-vax-page .rn-ba-row { cursor: pointer; }
.rn-vax-page .rn-ba-row.is-selected td { background: rgba(232, 85, 61, .07); }
.rn-vax-page .rn-ba-row.is-selected td:first-child { box-shadow: inset 2px 0 0 #e8553d; }
.rn-vax-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; }
.rn-vax-kind i { color: #d8573a; font-size: 14px; font-style: normal; display: inline-grid; }
.rn-vax-go { color: var(--muted); font-size: 16px; text-align: right; width: 18px; }
.rn-vax-dhead { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.rn-vax-dhead b { font-size: 13px; display: block; }
.rn-vax-dhead small { display: block; color: var(--muted); font-size: 10.5px; margin-top: 2px; }
.rn-vax-dicon { width: 34px; height: 34px; border-radius: 9px; background: rgba(230, 95, 60, .12); color: #d8573a; display: grid; place-items: center; font-size: 17px; flex: none; }
.rn-vax-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 11px; }
.rn-vax-dl dt { color: var(--muted); }
.rn-vax-dl dd { margin: 0; font-weight: 600; word-break: break-word; }
.rn-vax-page .rn-sub-h { font-size: 12px; margin: 14px 0 8px; }
.rn-vax-trust { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; }
.rn-vax-ring { width: 84px; height: 84px; }
.rn-vax-ringn { font-size: 22px; font-weight: 800; fill: var(--text, #2d211b); }
.rn-vax-risk { display: inline-block; font-size: 10.5px; font-weight: 700; margin-bottom: 4px; }
.rn-vax-risk.rendah { color: #23824a; } .rn-vax-risk.sedang { color: #c47a12; } .rn-vax-risk.tinggi { color: #c2332f; }
.rn-vax-trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 10.5px; }
.rn-vax-trust li { display: flex; justify-content: space-between; gap: 6px; }
.rn-vax-trust li b { color: #23824a; }
.rn-vax-basis { font-size: 10px; margin: 6px 2px 0; }
.rn-vax-col { display: grid; gap: 12px; min-width: 0; }
.rn-vax-page .rn-va-steps { gap: 8px; margin: 0; }
.rn-vax-page .rn-va-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 11px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; }
.rn-vax-page .rn-va-steps li.is-current { border-color: rgba(232, 85, 61, .45); background: rgba(232, 85, 61, .06); }
.rn-vax-steptext b { display: block; font-size: 11.5px; }
.rn-vax-steptext small { display: block; font-size: 10px; color: var(--muted); }
.rn-vax-page .rn-va-steps li em { font-style: normal; font-size: 9.5px; color: var(--muted); text-align: right; max-width: 82px; }
.rn-vax-page .rn-va-timeline li { position: relative; padding: 6px 0 8px 18px; font-size: 11px; border-bottom: 0; }
.rn-vax-page .rn-va-timeline li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: #e8553d; }
.rn-vax-page .rn-va-timeline li:last-child::before { background: #c9c1bc; }
.rn-vax-page .rn-va-timeline li::after { content: ""; position: absolute; left: 6.5px; top: 20px; bottom: -4px; width: 1px; background: var(--line); }
.rn-vax-page .rn-va-timeline li:last-child::after { display: none; }
.rn-vax-page .rn-va-timeline small { display: block; color: var(--muted); font-size: 10px; }
.rn-vax-page .rn-va-actionbar { margin-top: 12px; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.rn-vax-page .rn-va-actionbar .panel-header { margin: 0; grid-row: 1 / span 3; }
.rn-vax-page .rn-va-actionbar .panel-header p { font-size: 10px; margin-top: 4px; }
.rn-vax-page .rn-va-actionbar .rn-va-merge-note, .rn-vax-page .rn-va-actionbar #actionMsg { grid-column: 2; margin: 4px 0 0; font-size: 10.5px; }
.rn-vax-page .rn-va-action { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; text-align: left; align-items: center; padding: 10px 12px; border-width: 1.5px; font-size: 12px; }
.rn-vax-page .rn-va-action .rn-va-action-icon { grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 50%; background: currentColor; display: grid; place-items: center; }
.rn-vax-page .rn-va-action .rn-va-action-icon .rn-ic { color: #fff; width: 18px; height: 18px; }
.rn-vax-page .rn-va-action small { grid-column: 2; font-size: 10px; color: var(--muted); opacity: 1; }
@media (max-width: 1100px) {
  .rn-vax-page .rn-va-row { grid-template-columns: minmax(0, 1fr); }
  .rn-vax-page .rn-va-actionbar { grid-template-columns: minmax(0, 1fr); }
  .rn-vax-page .rn-va-actionbar .panel-header { grid-row: auto; }
  .rn-vax-page .rn-va-actionbar .rn-va-merge-note, .rn-vax-page .rn-va-actionbar #actionMsg { grid-column: 1; }
}
.rn-vax-page .rn-vax-table { table-layout: fixed; width: 100%; } .rn-vax-page .rn-vax-table td { overflow: hidden; word-break: break-word; }
.rn-vax-page .rn-va-row { grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr) minmax(0, .82fr); }
.rn-vax-page .rn-vax-table .chip { padding: 0 6px; font-size: 9px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .rn-vax-page .rn-vax-table td { overflow: visible; }

/* Organisasi & Posko pass 2 (2026-10-07) — "organisasi & posko.png": visual tree + detail rail (<main class="rn-dense rn-opx-page">) */
.rn-opx-page .rn-op-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
.rn-opx-page .rn-op-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rn-opx-tree { display: grid; gap: 14px; justify-items: center; }
.rn-opx-root { display: flex; align-items: center; gap: 10px; border: 1px solid #f3c9b8; background: #fff3ee; border-radius: 12px; padding: 10px 16px; font-size: 12px; }
.rn-opx-root b { display: block; font-size: 13px; }
.rn-opx-root small { display: block; color: var(--muted); font-size: 10px; }
.rn-opx-rooticon { width: 34px; height: 34px; border-radius: 10px; background: rgba(230, 95, 60, .15); color: #d8573a; display: grid; place-items: center; font-size: 18px; }
.rn-opx-orgs, .rn-opx-poskos { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; width: 100%; position: relative; }
.rn-opx-orgs { padding-top: 14px; border-top: 1px solid var(--line); }
.rn-opx-org, .rn-opx-posko, .rn-opx-add { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; border: 1px solid var(--line); border-radius: 12px; padding: 12px 8px; background: #fff; font-size: 11px; cursor: pointer; color: var(--text); text-decoration: none; font-family: inherit; }
.rn-opx-org.is-selected { border-color: #e8553d; background: #fff3ee; box-shadow: 0 0 0 1px #e8553d inset; }
.rn-opx-org small, .rn-opx-posko small { color: var(--muted); font-size: 10px; }
.rn-opx-org b, .rn-opx-posko b { font-size: 11px; line-height: 1.25; }
.rn-opx-ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(230, 95, 60, .12); color: #d8573a; display: grid; place-items: center; font-size: 24px; }
.rn-opx-ok { position: absolute; top: 6px; right: 6px; color: #2fa66a; font-size: 14px; font-style: normal; }
.rn-opx-add { border-style: dashed; color: var(--muted); align-content: center; background: transparent; }
.rn-opx-add span { font-size: 22px; line-height: 1; }
.rn-opx-posko .chip { height: 19px; font-size: 9.5px; padding: 0 8px; }
.rn-opx-poskos { padding-top: 14px; border-top: 1px solid var(--line); }
.rn-opx-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; color: var(--muted); width: fit-content; }
.rn-opx-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.rn-opx-legend .a { background: #e8553d; } .rn-opx-legend .b { background: #2fa66a; } .rn-opx-legend .c { background: #9aa0a6; } .rn-opx-legend .d { background: #f5b942; }
.rn-opx-dhead { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 10px; }
.rn-opx-dhead h3 { margin: 0; font-size: 15px; }
.rn-opx-dhead small { color: var(--muted); font-size: 11px; }
.rn-opx-logo { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(160deg, #fde3d8, #f3c9b8); color: #b8553c; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.rn-opx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.rn-opx-stat { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; }
.rn-opx-stat small { display: block; color: var(--muted); font-size: 10.5px; }
.rn-opx-stat b { display: block; font-size: 17px; margin: 2px 0; }
.rn-opx-stat em { font-style: normal; font-size: 10.5px; color: #d8573a; }
.rn-opx-stat em a { cursor: pointer; }
.rn-opx-stat > i { width: 34px; height: 34px; border-radius: 10px; background: rgba(230, 95, 60, .12); color: #d8573a; display: grid; place-items: center; font-size: 17px; font-style: normal; }
.rn-opx-box, .rn-opx-trust { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-top: 10px; background: #fff; }
.rn-opx-boxh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rn-opx-boxh h4, .rn-opx-trust h4 { margin: 0 0 6px; font-size: 12px; }
.rn-opx-boxh h4 { margin: 0; }
.rn-opx-boxh a { font-size: 10.5px; color: #d8573a; text-decoration: none; }
.rn-opx-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; text-align: center; }
.rn-opx-res b { display: block; font-size: 14px; }
.rn-opx-res small { display: block; color: var(--muted); font-size: 10px; }
.rn-opx-res em { font-style: normal; font-size: 9.5px; color: var(--muted); }
.rn-opx-empty, .rn-opx-upd { font-size: 10.5px; margin: 6px 0 0; }
.rn-opx-trustbody { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; }
.rn-opx-shield { width: 60px; height: 68px; clip-path: polygon(50% 0, 100% 14%, 100% 60%, 50% 100%, 0 60%, 0 14%); display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #fff; background: #2fa66a; }
.rn-opx-shield.gB { background: #5a9fd4; } .rn-opx-shield.gC { background: #f59e0b; } .rn-opx-shield.gD { background: #c2332f; }
.rn-opx-trustmain b { display: block; font-size: 13px; }
.rn-opx-trustmain small { display: block; color: var(--muted); font-size: 10.5px; margin: 2px 0 6px; }
.rn-opx-bar { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.rn-opx-bar i { display: block; height: 100%; background: #2fa66a; }
.rn-opx-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 10.5px; }
.rn-opx-checks li { display: flex; justify-content: space-between; gap: 6px; color: var(--muted); }
.rn-opx-checks li.ok { color: var(--text); }
.rn-opx-checks li.ok i { color: #2fa66a; font-style: normal; }
.rn-opx-trust p { font-size: 10px; margin: 8px 0 0; }
@media (max-width: 1100px) {
  .rn-opx-page .rn-op-row { grid-template-columns: minmax(0, 1fr); }
  .rn-opx-trustbody { grid-template-columns: 56px minmax(0, 1fr); }
  .rn-opx-checks { grid-column: 1 / -1; }
}

/* Registrasi & Verifikasi Posko pass 2 (2026-10-07) — dense two-column form of "registrasi & verifikasi Posko.png" (<main class="rn-dense rn-regx-page">) */
.rn-regx-page .rn-rp-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rn-regx-page .rn-rp-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.rn-regx-page .rn-rp-row > .panel { padding: 16px; }
.rn-regx-page .rn-form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.rn-regx-page .rn-form label { font-size: 11px; gap: 4px; }
.rn-regx-page .rn-form input:not([type=checkbox]), .rn-regx-page .rn-form select { font-size: 12px; padding: 8px 10px; border-radius: 8px; }
.rn-regx-page .rn-fn-picker { grid-column: 1 / -1; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; margin: 0; }
.rn-regx-page .rn-fn-picker legend { font-size: 10.5px; padding: 0 6px; text-transform: none; letter-spacing: 0; }
.rn-regx-page .rn-check { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; font-size: 11.5px; }
.rn-regx-page .rn-check input[type=checkbox] { width: 16px !important; height: 16px !important; padding: 0; margin: 0; flex: none; }
.rn-regx-page .rn-geo-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rn-regx-page .rn-geo-actions .btn { font-size: 11px; padding: 6px 10px; }
.rn-regx-page .form-actions { margin-top: 12px; }
.rn-regx-page .rn-rp-checklist li { font-size: 11.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.rn-regx-page .rn-rp-actions .btn { font-size: 12px; padding: 9px 12px; }
.rn-regx-page .rn-rp-actions .btn.primary { background: #2fa66a; border-color: #2fa66a; color: #fff; }
.rn-regx-page .rn-rp-actions .btn.danger { color: #c2332f; border-color: #e5a7a3; background: #fff; }
.rn-regx-page .rn-sub-h { font-size: 12px; margin: 14px 0 8px; }
.rn-regx-page .rn-table td { white-space: normal; padding: 8px 5px; font-size: 11px; }
.rn-regx-page .rn-table th { white-space: nowrap; font-size: 10.5px; text-transform: none; letter-spacing: 0; }
@media (max-width: 640px) { .rn-regx-page .rn-form .form-grid { grid-template-columns: minmax(0, 1fr); } .rn-regx-page .rn-rp-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rn-regx-page .panel, .rn-regx-page .rn-table-wrap { min-width: 0; max-width: 100%; } .rn-regx-page .rn-table-wrap { overflow-x: auto; }
.rn-regx-page .form-grid > *, .rn-regx-page .rn-form label, .rn-regx-page fieldset { min-width: 0; } .rn-regx-page .rn-form input:not([type=checkbox]), .rn-regx-page .rn-form select { width: 100%; min-width: 0; box-sizing: border-box; }
.rn-regx-page .rn-fn-picker { display: block; }
.rn-regx-page .rn-fn-picker .rn-check { margin: 4px 14px 4px 0; }
.rn-regx-page .rn-fn-picker .rn-check { width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; }
.rn-regx-page .rn-fn-picker { display: block !important; } .rn-regx-page .rn-fn-picker .rn-check { display: inline-flex !important; max-width: 100%; }
.rn-regx-page .rn-form .rn-fn-picker .rn-check input[type=checkbox] { width: 16px !important; min-width: 16px !important; height: 16px !important; padding: 0 !important; }

/* Login & Registrasi pass 2 (2026-10-07): "Bergabung sesuai peran Anda" panel */
.rn-auth-join { margin-top: 14px; }
.rn-auth-join h3 { margin: 0 0 4px; font-size: 14px; }
.rn-auth-join-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.rn-auth-join-grid button { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; cursor: pointer; color: var(--text); }
.rn-auth-join-grid button:hover { border-color: #e8553d; }
.rn-auth-join-grid i { width: 38px; height: 38px; border-radius: 10px; background: rgba(230, 95, 60, .12); color: #d8573a; display: grid; place-items: center; font-size: 20px; font-style: normal; }
.rn-auth-join-grid b { display: block; font-size: 12px; }
.rn-auth-join-grid small { display: block; font-size: 10px; color: var(--muted); line-height: 1.3; }
.rn-auth-join-grid em { font-style: normal; color: var(--muted); }
@media (max-width: 640px) { .rn-auth-join-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rn-auth-join-grid button { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .rn-auth-join-grid em { display: none; } }

/* Welcome page pass 2 (2026-10-07): role cards as in "welcome page rescue-net.png" — bordered white cards, icon left of title */
@media (min-width: 901px) {
  .welcome-roles .role-card { grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 10px; row-gap: 4px; align-items: start; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 18px rgba(145, 84, 54, .06); min-height: 150px; transition: transform .15s ease, box-shadow .15s ease; }
  .welcome-roles .role-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(145, 84, 54, .12); }
  .welcome-roles .role-card .role-icon { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  .welcome-roles .role-card b { grid-column: 2; align-self: center; font-size: 13px; }
  .welcome-roles .role-card > span:not(.role-icon):not(.role-more) { grid-column: 2; font-size: 11px; line-height: 1.4; }
  .welcome-roles .role-card .role-more { grid-column: 1 / -1; align-self: end; margin-top: 4px; font-size: 11px; }
  .welcome-roles h2, .welcome-roles h3 { font-size: 16px; }
}
@media (min-width: 901px) {
  body.home-page .welcome-roles .role-card .role-icon { display: grid !important; place-items: center; width: 44px !important; height: 44px !important; border-radius: 50% !important; background: rgba(255, 234, 224, .9) !important; color: #ef5c45 !important; border: 1px solid rgba(232, 117, 88, .18) !important; margin: 0 !important; }
  body.home-page .welcome-roles .role-card:nth-child(2) .role-icon, body.home-page .welcome-roles .role-card:nth-child(5) .role-icon { background: rgba(226, 244, 234, .9) !important; color: #2f8b61 !important; }
  body.home-page .welcome-roles .role-card:nth-child(4) .role-icon, body.home-page .welcome-roles .role-card:nth-child(6) .role-icon { background: rgba(255, 241, 224, .9) !important; color: #dd7431 !important; }
}