/* ════════════════════════════════════════════════════════════════════
   SPPG V2 THEME  ·  Modern SaaS/Fintech Design
   Sistem Informasi Properti Investasi
════════════════════════════════════════════════════════════════════ */

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

/* DaisyUI Color Scheme Overrides */
[data-theme="light"] {
  /* Primary: Indigo 600 */
  --p: 43% 0.23 273;    --pc: 100% 0 0;
  /* Secondary: Sky 500 */
  --s: 62% 0.15 240;    --sc: 100% 0 0;
  /* Accent: Teal 500 */
  --a: 65% 0.13 180;    --ac: 100% 0 0;
  /* Neutral: Slate 700 */
  --n: 35% 0.03 260;    --nc: 100% 0 0;
  /* Base */
  --b1: 100% 0 0;       /* #ffffff */
  --b2: 98% 0.01 260;   /* Slate 50 */
  --b3: 94% 0.02 260;   /* Slate 200 */
  --bc: 25% 0.04 260;   /* Slate 800 */
  
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
}

[data-theme="dark"] {
  /* Primary: Indigo 500 */
  --p: 54% 0.22 273;    --pc: 100% 0 0;
  /* Secondary: Sky 400 */
  --s: 70% 0.14 240;    --sc: 15% 0.05 240;
  /* Accent: Teal 400 */
  --a: 75% 0.12 180;    --ac: 15% 0.05 180;
  /* Neutral: Slate 300 */
  --n: 85% 0.02 260;    --nc: 20% 0.05 260;
  /* Base: Slate 900 */
  --b1: 21% 0.035 264;  /* #0f172a */
  --b2: 15% 0.03 264;   /* #020617 */
  --b3: 25% 0.04 264;   /* Slate 800 */
  --bc: 90% 0.01 260;   /* Slate 100 */
  
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
}

/* Base Body Styles */
html, body {
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth; /* Fallback if Lenis fails */
}

/* Background gradient animation */
.bg-gradient-animated {
  background: linear-gradient(-45deg, 
    color-mix(in oklch, oklch(var(--b1)), oklch(var(--p)) 5%), 
    color-mix(in oklch, oklch(var(--b1)), oklch(var(--s)) 5%), 
    color-mix(in oklch, oklch(var(--b1)), oklch(var(--a)) 5%)
  );
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Premium Glassmorphism Cards ────────────────────────────── */
.glass-card {
  background: color-mix(in oklch, oklch(var(--b1)), transparent 20%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in oklch, oklch(var(--bc)), transparent 90%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .glass-card {
  background: color-mix(in oklch, oklch(var(--b1)), transparent 40%);
  border: 1px solid color-mix(in oklch, oklch(var(--bc)), transparent 85%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
  transform: skewX(-20deg);
  transition: 0.5s;
}
.stat-card:hover::before {
  left: 150%;
}
.stat-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  border-color: color-mix(in oklch, oklch(var(--p)), transparent 50%);
}
[data-theme="dark"] .stat-card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px color-mix(in oklch, oklch(var(--p)), transparent 80%);
}

/* ── Skeleton Loading ──────────────────────────────────────── */
.skeleton-box {
  background-color: color-mix(in oklch, oklch(var(--bc)), transparent 90%);
  border-radius: 4px;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklch, oklch(var(--b1)), transparent 40%) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── CSS Scroll-Driven Animations ────────────────────────────── */
@supports (animation-timeline: view()) {
  .reveal-on-scroll {
    animation: reveal-element linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }
  @keyframes reveal-element {
    from {
      opacity: 0;
      transform: translateY(30px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

/* ── View Transitions API ────────────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 200ms ease-out fade-out; }
::view-transition-new(root) { animation: 300ms ease-in fade-in; }
@keyframes fade-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } }

/* ── Smooth UI Enhancements ─────────────────────────────────── */
.table th {
  background: color-mix(in oklch, oklch(var(--b2)), transparent 20%);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}
.table-zebra tbody tr:nth-child(even) {
  background-color: color-mix(in oklch, oklch(var(--b2)), transparent 50%);
}
.table tbody tr:hover {
  background-color: color-mix(in oklch, oklch(var(--p)), transparent 90%);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--b1); }
::-webkit-scrollbar-thumb { background: color-mix(in oklch, oklch(var(--bc)), transparent 70%); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--p); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ── Particles Canvas ────────────────────────────────────────── */
#tsparticles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ── Live Auto-refresh UI ────────────────────────────────────── */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  background: color-mix(in oklch, oklch(var(--a)), transparent 90%);
  color: oklch(var(--a));
  border: 1px solid color-mix(in oklch, oklch(var(--a)), transparent 70%);
}
.live-badge .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: oklch(var(--a));
  box-shadow: 0 0 8px oklch(var(--a));
  animation: pulse-live 1.5s infinite ease-in-out;
}
@keyframes pulse-live {
  0% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 0 0 oklch(var(--a) / 0.7); }
  50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 0 6px oklch(var(--a) / 0); }
  100% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 0 0 oklch(var(--a) / 0); }
}
#autoRefreshProgress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, oklch(var(--p)), oklch(var(--s)), oklch(var(--a)));
  z-index: 100;
  transform: scaleX(0);
  transform-origin: 0% 50%;
  transition: transform 1s linear, opacity 0.5s;
  pointer-events: none;
  opacity: 0;
}
#autoRefreshProgress.active {
  opacity: 1;
}

/* ── Interactive Command Palette Modal ───────────────────────── */
.cmd-palette-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cmd-palette-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}
.cmd-palette-window {
  width: 100%;
  max-width: 600px;
  background: color-mix(in oklch, oklch(var(--b1)), transparent 10%);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid color-mix(in oklch, oklch(var(--bc)), transparent 85%);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 40px color-mix(in oklch, oklch(var(--p)), transparent 95%);
  border-radius: 1rem;
  overflow: hidden;
  transform: translateY(-20px) scale(0.95);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cmd-palette-backdrop.active .cmd-palette-window {
  transform: translateY(0) scale(1);
}
.cmd-search-wrapper {
  display: flex;
  align-items: center;
  border-b: 1px solid color-mix(in oklch, oklch(var(--bc)), transparent 90%);
  padding: 0.75rem 1.25rem;
  gap: 0.75rem;
}
.cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 1rem;
  color: oklch(var(--bc));
  outline: none;
}
.cmd-input::placeholder {
  color: color-mix(in oklch, oklch(var(--bc)), transparent 60%);
}
.cmd-list {
  max-height: 350px;
  overflow-y: auto;
  padding: 0.5rem;
}
.cmd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
  color: oklch(var(--bc) / 0.85);
  gap: 0.75rem;
}
.cmd-item:hover, .cmd-item.selected {
  background-color: oklch(var(--p) / 0.1);
  color: oklch(var(--p));
  transform: translateX(4px);
}
.cmd-item:hover .cmd-shortcut, .cmd-item.selected .cmd-shortcut {
  background-color: oklch(var(--p) / 0.2);
  color: oklch(var(--p));
}
.cmd-shortcut {
  font-size: 0.7rem;
  font-family: monospace;
  padding: 0.15rem 0.4rem;
  background-color: color-mix(in oklch, oklch(var(--bc)), transparent 92%);
  border-radius: 0.25rem;
  border: 1px solid color-mix(in oklch, oklch(var(--bc)), transparent 85%);
  color: oklch(var(--bc) / 0.6);
}
.cmd-category {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem 0.25rem 1rem;
  color: color-mix(in oklch, oklch(var(--bc)), transparent 50%);
}

/* ── Kbd Badge in Navbar Search ───────────────────────────────── */
.search-kbd {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 0.1rem;
  pointer-events: none;
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.6;
}

/* ── Sticky Table & Keyboard Focus Overrides ───────────────────── */
#dataTable tr.keyboard-focused {
  outline: 2px solid oklch(var(--p));
  outline-offset: -2px;
  background-color: oklch(var(--p) / 0.08) !important;
}