/* Second Prime funnel analytics dashboard. Brand: slate dominates, teal punctuates. */
:root {
  --ink: #1F1F27; --gray: #686877; --near-black: #18181F;
  --bg-light: #F7F4F0; --border: #E5E3E0;
  --teal: #458D93; --teal-bright: #65C8D0; --teal-deep: #2B5C60;
  --sand: #D9C8AE; --sand-light: #FDFBF8;
  --red: #C0564F; --amber: #FF9500;
  --radius: 12px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--bg-light); color: var(--ink); font-size: 14px; }
a { color: var(--teal-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Nav */
.dnav { background: var(--near-black); color: var(--sand-light); padding: 0 20px; display: flex; align-items: center; gap: 4px; height: 52px; overflow-x: auto; }
.dnav .brand { font-weight: 700; letter-spacing: 0.06em; margin-right: 18px; white-space: nowrap; color: var(--teal-bright); }
.dnav a { color: rgba(253,251,248,0.72); padding: 6px 12px; border-radius: 8px; white-space: nowrap; }
.dnav a.on { background: rgba(101,200,208,0.16); color: var(--teal-bright); }
.dnav a:hover { text-decoration: none; color: var(--sand-light); }
.dnav .spacer { flex: 1; }
.dnav .who { font-size: 12px; color: rgba(253,251,248,0.5); white-space: nowrap; }
.dnav button { background: none; border: 1px solid rgba(253,251,248,0.25); color: rgba(253,251,248,0.72); border-radius: 8px; padding: 5px 10px; cursor: pointer; margin-left: 10px; }

/* Filter bar */
.fbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--border); }
.fbar label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray); margin-bottom: 4px; }
.fbar input, .fbar select { border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font-size: 13px; background: #fff; color: var(--ink); min-width: 120px; }
.fbar .apply { background: var(--teal); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-weight: 600; cursor: pointer; }
.fbar .apply:hover { background: var(--teal-deep); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 22px 20px 60px; }
h1 { font-size: 22px; font-weight: 700; margin: 6px 0 16px; }
h2 { font-size: 15px; font-weight: 700; margin: 26px 0 10px; color: var(--teal-deep); }
.muted { color: var(--gray); }
.note { font-size: 12px; color: var(--gray); margin-top: 8px; }

/* KPI tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.tile { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.tile b { display: block; font-size: 22px; font-weight: 700; }
.tile span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gray); }

/* Funnel bars */
.funnel .frow { display: grid; grid-template-columns: 150px 1fr 120px; gap: 10px; align-items: center; margin: 7px 0; }
.funnel .fbarline { background: #E9E6E1; border-radius: 6px; height: 26px; overflow: hidden; }
.funnel .ffill { background: linear-gradient(90deg, var(--teal), var(--teal-bright)); height: 100%; border-radius: 6px; min-width: 2px; transition: width 0.4s; }
.funnel .fmeta { font-size: 12px; color: var(--gray); text-align: right; }

/* Tables */
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
th { background: var(--near-black); color: var(--sand-light); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; position: sticky; top: 0; cursor: pointer; }
tr:hover td { background: #FBF9F6; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tablewrap { overflow-x: auto; border-radius: var(--radius); }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.chip.core { background: rgba(69,141,147,0.14); color: var(--teal-deep); }
.chip.lower { background: rgba(217,200,174,0.35); color: #7A6A4F; }
.chip.dq { background: rgba(192,86,79,0.12); color: var(--red); }
.chip.yes { background: rgba(69,141,147,0.14); color: var(--teal-deep); }
.chip.no { background: #EEE; color: var(--gray); }

/* Filter builder */
.conds { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 14px; }
.cond { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cond select, .cond input { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.btn { background: var(--teal); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-weight: 600; cursor: pointer; font-size: 13px; }
.btn.ghost { background: none; border: 1px solid var(--border); color: var(--ink); }
.btn.danger { background: var(--red); }
.btn:disabled { opacity: 0.5; cursor: default; }

/* Timeline */
.tl { border-left: 2px solid var(--border); margin-left: 8px; padding-left: 16px; }
.tl .ev { margin-bottom: 10px; position: relative; }
.tl .ev::before { content: ""; position: absolute; left: -21px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.tl .ev.minor::before { background: #C9C6C1; }
.tl time { font-size: 11px; color: var(--gray); display: block; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 4px 12px; font-size: 13px; }
.kv dt { color: var(--gray); }
.kv dd { font-weight: 500; }

/* Login overlay */
.login-veil { position: fixed; inset: 0; background: var(--near-black); display: flex; align-items: center; justify-content: center; z-index: 50; }
.login-box { background: #fff; border-radius: 16px; padding: 32px; width: 340px; }
.login-box h1 { font-size: 18px; margin-bottom: 4px; }
.login-box p { color: var(--gray); font-size: 13px; margin-bottom: 16px; }
.login-box input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 10px; font-size: 14px; }
.login-box .btn { width: 100%; padding: 10px; }
.login-err { color: var(--red); font-size: 13px; margin-bottom: 8px; display: none; }
.loading { color: var(--gray); padding: 30px 0; text-align: center; }