/* Quarric internal tools. Same tokens as the marketing site, so the business
   looks like one company from the outside in. */
:root {
  --navy: #000c30;
  --blue: #0063ee;
  --paper: #fff;
  --canvas: #f2f4f8;
  --line: #dbe2ed;
  --slate: #4b5a73;
  --green: #176449;
  --green-bg: #edf6f1;
  --amber: #8a5a00;
  --amber-bg: #fdf4e3;
  --radius: 14px;
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--navy);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.bar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand {
  font-family: Manrope, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.6px;
}
.brand span { color: var(--blue); }
.bar .who { color: var(--slate); font-size: 14px; margin-left: auto; }

.wrap { max-width: 860px; margin: 0 auto; padding: 24px 20px 80px; }

h1 {
  font-family: Manrope, sans-serif;
  font-size: 27px;
  letter-spacing: -1px;
  margin: 0 0 4px;
}
.sub { color: var(--slate); margin: 0 0 22px; font-size: 15px; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.filters button {
  font: inherit; font-size: 14px;
  padding: 7px 14px; min-height: 40px;
  border: 1px solid var(--line); background: var(--paper);
  border-radius: 999px; cursor: pointer; color: var(--slate);
}
.filters button[aria-pressed="true"] {
  border-color: var(--navy); background: var(--navy); color: #fff; font-weight: 600;
}

/* An enquiry is a person waiting for a reply, not a row in a table. */
.enquiry {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 18px 18px 14px;
  margin-bottom: 14px;
}
.enquiry[data-status="contacted"],
.enquiry[data-status="qualified"],
.enquiry[data-status="closed"],
.enquiry[data-status="spam"] { border-left-color: var(--line); }
.enquiry .top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.enquiry .name { font-family: Manrope, sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -0.4px; }
.enquiry .biz { color: var(--slate); font-size: 15px; }
.enquiry .when { color: var(--slate); font-size: 13px; margin-left: auto; white-space: nowrap; }
.enquiry .meta { color: var(--slate); font-size: 13.5px; margin: 6px 0 0; }
.enquiry .msg {
  margin: 12px 0 0; font-size: 15.5px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 62ch;
}

.pill {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor;
}
.pill.new { color: var(--blue); }
.pill.contacted { color: var(--green); }
.pill.qualified { color: var(--green); }
.pill.closed, .pill.spam { color: var(--slate); }

/* The point of the whole tool: do the thing they asked for. */
.actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 15px; }
.do {
  flex: 1 1 11rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  background: var(--blue); color: #fff; text-decoration: none;
  border: 0; border-radius: 10px; cursor: pointer;
  font: 600 15.5px/1 "DM Sans", sans-serif;
}
.do.secondary { background: var(--paper); color: var(--navy); border: 1px solid var(--line); font-weight: 500; }
.do:hover { filter: brightness(0.95); }

.note { color: var(--slate); font-size: 13px; margin-top: 10px; }
.empty {
  background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 40px 24px; text-align: center; color: var(--slate);
}
.empty strong { display: block; color: var(--navy); font-size: 17px; margin-bottom: 6px; font-family: Manrope, sans-serif; }

label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
input[type=email],
input[type=password] {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--navy);
}
input[type=email]::placeholder,
input[type=password]::placeholder { color: #93a0b5; }

/* ---------------------------------------------------------------- sign in
   The threshold between the marketing site and the working system. It carries
   the same identity as the site, and the navy side says what is behind the
   door -- the five systems -- so a client knows what they are signing in to
   rather than staring at an anonymous form. */
.auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.auth-brand {
  background: var(--navy);
  color: #fff;
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.auth-brand .brand { color: #fff; font-size: 23px; }
.auth-brand .brand span { color: var(--blue); }
.auth-lede {
  font-family: Manrope, sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.1vw, 40px);
  line-height: 1.12;
  letter-spacing: -1.4px;
  margin: 0;
  max-width: 15ch;
}
.auth-lede em { font-style: normal; color: #7fb0ff; }
.auth-systems { margin: 4px 0 auto; padding: 0; list-style: none; }
.auth-systems li {
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 15px;
  color: #c3ccdd;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.auth-systems li b { color: #fff; font-weight: 600; font-family: Manrope, sans-serif; }
.auth-foot { font-size: 13px; color: #8f9cb5; margin: 0; }

.auth-panel {
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}
.auth-form { width: 100%; max-width: 360px; }
.auth-form h1 {
  font-size: 30px;
  letter-spacing: -1.1px;
  margin: 0 0 6px;
}
.auth-form .sub { margin-bottom: 26px; }
.auth-form label { margin-bottom: 8px; }
.auth-form .do { width: 100%; margin-top: 18px; }
.auth-form input + label { margin-top: 16px; }

/* Label and its escape hatch share a row, so "Forgot it?" sits where someone
   looks when the password is the thing going wrong. */
.field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.field-head label { margin-bottom: 7px; }
.linky {
  background: none;
  border: 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Small text, but a thumb-sized target. The negative margin keeps the padding
     from pushing the label row around. */
  padding: 14px 8px;
  margin: -14px -8px;
  min-height: 44px;
}

.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
  color: var(--slate);
  font-size: 13px;
}
.auth-or::before, .auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth-alt {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--slate);
}
.auth-alt a { font-weight: 600; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .auth { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth-brand { padding: 26px 22px 28px; gap: 22px; }
  .auth-lede { font-size: 26px; letter-spacing: -1px; max-width: 20ch; }
  /* The systems list is orientation on a big screen and clutter above a form
     on a small one, so it steps aside rather than pushing the form down. */
  .auth-systems, .auth-foot { display: none; }
  .auth-panel { padding: 30px 22px 60px; align-items: flex-start; }
  .auth-form { max-width: none; }
}

.hide { display: none !important; }

@media (max-width: 560px) {
  .wrap { padding: 18px 14px 60px; }
  .enquiry .when { margin-left: 0; width: 100%; }
  .do { flex: 1 1 100%; }
}

/* Back to the site. A real link, thumb-sized, and the first thing in the tab
   order on the panel so keyboard users are not trapped on the form. */
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 22px;
  padding: 10px 12px 10px 0;
  min-height: 44px;
  font-size: 14.5px;
  color: var(--slate);
  text-decoration: none;
}
.auth-back:hover { color: var(--navy); text-decoration: underline; }