/* =====================================================================
   Hutch — application styles
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
  --green:       #2F4A38;
  --green-mid:   #4A7C59;
  --sage:        #7E9A78;
  --sage-light:  #E4EDE1;
  --cream:       #F8F6F1;
  --line:        #E3DED3;
  --line-soft:   #EFEBE2;
  --text:        #2C302A;
  --muted:       #757A70;
  --red:         #B4402F;
  --red-light:   #FBEAE7;
  --amber:       #B77A21;
  --amber-light: #FCF2E2;
  --radius:      10px;
  --radius-lg:   14px;
  --shadow:      0 1px 3px rgba(47,74,56,.07);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
/* ── Navigation ─────────────────────────────────────────────────────── */
.nav {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.nav-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 20px;
  height: 58px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.brand {
  font-weight: 700; font-size: 16px; color: var(--green);
  text-decoration: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 9px;
}
.brand .brand-logo {
  height: 32px; width: 32px; object-fit: contain;
  border-radius: 6px; flex: none;
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  padding: 7px 12px; border-radius: 8px; text-decoration: none;
  color: var(--muted); font-size: 14px; font-weight: 500;
}
.nav-link:hover { background: var(--cream); color: var(--text); }
.nav-link.active { background: var(--sage-light); color: var(--green); font-weight: 600; }
/* Hamburger menu button — CSS-hidden by default (only .nav-toggle's own
   `display: none` below matters here) and switched on inside the mobile
   media query further down, so it never renders on desktop even before
   js/app.js's buildNav() finishes running. Three plain <span> bars,
   drawn/animated into an "X" via the .open class when the menu is open. */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 4px; width: 34px; height: 34px; padding: 0; margin: 0;
  border: none; background: transparent; cursor: pointer; flex: none;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px;
  background: var(--green); border-radius: 2px;
  transition: transform .15s ease, opacity .15s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ── Layout ─────────────────────────────────────────────────────────── */
.page { max-width: 1080px; margin: 0 auto; padding: 28px 20px 64px; }
.page.narrow { max-width: 480px; }
.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: 1.5rem; margin: 0 0 3px; color: var(--green); letter-spacing: -.3px; }
.page-head p  { margin: 0; color: var(--muted); font-size: 14px; }
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px;
  margin-bottom: 14px; box-shadow: var(--shadow);
}
.card h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin: 0 0 14px; font-weight: 600;
}
/* ── Forms ──────────────────────────────────────────────────────────── */
label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--text); margin-bottom: 4px;
}
.hint { font-size: 12.5px; color: var(--muted); margin: 3px 0 0; }
input, select, textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: inherit; font-size: 14.5px; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--sage);
  box-shadow: 0 0 0 3px var(--sage-light);
}
input[readonly] { background: var(--cream); color: var(--muted); }
textarea { resize: vertical; min-height: 70px; }
/* One vertical rhythm, whether a .row is side-by-side or wrapped.
   Previously .row had `gap: 12px` AND its children kept
   `margin-bottom: 14px`. On a desktop that was invisible, because the
   fields sat side by side and only the margin applied. On a phone the
   fields wrap — so the gap AND the margin both apply between them,
   making stacked fields 26px apart while every field outside a row was
   14px apart. Measured on a 390px screen, the booking form alternated
   26, 14, 26, 14 all the way down, which is what made the form look
   subtly unaligned without any single thing looking wrong.
   The row now owns the spacing and its children own none. */
.field { margin-bottom: 14px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.row > .field { flex: 1 1 200px; margin-bottom: 0; }
.row:last-child { margin-bottom: 0; }

/* Links had no rule at all, so every plain <a> fell back to the
   browser's blue-and-underlined default. On the public booking page
   that made "Had a problem, or feedback for us?" the single loudest
   element above the form, and on the calendar it made the admin link
   look like it belonged to a different site. */
a { color: var(--green); text-decoration-color: var(--sage); text-underline-offset: 2px; }
a:hover { color: var(--green-mid, var(--green)); }
/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border-radius: var(--radius);
  border: 1px solid var(--green); background: var(--green); color: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn:hover:not(:disabled) { background: var(--green-mid); border-color: var(--green-mid); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--green); }
.btn.ghost:hover:not(:disabled) { background: var(--sage-light); }
.btn.danger { background: #fff; color: var(--red); border-color: #E8C4BC; }
.btn.danger:hover:not(:disabled) { background: var(--red-light); }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btn-row.end { justify-content: flex-end; }
/* ── Feedback ───────────────────────────────────────────────────────── */
.notice {
  padding: 11px 14px; border-radius: var(--radius);
  font-size: 14px; margin-bottom: 14px;
  background: var(--sage-light); border: 1px solid var(--sage); color: var(--green);
}
.notice.error { background: var(--red-light); border-color: #E8C4BC; color: var(--red); }
.notice.warn  { background: var(--amber-light); border-color: #EBD3A6; color: var(--amber); }
.toast {
  position: fixed; bottom: 22px; right: 22px; z-index: 999;
  padding: 11px 18px; border-radius: var(--radius);
  background: var(--green); color: #fff;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
  transition: opacity .3s, transform .3s;
}
.toast.error { background: var(--red); }
.toast.go { opacity: 0; transform: translateY(6px); }
.empty { text-align: center; padding: 36px 20px; color: var(--muted); font-size: 14px; }
.loading { text-align: center; padding: 40px; color: var(--muted); font-size: 14px; }
/* ── Steps (setup wizard) ───────────────────────────────────────────── */
.steps { display: flex; gap: 8px; margin-bottom: 22px; }
.step {
  flex: 1; height: 4px; border-radius: 2px; background: var(--line);
}
.step.done { background: var(--sage); }
/* ── Auth screen ────────────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.auth-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 34px 30px; width: 100%; max-width: 400px; box-shadow: var(--shadow);
}
.auth-logo {
  font-size: 1.45rem; font-weight: 700; color: var(--green);
  text-align: center; margin-bottom: 4px;
}
.auth-logo img {
  display: block; margin: 0 auto; width: 128px; height: 128px; object-fit: contain;
}
.auth-tag {
  text-align: center; color: var(--muted); font-size: 13.5px; margin-bottom: 24px;
}
.auth-switch {
  text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 18px;
}
.auth-switch a { color: var(--green); font-weight: 600; cursor: pointer; text-decoration: none; }
@media (max-width: 600px) {
  .nav-inner { padding: 0 14px; gap: 8px; position: relative; }
  .page { padding: 20px 14px 48px; }

  /* Nav bar, mobile: the old layout tried to fit the logo/name, all 3
     page links, and Sign out onto one 58px row — crowded and wrapped
     badly on a phone. Below this width, .nav-links (the links + Sign
     out button) is hidden until the hamburger (.nav-toggle) is tapped,
     then drops down as a full-width panel instead of squeezing
     everything sideways. Above this width, .nav-toggle stays
     `display:none` (set above) so desktop is completely unchanged. */
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 8px 14px 14px;
  }
  .nav-links.open { display: flex; }
  .nav-link { padding: 11px 12px; font-size: 14.5px; border-radius: 8px; }
  .nav-links .btn.ghost.small { align-self: flex-start; margin-top: 6px; }

  /* Touch targets. Apple and Android both ask for ~44px; measured on a
     390px screen, the calendar's month arrows were 29px tall, Sign out
     29px, the settings tabs 38px and every input 38px. Small controls
     are the main reason an app feels fiddly rather than broken on a
     phone — you hit them eventually, just not first time, and usually
     while holding an animal. */
  .btn, .btn.small { min-height: 44px; }
  input, select, textarea { min-height: 44px; font-size: 16px; }
  .nav-toggle { width: 44px; height: 44px; }

  /* 16px on inputs above is not a typography choice: iOS Safari zooms
     the whole page in when a focused field is under 16px, and does not
     zoom back out afterwards. Anything smaller means every tap into a
     field leaves the layout enlarged and shifted sideways. */

  /* A lone right-aligned button reads as stranded once the card is only
     as wide as the screen — it loses its relationship with the field it
     belongs to. Full width instead, which also gives it a proper target. */
  .btn-row.end { justify-content: stretch; }
  .btn-row.end > .btn { flex: 1 1 auto; }

  /* Tab strips (Settings has seven, Admin four) were wrapping into
     ragged rows of 3 + 4, with the active underline stranded on the
     first row. One scrollable line keeps the relationship between them
     readable and the active tab where you left it. */
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; }
}