/* Pasar — design system */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --pasar-green: #1F4D3A;
  --pasar-green-dim: #2C6249;
  --pasar-cream: #FAF6EC;
  --pasar-cream-deep: #F1E9D2;
  --pasar-terracotta: #C75B3C;
  --pasar-terracotta-soft: #E8927A;
  --pasar-gold: #D4A537;
  --pasar-gold-soft: #E8C875;
  --pasar-sage: #A8B89A;
  --pasar-ink: #1A1A1A;
  --pasar-muted: #6B6558;
  --pasar-line: #E8DFC9;
  --pasar-line-strong: #C9BFA3;
}

html, body { background: var(--pasar-cream); color: var(--pasar-ink); }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-feature-settings: "ss01"; }

.font-display { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-variation-settings: "SOFT" 50, "WONK" 0; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }

/* Eyebrow label — bilingual small caps */
.eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--pasar-muted);
}

/* Batik-inspired ornamental divider — geometric kawung */
.batik-line {
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 14'><g fill='none' stroke='%231F4D3A' stroke-width='1.1' opacity='0.55'><circle cx='10' cy='7' r='3.2'/><circle cx='30' cy='7' r='3.2'/><circle cx='50' cy='7' r='3.2'/><circle cx='70' cy='7' r='3.2'/><path d='M0 7 H80'/></g></svg>");
  background-repeat: repeat-x;
  background-size: 80px 14px;
  background-position: center;
}

.batik-line-gold {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 14'><g fill='none' stroke='%23D4A537' stroke-width='1.1' opacity='0.85'><circle cx='10' cy='7' r='3.2'/><circle cx='30' cy='7' r='3.2'/><circle cx='50' cy='7' r='3.2'/><circle cx='70' cy='7' r='3.2'/><path d='M0 7 H80'/></g></svg>");
}

/* Subtle paper grain bg overlay */
.paper-grain {
  position: relative;
}
.paper-grain::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Sidebar */
.sidebar { background: var(--pasar-cream); border-right: 1px solid var(--pasar-line); }
.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  color: var(--pasar-ink); font-weight: 500;
  font-size: 14px;
  position: relative;
  transition: background 120ms ease;
}
.nav-link:hover { background: var(--pasar-cream-deep); }
.nav-link.active {
  background: var(--pasar-green); color: var(--pasar-cream);
}
.nav-link.active::after {
  content: '';
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pasar-gold);
}
.nav-section-label {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--pasar-muted); padding: 18px 14px 6px; font-weight: 700;
}

/* KPI card */
.kpi-card {
  background: white;
  border: 1px solid var(--pasar-line);
  border-radius: 14px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.kpi-card .kpi-num {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-currency {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--pasar-muted);
  margin-right: 4px;
  vertical-align: 6px;
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 14px; transition: all 140ms ease; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--pasar-green); color: var(--pasar-cream); }
.btn-primary:hover { background: var(--pasar-green-dim); }
.btn-ghost { background: transparent; color: var(--pasar-ink); border-color: var(--pasar-line-strong); }
.btn-ghost:hover { background: var(--pasar-cream-deep); }
.btn-danger { background: var(--pasar-terracotta); color: white; }
.btn-gold { background: var(--pasar-gold); color: var(--pasar-ink); }

/* Pills / badges */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.pill-green { background: rgba(31,77,58,0.08); color: var(--pasar-green); }
.pill-terra { background: rgba(199,91,60,0.12); color: var(--pasar-terracotta); }
.pill-gold { background: rgba(212,165,55,0.18); color: #8B6A1E; }
.pill-muted { background: var(--pasar-cream-deep); color: var(--pasar-muted); }
.pill-sage  { background: rgba(168,184,154,0.25); color: #4A5840; }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pasar-muted); font-weight: 700; padding: 14px 16px; border-bottom: 1px solid var(--pasar-line); }
.tbl td { padding: 16px; border-bottom: 1px solid var(--pasar-line); font-size: 14px; vertical-align: middle; }
.tbl tr:hover td { background: rgba(250,246,236,0.6); }
.tbl-card { background: white; border: 1px solid var(--pasar-line); border-radius: 16px; overflow: hidden; }

/* Inputs */
.input {
  width: 100%; background: white; border: 1px solid var(--pasar-line-strong);
  border-radius: 10px; padding: 10px 14px; font-size: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: border-color 140ms;
}
.input:focus { outline: none; border-color: var(--pasar-green); box-shadow: 0 0 0 3px rgba(31,77,58,0.12); }
.input-lg {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 500;
  padding: 18px 20px;
  border-radius: 14px;
  font-variant-numeric: tabular-nums;
}

/* Slider */
input[type="range"].pasar-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--pasar-green) 0%, var(--pasar-green) var(--val,50%), var(--pasar-line-strong) var(--val,50%), var(--pasar-line-strong) 100%);
  outline: none;
}
input[type="range"].pasar-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--pasar-cream); border: 3px solid var(--pasar-green);
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Login bg */
.login-bg {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(212,165,55,0.18), transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 90%, rgba(31,77,58,0.18), transparent 60%),
    var(--pasar-cream);
}

/* Mobile (host) */
.host-shell {
  max-width: 430px; margin: 0 auto; min-height: 100vh;
  background: var(--pasar-cream);
  position: relative; padding-bottom: 88px;
}
.host-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 430px; margin: 0 auto;
  background: white; border-top: 1px solid var(--pasar-line);
  display: flex; justify-content: space-around;
  padding: 10px 0 18px;
}
.host-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11px; color: var(--pasar-muted); font-weight: 600; letter-spacing: 0.06em;
}
.host-bottom-nav a.active { color: var(--pasar-green); }

/* Animations */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.rise > * { opacity: 0; animation: rise 480ms ease-out forwards; }
.rise > *:nth-child(1){animation-delay:40ms} .rise > *:nth-child(2){animation-delay:90ms}
.rise > *:nth-child(3){animation-delay:140ms} .rise > *:nth-child(4){animation-delay:190ms}
.rise > *:nth-child(5){animation-delay:240ms} .rise > *:nth-child(6){animation-delay:290ms}
.rise > *:nth-child(7){animation-delay:340ms} .rise > *:nth-child(8){animation-delay:390ms}

/* Toast */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--pasar-ink); color: var(--pasar-cream);
  padding: 12px 18px; border-radius: 10px; font-size: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  opacity: 0; transform: translateY(8px);
  transition: all 200ms ease;
  z-index: 100;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* Misc */
.divider-y { border-top: 1px solid var(--pasar-line); }
.shadow-card { box-shadow: 0 1px 0 var(--pasar-line), 0 8px 28px -16px rgba(31,77,58,0.18); }
.ring-gold { box-shadow: 0 0 0 1px var(--pasar-gold); }

/* Currency tag */
.rm { color: var(--pasar-muted); font-family: 'Fraunces', serif; font-style: italic; margin-right: 2px; font-size: 0.85em; }

/* Sedekah glow */
.sedekah-card {
  background: linear-gradient(135deg, #FFF6DC 0%, #F8E9B6 100%);
  border: 1px solid var(--pasar-gold);
  position: relative;
}
.sedekah-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--pasar-gold), var(--pasar-terracotta), var(--pasar-gold));
}