:root {
  --fg: #1a1a2e; --muted: #6b7280; --line: #e5e7eb;
  --accent: #2563eb; --danger: #dc2626; --bg: #f7f7fb;
}
* { box-sizing: border-box; }
body {
  margin: 0; font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--fg); background: var(--bg);
}
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .5rem .9rem;   /* wrap the nav under the brand on narrow screens */
  padding: .75rem 1.25rem; background: #fff; border-bottom: 1px solid var(--line);
}
.brand { font-weight: 600; }
.topbar .nav { display: flex; align-items: center; gap: 1rem; }
.topbar .who { color: var(--muted); }
main { max-width: 780px; margin: 1.5rem auto; padding: 0 1.25rem; }
main.wide { max-width: 1100px; }  /* the customer table (7 cols) needs room; forms stay narrow via .card */
h1 { font-size: 1.4rem; }
a { color: var(--accent); }
.muted { color: var(--muted); }

.card {
  display: flex; flex-direction: column; gap: .9rem;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 1.25rem; max-width: 480px;
}
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 500; }
label.checkbox { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
input, select {
  font: inherit; padding: .5rem .6rem; border: 1px solid var(--line);
  border-radius: 6px; background: #fff;
}
.row { display: flex; gap: .9rem; }
.row > label { flex: 1; }
.row-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; }
details summary { cursor: pointer; color: var(--muted); }

button, .button {
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  padding: .55rem .9rem; border: 0; border-radius: 6px;
  background: var(--accent); color: #fff; display: inline-block;
}
button.link { background: none; color: var(--accent); padding: 0; font-weight: 500; }
button.link.danger { color: var(--danger); }
.button.secondary { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
form.inline { display: inline; margin: 0; }

/* Alternative login (Google) sits under the username/password form. */
.alt-auth { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .5rem; }
.alt-auth .or { color: var(--muted); font-size: .85rem; text-transform: uppercase; }

table.grid { width: 100%; border-collapse: collapse; background: #fff; }
.grid th, .grid td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.grid th { font-size: .8rem; text-transform: uppercase; color: var(--muted); }
.grid tr.disabled { opacity: .5; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* The customer table has 7 columns incl. two action groups, so it can be wider
   than the page. Scroll it horizontally *inside* the bucket rather than let
   details.bucket's overflow:hidden clip the right-hand Regenerate/Delete
   controls (the reported bug). min-width is the threshold below which we scroll
   instead of squeezing columns; above it the table just fills the width. */
.table-wrap { overflow-x: auto; }
.table-wrap .grid { min-width: 860px; }
.linkcell button, .actions a, .actions button { white-space: nowrap; }

.flash {
  list-style: none; padding: .6rem .9rem; margin: 0 0 1rem; border-radius: 8px;
  background: #eef2ff; border: 1px solid #c7d2fe;
  word-break: break-word;
}

/* Dashboard buckets (native <details> collapsibles, one per main location). */
details.bucket {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: .75rem; overflow: hidden;
}
details.bucket > summary {
  cursor: pointer; padding: .7rem .9rem; font-weight: 600; color: var(--fg);
  list-style: none;
}
details.bucket > summary::-webkit-details-marker { display: none; }
details.bucket > summary::before { content: "▸ "; color: var(--muted); }
details.bucket[open] > summary::before { content: "▾ "; }
details.bucket .grid { border-top: 1px solid var(--line); }

/* Fallback locations shown as compact tags in the table. */
.tag {
  display: inline-block; padding: .05rem .45rem; margin: .1rem .2rem .1rem 0;
  font-size: .8rem; border-radius: 999px;
  background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe;
}
/* Partner status pills (partners.html). */
.tag.ok { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.tag.pending { background: #fffbeb; color: #92400e; border-color: #fde68a; }

.linkcell { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; }
.linkcell .inline { margin: 0; }

/* Customers filter bar (client-side filtering; see static/app.js). Full width
   over the wide table rather than the narrow .card measure. */
.filters { max-width: none; gap: .8rem; }
.filters .filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; }
.filters label.grow { flex: 1 1 240px; }
.filters .filter-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: .8rem;
}
/* A tbody row hidden by the filters. More specific than the mobile
   `.grid tr { display: block }` rule so it wins in the card layout too. */
.grid tbody tr.hide { display: none; }

/* Form fieldsets (Account / Ownership / Location / Booking dates). */
fieldset {
  border: 1px solid var(--line); border-radius: 8px; padding: .9rem 1rem;
  margin: 0; display: flex; flex-direction: column; gap: .9rem; min-width: 0;
}
fieldset > legend { font-weight: 600; padding: 0 .35rem; }
fieldset.checks { background: var(--bg); }
.checkgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .35rem .75rem;
}
.checkgrid label.checkbox { font-weight: 400; }

/* Field help: a small "i" that reveals a description on hover OR keyboard focus.
   CSS-only (the strict CSP forbids inline JS) and driven by a real <button>, so
   it works by pointer, keyboard, and touch alike. The visible bubble is
   decorative; the button's aria-label carries the text for screen readers. */
.label-text { display: inline-flex; align-items: center; }
.hint { position: relative; display: inline-flex; vertical-align: middle; margin-left: .35rem; }
.hint-icon {
  width: 1.15rem; height: 1.15rem; padding: 0; border-radius: 999px;
  background: var(--muted); color: #fff; font: 700 .72rem/1 system-ui, sans-serif;
  display: inline-flex; align-items: center; justify-content: center; cursor: help;
}
.hint-bubble {
  position: absolute; left: 0; bottom: calc(100% + .45rem); z-index: 20;
  width: max-content; max-width: 240px;
  padding: .45rem .6rem; border-radius: 6px;
  background: var(--fg); color: #fff; font-weight: 400; font-size: .8rem;
  line-height: 1.4; text-align: left; box-shadow: 0 6px 18px rgba(17, 24, 39, .22);
  opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none;
}
.hint:hover .hint-bubble,
.hint:focus-within .hint-bubble { opacity: 1; visibility: visible; }

/* Site footer — keeps the public Privacy/Terms links reachable on every page
   (Google's OAuth review looks for the privacy-policy link on the site). */
.sitefooter {
  max-width: 780px; margin: 2rem auto 0; padding: 1rem 1.25rem 2rem;
  border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem;
  display: flex; flex-wrap: wrap; gap: .5rem;
}

/* Long-form legal pages (privacy policy, terms): a readable measure and roomy,
   clearly-ranked headings over the form-oriented base styles. */
main.legal { max-width: 760px; }
main.legal h1 { margin-bottom: .25rem; }
main.legal h2 { font-size: 1.05rem; margin-top: 1.7rem; }
main.legal h3 { font-size: .95rem; margin-top: 1.1rem; margin-bottom: .2rem; }
main.legal p, main.legal li { line-height: 1.6; }
main.legal ul { padding-left: 1.2rem; }
main.legal a { word-break: break-word; }

/* ---- Mobile (≤640px) ------------------------------------------------------
   Partners work from phones: reflow the wide tables into one labelled card per
   row (no sideways scrolling), stack cramped field pairs, and size inputs so
   iOS Safari doesn't auto-zoom on focus. */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }   /* ≥16px stops the focus zoom */
  main { margin: 1rem auto; }
  .topbar .nav { gap: .75rem; }

  /* Stack side-by-side field pairs (e.g. the two date inputs). */
  .row { flex-direction: column; gap: .6rem; }

  /* Filter controls go full-width and the actions row left-aligns. */
  .filters .filter-row { flex-direction: column; align-items: stretch; }
  .filters .filter-actions { justify-content: space-between; }

  /* Turn each table row into a self-contained card. Every <td> carries a
     data-label (see dashboard.html / partners.html) shown as its caption, so
     the header row is redundant and hidden. */
  .table-wrap { overflow-x: visible; }
  .table-wrap .grid { min-width: 0; }
  .grid thead { display: none; }
  .grid, .grid tbody, .grid tr, .grid td { display: block; width: auto; }
  .grid tr {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    margin: .6rem 0; overflow: hidden;
  }
  .grid td {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; padding: .5rem .8rem; text-align: right;
  }
  .grid tr td:last-child { border-bottom: 0; }
  .grid td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .02em; color: var(--muted); white-space: nowrap;
  }
  /* Control cells lay their buttons out under the caption, left-aligned and
     roomy enough to tap. */
  .grid td.linkcell, .grid td.actions {
    flex-direction: column; align-items: flex-start; text-align: left; gap: .6rem;
  }
}