:root {
  /* "Warm hillside villa" — the palette is lifted from the Balai Ilaya logo:
     its brown wordmark, sun gold, cream ground, palm olive and pool teal. */
  --primary: #6b4a2b;       /* logo brown — buttons, links, active states */
  --primary-dark: #4e3520;
  --primary-light: #8a6540; /* gloss highlight on brown surfaces (decorative) */
  --accent: #d9a25f;        /* logo sun — highlights, badges, focus halo. Never text. */
  --ink: #3b2a1a;           /* body text, warm near-black */
  --ink-soft: #6e5a43;      /* secondary text (brief's #8a7359 is only 3.9:1 on cream) */
  --ink-faint: #7d6750;     /* outside-month day numbers — still 4.6:1 on cream */
  --line: #e8dccb;
  --line-strong: #998363;   /* input/control boundaries — 3.1:1 on cream, 3.6:1 on white */
  --bg: #f6ede2;            /* logo cream — page background */
  --bg-soft: #fbf6ef;       /* cards */
  --paper: #ffffff;         /* input fields, gloss tops */
  --leaf: #8a8f5c;          /* palm olive — success / fully paid (surfaces) */
  --pool: #7ea6a3;          /* pool teal — informational, availability (surfaces) */
  --pool-ink: #3f6663;      /* pool, darkened for text/borders (5.5:1 on cream) */
  --red: #b4423a;           /* muted terracotta for errors/delete */
  --red-dark: #8f2f28;
  --amber: #d9a25f;  --amber-ink: #3b2a1a;
  --gold-ink: #8c5320;      /* sun gold darkened for small text (5.4:1 on cream) */
  --green: #6f7a3f;
  --green-ink: #55602e;     /* olive darkened for text on light tints */
  /* Light tints for chips, notes and success/info surfaces. */
  --leaf-tint: #eef0e2;
  --pool-tint: #e6efee;
  --red-tint: #f7e6e3;
  --amber-tint: #f8ebd8;
  --amber-tint-2: #f3dcb4;
  /* --sunset-* kept for their semantic roles (header underline, the
     "overdue" chase-up section) but remapped to a brown → gold sweep. */
  --sunset-1: #6b4a2b;
  --sunset-2: #b07a3c;
  --sunset-3: #d9a25f;
  /* Gold focus halo: paired with a 2px --primary outline so the ring
     itself clears 3:1 (gold alone on cream is only ~1.9:1). */
  --ring: 0 0 0 4px rgba(217, 162, 95, 0.45);
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  /* Warm header: a cream-to-paper sweep behind the top bar. */
  --sky-header: linear-gradient(168deg, var(--amber-tint) 0%, var(--bg-soft) 62%);
  /* Glossy brown pill: today, the active filter chip, the agenda's today badge. */
  --aero-pill: radial-gradient(circle at 50% 25%, var(--primary-light), var(--primary));
  --aero-pill-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(78, 53, 32, 0.35);
  /* Translucent borders, from the bottom ribbon's language. */
  --glass-line: rgba(107, 74, 43, 0.3);
  --glass-line-soft: rgba(107, 74, 43, 0.25);
  --bar-h: 1.25rem;
  --radius: 14px;           /* cards, dialogs, inputs */
  --radius-sm: 10px;        /* small buttons, day cells, notes */
}

/* ---------- Self-hosted fonts (Latin subsets, OFL; see /fonts/OFL-*.txt) ---------- */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Cormorant Garamond Medium"), local("CormorantGaramond-Medium"),
    url("/fonts/cormorant-garamond-500.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Cormorant Garamond SemiBold"), local("CormorantGaramond-SemiBold"),
    url("/fonts/cormorant-garamond-600.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Inter Regular"), local("Inter-Regular"),
    url("/fonts/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Inter Medium"), local("Inter-Medium"),
    url("/fonts/inter-500.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Inter SemiBold"), local("Inter-SemiBold"),
    url("/fonts/inter-600.woff2") format("woff2");
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
  /* Cream backdrop with a soft top-to-bottom gradient + the arch watermark
     (already ~4% alpha in the PNG) tucked into the bottom-right corner,
     painted on the root so it sits behind every page. Content cards stay
     opaque for readability. */
  background-color: var(--bg);
  background-image:
    url("/img/watermark.png"),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  background-repeat: no-repeat;
  background-position: right -6% bottom -4%, center;
  background-size: min(70vw, 26rem) auto, auto;
  background-attachment: fixed;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: transparent;
}

/* The page itself never scrolls — <main> is the scroll container. The fixed
   bottom ribbon and header therefore never resize or shift when a scrollbar
   comes and goes. (Login page keeps its own centered layout.) */
body:not(.login-body) {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

button {
  font: inherit;
  cursor: pointer;
}

/* The hidden attribute must win over any display: flex/grid set below —
   without this a hidden contact row or callout would still render. */
[hidden] {
  display: none !important;
}

/* Headings echo the serif wordmark. The serif needs ~15% more size than the
   sans for the same visual weight, so each heading is sized individually. */
h1,
h2,
h3,
.app-title,
.month-title,
.view-title,
.dialog h3,
.dp-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--primary-dark);
}

/* Bars, chips and mini buttons are bold weights the sans doesn't ship (700);
   600 is the heaviest Inter file, so map "bold" to it globally. */
b,
strong {
  font-weight: 600;
}

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--sky-header);
  padding: 0.5rem 0.75rem 0.4rem;
  box-shadow: 0 1px 6px rgba(59, 42, 26, 0.06);
}

/* Brown → gold underline: the header's brand tie-in. */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sunset-1), var(--sunset-2) 55%, var(--sunset-3));
}

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.app-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.3rem;
  line-height: 1;
  margin: 0;
  color: var(--primary-dark);
  white-space: nowrap;
}

/* The arch mark alone — the full lockup is illegible at this size. It is
   taller than wide, so height is the constraining dimension. */
.brand-logo {
  height: 2.125rem;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}

.month-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.month-title {
  font-size: 1.25rem;
  line-height: 1.1;
  margin: 0;
  min-width: 9.5rem;
  text-align: center;
}

.nav-btn {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper), var(--bg));
  border-radius: var(--radius-sm);
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--primary-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.nav-btn:hover,
.today-btn:hover,
.ghost-btn:hover {
  background: linear-gradient(180deg, var(--paper), var(--line));
}

.today-btn {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper), var(--bg));
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  color: var(--primary-dark);
  font-weight: 600;
  margin-left: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ghost-btn {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
}

/* "Sign out" must not break into two lines on a 360px phone; the device
   chip beside it is the one that shrinks (it has its own ellipsis). */
.topbar .ghost-btn {
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.75);
  border-color: var(--glass-line-soft);
}

/* Whose-device chip: lives next to the app title, tap to (re)name. */
.device-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: 11rem;
  margin-right: auto; /* hug the title; Sign out stays on the right */
  border: 1px solid var(--glass-line-soft);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.device-chip svg {
  flex-shrink: 0;
  width: 0.8rem;
  height: 0.8rem;
}

.device-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* No name yet → make the chip read as an invitation, not a label. */
.device-chip.unnamed {
  border: 1px dashed var(--primary);
  color: var(--primary);
  font-weight: 600;
}

.hidden {
  display: none !important;
}

/* ---------- Room-type filter chips (calendar) ---------- */

.chip-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.55rem;
  overflow-x: auto;
  padding-bottom: 0.1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: none;
  border: 1px solid rgba(107, 74, 43, 0.35);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(246, 237, 226, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(59, 42, 26, 0.12);
  white-space: nowrap;
}

.chip.active {
  color: #fff;
  border-color: var(--primary-dark);
  background: var(--aero-pill);
  box-shadow: var(--aero-pill-shadow);
}

/* Shared keyboard focus ring: brown outline (clears 3:1 on cream) wrapped in
   a soft gold halo — the brief's accent, made accessible. */
.nav-btn:focus-visible,
.today-btn:focus-visible,
.ghost-btn:focus-visible,
.device-chip:focus-visible,
.tab:focus-visible,
.fab:focus-visible,
.primary-btn:focus-visible,
.danger-btn:focus-visible,
.dp-close:focus-visible,
.dp-nav:focus-visible,
.chip:focus-visible,
.today-strip:focus-visible,
.agenda-card:focus-visible,
.agenda-next:focus-visible,
.sheet-close:focus-visible,
.contact-btn:focus-visible,
.link-btn:focus-visible,
.pw-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: var(--ring);
}

/* ---------- Tab bar: fixed to the bottom on phones (thumb reach), ----------
   ---------- inline segmented pills on wide screens                ---------- */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: stretch;
  height: calc(4rem + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Frosted-cream ribbon with a concave notch that cradles the add button.
     Opaque enough — and edged with a real border — that list cards scrolling
     underneath can't muddy it. */
  background: linear-gradient(180deg, rgba(251, 246, 239, 0.94), rgba(246, 237, 226, 0.97));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid rgba(107, 74, 43, 0.3);
  box-shadow: 0 -6px 22px rgba(59, 42, 26, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  -webkit-mask: radial-gradient(circle 2.45rem at 50% 0, transparent 2.44rem, #000 2.45rem);
  mask: radial-gradient(circle 2.45rem at 50% 0, transparent 2.44rem, #000 2.45rem);
}

.tab-group {
  flex: 1;
  display: flex;
  align-items: stretch;
}

.tab-gap {
  flex: 0 0 4.8rem;
}

.tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.45rem 0 0.4rem;
  border: none;
  background: none;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.tab-ico {
  font-size: 1.2rem;
  line-height: 1;
}

.tab-ico svg {
  display: block;
  width: 1.2em;
  height: 1.2em;
  stroke: currentColor;
}

.tab.active {
  color: var(--primary-dark);
  font-weight: 600;
}

.badge {
  position: absolute;
  top: 2px;
  left: calc(50% + 10px);
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.15rem 0.3rem;
  min-width: 0.9rem;
  text-align: center;
}

/* ---------- Calendar ---------- */

main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Reserve the scrollbar gutter so content never jumps sideways, and skin
     the bar itself in brand brown instead of the OS default. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(107, 74, 43, 0.45) transparent;
  /* clear the bottom tab bar + floating button */
  padding: 0.75rem 0.75rem calc(8.5rem + env(safe-area-inset-bottom, 0px));
}

main > section {
  max-width: 68rem;
  margin: 0 auto;
}

/* Today at a glance, above the grid: a glass pill that opens the Agenda. */
.today-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0 0 0.7rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 237, 226, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 10px rgba(59, 42, 26, 0.12);
  font-size: 0.8rem;
  color: var(--primary-dark);
  text-align: left;
}

.today-strip-dot {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, var(--primary-light), var(--primary));
  box-shadow: 0 0 0 3px rgba(217, 162, 95, 0.4);
}

.today-strip-label {
  font-weight: 600;
}

.today-strip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-strip-arrow {
  margin-left: auto;
  font-weight: 600;
  color: var(--primary);
}

.calendar {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, var(--paper), var(--bg-soft));
  box-shadow: 0 6px 18px rgba(59, 42, 26, 0.07);
}

.weekday-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: linear-gradient(180deg, var(--bg), var(--line));
  border-bottom: 1px solid var(--line);
}

.weekday-head div {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.4rem 0;
  color: var(--ink-soft);
}

.week {
  position: relative;
}

.day-cells {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.day-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.2rem 0.25rem;
  cursor: pointer;
}

.day-cell:nth-child(7n) {
  border-right: none;
}

.week:last-child .day-cell {
  border-bottom: none;
}

/* Resort demand is weekend-shaped — Sat/Sun get a faint sun-gold wash. */
.day-cell.weekend {
  background: rgba(217, 162, 95, 0.12);
}

.day-cell.outside {
  background: var(--bg);
}

.day-cell.outside .day-num {
  color: var(--ink-faint);
}

.day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.day-num.is-today {
  background: radial-gradient(circle at 50% 32%, var(--primary-light), var(--primary));
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(78, 53, 32, 0.4);
}

.bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
  /* padding, not margin: a top margin would collapse through .week and
     let the bars overlap the day numbers */
  padding-top: 1.9rem;
  padding-bottom: 0.3rem;
  pointer-events: none;
}

.bar {
  pointer-events: auto;
  border: none;
  margin: 0 3px;
  padding: 0 0.35rem;
  height: var(--bar-h);
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.bar:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  box-shadow: var(--ring);
}

.bar-not_paid {
  background: var(--red);
}

.bar-deposit {
  background: var(--amber);
  color: var(--amber-ink);
}

.bar-paid {
  background: var(--green);
}

/* Important-note ring. The white inset ring keeps the deep-red border
   readable on every bar colour — including the terracotta not-paid bars,
   where a plain red border would sink straight into the fill. box-sizing
   keeps the bar's height (and tap target) unchanged. */
.bar.bar-flagged {
  border: 2px solid var(--red-dark);
  box-shadow: inset 0 0 0 1.5px #fff;
}

.bar.cont-left {
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.bar.cont-right {
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Fingers need bigger targets than mouse pointers (WCAG 2.5.8: ≥24px). */
@media (pointer: coarse) {
  :root {
    --bar-h: 1.6rem;
  }

  .bars {
    row-gap: 3px;
  }
}

/* "Showing 3 of 10 bookings · show all" under a filtered grid. */
.filter-note {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0.55rem 0 0;
}

.link-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Legend ---------- */

.legend {
  display: flex;
  gap: 1rem;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0.75rem 0 0;
  flex-wrap: wrap;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 4px;
  display: inline-block;
}

.dot-not_paid { background: var(--red); }
.dot-deposit { background: var(--amber); }
.dot-paid { background: var(--green); }
.dot-flagged { background: #fff; box-shadow: inset 0 0 0 2px var(--red-dark); }

/* ---------- Agenda view ---------- */

.agenda {
  max-width: 34rem;
  margin: 0 auto;
}

.agenda-day {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0.5rem;
}

.agenda-day:first-child {
  margin-top: 0.2rem;
}

.agenda-day-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--glass-line-soft);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.agenda-day.is-today .agenda-day-pill {
  color: #fff;
  border-color: rgba(107, 74, 43, 0.35);
  background: var(--aero-pill);
  box-shadow: var(--aero-pill-shadow);
}

/* Fade-out rule after each day pill. */
.agenda-day-rule {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(107, 74, 43, 0.45), rgba(107, 74, 43, 0));
}

.agenda-cards {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* One card per arrival / departure / guest staying. Quiet by default; an
   arrival gets the raised card, money still owed the sun-gold one. */
.agenda-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.72);
  font: inherit;
  color: var(--ink);
  text-align: left;
}

.agenda-card.card-in {
  padding: 0.6rem 0.7rem;
  background: linear-gradient(180deg, var(--paper), var(--bg-soft));
  box-shadow: 0 4px 14px rgba(59, 42, 26, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.agenda-card.card-warm {
  padding: 0.6rem 0.7rem;
  border-color: rgba(217, 162, 95, 0.6);
  background: linear-gradient(180deg, var(--bg-soft), var(--amber-tint));
  box-shadow: 0 4px 14px rgba(176, 122, 60, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Same deep red as the calendar's flagged bars. */
.agenda-card.flagged {
  border: 2px solid var(--red-dark);
}

.agenda-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Arrivals in pool teal (informational), departures in sun gold. */
.badge-in {
  background: linear-gradient(180deg, #f1f6f5, var(--pool-tint));
  color: var(--pool-ink);
  border: 1px solid rgba(126, 166, 163, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.badge-out {
  background: linear-gradient(180deg, var(--amber-tint), var(--amber-tint-2));
  color: var(--gold-ink);
  border: 1px solid rgba(217, 162, 95, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.badge-staying {
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

.agenda-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.agenda-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-line {
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-line b {
  font-weight: 600;
}

.agenda-sub {
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-sub.owed-deposit {
  color: var(--gold-ink);
  font-weight: 600;
}

.agenda-sub.owed-not_paid {
  color: var(--red);
  font-weight: 600;
}

.agenda-amount {
  margin-left: auto;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
  font-variant-numeric: tabular-nums;
}

.agenda-money {
  font-size: 0.82rem;
  font-weight: 600;
}

.agenda-money-tag {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* Status ink on light cards — the same pairs as the status chips. */
.status-not_paid { color: var(--red); }
.status-deposit { color: var(--gold-ink); }
.status-paid { color: var(--green-ink); }

/* Look-ahead line: the next arrival after the week on screen. */
.agenda-next {
  display: block;
  width: 100%;
  margin: 1rem 0 0;
  padding: 0.6rem 0.75rem;
  border: 1px dashed rgba(107, 74, 43, 0.35);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-soft);
  text-align: left;
}

.agenda-next b {
  font-weight: 600;
  color: var(--ink);
}

.agenda-next-flag {
  color: var(--red);
  font-weight: 600;
}

.agenda-empty {
  margin-top: 2rem;
}

/* ---------- Docked add button (glossy logo + plus badge) ---------- */

.fab {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(1.9rem + env(safe-area-inset-bottom, 0px));
  z-index: 26;
  width: 4.15rem;
  height: 4.15rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 30%, var(--paper), var(--bg-soft) 68%, var(--line));
  box-shadow:
    0 10px 22px rgba(59, 42, 26, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.95),
    inset 0 -5px 10px rgba(107, 74, 43, 0.14);
  display: grid;
  place-items: center;
}

.fab:hover {
  background: radial-gradient(circle at 50% 30%, var(--paper), var(--bg) 68%, var(--line));
}

.fab:active {
  transform: translateX(-50%) scale(0.96);
}

/* The arch mark is transparent outside the arch, so contain (not cover)
   keeps the whole illustration inside the glossy disc. */
.fab-logo {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  object-fit: contain;
  pointer-events: none;
}

.fab-plus {
  position: absolute;
  top: 0.02rem;
  right: 0.02rem;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  border: 2px solid #fff;
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 5px rgba(78, 53, 32, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.fab-plus svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* ---------- Dialogs & forms ---------- */

.dialog {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  width: min(26rem, calc(100vw - 2rem));
  background: var(--bg-soft);
  color: var(--ink);
  box-shadow: 0 20px 50px rgba(59, 42, 26, 0.3);
}

.dialog::backdrop {
  background: rgba(59, 42, 26, 0.45);
}

.dialog form,
.details {
  padding: 1.1rem 1.2rem 1.2rem;
}

.dialog h3 {
  margin: 0 0 0.75rem;
  font-size: 1.4rem;
  line-height: 1.15;
  /* Guest names are free text (up to 120 chars, no spaces required) — a
     long unbroken one must wrap, not widen the dialog sideways. */
  overflow-wrap: anywhere;
}

.dialog label,
.dialog .field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0.7rem 0 0.25rem;
}

.dialog input,
.dialog select,
.dialog textarea {
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(59, 42, 26, 0.06);
}

.dialog input:focus,
.dialog select:focus,
.dialog textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring), inset 0 1px 2px rgba(59, 42, 26, 0.06);
}

/* Vertical resize only — sideways would fight the dialog's fixed width. */
.dialog textarea {
  resize: vertical;
  min-height: 3.6rem;
  max-height: 12rem;
  line-height: 1.4;
}

.label-optional {
  font-weight: 400;
}

/* Small helper under a field ("Up to ₱6,000 · leaves …"). */
.field-help {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.field-help:empty {
  display: none;
}

.date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

/* Grid tracks default to min-content, and the picker's nowrap date label
   ("Thu, 27 Aug 2026") is wider than half a phone-width dialog — without
   this the check-out control is pushed out past the dialog's right edge. */
.date-row > div {
  min-width: 0;
}

/* Narrow phones can't fit two full date labels side by side; stack them
   rather than ellipsise the year away. */
@media (max-width: 439px) {
  .date-row {
    grid-template-columns: 1fr;
  }
}

/* "3 nights · Wed 12 → Sat 15" — the stay's length, live under the dates. */
.stay-line {
  margin: 0.4rem 0 0;
  min-height: 1em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
}

/* ---------- Booking form: full-screen sheet ---------- */

/* A centered dialog loses half its height to the phone keyboard, so the
   form is a full-screen sheet: sticky header, scrolling body, frosted
   footer. On wide screens it becomes a tall centered card with the same
   parts. */
.sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  background: var(--bg) linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  box-shadow: none;
}

.sheet[open] {
  display: flex;
  flex-direction: column;
}

.sheet form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.sheet-head {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: calc(0.6rem + env(safe-area-inset-top, 0px)) 0.75rem 0.6rem;
  background: var(--sky-header);
  box-shadow: 0 1px 6px rgba(59, 42, 26, 0.06);
}

.sheet-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sunset-1), var(--sunset-2) 55%, var(--sunset-3));
}

.sheet-head h3 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.1;
  white-space: nowrap;
}

.sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  flex-shrink: 0;
  border: 1px solid var(--glass-line-soft);
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}

.sheet-close svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* "from Wed, Aug 12" / the stay being edited */
.sheet-context {
  margin-left: auto;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.9rem 0.9rem 3rem;
}

.sheet-body > label:first-child {
  margin-top: 0;
}

/* Bigger type and targets than the small dialogs: this is the screen
   people type on most. */
.sheet input,
.sheet select,
.sheet textarea,
.sheet .dp-trigger {
  font-size: 1rem;
  padding: 0.65rem 0.7rem;
}

.sheet-foot {
  flex: none;
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(251, 246, 239, 0.94), rgba(246, 237, 226, 0.97));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--glass-line);
  box-shadow: 0 -6px 22px rgba(59, 42, 26, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.sheet-cancel {
  flex: none;
  border: 1px solid var(--glass-line);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.sheet-save {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  padding: 0.7rem 1.1rem;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Contact number: fixed country-code chip + the national number. */
.phone-field {
  display: flex;
  gap: 0.4rem;
}

.phone-prefix {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--bg-soft), var(--amber-tint));
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
}

.dialog .phone-field input {
  flex: 1;
  min-width: 0;
}

/* Room type: the native <select> sits invisibly over a two-line display
   (name + "4 pax · ₱3,000 · 9 units"), so the picker stays the platform's
   own while the closed control says more than one line can. */
.room-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: inset 0 1px 2px rgba(59, 42, 26, 0.06);
}

.room-field:focus-within {
  border-color: var(--primary);
  box-shadow: var(--ring), inset 0 1px 2px rgba(59, 42, 26, 0.06);
}

.room-display {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.room-display-name {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-display-meta {
  font-size: 0.75rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-caret {
  flex: none;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.dialog .room-field select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Payment status: three cells, all visible, one tap. */
.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 2px rgba(59, 42, 26, 0.08);
}

.dialog label.seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.55rem 0.3rem;
  min-height: 2.7rem;
  border-right: 1px solid var(--line);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dialog label.seg:last-child {
  border-right: none;
}

.dialog .seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.seg-text {
  white-space: nowrap;
}

/* The active cell wears its status colour (the same pairs as the bars and
   quick buttons). */
.seg-not_paid:has(input:checked) {
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.seg-deposit:has(input:checked) {
  background: linear-gradient(180deg, var(--amber-tint-2), var(--amber));
  color: var(--amber-ink);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.seg-paid:has(input:checked) {
  background: linear-gradient(180deg, var(--green), var(--green-ink));
  color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.seg:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* ---------- Custom date picker ---------- */

.dp-field {
  position: relative;
}

.dp-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(59, 42, 26, 0.06);
}

.dp-trigger.is-empty .dp-trigger-text {
  color: var(--ink-soft);
}

.dp-trigger-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-trigger-icon {
  display: inline-flex;
  color: var(--primary);
}

.dp-trigger-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.dp-field.dp-open .dp-trigger,
.dp-trigger:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring), inset 0 1px 2px rgba(59, 42, 26, 0.06);
}

.dp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(59, 42, 26, 0.45);
}

.dp-pop {
  position: fixed;
  z-index: 41;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(26rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 0.9rem 1rem 1.1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(59, 42, 26, 0.3);
}

.dp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.dp-heading {
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--ink);
}

.dp-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}

.dp-close:hover {
  background: linear-gradient(180deg, var(--paper), var(--line));
  color: var(--ink);
}

.dp-close svg {
  width: 1.05rem;
  height: 1.05rem;
}

.dp-head {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.dp-nav {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper), var(--bg));
  border-radius: var(--radius-sm);
  width: 2rem;
  height: 2rem;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--primary-dark);
}

.dp-nav:hover {
  background: linear-gradient(180deg, var(--paper), var(--line));
}

.dp-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--primary-dark);
}

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dp-weekday {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding-bottom: 0.2rem;
}

.dp-day {
  aspect-ratio: 1;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 0.9rem;
  color: var(--ink);
}

.dp-day:hover:not(:disabled) {
  background: var(--bg);
}

.dp-day.dp-outside {
  color: var(--ink-faint);
}

.dp-day.dp-today {
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

.dp-day.dp-selected {
  background: radial-gradient(circle at 50% 32%, var(--primary-light), var(--primary));
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(78, 53, 32, 0.4);
}

/* Inactive (unbookable) days: deliberately faint — disabled controls are
   exempt from the contrast minimum. */
.dp-day.dp-disabled {
  color: #c4b6a3;
  cursor: default;
}

.dp-day:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  box-shadow: var(--ring);
}

.field-error {
  color: var(--red);
  font-size: 0.78rem;
  margin: 0.2rem 0 0;
  min-height: 0;
}

.field-error:empty {
  display: none;
}

/* ---------- Important-note switch ---------- */

/* A switch rather than a bare checkbox: a fat thumb target that reads
   on/off at arm's length. The real checkbox stays in the layout invisibly
   so focus, labels, and form submission work untouched. (label.switch-row,
   not .switch-row: it must out-rank .dialog label's display/margin.) */
label.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.55rem 0 0;
  min-height: 2.4rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.switch-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.switch-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Off track: the darker border draws the control's boundary at ≥3:1 even
   though the fill itself is a quiet cream-brown. */
.switch-track {
  position: relative;
  flex: 0 0 2.9rem;
  height: 1.7rem;
  border-radius: 999px;
  background: var(--line);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 2px rgba(59, 42, 26, 0.15);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.7rem - 6px);
  height: calc(1.7rem - 6px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(59, 42, 26, 0.3);
  transition: transform 0.15s ease;
}

.switch-row input:checked ~ .switch-track {
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  border-color: var(--red-dark);
}

.switch-row input:checked ~ .switch-track::after {
  transform: translateX(calc(1.2rem + 2px));
}

.switch-row:has(input:checked) .switch-text {
  color: var(--red);
}

.switch-row input:focus-visible ~ .switch-track {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: var(--ring), inset 0 1px 2px rgba(59, 42, 26, 0.15);
}

/* No note yet, nothing to flag — the whole row goes quiet. */
.switch-row:has(input:disabled) {
  cursor: default;
}

.switch-row input:disabled ~ .switch-track {
  opacity: 0.45;
}

.switch-row:has(input:disabled) .switch-text {
  opacity: 0.55;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.spacer {
  flex: 1;
}

.primary-btn {
  background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 55%, var(--primary-dark) 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0.58rem 1.1rem;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 7px rgba(78, 53, 32, 0.3);
}

.primary-btn:hover {
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
}

.primary-btn:disabled,
.danger-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.danger-btn {
  background: var(--paper);
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.9rem;
  font-weight: 600;
}

.danger-btn:hover {
  background: var(--red-tint);
}

/* ---------- Confirm dialog ---------- */

.confirm {
  padding: 1.3rem 1.3rem 1.15rem;
  text-align: center;
}

.confirm-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--pool-tint);
  color: var(--pool-ink);
}

.confirm-icon.danger {
  background: var(--red-tint);
  color: var(--red);
}

.confirm-icon svg {
  width: 1.55rem;
  height: 1.55rem;
}

.confirm h3 {
  margin: 0 0 0.35rem;
}

.confirm-msg {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}

.confirm .dialog-actions {
  justify-content: center;
  margin-top: 1.25rem;
}

.confirm .dialog-actions button {
  min-width: 7rem;
  min-height: 2.6rem;
}

/* A destructive confirm gets a solid terracotta button — clearer than the
   outline .danger-btn used for the inline delete affordance. */
.confirm .dialog-actions .danger-btn {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.confirm .dialog-actions .danger-btn:hover {
  background: var(--red-dark);
}

/* ---------- Details dialog ---------- */

/* Guest name and status pill on one line. */
.details-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  margin: 0 0 0.6rem;
}

.details-head h3 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.details-head .status-chip {
  margin: 0;
}

.status-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.chip-not_paid { background: var(--red-tint); color: var(--red); }
.chip-deposit { background: var(--amber-tint); color: var(--amber-ink); }
.chip-paid { background: var(--leaf-tint); color: var(--green-ink); }

/* Guest contact: the number plus Call / SMS, in a pool-teal strip
   (informational, like the note card). */
.contact-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(126, 166, 163, 0.7);
  border-radius: 12px;
  background: linear-gradient(180deg, #f4f8f7, var(--pool-tint));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.contact-number {
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--pool-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-actions {
  margin-left: auto;
  flex: none;
  display: flex;
  gap: 0.35rem;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid rgba(126, 166, 163, 0.7);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pool-ink);
  background: linear-gradient(180deg, var(--bg-soft), var(--pool-tint));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  text-decoration: none;
  white-space: nowrap;
}

.contact-btn svg {
  width: 0.8rem;
  height: 0.8rem;
}

.contact-btn:hover {
  background: var(--pool-tint);
}

.details-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.9rem;
  margin: 0.75rem 0 0;
  font-size: 0.92rem;
}

.details-list dt {
  color: var(--ink-soft);
  font-weight: 600;
}

.details-list dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Money still to collect, with the mark-paid shortcut. Turns olive while
   the just-marked-paid Undo window is open. */
.collect-callout {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(107, 74, 43, 0.32);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--bg-soft), var(--amber-tint));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.collect-callout.is-done {
  border-color: var(--green);
  background: linear-gradient(180deg, var(--bg-soft), var(--leaf-tint));
}

.collect-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.collect-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
}

.collect-callout.is-done .collect-label {
  color: var(--green-ink);
}

.collect-amount {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

.collect-callout.is-done .collect-amount {
  font-size: 1rem;
  color: var(--green-ink);
}

/* (.collect-callout prefix: out-ranks .mini-btn's width: 100%) */
.collect-callout .collect-btn {
  margin-left: auto;
  flex: none;
  width: auto;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
}

/* The booking note — its own card under the facts list. Newlines typed in
   the form are honoured; a runaway note scrolls inside the card rather than
   pushing the action buttons off a phone screen. Pool teal = informational. */
.detail-note {
  margin-top: 0.7rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--pool-ink);
  border-radius: var(--radius-sm);
  background: var(--pool-tint);
}

.detail-note-title {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.detail-note-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 9rem;
  overflow-y: auto;
}

.detail-note.important {
  border-color: rgba(180, 66, 58, 0.35);
  border-left-color: var(--red);
  background: var(--red-tint);
}

.detail-note.important .detail-note-title {
  color: var(--red);
}

/* ---------- Day peek ---------- */

.day-peek .dialog-sub {
  margin-bottom: 0.25rem;
}

.day-peek .agenda-cards {
  margin-top: 0.5rem;
}

.day-empty {
  margin: 0.5rem 0 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* ---------- Outstanding payments view ---------- */

.view-title {
  font-size: 1.3rem;
  line-height: 1.15;
  text-align: center;
  margin: 0.5rem 0 0;
}

.view-sub {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.83rem;
  margin: 0.2rem 0 0.75rem;
}

.pay-group {
  max-width: 34rem;
  margin: 0 auto 1.1rem;
}

/* Section labels stay in the sans: small caps read better than a small
   serif, and they're labels, not headings. */
.group-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.9rem 0.15rem 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--primary);
}

/* Fade-out rule after each heading — quiet section separators. */
.group-title::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(107, 74, 43, 0.45), rgba(107, 74, 43, 0));
}

.group-sub {
  margin: -0.25rem 0.15rem 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* The chase-up section wears the sun-gold sweep so it reads "overdue" at a
   glance without shouting red. */
.pay-group-followup .group-title {
  color: var(--gold-ink);
}

.pay-group-followup .group-title::after {
  background: linear-gradient(90deg, var(--sunset-2), rgba(217, 162, 95, 0));
}

.outstanding-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.outstanding-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--paper), var(--bg-soft));
  box-shadow: 0 4px 14px rgba(59, 42, 26, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.pay-group-followup .outstanding-row {
  border-color: rgba(217, 162, 95, 0.6);
  background: linear-gradient(180deg, var(--bg-soft), var(--amber-tint));
  box-shadow: 0 4px 14px rgba(176, 122, 60, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Just marked paid: calm olive glass while the Undo window is open. */
.outstanding-row.is-done {
  border-color: var(--green);
  background: linear-gradient(180deg, var(--bg-soft), var(--leaf-tint));
}

.row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.5rem 0.65rem 0.75rem;
  border: none;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
}

.row-main:hover {
  background: rgba(232, 220, 203, 0.45);
}

/* Inset rings: the row card's overflow:hidden would clip an outset ring */
.row-main:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 6px rgba(217, 162, 95, 0.45);
}

.mini-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 6px rgba(217, 162, 95, 0.45);
}

.row-glyph {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(59, 42, 26, 0.08);
}

.row-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.row-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-meta {
  font-size: 0.8rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-meta .done-note {
  color: var(--green-ink);
  font-weight: 600;
}

/* Own line under the meta — darker gold than the status chips because this
   is small text on a light card, not a filled badge. */
.row-info .deposit-note {
  font-size: 0.78rem;
  color: var(--gold-ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* One-line peek at the booking note; the details dialog holds the full text. */
.row-info .note-preview {
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-info .note-preview.important {
  color: var(--red);
  font-weight: 600;
}

/* Same deep red as the calendar's flagged bars — the card is always light,
   so the border alone carries it here. */
.outstanding-row.flagged {
  border: 2px solid var(--red-dark);
}

/* Fixed-width, right-aligned, tabular digits: every peso amount in the list
   lines up down the column no matter the row. */
.row-price {
  margin-left: auto;
  flex-shrink: 0;
  min-width: 4.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
  text-align: right;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

/* "left to pay" vs "price" — names the number above it. */
.row-price-tag {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Fixed-width action rail so one-button and two-button rows align. */
.row-actions {
  flex: 0 0 6.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  border-left: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.45);
}

.pay-group-followup .row-actions {
  border-left-color: rgba(217, 162, 95, 0.6);
}

.outstanding-row.is-done .row-actions {
  border-left-color: var(--green);
}

.mini-btn {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 2rem;
  white-space: nowrap;
}

.mini-btn.pay {
  background: linear-gradient(180deg, var(--green), var(--green-ink));
  border-color: var(--green-ink);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 3px rgba(85, 96, 46, 0.3);
}

.mini-btn.pay:hover {
  background: var(--green-ink);
}

.mini-btn.dep {
  background: linear-gradient(180deg, var(--amber-tint), var(--amber-tint-2));
  border-color: rgba(217, 162, 95, 0.8);
  color: var(--amber-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.mini-btn.dep:hover {
  background: linear-gradient(180deg, var(--amber-tint-2), var(--amber));
}

/* Armed = one more tap saves. A halo ring + darker glass makes it obvious. */
.mini-btn.armed {
  font-weight: 600;
}

.mini-btn.pay.armed {
  background: linear-gradient(180deg, var(--green-ink), var(--primary-dark));
  box-shadow: 0 0 0 3px rgba(111, 122, 63, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.mini-btn.dep.armed {
  background: linear-gradient(180deg, var(--amber-tint-2), var(--amber));
  border-color: var(--sunset-2);
  box-shadow: 0 0 0 3px rgba(217, 162, 95, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.mini-btn.undo {
  background: linear-gradient(180deg, var(--bg-soft), var(--pool-tint));
  border-color: rgba(126, 166, 163, 0.7);
  color: var(--pool-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.mini-btn.undo:hover {
  background: var(--pool-tint);
}

.mini-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.empty-state {
  text-align: center;
  color: var(--ink-soft);
  margin-top: 2.5rem;
  font-size: 0.95rem;
}

/* ---------- Activity log view (owner only) ---------- */

.activity-tools {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
}

.activity-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.activity-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  padding: 0.6rem 0.75rem;
}

.act-icon {
  flex-shrink: 0;
  color: var(--ink-soft);
}

.act-icon svg {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  stroke: currentColor;
}

.act-created .act-icon { color: var(--green); }
.act-updated .act-icon { color: var(--primary); }
.act-deleted .act-icon { color: var(--red); }
.act-signed_in .act-icon { color: var(--primary); }
.act-login_failed .act-icon { color: var(--red); }
.act-device_renamed .act-icon { color: var(--ink-soft); }
.act-owner_unlocked .act-icon { color: var(--green); }
.act-owner_unlock_failed .act-icon { color: var(--red); }
.act-owner_code_requested .act-icon { color: var(--primary); }
.act-owner_code_refused .act-icon { color: var(--red); }
.act-audit_exported .act-icon { color: var(--primary); }

.act-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.act-title {
  font-weight: 600;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.act-line {
  font-size: 0.83rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.act-meta {
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
  overflow-wrap: anywhere;
}

.act-login_failed .act-title,
.act-owner_unlock_failed .act-title,
.act-owner_code_refused .act-title {
  color: var(--red);
}

.load-more-wrap {
  text-align: center;
  margin: 0.75rem 0 0;
}

.dialog-sub {
  margin-top: -0.35rem;
}

/* ---------- Press states ---------- */

/* Phones never see :hover — a tap has to show. Slight shrink plus a touch
   darker, on everything that acts like a button. */
.nav-btn:active,
.today-btn:active,
.ghost-btn:active,
.primary-btn:active:not(:disabled),
.danger-btn:active:not(:disabled),
.mini-btn:active:not(:disabled),
.chip:active,
.tab:active,
.bar:active,
.agenda-card:active,
.agenda-next:active,
.today-strip:active,
.contact-btn:active,
.sheet-close:active,
.sheet-cancel:active,
.row-main:active,
.dp-nav:active,
.dp-close:active,
.dp-day:active:not(:disabled),
.device-chip:active,
.pw-toggle:active {
  transform: scale(0.97);
  filter: brightness(0.95);
}


/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(8rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  z-index: 30;
  box-shadow: 0 8px 20px rgba(59, 42, 26, 0.3);
  max-width: calc(100vw - 2rem);
}

/* ---------- Login page ---------- */

/* Transparent: the cream gradient + arch watermark painted on <html>
   is the whole backdrop. */
.login-body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 1rem;
}

/* The generic `main` rule above makes <main> a growing flex item (right for
   the app's scroll pane); the login card must not grow or overflow the
   phone viewport, so pin it here. */
.login-card {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  /* Undo the scroll-pane bits of the generic `main` rule: with classic
     (non-overlay) scrollbars, `scrollbar-gutter: stable` reserved a
     scrollbar-wide gutter on the card's right, shifting its content off
     centre. The page itself scrolls if the card is ever taller than the
     viewport. */
  overflow: visible;
  scrollbar-gutter: auto;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.75rem 1.5rem 1.6rem;
  width: min(22rem, 100%);
  box-shadow: 0 10px 30px rgba(59, 42, 26, 0.1);
  text-align: center;
}

/* The full lockup (arch + wordmark); the HTML width/height attributes carry
   the asset's real pixel size so the box is reserved before it loads. */
.login-logo {
  display: block;
  width: min(220px, 75%);
  height: auto;
  margin: 0 auto 0.6rem;
  object-fit: contain;
}

.login-title {
  justify-content: center;
  font-size: 1.7rem;
}

.login-sub {
  color: var(--ink-soft);
  margin: 0.3rem 0 1rem;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.login-card form {
  text-align: left;
}

.login-card label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0.7rem 0 0.25rem;
}

.login-card input {
  width: 100%;
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(59, 42, 26, 0.06);
}

.login-card input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring), inset 0 1px 2px rgba(59, 42, 26, 0.06);
}

/* Show/hide toggle sits inside the password field. */
.pw-field {
  position: relative;
}

.pw-field input {
  padding-right: 4rem;
}

.pw-toggle {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--bg-soft), var(--amber-tint));
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}

.pw-toggle:active {
  transform: translateY(-50%) scale(0.97);
}

.login-btn {
  width: 100%;
  margin-top: 1rem;
  padding: 0.65rem;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .switch-track,
  .switch-track::after {
    transition: none;
  }
}

/* ---------- Print ---------- */

@media print {
  /* On screen <body> is pinned to the viewport and <main> scrolls; on
     paper that clips everything after the first screenful. */
  body:not(.login-body) {
    height: auto;
    overflow: visible;
    display: block;
  }

  html {
    background: none;
  }

  main {
    overflow: visible;
    padding-bottom: 0;
  }

  /* relative, not static: the ::after underline is absolutely positioned
     and would otherwise drop to the bottom of the printed page. */
  .topbar {
    position: relative;
    box-shadow: none;
  }

  .tabbar,
  .fab,
  .toast,
  .device-chip,
  #logout-btn {
    display: none;
  }

  /* Payment status is carried by the bar colours — keep them on paper. */
  .bar,
  .dot,
  .status-chip,
  .row-glyph,
  .day-num.is-today {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* ---------- Larger screens ---------- */

@media (min-width: 700px) {
  :root {
    --bar-h: 1.35rem;
  }

  .topbar {
    padding: 0.6rem 1.25rem;
  }

  .month-nav {
    max-width: 68rem;
    margin: 0.4rem auto 0;
  }

  .chip-row {
    max-width: 68rem;
    margin-left: auto;
    margin-right: auto;
  }

  /* Tab bar joins the header as segmented pills (drop the mobile glass ribbon) */
  .tabbar {
    position: static;
    height: auto;
    border-top: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    -webkit-mask: none;
    mask: none;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-bottom: 0;
  }

  .tab-group {
    display: contents;
  }

  .tab-gap {
    display: none;
  }

  .tab {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 0.4rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
  }

  .tab:hover {
    background: var(--bg);
  }

  .tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }

  .tab-ico {
    font-size: 1rem;
  }

  .badge {
    position: static;
    margin-left: 0.1rem;
  }

  main {
    padding-bottom: 5.5rem;
  }

  .fab {
    left: auto;
    right: 1.25rem;
    bottom: 1.25rem;
    transform: none;
  }

  .fab:active {
    transform: scale(0.96);
  }

  .toast {
    bottom: 2rem;
  }

  .bars {
    min-height: 5rem;
  }

  .bar {
    font-size: 0.78rem;
  }

  .day-cell {
    padding: 0.3rem 0.4rem;
  }

  /* The form becomes a tall centered card; header/body/footer stay. */
  .sheet {
    inset: 0;
    width: min(30rem, calc(100vw - 2rem));
    height: fit-content;
    max-height: calc(100dvh - 2rem);
    margin: auto;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(59, 42, 26, 0.3);
  }

  .sheet-head {
    padding-top: 0.7rem;
  }

  .sheet-foot {
    padding-bottom: 0.9rem;
  }
}