/* The one palette and the shared furniture. Every page loads this; the
   page-specific sheets (search, listing, agency) add layout on top and define
   no colours of their own, so the product cannot drift into two ideas of what
   grey is. Anything reused by a second page belongs here rather than being
   copied into the second sheet. */
:root {
  --bg: #f6f8f7;
  --card: #ffffff;
  --ink: #14201b;
  --muted: #5c6b64;
  --faint: #8a978f;
  --line: #dde4e0;
  --line-2: #e8edea;
  --col: #edf1ef;      /* the quiet fill behind a chip, a track, a thumbnail */
  --accent: #2f6f4f;
  --done: #2f855a;
  --warn: #b45309;
  --error: #b3261e;
  --shadow: 0 1px 2px rgba(20,32,27,.10), 0 2px 8px rgba(20,32,27,.05);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* A button that reads as a link. For an action that belongs in running text but
   must POST (the sign-in page's "send the confirmation link again"), where an
   <a href> would be the wrong element. */
.linklike {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent);
}
.linklike:hover { text-decoration: underline; }
.linklike:disabled { color: var(--muted); cursor: default; text-decoration: none; }

.topbar {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: 0.7rem 1.25rem;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.topbar .brand {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 800; color: var(--ink);
}
.topbar .brand:hover { text-decoration: none; }
.topbar .brand .logo {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 800;
}
.topbar nav { display: flex; gap: 1.25rem; margin-left: auto; }
.topbar nav a { color: var(--muted); font-size: 0.88rem; }
.topbar nav a:hover { color: var(--accent); text-decoration: none; }

.content { max-width: 880px; margin: 2rem auto; padding: 0 1.25rem; }
h1 { font-size: 1.5rem; }
.muted { color: var(--muted); }
.error { color: var(--error); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1rem 0;
}
.auth-card { max-width: 340px; margin: 6rem auto; }

form label { display: block; margin: 0.5rem 0; font-size: 0.9rem; color: var(--muted); }
form input {
  display: block; width: 100%; margin-top: 0.25rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 6px;
  font: inherit;
}
/* Textareas and selects were unstyled until the profile page had one of each.
   Same box as `form input` above rather than a second look for the same job. */
form textarea, form select {
  display: block; width: 100%; margin-top: 0.25rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; background: #fff;
}
form textarea { resize: vertical; }
form label small { display: block; margin-top: 0.3rem; font-size: 0.8rem; }
form input:disabled { background: #f3f5f4; color: var(--muted); }

.inline-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.inline-form label { margin: 0; }
.inline-form input { width: auto; }

/* --- profile picture ------------------------------------------------------ */
.avatar-row { display: flex; gap: 1.25rem; align-items: center; }
.avatar-preview {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; color: #fff; font-weight: 600; font-size: 1.4rem;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }

button {
  padding: 0.5rem 0.9rem; border: 0; border-radius: 6px;
  background: var(--accent); color: #fff; font: inherit; cursor: pointer;
}
button:hover { filter: brightness(1.05); }

table.grid { width: 100%; border-collapse: collapse; margin-top: 1rem; }
table.grid th, table.grid td {
  text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line);
}
table.grid th { font-size: 0.8rem; text-transform: uppercase; color: var(--muted); }

.secret {
  background: #0f1720; color: #d6e2ff; padding: 0.9rem; border-radius: 8px;
  white-space: pre-wrap; word-break: break-all;
}

/* An aside the page needs read but that is nobody's fault - "paid plans aren't
   enabled on this deployment". Not .error: nothing went wrong. */
.notice {
  background: #fff8e1; border: 1px solid #f0d98a; color: #6b5900;
  border-radius: 8px; padding: 0.75rem 1rem; margin: 0.75rem 0;
}

button.secondary {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent);
}
.onboarding { max-width: 900px; margin: 2rem auto; }
.onboarding .stack label { max-width: 26rem; }

/* --- shared furniture: search, back-office and listing all use these ------- */

/* The one emphatic control on a page. An <a> as well as a <button>, because
   "Suchen" is a button and "Beim Anbieter ansehen" is a link, and they should
   not look like two different weights of the same decision. */
.cta, a.cta {
  display: inline-block; padding: 0.5rem 0.9rem; border: 0; border-radius: 6px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
a.cta:hover { text-decoration: none; filter: brightness(1.05); }
.topbar nav a.cta { color: #fff; }

.page-head { margin-bottom: 1rem; }
.page-head h1 { margin-bottom: 0.25rem; }

/* The result count, and the row that says "nothing matched". aria-live in the
   markup, because a count that changes without a page load is invisible to a
   screen reader otherwise. */
.summary { color: var(--muted); font-size: 0.9rem; margin: 1rem 0 0.5rem; }

.pager {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 2rem 0;
}
.pager button:disabled { background: var(--col); color: var(--faint); cursor: default; }
.pager span { color: var(--muted); font-size: 0.9rem; }

/* Filter bars. `.filters` is the search's, `.compact` the back-office's - same
   controls, less air, because a table needs the vertical space more. */
.filters {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1.25rem; margin: 1.5rem 0 0.5rem;
}
.filters .row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.filters label { margin: 0; display: block; }
.filters label span { display: block; font-size: 0.8rem; color: var(--muted); }
.filters input, .filters select { width: auto; min-width: 9rem; }
.filters .grow { flex: 1 1 16rem; }
.filters .grow input { width: 100%; }
.filters.compact { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }

.bad { color: var(--error); }
.warn { color: var(--warn); }

/* A published/hidden toggle in a table row. A real checkbox underneath, so it
   is keyboard-reachable and announces its state; the box is what is styled. */
.switch { display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span {
  width: 36px; height: 20px; border-radius: 999px; background: var(--line);
  position: relative; transition: background .15s;
}
.switch span::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform .15s;
}
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:disabled + span { opacity: .4; cursor: default; }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.empty-state { text-align: center; margin: 5rem auto; max-width: 32rem; }

/* --- Google sign-in button + divider (auth pages) ------------------------- */
.or-divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.1rem 0; color: #6b7280; font-size: .8rem;
}
.or-divider::before, .or-divider::after {
  content: ""; flex: 1; height: 1px; background: #e5e7eb;
}
.google-btn {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  padding: .55rem .75rem; border: 1px solid #d1d5db; border-radius: 6px;
  text-decoration: none; color: inherit; font-weight: 600;
}
.google-btn:hover { background: rgba(0,0,0,.03); }