/* S2 CRM
   One stylesheet, no framework. Three users and a small surface do not need a
   build step, and a build step is one more thing that can break on deploy.
   Dense enough to scan a call queue, and it has to work on a phone in a truck. */

/* S2 brand, taken from s2services.net rather than invented:
     navy   #00183D   buttons, headings, the tier-A badge
     blue   #0049BD   links and accents, the blue in the logo mark
     pale   #D1E3FF   soft highlight
   Typeface is Montserrat, the same one the website runs on.

   Light only, deliberately. The logo is supplied on a white background, so
   every surface it sits on is pure white and the background never shows as a
   box. A dark theme would need a recoloured logo, which is the thing we chose
   not to do. */

:root {
  --navy: #00183D;
  --navy-lift: #0a2a5e;
  --bg: #ffffff;
  --card: #ffffff;
  --ink: #0d1420;
  --muted: #5a6478;
  --line: #e2e8f2;
  --accent: #0049BD;
  --accent-soft: #eaf1ff;
  --on-navy: #ffffff;
  --on-navy-dim: #5a6478;
  --strong: #047857;
  --good: #0049BD;
  --moderate: #b45309;
  --low: #98a2b3;
  --danger: #b91c1c;
  --radius: 10px;
  --brand-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- chrome ---------- */

.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  padding-top: calc(10px + env(safe-area-inset-top));
}

/* The real logo. Silver and blue both read on navy, so one file covers the
   top bar in either theme. The word CRM sits alongside so the app names
   itself without needing a second logo variant. */
.brand { display: flex; align-items: center; gap: 11px; }
.brand:hover { text-decoration: none; }
.brand-mark { height: 34px; width: auto; display: block; }
.brand-app {
  font-family: var(--brand-font); font-size: 12px; font-weight: 700;
  letter-spacing: 2.4px; color: var(--navy); padding-left: 11px;
  border-left: 1px solid var(--line);
}

.topbar nav { display: flex; gap: 2px; flex: 1; }
.topbar nav a {
  padding: 7px 13px; border-radius: 7px; color: var(--muted);
  font-weight: 500; font-size: 14px; white-space: nowrap;
}
.topbar nav a:hover {
  background: var(--accent-soft); color: var(--accent); text-decoration: none;
}
.topbar nav a.on { background: var(--navy); color: #fff; }
.topsearch { flex: 0 1 250px; margin: 0; }
.topsearch input {
  width: 100%; padding: 7px 13px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 20px;
  background: #f6f8fc; color: var(--ink);
}
.topsearch input::placeholder { color: var(--muted); }
.topsearch input:focus {
  outline: none; border-color: var(--accent); background: #fff;
}

.scope { margin: 0; flex: 0 0 auto; }
.scope select {
  width: auto; padding: 6px 10px; font-size: 13px; font-weight: 600;
  font-family: var(--brand-font);
  border-radius: 20px; border: 1px solid var(--line);
  background: #f6f8fc; color: var(--ink); cursor: pointer;
}
.scope select option { background: #fff; color: var(--ink); }

.who { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 31px; height: 31px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--brand-font); font-weight: 700;
  display: grid; place-items: center; font-size: 12px;
}
.avatar { text-decoration: none; }
.avatar:hover { filter: brightness(1.25); text-decoration: none; }
/* Shown until a rep connects their mailbox. Email sync is the feature that
   makes the queue maintain itself, and it is worthless if nobody turns it on,
   so it asks once from every page rather than hiding in a settings menu. */
.nudge {
  font-size: 12px; font-weight: 600; font-family: var(--brand-font);
  color: var(--accent); background: var(--accent-soft);
  padding: 5px 11px; border-radius: 20px; white-space: nowrap;
}
.nudge:hover { text-decoration: none; background: #dbe7ff; }
@media (max-width: 900px) { .nudge { display: none; } }

.signout { color: var(--muted); font-size: 13px; }
.signout:hover { color: var(--accent); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 26px 20px 60px; }
.foot {
  text-align: center; color: var(--muted); font-size: 12px;
  padding: 0 18px calc(24px + env(safe-area-inset-bottom));
}
.tagline {
  font-family: var(--brand-font); font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase; font-size: 10px;
  color: var(--accent);
}

/* ---------- structure ---------- */

h1 { font-family: var(--brand-font); font-size: 23px; font-weight: 700;
     margin: 0 0 4px; letter-spacing: -.4px; }
h2 { font-family: var(--brand-font); font-size: 12px; margin: 0 0 13px;
     text-transform: uppercase; letter-spacing: 1.1px; color: var(--muted);
     font-weight: 700; }
h3 { font-family: var(--brand-font); font-size: 15px; font-weight: 700;
     margin: 0 0 8px; }
h4 { font-family: var(--brand-font); }
.sub { color: var(--muted); margin: 0 0 22px; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(13,20,32,.04);
}
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: 2fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .topbar { gap: 10px; flex-wrap: wrap; }
  .topbar nav { order: 3; width: 100%; overflow-x: auto; }
  .topsearch { order: 4; flex: 1 1 100%; }
}

/* ---------- filter bar and pagination ---------- */

.filterbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; margin-bottom: 16px;
}
.filterbar .field { margin: 0; flex: 1 1 150px; min-width: 130px; }
.filterbar label { font-size: 12px; }
.filterbar input, .filterbar select { padding: 7px 10px; font-size: 14px; }

.pager { display: flex; gap: 10px; align-items: center; justify-content: center;
         margin-top: 18px; color: var(--muted); font-size: 14px; }
.pager a { padding: 6px 13px; border: 1px solid var(--line); border-radius: 8px;
           background: var(--card); }
.pager a:hover { text-decoration: none; border-color: var(--accent); }
.pager .off { opacity: .35; pointer-events: none; }

/* ---------- stats ---------- */

.stat { text-align: left; border-top: 3px solid var(--accent); }
.stat .n { font-family: var(--brand-font); font-size: 30px; font-weight: 700;
           letter-spacing: -1.2px; display: block; color: var(--navy); }
.stat .l { color: var(--muted); font-size: 13px; }


/* ---------- lists ---------- */

.row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row .main { flex: 1; min-width: 0; }
.row .name { font-weight: 600; }
.row .meta { color: var(--muted); font-size: 13px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- badges ---------- */

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  border: 1px solid var(--line); color: var(--muted);
}
.tier-A { background: var(--navy); color: #fff; border-color: transparent; }
.tier-B { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.tier-C { background: transparent; }

.chance { display: flex; align-items: center; gap: 8px; min-width: 92px; }
.chance .v { font-family: var(--brand-font); font-weight: 700; font-size: 18px;
             font-variant-numeric: tabular-nums; }
.band-Strong .v { color: var(--strong); }
.band-Good .v { color: var(--good); }
.band-Moderate .v { color: var(--moderate); }
.band-Low .v { color: var(--low); }
.chance .b { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

.status {
  font-size: 12px; padding: 3px 9px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap;
}

/* ---------- intel panel ---------- */

.intel { border-left: 3px solid var(--accent); }
.intel ul { margin: 0; padding-left: 18px; }
.intel li { margin-bottom: 9px; }
.heuristic {
  font-size: 12px; color: var(--muted); font-style: italic;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
}

/* ---------- forms ---------- */

input[type=text], input[type=email], select, textarea {
  width: 100%; padding: 9px 11px; font: inherit;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink);
}
textarea { min-height: 78px; resize: vertical; }
label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 5px; }
.field { margin-bottom: 12px; }

button, .btn {
  font-family: var(--brand-font); font-size: 14px; font-weight: 600;
  cursor: pointer; padding: 9px 17px; border-radius: 22px;
  border: 1px solid transparent; background: var(--navy); color: #fff;
}
button:hover, .btn:hover { background: var(--navy-lift); text-decoration: none; }
.btn-quiet {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn-quiet:hover { background: var(--accent-soft); border-color: var(--accent); }

.inline { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.inline .field { margin-bottom: 0; flex: 1; min-width: 150px; }

/* ---------- checkbox grid ---------- */

.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
          gap: 6px 12px; margin-top: 4px; }
.check { display: flex; align-items: center; gap: 7px; font-size: 14px;
         color: var(--ink); margin: 0; cursor: pointer; }
.check input { width: auto; margin: 0; accent-color: var(--accent); }

details.opener > summary {
  cursor: pointer; font-size: 15px; margin: 0 0 12px;
  text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
  font-weight: 600; list-style: none;
}
details.opener > summary::-webkit-details-marker { display: none; }
details.opener > summary::before { content: "+ "; color: var(--accent); }
details.opener[open] > summary::before { content: "- "; }

/* ---------- timeline ---------- */

.event { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.event:last-child { border-bottom: 0; }
.event .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  margin-top: 7px; flex: none;
}
.event .when { color: var(--muted); font-size: 12px; }
.event .what { font-weight: 600; font-size: 14px; }
.event .body { color: var(--muted); font-size: 14px; white-space: pre-wrap; }

/* ---------- pipeline ---------- */

.board { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr));
         gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.col { background: var(--card); border: 1px solid var(--line);
       border-radius: var(--radius); padding: 12px; min-width: 190px; }
.col h4 { margin: 0 0 2px; font-size: 13px; }
.col .tot { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.deal { border: 1px solid var(--line); border-radius: 8px; padding: 9px;
        margin-bottom: 8px; background: var(--bg); }
.deal .t { font-weight: 600; font-size: 14px; }
.deal .v { color: var(--muted); font-size: 13px; }
.empty-col { color: var(--low); font-size: 13px; font-style: italic; }

/* ---------- sign-in ---------- */

.signin { max-width: 400px; margin: 12vh auto 0; }
.signin-brand {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  margin-bottom: 26px;
}
/* Both files ship; the theme decides which one is drawn. The selectors are
   deliberately equal in specificity to the sizing rule above them, or that
   rule's `display: block` wins and both logos render side by side. */
.signin-brand img { max-width: 100%; height: auto; display: block; }

.signin-card { padding: 22px; }
.signin-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px; font-size: 15px;
}
.signin-btn svg { flex: none; background: #fff; border-radius: 50%; padding: 1px; }
.signin-note {
  font-size: 12.5px; color: var(--muted); text-align: center;
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
}

/* ---------- misc ---------- */

.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty strong { display: block; color: var(--ink); margin-bottom: 6px; font-size: 17px; }
.warn { background: var(--accent-soft); border-left: 3px solid var(--moderate);
        padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filters a { padding: 5px 11px; border-radius: 20px; border: 1px solid var(--line);
             color: var(--muted); font-size: 13px; background: var(--card); }
.filters a.on { background: var(--navy); color: #fff; border-color: transparent; }
.filters a:hover { text-decoration: none; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }