@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* Direction D - approved. True black ground (matches the real sign
   artwork), clean rounded cards, blue as the one interactive colour
   (buttons, links, active states) and amber reserved for brand identity
   only - it lives in the logo mark, nowhere else in this stylesheet. */
:root{
  --bg:#0d0d0d; --panel:#1a1a1a; --panel-soft:#242424; --panel-line:#2c2c2c; --panel-line-soft:#232323;
  --ink:#f2f2f0; --ink-soft:#adadab; --ink-faint:#737371;
  --btn:#3b7dd8; --btn-deep:#2f68b8; --btn-ink:#ffffff;
  --green:#4bc95a; --green-bg:rgba(75,201,90,.14); --green-line:rgba(75,201,90,.35);
  --red:#ef6266; --red-bg:rgba(239,98,102,.15); --red-line:rgba(239,98,102,.4);
  --rose:#e0899f; --rose-bg:rgba(224,137,159,.16);
  --gold:#c99a3e; --gold-bg:rgba(201,154,62,.16);
  --grey:#8c8c8c; --grey-bg:rgba(140,140,140,.14);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 16px 32px rgba(0,0,0,.4);
}
*{ box-sizing:border-box; }
body{ background:var(--bg); color:var(--ink); font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:14px; margin:0; -webkit-font-smoothing:antialiased; }
.wrap{ max-width:1180px; margin:0 auto; padding:32px 24px 90px; }
h1,h2,h3{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; letter-spacing:-.01em; margin:0; text-wrap:balance; }
a{ color:var(--btn); }

header.page{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--panel-line-soft); }
.header-brand{ display:flex; align-items:center; gap:14px; }
.logo-mark{ height:44px; width:44px; object-fit:cover; border-radius:12px; box-shadow:var(--shadow); display:block; }
.brand{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; letter-spacing:.04em; font-size:12px; color:var(--ink-faint); text-transform:uppercase; }
h1{ font-size:22px; line-height:1.1; margin-top:2px; color:var(--ink); }
.logout{ font-family:'Plus Jakarta Sans',sans-serif; font-size:12.5px; font-weight:600; color:var(--ink-soft); background:var(--panel); border:1px solid var(--panel-line); border-radius:8px; padding:8px 14px; cursor:pointer; }
.logout:hover{ color:var(--ink); border-color:var(--panel-soft); }

.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:36px; }
.kpi{ background:var(--panel); border:1px solid var(--panel-line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow); }
.kpi .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:700; }
.kpi .value{ font-family:'IBM Plex Mono',monospace; font-size:32px; font-weight:600; margin-top:8px; font-variant-numeric:tabular-nums; color:var(--ink); }
/* Tile order is fixed in app.js (Active pipeline, Won, Lost, Reviews
   outstanding), so the two "needs attention" sublines and the Won value
   can be picked out by position without any markup changes. */
.kpi:nth-child(1) .label:last-child, .kpi:nth-child(4) .label:last-child{ color:var(--red); font-weight:700; }
.kpi:nth-child(2) .value{ color:var(--green); }

section.block{ margin-bottom:40px; }
.block-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:10px; flex-wrap:wrap; }
.block-head h2{ font-size:18px; color:var(--ink); }
.btn{ font-family:'Plus Jakarta Sans',sans-serif; font-size:12.5px; font-weight:600; padding:9px 16px; border-radius:8px; border:1px solid var(--panel-line); background:var(--panel); color:var(--ink); cursor:pointer; transition:border-color .15s ease; }
.btn:hover{ border-color:var(--panel-soft); }
.btn.primary{ background:var(--btn); border-color:var(--btn); color:var(--btn-ink); font-weight:700; }
.btn.primary:hover{ background:var(--btn-deep); border-color:var(--btn-deep); }
.filters{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.filter-btn{ font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:600; padding:6px 13px; border-radius:999px; border:1px solid var(--panel-line); background:var(--panel); color:var(--ink-soft); cursor:pointer; }
.filter-btn.active{ background:var(--btn); color:var(--btn-ink); border-color:var(--btn); }

.card-list{ display:flex; flex-direction:column; border:1px solid var(--panel-line); border-radius:14px; overflow:hidden; background:var(--panel); box-shadow:var(--shadow); }
.row{ display:grid; grid-template-columns:1.5fr .9fr 1fr 1fr 1fr auto; gap:12px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--panel-line-soft); font-size:13.5px; }
.row:last-child{ border-bottom:none; }
.row.head{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--ink-faint); background:var(--panel-soft); }
.row:not(.head):hover{ background:var(--panel-soft); }
.who .name{ font-weight:700; color:var(--ink); }
.who .addr{ font-size:12px; color:var(--ink-faint); }
select, input[type=text], input[type=password], input[type=date], input[type=number], textarea{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:12.5px; padding:8px 10px; border:1px solid var(--panel-line); border-radius:7px; background:var(--bg); color:var(--ink);
}
select:focus, input:focus, textarea:focus{ outline:2px solid var(--btn); outline-offset:1px; }

/* Status tags - soft-tint rounded rectangles rather than full pills. */
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:6px; white-space:nowrap; }
.chip::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.chip.pink{ background:var(--rose-bg); color:var(--rose); }
.chip.amber{ background:var(--gold-bg); color:var(--gold); }
.chip.red{ background:var(--red-bg); color:var(--red); }
.chip.green{ background:var(--green-bg); color:var(--green); }
.chip.grey{ background:var(--grey-bg); color:var(--grey); }
/* Won is deliberately solid rather than translucent like the other chips -
   it's an end state, not a thing to action, and reuses the same blue as
   the primary buttons so it reads as "done" at a glance. */
.chip.blue{ background:var(--btn); color:var(--btn-ink); font-weight:800; }
.chip.blue::before{ display:none; }
.icon-btn{ background:none; border:none; color:var(--btn); cursor:pointer; font-size:12px; font-weight:700; }
.icon-btn:hover{ text-decoration:underline; }

.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal{ background:var(--panel); border:1px solid var(--panel-line); border-radius:14px; padding:26px; width:100%; max-width:440px; box-shadow:var(--shadow); max-height:90vh; overflow-y:auto; }
.modal h3{ margin-bottom:18px; font-size:20px; }
.field{ margin-bottom:12px; display:flex; flex-direction:column; gap:4px; }
.field label{ font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.field select, .field input, .field textarea{ width:100%; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

.login-wrap{ max-width:340px; margin:100px auto; padding:0 20px; text-align:center; }
.login-wrap .logo-mark{ height:56px; width:56px; margin:0 auto 20px; }
.login-card{ background:var(--panel); border:1px solid var(--panel-line); border-radius:14px; padding:30px; box-shadow:var(--shadow); text-align:left; }
.login-card h3{ font-size:20px; margin-bottom:16px; }
.login-card input{ width:100%; margin-bottom:12px; }
.error{ color:var(--red); font-size:12.5px; margin-bottom:10px; min-height:16px; }

@media (max-width:760px){
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .row{ grid-template-columns:1fr; gap:6px; }
  .row.head{ display:none; }
}