/* Brand tokens matching gaydonnesellshomes.com */
:root {
  --ink:    #111111;
  --text:   #2b2b2b;
  --muted:  #777777;
  --line:   #e4e4e4;
  --bg:     #ffffff;
  --bg-alt: #f6f6f6;

  --font: "Jost", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

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

h1, h2, h3, .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  font-weight: 500;
}
h1 { font-size: 1.1rem; margin: 0 0 1rem; }
h2 { font-size: 0.95rem; margin: 1.5rem 0 0.75rem; }
h3 { font-size: 0.85rem; margin: 1rem 0 0.5rem; }

/* Top bar ---------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding-top: calc(0.9rem + env(safe-area-inset-top));
}
.brand {
  text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 500; font-size: 0.9rem;
}
.tabs { display: flex; gap: 1rem; margin-left: auto; flex-wrap: wrap; }
.tabs a {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem;
  color: var(--muted); padding: 0.3rem 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a.active { color: var(--ink); border-bottom-color: var(--ink); }

@media (max-width: 480px) {
  /* Keep the top bar readable at phone width: smaller gaps, no wrapping
     labels like "SIGN OUT" breaking in half. */
  .topbar { gap: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; }
  .tabs { gap: 0.7rem; }
  .tabs a { font-size: 0.72rem; letter-spacing: 0.1em; }
  .brand { font-size: 0.78rem; letter-spacing: 0.14em; }
  .link { white-space: nowrap; }
}

/* Views ------------------------------------------------------------------ */
.view { padding: 1rem; max-width: 720px; margin: 0 auto; }
.muted { color: var(--muted); font-size: 0.9rem; }
.hint  { color: var(--muted); font-size: 0.85rem; margin-top: 0.25rem; }

/* Buttons ---------------------------------------------------------------- */
.btn, button.btn, a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem;
  font-family: var(--font); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem;
  padding: 0.8rem 1.2rem;
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink); border-radius: 999px;
  cursor: pointer;
}
.btn.outline { background: transparent; color: var(--ink); }
.btn.block { display: flex; width: 100%; }
.btn:disabled { opacity: 0.5; }

.link {
  background: none; border: 0; padding: 0;
  color: var(--muted); font: inherit;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem;
  cursor: pointer;
}

/* Lead cards ------------------------------------------------------------- */
.card {
  display: block;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 0.6rem;
  background: var(--bg);
}
.card .name { font-weight: 500; color: var(--ink); }
.card .meta { color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; }
.card .badge {
  display: inline-block;
  font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.15rem 0.5rem; border: 1px solid var(--line);
  border-radius: 999px; color: var(--muted); margin-right: 0.3rem;
}
.card.overdue { border-color: var(--ink); }
.card.overdue .badge { color: var(--ink); border-color: var(--ink); }

/* Toolbar + filters ------------------------------------------------------ */
.toolbar {
  display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap;
}
.toolbar > * { min-width: 0; }    /* lets flex children shrink below content width */
.toolbar input, .toolbar select {
  font: inherit; padding: 0.6rem 0.75rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); min-width: 0; flex: 1 1 10rem;
}

@media (max-width: 480px) {
  /* On narrow phones, stack toolbar rows so two-column form rows don't
     clip the right-hand field. */
  .toolbar { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .toolbar > * { flex: 1 1 auto; width: 100%; }
}

/* Forms ------------------------------------------------------------------ */
form.stack { display: flex; flex-direction: column; gap: 0.6rem; }
label { display: block; font-size: 0.8rem; color: var(--muted);
        text-transform: uppercase; letter-spacing: 0.1em; }
input, select, textarea {
  font: inherit; width: 100%; padding: 0.65rem 0.8rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--text);
}
textarea { min-height: 5rem; resize: vertical; }

/* One-tap action row ----------------------------------------------------- */
.actions-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem; margin: 0.75rem 0;
}
.actions-row .btn { padding: 0.9rem 0.6rem; }

/* Activity log ----------------------------------------------------------- */
.activity {
  padding: 0.75rem 0; border-top: 1px solid var(--line);
}
.activity:first-child { border-top: 0; }
.activity .when { color: var(--muted); font-size: 0.75rem;
                  text-transform: uppercase; letter-spacing: 0.12em; }
.activity .body { white-space: pre-wrap; margin-top: 0.2rem; }

/* Toast ------------------------------------------------------------------ */
.toast {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  padding: 0.6rem 1rem; border-radius: 999px;
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  z-index: 20;
}

/* Sign-in ---------------------------------------------------------------- */
.signin {
  max-width: 20rem; margin: 4rem auto; padding: 1rem;
  text-align: center;
}
.signin .btn { margin-top: 1rem; }