/* ══════════════════════════════════════════════════════════════════════════════
   KERMA SBM ITB — Premium Design System
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --navy-900:  #001433;
  --navy-800:  #00204D;
  --navy-700:  #002966;
  --navy-600:  #003380;
  --primary:   #004B87;
  --primary-h: #003D72;
  --cyan:      #0EA5E9;
  --mint:      #10B981;
  --coral:     #F97316;
  --violet:    #7C3AED;
  --gold:      #C9A84C;
  --gold-light:#F0E0A4;
  --bg:        #F3F6FB;
  --surface:   #FFFFFF;
  --surface-2: #F8FAFD;
  --surface-3: #F1F6FC;
  --border:    #E4EAF2;
  --border-2:  #CBD5E0;
  --text-1:    #0F1B2D;
  --text-2:    #4A5568;
  --text-3:    #94A3B8;
  --success:   #059669;
  --success-bg:#D1FAE5;
  --warn:      #D97706;
  --warn-bg:   #FEF3C7;
  --danger:    #DC2626;
  --danger-bg: #FEE2E2;
  --info-bg:   #DBEAFE;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.10), 0 24px 56px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.16), 0 32px 80px rgba(0,0,0,0.14);
  --trans:     all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  background-image:
    linear-gradient(135deg, rgba(14,165,233,0.11) 0%, rgba(14,165,233,0) 32%),
    linear-gradient(315deg, rgba(249,115,22,0.09) 0%, rgba(249,115,22,0) 26%),
    linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0) 42%);
  height: 100vh;
  overflow: hidden;
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button:disabled { cursor: not-allowed; opacity: 0.62; transform: none !important; box-shadow: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(14,165,233,0.24);
  outline-offset: 2px;
}

/* ─── Layout ──────────────────────────────────────────────────────────────── */
.dashboard-container {
  display: flex;
  height: 100vh;
  padding: 16px;
  gap: 16px;
  align-items: stretch;
}

/* ─── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  width: 216px;
  flex-shrink: 0;
  background: linear-gradient(160deg, #061D48 0%, #082B64 48%, var(--navy-900) 100%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
  border: 1px solid rgba(255,255,255,0.08);
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar::before {
  content: '';
  display: block;
  height: 3px;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--gold), var(--cyan), var(--mint));
}

/* Logo */
.logo-area {
  padding: 24px 20px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 8px;
  flex-shrink: 0;
}
.logo-area .logo-itb {
  width: 56px;
  height: auto;
  display: block;
  margin: 0 auto 12px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.logo-area h2 {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0;
  line-height: 1.18;
  text-wrap: balance;
}
.logo-area .logo-subtitle {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0.9;
}

/* User info */
.user-info-sidebar {
  padding: 12px 14px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 4px;
  flex-shrink: 0;
}
.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
}
.user-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  color: #0F1B2D;
  background: linear-gradient(135deg, var(--gold), #F8E8A8 50%, var(--cyan));
  font-size: 13px;
  font-weight: 800;
}
.user-meta { min-width: 0; }
#userRoleBadge {
  font-size: 9px !important;
  color: var(--gold) !important;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 3px;
}
#userNamaSidebar {
  font-size: 12.5px !important;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#btnLogout {
  margin-top: 10px !important;
  width: 100%;
  padding: 7px 10px !important;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  font-size: 10.5px !important;
  font-weight: 500;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: var(--trans);
  letter-spacing: 0;
}
#btnLogout:hover {
  background: rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.95);
}

/* Navigation */
.navigation {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 12px 20px;
  flex: 1;
}
.nav-category {
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 16px 8px 5px;
  opacity: 0.75;
}
.nav-subcategory {
  display: block;
  margin: 6px 8px 2px 42px;
  color: rgba(255,255,255,0.38);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,0.58);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: var(--trans);
  font-size: 11.5px;
  font-weight: 500;
  position: relative;
  border: 1px solid transparent;
}
.nav-item--child {
  margin-left: 20px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 10.8px;
}
.nav-item .nav-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  line-height: 1;
  font-size: 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}
.nav-item--child .nav-icon {
  width: 21px;
  height: 21px;
  border-radius: 7px;
  font-size: 11px;
}
.nav-item:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  transform: translateX(2px);
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(14,165,233,0.18) 0%, rgba(201,168,76,0.11) 100%);
  color: #FFFFFF;
  font-weight: 600;
  border-color: rgba(255,255,255,0.13);
  border-left: 2px solid var(--cyan);
  padding-left: 8px;
}
.nav-item.active .nav-icon {
  background: linear-gradient(135deg, rgba(14,165,233,0.32), rgba(201,168,76,0.22));
  border-color: rgba(255,255,255,0.18);
}
.nav-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0; }

/* ─── Main Content ────────────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0;
}
.view-section { display: none; flex-direction: column; flex: 1; overflow: hidden; gap: 12px; }
.view-section.active { display: flex; }
#sectionPimpinan.view-section.active {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
#sectionPimpinan.view-section.active::-webkit-scrollbar { width: 8px; }
#sectionPimpinan.view-section.active::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(74,85,104,0.24);
}
#sectionPimpinan.view-section.active::-webkit-scrollbar-track { background: transparent; }

/* ─── Top Header ──────────────────────────────────────────────────────────── */
.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 4px 2px 0;
  flex-shrink: 0;
}
.top-header-text h1 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: 0;
}
.top-header-text p {
  font-size: 11.5px;
  color: var(--text-2);
  margin-top: 2px;
  font-weight: 400;
}
.top-header-actions { display: flex; align-items: center; gap: 8px; }
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
.section-eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--cyan), var(--mint));
}
.role-pimpinan-only.is-hidden { display: none !important; }

/* ─── Executive Dashboard ─────────────────────────────────────────────────── */
.pimpinan-date-control {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.76);
  box-shadow: var(--shadow-xs);
}
.pimpinan-date-control label {
  color: var(--text-2);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.pimpinan-date-control .filter-input { min-width: 154px; }
.executive-note {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 11px 14px;
  border: 1px solid #BFDBFE;
  border-radius: 8px;
  background: linear-gradient(135deg, #EFF6FF, rgba(255,255,255,0.84));
  color: var(--text-2);
  font-size: 11.5px;
}
.executive-note strong {
  color: var(--primary);
  font-size: 11px;
  text-transform: uppercase;
}
.executive-filter-panel {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px;
  flex-shrink: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.88);
  box-shadow: var(--shadow-sm);
}
.executive-filter-panel--general {
  grid-template-columns: repeat(2, minmax(180px, 240px));
}
.executive-filter-panel--finance {
  grid-template-columns: repeat(2, minmax(180px, 240px));
}
.finance-balance-strip {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  flex-shrink: 0;
}
.finance-balance-card {
  width: min(100%, 540px);
  min-height: 84px;
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, #062D5E, var(--primary) 62%, #0EA5E9);
  box-shadow: var(--shadow-sm);
  color: #fff;
}
.finance-balance-card--metric {
  width: min(100%, 340px);
  min-height: 84px;
  grid-template-columns: 1fr;
  background: linear-gradient(135deg, #0F4C81, #2563EB 62%, #38BDF8);
}
.finance-balance-date {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.finance-balance-date label {
  color: rgba(255,255,255,0.74);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.finance-balance-date .filter-input {
  height: 34px;
  background: rgba(255,255,255,0.95);
}
.finance-balance-value {
  min-width: 0;
}
.finance-balance-value .exec-label,
.finance-balance-value small {
  color: rgba(255,255,255,0.74);
}
.finance-balance-value strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 23px;
  line-height: 1.05;
  font-weight: 800;
}
.finance-balance-value small {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.3;
}
.exec-filter-group {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.exec-filter-group.is-hidden { display: none; }
.exec-filter-group label {
  color: var(--text-2);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.exec-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-top: 6px;
  padding-top: 2px;
}
.exec-section-title--finance {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.exec-section-title div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.exec-section-title span {
  color: var(--primary);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
}
.exec-section-title strong {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}
.exec-grid {
  display: grid;
  grid-template-columns: 1.45fr repeat(3, 1fr);
  gap: 10px;
  flex-shrink: 0;
}
.exec-grid--general {
  grid-template-columns: 1.1fr 1.4fr 1fr 1fr;
}
.exec-card {
  min-height: 112px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow-sm);
}
.exec-card--hero {
  color: #fff;
  background: linear-gradient(135deg, #062D5E, var(--primary) 62%, #0EA5E9);
  border-color: rgba(255,255,255,0.18);
}
.exec-card--warning { border-color: #FDE68A; background: linear-gradient(135deg, #FFFBEB, #FFFFFF); }
.exec-label {
  display: block;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.exec-label--tooltip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.finance-balance-value .info-tooltip {
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.exec-card--hero .exec-label,
.exec-card--hero small { color: rgba(255,255,255,0.74); }
.exec-card strong {
  display: block;
  margin-top: 10px;
  color: var(--text-1);
  font-size: 20px;
  line-height: 1.08;
  font-weight: 800;
}
.exec-card--hero strong { color: #fff; font-size: 28px; }
.exec-card small {
  display: block;
  margin-top: 9px;
  color: var(--text-3);
  font-size: 10.5px;
  line-height: 1.35;
}
.general-summary-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(180px, 0.72fr) repeat(2, minmax(170px, 1fr));
  gap: 10px;
  align-items: stretch;
  flex-shrink: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
}
.dashboard-bottom-summary {
  margin-top: 12px;
}
.general-period-filter {
  display: grid;
  grid-template-columns: minmax(150px, 1fr);
  gap: 10px;
  align-items: end;
  min-width: 0;
}
.general-summary-metric {
  min-height: 76px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.general-summary-metric--hoverable {
  cursor: help;
}
.general-summary-metric--hoverable:hover {
  border-color: rgba(14,165,233,0.36);
  background: #F3FAFF;
}
.general-summary-metric--primary {
  color: #fff;
  border-color: rgba(255,255,255,0.16);
  background: linear-gradient(135deg, #062D5E, var(--primary));
}
.general-summary-metric span {
  display: block;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.general-summary-metric--primary span,
.general-summary-metric--primary small { color: rgba(255,255,255,0.74); }
.general-summary-metric .insight-label--tooltip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.general-summary-metric .info-tooltip {
  display: inline-flex;
  flex: 0 0 auto;
}
.general-summary-metric--primary .info-tooltip {
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.general-summary-metric strong {
  display: block;
  margin-top: 7px;
  color: var(--text-1);
  font-size: 21px;
  line-height: 1.05;
  font-weight: 800;
}
.general-summary-metric--primary strong { color: #fff; }
.general-summary-metric small {
  display: block;
  margin-top: 7px;
  color: var(--text-3);
  font-size: 10.5px;
}
.executive-chart-preview-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
  flex-shrink: 0;
  flex: 0 0 auto;
}
.dashboard-bottom-charts {
  margin-top: 10px;
}
.executive-panel--chart-preview {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.executive-panel--chart-preview:hover,
.executive-panel--chart-preview:focus-visible {
  border-color: rgba(14,165,233,0.38);
  box-shadow: var(--shadow-md);
}
.executive-panel--chart-preview:focus-visible {
  outline: 2px solid rgba(14,165,233,0.42);
  outline-offset: 3px;
}
.executive-panel--chart-preview .yearly-table-wrap,
.executive-panel--chart-preview .relationship-table-wrap,
.executive-panel--chart-preview .status-program-table {
  display: none;
}
.executive-panel--chart-preview .yearly-nominal-layout,
.executive-panel--chart-preview .yearly-count-layout,
.executive-panel--chart-preview .relationship-analytics-layout,
.executive-panel--chart-preview .status-chart-layout {
  grid-template-columns: minmax(0, 1fr);
}
.executive-panel--chart-preview .yearly-chart-shell {
  max-width: none;
  min-height: 232px;
}
.executive-panel--chart-preview .relationship-chart {
  min-height: 232px;
}
.executive-panel--chart-preview .status-pie-wrap {
  min-height: 232px;
  justify-content: center;
}
.executive-chart-preview-row .executive-panel {
  min-width: 220px;
  height: 304px;
}
.executive-chart-preview-row .panel-title {
  height: 74px;
  min-height: 74px;
  box-sizing: border-box;
  gap: 8px;
  padding: 9px 11px;
  align-items: center;
  flex-shrink: 0;
}
.executive-chart-preview-row .panel-title-inline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.executive-chart-preview-row .panel-title-inline h2 {
  min-width: 0;
}
.executive-chart-preview-row .panel-title-inline .info-tooltip {
  flex: 0 0 auto;
}
.executive-chart-preview-row .panel-title h2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11.5px;
  line-height: 1.22;
}
.executive-chart-preview-row .panel-title p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 2px;
  font-size: 9.5px;
  line-height: 1.35;
}
.executive-chart-preview-row .yearly-nominal-layout,
.executive-chart-preview-row .yearly-count-layout,
.executive-chart-preview-row .relationship-analytics-layout,
.executive-chart-preview-row .status-chart-layout {
  flex: 1;
  gap: 8px;
  min-height: 0;
  padding: 8px;
  align-items: center;
  justify-items: center;
}
.executive-chart-preview-row .yearly-chart-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  height: 100%;
  padding-bottom: 4px;
  box-sizing: border-box;
  border-radius: 7px;
}
.executive-chart-preview-row .yearly-chart-svg {
  width: 100% !important;
  min-width: 100% !important;
  height: 100%;
  min-height: 0;
}
.executive-chart-preview-row .relationship-chart {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 0;
  height: 100%;
  padding: 6px 8px;
  border-radius: 7px;
}
.executive-chart-preview-row .relationship-chart-head {
  gap: 3px;
  padding-bottom: 4px;
}
.executive-chart-preview-row .relationship-chart-head span {
  font-size: 8.5px;
}
.executive-chart-preview-row .relationship-chart-head strong {
  font-size: 19px;
}
.executive-chart-preview-row .relationship-chart-head small {
  font-size: 9px;
}
.executive-chart-preview-row .relationship-chart-bars {
  gap: 4px;
  padding-top: 5px;
}
.executive-chart-preview-row .relationship-chart-row {
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 3px 7px;
}
.executive-chart-preview-row .relationship-chart-label span {
  font-size: 9.5px;
}
.executive-chart-preview-row .relationship-chart-label small {
  display: none;
}
.executive-chart-preview-row .relationship-chart-value strong {
  font-size: 13px;
}
.executive-chart-preview-row .relationship-chart-value small {
  font-size: 8.5px;
}
.executive-chart-preview-row .relationship-chart-track {
  height: 6px;
}
.executive-chart-preview-row .status-pie-wrap {
  width: 100%;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.executive-chart-preview-row .status-pie {
  width: 132px;
  height: 132px;
}
.executive-chart-preview-row .status-pie-center {
  width: 70px;
  height: 70px;
}
.executive-chart-preview-row .status-pie-center strong {
  font-size: 19px;
}
.executive-chart-preview-row .status-pie-center small {
  font-size: 8px;
}
.executive-chart-preview-row .status-pie-legend {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
  margin-left: 0;
  padding-bottom: 2px;
  box-sizing: border-box;
}
.executive-chart-preview-row .status-pie-legend span {
  justify-content: center;
  gap: 5px;
  font-size: 8.5px;
  text-align: center;
}
.executive-chart-preview-row .status-dot {
  width: 7px;
  height: 7px;
}
.executive-panel--yearly-nominal,
.executive-panel--yearly-count { flex-shrink: 0; }
.yearly-nominal-layout,
.yearly-count-layout {
  display: grid;
  grid-template-columns: minmax(360px, 620px) minmax(320px, 1fr);
  gap: 12px;
  padding: 14px 16px 16px;
  align-items: stretch;
}
.yearly-chart-shell {
  min-width: 0;
  max-width: 620px;
  min-height: 258px;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(14,165,233,0.06), transparent 54%),
    var(--surface);
}
.yearly-chart-svg {
  display: block;
  min-height: 250px;
  overflow: visible;
}
.yearly-chart-line {
  stroke: var(--primary);
  stroke-width: 1.25;
  opacity: 0.95;
}
.yearly-chart-area {
  fill: rgba(14,165,233,0.1);
}
.yearly-chart-point {
  stroke: var(--primary);
}
.yearly-count-line {
  stroke: var(--mint);
  stroke-width: 1.25;
  opacity: 0.95;
}
.yearly-count-area {
  fill: rgba(16,185,129,0.1);
}
.yearly-count-point {
  stroke: var(--mint);
}
.yearly-table-wrap {
  min-width: 0;
  max-height: 258px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.yearly-table-wrap table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
}
.yearly-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 10px;
  color: var(--primary);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
}
.yearly-table-wrap td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
}
.yearly-table-wrap th:last-child,
.yearly-table-wrap td:last-child {
  min-width: 150px;
}
.yearly-table-wrap td:last-child {
  color: var(--text-1);
  font-weight: 800;
  white-space: nowrap;
}
.yearly-table-wrap tr:last-child td { border-bottom: none; }
.executive-panel--status-chart { flex-shrink: 0; }
.status-chart-layout {
  display: grid;
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px 16px;
  align-items: center;
}
.status-pie-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 210px;
}
.status-pie {
  --berjalan: 0;
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--mint) 0 var(--berjalan), var(--coral) 0 100%);
  box-shadow: inset 0 0 0 1px rgba(15,27,45,0.04), var(--shadow-sm);
}
.status-pie-center {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
}
.status-pie-center strong {
  color: var(--text-1);
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
}
.status-pie-center small {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.status-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 16px;
}
.status-pie-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}
.status-program-table {
  min-width: 0;
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.status-program-table table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}
.status-program-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 10px;
  color: var(--primary);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
}
.status-program-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
  font-size: 11px;
}
.status-program-table tr:last-child td { border-bottom: none; }
.program-id-chip {
  display: inline-block;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  color: #047857;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.2);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.program-id-chip--ended {
  color: #B91C1C;
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.2);
}
.program-id-chip--young {
  color: #0369A1;
  background: rgba(14,165,233,0.11);
  border-color: rgba(14,165,233,0.22);
}
.program-id-chip--mature {
  color: #047857;
  background: rgba(16,185,129,0.12);
  border-color: rgba(16,185,129,0.22);
}
.program-id-chip--soon {
  color: #B45309;
  background: rgba(245,158,11,0.13);
  border-color: rgba(245,158,11,0.26);
}
.executive-panel--relationship { flex-shrink: 0; }
.relationship-analytics-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  align-items: stretch;
}
.relationship-chart {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(14,165,233,0.06), transparent 62%),
    #fff;
}
.relationship-chart-head {
  display: grid;
  gap: 4px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border);
}
.relationship-chart-head span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.relationship-chart-head strong {
  color: var(--text-1);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
}
.relationship-chart-head small {
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 700;
}
.relationship-chart-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 13px;
}
.relationship-chart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 8px 10px;
  align-items: center;
}
.relationship-chart-label {
  min-width: 0;
}
.relationship-chart-label span {
  display: block;
  color: var(--text-1);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
.relationship-chart-label small {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-size: 10px;
  line-height: 1.25;
}
.relationship-chart-track {
  grid-column: 1 / -1;
  height: 9px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-3);
}
.relationship-chart-track i {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: 999px;
  background: var(--primary);
}
.relationship-chart-row--repeat .relationship-chart-track i {
  background: linear-gradient(90deg, var(--primary), var(--cyan));
}
.relationship-chart-row--stale .relationship-chart-track i {
  background: linear-gradient(90deg, var(--gold), var(--coral));
}
.relationship-chart-row--new .relationship-chart-track i {
  background: linear-gradient(90deg, var(--mint), #22C55E);
}
.relationship-chart-value {
  text-align: right;
}
.relationship-chart-value strong {
  display: block;
  color: var(--text-1);
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
}
.relationship-chart-value small {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 800;
}
.relationship-table-wrap {
  min-width: 0;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.relationship-table-wrap table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.relationship-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
  width: 33.333%;
  padding: 10px 11px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  text-align: left;
  vertical-align: top;
}
.relationship-table-wrap th:last-child,
.relationship-table-wrap td:last-child {
  border-right: none;
}
.relationship-table-wrap th span {
  display: block;
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}
.relationship-table-wrap th small {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
}
.relationship-table-wrap td {
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.relationship-table-wrap tr:last-child td {
  border-bottom: none;
}
.relationship-table-item {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.relationship-table-item small {
  color: var(--text-3);
  font-size: 10px;
  line-height: 1.25;
}
.relationship-empty-cell {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  text-align: center;
}
.relationship-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  min-width: 0;
}
.relationship-column {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.72);
  overflow: hidden;
}
.relationship-column-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.relationship-column-head span {
  display: block;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.relationship-column-head small {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 10.5px;
  line-height: 1.3;
}
.relationship-column-head strong {
  color: var(--text-1);
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}
.relationship-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  max-height: 230px;
  overflow-y: auto;
}
.relationship-item {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.relationship-partner-name {
  display: block;
  color: var(--text-1);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}
.relationship-partner-name:hover { color: var(--primary); }
.relationship-item small {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 10.5px;
  line-height: 1.35;
}
.executive-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 10px;
  min-height: 0;
  flex: 1;
}
#sectionPimpinan .executive-layout {
  flex: 0 0 auto;
}
.executive-layout--secondary {
  flex: 0 0 auto;
  grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1fr);
}
.executive-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.executive-panel--status,
.executive-panel--line {
  flex-shrink: 0;
}
.executive-panel--line { min-height: 300px; }
.panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(248,250,253,0.82);
}
.panel-title h2 { font-size: 13px; color: var(--text-1); }
.panel-title p { margin-top: 3px; color: var(--text-3); font-size: 10.5px; }
.panel-metric {
  min-width: 148px;
  text-align: right;
}
.panel-metric span,
.panel-metric small {
  display: block;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 700;
}
.panel-metric strong {
  display: block;
  margin: 2px 0;
  color: var(--primary);
  font-size: 14px;
  font-weight: 800;
}
.status-split {
  padding: 14px 16px;
}
.status-track {
  height: 16px;
  display: flex;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-3);
}
.status-segment {
  min-width: 0;
  transition: width 0.2s ease;
}
.status-segment--active { background: linear-gradient(90deg, var(--primary), var(--mint)); }
.status-segment--ended { background: linear-gradient(90deg, var(--gold), var(--coral)); }
.status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.status-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
}
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}
.status-dot--active { background: var(--mint); }
.status-dot--ended { background: var(--coral); }
.cashflow-chart {
  flex: 1;
  min-height: 220px;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.cashflow-row {
  display: grid;
  grid-template-columns: 118px 1fr 120px;
  align-items: center;
  gap: 12px;
}
.cashflow-label { font-size: 11px; font-weight: 700; color: var(--text-2); }
.cashflow-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.cashflow-bar {
  height: 100%;
  min-width: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--cyan), var(--mint));
}
.cashflow-value { text-align: right; font-size: 11px; font-weight: 800; color: var(--text-1); }
.line-chart-shell {
  flex: 1;
  min-height: 228px;
  padding: 14px 16px 16px;
  overflow-x: auto;
  overflow-y: visible;
  background:
    linear-gradient(180deg, rgba(14,165,233,0.06), transparent 50%),
    var(--surface);
}
.line-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
}
.line-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.legend-line {
  width: 22px;
  height: 3px;
  border-radius: 999px;
}
.legend-line--masuk { background: var(--mint); }
.legend-line--keluar { background: var(--coral); }
.legend-line--saldo { background: var(--primary); }
.line-chart-svg {
  display: block;
  width: 100%;
  min-height: 248px;
  overflow: visible;
}
.line-chart-axis {
  fill: var(--text-3);
  font-size: 9.5px;
  font-weight: 700;
}
.line-chart-value {
  fill: var(--primary);
  font-size: 10px;
  font-weight: 800;
}
.line-chart-y-label {
  fill: var(--text-3);
  font-size: 9.5px;
  font-weight: 700;
}
.line-chart-grid {
  stroke: #E6EDF6;
  stroke-width: 1;
}
.line-chart-marker {
  stroke: rgba(148,163,184,0.16);
  stroke-width: 1;
}
.line-chart-zero {
  stroke: rgba(15,27,45,0.3);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
}
.line-chart-path {
  fill: none;
  stroke-width: 0.95;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.line-chart-path--masuk { stroke: var(--mint); opacity: 0.24; }
.line-chart-path--keluar { stroke: var(--coral); opacity: 0.22; }
.line-chart-path--saldo { stroke: var(--primary); stroke-width: 1.55; opacity: 0.98; }
.line-chart-area {
  fill: rgba(14,165,233,0.12);
}
.line-chart-point {
  fill: #fff;
  stroke-width: 1.35;
}
.line-chart-point--masuk { stroke: var(--mint); opacity: 0.44; }
.line-chart-point--keluar { stroke: var(--coral); opacity: 0.4; }
.line-chart-point--saldo { stroke: var(--primary); }
.line-chart-point-group { cursor: default; }
.line-chart-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}
.line-chart-tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.line-chart-point-group:hover .line-chart-tooltip { opacity: 1; }
.line-chart-tooltip rect {
  fill: rgba(15,27,45,0.94);
  stroke: rgba(255,255,255,0.16);
  stroke-width: 1;
}
.line-chart-tooltip text {
  fill: #fff;
  font-size: 10px;
  font-weight: 800;
}
.exec-list {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding: 10px;
}
.exec-list-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.exec-list-item + .exec-list-item { margin-top: 8px; }
.exec-list-item strong {
  display: block;
  color: var(--text-1);
  font-size: 12px;
  line-height: 1.35;
}
.exec-list-item small {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 10.5px;
  line-height: 1.35;
}
.exec-list-money { text-align: right; color: var(--primary); font-size: 12px; font-weight: 800; white-space: nowrap; }
.exec-list-date { color: var(--text-2); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.exec-empty {
  min-height: 92px;
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--text-3);
  text-align: center;
  font-size: 11.5px;
  border: 1px dashed var(--border-2);
  border-radius: 8px;
  background: var(--surface-2);
}
.exec-metric-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.exec-metric-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.exec-metric-list span { color: var(--text-2); font-size: 11px; }
.exec-metric-list strong { color: var(--text-1); font-size: 12px; text-align: right; }
/* ─── Insight Cards ───────────────────────────────────────────────────────── */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  flex-shrink: 0;
}
.insight-card {
  position: relative;
  overflow: hidden;
  min-height: 90px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,253,0.92)),
    var(--surface);
  box-shadow: var(--shadow-sm);
}
.insight-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--mint), var(--gold));
  opacity: 0.9;
}
.insight-card--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #062D5E 62%, #081B3D);
  border-color: rgba(255,255,255,0.16);
}
.insight-card--primary .insight-label,
.insight-card--primary small { color: rgba(255,255,255,0.72); }
.insight-card strong {
  display: block;
  margin-top: 5px;
  font-size: 23px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}
.insight-card small {
  display: block;
  margin-top: 8px;
  color: var(--text-3);
  font-size: 10.5px;
  line-height: 1.35;
}
.insight-label {
  display: block;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* ─── Filter Panel ────────────────────────────────────────────────────────── */
.filter-panel {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-group--wide { flex: 1; min-width: 180px; }
.filter-group--action { justify-content: flex-end; }
.filter-panel--neraca {
  padding: 10px 14px;
}
.neraca-toolbar {
  align-items: flex-start;
  justify-content: space-between;
}
.neraca-toolbar-action {
  flex: 0 0 auto;
}
.neraca-searchbar {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: flex-start;
  gap: 7px;
  margin-left: auto;
}
.neraca-searchbar .filter-label {
  flex-shrink: 0;
  line-height: 28px;
  white-space: nowrap;
}
.neraca-searchbar .filter-input {
  width: 220px;
  flex: 0 0 220px;
  padding: 6px 9px;
  font-size: 11.5px;
}
.neraca-searchbar .btn-reset {
  padding: 6px 10px;
  font-size: 11px;
}
.filter-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0;
}
.filter-input {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text-1);
  outline: none;
  background: var(--surface-2);
  font-family: 'Inter', sans-serif;
  transition: var(--trans);
}
.filter-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,75,135,0.10);
  background: var(--surface);
}
.btn-reset {
  background: var(--surface-2);
  color: var(--text-2);
  border: 1.5px solid var(--border);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  transition: var(--trans);
}
.btn-reset:hover { background: var(--border); color: var(--text-1); }
.filter-info { font-size: 11px; color: var(--text-3); margin-top: 8px; }

/* Warn legend */
.warn-legend { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.warn-legend-label { font-size: 10px; color: var(--text-3); font-weight: 500; }

/* ─── Table ───────────────────────────────────────────────────────────────── */
.table-container {
  background: rgba(255,255,255,0.92);
  border-radius: var(--radius-lg);
  overflow: auto;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  flex: 1;
  min-height: 0;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1100px;
  font-size: 12px;
}
table th {
  background: linear-gradient(180deg, var(--primary), #073B73);
  color: rgba(255,255,255,0.95);
  padding: 11px 10px;
  text-align: center;
  vertical-align: middle;
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
table th:first-child { border-radius: 0; }
table th:last-child { border-radius: 0; }
table th[data-col] { padding-right: 28px; }

.plotting-rekap-table {
  width: max-content;
  min-width: 1186px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.plotting-rekap-table col.rekap-col-no { width: 58px; }
.plotting-rekap-table col.rekap-col-nama { width: 180px; }
.plotting-rekap-table col.rekap-col-role { width: 62px; }
.plotting-rekap-table col.rekap-col-money { width: 124px; }
.plotting-rekap-table col.rekap-col-money-wide { width: 142px; }
.plotting-rekap-table th,
.plotting-rekap-table td {
  box-sizing: border-box;
}
.plotting-rekap-table thead tr:first-child th {
  top: 0;
  z-index: 5;
  height: 48px;
  white-space: normal;
  line-height: 1.2;
  padding: 5px;
}
.plotting-rekap-table thead tr:nth-child(2) th {
  top: 48px;
  z-index: 4;
  height: 40px;
  padding: 5px;
}
.plotting-rekap-table thead th[rowspan="2"] {
  height: 88px;
}
.plotting-rekap-table th[data-col] {
  padding-right: 5px;
}
.plotting-rekap-table .plotting-rekap-group-head {
  background: linear-gradient(180deg, #0B5D99, #073B73) !important;
}
.plotting-rekap-table .plotting-rekap-role-head,
.plotting-rekap-table .rekap-role-diff {
  width: 62px;
  min-width: 62px;
  max-width: 62px;
  padding-left: 4px;
  padding-right: 4px;
}
.plotting-rekap-table .plotting-rekap-role-head {
  background: linear-gradient(180deg, #07508E, #073B73);
}
.plotting-rekap-table .rekap-role-diff {
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.plotting-rekap-table tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.plotting-rekap-table tbody td:first-child {
  text-align: center;
}
.plotting-rekap-table thead th .th-filter-btn {
  right: 3px;
}
#panelEksporPlottingRekapitulasi {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#panelEksporPlottingRekapitulasi .plotting-section-title,
#panelEksporPlottingRekapitulasi .plotting-export-summary {
  flex-shrink: 0;
}
#panelEksporPlottingRekapitulasi .plotting-table-container {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
table td {
  padding: 9px 10px;
  border-bottom: 1px solid #F1F5FB;
  white-space: nowrap;
  color: var(--text-1);
  font-size: 12px;
}
table tbody tr:last-child td { border-bottom: none; }
table tbody tr:nth-child(even) { background-color: #FAFCFF; }
table tbody tr { transition: background 0.15s; }
table tbody tr:hover { background-color: #EEF4FD !important; }

.table-state-row td {
  white-space: normal;
  background: var(--surface) !important;
}
.table-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 118px;
  padding: 22px;
  color: var(--text-2);
  text-align: center;
}
.state-dot {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.table-state--loading .state-dot {
  border: 3px solid #E2ECF8;
  border-top-color: var(--cyan);
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}
.table-state--empty .state-dot::before { content: '0'; font-weight: 800; color: var(--primary); }
.table-state--error .state-dot::before { content: '!'; font-weight: 800; color: var(--danger); }
.table-state strong { font-size: 13px; color: var(--text-1); }
.table-state small { max-width: 420px; color: var(--text-3); font-size: 11px; line-height: 1.5; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.badge-berjalan  { background: var(--success-bg); color: var(--success); }
.badge-berakhir  { background: var(--danger-bg);  color: var(--danger);  }
.badge-draft     { background: #F1F5F9; color: #64748B; }
.badge-submitted { background: var(--warn-bg);    color: var(--warn);    }
.badge-approved  { background: var(--success-bg); color: var(--success); }
.badge-rejected  { background: var(--danger-bg);  color: var(--danger);  }
.badge-warn-3bln { background: var(--danger-bg);  color: var(--danger);  }
.badge-warn-6bln { background: var(--warn-bg);    color: var(--warn);    }
.badge-warn-1thn { background: #FEF9C3;            color: #A16207;        }
.badge-penuh     { background: var(--success-bg); color: var(--success); }
.badge-bertahap  { background: var(--info-bg);    color: #1D4ED8;        }
.badge-alokasi-aktif       { background: #DCFCE7; color: #15803D;        }
.badge-alokasi-tidak-aktif { background: #F1F5F9; color: #64748B;        }
.badge-undri     { background: var(--warn-bg);    color: var(--warn);    }
.badge-jenis-pd  { background: #E0F2FE;            color: #0369A1;        }
.badge-jenis-pn  { background: #EDE9FE;            color: #6D28D9;        }
.badge-jenis-pm  { background: #DCFCE7;            color: #15803D;        }
.badge-jenis-unknown { background: #F1F5F9;        color: #64748B;        }
.badge-realisasi-pegawai { background: #FEE2E2;    color: #B91C1C;        }
.badge-realisasi-barang  { background: #FEF3C7;    color: #A16207;        }
.badge-realisasi-jasa    { background: #DBEAFE;    color: #1D4ED8;        }
.badge-realisasi-modal   { background: #EDE9FE;    color: #6D28D9;        }
.badge-realisasi-default { background: #F1F5F9;    color: #64748B;        }
.badge-rencana-ok        { background: #DCFCE7;    color: #15803D;        }
.badge-rencana-warning   { background: #FEF3C7;    color: #A16207;        }
.badge-sisa-aman         { background: #DCFCE7;    color: #15803D;        }
.badge-sisa-tinggi       { background: #FEF3C7;    color: #A16207;        }
.badge-sisa-review       { background: #E0E7FF;    color: #3730A3;        }
.badge-sisa-defisit      { background: #FEE2E2;    color: #B91C1C;        }
.badge-sisa-belum        { background: #E0F2FE;    color: #0369A1;        }
.strata-badge    { background: var(--info-bg);    color: var(--primary); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
.realisasi-sisa-negative { color: var(--danger); font-weight: 800; }
.realisasi-sisa-warning { color: #A16207; font-weight: 800; }
.td-number {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rencana-date-na { color: #A16207; font-weight: 800; }

/* Table row warnings */
tr.warn-3bln > td { background-color: #FFF5F5 !important; }
tr.warn-3bln:hover > td { background-color: #FEE2E2 !important; }
tr.warn-6bln > td { background-color: #FFFBEB !important; }
tr.warn-6bln:hover > td { background-color: #FEF3C7 !important; }
tr.warn-1thn > td { background-color: #FEFCE8 !important; }
tr.warn-1thn:hover > td { background-color: #FEF9C3 !important; }

/* Truncate */
.td-truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.td-truncate.expanded {
  max-width: none;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 2px 8px rgba(0,75,135,0.28), 0 1px 2px rgba(0,0,0,0.1);
  transition: var(--trans);
  letter-spacing: 0;
}
.btn-primary:hover {
  background: var(--primary-h);
  box-shadow: 0 4px 14px rgba(0,75,135,0.35);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  color: var(--text-2);
  border: 1.5px solid var(--border);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  transition: var(--trans);
  text-decoration: none;
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--border-2); color: var(--text-1); }
.btn-secondary.is-active {
  background: rgba(0, 75, 135, 0.08);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 2px 8px rgba(220,38,38,0.28);
  transition: var(--trans);
}
.btn-danger:hover { background: #B91C1C; transform: translateY(-1px); }

/* Aksi buttons in table */
.btn-aksi {
  border: none;
  border-radius: var(--radius-sm);
  padding: 4px 7px;
  font-size: 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: var(--trans);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.btn-aksi:hover { background: var(--border); transform: translateY(-1px); box-shadow: var(--shadow-xs); }

.btn-edit-mitra, .btn-edit-kerma {
  background: #EFF6FF; color: var(--primary);
  border: 1px solid #BFDBFE;
  border-radius: var(--radius-sm);
  padding: 4px 9px; font-size: 10.5px; font-weight: 600;
  cursor: pointer; font-family: 'Inter', sans-serif; white-space: nowrap;
  transition: var(--trans);
}
.btn-edit-mitra:hover, .btn-edit-kerma:hover { background: #DBEAFE; }

.table-actions-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-mini-action {
  background: #EFF6FF;
  color: var(--primary);
  border: 1px solid #BFDBFE;
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  transition: var(--trans);
}
.btn-mini-action:hover:not(:disabled) { background: #DBEAFE; }
.btn-mini-action:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
.btn-mini-action--danger {
  color: var(--danger);
  background: #FFF5F5;
  border-color: #FEE2E2;
}
.btn-mini-action--danger:hover:not(:disabled) {
  background: #FEE2E2;
}
.btn-mini-action--invoice {
  background: #EFF6FF;
  border-color: #93C5FD;
  color: #1D4ED8;
}
.btn-mini-action--invoice:hover:not(:disabled) {
  background: #DBEAFE;
}
.btn-mini-action--invoice-ready {
  background: #DBEAFE;
  border-color: #60A5FA;
  color: #1E40AF;
}
.btn-mini-action--invoice-ready:hover:not(:disabled) {
  background: #BFDBFE;
}

.btn-hapus-kerma {
  background: #FFF5F5; color: var(--danger);
  border: 1px solid #FEE2E2;
  border-radius: var(--radius-sm);
  padding: 4px 9px; font-size: 10.5px; font-weight: 600;
  cursor: pointer; font-family: 'Inter', sans-serif; white-space: nowrap; margin-left: 4px;
  transition: var(--trans);
}
.btn-hapus-kerma:hover { background: #FEE2E2; }

.btn-addendum-kerma {
  background: #FFFBEB; color: #92400E;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-sm);
  padding: 4px 9px; font-size: 10.5px; font-weight: 600;
  cursor: pointer; font-family: 'Inter', sans-serif; white-space: nowrap; margin-left: 4px;
  display: inline-flex; align-items: center; gap: 4px;
  transition: var(--trans);
}
.btn-addendum-kerma:hover { background: #FEF3C7; }
.addendum-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; font-size: 9px; font-weight: 700; background: rgba(146,64,14,0.12); color: #92400E; }
.addendum-count-badge.has-addendum { background: #92400E; color: #FEF3C7; }

.btn-toggle-form {
  padding: 7px 14px; border-radius: var(--radius-sm); border: none;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: var(--trans); white-space: nowrap; flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}
.btn-toggle-form.state-open { background: var(--surface-2); color: var(--text-2); border: 1.5px solid var(--border); }
.btn-toggle-form.state-open:hover { background: var(--border); }
.btn-toggle-form.state-closed { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(0,75,135,0.28); }
.btn-toggle-form.state-closed:hover { background: var(--primary-h); }

.btn-upload-file, .btn-ganti-file {
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 3px 9px; font-size: 10.5px;
  font-weight: 600; cursor: pointer; color: var(--text-2);
  font-family: 'Inter', sans-serif; transition: var(--trans);
}
.btn-upload-file:hover { background: var(--border); }
.btn-ganti-file { color: var(--primary); background: #EFF6FF; border-color: #BFDBFE; }
.btn-ganti-file:hover { background: #DBEAFE; }

/* ─── Forms ───────────────────────────────────────────────────────────────── */
.form-container {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  min-height: 0;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group--full { grid-column: 1 / -1; }
.form-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0;
}
.form-required { color: var(--danger); }
.form-input {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 12px;
  color: var(--text-1);
  outline: none;
  background: var(--surface-2);
  font-family: 'Inter', sans-serif;
  width: 100%;
  transition: var(--trans);
}
.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.16);
  background: var(--surface);
}
.form-input::placeholder, .filter-input::placeholder { color: #A8B4C5; }
.form-input[readonly] { background: #F1F5F9; color: var(--text-2); cursor: default; }
.mitra-manual-input { margin-top: 4px; }
.mitra-manual-input[hidden] { display: none; }
.form-textarea { resize: vertical; min-height: 70px; }
.form-actions { margin-top: 22px; display: flex; align-items: center; gap: 10px; }
.form-alert { padding: 9px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; }
.form-alert--success { background: var(--success-bg); color: var(--success); }
.form-alert--error   { background: var(--danger-bg);  color: var(--danger);  }
.form-input-file {
  border: 2px dashed var(--border-2); border-radius: var(--radius-sm);
  padding: 8px 11px; font-size: 12px; color: var(--text-2);
  background: var(--surface-2); width: 100%; cursor: pointer;
  font-family: 'Inter', sans-serif; transition: var(--trans);
}
.form-input-file:hover { border-color: var(--primary); background: #EFF6FF; }

.form-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  flex-shrink: 0;
}
.flow-step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.84);
  box-shadow: var(--shadow-xs);
}
.flow-step span {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--primary);
  background: #EAF6FF;
  font-size: 12px;
  font-weight: 800;
}
.flow-step strong { font-size: 12px; color: var(--text-1); line-height: 1.2; }
.flow-step small { color: var(--text-3); font-size: 10.5px; line-height: 1.25; }
.flow-step.is-active {
  border-color: rgba(14,165,233,0.42);
  background: linear-gradient(135deg, rgba(14,165,233,0.11), rgba(255,255,255,0.88));
}
.flow-step.is-active span {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--cyan));
}

/* ─── Kontrak form sections ───────────────────────────────────────────────── */
#sectionFormKontrak.view-section.active {
  min-height: 0;
  overflow: hidden;
}
.form-container--kontrak {
  padding: 20px;
}
.form-container--kontrak > form {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}
.form-flow--contract .flow-step {
  position: relative;
  cursor: pointer;
  border-left: 3px solid transparent;
  padding-right: 34px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.form-flow--contract .flow-step:focus-visible {
  outline: 2px solid rgba(14,165,233,0.36);
  outline-offset: 2px;
}
.form-flow--contract .flow-step[data-contract-flow="administrasi"] {
  --flow-color: var(--primary);
  --flow-bg: rgba(14,165,233,0.1);
}
.form-flow--contract .flow-step[data-contract-flow="para-pihak"] {
  --flow-color: var(--mint);
  --flow-bg: rgba(16,185,129,0.1);
}
.form-flow--contract .flow-step[data-contract-flow="program"] {
  --flow-color: var(--violet);
  --flow-bg: rgba(124,58,237,0.1);
}
.form-flow--contract .flow-step[data-contract-flow="pembiayaan"] {
  --flow-color: var(--coral);
  --flow-bg: rgba(249,115,22,0.1);
}
.form-flow--contract .flow-step span {
  color: var(--flow-color);
  background: var(--flow-bg);
}
.form-flow--contract .flow-step.is-active {
  border-color: var(--border);
  border-left-color: var(--flow-color);
  background: linear-gradient(135deg, var(--flow-bg), rgba(255,255,255,0.92));
  box-shadow: var(--shadow-sm);
}
.form-flow--contract .flow-step.is-active span {
  color: #fff;
  background: var(--flow-color);
}
.form-flow--contract .flow-step.is-complete:not(.is-active) {
  border-color: rgba(16,185,129,0.28);
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(255,255,255,0.9));
}
.form-flow--contract .flow-step.is-complete:not(.is-active) span {
  color: #fff;
  background: var(--success);
}
.form-flow--contract .flow-step.is-complete::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--success);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.92);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.form-flow--contract .flow-step.is-incomplete:not(.is-active) {
  border-color: rgba(217,119,6,0.18);
}
.contract-step-card {
  --step-color: var(--primary);
  --step-bg: rgba(14,165,233,0.08);
  scroll-margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-left: 4px solid var(--step-color);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--step-bg), rgba(255,255,255,0.98) 104px);
  box-shadow: var(--shadow-xs);
}
.contract-step-card + .contract-step-card {
  margin-top: 14px;
}
.contract-step-card[data-contract-step="administrasi"] {
  --step-color: var(--primary);
  --step-bg: rgba(14,165,233,0.09);
}
.contract-step-card[data-contract-step="para-pihak"] {
  --step-color: var(--mint);
  --step-bg: rgba(16,185,129,0.09);
}
.contract-step-card[data-contract-step="program"] {
  --step-color: var(--violet);
  --step-bg: rgba(124,58,237,0.08);
}
.contract-step-card[data-contract-step="pembiayaan"] {
  --step-color: var(--coral);
  --step-bg: rgba(249,115,22,0.09);
}
.contract-step-card-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(228,234,242,0.86);
}
.contract-step-card-head > span {
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--step-color);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.contract-step-card-head h2 {
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.2;
}
.contract-step-card-head p {
  margin-top: 3px;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.35;
}
.contract-step-card-body {
  padding: 2px 16px 16px;
}
.contract-step-card .form-section-label {
  margin: 16px 0 10px;
  color: var(--step-color);
  background: transparent;
  border-left-color: var(--step-color);
  padding-left: 10px;
}
.contract-step-card .form-grid {
  padding: 12px;
  border: 1px solid rgba(228,234,242,0.76);
  border-radius: 8px;
  background: rgba(248,250,253,0.72);
}
.contract-step-card #tabelRincianBpp {
  background: #fff;
}
.form-container--kontrak .form-input.is-missing {
  border-color: #F59E0B;
  background: #FFFBEB;
}
.contract-draft-hint {
  display: none;
  margin: 0;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.btn-aksi:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}
.form-container--kontrak .form-actions {
  position: sticky;
  bottom: -20px;
  z-index: 3;
  margin: 24px -20px -20px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.96);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.form-section-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--primary);
  background: linear-gradient(90deg, #EEF4FF 0%, transparent 100%);
  border-left: 3px solid var(--gold);
  padding: 6px 12px;
  margin: 20px 0 12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ─── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,22,40,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 28px;
  width: 660px;
  max-width: 93vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  animation: modalIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 15px; font-weight: 700; color: var(--text-1); }
.modal-header p  { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.modal-card--plotting-confirm {
  width: 480px;
  padding: 24px;
}
.modal-card--plotting-confirm .modal-header {
  margin-bottom: 16px;
}
.plotting-confirm-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plotting-confirm-message {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}
.plotting-confirm-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.plotting-confirm-summary article {
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(36, 91, 140, 0.14);
  border-radius: 8px;
  background: #F8FBFF;
}
.plotting-confirm-summary span {
  display: block;
  color: var(--text-3);
  font-size: 9px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}
.plotting-confirm-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
}
.plotting-confirm-warning {
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.35;
}
.plotting-confirm-actions {
  justify-content: flex-end;
  margin-top: 2px;
}
.modal-close {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  font-size: 14px;
  cursor: pointer;
  color: var(--text-2);
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: var(--trans);
  flex-shrink: 0;
}
.modal-close:hover { background: var(--danger-bg); color: var(--danger); border-color: #FECACA; }
.modal-card--indicator-detail {
  width: min(1120px, 94vw);
}
.modal-card--finance-statement {
  width: min(1180px, 94vw);
  padding: 20px;
}
.modal-card--simulation-result {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 22px;
}
.modal-card--simulation-result .modal-header {
  margin-bottom: 16px;
  padding-bottom: 14px;
}
.modal-card--payment-realization {
  width: min(840px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 24px;
}
.modal-card--payment-realization .modal-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
}
.payment-realization-modal-body .payment-compact-form {
  padding: 0;
}
.payment-realization-modal-body .payment-compact-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 14px;
  align-items: end;
}
.payment-realization-modal-body .payment-field--kode {
  grid-column: span 7;
}
.payment-realization-modal-body .payment-field--tanggal {
  grid-column: span 5;
}
.payment-realization-modal-body .payment-field--nominal-calc,
.payment-realization-modal-body .payment-field--keterangan {
  grid-column: 1 / -1;
}
.payment-realization-modal-body .payment-compact-form .form-group {
  gap: 6px;
}
.payment-realization-modal-body .payment-compact-form .form-label {
  font-size: 10.5px;
  line-height: 1.25;
}
.payment-realization-modal-body .payment-compact-form .form-input {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 12px;
}
.payment-realization-modal-body .payment-field--kode .form-input[readonly] {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: var(--text-1);
  cursor: default;
  font-weight: 700;
}
.payment-realization-modal-body .penerimaan-calc-row {
  grid-template-columns: minmax(180px, 1.25fr) 24px minmax(86px, 0.55fr) 22px 24px minmax(180px, 1.25fr);
  gap: 8px;
}
.payment-realization-modal-body .penerimaan-calc-title {
  font-size: 10.5px;
}
.payment-realization-modal-body .payment-compact-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.payment-realization-modal-body .payment-compact-actions .btn-primary,
.payment-realization-modal-body .payment-compact-actions .btn-secondary {
  justify-content: center;
  min-height: 36px;
  padding: 8px 15px;
  font-size: 12px;
}
.modal-card--pagu-allocation {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 24px;
}
.modal-card--pagu-allocation .modal-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
}
.pagu-modal-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: end;
}
.pagu-modal-grid .form-group {
  grid-column: span 4;
  gap: 6px;
}
.pagu-modal-grid .pagu-modal-field--kode {
  grid-column: 1 / -1;
}
.pagu-modal-grid .form-label {
  font-size: 10.5px;
  line-height: 1.25;
}
.pagu-modal-grid .form-input {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 12px;
}
.pagu-modal-grid .form-input[readonly] {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: var(--text-1);
  cursor: default;
  font-weight: 800;
}
.pagu-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.pagu-modal-actions .btn-primary,
.pagu-modal-actions .btn-secondary {
  justify-content: center;
  min-height: 36px;
  padding: 8px 15px;
  font-size: 12px;
}
@media (max-width: 900px) {
  .payment-realization-modal-body .payment-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .payment-realization-modal-body .payment-field--kode,
  .payment-realization-modal-body .payment-field--tanggal {
    grid-column: span 1;
  }
  .pagu-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pagu-modal-grid .form-group {
    grid-column: span 1;
  }
  .pagu-modal-grid .pagu-modal-field--kode {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .modal-card--payment-realization {
    width: min(520px, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
    padding: 18px;
  }
  .payment-realization-modal-body .payment-compact-grid {
    grid-template-columns: 1fr;
  }
  .payment-realization-modal-body .payment-field--kode,
  .payment-realization-modal-body .payment-field--tanggal,
  .payment-realization-modal-body .payment-field--nominal-calc,
  .payment-realization-modal-body .payment-field--keterangan {
    grid-column: 1 / -1;
  }
  .payment-realization-modal-body .penerimaan-calc-row {
    grid-template-columns: minmax(0, 1fr) 18px minmax(58px, 0.5fr) 18px 18px minmax(0, 1fr);
    gap: 5px;
  }
  .payment-realization-modal-body .payment-compact-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .modal-card--pagu-allocation {
    width: min(520px, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
    padding: 18px;
  }
  .pagu-modal-grid {
    grid-template-columns: 1fr;
  }
  .pagu-modal-grid .form-group,
  .pagu-modal-grid .pagu-modal-field--kode {
    grid-column: 1 / -1;
  }
  .pagu-modal-actions {
    align-items: stretch;
    flex-direction: column;
  }
}
.simulation-result-modal-body {
  min-width: 0;
  max-height: calc(100vh - 170px);
  overflow: auto;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.modal-footer--simulation .btn-primary {
  min-width: 92px;
  min-height: 34px;
  padding: 8px 16px;
}
.finance-statement-modal-body {
  min-width: 0;
}
.finance-statement-modal-body .finance-statement-panel {
  margin-top: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.finance-statement-modal-body .finance-statement-title {
  display: none;
}
.finance-statement-modal-body .finance-statement-grid {
  padding: 0;
}
.finance-statement-modal-body .finance-statement-reconcile {
  padding: 12px 0 0;
}
.indicator-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(340px, 1fr);
  gap: 14px;
  align-items: stretch;
}
.indicator-detail-chart,
.indicator-detail-table {
  min-width: 0;
  max-height: 64vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.indicator-detail-chart {
  padding: 14px;
}
.indicator-detail-chart--status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.indicator-detail-chart--relationship {
  padding: 14px;
}
.indicator-detail-table table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}
.indicator-detail-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 11px;
  color: var(--primary);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 10px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  vertical-align: top;
}
.indicator-detail-table th:last-child,
.indicator-detail-table td:last-child {
  border-right: none;
}
.indicator-detail-table th span {
  display: block;
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.25;
}
.indicator-detail-table th small {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
}
.indicator-detail-table td {
  padding: 9px 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-size: 11px;
  vertical-align: top;
}
.indicator-detail-table tr:last-child td {
  border-bottom: none;
}

/* ─── Filter kolom (Excel-style) ──────────────────────────────────────────── */
.th-filter-btn {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: rgba(255,255,255,0.45);
  cursor: pointer; padding: 2px 3px; border-radius: 3px; line-height: 1;
  transition: var(--trans);
}
.th-filter-btn svg { width: 11px; height: 11px; display: block; }
.th-filter-btn:hover { color: #fff; background: rgba(255,255,255,0.15); }
th.col-filter-active { background-color: #005fa3; }
th.col-filter-active .th-filter-btn { color: var(--gold); filter: drop-shadow(0 0 4px rgba(201,168,76,0.7)); }
.col-filter-dropdown {
  position: fixed; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); z-index: 9999; width: 220px; padding: 9px; display: none;
}
.col-filter-search { width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; font-size: 11px; color: var(--text-1); outline: none; margin-bottom: 6px; box-sizing: border-box; font-family: 'Inter', sans-serif; }
.col-filter-search:focus { border-color: var(--primary); }
.col-filter-list { max-height: 180px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 7px; }
.col-filter-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 11px; color: var(--text-1); cursor: pointer; user-select: none; }
.col-filter-item:hover { background: var(--surface-2); }
.col-filter-item + .col-filter-item { border-top: 1px solid var(--border); }
.col-filter-selectall { border-bottom: 1px solid var(--border); font-weight: 600; position: sticky; top: 0; background: var(--surface); }
.col-filter-item input[type=checkbox] { flex-shrink: 0; cursor: pointer; accent-color: var(--primary); }
.col-filter-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.col-filter-actions { display: flex; gap: 5px; }
.col-filter-actions button { flex: 1; padding: 5px 0; border-radius: var(--radius-sm); border: none; cursor: pointer; font-size: 11px; font-weight: 600; font-family: 'Inter', sans-serif; transition: var(--trans); }
.col-filter-ok { background: var(--primary); color: #fff; }
.col-filter-ok:hover { background: var(--primary-h); }
.col-filter-reset-col { background: var(--surface-2); color: var(--text-2); border: 1.5px solid var(--border) !important; }
.col-filter-reset-col:hover { background: var(--border); }

/* ─── Laporan / List view ─────────────────────────────────────────────────── */
.laporan-container {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.laporan-searchbar { padding: 12px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.laporan-searchbar .filter-input { flex: 1; margin: 0; }
.laporan-searchbar .filter-info { margin: 0; white-space: nowrap; }
.laporan-toolbar { padding: 10px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: var(--surface-2); }
.list-item-selectall { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-2); }
.list-item-selectall input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--primary); cursor: pointer; }
.laporan-list { flex: 1; overflow-y: auto; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; }
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--surface-2); }
.list-item input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.list-item-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.list-item-text strong { font-size: 12px; color: var(--text-1); font-weight: 600; }
.list-item-text small  { font-size: 10.5px; color: var(--text-2); }
.kode-file-tag { font-size: 10px; font-weight: 600; color: var(--primary); background: #EFF6FF; padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; border: 1px solid #BFDBFE; }

/* ─── Plotting Kerma ──────────────────────────────────────────────────────── */
.plotting-panel,
.plotting-export-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.plotting-panel--advanced[hidden] {
  display: none !important;
}
.plotting-tab-bar {
  flex-shrink: 0;
  margin: 0;
  padding: 0 16px;
  background: var(--surface);
}
.mahasiswa-tab-bar.plotting-tab-bar {
  margin-bottom: 0;
}
.plotting-tab-bar .mahasiswa-tab {
  padding: 8px 0;
}
.plotting-tab-panel {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px;
}
#panelPlotKerma {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#panelPlotKerma .plot-sk-indicator-grid {
  flex-shrink: 0;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  margin-bottom: 8px;
}
#panelPlotKerma .plot-sk-indicator-grid article {
  min-height: 54px;
}
.plot-sk-indicator-detail {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panelPlotKerma .plotting-table-container {
  flex: 1;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow: auto;
  padding-right: 18px;
  padding-bottom: 12px;
}
#panelTargetDistribusi {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  gap: 8px;
  padding: 4px 12px 12px;
}
.plotting-basic-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
}
#panelPlottingDasar .plotting-basic-section {
  gap: 10px;
  min-height: 0;
}
#panelPlottingDasar .plotting-basic-section,
#panelPlottingDasar .plotting-pks-section {
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
}
#panelPlottingDasar .plotting-basic-content,
#panelPlottingDasar .plotting-pks-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.plotting-period-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 190px)) minmax(220px, 1fr);
  align-items: end;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(0,75,135,0.12);
  border-radius: var(--radius-sm);
  background: #F8FBFF;
}
.plotting-period-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.plotting-period-field span {
  color: var(--text-2);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}
.plotting-period-field .plotting-input {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
}
.plotting-period-caption {
  align-self: center;
  min-width: 0;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}
.plotting-period-caption.is-warning {
  color: #B45309;
}
.plotting-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.plotting-start-section-title {
  margin-bottom: 8px;
}
.plotting-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.plotting-section-title h2 {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}
.plotting-section-title p {
  margin-top: 2px;
  color: var(--text-2);
  font-size: 11.5px;
}
.plotting-basic-table-container {
  flex: 1;
  min-height: 0;
  box-shadow: none;
}
#panelPlottingDasar .plotting-basic-table-container {
  flex: 0 0 auto;
  max-height: 310px;
}
.plotting-basic-table-container[hidden] {
  display: none;
}
.plotting-basic-section .plotting-basic-table-container + .plotting-section-title--compact {
  margin-top: 18px;
}
.plotting-section-title--compact {
  align-items: end;
  padding-top: 2px;
  padding-bottom: 0;
}
.plotting-section-title--compact h2 {
  font-size: 14px;
}
.plotting-section-title--compact p {
  font-size: 11.5px;
  line-height: 1.35;
}
.plotting-basic-table {
  min-width: 880px;
}
.plotting-jabatan-table {
  width: 100%;
  min-width: 720px;
  table-layout: fixed;
}
.plotting-jabatan-table th,
.plotting-jabatan-table td {
  padding: 8px 10px;
  vertical-align: middle;
}
.plotting-jabatan-table th:nth-child(1),
.plotting-jabatan-table td:nth-child(1) {
  width: 58px;
  text-align: center;
}
.plotting-jabatan-table th:nth-child(2),
.plotting-jabatan-table td:nth-child(2) {
  width: 220px;
}
.plotting-jabatan-table th:nth-child(3),
.plotting-jabatan-table td:nth-child(3) {
  width: auto;
}
.plotting-jabatan-table th:nth-child(4),
.plotting-jabatan-table td:nth-child(4) {
  width: 150px;
  text-align: right;
  white-space: nowrap;
}
.plotting-jabatan-table th:nth-child(5),
.plotting-jabatan-table td:nth-child(5) {
  width: 105px;
  text-align: center;
}
.plotting-jabatan-table th:nth-child(6),
.plotting-jabatan-table td:nth-child(6) {
  width: 280px;
}
.plotting-jabatan-role-label {
  color: var(--primary);
}
.plotting-jabatan-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
.plotting-jabatan-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}
.plotting-jabatan-status.is-active {
  background: #DCFCE7;
  color: #166534;
}
.plotting-jabatan-status.is-inactive {
  background: #FEE2E2;
  color: #991B1B;
}
.plotting-jabatan-system-note {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 700;
}
.btn-row-secondary,
.btn-row-delete {
  border: 1px solid rgba(36, 91, 140, 0.18);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text-2);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  min-height: 28px;
  padding: 5px 7px;
}
.btn-row-secondary:hover {
  border-color: rgba(0, 75, 135, 0.35);
  color: var(--primary);
}
.btn-row-delete {
  border-color: rgba(185, 28, 28, 0.18);
  color: #B91C1C;
}
#panelPlottingDasar .plotting-basic-table th,
#panelPlottingDasar .plotting-pks-table th {
  height: 34px;
  padding: 5px 6px;
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  vertical-align: middle;
}
.plotting-rule-table {
  min-width: 1240px;
  table-layout: fixed;
}
.plotting-rule-table th,
.plotting-rule-table td {
  box-sizing: border-box;
}
.plotting-rule-table th:nth-child(1),
.plotting-rule-table td:nth-child(1) {
  width: 48px;
  text-align: center;
}
.plotting-rule-table th:nth-child(2),
.plotting-rule-table td:nth-child(2) {
  width: 210px;
}
.plotting-rule-table th:nth-child(3),
.plotting-rule-table td:nth-child(3) {
  width: 330px;
}
.plotting-rule-table th:nth-child(4),
.plotting-rule-table td:nth-child(4) {
  width: 142px;
  text-align: center;
}
.plotting-rule-table th:nth-child(5),
.plotting-rule-table td:nth-child(5) {
  width: 398px;
}
.plotting-rule-table th:nth-child(6),
.plotting-rule-table td:nth-child(6) {
  width: 112px;
  text-align: center;
}
.plotting-rule-table td {
  vertical-align: middle;
  padding: 10px 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.plotting-rule-table td:nth-child(5) {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.4;
  padding-right: 16px;
}
.plotting-rule-table td:nth-child(6) {
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
}
.plotting-rule-master-row td {
  background: rgba(14, 165, 233, 0.05);
}
.plotting-rule-master-row.is-active td {
  background: rgba(16, 185, 129, 0.06);
}
.plotting-rule-table tr.is-rule-disabled td,
.plotting-level-rule-table tr.is-rule-disabled td {
  background: rgba(100, 116, 139, 0.04);
}
.plotting-rule-table tr.is-rule-disabled td:nth-child(2) strong,
.plotting-level-rule-table tr.is-rule-disabled td:first-child strong {
  color: var(--text-3);
}
.plotting-rule-category-cell {
  padding-left: 8px;
  padding-right: 8px;
}
.plotting-rule-category {
  min-height: 32px;
  width: 118px;
}
.plotting-rule-input {
  max-width: 180px;
  min-height: 32px;
}
.plotting-rule-textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  font-size: 12px;
  line-height: 1.35;
}
.plotting-rule-inline-input {
  width: 100%;
  max-width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 800;
}
.plotting-rule-inline-textarea {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 6px 8px;
  resize: vertical;
  font-size: 11.5px;
  line-height: 1.35;
}
.plotting-rule-muted {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}
.plotting-rule-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
}
.plotting-rule-status.is-active {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}
.plotting-rule-status.is-note {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}
.plotting-rule-status.is-empty {
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-3);
}
.plotting-rule-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  background: rgba(100, 116, 139, 0.08);
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.2;
}
.plotting-rule-badge--success {
  border-color: rgba(16, 185, 129, 0.22);
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}
.plotting-rule-badge--danger {
  border-color: rgba(185, 28, 28, 0.18);
  background: rgba(254, 242, 242, 0.92);
  color: #991b1b;
}
.plotting-rule-badge--info {
  border-color: rgba(14, 165, 233, 0.2);
  background: rgba(14, 165, 233, 0.09);
  color: var(--primary-dark);
}
.plotting-rule-badge--locked {
  border-color: rgba(36, 91, 140, 0.16);
  background: rgba(36, 91, 140, 0.07);
  color: var(--primary-dark);
}
.plotting-rule-validation {
  display: grid;
  gap: 8px;
  margin: 0;
}
.plotting-rule-validation-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(36, 91, 140, 0.14);
  border-radius: 8px;
  background: #fff;
}
.plotting-rule-validation-summary span {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}
.plotting-rule-validation-summary strong {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}
.plotting-rule-validation-summary.is-success strong {
  color: var(--success);
}
.plotting-rule-validation-summary.is-error strong {
  color: var(--danger);
}
.plotting-rule-validation-summary.is-info strong {
  color: var(--primary-dark);
}
.plotting-rule-validation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 7px;
}
.plotting-rule-validation-item {
  min-height: 62px;
  padding: 8px 9px;
  border: 1px solid rgba(36, 91, 140, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
}
.plotting-rule-validation-item strong {
  display: block;
  color: var(--text-1);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}
.plotting-rule-validation-item span {
  display: block;
  margin-top: 4px;
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
}
.plotting-rule-validation-item.is-ok {
  border-color: rgba(16, 185, 129, 0.18);
  background: rgba(16, 185, 129, 0.07);
}
.plotting-rule-validation-item.is-error {
  border-color: rgba(185, 28, 28, 0.18);
  background: rgba(254, 242, 242, 0.92);
}
.plotting-rule-validation-item.is-info {
  border-color: rgba(14, 165, 233, 0.18);
  background: rgba(14, 165, 233, 0.07);
}
.plotting-level-rule {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(260px, 1fr);
  gap: 10px;
  align-items: start;
}
.plotting-level-rule > div > span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}
.plotting-rule-switch,
.plotting-role-checks label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 800;
}
.plotting-rule-switch input,
.plotting-role-checks input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--primary);
}
.plotting-rule-switch--master {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(36, 91, 140, 0.16);
  border-radius: 8px;
  background: #fff;
}
.plotting-rule-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}
.plotting-rule-switch--status {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid rgba(36, 91, 140, 0.16);
  border-radius: 8px;
  background: #fff;
  color: var(--primary-dark);
}
.plotting-rule-switch--status.is-off {
  border-color: rgba(100, 116, 139, 0.18);
  background: rgba(100, 116, 139, 0.07);
  color: var(--text-3);
}
.plotting-role-checks {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.plotting-role-checks label {
  padding: 5px 7px;
  border: 1px solid rgba(36, 91, 140, 0.14);
  border-radius: 7px;
  background: rgba(36, 91, 140, 0.05);
}
.plotting-level-rule-table {
  min-width: 940px;
  table-layout: fixed;
}
.plotting-level-rule-table th,
.plotting-level-rule-table td {
  vertical-align: middle;
}
.plotting-level-rule-table th:first-child,
.plotting-level-rule-table td:first-child {
  width: 330px;
  text-align: left;
}
.plotting-level-rule-table th:not(:first-child),
.plotting-level-rule-table td:not(:first-child) {
  width: 78px;
  text-align: center;
}
.plotting-level-rule-table th:last-child,
.plotting-level-rule-table td:last-child {
  width: 92px;
  text-align: center;
}
.plotting-level-rule-table th:nth-last-child(2),
.plotting-level-rule-table td:nth-last-child(2) {
  width: 128px;
  text-align: center;
}
.plotting-level-rule-table td:first-child strong {
  display: block;
  color: var(--text-1);
  font-size: 12px;
  line-height: 1.25;
}
.plotting-level-rule-table td:first-child small {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
}
.plotting-level-rule-input {
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 750;
}
.plotting-level-role-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 28px;
  padding: 4px;
  border: 1px solid rgba(36, 91, 140, 0.14);
  border-radius: 7px;
  background: rgba(36, 91, 140, 0.05);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}
.plotting-level-role-toggle input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--primary);
}
.plotting-level-role-toggle:has(input:checked) {
  border-color: rgba(36, 91, 140, 0.34);
  background: rgba(36, 91, 140, 0.12);
  color: var(--primary-dark);
}
.plotting-rule-delete-btn {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(185, 28, 28, 0.18);
  border-radius: 7px;
  background: rgba(254, 242, 242, 0.92);
  color: #991b1b;
  font-size: 10.5px;
  font-weight: 850;
  cursor: pointer;
}
.plotting-rule-delete-btn:hover {
  border-color: rgba(185, 28, 28, 0.34);
  background: #fee2e2;
}
.plotting-guidance-card {
  display: grid;
  gap: 6px;
  margin-bottom: 0;
  padding: 7px 10px;
  border: 1px solid rgba(36, 91, 140, 0.16);
  border-radius: 8px;
  background: rgba(36, 91, 140, 0.07);
  color: var(--text-1);
  flex-shrink: 0;
}
.plotting-guidance-card strong {
  font-size: 11.5px;
  font-weight: 800;
}
.plotting-guidance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.plotting-guidance-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-secondary--compact {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 10.5px;
}
.plotting-save-alert {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 10px;
}
.plotting-start-checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 8px;
}
.plotting-start-checklist--global {
  margin: 0 0 12px;
}
.plotting-start-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  background: #fff;
  color: var(--text-2);
}
.plotting-start-check strong {
  display: block;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}
.plotting-start-check small {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
}
.plotting-start-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 3px;
  border-radius: 999px;
  background: #CBD5E1;
  box-shadow: 0 0 0 4px rgba(203, 213, 225, 0.2);
}
.plotting-start-check.is-ready {
  border-color: rgba(22, 101, 52, 0.22);
  background: rgba(22, 101, 52, 0.04);
}
.plotting-start-check.is-ready .plotting-start-dot {
  background: #16A34A;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.14);
}
.plotting-start-check.is-ready small {
  color: #166534;
}
.plotting-start-check.is-pending {
  border-color: rgba(180, 83, 9, 0.18);
  background: rgba(180, 83, 9, 0.04);
}
.plotting-start-check.is-pending .plotting-start-dot {
  background: #F59E0B;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}
.plotting-guidance-status {
  display: block;
  width: 100%;
  margin-top: 0;
  padding: 6px 8px;
  border: 1px solid rgba(36, 91, 140, 0.16);
  border-radius: 8px;
  background: rgba(36, 91, 140, 0.06);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}
.plotting-guidance-status[hidden] {
  display: none;
}
.plotting-guidance-status.is-error {
  border-color: rgba(214, 69, 80, 0.2);
  background: rgba(214, 69, 80, 0.06);
  color: var(--danger);
}
.plotting-guidance-status.is-success {
  border-color: rgba(22, 101, 52, 0.16);
  background: rgba(22, 101, 52, 0.06);
  color: #166534;
}
.plotting-global-status {
  margin: 8px 0 12px;
}
.plotting-process-panel {
  margin: 12px 0 14px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98));
}
.plotting-process-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.plotting-process-header h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
}
.plotting-process-header p {
  max-width: 780px;
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}
.plotting-process-progress-text {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 5px 9px;
  border: 1px solid rgba(36, 91, 140, 0.18);
  border-radius: 999px;
  background: rgba(36, 91, 140, 0.08);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}
.plotting-process-panel.is-complete .plotting-process-progress-text {
  border-color: rgba(22, 101, 52, 0.18);
  background: rgba(22, 101, 52, 0.08);
  color: #166534;
}
.plotting-process-panel.is-error .plotting-process-progress-text {
  border-color: rgba(214, 69, 80, 0.2);
  background: rgba(214, 69, 80, 0.08);
  color: var(--danger);
}
.plotting-process-progress {
  width: 100%;
  height: 6px;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}
.plotting-process-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 0.24s ease;
}
.plotting-process-panel.is-complete .plotting-process-progress span {
  background: #16A34A;
}
.plotting-process-panel.is-error .plotting-process-progress span {
  background: var(--danger);
}
.plotting-process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.plotting-process-step {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: #fff;
  color: var(--text-2);
}
.plotting-process-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.plotting-process-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 900;
}
.plotting-process-badge {
  min-height: 22px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  color: var(--text-3);
  font-size: 9.5px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}
.plotting-process-step strong {
  display: block;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
}
.plotting-process-step small {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.4;
}
.plotting-process-step p {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.4;
}
.plotting-process-step.is-running {
  border-color: rgba(36, 91, 140, 0.28);
  background: rgba(36, 91, 140, 0.04);
}
.plotting-process-step.is-running .plotting-process-number,
.plotting-process-step.is-running .plotting-process-badge {
  background: rgba(36, 91, 140, 0.12);
  color: var(--primary);
}
.plotting-process-step.is-done {
  border-color: rgba(22, 101, 52, 0.2);
  background: rgba(22, 101, 52, 0.04);
}
.plotting-process-step.is-done .plotting-process-number,
.plotting-process-step.is-done .plotting-process-badge {
  background: rgba(22, 163, 74, 0.12);
  color: #166534;
}
.plotting-process-step.is-error {
  border-color: rgba(214, 69, 80, 0.22);
  background: rgba(214, 69, 80, 0.04);
}
.plotting-process-step.is-error .plotting-process-number,
.plotting-process-step.is-error .plotting-process-badge {
  background: rgba(214, 69, 80, 0.12);
  color: var(--danger);
}
@media (max-width: 900px) {
  .plotting-start-checklist {
    grid-template-columns: 1fr;
  }
  .plotting-process-header {
    flex-direction: column;
    align-items: stretch;
  }
  .plotting-process-progress-text {
    width: fit-content;
  }
  .plotting-process-steps {
    grid-template-columns: 1fr;
  }
}
.simulation-tooltip-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(36, 91, 140, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text-1);
  font-family: inherit;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
  text-align: left;
  cursor: help;
}
.simulation-tooltip-badge span,
.simulation-tooltip-badge strong {
  white-space: nowrap;
}
.simulation-tooltip-badge strong {
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}
.simulation-tooltip-badge i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, 0.32);
  background: #EFF6FF;
  color: var(--primary);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}
.simulation-tooltip-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 35;
  left: 0;
  top: calc(100% + 8px);
  width: min(440px, calc(100vw - 64px));
  padding: 10px 12px;
  border-radius: 8px;
  background: #0F172A;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.45;
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.24);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.simulation-tooltip-badge:hover::after,
.simulation-tooltip-badge:focus::after {
  opacity: 1;
  transform: translateY(0);
}
.simulation-tooltip-badge.is-error {
  border-color: rgba(214, 69, 80, 0.18);
  background: rgba(254, 242, 242, 0.82);
}
.simulation-tooltip-badge.is-success {
  border-color: rgba(22, 101, 52, 0.18);
  background: rgba(240, 253, 244, 0.82);
}
.simulation-result-card {
  display: grid;
  gap: 10px;
  color: var(--text-1);
}
.simulation-result-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.simulation-result-heading span {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.simulation-result-heading strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
}
.simulation-result-alert {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(214, 69, 80, 0.18);
  border-radius: 8px;
  background: rgba(254, 242, 242, 0.82);
  color: var(--danger);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}
.simulation-result-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.simulation-result-metrics div,
.simulation-result-note,
.simulation-result-clean {
  padding: 8px 10px;
  border: 1px solid rgba(36, 91, 140, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
}
.simulation-result-metrics span,
.simulation-result-note span {
  display: block;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
  text-transform: uppercase;
}
.simulation-result-metrics strong,
.simulation-result-note strong {
  display: block;
  margin-top: 3px;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}
.simulation-result-note small {
  display: block;
  margin-top: 4px;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}
.simulation-result-note-list {
  display: grid;
  gap: 4px;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
  max-height: 260px;
  overflow: auto;
}
.simulation-result-note-list li {
  padding: 5px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.56);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}
.simulation-result-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}
.simulation-result-note--category {
  grid-column: 1 / -1;
}
.simulation-result-note--warning {
  border-color: rgba(217, 119, 6, 0.22);
  background: rgba(255, 251, 235, 0.82);
}
.simulation-result-note--danger {
  border-color: rgba(214, 69, 80, 0.2);
  background: rgba(254, 242, 242, 0.84);
}
.simulation-result-note--info {
  border-color: rgba(36, 91, 140, 0.18);
  background: rgba(239, 246, 255, 0.84);
}
.simulation-result-note--recommendation {
  border-color: rgba(14, 165, 233, 0.24);
  background: rgba(240, 249, 255, 0.9);
}
.simulation-result-note--recommendation span {
  color: var(--primary);
}
.simulation-result-clean {
  color: #166534;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}
.plotting-optimization-guidance {
  display: grid;
  gap: 12px;
  margin: 12px 0 14px;
  padding: 14px;
  border: 1px solid rgba(214, 69, 80, 0.2);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 251, 251, 0.98), rgba(255, 247, 247, 0.9));
}
.plotting-optimization-guidance__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.plotting-optimization-guidance__header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.plotting-optimization-guidance__header h3 {
  margin: 2px 0 0;
  color: var(--text-1);
  font-size: 16px;
  font-weight: 900;
}
.plotting-optimization-guidance__count,
.plotting-optimization-guidance__category {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(214, 69, 80, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--danger);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.plotting-optimization-guidance__intro {
  margin: 0;
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 1.5;
}
.plotting-optimization-guidance__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 520px;
  overflow: auto;
  padding-right: 2px;
}
.plotting-optimization-guidance__item,
.plotting-optimization-guidance__empty {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(36, 91, 140, 0.14);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
}
.plotting-optimization-guidance__item.is-danger {
  border-left-color: var(--danger);
}
.plotting-optimization-guidance__item.is-warning {
  border-left-color: #b45309;
}
.plotting-optimization-guidance__item.is-info {
  border-left-color: var(--primary);
}
.plotting-optimization-guidance__item-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.plotting-optimization-guidance__item-heading div {
  min-width: 0;
}
.plotting-optimization-guidance__item-heading strong {
  display: block;
  color: var(--text-1);
  font-size: 11.5px;
  font-weight: 900;
}
.plotting-optimization-guidance__item-heading div > span {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 800;
}
.plotting-optimization-guidance__category {
  border-color: rgba(36, 91, 140, 0.16);
  color: var(--primary);
  text-transform: capitalize;
}
.plotting-optimization-guidance__item p,
.plotting-optimization-guidance__item ul,
.plotting-optimization-guidance__action {
  margin: 0;
  color: var(--text-2);
  font-size: 10.5px;
  line-height: 1.45;
}
.plotting-optimization-guidance__item ul {
  display: grid;
  gap: 4px;
  max-height: 190px;
  overflow: auto;
  padding-left: 18px;
}
.plotting-optimization-guidance__item li::marker {
  color: var(--danger);
}
.plotting-optimization-guidance__action {
  padding-top: 7px;
  border-top: 1px solid rgba(36, 91, 140, 0.1);
}
.plotting-optimization-guidance__action strong {
  color: var(--text-1);
}
.plotting-optimization-guidance__empty {
  grid-column: 1 / -1;
  border-left-color: #166534;
  color: #166534;
}
.plotting-optimization-guidance__empty strong {
  font-size: 11.5px;
}
.plotting-optimization-guidance__empty span {
  color: var(--text-2);
  font-size: 10.5px;
}
.plotting-optimization-guidance.is-collapsed {
  gap: 0;
  padding-block: 10px;
}
.plotting-optimization-guidance.is-collapsed .plotting-optimization-guidance__intro,
.plotting-optimization-guidance.is-collapsed .plotting-optimization-guidance__list {
  display: none;
}
@media (max-width: 760px) {
  .plotting-optimization-guidance__header {
    display: grid;
  }
  .plotting-optimization-guidance__header-actions {
    justify-content: flex-start;
  }
  .plotting-optimization-guidance__list {
    grid-template-columns: 1fr;
  }
}
.plotting-guidance-card p {
  max-width: 960px;
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 1.45;
}
.plotting-simulation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 0;
}
.plotting-simulation-summary div {
  min-height: 46px;
  padding: 6px 8px;
  border: 1px solid rgba(36, 91, 140, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}
.plotting-simulation-summary span {
  display: block;
  color: var(--text-3);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.plotting-simulation-summary strong {
  display: block;
  margin-top: 2px;
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 850;
}
.plotting-simulation-summary strong.is-match {
  color: var(--success);
}
.plotting-simulation-summary strong.is-warning {
  color: var(--danger);
}
.plotting-summary-input {
  width: 100%;
  margin-top: 2px;
  border: 1px solid rgba(36, 91, 140, 0.22);
  border-radius: 6px;
  padding: 4px 6px;
  background: #fff;
  color: var(--primary);
  font-size: 11px;
  font-weight: 850;
  outline: none;
}
.plotting-summary-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.12);
}
.plotting-summary-caption {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-size: 9px;
  font-weight: 750;
  line-height: 1.15;
}
.plotting-summary-caption.is-match,
.plotting-basic-total strong.is-match,
.plotting-pks-summary strong.is-match {
  color: var(--success);
}
.plotting-summary-caption.is-warning,
.plotting-basic-total strong.is-warning,
.plotting-pks-summary strong.is-warning {
  color: var(--danger);
}
.plotting-summary-caption.is-info,
.plotting-basic-total strong.is-info,
.plotting-pks-summary strong.is-info {
  color: var(--primary);
}
.plotting-distribution-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 6px;
  margin: 0;
  flex-shrink: 0;
}
.plotting-distribution-summary article {
  min-height: 48px;
  padding: 6px 9px;
  border: 1px solid rgba(36, 91, 140, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}
.plotting-distribution-summary span {
  display: block;
  color: var(--text-3);
  font-size: 9px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}
.plotting-distribution-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.plotting-distribution-summary strong.is-positive {
  color: var(--success);
}
.plotting-distribution-summary strong.is-warning,
.plotting-distribution-summary strong.is-negative {
  color: var(--danger);
}
.plotting-target-table {
  min-width: 1120px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.plotting-target-table th {
  text-align: center;
  vertical-align: middle;
  font-size: 10px;
  line-height: 1.12;
  border-right: 1px solid rgba(255,255,255,0.16);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.plotting-target-table thead tr:first-child th {
  top: 0;
  z-index: 5;
  height: 32px;
  padding: 5px 6px;
}
.plotting-target-table thead tr:nth-child(2) th {
  top: 32px;
  z-index: 4;
  height: 34px;
  background: linear-gradient(180deg, #07508E, #073B73);
  border-top: 0;
}
.plotting-target-table th:nth-child(1),
.plotting-target-table td:nth-child(1) { width: 38px; text-align: center; }
.plotting-target-table th:nth-child(2),
.plotting-target-table td:nth-child(2) { width: 200px; }
.plotting-target-table th:nth-child(3),
.plotting-target-table td:nth-child(3) { width: 134px; }
.plotting-target-table td:nth-child(4),
.plotting-target-table td:nth-child(5),
.plotting-target-table td:nth-child(6),
.plotting-target-table td:nth-child(7),
.plotting-target-table td:nth-child(8) {
  width: 42px;
  padding: 0;
  text-align: center;
}
.plotting-target-table td:nth-child(9),
.plotting-target-table td:nth-child(10) {
  width: 245px;
  white-space: nowrap;
}
.plotting-name-cell {
  min-width: 0;
}
.plotting-name-ellipsis {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.plotting-name-ellipsis:hover,
.plotting-name-ellipsis:focus-visible {
  color: var(--primary);
  outline: none;
}
.plotting-name-ellipsis.is-expanded {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.plotting-target-table .plotting-money-cell {
  padding-inline: 8px;
  font-size: 10.5px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.plotting-target-table td:nth-child(9).plotting-money-cell,
.plotting-target-table td:nth-child(10).plotting-money-cell {
  white-space: nowrap;
  overflow-wrap: normal;
}
.plotting-target-table .plotting-role-head {
  padding: 4px 3px;
  line-height: 1.05;
  vertical-align: middle;
}
.plotting-target-table .plotting-role-head span,
.plotting-target-table .plotting-role-head small {
  display: block;
}
.plotting-target-table .plotting-role-head small {
  margin-top: 2px;
  color: rgba(255,255,255,0.76);
  font-size: 7.8px;
  font-weight: 800;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}
.plotting-target-table .plotting-role-head small.is-over-capacity {
  color: #FCA5A5;
}
.plotting-input--role-count {
  width: 100%;
  min-height: 30px;
  padding: 5px 1px;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  text-align: center;
  font-size: 11px;
  font-weight: 750;
  color: var(--text-1);
}
.plotting-input--role-count:focus {
  border: 0;
  box-shadow: inset 0 -2px 0 var(--primary);
  background: rgba(14, 165, 233, 0.06);
}
.pegawai-table {
  width: 2550px;
  min-width: 2550px;
  table-layout: fixed;
}
.pegawai-table th:nth-child(1),
.pegawai-table td:nth-child(1) { width: 52px; text-align: center; }
.pegawai-table th:nth-child(2),
.pegawai-table td:nth-child(2) { width: 140px; }
.pegawai-table th:nth-child(3),
.pegawai-table td:nth-child(3) { width: 220px; }
.pegawai-table th:nth-child(4),
.pegawai-table td:nth-child(4) { width: 240px; }
.pegawai-table th:nth-child(5),
.pegawai-table td:nth-child(5) { width: 96px; }
.pegawai-table th:nth-child(6),
.pegawai-table td:nth-child(6) { width: 190px; }
.pegawai-table th:nth-child(7),
.pegawai-table td:nth-child(7) { width: 260px; }
.pegawai-table th:nth-child(8),
.pegawai-table td:nth-child(8) { width: 124px; }
.pegawai-table th:nth-child(9),
.pegawai-table td:nth-child(9),
.pegawai-table th:nth-child(10),
.pegawai-table td:nth-child(10) { width: 230px; }
.pegawai-table th:nth-child(11),
.pegawai-table td:nth-child(11) { width: 132px; }
.pegawai-table th:nth-child(12),
.pegawai-table td:nth-child(12) { width: 132px; }
.pegawai-table th:nth-child(13),
.pegawai-table td:nth-child(13) { width: 150px; }
.pegawai-table th:nth-child(14),
.pegawai-table td:nth-child(14) { width: 220px; }
.pegawai-table th:nth-child(15),
.pegawai-table td:nth-child(15) { width: 134px; }
.pegawai-readonly-cell,
.pegawai-level-auto {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 650;
}
.pegawai-level-auto {
  color: var(--primary);
}
.pegawai-readonly-cell--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pegawai-money-cell {
  white-space: nowrap;
  text-align: right;
}
.pegawai-row-editing td {
  background: rgba(232, 242, 255, 0.62);
}
.pegawai-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.btn-row-edit,
.btn-row-save,
.btn-row-cancel,
.btn-row-delete {
  border: 1px solid rgba(36, 91, 140, 0.18);
  border-radius: 6px;
  background: #ffffff;
  color: var(--primary);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 800;
  min-height: 28px;
  padding: 5px 8px;
}
.btn-row-save {
  background: var(--primary);
  color: #ffffff;
}
.btn-row-cancel {
  color: var(--text-2);
}
.btn-row-delete {
  border-color: rgba(185, 28, 28, 0.18);
  color: #B91C1C;
}
.btn-row-edit:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.jabatan-table {
  min-width: 760px;
  table-layout: fixed;
}
.jabatan-table th:nth-child(1),
.jabatan-table td:nth-child(1) { width: 56px; text-align: center; }
.jabatan-table th:nth-child(2),
.jabatan-table td:nth-child(2) { width: 410px; }
.jabatan-table th:nth-child(3),
.jabatan-table td:nth-child(3) { width: 180px; }
.jabatan-table th:nth-child(4),
.jabatan-table td:nth-child(4) { width: 114px; text-align: center; }
.jabatan-level-readonly {
  color: var(--primary);
  font-size: 12px;
  font-weight: 750;
}
.jabatan-row-editing td {
  background: rgba(232, 242, 255, 0.62);
}
.plotting-basic-table td:first-child {
  white-space: nowrap;
}
.plotting-basic-table td:first-child strong {
  font-size: 12px;
  color: var(--text-1);
}
.plotting-role-field-list {
  display: block;
  max-width: 420px;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.35;
  white-space: normal;
}
.plotting-money-cell {
  color: var(--primary);
  font-weight: 700;
  text-align: right;
}
.plotting-placeholder-cell {
  color: var(--text-3);
  font-weight: 700;
  text-align: center;
}
.plotting-saved-simulation-period {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
}
.plotting-basic-summary {
  align-self: flex-end;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 8px;
  width: min(760px, 100%);
}
.plotting-export-summary {
  align-self: stretch;
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  justify-content: start;
  width: 100%;
  margin-bottom: 10px;
}
#panelPlottingDasar .plotting-basic-summary {
  align-self: stretch;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}
.plotting-basic-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(0,75,135,0.16);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #F8FBFF, #EEF6FF);
}
#panelPlottingDasar .plotting-basic-total {
  align-items: center;
  flex-direction: row;
  gap: 8px;
  min-height: 38px;
  padding: 6px 9px;
}
#panelPlottingDasar .plotting-basic-total--control {
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
.plotting-basic-control {
  width: 100%;
}
#panelPlottingDasar .plotting-basic-control .plotting-summary-input {
  height: 26px;
  margin-top: 0;
}
.plotting-basic-total span {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.plotting-basic-total strong {
  color: var(--primary);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  text-align: right;
}
#panelPlottingDasar .plotting-basic-total span {
  font-size: 9px;
  line-height: 1.2;
}
#panelPlottingDasar .plotting-basic-total strong {
  font-size: 12px;
  line-height: 1.2;
  text-align: right;
}
.plotting-save-note {
  align-self: flex-end;
  width: min(760px, 100%);
  margin: -2px 0 0;
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
  text-align: right;
}
.plotting-pks-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  margin-top: 8px;
}
#panelPlottingDasar .plotting-pks-section {
  margin-top: 10px;
}
.plotting-pks-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 240px));
  gap: 10px;
  width: fit-content;
  max-width: 100%;
}
#panelPlottingDasar .plotting-pks-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}
.plotting-pks-summary article {
  padding: 10px 12px;
  border: 1px solid rgba(0,75,135,0.16);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #F8FBFF, #EEF6FF);
}
#panelPlottingDasar .plotting-pks-summary article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 6px 9px;
}
.plotting-pks-summary span {
  display: block;
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
}
#panelPlottingDasar .plotting-pks-summary span {
  font-size: 9px;
  line-height: 1.2;
}
.plotting-pks-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--primary);
  font-size: 16px;
  font-weight: 800;
}
#panelPlottingDasar .plotting-pks-summary strong {
  margin-top: 0;
  font-size: 12px;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}
.plotting-pks-table {
  min-width: 1020px;
  table-layout: fixed;
}
.plotting-pks-table th {
  padding: 5px 6px;
  font-size: 10px;
  line-height: 1.12;
}
.plotting-pks-table th:nth-child(1),
.plotting-pks-table td:nth-child(1) { width: 56px; text-align: center; }
.plotting-pks-table th:nth-child(2),
.plotting-pks-table td:nth-child(2) { width: 72px; text-align: center; }
.plotting-pks-table th:nth-child(3),
.plotting-pks-table td:nth-child(3) { width: 74px; text-align: center; }
.plotting-pks-table th:nth-child(4),
.plotting-pks-table td:nth-child(4) { width: 150px; }
.plotting-pks-table th:nth-child(5),
.plotting-pks-table td:nth-child(5) { width: 200px; }
.plotting-pks-table th:nth-child(6),
.plotting-pks-table td:nth-child(6) { width: 300px; }
.plotting-pks-table th:nth-child(7),
.plotting-pks-table td:nth-child(7) { width: 180px; }
.plotting-pks-check {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
}
.plotting-pks-check-head {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  font-size: 8px;
  line-height: 1;
  cursor: pointer;
}
.plotting-pks-check-head input {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
}
.plotting-pks-check-head input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.plotting-pks-check:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.plotting-pks-order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  border-radius: 6px;
  background: rgba(0,75,135,0.1);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
}
.plotting-pks-order-badge.is-empty {
  background: transparent;
  color: var(--text-3);
}
.plotting-pks-role-cell {
  text-align: center;
}
.plotting-input--pks-no {
  max-width: 76px;
  margin: 0 auto;
  text-align: center;
}
.plotting-table-container {
  flex: 1;
  min-height: 0;
  height: auto;
  overflow: auto;
  box-shadow: none;
}
#panelEksporPlottingTargetDistribusi {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.plotting-export-target-table-container {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.plotting-export-target-table {
  width: 100%;
  table-layout: fixed;
  font-size: 10.5px;
}
.plotting-export-target-table thead th {
  position: sticky;
  top: 0;
  z-index: 8;
}
.plotting-export-target-table th,
.plotting-export-target-table td {
  padding: 7px 6px;
  vertical-align: middle;
}
.plotting-target-role-head {
  display: grid;
  justify-items: center;
  gap: 2px;
  line-height: 1.15;
}
.plotting-target-role-head small {
  display: block;
  color: rgba(226, 232, 240, 0.88);
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
}
.plotting-target-role-head small.is-empty {
  color: #FCA5A5;
}
.plotting-target-role-head small.is-over-capacity,
.plotting-role-head small.is-over-capacity {
  color: #FCA5A5;
  font-weight: 900;
}
.plotting-export-target-table th:nth-child(1),
.plotting-export-target-table td:nth-child(1) {
  width: 38px;
}
.plotting-export-target-table th:nth-child(2),
.plotting-export-target-table td:nth-child(2) {
  width: 15%;
  white-space: normal;
}
.plotting-export-target-table th:nth-child(3),
.plotting-export-target-table td:nth-child(3) {
  width: 58px;
}
.plotting-export-target-table th:nth-child(4),
.plotting-export-target-table td:nth-child(4) {
  width: 13%;
}
.plotting-export-target-table th:nth-child(5),
.plotting-export-target-table td:nth-child(5),
.plotting-export-target-table th:nth-child(11),
.plotting-export-target-table td:nth-child(11),
.plotting-export-target-table th:nth-child(12),
.plotting-export-target-table td:nth-child(12) {
  width: 10%;
}
.plotting-export-target-table th:nth-child(6),
.plotting-export-target-table td:nth-child(6),
.plotting-export-target-table th:nth-child(7),
.plotting-export-target-table td:nth-child(7),
.plotting-export-target-table th:nth-child(8),
.plotting-export-target-table td:nth-child(8),
.plotting-export-target-table th:nth-child(9),
.plotting-export-target-table td:nth-child(9),
.plotting-export-target-table th:nth-child(10),
.plotting-export-target-table td:nth-child(10) {
  width: 58px;
}
#panelPlottingDasar .plotting-pks-section .plotting-table-container {
  flex: 0 0 auto;
  max-height: 430px;
}
.plotting-pks-table-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.plotting-pks-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}
.plotting-pks-actions .btn-primary {
  min-height: 32px;
  padding: 7px 14px;
  font-size: 12px;
}
.plotting-pks-actions .btn-primary.is-saved,
.plotting-pks-actions .btn-primary.is-saved:disabled {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
  cursor: default;
  opacity: 0.88;
}
.plotting-save-alert {
  max-width: min(560px, 100%);
  padding: 7px 10px;
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
}
.plotting-table {
  min-width: 1040px;
  table-layout: fixed;
}
#tabelPlottingKerma {
  --plot-sk-col-no: 54px;
  --plot-sk-col-nama: 210px;
  --plot-sk-col-peran: 104px;
  --plot-sk-col-target: 112px;
  --plot-sk-col-role: 62px;
  --plot-sk-col-total: 92px;
  --plot-sk-col-total-sk: 86px;
  --plot-sk-col-summary: 48px;
  --plot-sk-head-main: 62px;
  --plot-sk-head-role: 48px;
  --plot-sk-left-nama: var(--plot-sk-col-no);
  --plot-sk-left-peran: calc(var(--plot-sk-col-no) + var(--plot-sk-col-nama));
  --plot-sk-left-target: calc(var(--plot-sk-col-no) + var(--plot-sk-col-nama) + var(--plot-sk-col-peran));
  width: max-content;
  border-collapse: separate;
  border-spacing: 0;
}
#tabelPlottingKerma th,
#tabelPlottingKerma td {
  box-sizing: border-box;
}
#tabelPlottingKerma thead tr:first-child th {
  top: 0;
  height: var(--plot-sk-head-main);
  z-index: 12;
}
#tabelPlottingKerma thead tr:first-child th[rowspan="2"] {
  height: calc(var(--plot-sk-head-main) + var(--plot-sk-head-role));
}
#tabelPlottingKerma thead tr:nth-child(2) th {
  top: var(--plot-sk-head-main);
  height: var(--plot-sk-head-role);
  z-index: 11;
}
.plotting-table th {
  position: sticky;
  text-align: center;
  vertical-align: middle;
  padding: 5px 5px;
  font-size: 9.5px;
  line-height: 1.12;
  border-right: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.22);
}
.plotting-table thead tr:first-child th {
  top: 0;
  z-index: 4;
  height: 24px;
}
.plotting-table thead tr:nth-child(2) th {
  top: 24px;
  z-index: 3;
  background: linear-gradient(180deg, #07508E, #073B73);
  height: 24px;
  border-top: 0;
}
.plotting-table td {
  padding: 6px 7px;
  vertical-align: middle;
}
.plotting-pks-head {
  background: linear-gradient(180deg, #0B5D99, #073B73) !important;
}
.plotting-pks-head span,
.plotting-pks-head small {
  display: block;
}
.plotting-pks-head small {
  margin-top: 1px;
  color: rgba(255,255,255,0.78);
  font-size: 7.8px;
  font-weight: 700;
  line-height: 1.05;
}
.plotting-pks-head small.is-negative {
  color: #FFB4B4;
}
.plotting-role-head { width: 40px; }
.plotting-col-no { width: 54px; text-align: center !important; }
.plotting-col-nama { width: 210px; }
.plotting-col-peran { width: 104px; }
.plotting-col-target { width: 112px; }
.plotting-col-total { width: 90px; }
#tabelPlottingKerma .plotting-col-no,
#tabelPlottingKerma tbody td:not([colspan]):nth-child(1) {
  left: 0;
  width: var(--plot-sk-col-no);
  min-width: var(--plot-sk-col-no);
  max-width: var(--plot-sk-col-no);
}
#tabelPlottingKerma .plotting-col-nama,
#tabelPlottingKerma tbody td:not([colspan]):nth-child(2) {
  left: var(--plot-sk-left-nama);
  width: var(--plot-sk-col-nama);
  min-width: var(--plot-sk-col-nama);
  max-width: var(--plot-sk-col-nama);
}
#tabelPlottingKerma .plotting-col-peran,
#tabelPlottingKerma tbody td:not([colspan]):nth-child(3) {
  left: var(--plot-sk-left-peran);
  width: var(--plot-sk-col-peran);
  min-width: var(--plot-sk-col-peran);
  max-width: var(--plot-sk-col-peran);
}
#tabelPlottingKerma .plotting-col-target,
#tabelPlottingKerma tbody td:not([colspan]):nth-child(4) {
  left: var(--plot-sk-left-target);
  width: var(--plot-sk-col-target);
  min-width: var(--plot-sk-col-target);
  max-width: var(--plot-sk-col-target);
}
#tabelPlottingKerma thead tr:first-child th.plotting-col-no,
#tabelPlottingKerma thead tr:first-child th.plotting-col-nama,
#tabelPlottingKerma thead tr:first-child th.plotting-col-peran,
#tabelPlottingKerma thead tr:first-child th.plotting-col-target {
  z-index: 70;
  background: linear-gradient(180deg, var(--primary), #073B73);
}
#tabelPlottingKerma thead .plotting-pks-head {
  z-index: 12;
}
#tabelPlottingKerma thead .plotting-role-head {
  z-index: 11;
}
#tabelPlottingKerma .plotting-role-head,
#tabelPlottingKerma tbody .plotting-role-cell {
  width: var(--plot-sk-col-role);
  min-width: var(--plot-sk-col-role);
  max-width: var(--plot-sk-col-role);
}
#tabelPlottingKerma tbody .plotting-role-cell.is-sk-marker {
  background: #FFF7ED;
  box-shadow: inset 0 0 0 1px #FDBA74;
}
#tabelPlottingKerma .plotting-role-head {
  padding-inline: 3px;
  white-space: normal;
}
#tabelPlottingKerma .plotting-role-label,
#tabelPlottingKerma .plotting-role-count {
  display: block;
  line-height: 1.08;
}
#tabelPlottingKerma .plotting-role-count {
  margin-top: 3px;
  color: rgba(255,255,255,0.74);
  font-size: 8px;
  font-weight: 800;
}
#tabelPlottingKerma .plotting-role-count.is-partial {
  color: rgba(255,255,255,0.78);
}
#tabelPlottingKerma .plotting-role-count.is-partial .plotting-role-count-filled {
  color: #FF8A8A;
}
#tabelPlottingKerma .plotting-role-count.is-full {
  color: #B7F7D0;
}
#tabelPlottingKerma .plotting-col-total,
#tabelPlottingKerma tbody .plotting-total {
  width: var(--plot-sk-col-total);
  min-width: var(--plot-sk-col-total);
  max-width: var(--plot-sk-col-total);
}
#tabelPlottingKerma .plotting-col-total-sk,
#tabelPlottingKerma tbody .plotting-total-sk {
  width: var(--plot-sk-col-total-sk);
  min-width: var(--plot-sk-col-total-sk);
  max-width: var(--plot-sk-col-total-sk);
  padding-right: 14px;
}
#tabelPlottingKerma .plotting-col-total {
  white-space: normal;
  line-height: 1.1;
}
#tabelPlottingKerma tbody td:not([colspan]):nth-child(-n+4) {
  position: sticky;
  z-index: 8;
  background: #fff;
}
#tabelPlottingKerma tbody tr:nth-child(even) td:not([colspan]):nth-child(-n+4) {
  background: #FAFCFF;
}
#tabelPlottingKerma tbody tr:hover td:not([colspan]):nth-child(-n+4) {
  background: #EEF4FD !important;
}
#tabelPlottingKerma .plotting-col-target,
#tabelPlottingKerma tbody td:not([colspan]):nth-child(4) {
  box-shadow: 8px 0 10px -10px rgba(7,59,115,0.42);
}
#tabelPlottingKerma .plotting-summary-group-head {
  background: linear-gradient(180deg, #0B5D99, #073B73) !important;
}
#tabelPlottingKerma .plotting-summary-role-head,
#tabelPlottingKerma tbody .plotting-summary-cell {
  width: var(--plot-sk-col-summary);
  min-width: var(--plot-sk-col-summary);
  max-width: var(--plot-sk-col-summary);
}
#tabelPlottingKerma .plotting-summary-role-head {
  padding-inline: 3px;
  background: linear-gradient(180deg, #07508E, #073B73);
}
#tabelPlottingKerma tbody .plotting-summary-cell {
  padding: 6px 5px;
  text-align: center;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  background: #FBFDFF;
}
#tabelPlottingKerma tbody .plotting-summary-cell--sk {
  color: #0369A1;
  background: #F0F9FF;
}
#tabelPlottingKerma tbody .plotting-summary-cell--selisih.is-zero {
  color: var(--success);
}
#tabelPlottingKerma tbody .plotting-summary-cell--selisih.is-warning,
#tabelPlottingKerma tbody .plotting-summary-cell--selisih.is-negative {
  color: var(--danger);
  background: #FEF2F2;
}
#tabelEksporPlotSkBidang {
  --plot-sk-col-no: 54px;
  --plot-sk-col-nama: 300px;
  --plot-sk-col-peran: 104px;
  --plot-sk-col-target: 118px;
  --plot-sk-col-pks-nama: 128px;
  --plot-sk-col-pks-bulan: 60px;
  --plot-sk-head-main: 62px;
  --plot-sk-head-role: 48px;
  --plot-sk-left-nama: var(--plot-sk-col-no);
  --plot-sk-left-peran: calc(var(--plot-sk-col-no) + var(--plot-sk-col-nama));
  --plot-sk-left-target: calc(var(--plot-sk-col-no) + var(--plot-sk-col-nama) + var(--plot-sk-col-peran));
}
#tabelEksporPlotSkBidang thead tr:first-child th {
  top: 0;
  z-index: 12;
  height: var(--plot-sk-head-main);
}
#tabelEksporPlotSkBidang thead tr:first-child th[rowspan="2"] {
  height: calc(var(--plot-sk-head-main) + var(--plot-sk-head-role));
}
#tabelEksporPlotSkBidang thead tr:nth-child(2) th {
  top: var(--plot-sk-head-main);
  height: var(--plot-sk-head-role);
  z-index: 11;
}
#tabelEksporPlotSkBidang .plotting-col-no,
#tabelEksporPlotSkBidang tbody td:not([colspan]):nth-child(1) {
  left: 0;
  width: var(--plot-sk-col-no);
  min-width: var(--plot-sk-col-no);
  max-width: var(--plot-sk-col-no);
}
#tabelEksporPlotSkBidang .plotting-col-nama,
#tabelEksporPlotSkBidang tbody td:not([colspan]):nth-child(2) {
  left: var(--plot-sk-left-nama);
  width: var(--plot-sk-col-nama);
  min-width: var(--plot-sk-col-nama);
  max-width: var(--plot-sk-col-nama);
}
#tabelEksporPlotSkBidang .plotting-col-peran,
#tabelEksporPlotSkBidang tbody td:not([colspan]):nth-child(3) {
  left: var(--plot-sk-left-peran);
  width: var(--plot-sk-col-peran);
  min-width: var(--plot-sk-col-peran);
  max-width: var(--plot-sk-col-peran);
}
#tabelEksporPlotSkBidang .plotting-col-target,
#tabelEksporPlotSkBidang tbody td:not([colspan]):nth-child(4) {
  left: var(--plot-sk-left-target);
  width: var(--plot-sk-col-target);
  min-width: var(--plot-sk-col-target);
  max-width: var(--plot-sk-col-target);
}
#tabelEksporPlotSkBidang thead tr:first-child th.plotting-col-no,
#tabelEksporPlotSkBidang thead tr:first-child th.plotting-col-nama,
#tabelEksporPlotSkBidang thead tr:first-child th.plotting-col-peran,
#tabelEksporPlotSkBidang thead tr:first-child th.plotting-col-target {
  z-index: 70;
  background: linear-gradient(180deg, var(--primary), #073B73);
}
#tabelEksporPlotSkBidang tbody td:not([colspan]):nth-child(-n+4) {
  position: sticky;
  z-index: 8;
  background: #fff;
}
#tabelEksporPlotSkBidang tbody tr:nth-child(even) td:not([colspan]):nth-child(-n+4) {
  background: #FAFCFF;
}
#tabelEksporPlotSkBidang tbody tr:hover td:not([colspan]):nth-child(-n+4) {
  background: #EEF4FD !important;
}
#tabelEksporPlotSkBidang .plotting-bidang-name-head,
#tabelEksporPlotSkBidang tbody .plotting-bidang-name-cell {
  width: var(--plot-sk-col-pks-nama);
  min-width: var(--plot-sk-col-pks-nama);
  max-width: var(--plot-sk-col-pks-nama);
}
#tabelEksporPlotSkBidang .plotting-bidang-month-head,
#tabelEksporPlotSkBidang tbody .plotting-bidang-month-cell {
  width: var(--plot-sk-col-pks-bulan);
  min-width: var(--plot-sk-col-pks-bulan);
  max-width: var(--plot-sk-col-pks-bulan);
}
#tabelEksporPlotSkBidang .plotting-col-target,
#tabelEksporPlotSkBidang tbody td:not([colspan]):nth-child(4) {
  box-shadow: 8px 0 10px -10px rgba(7,59,115,0.42);
}
.plotting-jabatan-bidang-cell {
  white-space: normal;
  line-height: 1.35;
}
.plotting-bidang-name-cell {
  color: var(--text-2);
  white-space: nowrap;
}
.plotting-bidang-month-cell {
  text-align: center;
  color: var(--text-3);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.plotting-bidang-select,
.plotting-bidang-month-input {
  min-height: 28px;
  width: 100%;
  padding: 5px 7px;
  font-size: 10.5px;
}
.plotting-bidang-month-input {
  text-align: center;
  font-weight: 800;
}
.plotting-bidang-name-cell.is-filled,
.plotting-bidang-month-cell.is-filled {
  color: var(--primary);
  background: #F0F9FF;
}
.plotting-bidang-month-cell.is-sk-marker {
  color: #9A3412;
  background: #FFF7ED;
  box-shadow: inset 0 0 0 1px #FDBA74;
}
.plotting-input {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 11.5px;
  background: #FFFFFF;
}
.plotting-input--number,
.plotting-total { text-align: right; }
.plotting-role-cell { text-align: center; }
.plotting-plot-sk-input {
  width: 42px;
  min-width: 42px;
  height: 26px;
  padding: 4px 5px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 750;
}
.plotting-plot-sk-input.is-sk-marker {
  border-color: #FDBA74;
  background: #FFF7ED;
  color: #9A3412;
  font-weight: 850;
}
.plotting-bidang-month-input.is-sk-marker {
  border-color: #FDBA74;
  background: #FFF7ED;
  color: #9A3412;
  font-weight: 850;
}
.plotting-target-beban-input {
  width: 100%;
  min-width: 0;
  max-width: 54px;
  height: 28px;
  padding: 4px;
  margin: 0 auto;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
}
.plotting-target-role-na {
  display: inline-flex;
  min-width: 54px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-weight: 800;
}
.plotting-check {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.plotting-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.plotting-check span {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--border-2);
  background: #FFFFFF;
  box-shadow: inset 0 1px 1px rgba(15,27,45,0.04);
  transition: var(--trans);
}
.plotting-check input:checked + span {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 3px #FFFFFF;
}
.plotting-check:focus-within span {
  outline: 3px solid rgba(14,165,233,0.18);
  outline-offset: 2px;
}
.plotting-total {
  text-align: right;
  font-weight: 700;
  color: var(--primary);
}

/* ─── Mahasiswa layout ────────────────────────────────────────────────────── */
.mahasiswa-layout { display: flex; gap: 0; flex: 1; overflow: hidden; min-height: 0; }
.mahasiswa-panel--list { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; margin-right: 16px; transition: margin-right 0.3s ease; }
.mahasiswa-panel--list.form-hidden { margin-right: 0; }
.mahasiswa-panel--list .table-container { flex: 1; margin-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.mahasiswa-panel--list .filter-panel { flex-shrink: 0; }
.mahasiswa-panel--form { width: 320px; max-width: 320px; flex-shrink: 0; overflow-y: auto; opacity: 1; transition: max-width 0.3s ease, opacity 0.2s ease; }
.mahasiswa-panel--form.collapsed { max-width: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.mahasiswa-panel--form .form-container { padding: 0; }
.mahasiswa-tab-bar { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 14px; }
.mahasiswa-tab { flex: 1; background: none; border: none; padding: 10px 0; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: 0.15s; font-family: 'Inter', sans-serif; }
.mahasiswa-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.mahasiswa-tab:hover:not(.active) { color: var(--text-1); }
#sectionRealisasi.view-section.active { min-height: 0; overflow: hidden; }
#sectionRealisasi .insight-grid {
  flex-shrink: 0;
  grid-template-columns: repeat(6, minmax(118px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-gutter: stable;
}
#sectionRealisasi .insight-card {
  min-height: 64px;
  padding: 10px 12px;
}
#sectionRealisasi .insight-card::after { height: 2px; }
#sectionRealisasi .insight-label { font-size: 8.5px; }
#sectionRealisasi .insight-card strong {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
#sectionRealisasi .insight-card small {
  margin-top: 4px;
  font-size: 9px;
  line-height: 1.25;
}
.realisasi-tabs-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  margin-top: 12px;
}
.realisasi-tabs-container .mahasiswa-tab-bar { flex-shrink: 0; margin-bottom: 18px; }
.realisasi-tabs-container [role="tabpanel"] {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
.realisasi-tabs-container [role="tabpanel"]::-webkit-scrollbar { width: 8px; }
.realisasi-tabs-container [role="tabpanel"]::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(74,85,104,0.24);
}
.realisasi-tabs-container [role="tabpanel"]::-webkit-scrollbar-track { background: transparent; }
.panel-title--spaced { margin-top: 24px; }
.realisasi-tabs-container .table-container { margin-top: 12px; }
#panelRencanaPendapatan {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#panelRencanaPendapatan .rencana-income-control,
#panelRencanaPendapatan .rencana-income-section--general,
#panelRencanaPendapatan .payment-list-header {
  flex-shrink: 0;
}
#panelRencanaPendapatan .table-container--compact,
#panelUangMasuk .table-container--compact,
#panelPaguAnggaran .table-container--compact,
#panelRabAnggaran .table-container--compact,
#panelAlokasiKerma .table-container--compact,
#panelRencanaAnggaran .table-container--compact,
#panelRealisasiAnggaran .table-container--compact {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
#panelRencanaAnggaran .table-container--compact {
  flex: 1;
  min-height: 0;
  max-height: none;
}
#panelRencanaPendapatan .table-container--compact th,
#panelUangMasuk .table-container--compact th,
#panelPaguAnggaran .table-container--compact th,
#panelRabAnggaran .table-container--compact th,
#panelAlokasiKerma .table-container--compact th,
#panelRencanaAnggaran .table-container--compact th,
#panelRealisasiAnggaran .table-container--compact th {
  position: sticky;
  top: 0;
  z-index: 6;
  box-shadow: 0 1px 0 rgba(7,59,115,0.18);
}
.rencana-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.rencana-view-btn {
  min-height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--trans);
}
.rencana-view-btn:hover {
  color: var(--primary);
  background: rgba(0,75,135,0.08);
}
.rencana-view-btn.active {
  color: #FFFFFF;
  background: var(--primary);
  box-shadow: 0 6px 14px rgba(0,75,135,0.18);
}
.rencana-termin-table-wrap table {
  min-width: 1080px;
  font-size: 11px;
}
.rencana-termin-table-wrap th {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  vertical-align: middle;
}
.rencana-termin-table-wrap td {
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.2;
}
.rencana-termin-table-wrap th:nth-child(1),
.rencana-termin-table-wrap td:nth-child(1) {
  width: 54px;
  min-width: 54px;
  text-align: center;
}
.rencana-termin-table-wrap th:nth-child(2),
.rencana-termin-table-wrap td:nth-child(2) {
  width: 148px;
  min-width: 148px;
}
.rencana-termin-table-wrap th:nth-child(3),
.rencana-termin-table-wrap td:nth-child(3),
.rencana-termin-table-wrap th:nth-child(4),
.rencana-termin-table-wrap td:nth-child(4) {
  width: 190px;
  min-width: 190px;
}
#panelRencanaPendapatan .rencana-termin-table-wrap th:nth-child(1),
#panelRencanaPendapatan .rencana-termin-table-wrap td:not([colspan]):nth-child(1) { left: 0; }
#panelRencanaPendapatan .rencana-termin-table-wrap th:nth-child(2),
#panelRencanaPendapatan .rencana-termin-table-wrap td:not([colspan]):nth-child(2) { left: 54px; }
#panelRencanaPendapatan .rencana-termin-table-wrap th:nth-child(3),
#panelRencanaPendapatan .rencana-termin-table-wrap td:not([colspan]):nth-child(3) { left: 202px; }
#panelRencanaPendapatan .rencana-termin-table-wrap th:nth-child(4),
#panelRencanaPendapatan .rencana-termin-table-wrap td:not([colspan]):nth-child(4) { left: 392px; }
#panelRencanaPendapatan .rencana-termin-table-wrap th:nth-child(-n+4),
#panelRencanaPendapatan .rencana-termin-table-wrap td:not([colspan]):nth-child(-n+4) {
  position: sticky;
}
#panelRencanaPendapatan .rencana-termin-table-wrap thead th:nth-child(-n+4) {
  z-index: 12;
}
#panelRencanaPendapatan .rencana-termin-table-wrap tbody td:not([colspan]):nth-child(-n+4) {
  z-index: 4;
  background: #fff;
}
#panelRencanaPendapatan .rencana-termin-table-wrap tbody tr:nth-child(even) td:not([colspan]):nth-child(-n+4) {
  background: #FAFCFF;
}
#panelRencanaPendapatan .rencana-termin-table-wrap tbody tr:hover td:not([colspan]):nth-child(-n+4) {
  background: #EEF4FD !important;
}
#panelRencanaPendapatan .rencana-termin-table-wrap th:nth-child(4),
#panelRencanaPendapatan .rencana-termin-table-wrap td:not([colspan]):nth-child(4) {
  border-right: 2px solid rgba(0, 75, 135, 0.22);
  box-shadow: 8px 0 12px -12px rgba(15, 27, 45, 0.65);
}
#panelRencanaPendapatan .rencana-termin-table-wrap thead th:nth-child(4) {
  border-right-color: rgba(255,255,255,0.46);
}
.rencana-termin-table-wrap th:nth-child(5),
.rencana-termin-table-wrap th:nth-child(6),
.rencana-termin-table-wrap th:nth-child(7) {
  min-width: 142px;
  white-space: nowrap;
  text-align: center;
}
.rencana-termin-table-wrap td:nth-child(5),
.rencana-termin-table-wrap td:nth-child(6),
.rencana-termin-table-wrap td:nth-child(7) {
  min-width: 142px;
  white-space: nowrap;
  text-align: right;
}
.rencana-termin-table-wrap th:nth-child(8),
.rencana-termin-table-wrap td:nth-child(8) {
  min-width: 132px;
  white-space: nowrap;
  text-align: center;
}
.rencana-termin-selisih-cell.is-sisa {
  background: #FEE2E2;
  color: #B91C1C;
  font-weight: 800;
}
.rencana-termin-cell {
  min-width: 142px;
  border-left: 1px solid rgba(203,213,224,0.55);
  background: #F8FAFC;
  vertical-align: top;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.rencana-termin-cell--clickable {
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.rencana-termin-cell--clickable:hover,
.rencana-termin-cell--clickable:focus-visible {
  background: #EFF6FF;
  box-shadow: inset 0 0 0 1px rgba(0,75,135,0.2);
  outline: none;
}
.rencana-termin-cell strong {
  display: block;
  color: var(--text-1);
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}
.rencana-termin-cell small {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 9px;
  line-height: 1.15;
}
.rencana-termin-cell-main {
  min-height: 30px;
}
.rencana-termin-cell-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 6px;
}
.rencana-termin-cell-actions .btn-mini-action {
  min-height: 24px;
  padding: 3px 7px;
  font-size: 9px;
  line-height: 1;
}
.modal-card--invoice-payment {
  width: min(760px, calc(100vw - 28px));
}
.invoice-modal-body {
  padding: 0 22px 22px;
}
.invoice-modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.invoice-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
.invoice-modal-field--wide {
  grid-column: 1 / -1;
}
.invoice-modal-textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.4;
}
.invoice-modal-actions {
  justify-content: flex-end;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.modal-card--sk-team {
  width: min(1040px, calc(100vw - 28px));
}
.sk-team-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 22px 22px;
}
.sk-team-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px 14px;
}
.sk-team-summary span {
  color: var(--text-muted);
  font-weight: 700;
}
.sk-team-summary strong {
  color: var(--primary);
  font-size: 18px;
}
.sk-team-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.sk-team-table-container {
  max-height: min(46vh, 440px);
}
.sk-team-table {
  min-width: 920px;
}
.sk-team-table th {
  text-align: center;
  vertical-align: middle;
}
.sk-team-table td {
  vertical-align: middle;
}
.sk-team-table .sk-team-no-input {
  min-width: 220px;
}
.sk-team-actions {
  justify-content: flex-end;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
@media (max-width: 720px) {
  .invoice-modal-grid {
    grid-template-columns: 1fr;
  }
  .sk-team-form-grid {
    grid-template-columns: 1fr;
  }
  .invoice-modal-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .invoice-modal-actions .btn-primary,
  .invoice-modal-actions .btn-secondary,
  .sk-team-actions .btn-primary,
  .sk-team-actions .btn-secondary {
    width: 100%;
  }
  .sk-team-actions {
    align-items: stretch;
    flex-direction: column;
  }
}
.rencana-termin-cell--realized {
  border-left-color: rgba(5,150,105,0.45);
  background: #DCFCE7;
}
.rencana-termin-cell--realized:hover,
.rencana-termin-cell--realized:focus-visible {
  background: #BBF7D0;
  box-shadow: inset 0 0 0 1px rgba(5,150,105,0.24);
}
.rencana-termin-cell--realized strong {
  color: #065F46;
}
.rencana-termin-cell--realized small {
  color: #047857;
}
.rencana-termin-cell--partial {
  border-left-color: rgba(217,119,6,0.42);
  background: #FEF3C7;
}
.rencana-termin-cell--partial:hover,
.rencana-termin-cell--partial:focus-visible {
  background: #FDE68A;
  box-shadow: inset 0 0 0 1px rgba(217,119,6,0.24);
}
.rencana-termin-cell--partial strong {
  color: #92400E;
}
.rencana-termin-cell--partial small {
  color: #B45309;
}
.rencana-termin-cell--overdue {
  border-left-color: rgba(185,28,28,0.46);
  background: #FEE2E2;
}
.rencana-termin-cell--overdue:hover,
.rencana-termin-cell--overdue:focus-visible {
  background: #FECACA;
  box-shadow: inset 0 0 0 1px rgba(185,28,28,0.24);
}
.rencana-termin-cell--overdue strong {
  color: #991B1B;
}
.rencana-termin-cell--overdue small {
  color: #B91C1C;
}
.rencana-termin-cell--pending {
  border-left-color: rgba(203,213,224,0.72);
  background: #FFFFFF;
}
.rencana-termin-cell--pending:hover,
.rencana-termin-cell--pending:focus-visible {
  background: #F8FAFC;
}
.rencana-termin-empty {
  color: var(--text-3);
  text-align: center;
  background: #F8FAFC;
}
#panelUangMasuk,
#panelPaguAnggaran,
#panelRabAnggaran,
#panelAlokasiKerma,
#panelRealisasiRiInvoice,
#panelRencanaAnggaran,
#panelRealisasiAnggaran {
  min-height: 0;
  overflow: hidden;
}
#panelUangMasuk,
#panelPaguAnggaran,
#panelRabAnggaran,
#panelAlokasiKerma,
#panelRealisasiRiInvoice,
#panelRencanaAnggaran,
#panelRealisasiAnggaran {
  display: flex;
  flex-direction: column;
}
#panelUangMasuk > .uang-masuk-layout,
#panelRealisasiAnggaran > .uang-masuk-layout,
#panelRencanaAnggaran > .rencana-anggaran-layout,
#panelRealisasiRiInvoice > .uang-masuk-table-pane,
#panelPaguAnggaran .uang-masuk-table-pane,
#panelRabAnggaran .uang-masuk-table-pane,
#panelAlokasiKerma .uang-masuk-table-pane {
  flex: 1;
  min-height: 0;
}
#panelPaguAnggaran .payment-list-header,
#panelRabAnggaran .payment-list-header,
#panelAlokasiKerma .payment-list-header {
  flex-shrink: 0;
}
#panelPaguAnggaran .pagu-table-wrap,
#panelRabAnggaran .rab-table-wrap {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
  scrollbar-gutter: stable;
}
.rab-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rab-summary article {
  min-width: 128px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #F8FAFC;
}
.rab-summary span {
  display: block;
  color: var(--text-3);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
.rab-summary strong {
  display: block;
  margin-top: 2px;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.alokasi-threshold-summary {
  display: grid;
  grid-template-columns: repeat(9, minmax(76px, 1fr));
  gap: 4px;
  margin: 0 0 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  flex-shrink: 0;
  scrollbar-gutter: stable;
}
.alokasi-threshold-summary article {
  min-height: 42px;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #F8FAFC;
  box-shadow: var(--shadow-xs);
}
.alokasi-threshold-summary span {
  display: block;
  color: var(--text-3);
  font-size: 7.5px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alokasi-threshold-summary strong {
  display: block;
  margin-top: 2px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.alokasi-threshold-summary small {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-size: 7px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panelAlokasiKerma .table-container--compact {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
  scrollbar-gutter: stable;
}
.alokasi-kerma-table {
  min-width: 1540px;
}
.alokasi-kerma-table th {
  text-align: center;
  vertical-align: middle;
  line-height: 1.2;
}
.alokasi-kerma-table th[data-col] {
  padding-left: 28px;
  padding-right: 28px;
}
.alokasi-kerma-table th:nth-child(1),
.alokasi-kerma-table td:not([colspan]):nth-child(1) {
  width: 52px;
  min-width: 52px;
  text-align: center;
}
.alokasi-kerma-table th:nth-child(2),
.alokasi-kerma-table td:not([colspan]):nth-child(2) {
  width: 150px;
  min-width: 150px;
}
.alokasi-kerma-table th:nth-child(3),
.alokasi-kerma-table td:not([colspan]):nth-child(3) {
  width: 240px;
  min-width: 240px;
}
#panelAlokasiKerma .alokasi-kerma-table th:nth-child(1),
#panelAlokasiKerma .alokasi-kerma-table td:not([colspan]):nth-child(1) { left: 0; }
#panelAlokasiKerma .alokasi-kerma-table th:nth-child(2),
#panelAlokasiKerma .alokasi-kerma-table td:not([colspan]):nth-child(2) { left: 52px; }
#panelAlokasiKerma .alokasi-kerma-table th:nth-child(3),
#panelAlokasiKerma .alokasi-kerma-table td:not([colspan]):nth-child(3) { left: 202px; }
#panelAlokasiKerma .alokasi-kerma-table th:nth-child(-n+3),
#panelAlokasiKerma .alokasi-kerma-table td:not([colspan]):nth-child(-n+3) {
  position: sticky;
}
#panelAlokasiKerma .alokasi-kerma-table thead th:nth-child(-n+3) {
  z-index: 14;
}
#panelAlokasiKerma .alokasi-kerma-table tbody td:not([colspan]):nth-child(-n+3) {
  z-index: 5;
  background: #fff;
}
#panelAlokasiKerma .alokasi-kerma-table tbody tr:nth-child(even) td:not([colspan]):nth-child(-n+3) {
  background: #FAFCFF;
}
#panelAlokasiKerma .alokasi-kerma-table tbody tr:hover td:not([colspan]):nth-child(-n+3) {
  background: #EEF4FD !important;
}
#panelAlokasiKerma .alokasi-kerma-table th:nth-child(3),
#panelAlokasiKerma .alokasi-kerma-table td:not([colspan]):nth-child(3) {
  border-right: 2px solid rgba(0, 75, 135, 0.24);
  box-shadow: 8px 0 12px -12px rgba(15, 27, 45, 0.65);
}
#panelAlokasiKerma .alokasi-kerma-table thead th:nth-child(3) {
  border-right-color: rgba(255, 255, 255, 0.46);
}
.btn-rab-add-main {
  min-height: 32px;
  padding: 7px 12px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.rab-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.pagu-mode-toggle {
  flex-shrink: 0;
}
.pagu-mode-toggle .rencana-view-btn {
  min-height: 26px;
  padding: 0 10px;
}
.rencana-anggaran-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 0;
}
.rencana-anggaran-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}
.saldo-shared-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(248,250,252,0.9);
}
.rab-kode-file-toolbar {
  margin-bottom: 10px;
}
.saldo-kode-file-field {
  display: grid;
  gap: 6px;
  min-width: min(360px, 100%);
}
.saldo-shared-toolbar .filter-input {
  width: min(360px, 100%);
  min-height: 32px;
  padding: 6px 9px;
  font-size: 11.5px;
}
.kode-file-control-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.kode-file-control-row .filter-input,
.kode-file-control-row .form-input {
  flex: 1 1 auto;
  min-width: 0;
}
.btn-reset-kode-file {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 10.5px;
  font-weight: 700;
}
.kode-file-control-row--form {
  width: 100%;
}
.saldo-kode-file-meta {
  display: grid;
  gap: 4px;
  max-width: 520px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(148,163,184,0.22);
}
.saldo-kode-file-meta div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.saldo-kode-file-meta span {
  color: var(--text-3);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
}
.saldo-kode-file-meta strong {
  min-width: 0;
  color: var(--text-1);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.alokasi-kerma-filter-toolbar {
  margin-bottom: 10px;
}
.alokasi-kerma-filter-info {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
}
.rencana-anggaran-toolbar .filter-input {
  flex: 0 0 220px;
  width: 220px;
  min-height: 32px;
  padding: 6px 9px;
  font-size: 11.5px;
}
.realisasi-ri-toolbar .filter-input {
  flex-basis: 245px;
  width: 245px;
}
.rencana-anggaran-contract-value {
  min-width: 190px;
  padding: 5px 9px;
  border: 1px solid rgba(14,165,233,0.18);
  border-radius: 8px;
  background: #EFF6FF;
}
.rencana-anggaran-contract-value span {
  display: block;
  color: var(--text-3);
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}
.rencana-anggaran-contract-value strong {
  display: block;
  margin-top: 2px;
  color: var(--primary);
  font-size: 13px;
  line-height: 1.1;
}
.rencana-anggaran-contract-value small {
  display: block;
  margin-top: 2px;
  max-width: 250px;
  overflow: hidden;
  color: var(--text-3);
  font-size: 9.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finance-empty-panel {
  min-height: 280px;
  padding: 2px 4px 4px 0;
}
.finance-empty-panel .table-state {
  min-height: 176px;
  margin-top: 14px;
}
.rencana-income-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  padding: 0 4px 4px 0;
}
.rencana-income-section {
  margin: 0 4px 10px 0;
}
.rencana-income-section--periode {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  margin-bottom: 4px;
}
.rencana-income-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.rencana-income-section-head h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}
.rencana-income-section-head p {
  margin: 3px 0 0;
  color: var(--text-3);
  font-size: 10.5px;
  line-height: 1.35;
}
.rencana-income-section-head--with-filter {
  align-items: flex-end;
}
.rencana-income-section-head--period-inline {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.rencana-income-section-head--period-inline h2 {
  flex: 0 0 auto;
  min-width: 86px;
}
.rencana-income-section-head--period-inline .period-field--date-placeholder {
  flex: 0 0 154px;
}
.rencana-income-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.rencana-income-card {
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.94);
  box-shadow: var(--shadow-sm);
}
.rencana-income-card--primary {
  background: linear-gradient(135deg, var(--primary), #0E4E87);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.rencana-income-card span {
  display: block;
  color: var(--text-2);
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}
.rencana-income-card--primary span,
.rencana-income-card--primary small { color: rgba(255,255,255,0.74); }
.rencana-income-card strong {
  display: block;
  margin-top: 4px;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.rencana-income-card--primary strong { color: #fff; }
.rencana-income-card small {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 9px;
  line-height: 1.25;
}
.rencana-income-card--clickable {
  position: relative;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.rencana-income-card--clickable:hover,
.rencana-income-card--clickable:focus-visible,
.rencana-income-card--clickable.is-open {
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow: 0 14px 28px rgba(0,75,135,0.22);
  outline: none;
}
.rencana-income-detail-panel {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  margin: 0;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0,75,135,0.16), rgba(14,78,135,0.11));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.58), 0 10px 22px rgba(0,45,90,0.08);
}
.rencana-income-detail-summary {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 7px;
}
.rencana-income-detail-card {
  min-height: 46px;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: rgba(255,255,255,0.84);
  box-shadow: 0 8px 18px rgba(0,45,90,0.08);
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.rencana-income-detail-card:hover,
.rencana-income-detail-card:focus-visible {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(0,75,135,0.28), 0 10px 20px rgba(0,75,135,0.14);
  transform: translateY(-1px);
  outline: none;
}
.rencana-income-detail-card.active {
  background: linear-gradient(135deg, var(--primary), #0E4E87);
  box-shadow: 0 12px 24px rgba(0,75,135,0.22);
  transform: translateY(-1px);
  outline: none;
}
.rencana-income-detail-card.active span,
.rencana-income-detail-card.active strong,
.rencana-income-detail-card.active small {
  color: #FFFFFF;
}
.rencana-income-detail-card span {
  display: block;
  color: var(--primary);
  font-size: 7.6px;
  font-weight: 900;
  line-height: 1.12;
  text-transform: uppercase;
}
.rencana-income-detail-card strong {
  display: block;
  margin-top: 3px;
  color: var(--text-1);
  font-size: 11.5px;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.rencana-income-detail-card small {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 8px;
  line-height: 1.1;
}
.rencana-income-detail-table {
  flex: 1;
  margin-top: 0;
  max-height: none;
  min-height: 0 !important;
  background: rgba(255,255,255,0.92);
}
.rencana-income-detail-table table {
  min-width: 1060px;
}
.badge-rencana-late {
  background: #FEE2E2;
  color: #B91C1C;
}
.sisa-anggaran-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: visible;
  padding-bottom: 2px;
  flex: 0 0 auto;
}
.sisa-anggaran-summary .insight-card {
  min-height: 72px;
  padding: 10px 12px;
}
.sisa-anggaran-summary .insight-card strong {
  font-size: 15px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.sisa-anggaran-summary .insight-card small {
  margin-top: 5px;
  font-size: 9px;
}
.insight-card--clickable {
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.insight-card--clickable:hover,
.insight-card--clickable:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(55, 134, 205, .32);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .10);
  outline: none;
}
.insight-card--clickable.is-expanded {
  border-color: rgba(55, 134, 205, .45);
}
.sisa-anggaran-summary .insight-card--clickable:hover,
.sisa-anggaran-summary .insight-card--clickable:focus-visible,
.sisa-anggaran-summary .insight-card--clickable.is-expanded {
  color: #fff;
  border-color: rgba(14, 165, 233, .42);
  background: linear-gradient(135deg, #0F4C81, #2563EB 64%, #38BDF8);
  box-shadow: 0 12px 26px rgba(37, 99, 235, .18);
}
.sisa-anggaran-summary .insight-card--clickable:hover::after,
.sisa-anggaran-summary .insight-card--clickable:focus-visible::after,
.sisa-anggaran-summary .insight-card--clickable.is-expanded::after {
  background: rgba(255,255,255,.42);
}
.sisa-anggaran-summary .insight-card--clickable:hover .insight-label,
.sisa-anggaran-summary .insight-card--clickable:focus-visible .insight-label,
.sisa-anggaran-summary .insight-card--clickable.is-expanded .insight-label {
  color: rgba(255,255,255,.78);
}
.sisa-anggaran-summary .insight-card--clickable:hover strong,
.sisa-anggaran-summary .insight-card--clickable:focus-visible strong,
.sisa-anggaran-summary .insight-card--clickable.is-expanded strong {
  color: #fff;
}
.sisa-anggaran-summary .insight-card--clickable:hover .info-tooltip,
.sisa-anggaran-summary .insight-card--clickable:focus-visible .info-tooltip,
.sisa-anggaran-summary .insight-card--clickable.is-expanded .info-tooltip {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.16);
  color: #fff;
}
.neraca-detail-panel {
  position: relative;
  grid-column: 1 / -1;
  margin: 8px 0 18px;
  border: 0;
  background:
    linear-gradient(135deg, rgba(15, 76, 129, .18), rgba(37, 99, 235, .14) 54%, rgba(56, 189, 248, .20)),
    #E6F0FF;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .16);
  overflow: visible;
}
.neraca-detail-panel::before {
  content: '';
  position: absolute;
  top: -7px;
  left: calc(50% - 8px);
  width: 14px;
  height: 14px;
  background: #DCEBFF;
  transform: rotate(45deg);
}
.neraca-detail-panel.is-anchor-1::before { left: calc(16.666% - 8px); }
.neraca-detail-panel.is-anchor-2::before { left: calc(50% - 8px); }
.neraca-detail-panel.is-anchor-3::before { left: calc(83.333% - 8px); }
.neraca-detail-panel[hidden] {
  display: none;
}
.neraca-detail-panel[data-detail-type="penerimaan"] {
  background:
    linear-gradient(135deg, rgba(15, 76, 129, .10), rgba(37, 99, 235, .08) 54%, rgba(56, 189, 248, .12)),
    #EEF6FF;
  box-shadow: 0 12px 28px rgba(37, 99, 235, .10);
}
.neraca-detail-panel[data-detail-type="penerimaan"]::before {
  background: #EEF6FF;
}
.neraca-detail-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.neraca-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.neraca-detail-summary article {
  border: 1px solid rgba(37, 99, 235, .22);
  border-radius: 8px;
  background: rgba(255,255,255,.76);
  padding: 10px 12px;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .09);
}
.neraca-detail-filter-card {
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.neraca-detail-filter-card:hover,
.neraca-detail-filter-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, .40);
  background: rgba(255,255,255,.90);
  box-shadow: 0 10px 22px rgba(37, 99, 235, .14);
  outline: none;
}
.neraca-detail-filter-card.is-active {
  border-color: rgba(37, 99, 235, .58);
  background: linear-gradient(135deg, #C7DDFF, #ECF6FF);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
}
.neraca-detail-summary span {
  display: block;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.neraca-detail-summary strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 15px;
}
.neraca-detail-summary small {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 9px;
}
.neraca-period-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(130px, 170px));
  align-items: end;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 8px 18px rgba(37, 99, 235, .08);
}
.neraca-period-filter > div,
.neraca-period-filter label {
  min-width: 0;
}
.neraca-period-filter span {
  display: block;
  color: var(--text-3);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.neraca-period-filter strong {
  display: block;
  margin-top: 3px;
  color: #123B6D;
  font-size: 15px;
  line-height: 1.2;
}
.neraca-period-filter small {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-size: 9px;
}
.neraca-period-filter .form-input {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
}
.neraca-detail-table {
  max-height: 260px;
  border: 1px solid rgba(37, 99, 235, .24);
  border-radius: 8px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(37, 99, 235, .10);
}
.neraca-detail-muted {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 9px;
  line-height: 1.25;
}
.finance-statement-panel {
  margin-top: 12px;
  flex: 0 0 auto;
  height: auto;
  min-height: fit-content;
  overflow: visible;
  border-color: rgba(15, 76, 129, .14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,253,.94)),
    var(--surface);
  box-shadow: var(--shadow-sm);
}
.finance-statement-panel--modal-source {
  display: none !important;
}
.finance-statement-title {
  align-items: center;
}
.finance-statement-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, .28);
  background: #ECFDF5;
  color: #047857;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.finance-statement-badge.is-warning {
  border-color: rgba(245, 158, 11, .32);
  background: #FFFBEB;
  color: #B45309;
}
.finance-statement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  flex: 0 0 auto;
}
.finance-statement-column {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.86);
  overflow: visible;
}
.finance-statement-heading {
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  background: #F8FAFC;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.finance-statement-category {
  padding: 9px 13px 7px;
  border-bottom: 1px solid rgba(226,232,240,.78);
  background: linear-gradient(135deg, #EFF6FF, #FFFFFF);
  color: #0F4C81;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.finance-statement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, auto);
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(226,232,240,.82);
}
.finance-statement-row:last-child {
  border-bottom: 0;
}
.finance-statement-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
}
.finance-statement-row .info-tooltip {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  font-size: 8.5px;
  line-height: 13px;
}
.finance-statement-row strong {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}
.finance-statement-row strong.is-negative {
  color: #B91C1C;
}
.finance-statement-row--subtotal {
  background: #FBFDFF;
}
.finance-statement-row--subtotal span,
.finance-statement-row--subtotal strong {
  color: var(--text-1);
  font-weight: 900;
}
.finance-statement-row--total {
  border-top: 1px solid rgba(15, 76, 129, .20);
  background: linear-gradient(135deg, #F0F7FF, #FFFFFF);
}
.finance-statement-row--total span,
.finance-statement-row--total strong {
  color: var(--primary);
  font-weight: 900;
}
.finance-statement-reconcile {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, minmax(160px, .8fr));
  gap: 10px;
  padding: 0 14px 14px;
  flex: 0 0 auto;
}
.finance-statement-reconcile > div {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px dashed rgba(15, 76, 129, .20);
  background: #F8FBFF;
}
.finance-statement-reconcile span {
  display: block;
  color: var(--text-3);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
}
.finance-statement-reconcile strong {
  display: block;
  margin-top: 4px;
  color: var(--text-1);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.budget-progress span {
  display: block;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #E8EEF7;
}
.budget-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--primary));
}
.budget-progress {
  display: grid;
  grid-template-columns: minmax(74px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 130px;
}
.budget-progress strong {
  color: var(--text-1);
  font-size: 10px;
}
.sisa-anggaran-table td:nth-child(5),
.sisa-anggaran-table td:nth-child(6),
.sisa-anggaran-table td:nth-child(7) {
  white-space: nowrap;
}
.sisa-anggaran-table th[data-col] .th-filter-btn {
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.10);
}
.sisa-anggaran-table th[data-col] .th-filter-btn:hover,
.sisa-anggaran-table th[data-col] .th-filter-btn:focus-visible {
  color: #fff;
  background: rgba(255,255,255,0.22);
}
.neraca-detail-table th[data-col] .th-filter-btn {
  color: rgba(255,255,255,0.84);
  background: rgba(255,255,255,0.10);
}
.neraca-detail-table th[data-col] .th-filter-btn:hover,
.neraca-detail-table th[data-col] .th-filter-btn:focus-visible {
  color: #fff;
  background: rgba(255,255,255,0.22);
}
.rencana-income-period {
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  gap: 8px;
  min-width: 300px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #F8FAFD;
}
.period-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.period-field--date-placeholder {
  position: relative;
  display: block;
}
.period-field--date-placeholder::before {
  content: attr(data-placeholder);
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 50%;
  max-width: calc(100% - 42px);
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transform: translateY(-50%);
}
.period-field--date-placeholder.has-value::before {
  opacity: 0;
}
.period-field label {
  color: var(--text-2);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}
.period-field .filter-input {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 11.5px;
}
.period-field--date-placeholder .date-placeholder-input {
  width: 100%;
}
.period-field--date-placeholder:not(.has-value) .date-placeholder-input {
  color: transparent;
}
.period-field--date-placeholder:not(.has-value) .date-placeholder-input::-webkit-datetime-edit,
.period-field--date-placeholder:not(.has-value) .date-placeholder-input::-webkit-datetime-edit-fields-wrapper,
.period-field--date-placeholder:not(.has-value) .date-placeholder-input::-webkit-datetime-edit-text,
.period-field--date-placeholder:not(.has-value) .date-placeholder-input::-webkit-datetime-edit-day-field,
.period-field--date-placeholder:not(.has-value) .date-placeholder-input::-webkit-datetime-edit-month-field,
.period-field--date-placeholder:not(.has-value) .date-placeholder-input::-webkit-datetime-edit-year-field {
  color: transparent;
}
.uang-masuk-layout {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 14px;
  height: 100%;
  min-height: 0;
}
#panelUangMasuk .uang-masuk-layout {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
}
#panelRealisasiAnggaran .uang-masuk-layout {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
}
.uang-masuk-form-pane {
  position: relative;
  z-index: 3;
  align-self: start;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow-sm);
}
.uang-masuk-table-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
#panelUangMasuk .panel-title--compact,
#panelRencanaAnggaran .panel-title--compact,
#panelRealisasiAnggaran .panel-title--compact {
  align-items: center;
  min-height: 0;
  padding: 8px 12px;
}
.panel-title-inline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(14,165,233,0.32);
  background: #EFF6FF;
  color: var(--primary);
  font-size: 9px;
  font-weight: 800;
  line-height: 14px;
  font-style: normal;
  text-align: center;
  vertical-align: middle;
  cursor: help;
}
.info-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 20;
  left: 0;
  top: calc(100% + 8px);
  width: 240px;
  max-width: min(240px, calc(100vw - 48px));
  padding: 8px 10px;
  border-radius: 7px;
  background: #0F172A;
  color: #fff;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
  transform: translateY(-3px);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(15,23,42,0.2);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.info-tooltip:hover::after,
.info-tooltip:focus::after {
  opacity: 1;
  transform: translateY(0);
}
.insight-label--tooltip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.insight-label--tooltip .info-tooltip--card {
  flex: 0 0 auto;
}
.sisa-anggaran-summary .insight-card {
  overflow: visible;
}
.sisa-anggaran-summary .insight-card--primary .info-tooltip {
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.16);
  color: #fff;
}
#panelUangMasuk .payment-compact-form,
#panelRencanaAnggaran .payment-compact-form,
#panelRealisasiAnggaran .payment-compact-form {
  padding: 12px;
}
#panelUangMasuk .payment-compact-grid,
#panelRealisasiAnggaran .payment-compact-grid {
  grid-template-columns: 1fr;
  gap: 9px;
}
#panelRealisasiAnggaran .uang-masuk-form-pane {
  align-self: stretch;
}
#panelUangMasuk .uang-masuk-form-pane {
  align-self: stretch;
}
#panelUangMasuk .payment-compact-grid {
  grid-template-columns: minmax(180px, 0.95fr) minmax(140px, 0.7fr) minmax(390px, 1.7fr) minmax(170px, 0.85fr);
  align-items: end;
}
#panelRealisasiAnggaran .payment-compact-grid {
  grid-template-columns: minmax(170px, 1.1fr) minmax(135px, 0.85fr) minmax(135px, 0.85fr) minmax(135px, 0.85fr) minmax(180px, 1fr);
  align-items: end;
}
#panelUangMasuk .payment-compact-form .form-group,
#panelRencanaAnggaran .payment-compact-form .form-group,
#panelRealisasiAnggaran .payment-compact-form .form-group { gap: 3px; }
#panelUangMasuk .payment-compact-form .form-label,
#panelRencanaAnggaran .payment-compact-form .form-label,
#panelRealisasiAnggaran .payment-compact-form .form-label { font-size: 9.5px; }
#panelUangMasuk .payment-compact-form .form-input,
#panelRencanaAnggaran .payment-compact-form .form-input,
#panelRealisasiAnggaran .payment-compact-form .form-input {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 11.5px;
}
#panelUangMasuk .payment-compact-actions,
#panelRencanaAnggaran .payment-compact-actions,
#panelRealisasiAnggaran .payment-compact-actions {
  margin-top: 10px;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
#panelRealisasiAnggaran .payment-compact-actions {
  margin-top: 8px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
#panelUangMasuk .payment-compact-actions {
  margin-top: 8px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.payment-field--nominal-calc {
  min-width: 0;
}
.penerimaan-calc-row {
  display: grid;
  grid-template-columns: minmax(118px, 1fr) 16px minmax(64px, 0.5fr) 18px 16px minmax(118px, 1fr);
  align-items: end;
  gap: 5px;
}
.penerimaan-calc-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.penerimaan-calc-title {
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.penerimaan-calc-input {
  width: 100%;
  min-width: 0;
  text-align: right;
}
.penerimaan-calc-input--percent {
  padding-right: 6px;
}
.penerimaan-calc-op,
.penerimaan-calc-suffix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 850;
  min-height: 34px;
  line-height: 1;
}
.penerimaan-calc-suffix {
  justify-content: flex-start;
}
#panelRencanaAnggaran .payment-compact-actions {
  margin-top: 8px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
#panelUangMasuk .payment-compact-actions .btn-primary,
#panelRencanaAnggaran .payment-compact-actions .btn-primary,
#panelRealisasiAnggaran .payment-compact-actions .btn-primary,
#panelUangMasuk .payment-compact-actions .btn-secondary,
#panelRencanaAnggaran .payment-compact-actions .btn-secondary,
#panelRealisasiAnggaran .payment-compact-actions .btn-secondary {
  justify-content: center;
  padding: 7px 13px;
  font-size: 11.5px;
}
#panelUangMasuk .panel-title--spaced,
#panelRealisasiRiInvoice .panel-title--spaced,
#panelRencanaAnggaran .panel-title--spaced,
#panelRealisasiAnggaran .panel-title--spaced { margin-top: 16px; }
.uang-masuk-table-pane .panel-title--spaced { margin-top: 0 !important; }
#panelRealisasiAnggaran .uang-masuk-table-pane {
  min-height: 0;
}
#panelRealisasiAnggaran .table-container--compact {
  margin-top: 0;
}
.rekap-anggaran-summary {
  display: grid;
  grid-template-columns: repeat(7, minmax(112px, 1fr));
  gap: 6px;
  margin: 0 0 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-gutter: stable;
}
.rekap-anggaran-summary article {
  min-width: 0;
  min-height: 48px;
  padding: 7px 8px;
  border: 1px solid rgba(14,165,233,0.16);
  border-radius: 7px;
  background: #F8FAFD;
  box-shadow: 0 5px 12px rgba(15,27,45,0.05);
}
.rekap-anggaran-summary span {
  display: block;
  color: var(--text-3);
  font-size: 7.4px;
  font-weight: 900;
  line-height: 1.12;
  text-transform: uppercase;
}
.rekap-anggaran-summary strong {
  display: block;
  margin-top: 5px;
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.payment-history-table,
.realisasi-anggaran-table,
.pagu-anggaran-table,
.rab-anggaran-table,
.realisasi-ri-progress-table,
.rencana-anggaran-table {
  font-size: 11px;
}
.realisasi-anggaran-table {
  table-layout: fixed;
  min-width: 1558px;
  border-collapse: separate;
  border-spacing: 0;
}
.pagu-anggaran-table,
.rab-anggaran-table,
.realisasi-ri-progress-table,
.rencana-anggaran-table {
  table-layout: fixed;
  min-width: 980px;
}
.rab-anggaran-table {
  min-width: 1588px;
}
.pagu-anggaran-table {
  min-width: 1460px;
}
.pagu-anggaran-table th:nth-child(1),
.pagu-anggaran-table td:nth-child(1) { width: 54px; text-align: center; }
.pagu-anggaran-table th:nth-child(2),
.pagu-anggaran-table td:nth-child(2) { width: 136px; }
.pagu-anggaran-table th:nth-child(3),
.pagu-anggaran-table td:nth-child(3) { width: 220px; }
.pagu-anggaran-table th:nth-child(4),
.pagu-anggaran-table td:nth-child(4),
.pagu-anggaran-table th:nth-child(5),
.pagu-anggaran-table td:nth-child(5),
.pagu-anggaran-table th:nth-child(6),
.pagu-anggaran-table td:nth-child(6),
.pagu-anggaran-table th:nth-child(7),
.pagu-anggaran-table td:nth-child(7),
.pagu-anggaran-table th:nth-child(8),
.pagu-anggaran-table td:nth-child(8),
.pagu-anggaran-table th:nth-child(9),
.pagu-anggaran-table td:nth-child(9),
.pagu-anggaran-table th:nth-child(10),
.pagu-anggaran-table td:nth-child(10) {
  width: 136px;
  text-align: right;
  white-space: nowrap;
}
.pagu-anggaran-table th:nth-child(11),
.pagu-anggaran-table td:nth-child(11) { width: 112px; text-align: center; }
.realisasi-ri-progress-table {
  min-width: 1210px;
}
.rencana-anggaran-table {
  min-width: 1160px;
}
.rab-anggaran-table th:nth-child(1),
.rab-anggaran-table td:nth-child(1) { width: 54px; text-align: center; }
.rab-anggaran-table th:nth-child(2),
.rab-anggaran-table td:nth-child(2) { width: 58px; text-align: center; }
.rab-anggaran-table th:nth-child(3),
.rab-anggaran-table td:nth-child(3) { width: 136px; }
.rab-anggaran-table th:nth-child(4),
.rab-anggaran-table td:nth-child(4) { width: 260px; }
.rab-anggaran-table th:nth-child(5),
.rab-anggaran-table td:nth-child(5) { width: 146px; }
.rab-anggaran-table th:nth-child(6),
.rab-anggaran-table td:nth-child(6) { width: 90px; }
.rab-anggaran-table th:nth-child(7),
.rab-anggaran-table td:nth-child(7) { width: 136px; }
.rab-anggaran-table th:nth-child(8),
.rab-anggaran-table td:nth-child(8) { width: 92px; }
.rab-anggaran-table th:nth-child(9),
.rab-anggaran-table td:nth-child(9) { width: 142px; }
.rab-anggaran-table th:nth-child(10),
.rab-anggaran-table td:nth-child(10) { width: 210px; }
.rab-anggaran-table th:nth-child(11),
.rab-anggaran-table td:nth-child(11) { width: 128px; text-align: center; }
.rab-anggaran-table th:nth-child(12),
.rab-anggaran-table td:nth-child(12) { width: 128px; text-align: center; }
.realisasi-ri-progress-table th:nth-child(1),
.realisasi-ri-progress-table td:nth-child(1) {
  width: 132px;
  white-space: nowrap;
  text-align: right;
}
.realisasi-ri-progress-table th:nth-child(2),
.realisasi-ri-progress-table td:nth-child(2) { width: 112px; }
.realisasi-ri-progress-table th:nth-child(3),
.realisasi-ri-progress-table td:nth-child(3) { width: 340px; }
.realisasi-ri-progress-table th:nth-child(4),
.realisasi-ri-progress-table td:nth-child(4) { width: 126px; }
.realisasi-ri-progress-table th:nth-child(5),
.realisasi-ri-progress-table td:nth-child(5),
.realisasi-ri-progress-table th:nth-child(6),
.realisasi-ri-progress-table td:nth-child(6),
.realisasi-ri-progress-table th:nth-child(7),
.realisasi-ri-progress-table td:nth-child(7) { width: 134px; }
.realisasi-ri-progress-table th:nth-child(8),
.realisasi-ri-progress-table td:nth-child(8) {
  width: 80px;
  text-align: center;
}
.rencana-anggaran-table th:nth-child(1),
.rencana-anggaran-table td:nth-child(1) {
  width: 142px;
  white-space: nowrap;
  text-align: right;
}
.rencana-anggaran-table th:nth-child(2),
.rencana-anggaran-table td:nth-child(2) {
  width: 340px;
}
.rencana-anggaran-table td:nth-child(1) {
  color: var(--text-2);
  font-weight: 700;
}
.rencana-anggaran-table td:nth-child(2) {
  white-space: nowrap;
}
.realisasi-ri-progress-table td:nth-child(3).td-truncate,
.rencana-anggaran-table td:nth-child(2).td-truncate {
  max-width: none;
}
.rencana-anggaran-table th:nth-child(3),
.rencana-anggaran-table td:nth-child(3),
.rencana-anggaran-table th:nth-child(4),
.rencana-anggaran-table td:nth-child(4),
.rencana-anggaran-table th:nth-child(5),
.rencana-anggaran-table td:nth-child(5),
.rencana-anggaran-table th:nth-child(6),
.rencana-anggaran-table td:nth-child(6),
.rencana-anggaran-table th:nth-child(7),
.rencana-anggaran-table td:nth-child(7) {
  width: 136px;
  white-space: nowrap;
}
.realisasi-anggaran-table th:nth-child(1),
.realisasi-anggaran-table td:not([colspan]):nth-child(1) { width: 54px; }
.realisasi-anggaran-table th:nth-child(2),
.realisasi-anggaran-table td:not([colspan]):nth-child(2) { width: 136px; }
.realisasi-anggaran-table th:nth-child(3),
.realisasi-anggaran-table td:not([colspan]):nth-child(3) { width: 170px; }
.realisasi-anggaran-table th:nth-child(4),
.realisasi-anggaran-table td:not([colspan]):nth-child(4) { width: 240px; }
.realisasi-anggaran-table th:nth-child(5),
.realisasi-anggaran-table td:not([colspan]):nth-child(5) { width: 155px; }
.realisasi-anggaran-table th:nth-child(6),
.realisasi-anggaran-table td:not([colspan]):nth-child(6),
.realisasi-anggaran-table th:nth-child(7),
.realisasi-anggaran-table td:not([colspan]):nth-child(7),
.realisasi-anggaran-table th:nth-child(8),
.realisasi-anggaran-table td:not([colspan]):nth-child(8),
.realisasi-anggaran-table th:nth-child(9),
.realisasi-anggaran-table td:not([colspan]):nth-child(9) { width: 122px; }
.realisasi-anggaran-table th:nth-child(10),
.realisasi-anggaran-table td:not([colspan]):nth-child(10) { width: 170px; }
.realisasi-anggaran-table th:nth-child(11),
.realisasi-anggaran-table td:not([colspan]):nth-child(11) { width: 145px; }
.payment-history-table th,
.realisasi-anggaran-table th,
.pagu-anggaran-table th,
.rab-anggaran-table th,
.realisasi-ri-progress-table th,
.rencana-anggaran-table th {
  padding: 6px 8px;
  font-size: 9.5px;
  line-height: 1.12;
  text-align: center;
  vertical-align: middle;
}
#panelRealisasiAnggaran .realisasi-anggaran-table thead tr:first-child th {
  top: 0;
  z-index: 12;
  height: 34px;
}
#panelRealisasiAnggaran .realisasi-anggaran-table .table-formula-row th {
  top: 34px;
  z-index: 11;
  height: 24px;
  padding: 4px 6px;
  background: #0A4A86;
  color: rgba(255,255,255,0.86);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
  white-space: normal;
}
.realisasi-anggaran-table .table-formula-row th:nth-child(10),
.realisasi-anggaran-table .table-formula-row th:nth-child(11) {
  color: #FDE68A;
}
#panelRealisasiAnggaran .realisasi-anggaran-table th:nth-child(1),
#panelRealisasiAnggaran .realisasi-anggaran-table td:not([colspan]):nth-child(1) { left: 0; }
#panelRealisasiAnggaran .realisasi-anggaran-table th:nth-child(2),
#panelRealisasiAnggaran .realisasi-anggaran-table td:not([colspan]):nth-child(2) { left: 54px; }
#panelRealisasiAnggaran .realisasi-anggaran-table th:nth-child(3),
#panelRealisasiAnggaran .realisasi-anggaran-table td:not([colspan]):nth-child(3) { left: 190px; }
#panelRealisasiAnggaran .realisasi-anggaran-table th:nth-child(4),
#panelRealisasiAnggaran .realisasi-anggaran-table td:not([colspan]):nth-child(4) { left: 360px; }
#panelRealisasiAnggaran .realisasi-anggaran-table th:nth-child(-n+4),
#panelRealisasiAnggaran .realisasi-anggaran-table td:not([colspan]):nth-child(-n+4) {
  position: sticky;
}
#panelRealisasiAnggaran .realisasi-anggaran-table tbody td:not([colspan]):nth-child(-n+4) {
  z-index: 4;
  background: #fff;
}
#panelRealisasiAnggaran .realisasi-anggaran-table tbody tr:nth-child(even) td:not([colspan]):nth-child(-n+4) {
  background: #FAFCFF;
}
#panelRealisasiAnggaran .realisasi-anggaran-table tbody tr:hover td:not([colspan]):nth-child(-n+4) {
  background: #EEF4FD !important;
}
#panelRealisasiAnggaran .realisasi-anggaran-table thead tr:first-child th:nth-child(-n+4) {
  z-index: 14;
}
#panelRealisasiAnggaran .realisasi-anggaran-table .table-formula-row th:nth-child(-n+4) {
  z-index: 13;
}
#panelRealisasiAnggaran .realisasi-anggaran-table th:nth-child(4),
#panelRealisasiAnggaran .realisasi-anggaran-table td:not([colspan]):nth-child(4) {
  border-right: 2px solid rgba(0, 75, 135, 0.26);
  box-shadow: 8px 0 12px -12px rgba(15, 27, 45, 0.65);
}
#panelRealisasiAnggaran .realisasi-anggaran-table thead th:nth-child(4) {
  border-right-color: rgba(255, 255, 255, 0.46);
}
.payment-history-table td,
.realisasi-anggaran-table td,
.pagu-anggaran-table td,
.rab-anggaran-table td,
.realisasi-ri-progress-table td,
.rencana-anggaran-table td {
  padding: 5px 8px;
  font-size: 10.5px;
  line-height: 1.18;
  vertical-align: middle;
}
#panelRealisasiAnggaran .realisasi-anggaran-table td:not([colspan]) {
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.22;
}
#panelRealisasiAnggaran .realisasi-anggaran-table tbody td:not([colspan]):nth-child(1) {
  text-align: center;
  vertical-align: middle;
}
#panelRealisasiAnggaran .realisasi-anggaran-table tbody td:not([colspan]):nth-child(n+5):nth-child(-n+11) {
  text-align: right;
}
.payment-history-table .kode-file-tag,
.realisasi-anggaran-table .kode-file-tag {
  padding: 2px 6px;
  font-size: 9.5px;
  line-height: 1.15;
}
.payment-history-table {
  min-width: 1320px;
}
.payment-history-table td:nth-child(6),
.payment-history-table td:nth-child(7),
.payment-history-table td:nth-child(8) {
  text-align: right;
  white-space: nowrap;
}
.payment-history-table th:nth-child(10),
.payment-history-table td:nth-child(10) {
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  text-align: center;
  white-space: nowrap;
  padding-left: 4px;
  padding-right: 4px;
}
.payment-dpi-cell strong {
  display: block;
  line-height: 1.1;
}
.payment-history-table .table-actions-inline,
.realisasi-anggaran-table .table-actions-inline,
.pagu-anggaran-table .table-actions-inline,
.rab-anggaran-table .table-actions-inline,
.realisasi-ri-progress-table .table-actions-inline {
  gap: 4px;
  justify-content: center;
}
.payment-history-table .table-actions-inline {
  flex-wrap: nowrap;
}
.td-center {
  text-align: center;
}
.rab-ri-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.rab-ri-status--done {
  background: #DCFCE7;
  color: #166534;
}
.rab-ri-status--muted {
  background: #F1F5F9;
  color: var(--text-3);
}
.btn-rab-ri {
  min-height: 24px;
  padding: 4px 7px;
  white-space: nowrap;
}
.rab-check-head,
.rab-row-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rab-check-head {
  flex-direction: column;
  gap: 2px;
  font-size: 8px;
  line-height: 1;
}
.rab-check-head input,
.rab-row-check {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
}
.rab-row-check:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.rab-ri-status--pending {
  background: #EFF6FF;
  color: #1D4ED8;
}
.ri-inline-input {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text-1);
  font-size: 10px;
  line-height: 1.1;
}
.ri-inline-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(14,165,233,0.14);
  outline: none;
}
.ri-inline-input--number { text-align: right; }
.ri-draft-row td {
  background: #F8FBFF;
}
.rab-draft-row td {
  background: #F8FBFF;
}
.pagu-draft-row td {
  background: #F8FBFF;
}
.ri-empty-row td {
  background: #F8FAFC;
}
.btn-row-plus,
.btn-row-save,
.btn-row-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 7px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.btn-row-plus {
  width: 26px;
  height: 26px;
  border-color: rgba(14,165,233,0.28);
  background: #E0F2FE;
  color: #075985;
  font-size: 15px;
}
.btn-row-plus:hover {
  background: #BAE6FD;
  color: #0C4A6E;
}
.btn-row-save,
.btn-row-cancel {
  min-height: 24px;
  padding: 4px 7px;
  font-size: 9.5px;
}
.btn-row-save {
  background: var(--primary);
  color: #fff;
}
.btn-row-cancel {
  border-color: var(--border);
  background: #fff;
  color: var(--text-2);
}
.td-muted {
  color: var(--text-3);
  font-size: 10px;
}
.payment-history-table .btn-edit-kerma,
.payment-history-table .btn-hapus-kerma,
.realisasi-anggaran-table .btn-edit-kerma,
.realisasi-anggaran-table .btn-hapus-kerma {
  min-height: 24px;
  padding: 4px 7px;
  font-size: 10px;
  line-height: 1.1;
  white-space: nowrap;
}
.payment-history-table .btn-edit-kerma,
.payment-history-table .btn-hapus-kerma {
  min-height: 22px;
  padding: 3px 5px;
  font-size: 9.5px;
  margin-left: 0;
}
#panelUangMasuk .filter-panel { padding: 10px 14px; }
.payment-list-header {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  padding: 9px 12px;
}
.payment-search-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
  min-width: 0;
}
.payment-searchbar {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.payment-searchbar .filter-label {
  flex-shrink: 0;
  line-height: 18px;
  white-space: nowrap;
}
.payment-searchbar .filter-input {
  flex: 0 0 180px;
  width: 180px;
  padding: 6px 9px;
  font-size: 11.5px;
}
.payment-searchbar .btn-reset {
  padding: 6px 10px;
  font-size: 11px;
}
.payment-search-wrap .filter-info {
  margin-top: 0;
  text-align: right;
}
#panelRealisasiAnggaran .payment-search-wrap {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
#panelRealisasiAnggaran .rekap-version-toggle {
  flex: 0 0 auto;
}
#panelRealisasiAnggaran .payment-search-wrap .filter-info {
  flex-basis: 100%;
}
#panelImport { padding-top: 8px; }
.import-hint { font-size: 10.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 12px; }
.field-hint { font-size: 10.5px; color: var(--text-2); margin-top: 3px; }
.field-hint code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-family: monospace; font-size: 10px; color: var(--text-1); border: 1px solid var(--border); }

/* ─── File & Cicilan ──────────────────────────────────────────────────────── */
.td-file-cell { white-space: nowrap; }
.file-link { font-size: 11px; color: var(--primary); text-decoration: none; font-weight: 500; margin-right: 5px; }
.file-link:hover { text-decoration: underline; }
.seksi-pembayaran { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
.container-pembayaran { background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: var(--radius); padding: 16px; margin-top: 20px; margin-bottom: 16px; }
.pembayaran-header { font-size: 12px; font-weight: 700; color: var(--primary); margin-bottom: 5px; }
.pembayaran-desc { font-size: 11px; color: var(--text-2); margin-bottom: 12px; }
.daftar-cicilan { display: flex; flex-direction: column; gap: 7px; }
.cicilan-row { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; }
.cicilan-row .form-input { flex: 1; margin: 0; min-width: 0; }
.cicilan-row .cicilan-label-input { flex: 0 0 140px; font-weight: 600; }
.cicilan-row .cicilan-batas { flex: 0 0 150px; }
.btn-hapus-cicilan { background: none; border: none; color: var(--danger); font-size: 16px; cursor: pointer; padding: 2px 5px; border-radius: var(--radius-sm); line-height: 1; flex-shrink: 0; transition: var(--trans); }
.btn-hapus-cicilan:hover { background: var(--danger-bg); }
.strata-group { display: flex; gap: 16px; padding: 5px 0; }
.strata-opt { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-1); cursor: pointer; }
.strata-opt input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--primary); cursor: pointer; }
.strata-opt input[type="radio"] { width: 14px; height: 14px; accent-color: var(--primary); cursor: pointer; }
.daftar-addendum-list { display: flex; flex-direction: column; gap: 7px; min-height: 36px; }
.addendum-item { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.addendum-no { font-size: 11px; font-weight: 700; color: var(--text-1); min-width: 80px; }
.addendum-tgl { font-size: 10.5px; color: var(--text-2); margin-left: auto; white-space: nowrap; }
.mini-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px;
  border: 1px dashed var(--border-2);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  text-align: center;
}
.mini-state--loading { color: var(--primary); border-style: solid; }
.mini-state--error { color: var(--danger); background: var(--danger-bg); border-color: #FECACA; }

@media (max-width: 1100px) {
  .insight-grid, .form-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sisa-anggaran-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .neraca-detail-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .neraca-period-filter { grid-template-columns: minmax(190px, 1fr) repeat(2, minmax(120px, 150px)); }
  #sectionRealisasi .insight-grid { grid-template-columns: repeat(6, minmax(112px, 1fr)); }
  .exec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exec-grid--general { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .executive-filter-panel { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .executive-filter-panel--general { grid-template-columns: repeat(2, minmax(160px, 240px)); }
  .executive-filter-panel--finance { grid-template-columns: repeat(2, minmax(140px, 240px)); }
  .general-summary-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .general-period-filter { grid-column: auto; }
  .yearly-nominal-layout,
  .yearly-count-layout { grid-template-columns: 1fr; }
  .relationship-analytics-layout { grid-template-columns: 1fr; }
  .status-chart-layout { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); }
  .indicator-detail-body { grid-template-columns: 1fr; }
  .status-pie { width: 148px; height: 148px; }
  .status-pie-center { width: 82px; height: 82px; }
  .executive-layout, .executive-layout--secondary { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  body { height: auto; min-height: 100vh; overflow: auto; }
  .dashboard-container {
    min-height: 100vh;
    height: auto;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
  }
  .sidebar {
    width: 100%;
    max-height: none;
    overflow: visible;
  }
  .logo-area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px;
    text-align: left;
  }
  .logo-area .logo-itb { width: 38px; margin: 0; }
  .user-info-sidebar { padding: 0 14px 12px !important; }
  .navigation {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding: 8px 12px 12px;
  }
  .nav-category,
  .nav-subcategory { display: none; }
  .nav-item {
    flex: 0 0 auto;
    padding: 8px 10px;
    white-space: nowrap;
  }
  .nav-item--child { margin-left: 0; }
  .nav-item.active { padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.13); border-bottom: 2px solid var(--cyan); }
  .main-content { min-height: 70vh; }
  .view-section.active { min-height: 70vh; overflow: visible; }
  .top-header { flex-direction: column; align-items: flex-start; }
  .pimpinan-date-control { width: 100%; }
  .pimpinan-date-control .filter-input { width: 100%; }
  .executive-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .executive-filter-panel--general,
  .executive-filter-panel--finance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .general-summary-card { grid-template-columns: 1fr; width: 100%; }
  .general-period-filter { grid-column: auto; }
  .general-period-filter { grid-template-columns: 1fr; }
  .finance-statement-grid,
  .finance-statement-reconcile { grid-template-columns: 1fr; }
  .relationship-layout { grid-template-columns: 1fr; }
  .status-chart-layout { grid-template-columns: 1fr; }
  .status-pie-wrap { justify-content: flex-start; min-height: auto; }
  .finance-balance-card { width: min(100%, 520px); }
  .line-chart-shell { overflow-x: auto; }
  .line-chart-svg { min-width: 680px; }
  .form-grid { grid-template-columns: 1fr; }
  #panelUangMasuk,
  #panelRealisasiRiInvoice,
  #panelRencanaAnggaran,
  #panelRealisasiAnggaran { overflow: visible; }
  .rencana-income-control { grid-template-columns: 1fr; }
  .rencana-income-section-head,
  .rencana-income-section-head--with-filter {
    align-items: stretch;
    flex-direction: column;
  }
  .rencana-income-section-head--period-inline {
    align-items: center;
    flex-direction: row;
  }
  .rencana-income-section-head--period-inline .period-field--date-placeholder {
    flex: 0 1 154px;
  }
  .rencana-income-period { min-width: 0; }
  .rencana-income-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uang-masuk-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .uang-masuk-form-pane { align-self: stretch; }
  .uang-masuk-table-pane { overflow: visible; }
  #panelAlokasiKerma .uang-masuk-table-pane { overflow: hidden; }
  #panelAlokasiKerma .table-container--compact { overflow: auto; }
  #panelUangMasuk .payment-compact-grid,
  #panelRealisasiAnggaran .payment-compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-container, .table-container, .laporan-container { overflow: auto; }
  .cicilan-row { flex-wrap: wrap; }
  .cicilan-row .cicilan-label-input, .cicilan-row .cicilan-batas { flex: 1 1 160px; }
}

@media (max-width: 560px) {
  .dashboard-container { padding: 8px; }
  .top-header-text h1 { font-size: 18px; }
  .insight-grid, .form-flow { grid-template-columns: 1fr; }
  #sectionRealisasi .insight-grid { grid-template-columns: repeat(6, minmax(108px, 1fr)); }
  .sisa-anggaran-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; }
  .neraca-detail-panel.is-anchor-1::before,
  .neraca-detail-panel.is-anchor-3::before { left: calc(25% - 8px); }
  .neraca-detail-panel.is-anchor-2::before { left: calc(75% - 8px); }
  .neraca-detail-summary { grid-template-columns: 1fr; }
  .neraca-period-filter { grid-template-columns: 1fr; }
  #panelUangMasuk .payment-compact-grid,
  #panelRealisasiAnggaran .payment-compact-grid { grid-template-columns: 1fr; }
  .rencana-anggaran-toolbar {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }
  .rencana-anggaran-toolbar .filter-input,
  .rencana-anggaran-contract-value {
    width: 100%;
  }
  .rencana-income-summary,
  .rencana-income-period { grid-template-columns: 1fr; }
  .rencana-income-section-head--period-inline .period-field--date-placeholder {
    flex: 1 1 100%;
  }
  .rencana-income-detail-summary { grid-template-columns: 1fr; }
  .payment-search-wrap {
    align-items: stretch;
    width: 100%;
  }
  .payment-searchbar {
    flex-wrap: wrap;
    width: 100%;
  }
  .neraca-toolbar {
    align-items: stretch;
  }
  .neraca-toolbar-action {
    width: 100%;
  }
  .neraca-toolbar-action .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  .neraca-searchbar {
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
  }
  .neraca-searchbar .filter-input {
    flex: 1 1 160px;
    width: auto;
  }
  .payment-searchbar .filter-input {
    flex: 1 1 160px;
    width: auto;
  }
  .exec-grid { grid-template-columns: 1fr; }
  .exec-grid--general { grid-template-columns: 1fr; }
  .executive-filter-panel { grid-template-columns: 1fr; }
  .executive-filter-panel--general,
  .executive-filter-panel--finance { grid-template-columns: 1fr; }
  .general-period-filter { grid-template-columns: 1fr; }
  .finance-statement-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .finance-statement-row strong {
    text-align: left;
  }
  .finance-statement-title {
    align-items: flex-start;
  }
  .status-pie-wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
  .status-pie-legend { margin-left: 0; }
  .finance-balance-card { grid-template-columns: 1fr; width: 100%; }
  .exec-section-title div { align-items: flex-start; flex-direction: column; gap: 2px; }
  .panel-title { flex-direction: column; }
  .panel-metric { text-align: left; }
  .executive-note { align-items: flex-start; flex-direction: column; gap: 4px; }
  .cashflow-row { grid-template-columns: 1fr; gap: 6px; }
  .cashflow-value { text-align: left; }
  .exec-list-item { grid-template-columns: 1fr; }
  .exec-list-money { text-align: left; }
  .filter-panel, .form-container { padding: 14px; }
  .filter-row { gap: 8px; }
  .filter-group--action { width: 100%; }
  .filter-group--action .btn-reset,
  .filter-group--action .btn-secondary { width: 100%; justify-content: center; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .btn-primary,
  .form-actions .btn-secondary,
  .form-actions .btn-danger { justify-content: center; width: 100%; }
  .laporan-searchbar, .laporan-toolbar { align-items: stretch; flex-direction: column; }
}