/* ============================================
   AEC ERP — Design System v3
   Soft Material × Liquid Glass
   (migrated 2026-05 from monochrome zinc flat)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* =====  RBAC VISIBILITY  ===== */
body:not([data-role="admin"]):not([data-role="director"]) .finance-only {
  display: none !important;
}

/* =====  DESIGN TOKENS — LIGHT (warm soft material)  ===== */
:root {
  /* === Backgrounds (warm gray base — neumorphic friendly) === */
  --background: #ECE9E4;
  --surface: #ECE9E4;          /* same as bg for neu shadow play */
  --surface-2: #E5DFD6;
  --surface-3: #D4CDC0;
  --bg-tint-1: #F2EDE6;
  --bg-tint-2: #E5DFD6;

  /* === Foregrounds === */
  --foreground: #1A1916;
  --foreground-muted: #6B6862;
  --foreground-subtle: #9B9893;
  --foreground-disabled: #B8B5AF;

  /* === Borders (jarang dipakai — pakai shadow play) === */
  --border: rgba(20, 20, 18, 0.08);
  --border-strong: rgba(20, 20, 18, 0.14);
  --border-focus: var(--foreground);

  /* === Primary (still high-contrast) === */
  --primary: #1A1916;
  --primary-hover: #2A2925;
  --primary-foreground: #ECE9E4;

  /* === Secondary (soft surface) === */
  --secondary: #E5DFD6;
  --secondary-hover: #D4CDC0;
  --secondary-foreground: #1A1916;

  /* === BAUHAUS PALETTE (subdued untuk warm bg, bukan ngejreng) ===
     Reference: Bauhaus traditional Red/Yellow/Blue + sedikit Green untuk semantic.
     Semua di-desaturate ~30% supaya nyatu dengan warm cream bg. */
  --bauhaus-red: #C44A3F;        /* Bauhaus red — danger */
  --bauhaus-yellow: #D4A82E;     /* mustard subdued — warning */
  --bauhaus-blue: #3F5C7C;       /* Bauhaus deep blue — info */
  --bauhaus-green: #5A8262;      /* mossy green — success */
  --bauhaus-purple: #7A5A82;     /* dusty purple — accent (replacing ngejreng a855f7) */
  --bauhaus-black: #1A1916;
  --bauhaus-cream: #ECE9E4;
  /* Tier aliases — pakai untuk badge/category colors yg sebelumnya pakai Tailwind */
  --tier-basic: var(--bauhaus-blue);
  --tier-medium: var(--bauhaus-yellow);
  --tier-full: var(--bauhaus-purple);
  /* Note color tokens (sticky note pastels — softened ke warm bg) */
  --note-yellow-bg: #F4ECC4;
  --note-yellow-fg: #6B5318;
  --note-blue-bg: #D8E2EC;
  --note-blue-fg: #2C4358;
  --note-pink-bg: #ECDDE2;
  --note-pink-fg: #6B3848;
  --note-green-bg: #D8E5D5;
  --note-green-fg: #2C4830;
  --note-gray-bg: #E5DFD6;
  --note-gray-fg: #4A453E;

  --success: var(--bauhaus-green);
  --success-bg: #E5EBE3;
  --success-border: rgba(90, 130, 98, 0.22);
  --warning: var(--bauhaus-yellow);
  --warning-bg: #F2EAD0;
  --warning-border: rgba(212, 168, 46, 0.25);
  --danger: var(--bauhaus-red);
  --danger-bg: #F2DAD6;
  --danger-border: rgba(196, 74, 63, 0.22);
  --info: var(--bauhaus-blue);
  --info-bg: #DBE2EC;
  --info-border: rgba(63, 92, 124, 0.22);
  --accent-warm: var(--bauhaus-yellow);
  --accent-red: var(--bauhaus-red);
  --accent-blue: var(--bauhaus-blue);

  /* === Neumorphic shadow play (CORE) === */
  --shadow-light: rgba(255, 255, 255, 0.85);
  --shadow-dark: rgba(166, 158, 145, 0.55);
  --neu-out: -8px -8px 18px var(--shadow-light), 8px 8px 18px var(--shadow-dark);
  --neu-out-sm: -4px -4px 10px var(--shadow-light), 4px 4px 10px var(--shadow-dark);
  --neu-out-lg: -12px -12px 28px var(--shadow-light), 12px 12px 28px var(--shadow-dark);
  --neu-in: inset -4px -4px 10px var(--shadow-light), inset 4px 4px 10px var(--shadow-dark);
  --neu-in-sm: inset -2px -2px 6px var(--shadow-light), inset 2px 2px 6px var(--shadow-dark);

  /* === Legacy shadow tokens (mapped to neu) === */
  --shadow-sm: var(--neu-out-sm);
  --shadow: var(--neu-out-sm);
  --shadow-md: var(--neu-out);
  --shadow-lg: var(--neu-out-lg);

  /* === Glass === */
  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-bg-strong: rgba(255, 255, 255, 0.65);
  --glass-bg-deep: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-border-dark: rgba(20, 20, 20, 0.06);
  --glass-blur: blur(40px) saturate(180%);
  --glass-blur-sm: blur(20px) saturate(160%);

  /* === Radii (banyak yg jadi pill sekarang) === */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-card: 28px;
  --radius-pill: 100px;

  /* === Typography === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* === Motion (CRITICAL — match CLAUDE.md rule) === */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 180ms var(--ease-smooth);
  --transition-fast: 120ms var(--ease-smooth);
  --transition-slow: 300ms var(--ease-smooth);
  --transition-spring: 280ms var(--ease-spring);

  /* === Layout === */
  --sidebar-width: 240px;
  --topbar-height: 60px;
}

/* =====  DARK MODE (warm dark + glass deep) ===== */
/* === DARK MODE ===
   Fix 2026-05: surface dilift dari #1A1815 → #1F1C17 supaya neumorphic shadow play
   beneran kelihatan (warm white highlight at 6% opacity needs lifted bg).
   Glass juga ditune supaya feel "real" not fake. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #1F1C17;
    --surface: #1F1C17;
    --surface-2: #28241F;
    --surface-3: #322D27;
    --bg-tint-1: #28241F;
    --bg-tint-2: #14120F;
    --foreground: #F5F1EA;
    --foreground-muted: #A39E94;
    --foreground-subtle: #6B6862;
    --foreground-disabled: #4A4742;
    --border: rgba(245, 241, 234, 0.06);
    --border-strong: rgba(245, 241, 234, 0.12);
    --border-focus: var(--foreground);
    --primary: #F5F1EA;
    --primary-hover: #E5DFCE;
    --primary-foreground: #1F1C17;
    --secondary: #28241F;
    --secondary-hover: #322D27;
    --secondary-foreground: #F5F1EA;
    /* Bauhaus dark variants — slightly brightened untuk dark bg */
    --bauhaus-red: #D45F54;
    --bauhaus-yellow: #DDB854;
    --bauhaus-blue: #6B89A8;
    --bauhaus-green: #7BA683;
    --bauhaus-purple: #9B7CA3;
    --tier-basic: var(--bauhaus-blue);
    --tier-medium: var(--bauhaus-yellow);
    --tier-full: var(--bauhaus-purple);
    --note-yellow-bg: #3D3520;
    --note-yellow-fg: #DDB854;
    --note-blue-bg: #1F2730;
    --note-blue-fg: #8BA8C4;
    --note-pink-bg: #2D1F25;
    --note-pink-fg: #C4889A;
    --note-green-bg: #1F2820;
    --note-green-fg: #8FB59A;
    --note-gray-bg: #28241F;
    --note-gray-fg: #A39E94;
    --success: var(--bauhaus-green);
    --success-bg: #1A2A1E;
    --success-border: rgba(123, 166, 131, 0.3);
    --warning: var(--bauhaus-yellow);
    --warning-bg: #2A2418;
    --warning-border: rgba(221, 184, 84, 0.3);
    --danger: var(--bauhaus-red);
    --danger-bg: #2A1A18;
    --danger-border: rgba(212, 95, 84, 0.3);
    --info: var(--bauhaus-blue);
    --info-bg: #1A2128;
    --info-border: rgba(107, 137, 168, 0.3);
    --accent-warm: var(--bauhaus-yellow);
    --accent-red: var(--bauhaus-red);
    --accent-blue: var(--bauhaus-blue);
    /* Neumorphic dark — warm white highlight (subtle) + deeper void */
    --shadow-light: rgba(255, 245, 230, 0.045);
    --shadow-dark: rgba(0, 0, 0, 0.75);
    --neu-out: -6px -6px 14px var(--shadow-light), 6px 6px 14px var(--shadow-dark);
    --neu-out-sm: -3px -3px 8px var(--shadow-light), 3px 3px 8px var(--shadow-dark);
    --neu-out-lg: -10px -10px 22px var(--shadow-light), 10px 10px 22px var(--shadow-dark);
    --neu-in: inset -3px -3px 8px var(--shadow-light), inset 3px 3px 8px var(--shadow-dark);
    --neu-in-sm: inset -2px -2px 5px var(--shadow-light), inset 2px 2px 5px var(--shadow-dark);
    --glass-bg: rgba(40, 36, 30, 0.55);
    --glass-bg-strong: rgba(40, 36, 30, 0.72);
    --glass-bg-deep: rgba(28, 25, 20, 0.88);
    --glass-border: rgba(255, 245, 230, 0.08);
    --glass-border-dark: rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  --background: #1F1C17;
  --surface: #1F1C17;
  --surface-2: #28241F;
  --surface-3: #322D27;
  --bg-tint-1: #28241F;
  --bg-tint-2: #14120F;
  --foreground: #F5F1EA;
  --foreground-muted: #A39E94;
  --foreground-subtle: #6B6862;
  --foreground-disabled: #4A4742;
  --border: rgba(245, 241, 234, 0.06);
  --border-strong: rgba(245, 241, 234, 0.12);
  --border-focus: var(--foreground);
  --primary: #F5F1EA;
  --primary-hover: #E5DFCE;
  --primary-foreground: #1F1C17;
  --secondary: #28241F;
  --secondary-hover: #322D27;
  --secondary-foreground: #F5F1EA;
  --bauhaus-red: #D45F54;
  --bauhaus-yellow: #DDB854;
  --bauhaus-blue: #6B89A8;
  --bauhaus-green: #7BA683;
  --bauhaus-purple: #9B7CA3;
  --tier-basic: var(--bauhaus-blue);
  --tier-medium: var(--bauhaus-yellow);
  --tier-full: var(--bauhaus-purple);
  --note-yellow-bg: #3D3520;
  --note-yellow-fg: #DDB854;
  --note-blue-bg: #1F2730;
  --note-blue-fg: #8BA8C4;
  --note-pink-bg: #2D1F25;
  --note-pink-fg: #C4889A;
  --note-green-bg: #1F2820;
  --note-green-fg: #8FB59A;
  --note-gray-bg: #28241F;
  --note-gray-fg: #A39E94;
  --success: var(--bauhaus-green);
  --success-bg: #1A2A1E;
  --success-border: rgba(123, 166, 131, 0.3);
  --warning: var(--bauhaus-yellow);
  --warning-bg: #2A2418;
  --warning-border: rgba(221, 184, 84, 0.3);
  --danger: var(--bauhaus-red);
  --danger-bg: #2A1A18;
  --danger-border: rgba(212, 95, 84, 0.3);
  --info: var(--bauhaus-blue);
  --info-bg: #1A2128;
  --info-border: rgba(107, 137, 168, 0.3);
  --accent-warm: var(--bauhaus-yellow);
  --accent-red: var(--bauhaus-red);
  --accent-blue: var(--bauhaus-blue);
  --shadow-light: rgba(255, 245, 230, 0.045);
  --shadow-dark: rgba(0, 0, 0, 0.75);
  --neu-out: -6px -6px 14px var(--shadow-light), 6px 6px 14px var(--shadow-dark);
  --neu-out-sm: -3px -3px 8px var(--shadow-light), 3px 3px 8px var(--shadow-dark);
  --neu-out-lg: -10px -10px 22px var(--shadow-light), 10px 10px 22px var(--shadow-dark);
  --neu-in: inset -3px -3px 8px var(--shadow-light), inset 3px 3px 8px var(--shadow-dark);
  --neu-in-sm: inset -2px -2px 5px var(--shadow-light), inset 2px 2px 5px var(--shadow-dark);
  --glass-bg: rgba(40, 36, 30, 0.55);
  --glass-bg-strong: rgba(40, 36, 30, 0.72);
  --glass-bg-deep: rgba(28, 25, 20, 0.88);
  --glass-border: rgba(255, 245, 230, 0.08);
  --glass-border-dark: rgba(0, 0, 0, 0.4);
}
:root[data-theme="light"] {
  /* Light mode: explicit override (sama seperti :root default) */
  --background: #ECE9E4;
  --surface: #ECE9E4;
  --surface-2: #E5DFD6;
  --surface-3: #D4CDC0;
  --foreground: #1A1916;
  --foreground-muted: #6B6862;
  --foreground-subtle: #9B9893;
  --foreground-disabled: #B8B5AF;
  --border: rgba(20, 20, 18, 0.08);
  --border-strong: rgba(20, 20, 18, 0.14);
  --primary: #1A1916;
  --primary-hover: #2A2925;
  --primary-foreground: #ECE9E4;
  --secondary: #E5DFD6;
  --secondary-hover: #D4CDC0;
  --secondary-foreground: #1A1916;
  --success: #5A8C5E;
  --success-bg: #E8EFE5;
  --success-border: rgba(90, 140, 94, 0.25);
  --warning: #C97A3A;
  --warning-bg: #F4E8DC;
  --warning-border: rgba(201, 122, 58, 0.25);
  --danger: #C44A4A;
  --danger-bg: #F4DDD9;
  --danger-border: rgba(196, 74, 74, 0.25);
  --info: #5A7B9C;
  --info-bg: #DDE7F0;
  --info-border: rgba(90, 123, 156, 0.25);
  --shadow-light: rgba(255, 255, 255, 0.85);
  --shadow-dark: rgba(166, 158, 145, 0.55);
  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-bg-strong: rgba(255, 255, 255, 0.65);
  --glass-bg-deep: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-border-dark: rgba(20, 20, 20, 0.06);
}

/* =====  RESET  ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--foreground);
  background: var(--background);
  font-feature-settings: 'cv02', 'cv03', 'cv11', 'ss01';
  letter-spacing: -0.01em;
  min-height: 100vh;
  transition: background 400ms ease, color 400ms ease;
}
::selection { background: var(--foreground); color: var(--background); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 100px; border: 2px solid var(--background); }
::-webkit-scrollbar-thumb:hover { background: var(--foreground-subtle); }

/* =====  TYPOGRAPHY  ===== */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.03em; color: var(--foreground); line-height: 1.15; }
h1 { font-size: 32px; letter-spacing: -0.04em; }
h2 { font-size: 24px; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }
p { color: var(--foreground-muted); }
a { color: var(--foreground); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--foreground-muted); }

/* =====  LAYOUT  ===== */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}
.app-main { min-width: 0; display: flex; flex-direction: column; }

/* ============================================================
   TOPBAR — PREMIUM GLASS (Round 12, 2026-05-06)
   Multi-layer gradient bg, inner highlight line, elevated shadow.
   Refined typography: title 16px + tracking tight + weight 700.
   ============================================================ */
.topbar {
  height: var(--topbar-height);
  /* 2-layer subtle gradient — top brighter, bottom slightly darker */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--background) 92%, transparent) 0%,
      color-mix(in srgb, var(--background) 78%, transparent) 100%);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-bottom: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  position: sticky; top: 0; z-index: 30;
  /* Glass elevation: subtle border lines top & bottom + soft shadow underneath */
  box-shadow:
    inset 0 1px 0 0 color-mix(in srgb, white 30%, transparent),
    0 1px 0 var(--glass-border-dark),
    0 8px 24px -8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 280ms var(--ease-smooth), backdrop-filter 280ms;
}
[data-theme="dark"] .topbar {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--background) 88%, transparent) 0%,
      color-mix(in srgb, var(--background) 72%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 245, 230, 0.04),
    0 1px 0 var(--glass-border-dark),
    0 8px 24px -8px rgba(0, 0, 0, 0.4);
}
/* Refined title: bigger + tighter tracking + brand-quality weight */
.topbar-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.025em;
  position: relative;
}
/* Subtle accent dot before title (like Linear/Notion brand mark) */
.topbar-title::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bauhaus-yellow);
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bauhaus-yellow) 18%, transparent);
  animation: tb-dot-pulse 3s ease-in-out infinite;
}
@keyframes tb-dot-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bauhaus-yellow) 18%, transparent); }
  50% { transform: scale(1.2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bauhaus-yellow) 8%, transparent); }
}

/* Topbar icon buttons — bigger, polished hover */
.topbar .btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: transparent;
  color: var(--foreground-muted);
  transition: all 200ms var(--ease-smooth);
  position: relative;
}
.topbar .btn-icon:hover {
  background: var(--secondary);
  color: var(--foreground);
  transform: scale(1.05);
  box-shadow: var(--neu-out-sm);
}
.topbar .btn-icon:active {
  transform: scale(0.95);
  box-shadow: var(--neu-in-sm);
}
.topbar .btn-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  transition: transform 280ms var(--ease-spring);
}
.topbar .btn-icon:hover svg { transform: scale(1.1); }

/* Theme toggle — smooth morph */
.topbar [data-theme-toggle] svg {
  transition: transform 360ms var(--ease-spring), opacity 200ms;
}
.topbar [data-theme-toggle]:hover svg { transform: rotate(15deg) scale(1.1); }

/* Profile menu trigger — premium avatar treatment */
.topbar .menu-trigger {
  padding: 4px 14px 4px 4px;
  border-radius: 100px;
  background: transparent;
  transition: all 200ms var(--ease-smooth);
  border: 1px solid transparent;
}
.topbar .menu-trigger:hover {
  background: var(--secondary);
  border-color: var(--glass-border-dark);
  box-shadow: var(--neu-out-sm);
}
.topbar .menu-trigger .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: var(--neu-out-sm), 0 0 0 2px var(--background), 0 0 0 3px color-mix(in srgb, var(--bauhaus-yellow) 30%, transparent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.02em;
  position: relative;
}
/* Status dot on avatar (online indicator) */
.topbar .menu-trigger .avatar::after {
  content: '';
  position: absolute;
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bauhaus-green);
  box-shadow: 0 0 0 2px var(--background);
}

/* Notif bell badge sudah ada — refine animation */
.topbar #notifBadge,
.topbar [id*="notifBadge"] {
  background: var(--bauhaus-red) !important;
  box-shadow: 0 0 0 2px var(--background), 0 2px 6px -1px rgba(196, 74, 63, 0.6) !important;
  font-weight: 700 !important;
  animation: tb-badge-bounce 600ms var(--ease-spring) both;
}
@keyframes tb-badge-bounce {
  from { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  to { transform: scale(1); }
}

/* Mobile: tighter padding, smaller dot mark */
@media (max-width: 600px) {
  .topbar { padding: 0 14px; }
  .topbar-title { font-size: 14px; }
  .topbar-title::before { width: 5px; height: 5px; margin-right: 8px; }
  .topbar .btn-icon { width: 36px; height: 36px; }
  .topbar .menu-trigger { padding: 3px; }
  .topbar .menu-trigger .avatar { width: 28px; height: 28px; }
}

/* Page */
.page { padding: 28px; max-width: 1400px; width: 100%; }
.page-header { margin-bottom: 28px; }
.page-title { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 4px; }
.page-subtitle { color: var(--foreground-muted); font-size: 14px; }

/* =====  SIDEBAR (NEUMORPHIC)  ===== */
.sidebar {
  background: var(--surface);
  height: 100vh;
  position: sticky; top: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  /* Right shadow play instead of border */
  box-shadow: 4px 0 18px rgba(0, 0, 0, 0.04), inset -1px 0 0 var(--border);
}
/* ============================================================
   SIDEBAR BRAND — PREMIUM (Round 13, 2026-05-06)
   Logo: gradient bg + inner highlight + outer warm glow + subtle shimmer.
   Brand text: mixed weight + tracking tight. Container: glass with bauhaus accent.
   ============================================================ */
.sidebar-brand {
  height: var(--topbar-height);
  padding: 0 18px;
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--background) 92%, transparent) 0%,
      color-mix(in srgb, var(--background) 78%, transparent) 100%);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-bottom: none;
  position: relative;
  /* Inner highlight + bottom border + subtle shadow */
  box-shadow:
    inset 0 1px 0 0 color-mix(in srgb, white 30%, transparent),
    0 1px 0 var(--glass-border-dark);
}
[data-theme="dark"] .sidebar-brand {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--background) 88%, transparent) 0%,
      color-mix(in srgb, var(--background) 72%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 245, 230, 0.04),
    0 1px 0 var(--glass-border-dark);
}
/* Subtle Bauhaus yellow accent line di kiri (3px tall vertical accent) */
.sidebar-brand::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 24px;
  background: linear-gradient(180deg, var(--bauhaus-yellow), var(--bauhaus-red));
  border-radius: 0 3px 3px 0;
  opacity: 0.85;
}

/* === LOGO BADGE — premium 3D-feel === */
.sidebar-logo {
  width: 38px; height: 38px;
  border-radius: 12px;
  /* Multi-layer gradient: foreground at top → slightly lifted at bottom */
  background:
    linear-gradient(135deg,
      var(--foreground) 0%,
      color-mix(in srgb, var(--foreground) 85%, var(--background)) 100%);
  color: var(--primary-foreground);
  display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
  letter-spacing: -0.04em; flex-shrink: 0;
  position: relative;
  /* Premium depth: 4-layer shadow stack */
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.25),
    0 4px 12px -4px rgba(0, 0, 0, 0.3),
    0 8px 24px -8px color-mix(in srgb, var(--bauhaus-yellow) 40%, transparent);
  transition: transform 280ms var(--ease-spring), box-shadow 280ms;
  overflow: hidden;
}
/* Animated diagonal sheen sweep */
.sidebar-logo::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 200%; height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-brand:hover .sidebar-logo {
  transform: translateY(-1px) rotate(-2deg);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.3),
    0 6px 16px -4px rgba(0, 0, 0, 0.4),
    0 12px 32px -8px color-mix(in srgb, var(--bauhaus-yellow) 60%, transparent);
}
.sidebar-brand:hover .sidebar-logo::after {
  transform: translateX(50%);
}
/* Image variant: container tetap punya depth, image transparent */
.sidebar-logo.has-image {
  background:
    linear-gradient(135deg,
      var(--surface) 0%,
      color-mix(in srgb, var(--surface) 80%, var(--background)) 100%);
  width: 40px; height: 40px;
  overflow: hidden;
  padding: 4px;
}
.sidebar-logo.has-image img {
  border-radius: 0 !important;
  background: transparent !important;
  width: 100% !important; height: 100% !important;
  object-fit: contain;
  transition: filter 200ms ease, transform 280ms var(--ease-spring);
  position: relative; z-index: 1;
}
.sidebar-brand:hover .sidebar-logo.has-image img { transform: scale(1.08); }
[data-theme="dark"] .sidebar-logo.has-image img:not(.no-invert),
[data-theme="dark"] .ai-widget-bubble-img:not(.no-invert) {
  filter: invert(1) hue-rotate(180deg);
  transition: filter 200ms ease;
}
[data-theme="dark"] img.auto-invert-dark:not(.no-invert) { filter: invert(1) hue-rotate(180deg); transition: filter 200ms ease; }
.sidebar-brand-text {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.025em;
  line-height: 1.1;
  /* Subtle gradient text — top brighter for depth */
  background: linear-gradient(180deg, var(--foreground) 0%, color-mix(in srgb, var(--foreground) 85%, var(--foreground-muted)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sidebar-brand-info { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.sidebar-brand-tagline {
  font-size: 9.5px;
  color: var(--foreground-subtle);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-nav { flex: 1; padding: 16px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sidebar-section { margin-top: 12px; }
.sidebar-section:first-child { margin-top: 0; }
.sidebar-section-label { font-size: 10px; font-weight: 600; color: var(--foreground-subtle); text-transform: uppercase; letter-spacing: 0.1em; padding: 8px 10px 6px; }
.sidebar-section-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: transparent; border: none;
  padding: 8px 10px; font-size: 10px; font-weight: 700;
  color: var(--foreground-subtle); text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer; border-radius: 8px; font-family: inherit;
  transition: all var(--transition-fast);
}
.sidebar-section-toggle:hover { background: var(--secondary); color: var(--foreground); }
.sidebar-section-chevron { transition: transform 220ms var(--ease-smooth); flex-shrink: 0; opacity: 0.6; }
.sidebar-section.collapsed .sidebar-section-chevron { transform: rotate(-90deg); }
.sidebar-section-items { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; overflow: hidden; transition: max-height 240ms var(--ease-smooth), opacity 200ms; max-height: 800px; opacity: 1; }
.sidebar-section.collapsed .sidebar-section-items { max-height: 0; opacity: 0; pointer-events: none; padding-top: 0; }

.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--foreground-muted);
  font-size: 13px; font-weight: 500;
  transition: all var(--transition);
  cursor: pointer;
  position: relative;
}
.sidebar-link:hover { background: var(--secondary); color: var(--foreground); transform: translateX(2px); }
.sidebar-link.active {
  background: var(--surface);
  color: var(--foreground);
  font-weight: 600;
  box-shadow: var(--neu-in-sm);
}
.sidebar-link svg { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 2; }
.sidebar-footer { padding: 12px; flex-shrink: 0; border-top: 1px solid var(--border); }

/* =====  BUTTONS — PILL + NEUMORPHIC  ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 18px; height: 40px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  user-select: none;
  letter-spacing: -0.01em;
}
.btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn svg { width: 15px; height: 15px; stroke-width: 2.2; }
.btn-primary {
  background: var(--primary); color: var(--primary-foreground);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.25), var(--neu-out-sm);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -4px rgba(0,0,0,0.3), var(--neu-out); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--neu-in-sm); }
.btn-secondary {
  background: var(--surface); color: var(--foreground);
  box-shadow: var(--neu-out-sm);
}
.btn-secondary:hover { transform: translateY(-1px); box-shadow: var(--neu-out); }
.btn-secondary:active { transform: translateY(0); box-shadow: var(--neu-in-sm); }
.btn-ghost { background: transparent; color: var(--foreground-muted); }
.btn-ghost:hover { background: var(--secondary); color: var(--foreground); }
.btn-danger {
  background: var(--danger); color: white;
  box-shadow: 0 4px 14px -4px rgba(196, 74, 74, 0.4), var(--neu-out-sm);
}
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -4px rgba(196, 74, 74, 0.5); opacity: 0.95; }
.btn-danger:active { transform: translateY(0); }
.btn-sm { height: 32px; padding: 0 14px; font-size: 12px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 14px; }
.btn-icon { padding: 0; width: 40px; }
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-lg { width: 46px; }
.btn-block { width: 100%; }

/* New: Glass pill button (kontekstual / overlay) */
.btn-glass {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  color: var(--foreground);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.15);
}
.btn-glass:hover { background: var(--glass-bg-deep); transform: translateY(-1px); }

/* =====  INPUTS — NEUMORPHIC INSET  ===== */
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-label { font-size: 12px; font-weight: 600; color: var(--foreground-muted); letter-spacing: 0.02em; text-transform: uppercase; }
.input-hint { font-size: 12px; color: var(--foreground-subtle); }

.input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 14px;
  color: var(--foreground);
  background: var(--surface);
  border: none;
  border-radius: 12px;
  box-shadow: var(--neu-in-sm);
  transition: all var(--transition);
  outline: none;
}
.input::placeholder { color: var(--foreground-subtle); }
.input:hover { box-shadow: var(--neu-in); }
.input:focus { box-shadow: var(--neu-in), 0 0 0 2px var(--foreground); }
textarea.input { min-height: 88px; padding: 12px 16px; height: auto; resize: vertical; line-height: 1.5; }

.input-wrap { position: relative; }
.input-wrap .input-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--foreground-subtle); pointer-events: none;
}
.input-wrap .input { padding-left: 44px; }
.input-wrap .input-action {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none;
  padding: 6px; border-radius: 8px;
  cursor: pointer; color: var(--foreground-subtle);
  transition: all var(--transition);
}
.input-wrap .input-action:hover { background: var(--secondary); color: var(--foreground); }
.input-wrap .input-action svg { width: 16px; height: 16px; }

/* Checkbox — neumorphic */
.checkbox {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
  font-size: 13px; color: var(--foreground-muted);
}
.checkbox input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  border: none;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--neu-in-sm);
  cursor: pointer;
  position: relative;
  transition: all var(--transition);
  margin: 0;
}
.checkbox input[type="checkbox"]:hover { box-shadow: var(--neu-in); }
.checkbox input[type="checkbox"]:checked { background: var(--primary); box-shadow: 0 2px 6px -2px rgba(0,0,0,0.3); }
.checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ECE9E4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}
[data-theme="dark"] .checkbox input[type="checkbox"]:checked::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1815' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* =====  CARDS — NEUMORPHIC PUFFY  ===== */
.card {
  background: var(--surface);
  border: none;
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--neu-out);
  transition: all var(--transition);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--neu-out-lg); }
.card-interactive { cursor: pointer; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-title { font-size: 12px; font-weight: 600; color: var(--foreground-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.card-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface);
  display: grid; place-items: center;
  color: var(--foreground);
  flex-shrink: 0;
  box-shadow: var(--neu-in-sm);
}
.card-icon svg { width: 16px; height: 16px; stroke-width: 2; }
.card-value { font-size: 36px; font-weight: 700; letter-spacing: -0.04em; color: var(--foreground); margin: 4px 0 8px; line-height: 1; font-variant-numeric: tabular-nums; }
.card-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--foreground-subtle); }
.card-trend svg { width: 12px; height: 12px; }

/* =====  GRID  ===== */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* =====  BADGE — SOFT INSET  ===== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  font-size: 11px; font-weight: 600;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--surface);
  color: var(--foreground-muted);
  box-shadow: var(--neu-in-sm);
  letter-spacing: 0.02em;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { color: var(--success); }
.badge-warning { color: var(--warning); }
.badge-danger { color: var(--danger); }
.badge-info { color: var(--info); }

/* =====  AVATAR  ===== */
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--foreground);
  display: grid; place-items: center;
  font-weight: 600; font-size: 12px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  box-shadow: var(--neu-out-sm);
}
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-lg { width: 44px; height: 44px; font-size: 14px; }

/* =====  MENU — GLASS DROPDOWN  ===== */
.menu-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: transparent; border: none;
  border-radius: var(--radius-pill);
  cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--foreground);
  transition: all var(--transition);
}
.menu-trigger:hover { background: var(--secondary); }
.menu-wrap { position: relative; }
.menu {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  background: var(--glass-bg-deep);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 6px;
  min-width: 220px;
  box-shadow: 0 0 0 1px var(--glass-border-dark), 0 16px 48px -8px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  pointer-events: none;
  transition: all var(--transition-spring);
  z-index: 50;
}
.menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  font-size: 13px; color: var(--foreground);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--transition-fast);
  background: transparent; border: none;
  width: 100%; text-align: left; font-family: inherit;
}
.menu-item:hover { background: var(--secondary); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover { background: var(--danger-bg); }
.menu-item svg { width: 14px; height: 14px; stroke-width: 2; }
.menu-separator { height: 1px; background: var(--border); margin: 4px 0; }
.menu-label { padding: 9px 12px 4px; font-size: 10px; font-weight: 700; color: var(--foreground-subtle); text-transform: uppercase; letter-spacing: 0.1em; }

/* =====  TOAST — GLASS  ===== */
.toast-container {
  position: fixed; top: 16px; right: 16px;
  z-index: 100;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.toast {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--glass-bg-deep);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--glass-border-dark), 0 16px 48px -8px rgba(0,0,0,0.18);
  min-width: 280px;
  max-width: 380px;
  font-size: 13px;
  color: var(--foreground);
  animation: toast-in 320ms var(--ease-spring);
  pointer-events: auto;
}
.toast svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.toast.success svg { color: var(--success); }
.toast.warning svg { color: var(--warning); }
.toast.danger svg { color: var(--danger); }
.toast.info svg { color: var(--info); }
.toast-title { font-weight: 600; margin-bottom: 2px; }
.toast-message { color: var(--foreground-muted); font-size: 12px; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 600px) {
  .toast-container { top: auto; bottom: 16px; left: 16px; right: 16px; }
  .toast { min-width: 0; width: 100%; max-width: 100%; }
  @keyframes toast-in {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* =====  SPINNER  ===== */
.spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =====  EMPTY STATE  ===== */
.empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--foreground-muted);
}
.empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: var(--surface);
  display: grid; place-items: center;
  color: var(--foreground-muted);
  box-shadow: var(--neu-out-sm);
}
.empty-icon svg { width: 28px; height: 28px; stroke-width: 1.8; }
.empty-title { font-weight: 600; color: var(--foreground); margin-bottom: 6px; font-size: 16px; letter-spacing: -0.01em; }
.empty-message { font-size: 13px; line-height: 1.5; max-width: 320px; margin: 0 auto; }

/* =====  AUTH LAYOUT  ===== */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-visual {
  background: linear-gradient(135deg, var(--bg-tint-1) 0%, var(--surface-2) 100%);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px;
}
.auth-visual::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(201, 122, 58, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(90, 123, 156, 0.12) 0%, transparent 50%);
  pointer-events: none;
}
.auth-visual-content { position: relative; z-index: 1; max-width: 420px; }
.auth-visual-kicker { font-size: 12px; font-weight: 600; color: var(--foreground-subtle); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.auth-visual-title { font-size: 36px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 16px; }
.auth-visual-body { font-size: 15px; color: var(--foreground-muted); line-height: 1.6; }
.auth-visual-footer { position: relative; z-index: 1; font-size: 12px; color: var(--foreground-subtle); }
.auth-form { width: 100%; max-width: 380px; }
.auth-form-header { margin-bottom: 28px; }
.auth-form-title { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 6px; }
.auth-form-subtitle { font-size: 14px; color: var(--foreground-muted); }
.auth-form-body { display: flex; flex-direction: column; gap: 16px; }
.auth-form-footer { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); text-align: center; font-size: 13px; color: var(--foreground-muted); }
.auth-form-footer a { font-weight: 600; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; }
.auth-brand-logo {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--primary); color: var(--primary-foreground);
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
  box-shadow: var(--neu-out-sm);
}
.auth-brand-text { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }

/* =====  UTILITIES  ===== */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.w-full { width: 100%; }
.text-muted { color: var(--foreground-muted); }
.text-subtle { color: var(--foreground-subtle); }
.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.text-lg { font-size: 16px; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }

/* =====  EXPLICIT NEUMORPHIC + GLASS HELPERS (opt-in)  ===== */
.neu-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--neu-out);
  transition: all var(--transition);
}
.neu-card:hover { transform: translateY(-2px); box-shadow: var(--neu-out-lg); }
.neu-inset {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--neu-in-sm);
}
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--glass-border-dark), 0 16px 48px -12px rgba(0,0,0,0.2);
}
.glass-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500;
  color: var(--foreground);
}

/* Mesh gradient bg utility (untuk hero / layered glass) */
.bg-mesh {
  background:
    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--accent-warm) 35%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 30%, color-mix(in srgb, var(--info) 25%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--success) 20%, transparent) 0%, transparent 60%),
    var(--background);
}

/* =====  RESPONSIVE  ===== */
.sidebar-close {
  display: none;
  margin-left: auto;
  background: transparent; border: none;
  color: var(--foreground-muted);
  cursor: pointer;
  padding: 6px; border-radius: 8px;
  transition: all var(--transition);
}
.sidebar-close:hover { background: var(--secondary); color: var(--foreground); }

.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 39;
  opacity: 0;
  transition: opacity var(--transition-slow);
}
.sidebar-backdrop.visible { opacity: 1; }

@media (max-width: 1100px) {
  .page { padding: 22px; }
  .grid-2, .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }
  .form-row { flex-wrap: wrap; }
}

@media (max-width: 900px) {
  :root { --sidebar-width: 0px; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: -300px;
    width: 280px; height: 100vh; z-index: 40;
    transition: left var(--transition-slow);
    box-shadow: 12px 0 32px rgba(0,0,0,0.18);
  }
  .sidebar.open { left: 0; }
  .sidebar-close { display: inline-flex; align-items: center; justify-content: center; }
  .sidebar-backdrop { display: block; pointer-events: none; }
  .sidebar-backdrop.visible { pointer-events: auto; }
  .menu-toggle { display: inline-flex !important; }

  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
}

@media (max-width: 600px) {
  .page { padding: 14px; }
  .page-title { font-size: 24px; }
  .page-subtitle { font-size: 13px; }
  .page-header { flex-wrap: wrap; gap: 10px; }
  .topbar { padding: 0 14px; height: 56px; }
  .topbar-title { font-size: 15px; }
  .card { padding: 18px; border-radius: 22px; }
  .card-title { font-size: 12px; }
  .card-value { font-size: 28px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: 14px; }
  .stat-value { font-size: 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .form-row { flex-direction: column; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .tab { white-space: nowrap; flex-shrink: 0; }
  .table-wrap { margin: 0 -14px; border-radius: 0; }
  .menu-trigger > div:nth-child(2) { display: none; }
  .fin-kpi-row, .kpi-row, .log-kpi-row { grid-template-columns: 1fr 1fr !important; }
}

/* No-overflow + iOS optimizations */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
* { overflow-wrap: break-word; word-wrap: break-word; }

.app-shell {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

@media (hover: none) and (pointer: coarse) {
  button, .btn, [role="button"], a.btn, .sidebar-link, .menu-item, .tab,
  input[type="checkbox"], input[type="radio"], select {
    min-height: 44px;
    touch-action: manipulation;
  }
  .btn-sm, .btn-icon.btn-sm { min-height: 40px; min-width: 40px; }
  input, select, textarea, [contenteditable="true"] { font-size: 16px !important; }
  input.input-tiny, select.input-tiny { font-size: 12px !important; }
}

@media (max-width: 600px) {
  .auth-form, .modal, .modal-lg, .modal-xl { max-width: 100% !important; min-width: 0 !important; }
  input.input, select.select, textarea.input, .form-row > .input-group {
    min-width: 0 !important;
    width: 100%;
    box-sizing: border-box;
  }
  input, select, textarea, [contenteditable="true"] { font-size: 16px !important; }
  input.input-tiny, select.input-tiny { font-size: 12px !important; }
  .page-header > div { width: 100%; }
  .page-header .flex.gap-2 { flex-wrap: wrap; }
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table-wrap table, .matrix-wrap table, .ledger { display: table; }
  pre, code { max-width: 100%; overflow-x: auto; word-wrap: normal; }
  .kpi-tile, .stage-card { padding: 14px !important; }
  .topbar > .flex { gap: 4px; }
  .topbar .btn-sm { padding: 0 10px !important; }
  img { max-width: 100%; height: auto; }
}

@media (max-width: 380px) {
  .page { padding: 10px; }
  .page-title { font-size: 20px; }
  .topbar { padding: 0 10px; }
  .topbar-title { font-size: 14px; }
}

@media (max-width: 768px) {
  .profile-stat-grid, .gudang-grid, .tier-grid, .tier-selector,
  .pay-methods, .mig-stats, .fin-grid, .stage-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #inputPanel .grid[style*="repeat(5,1fr)"],
  #inputPanel .grid[style*="repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .method-tabs { grid-template-columns: repeat(3, 1fr); gap: 4px; }
}
@media (max-width: 600px) {
  .profile-stat-grid, .gudang-grid, .tier-grid, .tier-selector,
  .pay-methods, .fin-grid, .stage-grid {
    grid-template-columns: 1fr !important;
  }
  .mig-stats { grid-template-columns: repeat(2, 1fr) !important; }
  #inputPanel .grid[style*="repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   PRINT / PDF STYLE — Updated 2026-05-06 untuk Soft Material × Bauhaus
   - Force warm cream paper bg (bukan stark white) supaya konsisten dengan brand
   - Bauhaus accent colors untuk section headers + status indicators
   - Headings pakai bold weight + letter-spacing tight (Inter 700-800)
   - Tetap A4 portrait, 12mm margin
   ============================================================ */
@media print {
  .sidebar, .topbar, .sidebar-backdrop, .menu-toggle, .no-print { display: none !important; }
  .app-shell { grid-template-columns: 1fr !important; }
  :root[data-theme="dark"] body, body {
    background: #FAF8F3 !important;          /* warm cream paper, not stark white */
    color: #1A1916 !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* === FORMAL DOC (kontrak, invoice, BAST, BOQ summary) === */
  .formal-doc {
    background: #FAF8F3 !important;
    color: #1A1916 !important;
    box-shadow: none !important;
    border: none !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    line-height: 1.55;
  }
  .formal-doc * { color: #1A1916 !important; }
  .formal-doc h1, .formal-doc h2, .formal-doc h3 {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
  }
  /* Muted text — warm gray bukan zinc */
  .formal-doc .formal-brand-sub, .formal-doc .formal-meta, .formal-doc .info-label,
  .formal-doc .info-colon, .formal-doc .sig-role, .formal-doc .text-muted, .formal-doc .text-subtle,
  .formal-doc [style*="color:#6b7280"], .formal-doc [style*="color:#4b5563"],
  .formal-doc [style*="color:#374151"], .formal-doc [style*="color:#9ca3af"] {
    color: #6B6862 !important;
  }
  /* Section header — warm gray background dengan Bauhaus left border accent */
  .formal-doc .formal-section-hdr {
    background: #ECE9E4 !important;          /* warm cream-gray */
    color: #1A1916 !important;
    border: none !important;
    border-left: 3px solid #C44A3F !important;  /* Bauhaus red accent */
    padding-left: 12px !important;
    font-weight: 700 !important;
  }
  .formal-doc .formal-section-body {
    background: #FAF8F3 !important;
    border: 1px solid #D4CDC0 !important;     /* warm border */
  }
  /* Header divider — bold Bauhaus stroke */
  .formal-doc .formal-head {
    border-bottom: 2px solid #1A1916 !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
  }
  .formal-doc .sig-name {
    border-top: 1px solid #1A1916 !important;
    padding-top: 6px !important;
    font-weight: 700 !important;
  }
  /* Table — warm + clean */
  .formal-doc table {
    background: #FAF8F3 !important;
    color: #1A1916 !important;
    border-collapse: collapse !important;
  }
  .formal-doc table th, .formal-doc table td {
    background: #FAF8F3 !important;
    color: #1A1916 !important;
    border: 1px solid #D4CDC0 !important;
    padding: 8px 10px !important;
  }
  .formal-doc table thead th {
    background: #ECE9E4 !important;            /* warm cream-gray header */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
  }
  /* Pasal list (kontrak) */
  .formal-doc .pasal-list > li::before {
    color: #1A1916 !important;
    font-weight: 700 !important;
  }
  /* Milestone table dashed dividers */
  .formal-doc .milestone-print-table td {
    border-bottom: 1px dashed #C0B8A8 !important;
  }
  .app-main { margin-left: 0 !important; }
  .page { padding: 0 !important; }
  .approval-banner, .modal-backdrop, .toast-container, .toast,
  #cmdPalette, #notifPanel, button:not(.print-keep) { display: none !important; }
  .formal-doc a { color: #1A1916 !important; text-decoration: none !important; }
  /* Bauhaus status colors untuk print */
  .formal-doc [style*="color:var(--success)"], .formal-doc [style*="color: var(--success)"], .formal-doc [style*="color:#059669"], .formal-doc [style*="color:#16a34a"] { color: #5A8262 !important; }
  .formal-doc [style*="color:var(--danger)"], .formal-doc [style*="color: var(--danger)"], .formal-doc [style*="color:#dc2626"] { color: #C44A3F !important; }
  .formal-doc [style*="color:var(--warning)"], .formal-doc [style*="color: var(--warning)"], .formal-doc [style*="color:#d97706"], .formal-doc [style*="color:#f59e0b"] { color: #D4A82E !important; }
  .formal-doc [style*="color:var(--info)"], .formal-doc [style*="color: var(--info)"], .formal-doc [style*="color:#2563eb"], .formal-doc [style*="color:#3b82f6"] { color: #3F5C7C !important; }
  /* Document number (top-right corner) — kotak Bauhaus accent */
  .formal-doc .formal-doc-number, .formal-doc [data-doc-number] {
    background: #1A1916 !important;
    color: #FAF8F3 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }
  /* Stamp area (cap signature) */
  .formal-doc .stamp-area {
    border: 1.5px dashed #6B6862 !important;
    background: transparent !important;
  }
  @page { size: A4; margin: 14mm; }
}

.menu-toggle { display: none; }

/* =====  REDUCED MOTION  ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====  SKELETON LOADING  ===== */
.skeleton {
  background: var(--surface);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--neu-in-sm);
}
.skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--background) 80%, transparent), transparent);
  animation: skel-shimmer 1.6s ease-in-out infinite;
}
@keyframes skel-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Page enter animation */
#appContent { animation: pageFadeIn 280ms var(--ease-smooth); }
#appContent.hidden { animation: none; }
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   GLOBAL BREATHING ROOM PATCH (Round 9, 2026-05-06)
   User complaint: "beberapa yg saya liat ada yg kerapetan".
   Audit found: 41/43 modules pakai padding < 14px, 37/43 gap < 14px.
   Fix: gentle bump untuk SEMUA cards/rows/containers tanpa break layout.
   Pakai :where() supaya specificity = 0 → masih bisa di-override per-modul.
   ============================================================ */
:where(.card, .stat, .project-card, .section-group) {
  padding: 22px;
}
:where(.card-header) { margin-bottom: 18px; gap: 14px; }
:where(.stat-row) { gap: 16px; margin-bottom: 28px; }
:where(.grid) { gap: 16px; }
:where(.grid-2, .grid-3, .grid-4) { gap: 18px; }
:where(.flex.gap-2) { gap: 10px; }
:where(.flex.gap-3) { gap: 14px; }
:where(.page) { padding: 32px; }
:where(.page-header) { margin-bottom: 32px; gap: 16px; }
:where(.filter-bar) { gap: 12px; margin-bottom: 24px; }
/* Tables — slightly more breathing in cells */
:where(.table) th { padding: 14px 18px; }
:where(.table) td { padding: 16px 18px; }
/* Form rows */
:where(.form-row) { gap: 16px; }
:where(.input-group) { gap: 8px; }

/* Mobile breathing — slightly less (mobile already tighter ok) */
@media (max-width: 600px) {
  :where(.card, .stat, .project-card, .section-group) { padding: 18px; }
  :where(.page) { padding: 16px; }
  :where(.page-header) { margin-bottom: 22px; }
  :where(.stat-row) { gap: 12px; margin-bottom: 22px; }
  :where(.grid-2, .grid-3, .grid-4) { gap: 14px; }
  :where(.table) th { padding: 12px 14px; }
  :where(.table) td { padding: 14px 14px; }
}

/* ============================================================
   COLOR MIGRATION HELPER — auto-replace ngejreng Tailwind colors
   yang sering muncul di legacy modules. Aplikasi ke pseudo-classes
   biar tidak break inline `style="color:#3b82f6"` (tetap rendered)
   tapi class-based usage akan ke-Bauhaus-kan.
   Pakai class .ngejreng-fix kalau perlu paksa per-element.
   ============================================================ */
.ngejreng-fix-blue { color: var(--bauhaus-blue) !important; background: var(--info-bg) !important; }
.ngejreng-fix-yellow { color: var(--bauhaus-yellow) !important; background: var(--warning-bg) !important; }
.ngejreng-fix-red { color: var(--bauhaus-red) !important; background: var(--danger-bg) !important; }
.ngejreng-fix-green { color: var(--bauhaus-green) !important; background: var(--success-bg) !important; }
.ngejreng-fix-purple { color: var(--bauhaus-purple) !important; }

/* Catch-all cleanup: kill border yang tipis hardcoded di card-like containers */
:where(.card, .project-card, .section-group, .stat) {
  border: none;
}
:where(.card, .project-card, .stat):not(.card-flat) {
  box-shadow: var(--neu-out-sm);
}
:where(.card:hover, .project-card:hover, .stat:hover) {
  box-shadow: var(--neu-out);
}