@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,500;0,600;1,400;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------
   Design direction: this is an internal tool for Safari Lab, a curated
   wildlife-safari operator — it should read as an extension of the
   guest-facing documents it produces (deep forest green, warm gold,
   serif headlines, parchment tones), not a disconnected admin backend.
   Boldness is spent on the topbar and section wayfinding; dense data
   tables and forms stay calm and legible rather than over-decorated.
   --------------------------------------------------------------------- */

:root {
  --brand: #1B4B43;
  --brand-deep: #0F2E29;
  --brand-soft: #E4EEEA;
  --accent: #D9A441;
  --accent-soft: #F7EBD2;
  --bg: #FBF8F2;
  --surface: #FFFFFF;
  --surface-field: #FFFDF8;
  --ink: #24221D;
  --ink-soft: #6E6A5F;
  --border: #E6E0D3;
  --danger: #B3452F;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
}

/* Section sub-headers (e.g. "Stay details" within a longer form) use a
   serif italic treatment with a gold accent rule, rather than a tracked
   uppercase label — same family as the page's real headings, just
   quieter, so a long form reads like sections of one document instead
   of stacked generic form-builder chrome. */
h4.section-label {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--brand);
  margin: 0 0 4px;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
}

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

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--brand-deep);
  border-bottom: 3px solid var(--accent);
}

.topbar .brand {
  font-family: 'Newsreader', serif;
  font-weight: 600;
  font-size: 20px;
  color: #fff;
}

.topbar nav a {
  margin-left: 20px;
  color: rgba(255,255,255,0.72);
  font-weight: 500;
  font-size: 14px;
}
.topbar nav a.active, .topbar nav a:hover { color: var(--accent); }

/* Content/Admin nav dropdowns — grouped so the topbar doesn't grow one
   flat link per new content-management page (Lodge Photos, Resort
   Photos, etc. were spilling onto a second line). Click-toggled, not
   hover-only, via toggleNavDropdown() in the header partial. */
.nav-dropdown {
  position: relative;
  display: inline-block;
  margin-left: 20px;
}
.nav-dropdown-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: rgba(255,255,255,0.72);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}
.nav-dropdown-trigger .caret { font-size: 10px; margin-left: 2px; }
.nav-dropdown-trigger.active, .nav-dropdown-trigger:hover { color: var(--accent); }

.nav-dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 10px 0;
  min-width: 210px;
  z-index: 50;
}
.nav-dropdown-panel.open { display: block; }
.topbar .nav-dropdown-panel a {
  display: block;
  margin: 0;
  padding: 7px 18px;
  color: #333;
  font-weight: 400;
  font-size: 13.5px;
}
.topbar .nav-dropdown-panel a.active, .topbar .nav-dropdown-panel a:hover {
  color: var(--brand);
  background: #F5F3EE;
  text-decoration: none;
}
/* Same serif-italic + gold-border treatment as h4.section-label, sized
   down for a dropdown menu — keeps grouping labels inside the panel
   consistent with the rest of the app rather than inventing a new
   tracked-uppercase pattern just for this menu. */
.nav-dropdown-group {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--brand);
  margin: 10px 14px 4px;
  padding-left: 8px;
  border-left: 2px solid var(--accent);
}
.nav-dropdown-group:first-child { margin-top: 0; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 28px 80px;
}

/* Wide variant for pages whose table genuinely needs the room — currently
   just Leads (10 columns, two of them free text). Scoped rather than
   widening .container globally, since every other list page (Quotes,
   Invoices, Users) is 5-6 short columns and looks better staying narrow. */
.container.wide {
  max-width: 1440px;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { opacity: 0.92; text-decoration: none; }
.btn.secondary { background: transparent; color: var(--brand); border: 1px solid var(--border); }
.btn.secondary:hover { background: var(--brand-soft); }
.btn.danger { background: var(--danger); }
.btn.small { padding: 6px 12px; font-size: 13px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--brand); }
tr:hover td { background: var(--brand-soft); }
tbody tr { cursor: pointer; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  background: #EFEDE6;
  color: var(--ink-soft);
}
.badge.draft { background: #EEECE4; color: #625F55; }
.badge.new { background: #E3EEFB; color: #1D5FA8; }
.badge.contacted { background: var(--accent-soft); color: #8A6414; }
.badge.quoted { background: #EDE3FB; color: #6B3FA0; }
.badge.won { background: var(--brand-soft); color: var(--brand); }
.badge.lost { background: #F5E4E0; color: var(--danger); }
.badge.invoice-unpaid { background: var(--accent-soft); color: #8A6414; }
.badge.invoice-paid { background: var(--brand-soft); color: var(--brand); }
.badge.invoice-partial { background: #E3EEFB; color: #1D5FA8; }
.badge.invoice-cancelled { background: #F5E4E0; color: var(--danger); }
.badge.quote-pending { background: #EDEBE4; color: var(--ink-soft); }
.badge.quote-sent { background: var(--brand-soft); color: var(--brand); }
.badge.quote-revise { background: var(--accent-soft); color: #8A6414; }

.filters { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.filters a {
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
}
.filters a.active { background: var(--brand); color: #fff; border-color: var(--brand); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid.full { grid-template-columns: 1fr; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface-field);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.field textarea { min-height: 90px; resize: vertical; }
.field-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.field-row input, .field-row select { flex: 1; padding: 10px 12px; }

/* Plain unstyled top-level inputs/selects/textareas (outside a .field
   wrapper — e.g. inline in a table row or a compact form) get the same
   warm surface + focus treatment so nothing on the page reverts to a
   bare browser-default input. */
input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="password"], input[type="url"], select, textarea {
  background: var(--surface-field);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  color: var(--ink);
}
input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="url"]:focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

/* Checkboxes get a brand-colored checked state via accent-color (widely
   supported, no custom checkbox markup needed) instead of the flat grey
   browser default. */
input[type="checkbox"] {
  accent-color: var(--brand);
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 4px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-soft);
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-deep);
}
.login-card {
  background: #fff;
  padding: 40px;
  border-radius: var(--radius);
  width: 340px;
  border-top: 4px solid var(--accent);
}
.error-text { color: var(--danger); font-size: 13px; margin-top: 8px; }
.gate-missing-input { border-color: var(--danger) !important; background: #FBF0EC; }
.gate-warning-banner {
  display: none;
  background: #FBF0EC;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  margin: 10px 0;
}


.stat-row { display: flex; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  min-width: 130px;
  border-top: 3px solid var(--accent);
}
.stat .num { font-family: 'Newsreader', serif; font-size: 28px; font-weight: 600; color: var(--brand); }
.stat .label { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }

.pricing-table { width: 100%; margin-top: 8px; }
.pricing-table td { padding: 8px 6px; }
.pricing-total { font-weight: 700; font-size: 16px; color: var(--brand); }

.tier-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; margin-bottom: 8px; align-items: center; }

.color-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: middle; margin-right: 6px; border: 1px solid var(--border); }

.followup-item { border-bottom: 1px solid var(--border); padding: 10px 0; font-size: 13px; }
.followup-item .meta { color: var(--ink-soft); font-size: 12px; margin-top: 2px; }

.bar-row { margin-bottom: 14px; }
.bar-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.bar-count { font-weight: 600; font-size: 13px; color: var(--ink-soft); }
.bar-track { height: 10px; background: #EFEDE6; border-radius: 100px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 100px; background: var(--ink-soft); transition: width 0.3s ease; }
.bar-fill.bar-new { background: #1D5FA8; }
.bar-fill.bar-contacted { background: var(--accent); }
.bar-fill.bar-quoted { background: #6B3FA0; }
.bar-fill.bar-won { background: var(--brand); }
.bar-fill.bar-lost { background: var(--danger); }

.meta-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
}
.meta-sync-badge.synced { background: var(--brand-soft); color: var(--brand); }
.meta-sync-badge.error { background: #F5E4E0; color: var(--danger); }
.meta-sync-badge.skipped { background: #EFEDE6; color: var(--ink-soft); }
.meta-sync-badge.none { background: var(--bg); color: var(--ink-soft); border: 1px dashed var(--border); }

/* ---------------------------------------------------------------------
   Dashboard — reworked from a flat stack of identically-styled cards
   into three grouped zones (Attention / Pipeline / Activity), so the
   page reads as "here's what matters, in order" rather than six equal
   sections you have to read fully to find the one that needed you.
   Reuses the existing brand palette throughout — no new colors — just
   applied with more intent: --danger/--accent only where something
   genuinely needs a look, --brand for "on track," everything else calm.
   --------------------------------------------------------------------- */

.zone-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 3px;
}
.zone-sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; }
.dashboard-zone { margin-bottom: 36px; }
.dashboard-zone:last-child { margin-bottom: 0; }

/* Stat cards: color now carries meaning (green = already won, gold =
   still in play, plain = neutral count) instead of a uniform gold
   top-border regardless of what the number means. */
.stat-row { align-items: stretch; }
.stat { flex: 1 1 150px; }
.stat .caption { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }
.stat.stat-neutral { border-top-color: var(--border); }
.stat.stat-neutral .num { color: var(--ink); }
.stat.stat-brand .num { color: var(--brand); }
.stat.stat-brand { border-top-color: var(--brand); }
.stat.stat-accent .num { color: var(--accent); }
.stat.stat-accent { border-top-color: var(--accent); }

/* The one section allowed a tinted background — everything else on the
   page stays paper-white/quiet, so this is the thing that actually
   stands out rather than one card among six identical ones. Amber while
   something's outstanding; softens to the brand green tint once clear,
   so "all caught up" reads as calm good news, not just an empty box. */
.attention-zone {
  background: var(--accent-soft);
  border: 1px solid #E8C468;
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 36px;
}
.attention-zone.is-clear { background: var(--brand-soft); border-color: var(--brand); }
.attention-zone .zone-title { color: #8A6414; }

/* "Total business" card — the one OTHER bold treatment on the page,
   deliberately different from the amber attention zone it now sits
   inside: this is "look how much business we've done," not "something
   needs doing." Dark brand green rather than tinted-light, so it still
   reads as a confident headline number even as one card among several,
   not just another white box. Lives in the right-hand column alongside
   GST/TCS and Upcoming trips (see .attention-grid-col below) rather
   than a full-width banner — there's more than one currency to show and
   this fits real card widths better stacked than side-by-side. */
.fy-card { background: var(--brand-deep); color: #EFEAD9; }
.fy-card h3 { color: #EFEAD9; margin-bottom: 0; }
.fy-amounts-stack { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.fy-amount { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 26px; color: var(--accent); }
.fy-empty, .fy-sub { font-size: 12.5px; color: #B9C9C2; margin-top: 8px; }
.attention-zone.is-clear .zone-title { color: var(--brand); }
.attention-zone .card { margin-bottom: 0; }
.attention-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
/* Payment reminders (left) is one tall card; GST/TCS, Total business,
   and Upcoming trips (right) are three shorter ones. Without this
   wrapper, CSS grid's own auto-placement puts a 3rd item back in
   column 1 under Payment reminders (not under GST as intended) since a
   2-column grid only reserves one slot per column per row — wrapping
   the right-hand cards in their own flex column sidesteps that
   entirely: the outer grid only ever sees two children. */
.attention-grid-col { display: flex; flex-direction: column; gap: 16px; }

/* Slightly roomier than the standard dense operational table — this is
   a glance-and-act surface, not a data-entry grid, so rows get more air
   and the guest name reads as the clear anchor of each one. */
.dashboard-table th, .dashboard-table td { padding: 14px 12px; }
.dashboard-table td:first-child { font-family: 'Newsreader', Georgia, serif; font-size: 15px; }

@media (max-width: 900px) {
  .attention-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .container { padding: 20px 16px 60px; }
  .stat-row { flex-direction: column; }
}