/* BillsQ dashboard.
   Brand kit palette and Poppins, same as the Flutter app's AppTheme, so the
   two surfaces read as one product. Mobile-first: almost every visit is a
   phone, and the desktop layout is the enhancement, not the baseline. */

:root {
  --blue: #1565d8;
  --blue-deep: #0d47a1;
  --green: #22b573;
  --green-soft: #e8f7ef;
  --page: #f5f7fa;
  --card: #ffffff;
  --ink: #16202c;
  --ink-soft: #5b6875;
  --line: #e3e8ef;
  --amber: #a35b00;
  --amber-soft: #fdf3e3;
  --danger: #c1392b;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 32, 48, 0.05), 0 6px 20px rgba(16, 32, 48, 0.05);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Poppins, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--blue); }

/* ---------- Shell ---------- */

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-inner {
  max-width: 940px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  font-weight: 700;
  font-size: 17px;
  color: var(--blue-deep);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand span { color: var(--green); }

.whoami {
  margin-left: auto;
  text-align: right;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.3;
  min-width: 0;
}

.whoami b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whoami a { color: var(--ink-soft); }

nav.tabs {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 10px 10px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

nav.tabs::-webkit-scrollbar { display: none; }

nav.tabs a {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--page);
  border: 1px solid transparent;
}

nav.tabs a.on {
  background: var(--blue);
  color: #fff;
}

nav.tabs a .pip {
  display: inline-block;
  min-width: 18px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}

nav.tabs a.on .pip { background: rgba(255, 255, 255, 0.28); }

main {
  max-width: 940px;
  margin: 0 auto;
  padding: 18px 16px 56px;
}

/* ---------- Type ---------- */

h1 {
  font-size: 23px;
  font-weight: 700;
  margin: 4px 0 2px;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 26px 0 10px;
}

.lede {
  color: var(--ink-soft);
  font-size: 14.5px;
  margin: 0 0 18px;
}

.muted { color: var(--ink-soft); }
.small { font-size: 13px; }

/* ---------- Cards ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}

.stat .k {
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* A title that links to the bills behind the number. Styled to still read
   as a label first — underlining only appears on hover, the one hint that
   it goes somewhere. */
a.k, a.k:visited { color: var(--ink-soft); text-decoration: none; }
a.k:hover { text-decoration: underline; }

.stat .v {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 2px;
  letter-spacing: -0.02em;
}

.stat.accent { background: var(--green-soft); border-color: #cfeadd; }
.stat.accent .v { color: #14603f; }
.stat.warn { background: var(--amber-soft); border-color: #f0dcbb; }
.stat.warn .v { color: var(--amber); }

/* ---------- Bills ---------- */

.bill {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.bill:last-child { border-bottom: 0; }

.bill input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 3px 0 0;
  accent-color: var(--blue);
  flex: 0 0 auto;
}

.bill-main { flex: 1 1 auto; min-width: 0; }

.bill-amount {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.bill-vendor { font-weight: 500; }

.bill-meta {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 1px;
}

.bill-side {
  flex: 0 0 auto;
  text-align: right;
  font-size: 13px;
}

.chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--green-soft);
  color: #14603f;
  white-space: nowrap;
}

.chip.review { background: var(--amber-soft); color: var(--amber); }
.chip.grey { background: var(--page); color: var(--ink-soft); }

/* ---------- Bulk action bar ---------- */

.bulkbar {
  position: sticky;
  bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  margin: 0 -16px -56px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 -6px 20px rgba(16, 32, 48, 0.06);
}

.bulkbar .count {
  font-size: 14px;
  font-weight: 600;
  margin-right: auto;
}

/* ---------- Controls ---------- */

.btn {
  display: inline-block;
  padding: 11px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

.btn:hover { background: var(--blue-deep); }
.btn:disabled { background: #b9c3d0; cursor: not-allowed; }
.btn.go { background: var(--green); }
.btn.go:hover { background: #1a9860; }
.btn.quiet {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn.quiet:hover { background: var(--page); }
.btn.danger { background: var(--card); color: var(--danger); border: 1px solid #eccdc9; }
.btn.small { padding: 7px 13px; font-size: 13.5px; }
.btn.block { display: block; width: 100%; }

input[type="tel"],
input[type="text"],
input[type="date"],
select {
  width: 100%;
  padding: 12px 13px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
}

/* Dates open their calendar from anywhere in the box (see base.html), so the
   whole field reads as a button. The height is pinned to the select beside
   it — a date input is otherwise a few pixels shorter in every browser. */
input[type="date"] {
  min-height: 50px;
  cursor: pointer;
}
input[type="date"]::-webkit-datetime-edit { padding: 0; }
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  opacity: 0.55;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background-color: var(--page);
}

input[type="radio"],
input[type="checkbox"] { accent-color: var(--blue); }

input:focus, select:focus {
  outline: 2px solid rgba(21, 101, 216, 0.35);
  outline-offset: 1px;
  border-color: var(--blue);
}

label.field {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 6px;
}

.code-input {
  font-size: 27px !important;
  letter-spacing: 0.35em;
  text-align: center;
  font-weight: 600;
}

.row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.row > * { flex: 1 1 180px; }
.row > .fit { flex: 0 0 auto; }

/* ---------- Notices ---------- */

.notice {
  border-radius: 12px;
  padding: 13px 15px;
  margin-bottom: 14px;
  font-size: 14.5px;
  border: 1px solid;
}

.notice.info { background: #eef4ff; border-color: #ccdcfb; color: #17376f; }
.notice.good { background: var(--green-soft); border-color: #cfeadd; color: #14603f; }
.notice.warn { background: var(--amber-soft); border-color: #f0dcbb; color: var(--amber); }
.notice.bad { background: #fdeeec; border-color: #f3d2ce; color: var(--danger); }
.notice a { color: inherit; font-weight: 600; }

.empty {
  text-align: center;
  padding: 30px 18px;
}

.empty .big { font-size: 34px; line-height: 1; }
.empty h3 { margin: 12px 0 4px; font-size: 17px; font-weight: 600; }
.empty p { margin: 0 auto; max-width: 380px; color: var(--ink-soft); font-size: 14.5px; }

/* ---------- Team ---------- */

.person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.person:last-child { border-bottom: 0; }
.person-main { flex: 1 1 190px; min-width: 0; }
.person-main b { font-weight: 600; }
.toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.toggles form { margin: 0; }

.perm {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
}

.perm.on {
  background: var(--green-soft);
  border-color: #cfeadd;
  color: #14603f;
  font-weight: 600;
}

/* ---------- Sign-in ---------- */

.signin {
  max-width: 400px;
  margin: 8vh auto 0;
  padding: 0 16px 40px;
}

.signin .mark {
  text-align: center;
  margin-bottom: 22px;
}

.signin .mark .logo {
  font-size: 25px;
  font-weight: 700;
  color: var(--blue-deep);
  letter-spacing: -0.02em;
}

.signin .mark .logo span { color: var(--green); }
.signin .mark p { margin: 2px 0 0; color: var(--ink-soft); font-size: 14px; }

.steps {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.steps li {
  display: flex;
  gap: 10px;
  padding: 5px 0;
}

.steps .n {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--green-soft);
  color: #14603f;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.howto {
  background: var(--green-soft);
  border: 1px solid #cfeadd;
}

.howto h2 { margin-top: 0; color: #14603f; }

.copybox {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--page);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  word-break: break-all;
  margin-top: 8px;
}

.linklist { display: flex; gap: 8px; flex-wrap: wrap; }

@media (min-width: 700px) {
  h1 { font-size: 27px; }
  main { padding-top: 24px; }
}

/* ---------- Landing page ---------- */

/* Safety net. A 1670px-wide background image with no ceiling stretches the
   whole document and makes every other rule look like it never loaded —
   which is exactly how the first version of this page failed. */
img { max-width: 100%; height: auto; }

.page { max-width: 1120px; margin: 0 auto; padding: 0 0 40px; }

/* Logo and both doors live in the header now, so the photograph underneath
   can be the pitch by itself instead of competing with text on top of it.
   Sticky rather than static — a floating bar that follows the page down,
   so the two doors are never more than a glance away. */
.landing-top {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(16, 32, 48, 0.05);
}

.landing-top-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.landing-top-brand { display: flex; align-items: center; gap: 8px; }

.landing-top-logo { height: 38px; width: auto; display: block; }

.landing-top-name {
  font: 700 21px "Poppins", sans-serif;
  color: var(--blue-deep);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.landing-top-name .landing-top-q { color: var(--green); }

.landing-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* A WhatsApp-shaped pill rather than plain text — "or save" made the number
   read as an instruction to write it down; the symbol says what it's for. */
a.landing-top-number, span.landing-top-number {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: #14603f;
  background: var(--green-soft);
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
}
a.landing-top-number:hover { background: #d8f2e5; }

@media (max-width: 640px) {
  /* Two clean rows — brand, then actions — rather than one row's worth of
     buttons and a phone number all wrapping into each other. */
  .landing-top-inner { justify-content: center; text-align: center; }
  .landing-top-actions { width: 100%; justify-content: center; }
}

.btn.big { padding: 15px 22px; font-size: 16px; }
.btn.compact { padding: 9px 16px; font-size: 13.5px; }

.btn.light {
  background: var(--page);
  color: var(--blue-deep);
  border: 1px solid var(--line);
}
.btn.light:hover { background: #fff; }

/* The photograph is the pitch, full brightness — no wash over it. Only a
   small card floats on top with the one line the picture itself doesn't
   already say, so the image does most of the talking. */
.hero { position: relative; line-height: 0; background: var(--ink); }

.hero-photo {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  object-position: center right;
  display: block;
}

.hero-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: var(--shadow);
  line-height: 1.5;
}

.hero-caption p {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

/* The three words worth a second glance — what to send, how, and who
   ultimately sees it — picked out in the two brand colours rather than
   left the same weight as the rest of the sentence. */
.hero-caption .hl-blue { color: var(--blue-deep); font-weight: 700; }
.hero-caption .hl-green { color: #1a9860; font-weight: 700; }

/* ---------- How it works (no background, deliberately) ---------- */

.how { padding: 34px 18px 6px; }
.how h2 { font-size: 24px; margin: 0 0 4px; color: var(--blue-deep); }
.how-lead { color: var(--ink-soft); margin: 0 0 20px; font-size: 15px; }

.how-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

.how-step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.how-step h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.how-step p { margin: 0 0 10px; color: var(--ink-soft); font-size: 14.5px; }
.how-step p:last-child { margin-bottom: 0; }

.step-n {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--green-soft);
  color: #14603f;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}

/* The one thing on the page worth memorising, so it is set apart from the
   prose rather than buried in it. */
.format {
  background: var(--page);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 10px;
}

.format code {
  display: block;
  font: 600 15px ui-monospace, Consolas, monospace;
  color: var(--blue-deep);
  margin-bottom: 4px;
}

.format span { font-size: 12px; color: var(--ink-soft); }

.how-note {
  background: var(--green-soft);
  border: 1px solid #cfeadd;
  border-radius: var(--radius);
  padding: 16px 18px;
}

.how-note h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 600; color: #14603f; }
.how-note p { margin: 0; font-size: 14px; color: #1c5c45; }

.closer {
  text-align: center;
  margin: 28px 18px 0;
  padding: 30px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.closer h2 { margin: 0 0 6px; font-size: 22px; color: var(--blue-deep); }
.closer p { margin: 0 0 18px; color: var(--ink-soft); }

.landing-foot {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 26px 18px 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
}

.landing-foot a { margin-left: auto; }

@media (min-width: 780px) {
  .landing-top-logo { height: 50px; }
  .hero-photo { max-height: 520px; }
  .hero-caption { left: 40px; bottom: 32px; max-width: 460px; padding: 18px 22px; }
  .hero-caption p { font-size: 16.5px; }
  .how-grid { grid-template-columns: repeat(3, 1fr); }
  .how { padding-top: 44px; }
}

/* ---------- Platform admin ---------- */

.admin-top {
  background: var(--blue-deep);
  color: #fff;
  border-bottom: 0;
}

.admin-top .brand, .admin-top .whoami b { color: #fff; }
.admin-top .whoami, .admin-top .whoami a { color: rgba(255, 255, 255, 0.75); }

.admin-scope {
  background: #FFF6E5;
  border: 1px solid #f0dcbb;
  color: var(--amber);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.grid th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  white-space: nowrap;
}
table.grid td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid td.num, table.grid th.num { text-align: right; white-space: nowrap; }