/* ============================================================
   RELIGIO PRO — Design Tokens
   Premium VVIP — Onyx + Gold + Cream
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap");

:root {
  /* ---------- Surface (Onyx scale) ---------- */
  --ink-1000: #050403;          /* deepest void */
  --ink-950:  #0A0908;          /* page bg */
  --ink-900:  #11100E;          /* surface */
  --ink-850:  #161513;          /* raised surface */
  --ink-800:  #1C1A17;          /* card */
  --ink-700:  #25221E;          /* hover / chip */
  --ink-600:  #2F2B25;          /* border strong */
  --ink-500:  #3A3630;          /* border */
  --ink-400:  #4A463E;          /* divider */
  --ink-300:  #6B6558;          /* muted text */
  --ink-200:  #8E8676;          /* secondary text */
  --ink-100:  #B8AF9D;          /* tertiary */
  --ink-50:   #DCD3BF;          /* near-cream */

  /* ---------- Cream / Parchment ---------- */
  --cream-50:  #FBF8F0;
  --cream-100: #F4EEDE;
  --cream-200: #EDE6D3;         /* primary cream */
  --cream-300: #D9CFB6;
  --cream-400: #B8AC8F;

  /* ---------- Gold scale ---------- */
  --gold-50:  #F6EDC9;
  --gold-100: #E9D690;
  --gold-200: #DCC36A;
  --gold-300: #D4AF37;          /* signature gold */
  --gold-400: #BE9A2A;
  --gold-500: #97781F;
  --gold-600: #6F5816;
  --gold-700: #483809;

  /* ---------- Semantic (muted, jewel-toned) ---------- */
  --emerald:  #4A8F6D;          /* success / lunas */
  --emerald-soft: #1E3328;
  --ruby:     #B5564A;          /* danger / SOS */
  --ruby-soft: #341A18;
  --sapphire: #4A6F8F;          /* info */
  --sapphire-soft: #182634;
  --amber:    #C9933B;          /* warning */
  --amber-soft: #2F2415;

  /* ---------- Currency hues ---------- */
  --currency-idr: #D4AF37;
  --currency-usd: #6FA28A;
  --currency-sar: #B89456;

  /* ---------- Typography ---------- */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-arabic: "Amiri", "Times New Roman", serif;

  /* type scale */
  --t-hero: clamp(56px, 8vw, 112px);
  --t-display: 64px;
  --t-h1: 44px;
  --t-h2: 32px;
  --t-h3: 24px;
  --t-h4: 18px;
  --t-body: 15px;
  --t-small: 13px;
  --t-tiny: 11px;
  --t-mono: 12px;

  /* ---------- Spacing scale (4-base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Radius ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---------- Shadows / glow ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 24px 64px -16px rgba(0,0,0,0.7), 0 4px 8px rgba(0,0,0,0.35);
  --shadow-gold: 0 0 0 1px rgba(212,175,55,0.25), 0 12px 32px -8px rgba(212,175,55,0.18);
  --glow-gold: 0 0 36px rgba(212,175,55,0.28);
  --inset-hairline: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ---------- Borders ---------- */
  --hairline: 1px solid var(--ink-600);
  --hairline-soft: 1px solid var(--ink-700);
  --hairline-gold: 1px solid rgba(212,175,55,0.3);
  --hairline-gold-strong: 1px solid var(--gold-300);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-mid: 240ms;
  --dur-slow: 480ms;

  /* ---------- Layout ---------- */
  --container: 1240px;
  --gutter: 24px;
}

/* ============================================================
   Base reset & body
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--cream-200);
  background: var(--ink-950);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}

/* selection */
::selection { background: var(--gold-300); color: var(--ink-950); }

/* ============================================================
   Utility classes
   ============================================================ */
.font-display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
.font-mono    { font-family: var(--font-mono); }
.font-arabic  { font-family: var(--font-arabic); direction: rtl; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
  font-weight: 500;
}

.muted { color: var(--ink-200); }
.dim   { color: var(--ink-300); }
.cream { color: var(--cream-200); }
.gold  { color: var(--gold-300); }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-500), transparent);
  border: 0;
}
.divider-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-300), transparent);
  border: 0;
  opacity: 0.6;
}

/* ============================================================
   Component primitives
   ============================================================ */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.btn--primary {
  background: linear-gradient(180deg, var(--gold-200), var(--gold-400));
  color: var(--ink-950);
  border-color: var(--gold-400);
  box-shadow: var(--inset-hairline), 0 1px 0 rgba(0,0,0,0.4);
}
.btn--primary:hover {
  background: linear-gradient(180deg, var(--gold-100), var(--gold-300));
  box-shadow: var(--glow-gold);
}
.btn--ghost {
  background: transparent;
  color: var(--cream-200);
  border-color: var(--ink-500);
}
.btn--ghost:hover {
  border-color: var(--gold-300);
  color: var(--gold-300);
}
.btn--outline-gold {
  background: transparent;
  color: var(--gold-300);
  border-color: var(--gold-300);
}
.btn--outline-gold:hover {
  background: rgba(212,175,55,0.08);
}
.btn--danger {
  background: var(--ruby);
  color: white;
  border-color: var(--ruby);
}
.btn--sm { padding: 7px 14px; font-size: 12px; }
.btn--lg { padding: 16px 32px; font-size: 14px; }
.btn--icon { width: 38px; height: 38px; padding: 0; justify-content: center; }

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 1px solid var(--ink-600);
  background: var(--ink-800);
  color: var(--ink-100);
}
.badge--gold { background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.4); color: var(--gold-200); }
.badge--emerald { background: var(--emerald-soft); border-color: rgba(74,143,109,0.4); color: #8FCBAA; }
.badge--ruby { background: var(--ruby-soft); border-color: rgba(181,86,74,0.4); color: #E69089; }
.badge--sapphire { background: var(--sapphire-soft); border-color: rgba(74,111,143,0.4); color: #89B3CB; }
.badge--amber { background: var(--amber-soft); border-color: rgba(201,147,59,0.4); color: #E6BC75; }
.badge--solid-gold { background: var(--gold-300); color: var(--ink-950); border-color: var(--gold-300); }
.badge--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* --- Card --- */
.card {
  background: var(--ink-900);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--inset-hairline);
}
.card--raised { background: var(--ink-850); }
.card--gold-edge { border-color: rgba(212,175,55,0.35); }

/* --- Input --- */
.input {
  background: var(--ink-900);
  border: 1px solid var(--ink-500);
  border-radius: var(--r-md);
  padding: 11px 14px;
  color: var(--cream-200);
  font-family: var(--font-sans);
  font-size: 13px;
  width: 100%;
  outline: none;
  transition: border-color var(--dur-fast);
}
.input:focus { border-color: var(--gold-300); box-shadow: 0 0 0 3px rgba(212,175,55,0.12); }
.input::placeholder { color: var(--ink-300); }

/* --- Label --- */
.label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-200);
  margin-bottom: 6px;
}

/* --- Scrollbar (subtle) --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ink-950); }
::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-500); }

/* ============================================================
   Brand mark
   ============================================================ */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  color: var(--cream-200);
  text-decoration: none;
}
.brand-mark__glyph {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--gold-300);
  border-radius: var(--r-xs);
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  background: radial-gradient(120% 120% at 50% 0%, rgba(212,175,55,0.18), transparent 60%);
}
.brand-mark__name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.brand-mark__name em {
  font-style: italic;
  color: var(--gold-300);
  font-weight: 500;
}

/* ============================================================
   Ornament: thin gold corner brackets (for hero / cards)
   ============================================================ */
.ornament-corners {
  position: relative;
}
.ornament-corners::before,
.ornament-corners::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--gold-300);
  opacity: 0.7;
}
.ornament-corners::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.ornament-corners::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ============================================================
   Mobile baseline (≤ 720px). Per-page <style> blocks can still
   override; this catches the common gotchas globally.
   ============================================================ */
@media (max-width: 720px) {
  :root {
    /* Tighter outer rhythm so 32-40px-padded containers don't eat
       the viewport on a 375px phone. */
    --page-pad-mobile: 16px;
  }

  body { -webkit-text-size-adjust: 100%; }

  /* Hero display text — clamp so per-page 36-40px <h1> doesn't ship
     line-break-of-doom on a phone. */
  h1 { font-size: clamp(22px, 7vw, 32px); line-height: 1.15; }
  h2 { font-size: clamp(18px, 5.5vw, 24px); }
  h3 { font-size: clamp(16px, 4.5vw, 20px); }

  /* Buttons + inputs slightly tighter */
  .btn { padding: 9px 14px; font-size: 11px; }
  .btn--sm { padding: 6px 10px; }

  /* Tables: stack into a horizontal-scroll block. Per-page .scroll-x
     wrappers are still preferred (they preserve <thead> sticky); this
     is the fallback when a template doesn't have one. Opt out per-page
     by adding class .tbl--unscoped to the <table>. */
  table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
  table.tbl--unscoped { display: table; overflow: visible; white-space: normal; }

  /* Common 2-col form grids collapse to single column on mobile. */
  .grid-2, .form-grid { grid-template-columns: 1fr !important; }

  /* Most views wrap content in `.wrap { padding: 32px 40px 80px; }`.
     The 40px horizontal eats ~80px of a 375px viewport. Compress to
     a phone-friendly inset. Per-page styles loaded AFTER tokens.css
     can override if they need a different value. */
  .wrap { padding-left: var(--page-pad-mobile, 16px) !important; padding-right: var(--page-pad-mobile, 16px) !important; padding-top: 20px !important; }

  /* Hero blocks (.hero) — phone-shrink the inner padding too. */
  .hero { padding: 24px 20px !important; }

  /* Topbars built from flex commonly need wrap on mobile so the nav
     buttons stack below the user identity instead of overflowing. */
  .topbar { flex-wrap: wrap !important; gap: 10px !important; }
}

/* Very-tight viewport (≤ 400px) — phone size */
@media (max-width: 400px) {
  :root { --page-pad-mobile: 12px; }
  .btn { padding: 8px 12px; }
}

/* ============================================================
   Mobile bottom tab bar (.m-tabs) — sticky nav for jemaah
   portal. Hidden on desktop; appears on ≤ 720px. Includes
   safe-area-inset-bottom so iOS home-indicator doesn't overlap.
   ============================================================ */
.m-tabs { display: none; }
@media (max-width: 720px) {
  .m-tabs {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: rgba(10, 9, 8, 0.94);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-top: 1px solid rgba(212, 175, 55, 0.18);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .m-tabs a {
    display: grid; place-items: center; gap: 2px;
    padding: 6px 4px; border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--ink-100);
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: 0.12em; text-transform: uppercase;
    transition: color 120ms ease, background 120ms ease;
    min-height: 48px; /* tap target */
  }
  .m-tabs a svg { color: inherit; opacity: 0.85; }
  .m-tabs a.is-active { color: var(--gold-300); }
  .m-tabs a.is-active svg { opacity: 1; }
  .m-tabs a:active { background: rgba(212, 175, 55, 0.06); }

  /* Reserve room at page-bottom so content isn't covered by the bar. */
  body.has-m-tabs { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* Stage 319 — hide redundant top-nav links in crew portal on mobile
     since the bottom-nav covers Kontak + Notifikasi tabs. */
  .c-topnav-link { display: none !important; }
}

/* ============================================================
   Chart primitives — proportional stack + SVG funnel.
   Used by admin dashboard; safe to reuse in agen-crm.
   ============================================================ */

/* Stacked horizontal bar — one .seg per category, width = pct.
   Hovering over a segment shows its title (browser-native tooltip). */
.chart-stack {
  display: flex; width: 100%; height: 28px;
  background: var(--ink-1000);
  border: var(--hairline-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-top: 6px;
}
.chart-stack .seg {
  height: 100%;
  border-right: 1px solid var(--ink-1000);
  transition: filter 120ms ease;
  cursor: help;
}
.chart-stack .seg:last-child { border-right: 0; }
.chart-stack .seg:hover { filter: brightness(1.25); }
/* Semantic colors — matches status badge palette */
.chart-stack .seg.s-pending   { background: var(--amber); }
.chart-stack .seg.s-booked    { background: var(--sapphire); }
.chart-stack .seg.s-dp        { background: var(--gold-300); }
.chart-stack .seg.s-partial   { background: var(--gold-200); }
.chart-stack .seg.s-lunas     { background: var(--emerald); }
.chart-stack .seg.s-cancelled { background: var(--ruby); opacity: 0.7; }
.chart-stack .seg.s-refunded  { background: var(--ruby); opacity: 0.4; }
.chart-stack .seg.s-cold      { background: var(--ink-300); }
.chart-stack .seg.s-warm      { background: var(--amber); }
.chart-stack .seg.s-converted { background: var(--emerald); }
.chart-stack .seg.s-lost      { background: var(--ruby); }
.chart-stack .seg.s-hot       { background: var(--gold-300); }

/* Legend rendered below the stack */
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  margin-top: 12px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-200); letter-spacing: 0.04em;
}
.chart-legend .item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .swatch { width: 10px; height: 10px; border-radius: 2px; }
.chart-legend .count { color: var(--cream-100); font-weight: 600; }
.chart-legend .pct { color: var(--ink-300); margin-left: 2px; }

/* SVG funnel chart */
.chart-funnel { width: 100%; max-width: 520px; }
.chart-funnel .stage-bar { transition: fill 120ms ease; }
.chart-funnel .stage-bar:hover { fill-opacity: 0.85; }
.chart-funnel .stage-label {
  fill: var(--cream-100);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em;
  dominant-baseline: middle;
}
.chart-funnel .stage-count {
  fill: var(--cream-100);
  font-family: var(--font-display); font-size: 16px;
  font-weight: 500;
  dominant-baseline: middle;
}
.chart-funnel .stage-pct {
  fill: var(--ink-200);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em;
  dominant-baseline: middle;
}

/* Horizontal bar chart — one .row per item, fill width proportional. */
.chart-bars-h { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.chart-bars-h .row {
  display: grid; grid-template-columns: 180px 1fr 150px;
  gap: 14px; align-items: center;
}
.chart-bars-h .row .lbl {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--cream-100); letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-bars-h .row .lbl .sx {
  display: block; color: var(--ink-200);
  font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; margin-top: 2px;
}
.chart-bars-h .row .track {
  height: 20px; background: var(--ink-1000);
  border: var(--hairline-soft); border-radius: var(--r-sm);
  overflow: hidden;
}
.chart-bars-h .row .fill {
  height: 100%; background: var(--gold-300);
  transition: width 240ms ease;
}
.chart-bars-h .row .fill.f-emerald  { background: var(--emerald);  }
.chart-bars-h .row .fill.f-amber    { background: var(--amber);    }
.chart-bars-h .row .fill.f-gold-200 { background: var(--gold-200); }
.chart-bars-h .row .fill.f-ruby     { background: var(--ruby);     }
.chart-bars-h .row .fill.f-sapphire { background: var(--sapphire); }
.chart-bars-h .row .val {
  font-family: var(--font-display); font-size: 16px;
  color: var(--gold-300); text-align: right; font-weight: 500;
}
.chart-bars-h .row .val .u {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--ink-200); margin-left: 4px; letter-spacing: 0.1em;
}
.chart-bars-h .row .val .sx {
  display: block; font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-200); margin-top: 2px;
}

@media (max-width: 720px) {
  .chart-bars-h .row { grid-template-columns: 1fr; gap: 4px; }
  .chart-bars-h .row .val { text-align: left; }
  .chart-bars-h .row .val .sx { display: inline; margin-left: 8px; }
}

/* ──────────────────────────────────────────────────────────────────
   Back button — shared chip used across jemaah + crew portals so
   "kembali" affordance is consistent + finger-friendly on mobile.
   Gold-outlined with hover fill, ← icon, 44px min-height tap target.
   ────────────────────────────────────────────────────────────────── */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(212,175,107,0.10), rgba(212,175,107,0.02));
  border: 1px solid var(--gold-300);
  border-radius: var(--r-sm);
  color: var(--gold-300);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
  box-sizing: border-box;
}
/* Inside flex/grid container (mis. .crumb dengan tombol Cetak/Kalender),
   drop bottom margin supaya chip rata dengan siblings. */
[style*="display:flex"] > .btn-back,
[style*="display: flex"] > .btn-back,
.crumb > .btn-back { margin-bottom: 0; }
.btn-back::before {
  content: "←";
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  display: inline-block;
  transition: transform 180ms ease;
}
.btn-back:hover, .btn-back:focus-visible {
  background: var(--gold-300);
  color: var(--ink-1000);
  transform: translateX(-2px);
  box-shadow: 0 6px 18px rgba(212,175,107,0.28);
  outline: none;
}
.btn-back:hover::before, .btn-back:focus-visible::before { transform: translateX(-3px); }
.btn-back:active { transform: translateX(-1px); box-shadow: 0 2px 6px rgba(212,175,107,0.2); }

@media (max-width: 720px) {
  .btn-back { font-size: 10.5px; padding: 12px 18px 12px 14px; }
}