/* DSO-Steadbyte - Glass Professional Theme (iOS-inspired) */

/* Search bar / filter row universal fix */
.si-search-bar, .so-search-bar, .stk-search-bar, .yoy-search-bar,
.bil-search-bar, .pipe-search-bar, .dt-search-bar, .apr-search-bar,
.bg-search-bar, .pf-search-bar, .inv-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.si-search-bar select, .so-search-bar select, .stk-search-bar select,
.yoy-search-bar select, .bil-search-bar select, .pipe-search-bar select,
.dt-search-bar select, .apr-search-bar select, .bg-search-bar select,
.pf-search-bar select, .inv-search-bar select {
  max-width: 160px;
  min-width: 100px;
}
.si-search-bar button, .so-search-bar button, .stk-search-bar button,
.yoy-search-bar button, .bil-search-bar button, .pipe-search-bar button,
.dt-search-bar button, .apr-search-bar button, .bg-search-bar button,
.pf-search-bar button, .inv-search-bar button {
  flex-shrink: 0;
  white-space: nowrap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@400;500;600;700;800&display=swap');

:root {
  /* Primary Colors - Blue Professional Theme */
  --primary: #3B82F6;
  --primary-light: #60A5FA;
  --primary-dark: #2563EB;
  --primary-50: #EFF6FF;
  --secondary: #8B5CF6;
  --secondary-light: #A78BFA;
  --accent: #B85C78;
  --accent-dark: #9A4A64;
  --accent-rgb: 184, 92, 120;
  
  /* Neutrals - Clean White/Blue Gray */
  --white: #FFFFFF;
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;
  
  /* Functional */
  --success: #10B981;
  --success-light: #D1FAE5;
  --success-dark: #059669;
  --error: #EF4444;
  --error-light: #FEE2E2;
  --error-dark: #DC2626;
  --warning: #F59E0B;
  --warning-light: #FEF3C7;
  --warning-dark: #D97706;
  --info: #3B82F6;
  --info-light: #DBEAFE;
  --info-dark: #2563EB;

  /* Glass surfaces */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-border-subtle: rgba(226, 232, 240, 0.65);
  --glass-blur: 20px;
  --glass-blur-strong: 28px;
  --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255,255,255,0.6) inset;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm: 0 2px 8px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow: 0 4px 16px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-md: 0 12px 28px -6px rgb(0 0 0 / 0.1), 0 4px 8px -4px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 20px 40px -8px rgb(0 0 0 / 0.12), 0 8px 12px -6px rgb(0 0 0 / 0.04);
  --shadow-xl: 0 28px 56px -12px rgb(0 0 0 / 0.18);
  
  /* Border Radius ΓÇö soft iOS-like */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;
  
  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --header-height: 64px;
}

/* i18n dual-language sub-text (CN mode) */
.i18n-sub {
  display: block;
  width: 100%;
  clear: both;
  flex: 0 0 100%;
  font-size: 0.72em;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.25;
  margin-top: 0.15rem;
  letter-spacing: 0;
}

/* Dual-language container adjustments */
.nav-item span, .sidebar-logo-text, .ov-card-title, .sb-info-label, .sb-info-sub,
.sb-info-metric-lbl, .profile-role, .header-subtitle, label, .dt-label,
.account-card-title, .account-modal-header h3, .dt-modal-header h3,
.stk-modal-header h3, .bil-summary-label, .pf-step-title {
  line-height: 1.4;
  display: block;
}

/* Add vertical breathing room for CN dual-language */
[lang="zh-Hans"] .nav-item,
[lang="zh-Hans"] .sidebar-logo-text,
[lang="zh-Hans"] .ov-card-title,
[lang="zh-Hans"] .sb-info-label {
  padding-bottom: 2px;
}

/* Flex container adjustment for dual-language items */
.nav-item {
  align-items: flex-start;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}
.nav-item span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* CN vertical stacking for bilingual text wrappers (text only, never icons) */
[lang="zh-Hans"] .nav-item span,
[lang="zh-Hans"] .sidebar-logo-text,
[lang="zh-Hans"] .ov-card-title,
[lang="zh-Hans"] .sb-info-label,
[lang="zh-Hans"] .sb-info-sub,
[lang="zh-Hans"] .sb-info-metric-lbl,
[lang="zh-Hans"] .profile-role,
[lang="zh-Hans"] .header-title,
[lang="zh-Hans"] .header-subtitle,
[lang="zh-Hans"] label,
[lang="zh-Hans"] .dt-label,
[lang="zh-Hans"] .account-card-title,
[lang="zh-Hans"] .account-modal-header h3,
[lang="zh-Hans"] .dt-modal-header h3,
[lang="zh-Hans"] .stk-modal-header h3,
[lang="zh-Hans"] .bil-summary-label,
[lang="zh-Hans"] .pf-step-title,
[lang="zh-Hans"] .gs-section-title,
[lang="zh-Hans"] .gs-card-title,
[lang="zh-Hans"] .gs-card-desc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  min-width: 0;
}
[lang="zh-Hans"] .header-title,
[lang="zh-Hans"] .header-subtitle {
  position: relative;
  max-width: 100%;
}

/* ===== PAGE TRANSITION ===== */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter {
  animation: pageEnter 380ms cubic-bezier(0.34, 1.06, 0.64, 1) both;
}

/* ===== CHART ANIMATIONS ===== */
@keyframes barGrow {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}
@keyframes lineDraw {
  from { stroke-dashoffset: var(--path-length, 1000); }
  to   { stroke-dashoffset: 0; }
}
@keyframes fadeScaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes numFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* SKU bar animation */
.ov-skubar-fill {
  transform-origin: left center;
  animation: barGrow 600ms cubic-bezier(0.34, 1.06, 0.64, 1) both;
}
.ov-skubar-fill:nth-child(1) { animation-delay: 0ms; }
.ov-skubar-fill:nth-child(2) { animation-delay: 60ms; }
.ov-skubar-fill:nth-child(3) { animation-delay: 120ms; }
.ov-skubar-fill:nth-child(4) { animation-delay: 180ms; }
.ov-skubar-fill:nth-child(5) { animation-delay: 240ms; }

/* Stat card stagger */
.ov-stat-card {
  animation: fadeScaleIn 400ms cubic-bezier(0.34, 1.06, 0.64, 1) both;
}
.ov-stat-card:nth-child(1) { animation-delay: 0ms; }
.ov-stat-card:nth-child(2) { animation-delay: 60ms; }
.ov-stat-card:nth-child(3) { animation-delay: 120ms; }
.ov-stat-card:nth-child(4) { animation-delay: 180ms; }

/* Chart tooltip */
.ov-chart-tooltip {
  position: fixed;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 120ms ease;
  line-height: 1.5;
}
.ov-chart-tooltip.visible { opacity: 1; }

/* ===== CHART & PAGE ENTRY ANIMATIONS ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleUp {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes fadeScaleIn2 {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes donutSpin {
  from { stroke-dashoffset: var(--dash-full); }
  to   { stroke-dashoffset: var(--dash-target); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Staggered children */
.page-enter > * { animation: fadeUp 400ms cubic-bezier(0.34, 1.06, 0.64, 1) both; }
.page-enter > *:nth-child(1) { animation-delay: 30ms; }
.page-enter > *:nth-child(2) { animation-delay: 70ms; }
.page-enter > *:nth-child(3) { animation-delay: 110ms; }
.page-enter > *:nth-child(4) { animation-delay: 150ms; }
.page-enter > *:nth-child(5) { animation-delay: 190ms; }
.page-enter > *:nth-child(6) { animation-delay: 230ms; }
.page-enter > *:nth-child(n+7) { animation-delay: 260ms; }

/* Bar chart grow from bottom */
.chart-bar {
  transform-origin: bottom;
  animation: scaleUp 550ms cubic-bezier(0.34, 1.06, 0.64, 1) both;
}
.chart-bar:nth-child(1) { animation-delay: 50ms; }
.chart-bar:nth-child(2) { animation-delay: 90ms; }
.chart-bar:nth-child(3) { animation-delay: 130ms; }
.chart-bar:nth-child(4) { animation-delay: 170ms; }
.chart-bar:nth-child(5) { animation-delay: 210ms; }
.chart-bar:nth-child(6) { animation-delay: 250ms; }
.chart-bar:nth-child(n+7) { animation-delay: 280ms; }

/* Stat card number countUp */
.ov-card-value {
  animation: countUp 500ms cubic-bezier(0.34, 1.06, 0.64, 1) both;
}

/* Chart tooltip (global) */
.chart-tooltip {
  position: fixed;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-sans);
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-md);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 150ms ease, transform 150ms cubic-bezier(0.34, 1.26, 0.64, 1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  max-width: 220px;
}
.chart-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
.chart-tooltip-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.15rem;
  white-space: nowrap;
}
.chart-tooltip-row:last-child { margin-bottom: 0; }
.chart-tooltip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chart-tooltip-row span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* Hover overlay cols */
.ov-hover-col { cursor: crosshair; }
.ov-hover-col:hover { fill: rgba(255,255,255,0.06); }

/* Sidebar info card enhanced */
.sb-info-card {
  padding: 0.875rem 0.75rem !important;
  animation: fadeUp 420ms cubic-bezier(0.34, 1.06, 0.64, 1) both;
}
.sb-info-sparkline { margin: 0.4rem 0 0.2rem; }
.sb-info-bar-track {
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 99px;
  margin: 0.4rem 0 0.2rem;
  overflow: hidden;
}
.sb-info-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform-origin: left;
  animation: scaleX-in 700ms cubic-bezier(0.34, 1.06, 0.64, 1) 200ms both;
}
@keyframes scaleX-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.sb-info-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.sb-info-metric {
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.45rem;
}
.sb-info-metric-val {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-800);
  line-height: 1.2;
}
.sb-info-metric-lbl {
  font-size: 0.58rem;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sb-info-sparkline-old {
  margin-top: 0.5rem;
}
.sb-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--gray-400);
}
.sb-info-badge {
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.1rem 0.4rem;
  border-radius: 99px;
  background: rgba(var(--accent-rgb),0.12);
  color: var(--accent);
}

/* Fonts ΓÇö Inter only, professional Regular/Medium/Semibold/Bold */
:root {
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-heading: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

:root {
  /* Existing visual fallback before a theme is selected */
  --accent: #B85C78; --secondary: #D99AAE; --accent-light: #FFF1F5; --secondary-light: #FCE7EF;
  --text-on-accent: #FFFFFF; --accent-rgb: 184, 92, 120; --secondary-rgb: 217, 154, 174;
  --primary: #B85C78; --primary-light: #D99AAE; --primary-dark: #8F425A; --primary-50: #FFF1F5;
  --bg-primary: #FBF7F5; --bg-secondary: #FFFCFB; --bg-tertiary: #F6ECEA;
  --surface-page: #FBF7F5; --surface-raised: #FFFCFB; --surface-muted: #F6ECEA; --surface-inverse: #34272C;
  --text-primary: #34272C; --text-secondary: #6F5961; --text-muted: #9B828A; --border-default: #E8D7D9; --border-subtle: #F1E5E4;
  --tooltip-bg: #34272C; --tooltip-text: #FFFCFB; --chart-grid: #E8D7D9; --chart-label: #6F5961; --chart-muted-series: #D4C0C5; --chart-track: #F1E5E4;
  --chart-series-1: #B85C78; --chart-series-2: #D99AAE; --chart-series-3: #C7869C; --chart-series-4: #A6765E; --chart-series-5: #8F425A; --chart-series-6: #E5BCC7;
  --glass-bg: rgba(255,252,251,.78); --glass-bg-strong: rgba(255,252,251,.92); --glass-border: rgba(255,255,255,.62); --glass-border-subtle: rgba(241,229,228,.84);
}

:root[data-theme="default"] {
  --accent: #B85C78; --secondary: #D99AAE; --accent-light: #FFF1F5; --secondary-light: #FCE7EF;
  --text-on-accent: #FFFFFF; --primary: #B85C78; --primary-light: #D99AAE; --primary-dark: #8F425A; --primary-50: #FFF1F5;
  --accent-rgb: 184, 92, 120; --secondary-rgb: 217, 154, 174; --bg-primary: #FBF7F5; --bg-secondary: #FFFCFB; --bg-tertiary: #F6ECEA;
  --surface-page: #FBF7F5; --surface-raised: #FFFCFB; --surface-muted: #F6ECEA; --surface-inverse: #34272C;
  --text-primary: #34272C; --text-secondary: #6F5961; --text-muted: #9B828A; --border-default: #E8D7D9; --border-subtle: #F1E5E4;
  --glass-bg: rgba(255,252,251,.78); --glass-bg-strong: rgba(255,252,251,.92); --glass-border: rgba(255,255,255,.62); --glass-border-subtle: rgba(241,229,228,.84);
  --tooltip-bg: #34272C; --tooltip-text: #FFFCFB; --chart-grid: #E8D7D9; --chart-label: #6F5961; --chart-muted-series: #D4C0C5; --chart-track: #F1E5E4;
  --chart-series-1: #B85C78; --chart-series-2: #D99AAE; --chart-series-3: #C7869C; --chart-series-4: #A6765E; --chart-series-5: #8F425A; --chart-series-6: #E5BCC7;
}
:root[data-theme="lilac"] {
  --accent: #8067A9; --secondary: #B59BCB; --accent-light: #F4EFFA; --secondary-light: #EEE7F5;
  --text-on-accent: #FFFFFF; --primary: #8067A9; --primary-light: #B59BCB; --primary-dark: #5F4C82; --primary-50: #F4EFFA;
  --accent-rgb: 128, 103, 169; --secondary-rgb: 181, 155, 203; --bg-primary: #F8F6FB; --bg-secondary: #FEFCFF; --bg-tertiary: #F0ECF5;
  --surface-page: #F8F6FB; --surface-raised: #FEFCFF; --surface-muted: #F0ECF5; --surface-inverse: #312A3B;
  --text-primary: #312A3B; --text-secondary: #685D75; --text-muted: #91869D; --border-default: #DDD4E7; --border-subtle: #EAE4F0;
  --glass-bg: rgba(254,252,255,.78); --glass-bg-strong: rgba(254,252,255,.92); --glass-border: rgba(255,255,255,.64); --glass-border-subtle: rgba(234,228,240,.84);
  --tooltip-bg: #312A3B; --tooltip-text: #FEFCFF; --chart-grid: #DDD4E7; --chart-label: #685D75; --chart-muted-series: #C9BED6; --chart-track: #EAE4F0;
  --chart-series-1: #8067A9; --chart-series-2: #B59BCB; --chart-series-3: #9F87BF; --chart-series-4: #6F87B5; --chart-series-5: #B385A6; --chart-series-6: #D1C0E1;
}
:root[data-theme="mint"] {
  --accent: #3D7C73; --secondary: #91B8A8; --accent-light: #EAF5F0; --secondary-light: #E1EFE8;
  --text-on-accent: #FFFFFF; --primary: #3D7C73; --primary-light: #91B8A8; --primary-dark: #2D5E57; --primary-50: #EAF5F0;
  --accent-rgb: 61, 124, 115; --secondary-rgb: 145, 184, 168; --bg-primary: #F5F9F6; --bg-secondary: #FCFEFC; --bg-tertiary: #EAF1EC;
  --surface-page: #F5F9F6; --surface-raised: #FCFEFC; --surface-muted: #EAF1EC; --surface-inverse: #263631;
  --text-primary: #263631; --text-secondary: #596C65; --text-muted: #81928B; --border-default: #D3E1DA; --border-subtle: #E3ECE7;
  --glass-bg: rgba(252,254,252,.78); --glass-bg-strong: rgba(252,254,252,.92); --glass-border: rgba(255,255,255,.62); --glass-border-subtle: rgba(227,236,231,.84);
  --tooltip-bg: #263631; --tooltip-text: #FCFEFC; --chart-grid: #D3E1DA; --chart-label: #596C65; --chart-muted-series: #B6C8C1; --chart-track: #E3ECE7;
  --chart-series-1: #3D7C73; --chart-series-2: #91B8A8; --chart-series-3: #5D968D; --chart-series-4: #A7A077; --chart-series-5: #2D5E57; --chart-series-6: #C0D6CC;
}
:root[data-theme="midnight"] {
  --accent: #D08AA3; --secondary: #7FA7B8; --accent-light: #3A2632; --secondary-light: #243946;
  --text-on-accent: #FFF6F8; --primary: #D08AA3; --primary-light: #E0A9BA; --primary-dark: #A4657D; --primary-50: #3A2632;
  --accent-rgb: 208, 138, 163; --secondary-rgb: 127, 167, 184; --bg-primary: #121820; --bg-secondary: #1A222C; --bg-tertiary: #222D38;
  --surface-page: #121820; --surface-raised: #1A222C; --surface-muted: #222D38; --surface-inverse: #F0E7EA;
  --text-primary: #F0E7EA; --text-secondary: #B8A9AF; --text-muted: #84777D; --border-default: #34404C; --border-subtle: #27323D;
  --glass-bg: rgba(26,34,44,.82); --glass-bg-strong: rgba(18,24,32,.94); --glass-border: rgba(255,255,255,.16); --glass-border-subtle: rgba(52,64,76,.58);
  --tooltip-bg: #F0E7EA; --tooltip-text: #121820; --chart-grid: #34404C; --chart-label: #B8A9AF; --chart-muted-series: #5B6872; --chart-track: #27323D;
  --chart-series-1: #D08AA3; --chart-series-2: #7FA7B8; --chart-series-3: #A58BA7; --chart-series-4: #B9A06E; --chart-series-5: #E0B8C7; --chart-series-6: #91C0D4;
  --white: #1A222C; --gray-50: #1A222C; --gray-100: #222D38; --gray-200: #27323D; --gray-300: #34404C; --gray-400: #6D7A84; --gray-500: #8B99A3; --gray-600: #B8A9AF; --gray-700: #D0C4C9; --gray-800: #E3DADD; --gray-900: #F0E7EA;
}
:root[data-theme="plum-dark"] {
  --accent: #C69AC4; --secondary: #9D789D; --accent-light: #3C263D; --secondary-light: #302135;
  --text-on-accent: #FFF7FF; --primary: #C69AC4; --primary-light: #D7B3D5; --primary-dark: #9C739A; --primary-50: #3C263D;
  --accent-rgb: 198, 154, 196; --secondary-rgb: 157, 120, 157; --bg-primary: #17131A; --bg-secondary: #221B25; --bg-tertiary: #2D2330;
  --surface-page: #17131A; --surface-raised: #221B25; --surface-muted: #2D2330; --surface-inverse: #F1E8F0;
  --text-primary: #F1E8F0; --text-secondary: #BBAABA; --text-muted: #887B89; --border-default: #443447; --border-subtle: #342838;
  --glass-bg: rgba(34,27,37,.84); --glass-bg-strong: rgba(23,19,26,.95); --glass-border: rgba(255,255,255,.15); --glass-border-subtle: rgba(68,52,71,.58);
  --tooltip-bg: #F1E8F0; --tooltip-text: #17131A; --chart-grid: #443447; --chart-label: #BBAABA; --chart-muted-series: #665769; --chart-track: #342838;
  --chart-series-1: #C69AC4; --chart-series-2: #9D789D; --chart-series-3: #D7B3D5; --chart-series-4: #B98AB7; --chart-series-5: #E1C5E0; --chart-series-6: #7C5F82;
  --white: #221B25; --gray-50: #221B25; --gray-100: #2D2330; --gray-200: #342838; --gray-300: #443447; --gray-400: #6E6070; --gray-500: #8D7E8E; --gray-600: #BBAABA; --gray-700: #D3C6D2; --gray-800: #E6DDE5; --gray-900: #F1E8F0;
}
:root[data-theme="forest-dark"] {
  --accent: #91BFA9; --secondary: #C5A66B; --accent-light: #203B32; --secondary-light: #3B3422;
  --text-on-accent: #F7FCF8; --primary: #91BFA9; --primary-light: #B4D2C2; --primary-dark: #6E9783; --primary-50: #203B32;
  --accent-rgb: 145, 191, 169; --secondary-rgb: 197, 166, 107; --bg-primary: #111A17; --bg-secondary: #19241F; --bg-tertiary: #223029;
  --surface-page: #111A17; --surface-raised: #19241F; --surface-muted: #223029; --surface-inverse: #E8EFEA;
  --text-primary: #E8EFEA; --text-secondary: #A9B9B0; --text-muted: #788A80; --border-default: #35463D; --border-subtle: #293830;
  --glass-bg: rgba(25,36,31,.84); --glass-bg-strong: rgba(17,26,23,.95); --glass-border: rgba(255,255,255,.15); --glass-border-subtle: rgba(53,70,61,.58);
  --tooltip-bg: #E8EFEA; --tooltip-text: #111A17; --chart-grid: #35463D; --chart-label: #A9B9B0; --chart-muted-series: #596C63; --chart-track: #293830;
  --chart-series-1: #91BFA9; --chart-series-2: #C5A66B; --chart-series-3: #B4D2C2; --chart-series-4: #6E9783; --chart-series-5: #D7C08F; --chart-series-6: #A2CBB9;
  --white: #19241F; --gray-50: #19241F; --gray-100: #223029; --gray-200: #293830; --gray-300: #35463D; --gray-400: #607068; --gray-500: #809188; --gray-600: #A9B9B0; --gray-700: #C5D0CA; --gray-800: #DDE5DF; --gray-900: #E8EFEA;
}
:root[data-theme="dark-blue"] {
  --accent: #5EADED; --secondary: #8BAAD4; --accent-light: #1E3A52; --secondary-light: #243447;
  --text-on-accent: #FFFFFF; --primary: #5EADED; --primary-light: #8FC4F2; --primary-dark: #3D8BC4; --primary-50: #1E3A52;
  --accent-rgb: 94, 173, 237; --secondary-rgb: 139, 170, 212; --bg-primary: #0D1419; --bg-secondary: #151D25; --bg-tertiary: #1D2731;
  --surface-page: #0D1419; --surface-raised: #151D25; --surface-muted: #1D2731; --surface-inverse: #E8EFF7;
  --text-primary: #E8EFF7; --text-secondary: #9BAAB5; --text-muted: #6B7B86; --border-default: #2D3B47; --border-subtle: #232E38;
  --glass-bg: rgba(21,29,37,.84); --glass-bg-strong: rgba(13,20,25,.95); --glass-border: rgba(255,255,255,.14); --glass-border-subtle: rgba(45,59,71,.58);
  --tooltip-bg: #E8EFF7; --tooltip-text: #0D1419; --chart-grid: #2D3B47; --chart-label: #9BAAB5; --chart-muted-series: #525F6A; --chart-track: #232E38;
  --chart-series-1: #5EADED; --chart-series-2: #8BAAD4; --chart-series-3: #6BB4E8; --chart-series-4: #7BA0C4; --chart-series-5: #A5C8EF; --chart-series-6: #4A9BD9;
  --white: #151D25; --gray-50: #151D25; --gray-100: #1D2731; --gray-200: #232E38; --gray-300: #2D3B47; --gray-400: #525F6A; --gray-500: #6B7B86; --gray-600: #9BAAB5; --gray-700: #C5D0D9; --gray-800: #DBE3E9; --gray-900: #E8EFF7;
}
:root[data-theme="dark-grey"] {
  --accent: #A0A8B0; --secondary: #7A828A; --accent-light: #2A2E32; --secondary-light: #232629;
  --text-on-accent: #FFFFFF; --primary: #A0A8B0; --primary-light: #C0C6CC; --primary-dark: #808890; --primary-50: #2A2E32;
  --accent-rgb: 160, 168, 176; --secondary-rgb: 122, 130, 138; --bg-primary: #131416; --bg-secondary: #1A1C1F; --bg-tertiary: #222528;
  --surface-page: #131416; --surface-raised: #1A1C1F; --surface-muted: #222528; --surface-inverse: #ECEEF0;
  --text-primary: #ECEEF0; --text-secondary: #9AA0A6; --text-muted: #6B7075; --border-default: #2E3236; --border-subtle: #242628;
  --glass-bg: rgba(26,28,31,.86); --glass-bg-strong: rgba(19,20,22,.95); --glass-border: rgba(255,255,255,.11); --glass-border-subtle: rgba(46,50,54,.58);
  --tooltip-bg: #ECEEF0; --tooltip-text: #131416; --chart-grid: #2E3236; --chart-label: #9AA0A6; --chart-muted-series: #52585C; --chart-track: #242628;
  --chart-series-1: #A0A8B0; --chart-series-2: #7A828A; --chart-series-3: #909498; --chart-series-4: #606468; --chart-series-5: #B8BCC0; --chart-series-6: #888D93;
  --white: #1A1C1F; --gray-50: #1A1C1F; --gray-100: #222528; --gray-200: #242628; --gray-300: #2E3236; --gray-400: #52585C; --gray-500: #6B7075; --gray-600: #9AA0A6; --gray-700: #C0C4C9; --gray-800: #D8DCDE; --gray-900: #ECEEF0;
}

body,
.main-content,
.page-content,
.top-header,
.sidebar,

.ov-card, .dt-card, .stk-card, .bil-card, .pf-card, .gs-card, .account-card, .bg-card, .yoy-card, .apr-card, .pipe-card,
.table-container, table,
input, select, textarea,
.modal-content,
.sb-info-card {
  color: var(--text-primary);
}
body,
.main-content,
.page-content {
  background: var(--surface-page);
}
.ov-card, .dt-card, .stk-card, .bil-card, .pf-card, .gs-card, .account-card, .bg-card, .yoy-card, .apr-card, .pipe-card,
.table-container,
.modal-content,
.sb-info-card {
  background: var(--surface-raised);
  border-color: var(--border-default);
}
.top-header,
.sidebar {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}
.sidebar,
.top-header,
.table-container,
.modal-content,
.sb-info-card {
  box-shadow: var(--shadow-sm);
}
.page-content,
.main-content {
  background-color: var(--surface-page);
}
input, select, textarea {
  background: var(--surface-raised);
  color: var(--text-primary);
  border-color: var(--border-default);
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}
th {
  background: var(--surface-muted);
  color: var(--text-secondary);
  border-color: var(--border-default);
}
td {
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.table-container,
.modal-content,
.sidebar,
.top-header,
.ov-card, .dt-card, .stk-card, .bil-card, .pf-card, .gs-card, .account-card, .bg-card, .yoy-card, .apr-card, .pipe-card,
.sb-info-card {
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
body { background: var(--surface-page); color: var(--text-primary); }
h1,h2,h3,h4,h5,h6 { color: var(--text-primary); }
.chart-tooltip, .ov-chart-tooltip { background: var(--tooltip-bg); color: var(--tooltip-text); }
.wallpaper { background: var(--surface-page); }
.wallpaper-blob-3, .db-blob-3 { background: var(--secondary-light); }
.chart-tooltip-label, .i18n-sub, .header-subtitle { color: var(--text-muted); }
/* theme-swatch: warna diambil dari inline style di HTML, tidak dioverride CSS */

:root[data-theme="midnight"] .profile-name,
:root[data-theme="midnight"] .sidebar-logo-text,
:root[data-theme="midnight"] .header-title,
:root[data-theme="midnight"] .top-header h1,
:root[data-theme="midnight"] .top-header h2,
:root[data-theme="midnight"] .top-header h3,
:root[data-theme="midnight"] .dt-card-title,
:root[data-theme="midnight"] .gs-card-title,
:root[data-theme="midnight"] .pf-step-title,
:root[data-theme="midnight"] .ov-card-title,
:root[data-theme="midnight"] .ov-stat-value,
:root[data-theme="midnight"] .page-content h1,
:root[data-theme="midnight"] .page-content h2,
:root[data-theme="midnight"] .page-content h3,
:root[data-theme="plum-dark"] .profile-name,
:root[data-theme="plum-dark"] .sidebar-logo-text,
:root[data-theme="plum-dark"] .header-title,
:root[data-theme="plum-dark"] .top-header h1,
:root[data-theme="plum-dark"] .top-header h2,
:root[data-theme="plum-dark"] .top-header h3,
:root[data-theme="plum-dark"] .dt-card-title,
:root[data-theme="plum-dark"] .gs-card-title,
:root[data-theme="plum-dark"] .pf-step-title,
:root[data-theme="plum-dark"] .ov-card-title,
:root[data-theme="plum-dark"] .ov-stat-value,
:root[data-theme="plum-dark"] .page-content h1,
:root[data-theme="plum-dark"] .page-content h2,
:root[data-theme="plum-dark"] .page-content h3,
:root[data-theme="forest-dark"] .profile-name,
:root[data-theme="forest-dark"] .sidebar-logo-text,
:root[data-theme="forest-dark"] .header-title,
:root[data-theme="forest-dark"] .top-header h1,
:root[data-theme="forest-dark"] .top-header h2,
:root[data-theme="forest-dark"] .top-header h3,
:root[data-theme="forest-dark"] .dt-card-title,
:root[data-theme="forest-dark"] .gs-card-title,
:root[data-theme="forest-dark"] .pf-step-title,
:root[data-theme="forest-dark"] .ov-card-title,
:root[data-theme="forest-dark"] .ov-stat-value,
:root[data-theme="forest-dark"] .page-content h1,
:root[data-theme="forest-dark"] .page-content h2,
:root[data-theme="forest-dark"] .page-content h3 {
  color: var(--text-primary) !important;
}

:root[data-theme="dark-blue"] .profile-name,
:root[data-theme="dark-blue"] .sidebar-logo-text,
:root[data-theme="dark-blue"] .header-title,
:root[data-theme="dark-blue"] .top-header h1,
:root[data-theme="dark-blue"] .top-header h2,
:root[data-theme="dark-blue"] .top-header h3,
:root[data-theme="dark-blue"] .dt-card-title,
:root[data-theme="dark-blue"] .gs-card-title,
:root[data-theme="dark-blue"] .pf-step-title,
:root[data-theme="dark-blue"] .ov-card-title,
:root[data-theme="dark-blue"] .ov-stat-value,
:root[data-theme="dark-blue"] .page-content h1,
:root[data-theme="dark-blue"] .page-content h2,
:root[data-theme="dark-blue"] .page-content h3,
:root[data-theme="dark-grey"] .profile-name,
:root[data-theme="dark-grey"] .sidebar-logo-text,
:root[data-theme="dark-grey"] .header-title,
:root[data-theme="dark-grey"] .top-header h1,
:root[data-theme="dark-grey"] .top-header h2,
:root[data-theme="dark-grey"] .top-header h3,
:root[data-theme="dark-grey"] .dt-card-title,
:root[data-theme="dark-grey"] .gs-card-title,
:root[data-theme="dark-grey"] .pf-step-title,
:root[data-theme="dark-grey"] .ov-card-title,
:root[data-theme="dark-grey"] .ov-stat-value,
:root[data-theme="dark-grey"] .page-content h1,
:root[data-theme="dark-grey"] .page-content h2,
:root[data-theme="dark-grey"] .page-content h3 {
  color: var(--text-primary) !important;
}

:root[data-theme="midnight"] .header-subtitle,
:root[data-theme="midnight"] .page-content p,
:root[data-theme="midnight"] .page-content label,
:root[data-theme="midnight"] .page-content th,
:root[data-theme="plum-dark"] .header-subtitle,
:root[data-theme="plum-dark"] .page-content p,
:root[data-theme="plum-dark"] .page-content label,
:root[data-theme="plum-dark"] .page-content th,
:root[data-theme="forest-dark"] .header-subtitle,
:root[data-theme="forest-dark"] .page-content p,
:root[data-theme="forest-dark"] .page-content label,
:root[data-theme="forest-dark"] .page-content th,
:root[data-theme="dark-blue"] .header-subtitle,
:root[data-theme="dark-blue"] .page-content p,
:root[data-theme="dark-blue"] .page-content label,
:root[data-theme="dark-blue"] .page-content th,
:root[data-theme="dark-grey"] .header-subtitle,
:root[data-theme="dark-grey"] .page-content p,
:root[data-theme="dark-grey"] .page-content label,
:root[data-theme="dark-grey"] .page-content th {
  color: var(--text-secondary) !important;
}

/* Page transitions */
.page-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.page-content.fade-out {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.page-content.fade-in {
  animation: pageFadeIn 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-item { transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease; }
.nav-item:active { transform: scale(0.98); }
.ov-card, .dt-card, .stk-card, .bil-card, .pf-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.ov-card:hover, .dt-card:hover, .stk-card:hover, .bil-card:hover, .pf-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-primary, .btn-secondary, .btn-icon { transition: all 0.2s ease; }
.modal { transition: opacity 0.2s ease; }
.modal-content { transition: transform 0.25s ease, opacity 0.25s ease; }
.modal.fade-out { opacity: 0; }
.modal.fade-out .modal-content { transform: scale(0.95); opacity: 0; }

/* Theme Picker */
.theme-picker {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 2px solid transparent;
  transition: all 0.25s ease;
}
.theme-option:hover {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-color: var(--glass-border);
}
.theme-option.active {
  border-color: var(--accent);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  box-shadow: var(--glass-shadow), 0 0 0 1px var(--accent);
}
.theme-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.theme-option.active .theme-swatch {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.35);
}
.theme-option span {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
  transition: color 0.2s ease;
}
.theme-option.active span {
  color: var(--accent);
  font-weight: 500;
}

/* Floating Refresh Button */
.floating-refresh-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), 0 4px 16px rgba(0,0,0,0.12);
  transition: all 0.3s ease;
  z-index: 9999;
  opacity: 0.85;
}
.floating-refresh-btn:hover {
  opacity: 1;
  transform: scale(1.08);
  box-shadow: var(--glass-shadow), 0 6px 24px rgba(0,0,0,0.18);
}
.floating-refresh-btn:active {
  transform: scale(0.96);
}
.floating-refresh-btn svg {
  width: 22px;
  height: 22px;
  color: var(--text-primary);
  transition: transform 0.3s ease;
}
.floating-refresh-btn:hover svg {
  transform: rotate(180deg);
}
.floating-refresh-btn.loading svg {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== Deployment Update Popup ===== */
.update-popup-overlay {
  position: fixed;
  bottom: 88px;
  right: 24px;
  z-index: 10000;
  animation: slideUpFade 0.3s ease;
}
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.update-popup-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow), 0 8px 32px rgba(0,0,0,0.15);
  padding: 1rem 1.25rem;
  max-width: 340px;
  min-width: 280px;
}
.update-popup-icon {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
}
.update-popup-body { flex: 1; }
.update-popup-title {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.update-popup-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.update-popup-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.update-popup-btn-later {
  flex: 1;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s;
}
.update-popup-btn-later:hover { background: var(--glass-bg); }
.update-popup-btn-refresh {
  flex: 2;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-md);
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
}
.update-popup-btn-refresh:hover { opacity: 0.88; }

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  height: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: hidden;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -0.011em;
  background: linear-gradient(160deg, var(--primary-50) 0%, var(--secondary-light) 42%, var(--accent-light) 100%);
  background-attachment: fixed;
  color: var(--gray-700);
  line-height: 1.5;
  height: 100%;
  height: 100dvh;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global box-sizing */
*, *::before, *::after { box-sizing: border-box; }

/* Typography — Inter Tight for headings, Inter for body */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}

b, strong, .font-bold {
  font-weight: 700;
  font-style: normal;
}

em, i, .font-italic {
  font-style: italic;
  font-weight: 400;
}

b em, em b, strong em, em strong, .font-bold-italic {
  font-weight: 700;
  font-style: italic;
}

/* ===== TYPOGRAPHY SYSTEM — SaaS Professional (Linear/Notion/Vercel style) ===== */

/* Base: font-family + font-feature untuk semua elemen */
body, input, textarea, select, button,
.btn, .card, .card-title, .card-desc,
.gs-card-title, .gs-card-desc,
.form-input, .login-btn, .auth-card-subtitle,
.nav-item span, .sidebar-logo-text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-synthesis: none;
  font-feature-settings: "tnum" 0, "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Angka/tabel: aktifkan tabular numbers */
table, td, th,
.stat-value, .panel-stat-value,
.ov-stat-value, [class*="-value"],
[class*="-amount"], [class*="-total"],
[class*="-count"], [class*="-pct"] {
  font-feature-settings: "tnum", "ss01";
}

/* Buttons & nav: tidak boleh font-normal (min 500 = medium) */
.btn, .gs-btn, .login-btn,
.auth-card-subtitle,
.si-btn, .so-btn, .stk-btn, .bg-btn,
.yoy-btn, .apr-btn, .bil-btn, .pipe-btn,
.pf-btn, .nav-item span, .strip-icon-btn {
  font-weight: 500;
}

/* Card titles, panel titles, section headings */
.card-title, .gs-card-title,
.si-card-title, .so-card-title, .stk-card-title,
.bg-card-title, .yoy-card-title, .apr-card-title,
.bil-card-title, .pipe-card-title, .pf-card-title,
.panel-card-title, .header-title,
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.25;
}

/* Labels: medium weight, muted color */
label,
.panel-stat-label, .stat-label,
[class*="-label"]:not(button):not(select) {
  font-weight: 500;
  color: var(--gray-500);
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Caption/meta/sub text */
.sidebar-logo-sub, .profile-role,
.header-subtitle, .i18n-sub,
[class*="-sub"]:not(input),
[class*="-meta"], [class*="-caption"] {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gray-500);
  line-height: 1.4;
}

/* Body text in panels/cards: gray-700 not pure black */
.page-content p,
.card-desc, .gs-card-desc,
.panel-stat-desc {
  color: var(--gray-700);
  font-weight: 400;
  line-height: 1.5;
}

/* Sidebar logo/profile name: stays white (override above) */
.sidebar-logo-text, .profile-name {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}

.sidebar-logo-sub, .profile-role {
  color: rgba(255, 255, 255, 0.65);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p { margin-bottom: 1rem; }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover { color: var(--primary-dark); }

/* Form Elements */
input, textarea, select {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-800);
  transition: all var(--transition);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

input::placeholder, textarea::placeholder {
  color: var(--gray-400);
}

label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: var(--gray-700);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3), inset 0 1px 0 rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-primary svg, .btn-primary svg * {
  stroke: #fff !important;
  fill: #fff !important;
}

.btn-primary:hover {
  background: var(--accent-dark);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
}

.btn-secondary:hover {
  background: var(--gray-200);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
}

.btn-outline:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.btn-ghost {
  background: transparent;
  color: var(--gray-600);
}

.btn-ghost:hover {
  background: var(--gray-100);
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

.btn-block {
  width: 100%;
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
}

/* Cards */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  overflow: hidden;
}

.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-800);
}

.card-body {
  padding: 1.25rem;
}

/* Tables */
.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
}

th {
  background: var(--gray-50);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
}

tr:hover td {
  background: var(--gray-50);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-full);
}

.badge-success {
  background: var(--success-light);
  color: var(--success-dark);
}

.badge-error {
  background: var(--error-light);
  color: var(--error-dark);
}

.badge-warning {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.badge-info {
  background: var(--info-light);
  color: var(--info-dark);
}

/* Alerts */
.alert {
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.alert-success {
  background: var(--success-light);
  color: var(--success-dark);
  border: 1px solid var(--success);
}

.alert-error {
  background: var(--error-light);
  color: var(--error-dark);
  border: 1px solid var(--error);
}

.alert-warning {
  background: var(--warning-light);
  color: var(--warning-dark);
  border: 1px solid var(--warning);
}

.alert-info {
  background: var(--info-light);
  color: var(--info-dark);
  border: 1px solid var(--info);
}

/* Layout - Dashboard */
.dashboard-layout {
  display: flex;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}

/* ===== SIDEBAR — inline flex, icon-only when collapsed ===== */
.sidebar {
  --sidebar-mini: 72px;
  width: var(--sidebar-width);
  height: 100%;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.18) 0%, rgba(var(--secondary-rgb), 0.14) 60%, rgba(var(--accent-rgb), 0.10) 100%);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

/* Collapsed: icon-only 72px */
.sidebar.sidebar-collapsed {
  width: var(--sidebar-mini);
}

/* Hide all non-icon elements when collapsed */
.sidebar.sidebar-collapsed .sidebar-logo-text,
.sidebar.sidebar-collapsed .sidebar-logo-sub,
.sidebar.sidebar-collapsed .sidebar-logo-text-wrap,
.sidebar.sidebar-collapsed .sidebar-profile,
.sidebar.sidebar-collapsed .profile-info,
.sidebar.sidebar-collapsed .sb-info-card,
.sidebar.sidebar-collapsed .sidebar-area-filter,
.sidebar.sidebar-collapsed .nav-item span,
.sidebar.sidebar-collapsed .sidebar-footer > *:not(.logout-btn),
.sidebar.sidebar-collapsed .sidebar-close-btn {
  display: none !important;
}

/* Center icons when collapsed */
.sidebar.sidebar-collapsed .sidebar-header,
.sidebar.sidebar-collapsed .sidebar-logo {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.sidebar.sidebar-collapsed .nav-item,
.sidebar.sidebar-collapsed .logout-btn {
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
  gap: 0;
}
.sidebar.sidebar-collapsed .nav-item svg,
.sidebar.sidebar-collapsed .logout-btn svg {
  margin: 0 auto;
}
.sidebar.sidebar-collapsed .logout-btn span { display: none !important; }

/* ===== SIDEBAR HEADER — logo atas, toggle bawah ===== */
.sidebar-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 1.25rem 1rem 0.75rem;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  flex-shrink: 0;
}

/* Toggle button baris sendiri, rata kiri */
.sidebar-toggle-btn {
  background: transparent;
  border: none;
  color: #111827;
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  transition: background 0.22s ease, transform 0.22s cubic-bezier(0.34,1.26,0.64,1);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}
.sidebar-toggle-btn:hover {
  background: rgba(0,0,0,0.08);
  transform: scale(1.1);
}
.sidebar-toggle-btn svg { stroke: #111827; }

.sidebar-profile {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Global Area Filter in sidebar */
.sidebar-area-filter {
  padding: 0.5rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.sidebar-area-filter-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 0.4rem;
}
.sidebar-area-filter-select {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border-subtle);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--gray-800);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sidebar-area-filter-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 184, 92, 120), 0.18);
}

/* Override white text/border in profile/footer */
.profile-name { color: var(--gray-800) !important; }
.profile-role { color: var(--gray-500) !important; }
.sidebar-logo-text { color: var(--gray-900) !important; }
.sidebar-logo-sub { color: var(--gray-500) !important; }
.nav-section-title { color: var(--gray-500) !important; }

.sidebar-header {
  padding: 1.25rem 1rem 0.75rem;
  border-bottom: 1px solid var(--gray-100);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
}

.sidebar-logo-text-wrap {
  overflow: hidden;
  min-width: 0;
  transition: opacity 300ms ease, width 300ms ease;
}

.sidebar-logo-icon {
  width: 44px;
  height: 44px;
  background: rgba(212, 129, 122, 0.12);
  border: 1.5px solid rgba(212, 129, 122, 0.4);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-logo-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--gray-900);
}

.sidebar-logo-sub {
  font-size: 0.7rem;
  color: var(--gray-500);
  line-height: 1.2;
}

.sidebar-nav {
  flex: 1;
  min-height: 0;
  padding: 0.75rem;
  overflow-y: auto;
}

.sb-info-card,
.sidebar-footer {
  flex-shrink: 0;
}

.nav-section {
  margin-bottom: 1.5rem;
}

.nav-section-title {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-400);
  padding: 0 0.75rem;
  margin-bottom: 0.5rem;
}

/* ===== NAV ITEMS — Glass box field + futuristic hover ===== */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  color: #111827 !important;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  /* Glass box field */
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
  margin-bottom: 2px;
  transition:
    background 260ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 260ms cubic-bezier(0.4, 0, 0.2, 1),
    color 260ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 260ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 220ms cubic-bezier(0.34, 1.26, 0.64, 1);
}

.nav-item:hover {
  background: linear-gradient(
    120deg,
    rgba(var(--accent-rgb), 0.22) 0%,
    rgba(var(--secondary-rgb), 0.16) 100%
  );
  border-color: rgba(var(--accent-rgb), 0.40);
  color: #fff;
  box-shadow:
    0 2px 12px rgba(var(--accent-rgb), 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  transform: translateX(2px);
}

.nav-item.active {
  background: linear-gradient(
    120deg,
    rgba(var(--accent-rgb), 0.30) 0%,
    rgba(var(--secondary-rgb), 0.22) 100%
  );
  border-color: rgba(var(--accent-rgb), 0.55);
  color: #fff;
  box-shadow:
    0 3px 16px rgba(var(--accent-rgb), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateX(3px);
}

.nav-item.active:hover {
  background: linear-gradient(
    120deg,
    rgba(var(--accent-rgb), 0.35) 0%,
    rgba(var(--secondary-rgb), 0.26) 100%
  );
  box-shadow:
    0 4px 20px rgba(var(--accent-rgb), 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

/* Active indicator bar on left edge */
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(to bottom, var(--primary), var(--secondary));
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
}

/* Need relative on nav-item for the ::before bar */
.nav-item {
  position: relative;
}

.nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent);
  transition: color 260ms ease, transform 220ms cubic-bezier(0.34, 1.26, 0.64, 1);
}

.nav-item:hover svg,
.nav-item.active svg {
  color: var(--accent-dark);
  transform: scale(1.1);
}

.nav-badge {
  margin-left: auto;
  background: var(--primary);
  color: var(--white);
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-weight: 500;
}

/* Main Content - otomatis responsif via flexbox, transition smooth */
.main-content {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  margin-left: 0;
  background: transparent;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: #8B3B52 transparent;
  transition: flex 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.main-content::-webkit-scrollbar { width: 6px; }
.main-content::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb { background: #8B3B52; border-radius: 10px; }
.main-content::-webkit-scrollbar-thumb:hover { background: #A84F6A; }

/* Fit-to-page content wrapper */
.page-content {
  padding: 1.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  background: transparent;
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: #8B3B52 transparent;
}
.page-content::-webkit-scrollbar { width: 6px; }
.page-content::-webkit-scrollbar-track { background: transparent; }
.page-content::-webkit-scrollbar-thumb { background: #8B3B52; border-radius: 10px; }
.page-content::-webkit-scrollbar-thumb:hover { background: #A84F6A; }

.page-content::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at top left, rgba(189, 119, 141, 0.12), transparent 40%),
    radial-gradient(circle at bottom right, rgba(93, 122, 174, 0.1), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.06), transparent 30%),
    linear-gradient(180deg, var(--surface-page) 0%, var(--surface-raised) 100%);
  pointer-events: none;
}

.page-content > * {
  max-width: 100%;
}

/* Top Header - glass morphism */
.top-header {
  height: var(--header-height);
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 var(--glass-border) inset, 0 4px 20px -6px rgba(var(--accent-rgb), 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-left > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.header-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}

.header-subtitle {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--gray-500);
}

[lang="zh-Hans"] .top-header {
  height: auto;
  min-height: 76px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Stat Cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

.stat-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: all var(--transition);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
}

.stat-icon.blue { background: var(--info-light); color: var(--primary); }
.stat-icon.green { background: var(--success-light); color: var(--success-dark); }
.stat-icon.purple { background: var(--secondary-light); color: var(--secondary-dark); }
.stat-icon.orange { background: var(--warning-light); color: var(--warning-dark); }

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-bottom: 0.25rem;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gray-900);
  line-height: 1.2;
}

.stat-change {
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

.stat-change.up { color: var(--success-dark); }
.stat-change.down { color: var(--error-dark); }

/* Charts Grid */
.charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
  .charts-grid { grid-template-columns: 1fr; }
}

.chart-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
}

.chart-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chart-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gray-800);
}

.chart-body {
  padding: 1.25rem;
  height: 280px;
}

/* User Menu */
.user-menu {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
}

.user-menu:hover {
  background: var(--gray-50);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--white);
}

.user-info {
  display: none;
}

@media (min-width: 768px) {
  .user-info { display: block; }
}

.user-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-800);
  line-height: 1.2;
}

.user-role {
  font-size: 0.75rem;
  color: var(--gray-500);
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-100);
  min-width: 180px;
  z-index: 200;
  overflow: hidden;
}

.dropdown-menu.open { display: block; animation: fadeIn 0.15s ease; }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--gray-700);
  cursor: pointer;
  transition: background var(--transition);
}

.dropdown-item:hover { background: var(--gray-50); }
.dropdown-item.danger { color: var(--error-dark); }
.dropdown-item.danger:hover { background: var(--error-light); }

/* Live Wallpaper - Subtle Animated Background */
.wallpaper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-light) 50%, #f0f4f8 100%);
}

.wallpaper-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: float 25s ease-in-out infinite;
}

.wallpaper-blob-1 {
  width: 600px;
  height: 600px;
  background: var(--accent-light);
  top: -200px;
  left: -150px;
  animation-delay: 0s;
}

.wallpaper-blob-2 {
  width: 500px;
  height: 500px;
  background: var(--secondary-light);
  top: 40%;
  right: -100px;
  animation-delay: -8s;
}

.wallpaper-blob-3 {
  width: 400px;
  height: 400px;
  background: #A7F3D0;
  bottom: -100px;
  left: 30%;
  animation-delay: -16s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

/* Dashboard subtle background blobs */
.db-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.10;
  animation: float 25s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.db-blob-1 {
  width: 600px;
  height: 600px;
  background: var(--accent-light);
  top: -100px;
  left: -50px;
  animation-delay: 0s;
}

.db-blob-2 {
  width: 500px;
  height: 500px;
  background: var(--secondary-light);
  top: 40%;
  right: -80px;
  animation-delay: -8s;
}

.db-blob-3 {
  width: 400px;
  height: 400px;
  background: #A7F3D0;
  bottom: -80px;
  left: 30%;
  animation-delay: -16s;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Spinner */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--gray-500);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  background: var(--gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--gray-600);
}

@media (max-width: 768px) {
  .menu-toggle { display: flex; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1021;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.18);
    transform: translateX(-100%);
    transition: transform 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .sidebar.sidebar-collapsed { width: var(--sidebar-width); }

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

  .main-content { margin-left: 0; }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1020;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 300ms ease, visibility 300ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .sidebar-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.drawer-open { overflow: hidden; }
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.25rem;
}

.pagination button {
  min-width: 32px;
  height: 32px;
  padding: 0 0.5rem;
  border: 1px solid var(--gray-200);
  background: var(--white);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition);
}

.pagination button:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--primary);
}

.pagination button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

/* Mobile modal full-screen */
@media (max-width: 640px) {
  .modal {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    inset: 0;
  }
}

.modal-header {
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 1.0625rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-400);
  cursor: pointer;
  line-height: 1;
}

.modal-close:hover { color: var(--gray-600); }

.modal-body {
  padding: 1.25rem;
}

.modal-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--gray-100);
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
}

/* Form Groups */
.form-group {
  margin-bottom: 1rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Checkbox Custom */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--gray-700);
}

.checkbox-wrapper input {
  width: auto;
  accent-color: var(--primary);
}

/* Grid Helpers */
.grid {
  display: grid;
}

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

@media (max-width: 1024px) {
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; }
}

/* Flex Helpers */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* Spacing */
.m-0 { margin: 0; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }

/* Text */
.text-center { text-align: center; }
.text-sm { font-size: 0.8125rem; }
.text-xs { font-size: 0.75rem; }
.text-gray { color: var(--gray-500); }
.text-success { color: var(--success-dark); }
.text-error { color: var(--error-dark); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Rounded */
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }

/* Role Badges */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.role-super_admin { background: var(--secondary-light); color: #5B21B6; }
.role-admin { background: #DBEAFE; color: #1E40AF; }
.role-sales_ho { background: #D1FAE5; color: #065F46; }
.role-team_leader { background: #FEF3C7; color: #92400E; }
.role-merchandiser { background: #FCE7F3; color: #9F1239; }

/* Status Dots */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-active { background: var(--success-dark); }
.status-inactive { background: var(--gray-400); }
.status-pending { background: var(--warning-dark); }

/* Responsive Visibility */
.hide-mobile { display: block; }
.show-mobile { display: none; }

@media (max-width: 768px) {
  .hide-mobile { display: none; }
  .show-mobile { display: block; }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* ========================================
   MODULE: DATA STOCK BARANG & INVENTORY (.stk-*, .inv-*)
   ======================================== */

/* Cards */
.stk-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}

.stk-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--glass-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.stk-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-800);
}

.stk-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

/* Search Bar */
.stk-search-bar {
  margin-bottom: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.stk-search-bar input[type="search"],
.stk-search-bar input[type="text"] {
  max-width: 300px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

/* Table */
.stk-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  margin-bottom: 1rem;
}

.stk-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}

.stk-table th {
  background: var(--gray-50);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
}

.stk-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.875rem;
  color: var(--gray-700);
}

.stk-table tr:hover td {
  background: var(--gray-50);
}

.stk-table tr:last-child td {
  border-bottom: none;
}

.stk-empty-row td {
  text-align: center;
  color: var(--gray-500);
  font-style: italic;
  padding: 2rem 1rem;
}

/* Buttons */
.stk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.stk-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.25);
}

.stk-btn-primary:hover {
  background: var(--accent-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.stk-btn-outline {
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
}

.stk-btn-outline:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.stk-btn-warn {
  background: var(--warning);
  color: var(--white);
}

.stk-btn-warn:hover {
  background: var(--warning-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.stk-action-btn {
  background: transparent;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 0.375rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.stk-action-btn:hover {
  background: var(--primary-50);
  color: var(--primary-dark);
}

.stk-action-btn svg {
  width: 16px;
  height: 16px;
}

/* Badges */
.stk-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
}

.stk-badge-ok {
  background: var(--success-light);
  color: var(--success-dark);
}

.stk-badge-locked {
  background: var(--error-light);
  color: var(--error-dark);
}

.stk-badge-pending {
  background: var(--warning-light);
  color: var(--warning-dark);
}

/* Pagination */
.stk-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1rem;
}

.stk-pagination button {
  min-width: 32px;
  height: 32px;
  padding: 0 0.5rem;
  border: 1px solid var(--gray-200);
  background: var(--white);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition);
}

.stk-pagination button:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--primary);
}

.stk-pagination button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.stk-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Modal */
.stk-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.stk-modal-overlay.open {
  display: flex;
  animation: fadeIn 0.15s ease;
}

.stk-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

.stk-modal-sm {
  max-width: 400px;
}

.stk-modal-header {
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stk-modal-header h3 {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--gray-900);
}

.stk-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-400);
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition);
}

.stk-modal-close:hover {
  color: var(--gray-600);
}

.stk-modal-body {
  padding: 1.25rem;
}

.stk-modal-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--gray-100);
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
}

/* Forms */
.stk-form-group {
  margin-bottom: 1rem;
}

.stk-form-group label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: var(--gray-700);
}

.stk-form-group input,
.stk-form-group select,
.stk-form-group textarea {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-800);
  transition: all var(--transition);
}

.stk-form-group input:focus,
.stk-form-group select:focus,
.stk-form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.stk-form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.stk-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .stk-form-row {
    grid-template-columns: 1fr;
  }
}

/* Toast */
.stk-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-200);
  padding: 1rem 1.25rem;
  min-width: 280px;
  max-width: 400px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  display: none;
  z-index: 2000;
  animation: slideInUp 0.3s ease;
}

.stk-toast.show {
  display: block;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Alert */
.stk-alert {
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.stk-alert-success {
  background: var(--success-light);
  color: var(--success-dark);
  border: 1px solid var(--success);
}

.stk-alert-error {
  background: var(--error-light);
  color: var(--error-dark);
  border: 1px solid var(--error);
}

.stk-alert-warning {
  background: var(--warning-light);
  color: var(--warning-dark);
  border: 1px solid var(--warning);
}

.stk-alert-info {
  background: var(--info-light);
  color: var(--info-dark);
  border: 1px solid var(--info);
}

/* Responsive */
@media (max-width: 768px) {
  .stk-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .stk-search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .stk-search-bar input {
    max-width: 100%;
  }

  .stk-toast {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    min-width: auto;
  }
}

/* ========================================
   MODULE: BUDGET 8% (.bg-*)
   ======================================== */

/* Cards */
.bg-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.bg-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bg-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-800);
}

.bg-card-body {
  padding: 1.25rem;
}

.bg-header-actions {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

/* Search Bar */
.bg-search-bar {
  margin-bottom: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.bg-search-bar select {
  max-width: 250px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

/* Summary Grid */
.bg-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.bg-summary-card {
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 1rem;
  border: 1px solid var(--gray-100);
}

.bg-summary-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-bottom: 0.5rem;
}

.bg-summary-value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.bg-summary-pct {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-600);
  margin-top: 0.375rem;
}

/* Progress Bar */
.bg-progress {
  width: 100%;
  height: 8px;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 0.375rem 0;
}

.bg-progress-bar {
  height: 100%;
  transition: width 0.3s ease, background 0.3s ease;
  border-radius: var(--radius-full);
}

.bg-progress-bar.bg-ok {
  background: linear-gradient(90deg, var(--success), var(--success-dark));
}

.bg-progress-bar.bg-warning {
  background: linear-gradient(90deg, var(--warning), var(--warning-dark));
}

.bg-progress-bar.bg-danger {
  background: linear-gradient(90deg, var(--error), var(--error-dark));
}

.bg-progress-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
}

/* Table */
.bg-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  margin-bottom: 1rem;
}

.bg-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}

.bg-table th {
  background: var(--gray-50);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
}

.bg-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.875rem;
  color: var(--gray-700);
}

.bg-table tr:hover td {
  background: var(--gray-50);
}

.bg-table tr:last-child td {
  border-bottom: none;
}

.bg-sub {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.125rem;
}

.bg-empty {
  text-align: center;
  padding: 2rem;
  color: var(--gray-500);
  font-style: italic;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

/* Buttons */
.bg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.bg-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.25);
}

.bg-btn-primary:hover {
  background: var(--accent-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.bg-btn-outline {
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
}

.bg-btn-outline:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

/* Badges */
.bg-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
}

.bg-badge-active {
  background: var(--success-light);
  color: var(--success-dark);
}

.bg-badge-expired {
  background: var(--error-light);
  color: var(--error-dark);
}

.bg-badge-kat {
  background: var(--primary-50);
  color: var(--primary-dark);
}

/* Modal */
.bg-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.bg-modal-overlay.open {
  display: flex;
  animation: fadeIn 0.15s ease;
}

.bg-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}

.bg-modal-header {
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bg-modal-header h3 {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--gray-900);
}

.bg-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-400);
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition);
}

.bg-modal-close:hover {
  color: var(--gray-600);
}

.bg-modal-body {
  padding: 1.25rem;
}

.bg-modal-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--gray-100);
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
}

/* Forms */
.bg-form-group {
  margin-bottom: 1rem;
}

.bg-form-group label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: var(--gray-700);
}

.bg-form-group input,
.bg-form-group select,
.bg-form-group textarea {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-800);
  transition: all var(--transition);
}

.bg-form-group input:focus,
.bg-form-group select:focus,
.bg-form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.bg-form-group textarea {
  min-height: 60px;
  resize: vertical;
}

.bg-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.bg-input-with-btn {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.bg-input-with-btn input {
  flex: 1;
}

.bg-input-with-btn .bg-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.bg-hint {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--gray-500);
  font-family: var(--font-sans);
}

.bg-hint-loading {
  color: var(--primary);
}

.bg-warning-box {
  background: var(--warning-light);
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  padding: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.bg-warning-text {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--warning-dark);
  font-weight: 500;
}

/* Toast */
.bg-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-200);
  padding: 1rem 1.25rem;
  min-width: 280px;
  max-width: 400px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  display: none;
  z-index: 2000;
  animation: slideInUp 0.3s ease;
}

.bg-toast.show {
  display: block;
}

.bg-toast-error {
  background: var(--error-light);
  border-color: var(--error);
  color: var(--error-dark);
}

.bg-toast-success {
  background: var(--success-light);
  border-color: var(--success);
  color: var(--success-dark);
}

/* Alert */
.bg-alert {
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.bg-alert-error {
  background: var(--error-light);
  color: var(--error-dark);
  border: 1px solid var(--error);
}

/* Responsive */
@media (max-width: 768px) {
  .bg-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .bg-search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .bg-search-bar select {
    max-width: 100%;
  }

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

  .bg-input-with-btn {
    flex-direction: column;
    align-items: stretch;
  }

  .bg-toast {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    min-width: auto;
  }

  .bg-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   MODULE: YOY COMPARISON (.yoy-*)
   ======================================== */

.yoy-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.yoy-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--glass-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.yoy-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-800);
}

.yoy-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.yoy-filter-bar {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.yoy-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.yoy-filter-group label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-500);
}

.yoy-filter-group select {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  min-width: 140px;
  color: var(--gray-700);
}

.yoy-filter-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.yoy-filter-group select:disabled {
  background: var(--gray-100);
  color: var(--gray-500);
  cursor: not-allowed;
}

.yoy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}

.yoy-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.yoy-btn-primary:hover {
  background: var(--primary-dark);
}

.yoy-loading {
  text-align: center;
  padding: 2rem;
  color: var(--gray-500);
  font-family: var(--font-sans);
}

.yoy-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.yoy-summary-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  padding: 1rem;
  border: 1px solid var(--glass-border);
  transition: all 0.2s ease;
}

.yoy-summary-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.yoy-summary-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-bottom: 0.5rem;
}

.yoy-summary-value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gray-900);
}

.yoy-summary-value.yoy-muted {
  color: var(--gray-400);
}

.yoy-up {
  color: var(--success-dark);
  font-weight: 500;
}

.yoy-down {
  color: var(--error-dark);
  font-weight: 500;
}

.yoy-na {
  color: var(--gray-400);
  font-style: italic;
}

.yoy-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.yoy-chart-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  overflow: hidden;
}

.yoy-chart-title {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 0.75rem;
}

.yoy-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border-subtle);
  background: var(--glass-bg);
}

.yoy-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}

.yoy-table th {
  background: var(--gray-50);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
}

.yoy-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.875rem;
  color: var(--gray-700);
}

.yoy-table tr:hover td {
  background: var(--gray-50);
}

.yoy-table tr:last-child td {
  border-bottom: none;
}

.yoy-empty {
  text-align: center;
  padding: 2rem;
  color: var(--gray-500);
  font-style: italic;
}

.yoy-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-full);
}

.yoy-badge-ok {
  background: var(--success-light);
  color: var(--success-dark);
}

.yoy-badge-miss {
  background: var(--error-light);
  color: var(--error-dark);
}

.yoy-alert {
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.yoy-alert-error {
  background: var(--error-light);
  color: var(--error-dark);
  border: 1px solid var(--error);
}

@media (max-width: 768px) {
  .yoy-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .yoy-filter-group select {
    width: 100%;
    min-width: auto;
  }

  .yoy-charts-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   YOY COMPARISON v2 (redesign)
   ======================================== */

.yoy-container {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Strategic Insights Row */
.panel-stat-grid.yoy-insights-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem;
  margin-bottom: 0;
}

.yoy-insight-card {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  padding: 1.125rem 1.25rem;
  box-shadow: var(--glass-shadow);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.yoy-insight-card::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.1;
  pointer-events: none;
}

.yoy-insight-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.yoy-insight-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.yoy-insight-label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-500);
}

.yoy-insight-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.yoy-insight-icon.primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
.yoy-insight-icon.success { background: linear-gradient(135deg, var(--success), var(--success-dark)); color: #fff; }
.yoy-insight-icon.warning { background: linear-gradient(135deg, var(--warning), var(--warning-dark)); color: #fff; }
.yoy-insight-icon.accent  { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; }

.yoy-insight-icon svg { width: 16px; height: 16px; }

.yoy-insight-value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gray-900);
  line-height: 1.15;
  margin-bottom: 0.375rem;
  word-break: break-word;
}

.yoy-insight-sub {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-500);
  flex-wrap: wrap;
}

.yoy-insight-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}

.yoy-insight-trend.up { background: var(--success-light); color: var(--success-dark); }
.yoy-insight-trend.down { background: var(--error-light); color: var(--error-dark); }

.yoy-insight-area-name {
  font-weight: 500;
  color: var(--gray-700);
}

/* Charts rows */
.yoy-charts-row-1,
.yoy-charts-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
  margin-bottom: 0;
}

.yoy-charts-row-1 .panel-chart-wrap,
.yoy-charts-row-2 .panel-chart-wrap {
  margin-bottom: 0;
  min-width: 0;
}

/* Waterfall chart */
.yoy-waterfall {
  width: 100%;
  min-height: 240px;
}

.yoy-waterfall text {
  font-family: var(--font-sans);
}

.yoy-waterfall-bar {
  transition: opacity 0.2s ease;
}

.yoy-waterfall-bar:hover {
  opacity: 0.85;
}

.yoy-waterfall-total {
  stroke: var(--gray-300);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  fill: none;
}

/* Radar chart */
.yoy-radar {
  width: 100%;
  min-height: 240px;
}

.yoy-radar-grid-poly {
  fill: none;
  stroke: var(--gray-200);
  stroke-width: 1;
}

.yoy-radar-axis {
  stroke: var(--gray-200);
  stroke-width: 1;
}

.yoy-radar-area {
  fill: var(--primary);
  fill-opacity: 0.22;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linejoin: round;
}

.yoy-radar-point {
  fill: var(--primary);
  stroke: #fff;
  stroke-width: 1.5;
}

.yoy-radar-label {
  font-size: 10.5px;
  fill: var(--gray-600);
}

/* Comparison metrics table */
.panel-table-wrap.yoy-metrics-table-wrap {
  overflow: hidden;
}

.yoy-metrics-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
}

.yoy-metrics-table thead tr {
  background: rgba(241, 245, 249, 0.6);
}

.yoy-metrics-table th {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-500);
  padding: 0.6875rem 1rem;
  text-align: right;
  border-bottom: 1.5px solid var(--gray-200);
  white-space: nowrap;
}

.yoy-metrics-table th:first-child {
  text-align: left;
}

.yoy-metrics-table td {
  padding: 0.625rem 1rem;
  text-align: right;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: middle;
  white-space: nowrap;
}

.yoy-metrics-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--gray-800);
}

.yoy-metrics-table tbody tr:last-child td {
  border-bottom: none;
}

.yoy-metrics-table tbody tr.yoy-metrics-total td {
  background: var(--gray-50);
  font-weight: 500;
  color: var(--gray-900);
  border-top: 1.5px solid var(--gray-200);
}

.yoy-metric-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}

.yoy-metric-delta-positive {
  background: var(--success-light);
  color: var(--success-dark);
}

.yoy-metric-delta-negative {
  background: var(--error-light);
  color: var(--error-dark);
}

.yoy-metric-delta-neutral {
  background: var(--gray-100);
  color: var(--gray-500);
}

/* Variance analysis bars */
.yoy-variance-bars {
  width: 100%;
  min-height: 200px;
}

.yoy-variance-bars text {
  font-family: var(--font-sans);
}

.yoy-variance-bar-positive {
  fill: var(--success);
}

.yoy-variance-bar-negative {
  fill: var(--error);
}

.yoy-variance-track {
  fill: var(--gray-100);
}

.yoy-variance-bar-positive:hover { fill: var(--success-dark); }
.yoy-variance-bar-negative:hover { fill: var(--error-dark); }

.yoy-variance-zero {
  stroke: var(--gray-300);
  stroke-width: 1;
}

/* Responsive for YOY v2 */
@media (max-width: 1024px) {
  .panel-stat-grid.yoy-insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .yoy-charts-row-1,
  .yoy-charts-row-2 {
    grid-template-columns: 1fr;
  }

  .panel-stat-grid.yoy-insights-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   MODULE: APPROVAL (.apr-*)
   ======================================== */

.apr-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}

.apr-tab-btn {
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--transition);
}

.apr-tab-btn:hover {
  color: var(--gray-700);
}

.apr-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.apr-panel {
  display: none;
}

.apr-panel.active {
  display: block;
}

.apr-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.apr-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.apr-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-800);
}

.apr-card-body {
  padding: 1.25rem;
}

.apr-search-bar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.apr-search-bar select {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  min-width: 160px;
}

.apr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}

.apr-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.25);
}

.apr-btn-primary:hover {
  background: var(--accent-dark);
}

.apr-btn-icon {
  background: transparent;
  border: none;
  padding: 0.375rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  transition: all var(--transition);
}

.apr-btn-icon:hover {
  background: var(--gray-100);
}

.apr-btn-approve {
  color: var(--success);
}

.apr-btn-approve:hover {
  background: var(--success-light);
}

.apr-btn-reject {
  color: var(--error);
}

.apr-btn-reject:hover {
  background: var(--error-light);
}

.apr-btn-delete {
  color: var(--gray-500);
}

.apr-btn-delete:hover {
  color: var(--error);
  background: var(--error-light);
}

.apr-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
}

.apr-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}

.apr-table th {
  background: var(--gray-50);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
}

.apr-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.875rem;
  color: var(--gray-700);
}

.apr-table tr:hover td {
  background: var(--gray-50);
}

.apr-table tr:last-child td {
  border-bottom: none;
}

.apr-empty-row td {
  text-align: center;
  color: var(--gray-500);
  font-style: italic;
  padding: 2rem 1rem;
}

.apr-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-full);
}

.apr-badge-pending {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.apr-badge-ok {
  background: var(--success-light);
  color: var(--success-dark);
}

.apr-badge-rejected,
.apr-badge-reject {
  background: var(--error-light);
  color: var(--error-dark);
}

.apr-badge-secondary {
  background: var(--gray-100);
  color: var(--gray-600);
}

.apr-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}

.apr-modal.open {
  display: flex;
  animation: fadeIn 0.15s ease;
}

.apr-modal-content {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

.apr-modal-header {
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.apr-modal-title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--gray-900);
}

.apr-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-400);
  cursor: pointer;
  line-height: 1;
}

.apr-modal-close:hover {
  color: var(--gray-600);
}

.apr-modal-content form {
  padding: 1.25rem;
}

.apr-form-group {
  margin-bottom: 1rem;
}

.apr-form-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: var(--gray-700);
}

.apr-form-select,
.apr-form-input,
.apr-form-textarea {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-800);
}

.apr-form-select:focus,
.apr-form-input:focus,
.apr-form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.apr-form-textarea {
  min-height: 80px;
  resize: vertical;
}

.apr-form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  cursor: pointer;
}

.apr-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-200);
  padding: 1rem 1.25rem;
  min-width: 280px;
  max-width: 400px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  display: none;
  z-index: 2000;
}

.apr-toast.show {
  display: block;
  animation: slideInUp 0.3s ease;
}

.apr-toast.error {
  background: var(--error-light);
  border-color: var(--error);
  color: var(--error-dark);
}

@media (max-width: 768px) {
  .apr-tabs {
    overflow-x: auto;
  }

  .apr-search-bar {
    flex-direction: column;
  }

  .apr-search-bar select {
    width: 100%;
  }

  .apr-modal-content {
    max-width: 100%;
    margin: 0.5rem;
  }
}

/* ========================================
   MODULE: BILLING (.bil-*)
   ======================================== */

/* Cards */
.bil-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.bil-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--glass-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bil-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-800);
}

.bil-card-body {
  padding: 1.25rem;
}

/* Summary Grid */
.bil-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.bil-summary-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  padding: 1rem;
  border: 1px solid var(--glass-border);
}

.bil-summary-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-bottom: 0.5rem;
}

.bil-summary-value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gray-900);
}

/* Filter Bar */
.bil-filter-bar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.bil-input,
.bil-select {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-800);
}

.bil-input:focus,
.bil-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

/* Table */
.bil-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  margin-bottom: 1rem;
}

.bil-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}

.bil-table th {
  background: var(--gray-50);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
}

.bil-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.875rem;
  color: var(--gray-700);
}

.bil-table tr:hover td {
  background: var(--gray-50);
}

.bil-empty-row td {
  text-align: center;
  color: var(--gray-500);
  font-style: italic;
  padding: 2rem 1rem;
}

/* Buttons */
.bil-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.bil-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.25);
}

.bil-btn-primary:hover {
  background: var(--accent-dark);
}

.bil-btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
}

.bil-btn-secondary:hover {
  background: var(--gray-200);
}

.bil-btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

/* Badges */
.bil-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-full);
}

.bil-badge-success {
  background: var(--success-light);
  color: var(--success-dark);
}

.bil-badge-warning {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.bil-badge-error {
  background: var(--error-light);
  color: var(--error-dark);
}

.bil-badge-secondary {
  background: var(--gray-100);
  color: var(--gray-600);
}

/* Modal Overlay - CRITICAL for overlay display */
.bil-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.bil-modal.open {
  display: flex;
  animation: fadeIn 0.15s ease;
}

.bil-modal-content {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}

.bil-modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bil-modal-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--gray-900);
}

.bil-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-400);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.bil-modal-close:hover {
  color: var(--gray-600);
}

.bil-modal-body {
  padding: 1.5rem;
}

.bil-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-100);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  background: var(--gray-50);
}

/* Forms */
.bil-form-group {
  margin-bottom: 1.25rem;
}

.bil-form-group:last-child {
  margin-bottom: 0;
}

.bil-form-group label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--gray-700);
}

.bil-input,
.bil-select {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-800);
  transition: all var(--transition);
}

.bil-input:focus,
.bil-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

/* ========================================
   MODULE: PIPELINE (.pipe-*)
   ======================================== */

/* Cards */
.pipe-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.pipe-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--glass-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pipe-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-800);
}

.pipe-card-body {
  padding: 1.25rem;
}

/* Summary Row - fill full width evenly */
.pipe-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.pipe-summary-item {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  border: 1px solid var(--glass-border);
  min-width: 0;
  flex: 1;
  transition: all 0.2s ease;
}

.pipe-summary-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.pipe-summary-label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-bottom: 0.25rem;
}

.pipe-summary-count {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--gray-900);
}

.pipe-summary-value {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-600);
  margin-top: 0.125rem;
}

/* Kanban Board - CRITICAL: Horizontal columns, fill full width */
.pipe-kanban {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  width: 100%;
}

.pipe-column {
  flex: 1 1 0;
  min-width: 200px;
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  max-height: 520px;
}

.pipe-column-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.pipe-column-title {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-700);
}

.pipe-column-count {
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
}

.pipe-column-body {
  padding: 0.75rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Kanban Card Item */
.pipe-card-item {
  background: var(--white);
  border-radius: var(--radius);
  padding: 0.75rem;
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: all var(--transition);
}

.pipe-card-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.pipe-card-item-title {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-800);
  margin-bottom: 0.25rem;
}

.pipe-card-item-meta {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--gray-500);
}

.pipe-card-item-value {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary);
  margin: 0.375rem 0;
}

.pipe-card-item-pic {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--gray-600);
}

/* Move Select */
.pipe-move-select {
  width: 100%;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-700);
}

/* Buttons */
.pipe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.pipe-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.25);
}

.pipe-btn-primary:hover {
  background: var(--accent-dark);
}

.pipe-btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
}

.pipe-btn-secondary:hover {
  background: var(--gray-200);
}

/* Modal */
.pipe-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}

.pipe-modal.open {
  display: flex;
  animation: fadeIn 0.15s ease;
}

.pipe-modal-content {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.pipe-modal-content form {
  padding: 1.25rem;
}

.pipe-modal-header {
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pipe-modal-title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--gray-900);
}

.pipe-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-400);
  cursor: pointer;
  line-height: 1;
}

.pipe-modal-close:hover {
  color: var(--gray-600);
}

.pipe-modal-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--gray-100);
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
}

/* Forms */
.pipe-form-group {
  margin-bottom: 1rem;
}

.pipe-form-group label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: var(--gray-700);
}

.pipe-input {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-800);
  transition: all var(--transition);
}

.pipe-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

/* Responsive */
@media (max-width: 768px) {
  .bil-card-header,
  .pipe-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .bil-filter-bar,
  .pipe-summary-row {
    flex-direction: column;
    align-items: stretch;
  }

  .bil-modal-content,
  .pipe-modal-content {
    max-width: 100%;
    margin: 0.5rem;
  }

  .pipe-column {
    flex: 0 0 280px;
    min-width: 280px;
  }
}

/* ========================================
   PROCESS FLOW (.pf-*)
   ======================================== */

/* --- Header --- */
.pf-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1.5px solid var(--gray-100);
}
.pf-header-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 0.3rem;
}
.pf-header-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}
.pf-header-sub {
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* --- Flow List --- */
.pf-flow-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.pf-flow-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--gray-400);
  font-size: 0.9rem;
  background: var(--gray-50);
  border-radius: var(--radius-xl);
  border: 1.5px dashed var(--gray-200);
}

/* --- Flow Card --- */
.pf-flow-card {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
.pf-flow-card:hover { box-shadow: var(--shadow-md); }
.pf-flow-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  flex-wrap: wrap;
}
.pf-flow-meta { flex: 1; min-width: 0; }
.pf-flow-title {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--gray-900);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-flow-owner {
  font-size: 0.78rem;
  color: var(--gray-500);
}
.pf-flow-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.pf-flow-card-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-shrink: 0;
}
.pf-flow-card-body {
  padding: 1rem 1.25rem;
  overflow-x: auto;
}

/* --- Step display row (card view) --- */
.pf-steps-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0;
}
.pf-steps-empty {
  font-size: 0.82rem;
  color: var(--gray-400);
}
.pf-step-box {
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  width: 170px;
  min-width: 140px;
  flex-shrink: 0;
}
.pf-step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.4rem;
}
.pf-step-label {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 0.2rem;
}
.pf-step-judul {
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--gray-900);
  margin-bottom: 0.2rem;
  line-height: 1.3;
}
.pf-step-deskripsi {
  font-size: 0.75rem;
  color: var(--gray-500);
  line-height: 1.45;
}
.pf-step-arrow {
  display: flex;
  align-items: center;
  padding: 0 0.35rem;
  padding-top: 1.4rem;
  color: var(--gray-300);
  font-size: 1rem;
  flex-shrink: 0;
}

/* --- Badges --- */
.pf-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}
.pf-badge-sales_ho    { background: var(--accent-light); color: #0369a1; }
.pf-badge-team_leader { background: #dcfce7; color: #166534; }
.pf-badge-merchandiser { background: #fef3c7; color: #b45309; }
.pf-badge-admin       { background: var(--secondary-light); color: #7e22ce; }
.pf-badge-super_admin { background: #fce7f3; color: #be185d; }
.pf-badge-none        { background: var(--gray-100); color: var(--gray-500); }

/* --- Buttons --- */
.pf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
  font-family: var(--font-sans);
}
.pf-btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.25); }
.pf-btn-primary:hover { background: var(--accent-dark); }
.pf-btn-secondary { background: var(--white); color: var(--gray-700); border-color: var(--gray-200); }
.pf-btn-secondary:hover { background: var(--gray-50); }
.pf-icon-btn {
  width: 30px; height: 30px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  background: var(--white);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-500);
  transition: background 0.15s ease;
}
.pf-icon-btn:hover { background: var(--gray-50); }
.pf-icon-btn.danger:hover { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.pf-add-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--gray-300);
  background: var(--gray-50);
  color: var(--gray-600);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pf-add-step-btn:hover { background: var(--white); border-color: var(--secondary); color: var(--secondary); }

/* --- Modal --- */
.pf-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 1000;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.pf-modal.open { display: flex; }
.pf-modal.open ~ .main-content,
body:has(.pf-modal.open) .main-content {
  overflow: hidden;
}
.pf-modal-content {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pf-modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.pf-modal-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--gray-900);
}
.pf-modal-close {
  width: 30px; height: 30px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  background: var(--white);
  cursor: pointer;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-500);
}
.pf-modal-close:hover { background: var(--gray-50); }
.pf-modal-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}
.pf-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-100);
  display: flex; justify-content: flex-end; gap: 0.6rem;
  flex-shrink: 0;
}

/* --- Form --- */
.pf-form-group { margin-bottom: 1rem; }
.pf-form-group label {
  display: block;
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 0.4rem;
}
.pf-input {
  width: 100%;
  padding: 0.55rem 0.8rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-family: var(--font-sans);
  color: var(--gray-900);
  background: var(--white);
  transition: border-color 0.15s ease;
  outline: none;
  box-sizing: border-box;
}
.pf-input:focus { border-color: var(--secondary); }
.pf-textarea {
  width: 100%;
  padding: 0.55rem 0.8rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-family: var(--font-sans);
  color: var(--gray-900);
  background: var(--white);
  resize: vertical;
  min-height: 64px;
  transition: border-color 0.15s ease;
  outline: none;
  box-sizing: border-box;
}
.pf-textarea:focus { border-color: var(--secondary); }
.pf-checkbox-group { display: flex; flex-direction: column; gap: 0.4rem; }
.pf-checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--gray-700);
  cursor: pointer;
}

/* --- Step builder in modal --- */
#pf-steps-builder {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pf-step-row {
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 0.75rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.pf-step-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.1rem;
}
.pf-step-row-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--secondary);
  letter-spacing: 0.04em;
}
.pf-step-del-btn {
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  background: var(--white);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-400);
  transition: background 0.12s ease;
  flex-shrink: 0;
}
.pf-step-del-btn:hover { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

/* ========================================
   DASHBOARD OVERVIEW (.ov-*)
   ======================================== */

.ov-loading, .ov-error {
  padding: 3rem;
  text-align: center;
  color: var(--gray-400);
  font-size: 0.9rem;
}
.ov-error { color: var(--error); }

/* Stat cards grid */
.ov-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 900px) { .ov-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ov-stat-grid { grid-template-columns: 1fr; } }

/* Stat card v2 ΓÇö glass morphism */
.ov-stat-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 24px -6px rgba(var(--accent-rgb), 0.12),
    0 2px 8px -2px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 var(--glass-border);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}
.ov-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.08), transparent 40%),
    radial-gradient(circle at bottom left, rgba(184, 92, 120, 0.1), transparent 40%);
  pointer-events: none;
}
.ov-stat-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px -8px rgba(184, 92, 120, 0.22),
    0 4px 12px -2px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.8);
}
.ov-stat-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.ov-stat-icon-circle {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -2px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}
.ov-stat-sparkline {
  display: flex;
  align-items: flex-end;
  opacity: 0.9;
  max-width: 72px;
  overflow: hidden;
}
.ov-stat-sparkline svg { display: block; max-width: 100%; }
.ov-stat-value-lg {
  font-family: var(--font-heading);
  font-size: clamp(0.9rem, 2.2vw, 1.35rem);
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.2;
  margin-top: 0.15rem;
  position: relative;
  z-index: 1;
  letter-spacing: -0.02em;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.ov-stat-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  position: relative;
  z-index: 1;
  min-width: 0;
}
.ov-stat-label-sm {
  font-size: 0.73rem;
  font-weight: 500;
  color: var(--gray-500);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.ov-change {
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.6);
}
.ov-change-up   { color: var(--success-dark); }
.ov-change-down { color: var(--error-dark); }
.ov-change-neutral { color: var(--gray-400); }

/* Charts row */
.ov-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 860px) { .ov-charts-row { grid-template-columns: 1fr; } }

/* Bottom row 3 columns */
.ov-bottom-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 1024px) { .ov-bottom-row-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .ov-bottom-row-3 { grid-template-columns: 1fr; } }

/* Generic card ΓÇö glass morphism */
.ov-card {
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 10px 30px -8px rgba(var(--accent-rgb), 0.1),
    0 2px 8px -2px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 var(--glass-border);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}
.ov-card:hover {
  box-shadow:
    0 18px 44px -10px rgba(184, 92, 120, 0.18),
    0 4px 12px -2px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.8);
}
.ov-chart-card { min-height: 0; }
.ov-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.55);
  flex-wrap: wrap;
  gap: 0.5rem;
  background: rgba(255,255,255,0.25);
}
.ov-card-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ov-card-title::before {
  content: '';
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #d49aaa, #a65d78);
}
.ov-card-body {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.ov-area-wrap { padding: 0.75rem 1rem 0.5rem; }

.ov-legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--gray-500);
}
.ov-legend-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.2rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
}

/* Donut chart */
.ov-donut-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.ov-donut-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ov-donut-inner svg {
  max-width: 100%;
  height: auto;
}
.ov-donut-center {
  position: absolute;
  text-align: center;
  pointer-events: none;
  width: 68px;
  max-width: 68px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.ov-donut-avg {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.1;
  white-space: nowrap;
}
.ov-donut-sub {
  font-size: 0.52rem;
  color: var(--gray-400);
  margin-top: 1px;
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.ov-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
  min-width: 120px;
  max-width: 200px;
}
.ov-donut-legend-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.45);
}
.ov-donut-legend-label {
  flex: 1;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.ov-donut-legend-pct {
  font-weight: 800;
  color: var(--gray-800);
  flex-shrink: 0;
}

/* SKU horizontal bar (rounded) */
.ov-skubar-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.ov-skubar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ov-skubar-label {
  width: 96px;
  font-size: 0.75rem;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  font-weight: 500;
}
.ov-skubar-track {
  flex: 1;
  height: 9px;
  background: rgba(226, 232, 240, 0.6);
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
.ov-skubar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #d49aaa, #a65d78);
  box-shadow: 0 1px 4px rgba(166, 93, 120, 0.35);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ov-skubar-val {
  width: 44px;
  text-align: right;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--gray-500);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pipeline funnel */
.ov-funnel { display: flex; flex-direction: column; gap: 0.65rem; }
.ov-funnel-row { display: flex; align-items: center; gap: 0.6rem; }
.ov-funnel-label { width: 80px; font-size: 0.78rem; color: var(--gray-600); flex-shrink: 0; font-weight: 500; }
.ov-funnel-bar-wrap {
  flex: 1;
  height: 11px;
  background: rgba(226, 232, 240, 0.6);
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
.ov-funnel-bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #c7869c, #8f425a);
  box-shadow: 0 1px 4px rgba(143, 66, 90, 0.3);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ov-funnel-count { width: 28px; text-align: right; font-size: 0.78rem; font-weight: 800; color: var(--gray-700); flex-shrink: 0; }

/* Activity list */
.ov-activity-list { display: flex; flex-direction: column; gap: 0.6rem; }
.ov-activity-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.5);
  transition: background 0.2s ease;
}
.ov-activity-row:hover { background: rgba(255,255,255,0.6); }
.ov-activity-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.4);
}
.ov-activity-info { flex: 1; min-width: 0; }
.ov-activity-title { font-size: 0.82rem; font-weight: 500; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-activity-meta { font-size: 0.72rem; color: var(--gray-400); }

/* AR status */
.ov-ar-pending  { background: var(--warning); }
.ov-ar-approved { background: var(--success); }
.ov-ar-rejected { background: var(--error); }

.ov-ar-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.4);
}
.ov-ar-badge.ov-ar-pending  { background: var(--warning-light);  color: var(--warning-dark); }
.ov-ar-badge.ov-ar-approved { background: var(--success-light);  color: var(--success-dark); }
.ov-ar-badge.ov-ar-rejected { background: var(--error-light);    color: var(--error-dark); }

/* Empty state */
.ov-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2rem 1rem;
  color: var(--gray-400);
  font-size: 0.82rem;
  text-align: center;
  background: rgba(255,255,255,0.2);
  border: 1px dashed rgba(203, 213, 225, 0.7);
  border-radius: 14px;
}

/* Demo preview banner */
.demo-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #8F425A;
  background: linear-gradient(135deg, rgba(255, 241, 245, 0.9), rgba(255, 252, 251, 0.75));
  border: 1px solid rgba(184, 92, 120, 0.3);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 4px 16px -6px rgba(184, 92, 120, 0.25), inset 0 1px 0 rgba(255,255,255,0.7);
}
.demo-banner code {
  background: rgba(184, 92, 120, 0.12);
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #8F425A;
}

/* ========================================
   GENERAL SETTINGS (.gs-*)
   ======================================== */
.gs-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.gs-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  overflow: hidden;
  width: 100%;
}

.gs-card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--gray-100);
}

.gs-card-title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--gray-900);
}

.gs-card-desc {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
}

.gs-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.gs-form-group {
  margin-bottom: 1.25rem;
}

.gs-form-group:last-child {
  margin-bottom: 0;
}

.gs-form-group label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 0.4rem;
}

.gs-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ========================================
   REUSABLE PANEL COMPONENTS (Glass Theme)
   ======================================== */

/* Panel Card Container - Glassmorphism style */
.panel-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.panel-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--glass-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.panel-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-800);
}

.panel-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

/* Stat Grid - 4 column layout */
.panel-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.panel-stat-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  padding: 1rem 1.125rem;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-xs);
}

.panel-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.panel-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.panel-stat-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* Semua icon pakai accent gradient tema (pink/burgundy) agar konsisten */
.panel-stat-icon.primary,
.panel-stat-icon.secondary,
.panel-stat-icon.success,
.panel-stat-icon.warning,
.panel-stat-icon.accent,
.panel-stat-icon.error {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
}

.panel-stat-content {
  flex: 1;
  min-width: 0;
}

.panel-stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-bottom: 0.25rem;
}

.panel-stat-value {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.2;
}

.panel-stat-change {
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

.panel-stat-change.positive {
  color: var(--success-dark);
}

.panel-stat-change.negative {
  color: var(--error-dark);
}

/* Chart Wrapper */
.panel-chart-wrap {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--glass-shadow);
}

.panel-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.panel-chart-title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gray-800);
}

.panel-chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.panel-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--gray-600);
}

.panel-chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.panel-chart-svg {
  width: 100%;
  height: auto;
}

/* Table Wrapper with Glass style */
.panel-table-wrap {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  box-shadow: var(--glass-shadow);
  margin-bottom: 1.5rem;
}

.panel-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

.panel-table thead tr {
  background: rgba(241, 245, 249, 0.6);
}

.panel-table th {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-500);
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1.5px solid var(--gray-200);
  white-space: nowrap;
}

.panel-table td {
  padding: 0.8125rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: middle;
}

.panel-table tbody tr:last-child td {
  border-bottom: none;
}

.panel-table tbody tr {
  transition: background 0.2s ease;
}

.panel-table tbody tr:hover td {
  background: rgba(59, 130, 246, 0.06);
}

/* Panel animations */
@keyframes panelCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-card, .panel-stat-card, .panel-chart-wrap, .panel-table-wrap {
  animation: panelCardFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.panel-stat-card:nth-child(1) { animation-delay: 0ms; }
.panel-stat-card:nth-child(2) { animation-delay: 80ms; }
.panel-stat-card:nth-child(3) { animation-delay: 160ms; }
.panel-stat-card:nth-child(4) { animation-delay: 240ms; }
.panel-stat-card:nth-child(5) { animation-delay: 320ms; }
.panel-stat-card:nth-child(6) { animation-delay: 400ms; }

.panel-chart-wrap { animation-delay: 280ms; }
.panel-table-wrap { animation-delay: 360ms; }

/* Responsive */
@media (max-width: 1024px) {
  .panel-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .panel-stat-grid {
    grid-template-columns: 1fr;
  }
  
  .panel-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Donut chart layout */
.panel-donut-layout {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.panel-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.panel-donut-center-val {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gray-900);
  line-height: 1.1;
}

.panel-donut-center-sub {
  font-size: 0.68rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.2rem;
}

.panel-donut-layout > svg {
  position: relative;
}

.panel-donut-legend {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.panel-donut-legend-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: background 0.2s ease;
}

.panel-donut-legend-row:hover {
  background: rgba(255, 255, 255, 0.7);
}

.panel-donut-legend-label {
  flex: 1;
  color: var(--gray-700);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-donut-legend-val {
  font-weight: 500;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}

.donut-arc {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: donutArcIn 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes donutArcIn {
  to { stroke-dashoffset: 0; }
}

/* Horizontal bar list (SKU / ranking) */
.panel-hbar-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.panel-hbar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.panel-hbar-label {
  width: 120px;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-hbar-track {
  flex: 1;
  height: 10px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
}

.panel-hbar-fill {
  height: 100%;
  border-radius: 99px;
  transform-origin: left;
  animation: scaleX-in 700ms cubic-bezier(0.34, 1.06, 0.64, 1) both;
}

.panel-hbar-val {
  width: 64px;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gray-800);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Funnel chart */
.panel-funnel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.panel-funnel-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.panel-funnel-label {
  width: 90px;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-funnel-bar-wrap {
  flex: 1;
  height: 14px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
}

.panel-funnel-bar {
  height: 100%;
  border-radius: 99px;
  transform-origin: left;
  animation: scaleX-in 800ms cubic-bezier(0.34, 1.06, 0.64, 1) both;
}

.panel-funnel-count {
  width: 28px;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gray-700);
  flex-shrink: 0;
}

/* ========================================
   GLASS TABLE UPGRADE (all module tables)
   ======================================== */
.si-table-wrapper, .so-table-wrapper, .dt-table-wrapper, .stk-table-wrapper,
.bil-table-wrapper, .yoy-table-wrapper, .apr-table-wrapper, .account-table-wrapper,
.bg-table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border-subtle);
  background: var(--glass-bg);
  flex: 1;
  min-height: 0;
}

.si-table, .so-table, .dt-table, .stk-table, .bil-table, .yoy-table, .apr-table,
.account-table, .bg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.si-table th, .so-table th, .dt-table th, .stk-table th, .bil-table th,
.yoy-table th, .apr-table th, .account-table th, .bg-table th {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-500);
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1.5px solid var(--gray-200);
  white-space: nowrap;
  background: rgba(241, 245, 249, 0.55);
}

.si-table td, .so-table td, .dt-table td, .stk-table td, .bil-table td,
.yoy-table td, .apr-table td, .account-table td, .bg-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: middle;
}

.si-table tbody tr, .so-table tbody tr, .dt-table tbody tr, .stk-table tbody tr,
.bil-table tbody tr, .yoy-table tbody tr, .apr-table tbody tr,
.account-table tbody tr, .bg-table tbody tr {
  transition: background 0.2s ease;
}

.si-table tbody tr:hover td, .so-table tbody tr:hover td, .dt-table tbody tr:hover td,
.stk-table tbody tr:hover td, .bil-table tbody tr:hover td, .yoy-table tbody tr:hover td,
.apr-table tbody tr:hover td, .account-table tbody tr:hover td, .bg-table tbody tr:hover td {
  background: rgba(59, 130, 246, 0.06);
}

.si-table tbody tr:last-child td, .so-table tbody tr:last-child td,
.dt-table tbody tr:last-child td, .stk-table tbody tr:last-child td,
.bil-table tbody tr:last-child td, .yoy-table tbody tr:last-child td,
.apr-table tbody tr:last-child td, .account-table tbody tr:last-child td,
.bg-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table row stagger animation */
.si-table tbody tr, .so-table tbody tr, .dt-table tbody tr, .stk-table tbody tr,
.bil-table tbody tr, .yoy-table tbody tr, .apr-table tbody tr,
.account-table tbody tr, .bg-table tbody tr {
  animation: tableRowIn 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.si-table tbody tr:nth-child(1), .so-table tbody tr:nth-child(1), .dt-table tbody tr:nth-child(1),
.stk-table tbody tr:nth-child(1), .bil-table tbody tr:nth-child(1), .yoy-table tbody tr:nth-child(1),
.apr-table tbody tr:nth-child(1), .account-table tbody tr:nth-child(1), .bg-table tbody tr:nth-child(1) { animation-delay: 20ms; }
.si-table tbody tr:nth-child(2), .so-table tbody tr:nth-child(2), .dt-table tbody tr:nth-child(2),
.stk-table tbody tr:nth-child(2), .bil-table tbody tr:nth-child(2), .yoy-table tbody tr:nth-child(2),
.apr-table tbody tr:nth-child(2), .account-table tbody tr:nth-child(2), .bg-table tbody tr:nth-child(2) { animation-delay: 50ms; }
.si-table tbody tr:nth-child(3), .so-table tbody tr:nth-child(3), .dt-table tbody tr:nth-child(3),
.stk-table tbody tr:nth-child(3), .bil-table tbody tr:nth-child(3), .yoy-table tbody tr:nth-child(3),
.apr-table tbody tr:nth-child(3), .account-table tbody tr:nth-child(3), .bg-table tbody tr:nth-child(3) { animation-delay: 80ms; }
.si-table tbody tr:nth-child(4), .so-table tbody tr:nth-child(4), .dt-table tbody tr:nth-child(4),
.stk-table tbody tr:nth-child(4), .bil-table tbody tr:nth-child(4), .yoy-table tbody tr:nth-child(4),
.apr-table tbody tr:nth-child(4), .account-table tbody tr:nth-child(4), .bg-table tbody tr:nth-child(4) { animation-delay: 110ms; }
.si-table tbody tr:nth-child(5), .so-table tbody tr:nth-child(5), .dt-table tbody tr:nth-child(5),
.stk-table tbody tr:nth-child(5), .bil-table tbody tr:nth-child(5), .yoy-table tbody tr:nth-child(5),
.apr-table tbody tr:nth-child(5), .account-table tbody tr:nth-child(5), .bg-table tbody tr:nth-child(5) { animation-delay: 140ms; }
.si-table tbody tr:nth-child(n+6), .so-table tbody tr:nth-child(n+6), .dt-table tbody tr:nth-child(n+6),
.stk-table tbody tr:nth-child(n+6), .bil-table tbody tr:nth-child(n+6), .yoy-table tbody tr:nth-child(n+6),
.apr-table tbody tr:nth-child(n+6), .account-table tbody tr:nth-child(n+6), .bg-table tbody tr:nth-child(n+6) { animation-delay: 170ms; }

@keyframes tableRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Funnel & hbar fill reuse scaleX-in */
@keyframes scaleX-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.gs-input {
  width: 100%;
  padding: 0.6rem 0.875rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: var(--gray-900);
  background: var(--white);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.gs-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.gs-input:disabled,
.gs-input[readonly] {
  background: var(--gray-50);
  color: var(--gray-500);
  cursor: not-allowed;
}

.gs-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  font-family: var(--font-body);
}

.gs-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.25);
}

.gs-btn-primary:hover {
  background: var(--accent-dark);
}

.gs-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.gs-hint {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.3rem;
}

.gs-error {
  font-size: 0.75rem;
  color: #dc2626;
  margin-top: 0.3rem;
  display: none;
}

.gs-error.show {
  display: block;
}

.gs-success {
  font-size: 0.8125rem;
  color: #16a34a;
  margin-top: 0.75rem;
  display: none;
}

.gs-success.show {
  display: block;
}

.gs-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.gs-pref-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--gray-50);
}

.gs-pref-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.gs-pref-item:first-child {
  padding-top: 0;
}

.gs-pref-label {
  font-size: 0.875rem;
  color: var(--gray-800);
  font-weight: 500;
}

.gs-pref-desc {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.15rem;
}

/* Toggle switch */
.gs-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.gs-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.gs-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--gray-200);
  border-radius: 24px;
  transition: 0.2s;
}

.gs-toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.gs-toggle input:checked + .gs-toggle-slider {
  background: var(--primary);
}

.gs-toggle input:checked + .gs-toggle-slider::before {
  transform: translateX(20px);
}

@media (max-width: 768px) {
  .gs-form-row,
  .gs-profile-grid {
    grid-template-columns: 1fr;
  }

  .pf-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .pf-modal-content {
    max-width: 100%;
    margin: 0.5rem;
  }
}

/* ========================================
   DSO REUSABLE TABLE SYSTEM (.dso-*)
   ======================================== */

/* Table wrapper */
.dso-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
  margin-bottom: 1rem;
  background: var(--white);
}

/* Table base */
.dso-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

/* Header */
.dso-table thead tr {
  background: var(--gray-50);
}
.dso-table th {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1.5px solid var(--gray-200);
  white-space: nowrap;
}
.dso-table th.sortable { cursor: pointer; user-select: none; }
.dso-table th.sortable:hover { color: var(--gray-700); }
.dso-table th.sortable::after { content: ' \2195'; font-size: 0.7rem; opacity: 0.5; }
.dso-table th.sort-asc::after  { content: ' \2191'; opacity: 1; }
.dso-table th.sort-desc::after { content: ' \2193'; opacity: 1; }

/* Rows */
.dso-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: middle;
}
.dso-table tbody tr:last-child td { border-bottom: none; }
.dso-table tbody tr:hover td {
  /* fallback browser lama (tanpa color-mix) */
  background: rgba(139, 92, 246, 0.04);
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

/* Empty & loading rows */
.dso-table .dso-empty-row td,
.dso-table .account-empty-row td,
.dso-table [class$="-empty-row"] td {
  text-align: center;
  color: var(--gray-400);
  font-style: italic;
  padding: 2.5rem 1rem;
}

/* Avatar (inisial bulat) */
.dso-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--white);
  flex-shrink: 0;
  text-transform: uppercase;
}
.dso-cell-with-avatar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.dso-cell-name {
  font-weight: 500;
  color: var(--gray-800);
}

/* Badge status */
.dso-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.dso-badge-success  { background: var(--success-light);  color: var(--success-dark); }
.dso-badge-warning  { background: var(--warning-light);  color: var(--warning-dark); }
.dso-badge-error    { background: var(--error-light);    color: var(--error-dark); }
.dso-badge-info     { background: var(--accent-light); color: var(--accent); }
.dso-badge-neutral  { background: var(--gray-100);       color: var(--gray-600); }
.dso-badge-purple   { background: var(--secondary-light); color: #7e22ce; }

/* Action buttons */
.dso-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-500);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  flex-shrink: 0;
}
.dso-action-btn:hover           { background: var(--gray-50); color: var(--gray-700); }
.dso-action-btn.edit:hover      { background: var(--accent-light); color: var(--accent); border-color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.dso-action-btn.delete:hover    { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.dso-action-btn.view:hover      { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.dso-action-btn.approve:hover   { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.dso-action-btn.reject:hover    { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.dso-action-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

/* Search input with icon */
.dso-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.dso-search-wrap svg {
  position: absolute;
  left: 0.65rem;
  color: var(--gray-400);
  pointer-events: none;
  flex-shrink: 0;
}
.dso-search-input {
  padding: 0.5rem 0.875rem 0.5rem 2.1rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-family: var(--font-sans);
  color: var(--gray-800);
  background: var(--white);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 180px;
}
.dso-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}

/* Filter chips */
.dso-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.dso-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 500;
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.12s ease;
}
.dso-chip:hover { border-color: var(--primary); color: var(--primary); }
.dso-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  font-weight: 500;
}

/* Toolbar (search + filter row) */
.dso-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.875rem;
}

/* Pagination */
.dso-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.dso-pagination button,
.dso-pagination .dso-page-btn {
  min-width: 34px; height: 34px;
  padding: 0 0.5rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-600);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dso-pagination button:hover,
.dso-pagination .dso-page-btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
.dso-pagination button.active,
.dso-pagination .dso-page-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  font-weight: 500;
}
.dso-pagination button:disabled,
.dso-pagination .dso-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dso-pagination .dso-page-prev,
.dso-pagination .dso-page-next {
  font-size: 0.75rem;
  padding: 0 0.75rem;
  gap: 0.25rem;
}

/* Make all existing per-module tables inherit dso-table styles */
.account-table,
.dt-table,
.si-table,
.so-table,
.stk-table,
.bg-table,
.yoy-table,
.appr-table,
.bil-table,
.pipe-table,
.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

/* Unified th/td overrides for all module tables (lower specificity kept) */
.account-table th, .dt-table th, .si-table th, .so-table th,
.stk-table th, .bg-table th, .yoy-table th, .appr-table th,
.bil-table th, .pipe-table th, .inv-table th {
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--gray-400) !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 1.5px solid var(--gray-200) !important;
  background: var(--gray-50) !important;
}

.account-table td, .dt-table td, .si-table td, .so-table td,
.stk-table td, .bg-table td, .yoy-table td, .appr-table td,
.bil-table td, .pipe-table td, .inv-table td {
  padding: 0.875rem 1rem !important;
  border-bottom: 1px solid var(--gray-100) !important;
  vertical-align: middle !important;
}

.account-table tbody tr:hover td, .dt-table tbody tr:hover td,
.si-table tbody tr:hover td, .so-table tbody tr:hover td,
.stk-table tbody tr:hover td, .bg-table tbody tr:hover td,
.yoy-table tbody tr:hover td, .appr-table tbody tr:hover td,
.bil-table tbody tr:hover td, .pipe-table tbody tr:hover td,
.inv-table tbody tr:hover td {
  /* fallback browser lama (tanpa color-mix) */
  background: rgba(139, 92, 246, 0.04) !important;
  background: color-mix(in srgb, var(--primary) 4%, transparent) !important;
}

/* Unified pagination for all modules */
.account-pagination button, .dt-pagination button,
.si-pagination button, .so-pagination button,
.stk-pagination button, .bg-pagination button,
.yoy-pagination button, .appr-pagination button,
.bil-pagination button, .pipe-pagination button,
.inv-pagination button {
  min-width: 34px !important;
  height: 34px !important;
  border-radius: var(--radius-md) !important;
  border: 1.5px solid var(--gray-200) !important;
  background: var(--white) !important;
  color: var(--gray-600) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-family: var(--font-sans) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.12s ease !important;
}
.account-pagination button:hover, .dt-pagination button:hover,
.si-pagination button:hover, .so-pagination button:hover,
.stk-pagination button:hover, .bg-pagination button:hover,
.yoy-pagination button:hover, .appr-pagination button:hover,
.bil-pagination button:hover, .pipe-pagination button:hover,
.inv-pagination button:hover {
  background: var(--gray-50) !important;
  border-color: var(--gray-300) !important;
}
.account-pagination button.active, .dt-pagination button.active,
.si-pagination button.active, .so-pagination button.active,
.stk-pagination button.active, .bg-pagination button.active,
.yoy-pagination button.active, .appr-pagination button.active,
.bil-pagination button.active, .pipe-pagination button.active,
.inv-pagination button.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
  font-weight: 500 !important;
}
.account-pagination button:disabled, .dt-pagination button:disabled,
.si-pagination button:disabled, .so-pagination button:disabled,
.stk-pagination button:disabled, .bg-pagination button:disabled,
.yoy-pagination button:disabled, .appr-pagination button:disabled,
.bil-pagination button:disabled, .pipe-pagination button:disabled,
.inv-pagination button:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* =====================================================
   AMBIENT PARTICLE BACKGROUND
   ===================================================== */
@keyframes particleFloat {
  0%   { transform: translateY(0px) translateX(0px); }
  50%  { transform: translateY(-30px) translateX(10px); }
  100% { transform: translateY(0px) translateX(0px); }
}

@keyframes particleTwinkle {
  0%, 100% { opacity: var(--p-opacity, 0.3); }
  50%       { opacity: calc(var(--p-opacity, 0.3) * 0.15); }
}

.particle {
  border-radius: 50%;
  pointer-events: none;
}

/* Particle container ΓÇö fixed fullscreen (index.html) */
#particles-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Particle container ΓÇö absolute inside main-content (dashboard.html) */
#particles-content-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Smooth transition improvements */
.card, [class*="-card"] {
  transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn, button:not([disabled]):not(.sidebar-item) {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== LANGUAGE CARD ===== */
.gs-lang-opts { display: flex; gap: 0.75rem; margin-top: 0.5rem; }

.gs-lang-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  cursor: pointer;
  transition: all 0.2s ease;
}

.gs-lang-btn:hover {
  border-color: var(--primary);
  background: var(--accent-light);
}

.gs-lang-btn.active {
  border-color: var(--primary);
}

.gs-lang-checkbox {
  margin-left: auto;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.gs-lang-btn.active .gs-lang-checkbox {
  opacity: 1;
  color: var(--accent);
}
.gs-lang-check-icon .gs-lang-check-mark {
  opacity: 0;
  transition: opacity 0.2s;
}
.gs-lang-btn.active .gs-lang-check-mark {
  opacity: 1;
}

.gs-lang-flag { font-size: 1.4rem; line-height: 1; }

/* ===== Panel Action Buttons - Rapi Berderet ===== */
.si-card-header, .so-card-header, .stk-card-header, .pipe-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-width: 0;
}
.si-card-header .si-title-group, .so-card-header .so-title-group, .stk-card-header .stk-title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex-wrap: wrap;
}
.si-card-header .si-title-group > *, .so-card-header .so-title-group > * {
  min-width: 0;
}
.si-card-header .si-actions, .so-card-header .so-actions, .stk-card-header .stk-actions, .pipe-card-header .pipe-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.si-card-header .si-actions > *, .so-card-header .so-actions > *, .stk-card-header .stk-actions > *, .pipe-card-header .pipe-actions > * {
  margin: 0;
  flex-shrink: 0;
}

/* ===== Panel Buttons - Sama theme dengan login button ===== */
.si-btn, .so-btn, .stk-btn, .pipe-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.si-btn-primary, .so-btn-primary, .stk-btn-primary, .pipe-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff !important;
  border-color: var(--accent);
  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
  backdrop-filter: blur(4px);
}
.si-btn-primary:hover, .so-btn-primary:hover, .stk-btn-primary:hover, .pipe-btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}
.si-btn-outline, .so-btn-outline, .stk-btn-outline, .pipe-btn-outline {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.25);
}
.si-btn-outline:hover, .so-btn-outline:hover, .stk-btn-outline:hover, .pipe-btn-outline:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--accent);
}
.si-btn-template, .so-btn-template, .stk-btn-template, .pipe-btn-template {
  background: transparent;
  color: var(--gray-600);
  border-color: var(--gray-200);
}
.si-btn-template:hover, .so-btn-template:hover, .stk-btn-template:hover, .pipe-btn-template:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

/* ===== Toggle/Filter Buttons - Global Consistency ===== */
.panel-toggle, .si-toggle, .so-toggle, .stk-toggle, .yoy-toggle, .bil-toggle, .bg-toggle, .pipe-toggle {
  display: inline-flex;
  background: rgba(var(--gray-100-rgb), 0.5);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.panel-toggle button, .si-toggle button, .so-toggle button, .stk-toggle button, 
.yoy-toggle button, .bil-toggle button, .bg-toggle button, .pipe-toggle button {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--gray-500);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.panel-toggle button.active, .si-toggle button.active, .so-toggle button.active, 
.stk-toggle button.active, .yoy-toggle button.active, .bil-toggle button.active, 
.bg-toggle button.active, .pipe-toggle button.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25);
}
.panel-toggle button:hover:not(.active), .si-toggle button:hover:not(.active), 
.so-toggle button:hover:not(.active), .stk-toggle button:hover:not(.active),
.yoy-toggle button:hover:not(.active), .bil-toggle button:hover:not(.active),
.bg-toggle button:hover:not(.active), .pipe-toggle button:hover:not(.active) {
  color: var(--gray-700);
  background: rgba(var(--gray-200-rgb), 0.5);
}

/* ===== Panel Tabs (Account, Approval) - Consistent with toggle ===== */
.panel-tab, .account-tab, .apr-tab-btn {
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--transition);
}
.panel-tab:hover, .account-tab:hover, .apr-tab-btn:hover {
  color: var(--gray-700);
}
.panel-tab.active, .account-tab.active, .apr-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.gs-lang-info { display: flex; flex-direction: column; }

.gs-lang-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-900);
}

.gs-lang-sub {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.gs-lang-badge {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--gray-900);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gs-lang-btn.active .gs-lang-badge { opacity: 1; }

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media (min-width: 390px) {
  html { font-size: 15px; }
  .gs-grid, .ov-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  html { font-size: 16px; }
  .sidebar { width: 280px; }
}

@media (min-width: 1024px) {
}

@media (min-width: 1280px) {
  .page-content { padding: 1.5rem 2rem; }
}

@media (min-width: 1440px) {
  .page-content { padding: 2rem; }
}

@media (min-width: 1920px) {
  .dashboard-layout { max-width: 1920px; margin: 0 auto; }
}

/* ===== MOBILE BOTTOM NAVIGATION ===== */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(64px + env(safe-area-inset-bottom));
  background: var(--surface-raised);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-border);
  z-index: 9999;
  padding: 0.5rem 0.25rem;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  /* Samsung Internet, Firefox Android, Chrome Android */
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  .mobile-bottom-nav {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  .mobile-bottom-nav::-webkit-scrollbar { display: none; }
  .mobile-bottom-nav-item { flex: 0 0 auto; min-width: 64px; }
  .main-content { padding-bottom: 80px !important; }
}

.mobile-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.6875rem;
  min-width: 56px;
  min-height: 48px;
  transition: color 0.2s, background 0.2s;
}

.mobile-bottom-nav-item svg { width: 22px; height: 22px; }

.mobile-bottom-nav-item.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.mobile-bottom-nav-item:hover { background: var(--glass-bg); }

/* ===== RESPONSIVE UTILITIES — Mobile First ===== */

/* Tablet: 768px-1024px */
@media (max-width: 1024px) {
  .page-content { padding: 1.25rem; }
  .top-header { padding: 0 1rem; }
  .stat-grid, .panel-stat-grid { gap: 0.75rem; }
}

/* Mobile: <768px */
@media (max-width: 768px) {
  /* Page content — compact */
  .page-content { padding: 1rem; }

  /* Headers — smaller */
  .top-header { padding: 0 0.75rem; height: 60px; }
  .header-title { font-size: 1.125rem !important; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.125rem; }

  /* Cards — tighter spacing */
  .si-card, .so-card, .stk-card, .bil-card, .bg-card,
  .yoy-card, .apr-card, .pipe-card, .panel-card {
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
  }
  .si-card-header, .so-card-header, .stk-card-header,
  .bil-card-header, .bg-card-header {
    padding: 0.875rem 1rem;
  }
  .si-card-body, .so-card-body, .stk-card-body,
  .bil-card-body, .bg-card-body {
    padding: 1rem;
  }

  /* Search bars — stack vertically */
  .si-search-bar, .so-search-bar, .stk-search-bar,
  .bil-search-bar, .bg-search-bar, .yoy-search-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .si-search-bar input, .si-search-bar select,
  .so-search-bar input, .so-search-bar select {
    max-width: 100%;
    min-width: auto;
  }

  /* Tables — always scroll horizontal */
  .si-table-wrapper, .so-table-wrapper, .stk-table-wrapper,
  .bil-table-wrapper, .bg-table-wrapper, .yoy-table-wrapper,
  .apr-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Small mobile: <375px */
@media (max-width: 375px) {
  .page-content { padding: 0.75rem; }
  .stat-grid { grid-template-columns: 1fr; }
  .panel-stat-grid { grid-template-columns: 1fr; }
  .header-title { font-size: 1rem !important; }
  body { font-size: 0.875rem; }
}

/* ===== Cross-browser compatibility ===== */

/* Firefox: scrollbar styling fallback */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.3) transparent;
}

/* Firefox: color-mix fallback for older versions */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .sidebar { background: rgba(184, 92, 120, 0.18); }
  .dso-action-btn.edit:hover { border-color: rgba(184, 92, 120, 0.3); }
}

/* Edge/Chrome: ensure SVG stroke renders correctly */
svg { overflow: visible; }

/* Firefox: button font inheritance */
button, input, select, textarea {
  font-family: inherit;
}

/* Safari/Chrome: smooth scrolling */
html { scroll-behavior: smooth; }

/* Firefox: gap in flex containers */
.nav-item, .strip-icon-btn {
  box-sizing: border-box;
}

/* ===== Mobile browser optimizations ===== */

/* Remove tap highlight on Android Chrome & Samsung Internet */
* { -webkit-tap-highlight-color: transparent; }

/* Minimum touch target 44x44px (WCAG 2.5.5) */
button, a, .nav-item, .strip-icon-btn, .mobile-bottom-nav-item,
.gs-lang-btn, .dso-action-btn {
  min-height: 44px;
  touch-action: manipulation; /* prevent 300ms tap delay */
}

/* iOS Safari: prevent font size inflation on orientation change */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* iOS Safari: momentum scrolling for panels */
.main-content, .sidebar, .modal-overlay, [class*="-scroll"] {
  -webkit-overflow-scrolling: touch;
}

/* Android: prevent pull-to-refresh interfering with scroll */
body { overscroll-behavior-y: contain; }

/* Samsung Internet & UC Browser: input zoom prevention */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
  font-size: max(16px, 1em); /* prevents iOS zoom on focus */
}

/* Firefox for Android: scrollbar none on sidebar */
.sidebar { scrollbar-width: none; }

/* ===== Global Custom Scrollbar - Maroon Theme ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { 
  background: #8B3B52; 
  border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { 
  background: #A84F6A; 
}
::-webkit-scrollbar-corner { background: transparent; }

/* Firefox scrollbar */
* { scrollbar-width: thin; scrollbar-color: #8B3B52 transparent; }
* { scrollbar-width: thin; }

/* Sidebar: off-canvas drawer on mobile (bottom nav + drawer both available) */
@media (max-width: 767px) {
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ===== Global Primary Button Color Override ===== */
/* Pastikan semua tombol *-btn-primary dan .btn-primary selalu teks + ikon putih */
.btn-primary,
.si-btn-primary, .so-btn-primary, .stk-btn-primary, .pipe-btn-primary,
.bg-btn-primary, .apr-btn-primary, .bil-btn-primary, .yoy-btn-primary,
.pf-btn-primary, .gs-btn-primary, .dt-btn-primary {
  color: #ffffff !important;
}
.btn-primary svg,
.si-btn-primary svg, .so-btn-primary svg, .stk-btn-primary svg, .pipe-btn-primary svg,
.bg-btn-primary svg, .apr-btn-primary svg, .bil-btn-primary svg, .yoy-btn-primary svg,
.pf-btn-primary svg, .gs-btn-primary svg, .dt-btn-primary svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}
/* Ikon line/path di dalam SVG primary button */
.btn-primary svg line, .btn-primary svg path, .btn-primary svg polyline, .btn-primary svg circle,
.si-btn-primary svg line, .si-btn-primary svg path, .si-btn-primary svg polyline,
.so-btn-primary svg line, .so-btn-primary svg path, .so-btn-primary svg polyline,
.stk-btn-primary svg line, .stk-btn-primary svg path, .stk-btn-primary svg polyline,
.pipe-btn-primary svg line, .pipe-btn-primary svg path,
.bg-btn-primary svg line, .bg-btn-primary svg path,
.apr-btn-primary svg line, .apr-btn-primary svg path,
.bil-btn-primary svg line, .bil-btn-primary svg path,
.yoy-btn-primary svg line, .yoy-btn-primary svg path,
.pf-btn-primary svg line, .pf-btn-primary svg path,
.gs-btn-primary svg line, .gs-btn-primary svg path {
  stroke: #ffffff !important;
}

/* Glassmorphism: semua *-btn-primary modules */
.si-btn-primary, .so-btn-primary, .stk-btn-primary, .pipe-btn-primary,
.bg-btn-primary, .apr-btn-primary, .bil-btn-primary, .yoy-btn-primary,
.pf-btn-primary, .gs-btn-primary, .dt-btn-primary {
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.28), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Glassmorphism: logout button */
.logout-btn {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* ============================================================
   DARK THEME FIXES: glass cards + premium accent text
   Themes: midnight | plum-dark | forest-dark | dark-blue | dark-grey
   ============================================================ */

/* 1. Cards pakai glass background agar beda dari surface-page */
:root[data-theme="midnight"] .ov-card,
:root[data-theme="midnight"] .dt-card,
:root[data-theme="midnight"] .stk-card,
:root[data-theme="midnight"] .bil-card,
:root[data-theme="midnight"] .pf-card,
:root[data-theme="midnight"] .gs-card,
:root[data-theme="midnight"] .account-card,
:root[data-theme="midnight"] .bg-card,
:root[data-theme="midnight"] .yoy-card,
:root[data-theme="midnight"] .apr-card,
:root[data-theme="midnight"] .pipe-card,
:root[data-theme="midnight"] .sb-info-card,
:root[data-theme="plum-dark"] .ov-card,
:root[data-theme="plum-dark"] .dt-card,
:root[data-theme="plum-dark"] .stk-card,
:root[data-theme="plum-dark"] .bil-card,
:root[data-theme="plum-dark"] .pf-card,
:root[data-theme="plum-dark"] .gs-card,
:root[data-theme="plum-dark"] .account-card,
:root[data-theme="plum-dark"] .bg-card,
:root[data-theme="plum-dark"] .yoy-card,
:root[data-theme="plum-dark"] .apr-card,
:root[data-theme="plum-dark"] .pipe-card,
:root[data-theme="plum-dark"] .sb-info-card,
:root[data-theme="forest-dark"] .ov-card,
:root[data-theme="forest-dark"] .dt-card,
:root[data-theme="forest-dark"] .stk-card,
:root[data-theme="forest-dark"] .bil-card,
:root[data-theme="forest-dark"] .pf-card,
:root[data-theme="forest-dark"] .gs-card,
:root[data-theme="forest-dark"] .account-card,
:root[data-theme="forest-dark"] .bg-card,
:root[data-theme="forest-dark"] .yoy-card,
:root[data-theme="forest-dark"] .apr-card,
:root[data-theme="forest-dark"] .pipe-card,
:root[data-theme="forest-dark"] .sb-info-card,
:root[data-theme="dark-blue"] .ov-card,
:root[data-theme="dark-blue"] .dt-card,
:root[data-theme="dark-blue"] .stk-card,
:root[data-theme="dark-blue"] .bil-card,
:root[data-theme="dark-blue"] .pf-card,
:root[data-theme="dark-blue"] .gs-card,
:root[data-theme="dark-blue"] .account-card,
:root[data-theme="dark-blue"] .bg-card,
:root[data-theme="dark-blue"] .yoy-card,
:root[data-theme="dark-blue"] .apr-card,
:root[data-theme="dark-blue"] .pipe-card,
:root[data-theme="dark-blue"] .sb-info-card,
:root[data-theme="dark-grey"] .ov-card,
:root[data-theme="dark-grey"] .dt-card,
:root[data-theme="dark-grey"] .stk-card,
:root[data-theme="dark-grey"] .bil-card,
:root[data-theme="dark-grey"] .pf-card,
:root[data-theme="dark-grey"] .gs-card,
:root[data-theme="dark-grey"] .account-card,
:root[data-theme="dark-grey"] .bg-card,
:root[data-theme="dark-grey"] .yoy-card,
:root[data-theme="dark-grey"] .apr-card,
:root[data-theme="dark-grey"] .pipe-card,
:root[data-theme="dark-grey"] .sb-info-card {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border-subtle) !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 4px 24px rgba(0,0,0,0.32), inset 0 1px 0 var(--glass-border);
}

/* 2. Accent heading color per tema — mewah, terbaca jelas di atas dark bg */
/* Midnight Rose: rose-gold warm */
:root[data-theme="midnight"] .header-title,
:root[data-theme="midnight"] .ov-card-title,
:root[data-theme="midnight"] .dt-card-title,
:root[data-theme="midnight"] .gs-card-title,
:root[data-theme="midnight"] .pf-step-title,
:root[data-theme="midnight"] .sidebar-logo-text,
:root[data-theme="midnight"] .profile-name {
  color: #F2C4D0 !important;
}

/* Deep Plum: lavender-champagne */
:root[data-theme="plum-dark"] .header-title,
:root[data-theme="plum-dark"] .ov-card-title,
:root[data-theme="plum-dark"] .dt-card-title,
:root[data-theme="plum-dark"] .gs-card-title,
:root[data-theme="plum-dark"] .pf-step-title,
:root[data-theme="plum-dark"] .sidebar-logo-text,
:root[data-theme="plum-dark"] .profile-name {
  color: #E8CFEA !important;
}

/* Forest Noir: sage-gold */
:root[data-theme="forest-dark"] .header-title,
:root[data-theme="forest-dark"] .ov-card-title,
:root[data-theme="forest-dark"] .dt-card-title,
:root[data-theme="forest-dark"] .gs-card-title,
:root[data-theme="forest-dark"] .pf-step-title,
:root[data-theme="forest-dark"] .sidebar-logo-text,
:root[data-theme="forest-dark"] .profile-name {
  color: #C8DFCA !important;
}

/* Midnight Blue: gold/amber mewah */
:root[data-theme="dark-blue"] .header-title,
:root[data-theme="dark-blue"] .ov-card-title,
:root[data-theme="dark-blue"] .dt-card-title,
:root[data-theme="dark-blue"] .gs-card-title,
:root[data-theme="dark-blue"] .pf-step-title,
:root[data-theme="dark-blue"] .sidebar-logo-text,
:root[data-theme="dark-blue"] .profile-name {
  color: #E8C97A !important;
}

/* Slate Grey: silver-pearl */
:root[data-theme="dark-grey"] .header-title,
:root[data-theme="dark-grey"] .ov-card-title,
:root[data-theme="dark-grey"] .dt-card-title,
:root[data-theme="dark-grey"] .gs-card-title,
:root[data-theme="dark-grey"] .pf-step-title,
:root[data-theme="dark-grey"] .sidebar-logo-text,
:root[data-theme="dark-grey"] .profile-name {
  color: #D8DEE4 !important;
}

/* 3. panel-stat-value (angka besar di card) pakai accent per tema */
:root[data-theme="midnight"] .panel-stat-value,
:root[data-theme="midnight"] .ov-stat-value { color: #F2C4D0 !important; }
:root[data-theme="plum-dark"] .panel-stat-value,
:root[data-theme="plum-dark"] .ov-stat-value { color: #E8CFEA !important; }
:root[data-theme="forest-dark"] .panel-stat-value,
:root[data-theme="forest-dark"] .ov-stat-value { color: #C8DFCA !important; }
:root[data-theme="dark-blue"] .panel-stat-value,
:root[data-theme="dark-blue"] .ov-stat-value,
:root[data-theme="dark-blue"] .ov-stat-value-lg { color: #E8C97A !important; }
:root[data-theme="dark-blue"] .ov-stat-label-sm { color: #9BAAB5 !important; }
:root[data-theme="dark-grey"] .panel-stat-value,
:root[data-theme="dark-grey"] .ov-stat-value { color: #D8DEE4 !important; }

/* ============================================================
   CROSS-BROWSER COMPATIBILITY FIXES
   Edge, Safari, Opera, Brave — match Chrome rendering baseline
   ============================================================ */

/* Safari: fix flex gap fallback */
@supports not (gap: 1rem) {
  .sidebar-nav, .so-search-bar, .si-search-bar, .stk-search-bar,
  .so-stat-cards, .si-stat-cards, .ov-stat-cards, .panel-stat-cards {
    margin: -0.5rem;
  }
  .sidebar-nav > *, .so-search-bar > *, .si-search-bar > *,
  .so-stat-cards > *, .si-stat-cards > *, .ov-stat-cards > *, .panel-stat-cards > * {
    margin: 0.5rem;
  }
}

/* Safari: backdrop-filter prefix */
.sidebar, .top-header, .ov-card, .ov-stat-card, .panel-stat-card,
.ov-card, .dt-card, .stk-card, .bil-card, .pf-card, .gs-card,
.apr-card, .pipe-card, .bg-card, .yoy-card, .account-card, .modal-content {
  -webkit-backdrop-filter: var(--glass-blur, blur(16px));
}

/* Safari: font rendering match Chrome */
body, input, button, select, textarea {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Edge/Safari: remove default button styles */
button {
  -webkit-appearance: none;
  appearance: none;
}

/* Safari: input date styling */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}

/* Safari: scrollbar width */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }