/* AL-MULK BRILink — Design tokens (identik dengan src/styles.css TSX edition) */
:root {
  --radius: 0.875rem;
  --background: oklch(0.99 0.005 160);
  --foreground: oklch(0.18 0.03 200);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.03 200);
  --primary: oklch(0.62 0.16 162);
  --primary-foreground: oklch(0.99 0.005 160);
  --secondary: oklch(0.96 0.015 200);
  --secondary-foreground: oklch(0.22 0.04 220);
  --muted: oklch(0.96 0.01 200);
  --muted-foreground: oklch(0.18 0.03 202.61);
  --text-muted: oklch(0.18 0.03 202.61);
  --accent: oklch(0.55 0.18 235);
  --accent-foreground: oklch(0.99 0 0);
  --destructive: oklch(0.6 0.22 27);
  --destructive-foreground: oklch(0.99 0 0);
  --success: oklch(0.66 0.16 155);
  --success-foreground: oklch(0.99 0 0);
  --warning: oklch(0.78 0.15 75);
  --warning-foreground: oklch(0.2 0.04 75);
  --info: oklch(0.62 0.14 235);
  --gold: oklch(0.82 0.13 85);
  --gold-foreground: oklch(0.22 0.05 80);
  --border: oklch(0.92 0.01 200);
  --input: oklch(0.93 0.01 200);
  --ring: oklch(0.62 0.16 162);
  --sidebar: oklch(0.99 0.008 160);
  --sidebar-foreground: oklch(0.22 0.03 200);
  --sidebar-accent: oklch(0.95 0.015 162);

  --gradient-brand: linear-gradient(135deg, oklch(0.62 0.16 162), oklch(0.55 0.18 235));
  --gradient-gold: linear-gradient(135deg, oklch(0.85 0.14 85), oklch(0.72 0.16 60));
  --shadow-elegant: 0 10px 40px -12px oklch(0.62 0.16 162 / 0.3);
  --shadow-glow: 0 0 60px -10px oklch(0.62 0.16 162 / 0.45);
}

.dark {
  --background: oklch(0.16 0.02 220);
  --foreground: oklch(0.97 0.01 200);
  --card: oklch(0.21 0.025 220);
  --primary: oklch(0.7 0.17 162);
  --secondary: oklch(0.27 0.03 220);
  --muted: oklch(0.25 0.025 220);
  --muted-foreground: oklch(1 0 0);
  --text-muted: oklch(1 0 0);
  --border: oklch(0.3 0.025 220);
  --sidebar: oklch(0.18 0.025 220);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tailwind-friendly utility shims so PHP markup uses identical class names */
.gradient-brand { background-image: var(--gradient-brand); }
.gradient-gold  { background-image: var(--gradient-gold); }
.shadow-elegant { box-shadow: var(--shadow-elegant); }
.shadow-glow    { box-shadow: var(--shadow-glow); }
.text-gradient-brand {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-card        { background-color: var(--card); }
.bg-primary     { background-color: var(--primary); }
.bg-accent      { background-color: var(--accent); }
.bg-success     { background-color: var(--success); }
.bg-warning     { background-color: var(--warning); }
.bg-destructive { background-color: var(--destructive); }
.bg-muted       { background-color: var(--muted); }
.bg-sidebar     { background-color: var(--sidebar); }

.text-primary     { color: var(--primary); }
.text-accent      { color: var(--accent); }
.text-success     { color: var(--success); }
.text-warning     { color: var(--warning-foreground); }
.text-destructive { color: var(--destructive); }
.text-muted       { color: var(--text-muted) !important; }
html:not(.dark) .text-muted { color: oklch(0.18 0.03 202.61) !important; }
html.dark .text-muted { color: oklch(1 0 0) !important; }
.text-foreground  { color: var(--foreground); }
.text-primary-foreground { color: var(--primary-foreground); }

.border-default { border: 1px solid var(--border); }
.ring-primary   { box-shadow: 0 0 0 2px var(--ring); }

.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }

/* Sidebar transition */
.app-sidebar {
  transition: transform .25s ease, opacity .25s ease;
  will-change: transform;
}
@media (max-width: 1024px) {
  .app-sidebar {
    transform: translateX(-100%);
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(18rem, 82vw);
    max-width: 82vw;
    height: 100dvh;
    overflow-y: auto;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  .app-sidebar.open { transform: translateX(0); box-shadow: 0 0 80px rgba(0,0,0,.25); }
}
@media (min-width: 1025px) {
  .app-sidebar { position: sticky; top: 0; height: 100vh; }
}

/* Card hover */
.card-hover { transition: box-shadow .2s, transform .2s; }
.card-hover:hover { box-shadow: var(--shadow-elegant); transform: translateY(-1px); }

/* Pulse dot */
.pulse-dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--success);
  box-shadow: 0 0 0 0 oklch(0.66 0.16 155 / 0.7);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 oklch(0.66 0.16 155 / 0.7); }
  70% { box-shadow: 0 0 0 12px oklch(0.66 0.16 155 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.66 0.16 155 / 0); }
}

/* Login glassmorphism */
.glass {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.5);
}

[x-cloak] { display: none !important; }

/* Mobile / PWA hardening */
@media (max-width: 768px) {
  .app-main {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.9rem !important;
    padding-bottom: 7.75rem !important;
  }
  .app-shell .rounded-2xl { border-radius: 1.25rem; }
  .app-shell .rounded-xl { border-radius: 0.85rem; }
  .app-shell .p-5 { padding: 1rem !important; }
  .app-shell .p-6 { padding: 1rem !important; }
  .app-shell .px-5 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .app-shell .py-5 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .app-shell h1 { line-height: 1.08; }
  .app-shell h2, .app-shell h3 { line-height: 1.15; }
  .app-shell .overflow-x-auto { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .app-shell table { min-width: max-content; }
  .app-shell th,
  .app-shell td { white-space: nowrap; }
  .app-shell .grid[class*="grid-cols-"] { gap: 0.75rem; }
  .app-shell dialog { width: calc(100vw - 1rem) !important; max-width: calc(100vw - 1rem) !important; margin: auto; }
  .app-shell dialog .p-5,
  .app-shell dialog .p-6 { padding: 0.9rem !important; }
  .app-shell .text-3xl { font-size: 1.55rem; line-height: 1.1; }
  .app-shell .text-2xl { font-size: 1.25rem; line-height: 1.15; }
}
@supports (padding: env(safe-area-inset-bottom)) {
  .app-main { padding-bottom: max(7.25rem, calc(env(safe-area-inset-bottom) + 6.75rem)); }
}


/* Sidebar desktop collapse */
@media (min-width: 1025px) {
  .app-shell.sidebar-collapsed .app-sidebar {
    width: 5.5rem !important;
  }
  .app-shell.sidebar-collapsed .sidebar-brand,
  .app-shell.sidebar-collapsed .sidebar-section-title,
  .app-shell.sidebar-collapsed .sidebar-label,
  .app-shell.sidebar-collapsed .sidebar-footer .sidebar-label,
  .app-shell.sidebar-collapsed .sidebar-brand-text {
    display: none !important;
  }
  .app-shell.sidebar-collapsed .app-sidebar {
    overflow-x: hidden;
  }
  .app-shell.sidebar-collapsed .app-sidebar .sidebar-link {
    justify-content: center;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .app-shell.sidebar-collapsed .app-sidebar .sidebar-icon {
    width: 2.75rem;
    height: 2.75rem;
  }
  .app-shell.sidebar-collapsed .app-sidebar nav {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }
  .app-shell.sidebar-collapsed .app-sidebar .sidebar-section {
    margin-bottom: 0.25rem;
  }
  .app-shell.sidebar-collapsed .app-sidebar .sidebar-footer {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .app-shell.sidebar-collapsed .app-sidebar .sidebar-footer a {
    justify-content: center;
  }
}

/* Finance navigation helpers */
.finance-sections {
  scroll-behavior: smooth;
}
.finance-chip {
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.finance-chip:hover {
  transform: translateY(-1px);
}

/* App-like polish */
body {
  overscroll-behavior-y: none;
}
html, body, .app-shell {
  background: var(--background);
}
.app-main {
  min-height: calc(100dvh - 4rem);
}
@media (max-width: 1024px) {
  .app-shell .text-3xl { font-size: 1.6rem; line-height: 1.1; }
  .app-shell .text-2xl { font-size: 1.3rem; line-height: 1.1; }
  .app-shell .text-xl { font-size: 1.05rem; line-height: 1.2; }
  .app-shell .grid[class*="grid-cols-"] { gap: 0.75rem; }
}


/* Mobile bottom navigation */
.bottom-nav {
  bottom: calc(0.5rem + env(safe-area-inset-bottom));
}
.bottom-nav-panel {
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
.bottom-nav-item {
  min-height: 4.75rem;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item:active {
  transform: translateY(1px) scale(0.98);
}
.bottom-nav-pill {
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.bottom-nav-pill-regular {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 0.95rem;
  background: var(--muted);
  color: var(--foreground);
}
.bottom-nav-pill-center {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: var(--gradient-brand);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-elegant);
}
.bottom-nav-pill.is-active.bottom-nav-pill-regular {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-elegant);
}
.bottom-nav-pill.is-active.bottom-nav-pill-center {
  transform: translateY(-1px) scale(1.02);
  box-shadow: var(--shadow-glow);
}
.bottom-nav-center {
  margin-top: -1.15rem;
}
.quick-menu-strip {
  scrollbar-width: none;
}
.quick-menu-strip::-webkit-scrollbar {
  display: none;
}
.menu-sheet-scroll {
  -webkit-overflow-scrolling: touch;
}
@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-nav-panel {
    padding-bottom: env(safe-area-inset-bottom);
  }
}