/* ============================================================
   Aussie CRM AI — Design tokens & base
   Warm-slate neutral + indigo accent, soft 14px corners.
   "Notion/Linear-ish tapi lebih hangat."
   ============================================================ */

:root {
  /* radius scale */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;

  /* Claude-style warm cream/ivory + warm charcoal ink */
  --bg: #F0EEE6;        /* Claude cream — main canvas (not white) */
  --bg-soft: #E9E6DA;   /* deeper cream for insets / hover */
  --bg-card: #FBFAF5;   /* warm near-white so cards lift off the cream */
  --ink: #29281F;       /* warm near-black */
  --ink-2: #56524A;     /* warm medium */
  --ink-3: #7C776C;     /* warm muted */
  --line: #E2DDD0;      /* warm beige border */
  --line-soft: #EBE7DC; /* softer warm border */

  /* indigo accent */
  --accent: #4F46E5;
  --accent-hover: #4338CA;
  --accent-soft: #EEF0FF;
  --accent-ink: #312E81;

  /* status palette: base / soft / ink */
  --indigo: #4F46E5; --indigo-soft: #EEF0FF; --indigo-ink: #312E81;
  --slate: #64748B;  --slate-soft: #F1F4F9;  --slate-ink: #334155;
  --green: #10B981;  --green-soft: #DCFCE7;  --green-ink: #065F46;
  --blue: #2563EB;   --blue-soft: #DBEAFE;   --blue-ink: #1E3A8A;
  --purple: #8B5CF6; --purple-soft: #EDE9FE; --purple-ink: #5B21B6;
  --yellow: #F59E0B; --yellow-soft: #FEF3C7; --yellow-ink: #92400E;
  --red: #EF4444;    --red-soft: #FEE2E2;    --red-ink: #991B1B;
  --pink: #EC4899;   --pink-soft: #FCE7F3;   --pink-ink: #9D174D;
  --teal: #14B8A6;   --teal-soft: #CCFBF1;   --teal-ink: #115E59;
  --sky: #0EA5E9;    --sky-soft: #E0F2FE;    --sky-ink: #075985;
  --rose: #F43F5E;   --rose-soft: #FFE4E6;   --rose-ink: #9F1239;

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(60,50,35,.05), 0 1px 1px rgba(60,50,35,.04);
  --shadow-md: 0 4px 14px rgba(60,50,35,.07), 0 1px 3px rgba(60,50,35,.05);
  --shadow-lg: 0 12px 40px rgba(50,42,30,.14), 0 4px 12px rgba(50,42,30,.08);
  --shadow-pop: 0 8px 28px rgba(50,42,30,.16);

  --ring: rgba(79,70,229,.32);
}

.dark {
  --bg: #0B1220;
  --bg-soft: #111A2B;
  --bg-card: #151F33;
  --ink: #EAF0FB;
  --ink-2: #C4CEE0;
  --ink-3: #8A97AE;
  --line: #243149;
  --line-soft: #1C2840;

  --accent: #6366F1;
  --accent-hover: #818CF8;
  --accent-soft: #21285A;
  --accent-ink: #C7D0FF;

  --indigo: #6366F1; --indigo-soft: #21285A; --indigo-ink: #C7D0FF;
  --slate: #8A97AE;  --slate-soft: #1C2840;  --slate-ink: #C4CEE0;
  --green-soft: #0C2E22;  --green-ink: #6EE7B7;
  --blue-soft: #122247;   --blue-ink: #93B4FD;
  --purple-soft: #251945; --purple-ink: #C4B5FD;
  --yellow-soft: #3A2A0B; --yellow-ink: #FCD34D;
  --red-soft: #3A1414;    --red-ink: #FCA5A5;
  --pink-soft: #371325;   --pink-ink: #F9A8D4;
  --teal-soft: #0A2E2C;   --teal-ink: #5EEAD4;
  --sky-soft: #0A2A3D;    --sky-ink: #7DD3FC;
  --rose-soft: #3A1320;   --rose-ink: #FDA4AF;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 6px 18px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.55);
  --shadow-pop: 0 10px 34px rgba(0,0,0,.5);

  --ring: rgba(99,102,241,.45);
}

* { box-sizing: border-box; }

html, body, #root {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.tnum { font-variant-numeric: tabular-nums; }

/* typography helpers */
.label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  color: var(--ink-3);
}
.hint { font-size: 11px; color: var(--ink-3); }
.muted { color: var(--ink-3); }
.h-page { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.h-card { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }

::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* card */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* generic transition base */
.tx { transition: all .16s cubic-bezier(.4,0,.2,1); }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* focus ring */
.focusable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* keyframes */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp {
  from { transform: translateY(9px); }
  to { transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight {
  from { transform: translateX(34px); }
  to { transform: translateX(0); }
}
@keyframes scaleIn {
  from { transform: scale(.985); }
  to { transform: scale(1); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes toastIn {
  from { transform: translateY(10px); }
  to { transform: translateY(0); }
}
@keyframes drawProgress { from { width: 0; } }

.spin { animation: spin .8s linear infinite; }
/* `backwards` (not `both`): keep the pre-delay offset for staggered entrances,
   but DON'T hold the end transform — a lingering transform (even identity)
   creates a containing block that breaks position:fixed modals inside. */
.fade-up { animation: fadeUp .4s cubic-bezier(.2,.7,.2,1) backwards; }
.scale-in { animation: scaleIn .18s cubic-bezier(.2,.7,.2,1) both; }

/* nav items — hover/active via CSS so React owns no imperative bg */
.navitem { background: transparent; transition: color .12s; }
.navitem:hover { background: var(--bg-soft); }
.navitem.active, .navitem.active:hover { background: var(--accent-soft); }

.railitem { background: transparent; border: none; }
.railitem > .railbox { background: transparent; transition: color .12s; }
.railitem:hover > .railbox { background: var(--bg-soft); }
.railitem.active > .railbox { background: var(--accent-soft); }

.app-loading {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--bg);
  color: var(--ink-3);
  font-size: 13px;
}

/* ---- Login responsive ---- */
@media (max-width: 860px) {
  .login-brand { display: none !important; }
  .login-mini-brand { display: flex !important; }
}

/* ---- Leaflet map theming ---- */
.apin-wrap { background: transparent !important; border: none !important; }
.apin {
  width: 40px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; position: relative;
  font: 800 12.5px/1 "JetBrains Mono", monospace;
  box-shadow: 0 2px 7px rgba(8,12,22,.32);
  transition: transform .15s;
  cursor: pointer;
}
.apin.sel { transform: scale(1.18); box-shadow: 0 0 0 3px var(--accent), 0 7px 16px rgba(79,70,229,.45); }
.apin-flag { position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 99px; background: var(--red); border: 1.5px solid var(--bg-card); }

/* small round result/lead pin (ResultsMap — Lead Collection & Database Lead) */
.ppin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid var(--bg-card); box-sizing: border-box;
  box-shadow: 0 1px 5px rgba(8,12,22,.4);
  transition: transform .15s; cursor: pointer;
}
.ppin.sel { transform: scale(1.35); box-shadow: 0 0 0 3px var(--accent), 0 4px 10px rgba(79,70,229,.45); }

.leaflet-container { font-family: inherit; background: var(--bg-soft); }
.leaflet-bar { border: none !important; box-shadow: var(--shadow-sm) !important; }
.leaflet-bar a {
  background: var(--bg-card) !important; color: var(--ink-2) !important;
  border-bottom: 1px solid var(--line-soft) !important;
}
.leaflet-bar a:hover { background: var(--bg-soft) !important; }
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--bg-card) 82%, transparent) !important;
  color: var(--ink-3) !important; font-size: 9.5px !important; border-radius: 6px 0 0 0 !important;
}
.leaflet-control-attribution a { color: var(--ink-2) !important; }
.leaflet-tooltip {
  background: var(--ink) !important; color: var(--bg-card) !important;
  border: none !important; box-shadow: var(--shadow-pop) !important;
  font-weight: 700 !important; font-size: 11px !important; padding: 4px 8px !important; border-radius: 7px !important;
}
.leaflet-tooltip-top:before { border-top-color: var(--ink) !important; }