/* =========================================================
   Flowerful Events — shared stylesheet
   Minimal, clean, print-friendly.
   ========================================================= */

:root {
  --bg:        #faf7f3;
  --panel:    #ffffff;
  --ink:      #1f2430;
  --muted:    #6b7280;
  --line:     #e7e2db;       /* card / divider borders — stays light */
  --field-border: #8a8580;   /* Phase 6.8 — dedicated darker color for form fields so they read prominently and match across input types (text, number, select). */
  --accent:   #8a6b4b;      /* warm brown — Primary: buttons, links, focus rings, "active" state */
  --accent-2: #c9a27a;      /* soft tan — Secondary: hover/active highlights, soft card backgrounds */
  --accent-3: #efe6d8;      /* Phase 6.19 — Tertiary: subtle callout fills, info badges, gentle highlights (60/30/10 rule). Defaults to a warm cream that complements the primary/secondary; tenant can override via Settings → Brand. */
  --leaf:     #657a5a;      /* sage */
  --rose:     #b07a87;      /* muted rose */
  --danger:   #b4432c;
  --success:  #4b7a54;
  --shadow:   0 1px 2px rgba(20,15,10,.04), 0 4px 16px rgba(20,15,10,.06);
  --radius:   10px;
  --radius-sm: 6px;
}
/* Phase 6.19 — Body background reads from --bg so tenants who set a
   custom Background color in Settings → Brand see their choice render
   on every page. Without this, body had a hardcoded background that
   ignored the variable. */
body { background: var(--bg); }

/* Cloud sync status dot (header) */
.cloud-status {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  margin-right: 4px;
  transition: color .2s ease;
  cursor: help;
  user-select: none;
}
.cloud-status.idle  { color: #b8b2a8; }
.cloud-status.ok    { color: var(--success); }
.cloud-status.error { color: var(--danger); }
.cloud-status.busy  {
  color: var(--accent);
  animation: cloud-pulse 1s ease-in-out infinite;
}
@keyframes cloud-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; margin: 0 0 .4em; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

.site-header {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 12px 28px 0;
  display: grid;
  /* Phase 6.56 — added "role" column for the View-as chip so it doesn't
     collide with the Tools button. */
  grid-template-columns: auto 1fr auto auto auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "brand mode search role tools"
    "nav   nav  nav    nav  nav  ";
  column-gap: 16px;
  row-gap: 8px;
  align-items: center;
}
.site-header .brand         { grid-area: brand; }
.site-header .mode-switcher { grid-area: mode;  }
.global-search-wrap         { grid-area: search; justify-self: stretch; max-width: 360px; }
.site-header .role-chip-wrap { grid-area: role;  justify-self: end; }
.site-header .header-tools  { grid-area: tools; justify-self: end; }
/* Primary nav items — quieter, link-style instead of buttons.
   Sits in its own row and scrolls horizontally if it overflows. */
.primary-nav {
  grid-area: nav;
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  margin-bottom: -1px;     /* tuck under the header bottom-border */
  border-bottom: 1px solid transparent;
}
.primary-nav a {
  font-size: .9rem;
  color: var(--ink);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .08s ease;
  flex: 0 0 auto;
  white-space: nowrap;
}
.primary-nav a:hover {
  background: var(--bg);
  text-decoration: none;
}

/* Tools dropdown */
.header-tools {
  position: relative;
  flex: 0 0 auto;
}
.header-tools-toggle {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: .9rem;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.header-tools-toggle:hover { background: var(--bg); }
.header-tools-toggle.open { background: var(--bg); border-color: var(--accent-2); }
.header-tools-caret { font-size: .7rem; transition: transform .15s ease; }
.header-tools-toggle.open .header-tools-caret { transform: rotate(180deg); }

.header-tools-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(20,15,10,.12);
  z-index: 80;
  padding: 6px;
}
.header-tools-menu.open { display: block; }
.header-tools-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-size: .9rem;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.header-tools-item:hover {
  background: var(--bg);
  text-decoration: none;
}
.header-tools-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

/* On narrow screens, collapse to: brand + tools on row 1, search on row 2,
   nav on row 3. The grid auto-adjusts because we use named areas. */
@media (max-width: 920px) {
  .site-header {
    padding: 10px 16px 0;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "brand  .       tools"
      "search search  search"
      "nav    nav     nav";
    column-gap: 12px;
  }
  .site-header .mode-switcher { display: none !important; }
  .global-search-wrap { max-width: none; }
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 6px;
  margin: -4px -6px;
  transition: background 120ms ease;
}
.brand:hover { background: rgba(181, 138, 74, 0.08); }
.brand:focus-visible {
  outline: 2px solid var(--accent, #b58a4a);
  outline-offset: 1px;
}
.brand .logo {
  font-family: Georgia, serif; font-size: 1.25rem; letter-spacing: .02em;
  color: var(--accent);
}
.brand .logo img { max-height: 32px; max-width: 200px; display: block; }
.brand .sub { color: var(--muted); font-size: .85rem; }

/* =====================================================================
   Phase 6.49 — Hero header (Variant C)
   ---------------------------------------------------------------------
   Dark band behind the brand area with an optional venue photo
   underneath (a dark overlay keeps the wordmark readable). The
   primary-nav strip below sits on cream so tap targets + readability
   stay solid. EST. year stripe and vertical divider auto-hide when
   the operator hasn't filled in brand_est_year.
   ===================================================================== */
.site-header.site-header-hero {
  background-color: var(--header-bg, #2b2520);
  background-image: var(--header-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  border-bottom: none;
  padding: 22px 28px 0;
  position: relative;
}
/* Dark overlay: always present so wordmark stays readable on any photo.
   When no photo is set, --header-overlay is transparent and the flat
   --header-bg shows through. */
.site-header.site-header-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--header-overlay, transparent);
  pointer-events: none;
  z-index: 0;
}
.site-header.site-header-hero > * { position: relative; z-index: 1; }

.brand.brand-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0;
  margin: 0;
}
.brand.brand-hero:hover { background: transparent; }
.brand.brand-hero .brand-est {
  font-family: Georgia, serif;
  font-size: 13px;
  color: var(--accent-2, #c9a27a);
  letter-spacing: 0.4em;
  line-height: 1;
  white-space: nowrap;
}
.brand.brand-hero .brand-est-divider {
  width: 1px;
  height: 48px;
  background: rgba(201, 162, 122, 0.4);
}
.brand.brand-hero .brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.brand.brand-hero .brand-text .logo {
  font-family: Georgia, serif;
  font-size: 30px;
  color: #fff;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1;
}
.brand.brand-hero .brand-text .sub {
  font-size: 11px;
  color: var(--accent-2, #c9a27a);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
}

/* Nav strip — pop back to cream so it doesn't drown in the dark band */
.site-header.site-header-hero .primary-nav {
  background: var(--panel, #fdfbf7);
  margin: 22px -28px 0;
  padding: 8px 28px 0;
  border-bottom: 1px solid var(--line, #e6dfd0);
  border-top: 1px solid rgba(201,162,122,0.15);
}
.site-header.site-header-hero .primary-nav .nav-item {
  color: var(--ink, #1a1a1a);
}
.site-header.site-header-hero .primary-nav .nav-item.primary,
.site-header.site-header-hero .primary-nav .nav-item:hover {
  color: var(--accent, #1c3978);
}

/* Search + Tools in the dark band — soft white panels on transparent */
.site-header.site-header-hero .global-search-wrap input {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(201,162,122,0.3);
}
.site-header.site-header-hero .global-search-wrap input::placeholder {
  color: rgba(255,255,255,0.5);
}
.site-header.site-header-hero .header-tools-toggle {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(201,162,122,0.3);
}
.site-header.site-header-hero .header-tools-toggle:hover {
  background: rgba(255,255,255,0.18);
}
/* Mode switcher pill — same treatment */
.site-header.site-header-hero .mode-switcher .mode-pill {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(201,162,122,0.3);
}
.site-header.site-header-hero .mode-switcher .mode-pill.active {
  background: rgba(201,162,122,0.85);
  color: #2b2520;
  border-color: transparent;
}
.site-header.site-header-hero .mode-switcher .muted { color: rgba(255,255,255,0.6); }

/* =====================================================================
   Phase 6.56 — Role chip + role-based visibility
   ---------------------------------------------------------------------
   Grid placement of .role-chip-wrap is handled by .site-header rules
   above (it now has its own "role" grid area between search and tools).
   ===================================================================== */
.role-chip {
  background: transparent;
  border: 1px solid var(--line, #e6dfd0);
  color: var(--ink, #1a1a1a);
  padding: 6px 12px;
  border-radius: 18px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}
.site-header.site-header-hero .role-chip {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(201,162,122,0.3);
}
.role-chip:hover { background: var(--accent-3, #faf0e0); }
.site-header.site-header-hero .role-chip:hover { background: rgba(255,255,255,0.18); }
.role-chip-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--line, #d6cbb5);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  padding: 6px;
  min-width: 320px;
  z-index: 1000;
}
.role-chip-menu-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.role-chip-menu-item:hover { background: var(--accent-3, #faf0e0); }
.role-chip-menu-item .role-chip-icon { font-size: 1.3em; line-height: 1; }
.role-chip-menu-item .role-chip-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.role-chip-menu-item .role-chip-text strong { font-size: 13px; color: var(--ink, #1a1a1a); font-weight: 500; }
.role-chip-menu-item .role-chip-desc { font-size: 11px; color: var(--muted, #5f5e5a); line-height: 1.4; }

/* ---------------------------------------------------------------------
   Role visibility — keyed off body[data-role="..."]
   ---------------------------------------------------------------------
   Semantic classes operators tag on elements:
     .role-cost       — unit cost, vendor wholesale
     .role-margin     — margin %, gross profit
     .role-price      — client-facing pricing (hidden from design/production)
     .role-finance    — finance tab, financial reports, cash log entries
     .role-finance-detail — drill-down financial reports
     .role-vendor     — vendor wholesale numbers
     .role-design     — design inputs, recipes, packing lists
     .role-production — BEO checklist, production tasks
   Use [data-role-hide="role1 role2"] for one-off element-level gating.
   --------------------------------------------------------------------- */

/* OWNER: sees everything (default — no overrides) */

/* SALES: hides cost/margin/vendor/finance internals */
body[data-role="sales"] .role-cost,
body[data-role="sales"] .role-margin,
body[data-role="sales"] .role-vendor,
body[data-role="sales"] .role-finance-detail,
body[data-role="sales"] [data-role-hide~="sales"] { display: none !important; }

/* DESIGN: hides ALL pricing + financial data */
body[data-role="design"] .role-cost,
body[data-role="design"] .role-margin,
body[data-role="design"] .role-price,
body[data-role="design"] .role-finance,
body[data-role="design"] .role-finance-detail,
body[data-role="design"] .role-vendor,
body[data-role="design"] [data-role-hide~="design"] { display: none !important; }

/* OPERATIONS: hides cost/margin/financial reports */
body[data-role="operations"] .role-cost,
body[data-role="operations"] .role-margin,
body[data-role="operations"] .role-finance-detail,
body[data-role="operations"] .role-vendor,
body[data-role="operations"] [data-role-hide~="operations"] { display: none !important; }

/* BOOKKEEPING: hides design inputs + production checklists */
body[data-role="bookkeeping"] .role-design,
body[data-role="bookkeeping"] .role-production,
body[data-role="bookkeeping"] [data-role-hide~="bookkeeping"] { display: none !important; }

/* =====================================================================
   Sprint 7 / Permissions — payroll-action gates
   ---------------------------------------------------------------------
   role-payroll-edit  → hide from sales + design.
       Used for: + Bonus button, Approve/Reject, Save tips, tips inputs,
       Bonuses list. Owner/Operations/Bookkeeping retain access.
   role-pay-config    → hide from sales + design + operations.
       Used for: Pay class section in staff modal (sets tax form).
       Only Owner + Bookkeeping can change someone's pay class.
   ===================================================================== */
body[data-role="sales"]  .role-payroll-edit,
body[data-role="design"] .role-payroll-edit { display: none !important; }

body[data-role="sales"]      .role-pay-config,
body[data-role="design"]     .role-pay-config,
body[data-role="operations"] .role-pay-config { display: none !important; }

/* Sprint 12 — Permissions matrix card is owner-only (admin function) */
body[data-role="sales"]       .perms-matrix,
body[data-role="design"]      .perms-matrix,
body[data-role="operations"]  .perms-matrix,
body[data-role="bookkeeping"] .perms-matrix { display: none !important; }
body[data-role="sales"]       .card:has(.perms-matrix),
body[data-role="design"]      .card:has(.perms-matrix),
body[data-role="operations"]  .card:has(.perms-matrix),
body[data-role="bookkeeping"] .card:has(.perms-matrix) { display: none !important; }

/* Print: role gating doesn't apply (printed docs follow doc-specific rules) */
@media print {
  body[data-role] .role-cost,
  body[data-role] .role-margin,
  body[data-role] .role-vendor,
  body[data-role] .role-finance,
  body[data-role] .role-finance-detail,
  body[data-role] .role-price,
  body[data-role] .role-design,
  body[data-role] .role-production { display: revert !important; }
}

/* Mode switcher (header) — present only when both verticals are enabled */
.mode-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-left: auto;
  margin-right: 16px;
}
.mode-switcher .tiny { padding: 0 6px; }
.mode-pill {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: .82rem;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .08s ease, color .08s ease;
}
.mode-pill:hover { color: var(--ink); background: rgba(0,0,0,.03); }
.mode-pill.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ---------- Settings: brand identity controls ---------- */
.brand-logo-preview {
  width: 200px;
  height: 64px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  overflow: hidden;
}
.brand-logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
input[type=color] {
  height: 36px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.container { max-width: 1200px; margin: 0 auto; padding: 24px 28px 80px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 24px 28px 80px; }

/* ---------- Cards ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.card h2, .card h3 { margin-top: 0; }
.card-row { display: flex; gap: 16px; flex-wrap: wrap; }
.card-row > .card { flex: 1 1 300px; margin-bottom: 0; }

/* ---------- Forms ----------
   Phase 6.1 — field size bump (Option A from the field-size mockup).
   Inputs/selects/textareas grow to ~44-46px tall, labels to .95rem so
   they scan more easily and feel less cramped. Every form in the app
   inherits — no per-form code changes needed. The .small variants
   (button.small, etc.) stay compact for inline use next to inputs.
   --------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 500; margin-bottom: 6px; font-size: .95rem; }
.field .hint { color: var(--muted); font-size: .85rem; margin-top: 4px; }
/* Phase 6.6 — Uniform field styling.
   Includes input:not([type]) so untyped <input> elements (which default
   to type=text per spec but DON'T match [type=text] in CSS) inherit the
   same look as their typed siblings. Without this, every field that
   lacked an explicit type attribute fell back to browser defaults
   (sharper black borders, no rounding) — breaking the uniform look. */
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], input[type=time], input[type=url], input[type=search],
input[type=password], input:not([type]), select, textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: .95rem;
  line-height: 1.35;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: inherit;
  color: var(--ink);
  box-sizing: border-box;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(138,107,75,.12);
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 640px) {
  .row, .row-3, .row-4 { grid-template-columns: 1fr; }
}

/* Phase 6.14 — Field alignment inside multi-column rows.
   Long parenthetical hints in labels ("e.g. 12 stems per bunch",
   "(free text — units vary by supplier)") wrap to a second line on
   narrow screens, which pushes that field's input below its siblings.
   To keep inputs visually aligned across BOTH portals:
   1. Reserve a 2-line min-height on labels inside row containers, so
      single-line labels stake out the same vertical space as wrapped ones.
   2. Make .field a flex column so the input always sits at the bottom
      of the cell — labels stay top-aligned with their hint visible.
   Stand-alone .field elements (outside .row/.row-3/.row-4) are
   unaffected — they don't have sibling cells to align against. */
.row .field, .row-3 .field, .row-4 .field {
  display: flex;
  flex-direction: column;
}
.row .field > label,
.row-3 .field > label,
.row-4 .field > label {
  min-height: 2.7em;
  display: block;
}
/* Phase 6.29 — Switched from bottom-align to TOP-align with uniform
   label heights. The earlier bottom-align (margin-top:auto on the input)
   created NEW misalignment when helper-text heights varied across cells
   in the same row: cells with no helper bottomed their input lower than
   cells with a 1-line or 2-line helper.
   With labels reserving uniform 2.7em min-height (above), top-aligning
   the input means every cell's input starts at the same Y coordinate
   regardless of what helper sits below. Helpers vary in height but
   that's purely cosmetic noise below the line of action.
   Cells without ANY children other than label+input still look right —
   the absence of `margin-top: auto` just removes the slack that pushed
   the input down. */
@media (max-width: 640px) {
  /* On stacked single-column layouts there's nothing to align against,
     so drop the min-height to avoid wasting vertical space. */
  .row .field > label,
  .row-3 .field > label,
  .row-4 .field > label { min-height: 0; }
}

/* Phase 6.22 — Florist Logistics billable card uses stacked per-charge
   "bill-sections" instead of one big grid. Each section has its own
   heading + mode toggle + fields. Visual separator between sections
   keeps the card scannable without being noisy. */
.bill-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.bill-section:first-of-type { border-top: 0; padding-top: 4px; }
.bill-section-head { margin-bottom: 4px; }
.bill-section-head strong { font-size: .98rem; }

/* Phase 6.4 — Sweeping field-size enforcement across BOTH portals.
   Dozens of legacy fields in dashboard.html carry inline style overrides
   (font-size:.85rem, padding:2px 6px, font-size:.8rem) that lock them
   smaller than the global Option A bump. These !important floors win
   against inline styles so every editable form field reads at a
   comfortable size — UNLESS it's explicitly tagged as a dense
   table-cell input via its class. The carve-out list below is the
   complete set of "deliberately compact" classes that get their own
   sizing via their class rules.
   Phase 6.6 — Selectors expanded so the floor + uniform border applies
   to inputs WITHOUT an explicit type attribute too. Also forces border
   + border-radius via !important so untyped fields can't fall back to
   the browser default (sharp black border, no rounding). */
input:not([type=color]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not(.inv-cell-input):not(.cat-cell-input):not(.checklist-add-input):not(.automation-threshold):not(.set-markup-cat),
select:not(.inv-cell-input):not(.cat-cell-input),
textarea {
  min-height: 42px !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border: 1px solid var(--field-border) !important;
  border-radius: var(--radius-sm) !important;
  background: #fff !important;
  box-sizing: border-box !important;
}
/* Focus state — slightly stronger so it's recognisable across every
   form, matching the look the user pointed to as "the middle one". */
input:not([type=color]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(138, 107, 75, 0.15) !important;
}
/* Compact table-cell inputs keep their own padding/width (defined by
   their class rules) but still get a readable font-size floor and the
   uniform rounded border so the table reads consistently.
   Phase 6.8 — border color matches --field-border too, so cell inputs
   look like miniature versions of the standalone form fields. */
.inv-cell-input, .cat-cell-input {
  font-size: 0.92rem !important;
  border: 1px solid var(--field-border) !important;
  border-radius: var(--radius-sm) !important;
  box-sizing: border-box !important;
}

/* Phase 6.7 — Normalise <select> rendering across the app.
   Browsers render native <select> widgets at a slightly different
   height than text inputs even when given matching CSS padding +
   min-height — the chrome of the native widget constrains them. We
   strip the native chrome with appearance:none and draw the chevron
   via an SVG background-image so selects render at the exact same
   pixel-perfect height as text inputs. Extra right padding makes
   room for the chevron without overlapping the option text. */
select:not(.inv-cell-input):not(.cat-cell-input) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 10px 6px !important;
  padding-right: 36px !important;
  cursor: pointer;
}

/* ---------- Buttons ----------
   Phase 6.1 — bumped to ~44px so the primary buttons sit flush with the
   new input height. .small stays compact (used for inline add/remove
   actions next to checklist rows, etc.).
   --------------------------------------------------------------- */
button, .btn {
  display: inline-block;
  font-family: inherit;
  font-size: .95rem;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: filter .1s ease;
}
button:hover, .btn:hover { filter: brightness(1.05); text-decoration: none; }
button.secondary, .btn.secondary {
  background: #fff; color: var(--ink); border-color: var(--line);
}
button.ghost { background: transparent; color: var(--accent); border-color: transparent; padding: 4px 8px; }
button.danger, .btn.danger { background: var(--danger); border-color: var(--danger); }
button.small, .btn.small { padding: 6px 12px; font-size: .85rem; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
table th, table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table th { color: var(--muted); font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
table tbody tr:hover { background: #fcfaf7; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; padding: 2px 10px; font-size: .75rem;
  border-radius: 999px; background: #eee; color: #333; white-space: nowrap;
}
.badge.inquiry         { background: #eef3ff; color: #2a4b9b; }
.badge.lead            { background: #d6e7ff; color: #1c3978; }
.badge.consultation    { background: #fff3e0; color: #8a5a00; }
.badge.proposal_sent   { background: #e8f2ee; color: #2b6a47; }
.badge.revision        { background: #fdeecb; color: #8a5900; }
.badge.booked          { background: #e0f2e9; color: #1e5a36; }
.badge.production      { background: #e5deed; color: #5c3a86; }
.badge.completed       { background: #e7e7e7; color: #333; }
.badge.lost            { background: #f3e7e3; color: #6b4a3f; }
.badge.cancelled       { background: #fbe3df; color: #8a2d1c; }
.badge.stale-flag      { background: #fff4d6; color: #8a5900; margin-left: 6px; cursor: help; }

/* Phase 6.2 — Invoice status badges. Prefixed inv- so they don't collide
   with the schedule status badges (which already own .paid, .overdue, etc.). */
.badge.inv-draft       { background: #f0ece4; color: #6b5f54; }
.badge.inv-issued      { background: #e6eef7; color: #1f4a7a; }
.badge.inv-unpaid      { background: #e6eef7; color: #1f4a7a; }
.badge.inv-partial     { background: #fdeecb; color: #8a5900; }
.badge.inv-paid        { background: #e0f2e9; color: #1e5a36; }
.badge.inv-overdue     { background: #fbe3df; color: #8a2d1c; }
.badge.inv-cancelled   { background: #e7e7e7; color: #555; text-decoration: line-through; }

/* ---------- Layout helpers ---------- */
.hstack { display: flex; gap: 12px; align-items: center; }
.vstack { display: flex; flex-direction: column; gap: 12px; }
.space-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.tiny  { font-size: .75rem; }
.right { text-align: right; }

/* ---------- File grid (inspiration thumbnails) ---------- */
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.file-tile {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; overflow: hidden; aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center;
}
.file-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-tile .doc-icon { font-size: 2rem; color: var(--muted); }
.file-tile .name { position: absolute; bottom: 0; left: 0; right: 0; font-size: .7rem;
  padding: 4px 6px; background: rgba(255,255,255,.9); border-top: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-tile .rm {
  position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.5); color: #fff;
  border: none; border-radius: 50%; width: 22px; height: 22px; cursor: pointer;
  line-height: 0; font-size: 14px; padding: 0;
}

/* ---------- Dashboard chrome ---------- */
.nav-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px;
}
.nav-tabs button {
  background: transparent; color: var(--muted); border: none; border-bottom: 2px solid transparent;
  padding: 10px 14px; cursor: pointer; border-radius: 0; font-size: .95rem;
}
.nav-tabs button.active { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- Next-step bar (event detail page) ---------- */
.next-step-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 10px 0 14px;
  background: linear-gradient(to right, #fbf6ee 0%, #fff 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.next-step-bar.terminal {
  background: #f6f4f0;
  border-left-color: var(--muted);
}
.next-step-current,
.next-step-next,
.next-step-offramp {
  display: flex;
  align-items: center;
  gap: 8px;
}
.next-step-arrow {
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 500;
}
.next-step-btn {
  font-family: Georgia, serif;
  font-size: 1rem;
  padding: 9px 18px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.next-step-btn:hover { filter: brightness(1.05); }
.next-step-offramp {
  margin-left: auto;
}
@media (max-width: 720px) {
  .next-step-bar { gap: 10px; }
  .next-step-arrow { display: none; }
  .next-step-offramp { margin-left: 0; width: 100%; }
}

.status-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.status-steps .step {
  font-size: .8rem; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--muted); cursor: pointer;
}
.status-steps .step.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.status-steps .step.done { background: #f3ede4; color: var(--ink); }

/* ---------- Welcome screen — first-run experience ---------- */
/* When body has welcome-mode, hide the cluttered nav and let the
   welcome stage breathe across the full canvas. */
body.welcome-mode .site-header .primary-nav,
body.welcome-mode .site-header .header-tools,
body.welcome-mode .site-header .mode-switcher,
body.welcome-mode .site-header .cloud-status {
  display: none !important;
}
body.welcome-mode .site-header {
  border-bottom: none;
}
body.welcome-mode .container {
  padding-top: 8vh;
}

.welcome-stage {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}
.welcome-mark {
  font-family: Georgia, serif;
  font-size: .85rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 36px;
}
.welcome-title {
  font-family: Georgia, serif;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ink);
}
.welcome-lead {
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 auto 48px;
  max-width: 460px;
  line-height: 1.6;
}
.welcome-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 640px) {
  .welcome-tiles { grid-template-columns: 1fr; }
  .welcome-title { font-size: 2.2rem; }
}
.welcome-tile {
  cursor: pointer;
  display: block;
}
.welcome-tile input { display: none; }
.welcome-tile-inner {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px 26px;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
  position: relative;
}
.welcome-tile:hover .welcome-tile-inner {
  border-color: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(20,15,10,.06);
}
.welcome-tile.is-selected .welcome-tile-inner {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 4px 14px rgba(20,15,10,.06);
  background: #fbf6ee;
}
.welcome-tile-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  color: var(--accent);
}
.welcome-tile-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.welcome-tile-title {
  font-family: Georgia, serif;
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: var(--ink);
}
.welcome-tile-desc {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 280px;
  margin: 0 auto;
}
.welcome-hint {
  font-size: .85rem;
  color: var(--muted);
  margin: 0 0 36px;
}
.welcome-actions {
  margin-top: 8px;
}
.welcome-cta {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  padding: 14px 36px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  letter-spacing: .02em;
  transition: filter .1s ease, transform .1s ease;
}
.welcome-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.welcome-cta:active { transform: translateY(0); }

/* ---------- Home: KPI tiles ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.kpi-tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
/* Phase 5.18 — Unified Items page. One card per item with labeled sections
   so users can see exactly what each field does. Purchase math (buy / size =
   per-unit cost) gets its own highlighted callout. */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px;
}
/* Phase 5.19 — Collapsible items use a vertical list now, not a grid.
   Default state is collapsed → shows one-line summary. Click to expand. */
.items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Phase 6.38 — Hide browser default disclosure triangle on collapsible
   catalog sections, so our own ▶ chevron is the only marker. */
details.cat-group > summary,
details.cat-subgroup > summary,
details.mi-cat-card > summary {
  list-style: none;
}
details.cat-group > summary::-webkit-details-marker,
details.cat-subgroup > summary::-webkit-details-marker,
details.mi-cat-card > summary::-webkit-details-marker,
details.cat-group > summary::marker,
details.cat-subgroup > summary::marker,
details.mi-cat-card > summary::marker {
  display: none;
}
details.cat-group > summary:hover,
details.cat-subgroup > summary:hover,
details.mi-cat-card > summary:hover {
  background: linear-gradient(180deg, #fdfbf7, #fdfbf7);
}

/* Phase 6.32 — Bar / Beverages grouped headers. Top-level groups
   (Liquor / Mixers / Beer / Wine) get a bold label with a soft band;
   sub-types (Vodka, Gin, Champagne, etc.) use a lighter divider. */
.bev-group-head {
  margin: 18px 0 8px;
  padding: 10px 14px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, var(--panel), transparent);
  border-left: 4px solid var(--accent, #b08968);
  border-radius: 6px;
}
.bev-group-head:first-child { margin-top: 0; }
.bev-subgroup-head {
  margin: 12px 0 4px;
  padding: 4px 0 4px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 1px dashed var(--line);
}
.item-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.item-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.item-card.is-collapsed .item-card-body { display: none; }
.item-card.is-open { box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
.item-card-body { padding: 14px; border-top: 1px solid var(--line); }
.item-card-summary {
  display: grid;
  grid-template-columns: 50px 1fr 100px 100px 80px auto 18px;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}
.item-card-summary:hover { background: #fbf8f4; }
.item-card-image-small { width: 42px; height: 42px; }
.item-card-image-small .item-card-emoji { font-size: 20px; }
.item-summary-name-text { font-weight: 600; font-size: 14px; }
.item-summary-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.item-summary-cost, .item-summary-sell, .item-summary-stock {
  font-size: 13px;
  text-align: right;
}
.item-summary-cost > div:last-child,
.item-summary-sell > div:last-child,
.item-summary-stock > div:last-child { margin-top: 2px; }
.item-card-chevron {
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}
.item-expanded-name {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.item-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.item-card-image {
  width: 56px;
  height: 56px;
  background: #f5f0e8;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.item-card-image img { width: 100%; height: 100%; object-fit: cover; }
.item-card-emoji { color: #c9a866; font-size: 24px; }
.item-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.item-name-input { font-weight: 600; font-size: 15px; }
.item-card-section { margin-top: 10px; }
.item-card-section:first-of-type { margin-top: 0; }
.item-card-section-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.item-card-grid {
  display: grid;
  gap: 8px;
}
.item-card-grid-purchase   { grid-template-columns: 1.3fr 0.7fr 1fr 0.7fr; }
.item-card-grid-purchase-3 { grid-template-columns: 1.2fr 0.8fr 1fr; }
/* Phase 5.19g — Inputs backed by a <datalist> get a tiny chevron on the
   right so users see it's a dropdown, not just a text field. Browsers
   show this natively in some themes; we add a fallback for the rest. */
input[list] {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 22px;
}

/* Phase 5.18c — Purchase model as a single English sentence row:
   "Buy by the [Bunch] of [12] [stems] for $[25]". Inline words are
   muted; inputs are inline-flex so the line wraps cleanly on narrow cards. */
.purchase-sentence {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}
.purchase-word {
  color: var(--muted);
  font-size: 13px;
  padding: 0 2px;
  white-space: nowrap;
}
.purchase-cell { flex: 1 1 90px; min-width: 80px; }
.purchase-cell-num { flex: 0 1 80px; min-width: 70px; }
.purchase-cell input { padding: 5px 8px; font-size: 13px; }
/* Phase 5.18d — Unit noun shown as readonly text in the sentence.
   Looks like a chip, not an input; users edit it via the ✎ modal. */
.purchase-unit-readonly {
  padding: 4px 10px;
  background: #f7f4ed;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
.purchase-unit-unset {
  padding: 4px 10px;
  background: #fff8e8;
  border: 1px dashed #d6a847;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #8a6312;
  font-style: italic;
  white-space: nowrap;
}
/* Phase 5.18c — Brief red-flash for invalid input (e.g. typed a number
   where a unit name was expected). Auto-clears after ~1s. */
.input-invalid {
  border-color: #c0392b !important;
  background: #fff5f3 !important;
  animation: input-flash 0.4s ease-out;
}
@keyframes input-flash {
  0%   { background: #ffd9d3; }
  100% { background: #fff5f3; }
}
.item-card-grid-pricing    { grid-template-columns: 1fr 1fr 1fr; }
.item-card-grid-stock      { grid-template-columns: 1fr 1fr auto; align-items: end; }
.item-card-grid-sourcing   { grid-template-columns: 1.4fr 1fr 0.8fr; }
/* Phase 5.18 — Pricing row reads as an equation: Cost × Multiplier = Sell.
   Big × and = symbols in between, sell price visually de-emphasized as
   computed (readonly, subtle background). */
.item-pricing-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: end;
}
.item-pricing-times, .item-pricing-eq {
  font-size: 20px;
  font-weight: 700;
  color: var(--muted);
  padding-bottom: 5px;
  text-align: center;
}
.item-sell-price {
  background: #f7f4ed !important;
  font-weight: 600;
  color: #2d2a26;
  cursor: not-allowed;
}
.item-field { display: flex; flex-direction: column; }
.item-field label {
  /* Phase 6.1 — labels grow to match the global form bump. */
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.item-field input, .item-field select {
  padding: 9px 11px;
  font-size: 14px;
}
.item-math {
  margin-top: 8px;
  padding: 7px 10px;
  background: #fff7ec;
  border: 1px solid #e2c597;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: #6b4d1c;
}
.item-math-empty {
  background: #f7f4ed;
  border-color: var(--line);
  color: var(--muted);
  font-style: italic;
}
.item-stock-status { padding-bottom: 6px; }
.stock-low { color: #c0392b; font-weight: 600; font-size: 13px; }
.stock-ok  { color: #2d7a3e; font-weight: 500; font-size: 13px; }
.kpi-tile.kpi-warn {
  border-left-color: #c0392b;
  background: #fff5f3;
}

/* Phase 5.17b — Specialty chips on supplier list + detail pages.
   Small rounded pill that visually conveys "this is one of several tags
   indicating what kind of products this vendor sells". */
.specialty-chip {
  display: inline-block;
  padding: 3px 9px;
  background: #fff7ec;
  border: 1px solid #e2c597;
  color: #6b4d1c;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
/* 7-tile variant (Reports page, mirrors industry venue-dashboard layout).
   Lays out as 7-across on wide screens, 4-across on tablets, 2-across on phones. */
.kpi-grid.kpi-grid-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .kpi-grid.kpi-grid-7 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .kpi-grid.kpi-grid-7 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.kpi-tile.kpi-leaf    { border-left-color: var(--leaf);    }
.kpi-tile.kpi-rose    { border-left-color: var(--rose);    }
.kpi-tile.kpi-success { border-left-color: var(--success); }
.kpi-tile.kpi-accent  { border-left-color: var(--accent);  }
.kpi-label {
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
  font-weight: 500;
}
/* Phase 6.50 — KPI row holds value + optional sparkline side-by-side */
.kpi-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.kpi-value {
  font-family: Georgia, serif;
  font-size: 2.05rem;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: 0.01em;
  font-weight: 300;
}
.kpi-trend {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}
.kpi-trend-success { color: var(--success, #3B6D11); }
.kpi-trend-rose    { color: var(--rose,    #A32D2D); }
.kpi-spark {
  color: var(--accent, #1c3978);
  opacity: 0.55;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 2px;
}
.kpi-tile.kpi-rose    .kpi-spark { color: var(--rose,    #A32D2D); }
.kpi-tile.kpi-success .kpi-spark { color: var(--success, #3B6D11); }
.kpi-tile.kpi-leaf    .kpi-spark { color: var(--leaf,    #5e7a4e); }
.kpi-sub {
  margin-top: 6px;
  color: var(--muted);
  font-size: .78rem;
}

/* ---------- Global search (Phase 2.9 Sprint H) ---------- */
.global-search-wrap {
  position: relative;
  flex: 0 1 240px;
  max-width: 280px;
}
#global-search-input {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: .9rem;
}
#global-search-input:focus {
  outline: none;
  border-color: var(--accent, #b58a4a);
  box-shadow: 0 0 0 3px rgba(181, 138, 74, 0.12);
}
.global-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  z-index: 1000;
}
.global-search-group { padding: 6px 0; border-bottom: 1px solid #f0ece2; }
.global-search-group:last-child { border-bottom: none; }
.global-search-group-label {
  padding: 8px 14px 4px;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 600;
}
.global-search-row {
  display: block;
  padding: 8px 14px;
  text-decoration: none;
  color: var(--ink);
  border-left: 3px solid transparent;
  transition: background 80ms, border-color 80ms;
}
.global-search-row:hover {
  background: #fbf7f0;
  border-left-color: var(--accent, #b58a4a);
}
.global-search-primary { font-size: .9rem; font-weight: 500; }
.global-search-secondary { margin-top: 2px; }
.global-search-empty {
  padding: 16px;
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}
@media (max-width: 600px) {
  .global-search-wrap { flex: 1 1 100%; max-width: none; }
}

/* ---------- Onboarding tour (Phase 2.9 Sprint G) ---------- */
.onboarding-step .onboarding-progress {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 600;
}
.onboarding-step h2 {
  font-family: Georgia, serif;
}
.onboarding-step p {
  color: var(--ink);
  margin-bottom: 12px;
}
.onboarding-dots {
  display: flex;
  gap: 6px;
  margin: 14px 0 4px;
  justify-content: center;
}
.onboarding-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--line);
  transition: background 120ms;
}
.onboarding-dot.active {
  background: var(--accent, #b58a4a);
}

/* ---------- Venue vendor documents grid (Phase 3.2b) ---------- */
.vendor-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 720px) {
  .vendor-doc-grid { grid-template-columns: 1fr; }
}
.vendor-doc-slot {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: #fff;
}
.vendor-doc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.vendor-doc-header strong { font-size: .92rem; }
.vendor-doc-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vendor-doc-file {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  background: #fbf7f0;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: .78rem;
}
.vendor-doc-file a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--ink);
}
.vendor-doc-file img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 3px;
}
.vendor-doc-file .doc-icon { font-size: 1rem; }
.vendor-doc-file-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vendor-doc-file .rm {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
  font-size: .9rem;
}
.vendor-doc-file .rm:hover { color: #8a2d1c; }
.vendor-doc-upload {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: #fbf7f0;
  border: 1px dashed var(--accent, #b58a4a);
  border-radius: 4px;
  cursor: pointer;
  font-size: .78rem;
  color: var(--accent, #b58a4a);
  transition: background 120ms ease;
}
.vendor-doc-upload:hover { background: #f5e8d4; }

/* ---------- Event tags (Phase 2.5) ---------- */
.event-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.event-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: .78rem;
  border-radius: 999px;
  background: #f0e7d8;
  color: #6b4f2a;
  white-space: nowrap;
}
.event-tag.event-tag-row {
  font-size: .7rem;
  padding: 1px 8px;
  margin-right: 4px;
}
.event-tag-rm {
  background: transparent;
  border: none;
  color: #6b4f2a;
  cursor: pointer;
  padding: 0 2px;
  font-size: 1rem;
  line-height: 1;
  opacity: .55;
}
.event-tag-rm:hover { opacity: 1; }
.event-tag-add {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  font-size: .78rem;
}
.event-tag-add input:focus {
  outline: none;
}

/* ---------- Polish bundle (Phase 2.3) ---------- */
/* Bulk action bar above events list */
.bulk-actions-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: #fff8e7;
  border: 1px solid var(--accent, #b58a4a);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.bulk-actions-count { font-size: .9rem; color: var(--ink); }
.bulk-actions-count strong { color: var(--accent, #b58a4a); }

/* Voided payment row treatment */
tr.payment-voided {
  opacity: .55;
  background: #f6f6f1;
}
tr.payment-voided td {
  text-decoration: line-through;
}
tr.payment-voided td:last-child,
tr.payment-voided td:nth-child(6) {
  text-decoration: none;
}

/* Merge variable docs table in Settings */
.merge-vars-help summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  padding: 8px 0;
  user-select: none;
}
.merge-vars-help summary:hover { color: var(--accent, #b58a4a); }
.merge-vars-table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
}
.merge-vars-table th,
.merge-vars-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid #f0ece2;
  font-size: .85rem;
}
.merge-vars-table th {
  background: #fbf7f0;
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.merge-vars-table code {
  font-family: 'Courier New', monospace;
  font-size: .82rem;
  background: #fbf7f0;
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--accent, #b58a4a);
}

/* ---------- Cross-event Tasks page (Phase 2.2) ---------- */
.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.task-row {
  display: grid;
  grid-template-columns: 28px 1fr 110px 100px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: background 120ms ease, opacity 120ms ease;
}
.task-row:hover { background: #fdfaf3; }
.task-row.is-done {
  opacity: .55;
  background: #f6f6f1;
}
.task-row.is-done .task-row-title {
  text-decoration: line-through;
  color: var(--muted);
}
.task-row.is-overdue {
  border-left: 3px solid #c44d3f;
}
.task-row-check {
  width: 20px; height: 20px;
  cursor: pointer;
  margin: 0;
  accent-color: var(--leaf, #4f8a4f);
}
.task-row-body { min-width: 0; }
.task-row-title { font-weight: 500; line-height: 1.35; }
.task-row-meta { margin-top: 4px; font-size: .82rem; }
.task-row-meta a { color: var(--accent, #b58a4a); text-decoration: none; }
.task-row-meta a:hover { text-decoration: underline; }
.task-row-due {
  font-size: .85rem;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.task-row-due.is-overdue {
  color: #8a2d1c;
  font-weight: 600;
}

/* ---------- Florist usage card on event detail (Phase 2.0c) ---------- */
.florist-usage {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.florist-usage-row {
  display: grid;
  grid-template-columns: 50px 1fr 90px 110px;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.florist-usage-thumb {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fbf8f4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  text-transform: uppercase;
  color: var(--muted);
}
.florist-usage-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.florist-usage-meta { min-width: 0; }
.florist-usage-meta .muted { font-size: .75rem; line-height: 1.4; margin-top: 2px; }
.florist-usage-qty { text-align: right; font-variant-numeric: tabular-nums; }
.florist-usage-availability { text-align: right; font-size: .85rem; }
.florist-usage-availability.is-short { color: #8a2d1c; }

/* ---------- Function modal: rentals assigned section ---------- */
.fn-rental-row {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #f0ece2;
}
.fn-rental-row:last-child { border-bottom: none; }
.fn-rental-name strong { font-size: .95rem; }
.fn-rental-qty {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Inventory pages (florist · catering · venue rentals) ---------- */
.inv-table {
  width: 100%;
  border-collapse: collapse;
}
.inv-table th {
  text-align: left;
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
}
.inv-table th.num,
.inv-table td.num { text-align: right; }
.inv-table tbody tr {
  border-bottom: 1px solid #f0ece2;
  transition: background 120ms ease;
}
.inv-table tbody tr:hover { background: #fdfaf3; }
.inv-table td { padding: 4px 6px; vertical-align: middle; }
.inv-cell-input {
  /* Phase 6.1 — bumped to keep table cells legible while still
     denser than standalone forms. ~32px tall vs full input's ~46px. */
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  font-size: .92rem;
  font-family: inherit;
}
.inv-cell-input:focus {
  background: #fff;
  border-color: var(--accent, #b58a4a);
  outline: none;
}
.inv-cell-input.num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-thumb-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: transform 120ms ease;
}
.inv-thumb-btn:hover { transform: scale(1.06); }
.inv-thumb-btn:focus-visible {
  outline: 2px solid var(--accent, #b58a4a);
  outline-offset: 2px;
}
.inv-thumb-btn .menu-item-thumb { cursor: pointer; }
.inv-table tbody tr.inv-low-stock {
  background: #fbe3df;
}
.inv-table tbody tr.inv-low-stock:hover { background: #f5d4cf; }
.inv-add-row {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  background: #fbf7f0;
  margin-left: -14px;
  margin-right: -14px;
  margin-bottom: -14px;
  padding: 14px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* ---------- Communications log (per-event card + cross-event page) ---------- */
.comms-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comm-row {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.comm-row:hover {
  border-color: var(--accent, #b58a4a);
  background: #fdfaf3;
}
.comm-row.comm-out { border-left: 3px solid var(--accent, #b58a4a); }
.comm-row.comm-in  { border-left: 3px solid var(--leaf, #4f8a4f); }
.comm-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
  min-width: 44px;
}
.comm-arrow {
  font-size: .85rem;
  font-weight: 700;
  margin-top: 2px;
  color: var(--muted);
}
.comm-out .comm-arrow { color: var(--accent, #b58a4a); }
.comm-in  .comm-arrow { color: var(--leaf, #4f8a4f); }
.comm-body { min-width: 0; }
.comm-title-line { line-height: 1.35; }
.comm-snippet {
  margin-top: 4px;
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.comm-meta-line {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.comm-meta-line a { color: var(--accent, #b58a4a); text-decoration: none; }
.comm-meta-line a:hover { text-decoration: underline; }
.comm-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.comm-full-body {
  white-space: pre-wrap;
  background: #fbf7f0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  max-height: 50vh;
  overflow-y: auto;
  line-height: 1.5;
}

/* ---------- Reports / Analytics page ---------- */
.report-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.report-tile {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.report-tile:hover {
  background: #fafaf6;
  border-color: var(--accent);
  transform: translateY(-1px);
}
.report-tile-icon {
  font-size: 28px;
  line-height: 1;
}
.report-tile-body { flex: 1; min-width: 0; }
.report-tile-title { font-weight: 600; margin-bottom: 2px; }
.report-tile-desc { line-height: 1.35; }

.report-bar-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.report-bar-row {
  display: grid;
  grid-template-columns: 70px 1fr 130px;
  gap: 12px;
  align-items: center;
}
.report-bar-label {
  font-size: .85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.report-bar-track {
  height: 18px;
  background: #f6f1e7;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.report-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--leaf, #4f8a4f), var(--accent, #b58a4a));
  border-radius: 4px;
  transition: width 280ms ease;
}
.report-bar-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: .9rem;
  color: var(--ink);
}

/* Status-snapshot stacked bar */
.report-stack {
  display: flex;
  width: 100%;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fafaf6;
}
.report-stack-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 600;
  border-radius: 0;
  min-width: 0;
  padding: 0 4px;
  white-space: nowrap;
}
.report-stack-segment:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.65);
}
.report-stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.report-stack-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Busiest day-of-week vertical bar chart */
.report-dow-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: end;
  height: 180px;
}
.report-dow-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.report-dow-bar-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}
.report-dow-bar {
  width: 60%;
  background: var(--accent, #b58a4a);
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  transition: height 280ms ease;
  min-height: 2px;
}
.report-dow-bar.is-weekend {
  background: var(--leaf, #4f8a4f);
}
.report-dow-count {
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.report-dow-label {
  margin-top: 6px;
  text-align: center;
  font-size: .75rem;
  color: var(--muted);
  font-weight: 600;
}
.report-dow-label.is-weekend { color: var(--leaf, #4f8a4f); }

@media (max-width: 600px) {
  .report-bar-row { grid-template-columns: 56px 1fr 100px; gap: 8px; }
  .report-bar-value { font-size: .8rem; }
  .report-dow-grid { height: 140px; }
}

/* ---------- Per-event checklist (Production / BEO) ---------- */
.checklist-card { /* card-level container */ }
.checklist-progress {
  text-align: right;
  white-space: nowrap;
}
.checklist-progress-label {
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
}
.checklist-progress-overdue {
  margin-top: 2px;
  font-size: .75rem;
  color: #8a2d1c;
  font-weight: 600;
}
.checklist-progress-bar {
  width: 100%;
  height: 6px;
  background: #f0ece2;
  border-radius: 999px;
  overflow: hidden;
}
.checklist-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7fae7f, #4f8a4f);
  border-radius: 999px;
  transition: width 240ms ease;
}
.checklist-tasks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.checklist-task {
  display: grid;
  grid-template-columns: 28px 1fr 150px 36px;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: background 120ms ease, opacity 120ms ease;
}
.checklist-task:hover { background: #fbf7f0; }
.checklist-task.is-done {
  opacity: .55;
  background: #f6f6f1;
}
.checklist-task.is-done .checklist-task-title {
  text-decoration: line-through;
  color: var(--muted);
}
.checklist-task-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0;
  accent-color: var(--leaf, #4f8a4f);
}
.checklist-task-title {
  border: none;
  background: transparent;
  font-size: .95rem;
  padding: 4px 6px;
  width: 100%;
  border-radius: 4px;
}
.checklist-task-title:focus {
  background: #fff;
  outline: 2px solid var(--accent, #b58a4a);
  outline-offset: 1px;
}
.checklist-task-due {
  font-size: .82rem;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}
.checklist-task-due.overdue {
  background: #fbe3df;
  color: #8a2d1c;
  border-color: #f0bcb1;
  font-weight: 600;
}
.checklist-add-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Settings → Templates → Checklist template row */
.checklist-tpl-row {
  display: grid;
  grid-template-columns: 1fr 90px auto auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.checklist-tpl-row:last-child { border-bottom: none; }
.checklist-tpl-row input[type="text"] {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: .9rem;
}
.checklist-tpl-row input[type="number"] {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: .9rem;
  text-align: right;
}
@media (max-width: 600px) {
  .checklist-tpl-row {
    grid-template-columns: 1fr 70px;
    grid-auto-rows: auto;
  }
  .checklist-tpl-row > :nth-child(n+3) { grid-column: span 1; }
}
.checklist-add-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
@media (max-width: 600px) {
  .checklist-task {
    grid-template-columns: 28px 1fr 36px;
  }
  .checklist-task-due {
    grid-column: 2 / 4;
    margin-top: 4px;
  }
}

/* ---------- Calendar: month grid ---------- */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.calendar-dow {
  background: #f6f1e7;
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 8px 4px;
}
.calendar-cell {
  background: #fff;
  min-height: 110px;
  padding: 6px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.calendar-cell.out-of-month {
  background: #fafaf6;
  color: var(--muted);
}
.calendar-cell.is-weekend:not(.out-of-month) {
  background: #fdfaf3;
}
.calendar-cell.is-today {
  background: #fff8e7;
  box-shadow: inset 0 0 0 2px var(--accent, #b58a4a);
}
.calendar-cell-date {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.calendar-cell.out-of-month .calendar-cell-date {
  color: #c9c3b3;
  font-weight: 400;
}
.calendar-cell-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.calendar-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  font-size: .72rem;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  line-height: 1.25;
}
.calendar-chip:hover {
  filter: brightness(0.95);
  text-decoration: none;
}
.calendar-chip-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .68rem;
  opacity: .85;
  flex: 0 0 auto;
}
.calendar-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.callout {
  background: #fff8e7;
  border: 1px solid var(--accent, #b58a4a);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: .9rem;
  color: var(--ink);
}
.callout a { color: var(--accent, #b58a4a); }

@media (max-width: 760px) {
  .calendar-cell { min-height: 70px; padding: 4px; }
  .calendar-chip { font-size: .65rem; padding: 2px 4px; }
  .calendar-cell-date { font-size: .75rem; }
}

/* ---------- Home: pipeline kanban ---------- */
.kanban {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px 12px;
  margin-top: 10px;
  scrollbar-width: thin;
}
.kanban-col {
  flex: 0 0 220px;
  background: #fbf8f4;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 120px;
}
.kanban-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.kanban-body {
  display: flex; flex-direction: column; gap: 6px;
}
.kanban-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.kanban-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(20,15,10,.08);
  border-color: var(--accent-2);
}
.kanban-card-title {
  font-weight: 500;
  margin-bottom: 2px;
  word-break: break-word;
}

/* =====================================================================
   Phase 6.50 — Kanban v2 — date-rail layout
   ---------------------------------------------------------------------
   Card splits into two columns: a narrow date-stack on the left
   (month / day / weekday — editorial Georgia treatment for the day
   number) and the event subject on the right. Tan vertical divider
   ties the rail to the brand. Falls back to "TBD" when no date set.
   ===================================================================== */
.kanban-card.kanban-card-v2 {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  align-items: stretch;
}
.kanban-card-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding-right: 12px;
  border-right: 1px solid rgba(201, 162, 122, 0.35);
  flex-shrink: 0;
}
.kanban-card-date.kanban-card-date-tbd { border-right-color: var(--line); }
.kc-date-mon {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent-2, #c9a27a);
  line-height: 1;
}
.kc-date-day {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--accent, #1c3978);
  line-height: 1;
  margin-top: 2px;
  letter-spacing: 0.01em;
}
.kc-date-dow {
  font-size: 9px;
  color: var(--muted, #5f5e5a);
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kanban-card-v2 .kanban-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kanban-card-v2 .kanban-card-title {
  font-size: 0.92rem;
  margin-bottom: 3px;
}
.kanban-card-v2 .kc-venue {
  margin-top: 2px;
}

/* ---------- Home: upcoming list rows ---------- */
.upcoming-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .08s ease, background .08s ease;
}
.upcoming-row:hover {
  border-color: var(--accent-2);
  background: #fcfaf7;
  text-decoration: none;
}
.upcoming-date {
  width: 48px; flex: 0 0 48px;
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 0;
}
.upcoming-date-day {
  font-family: Georgia, serif; font-size: 1.2rem; line-height: 1;
  color: var(--ink);
}
.upcoming-date-mon {
  font-size: .7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
  margin-top: 2px;
}

/* ---------- Home: needs-attention rows ---------- */
.attention-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  text-decoration: none;
  color: inherit;
}
.attention-row:hover {
  border-color: var(--accent-2);
  background: #fcfaf7;
  text-decoration: none;
}

/* ---------- Contract delta panel (proposal page) ---------- */
.contract-delta {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: #fcfaf7;
  padding: 14px 16px;
}
.contract-delta-up   { border-left-color: var(--accent);  background: #fcf6ee; }
.contract-delta-down { border-left-color: var(--leaf);    background: #f3f8f4; }
.contract-delta-flat { border-left-color: var(--muted);   background: #fcfaf7; }

/* Line item flagged as added after contract */
.item-post-contract {
  background: #fffaf2;
}
.item-post-contract td:first-child {
  border-left: 3px solid var(--accent-2);
}

/* PDF — contract delta summary on the Payments page */
.pdf-contract-delta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 24px;
  background: #fbf8f4;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 14px;
}

/* ---------- Profitability panel + strip + badge ---------- */
.profit-panel {
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-sm);
  background: #fcfaf7;
  padding: 14px 16px;
}
.profit-panel.profit-healthy  { border-left-color: var(--success); background: #f3f8f4; }
.profit-panel.profit-marginal { border-left-color: var(--accent-2); background: #fcf6ee; }
.profit-panel.profit-low      { border-left-color: var(--danger);  background: #faeae6; }
.profit-panel.profit-unknown  { border-left-color: var(--muted);   background: #fcfaf7; }

.profit-strip {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-sm);
  background: #fff;
  margin-bottom: 18px;
}
.profit-strip.profit-healthy  { border-left-color: var(--success); }
.profit-strip.profit-marginal { border-left-color: var(--accent-2); }
.profit-strip.profit-low      { border-left-color: var(--danger);  }

.profit-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: .75rem;
  border-radius: 999px;
  background: #eee;
  color: #333;
  white-space: nowrap;
}
.profit-badge.profit-healthy  { background: #e0f2e9; color: #1e5a36; }
.profit-badge.profit-marginal { background: #fdeecb; color: #8a5900; }
.profit-badge.profit-low      { background: #fbe3df; color: #8a2d1c; }
.profit-badge.profit-unknown  { background: #eee;    color: #333;    }

/* ---------- Empty state ---------- */
.empty {
  padding: 30px; text-align: center; color: var(--muted); border: 1px dashed var(--line);
  border-radius: var(--radius); background: #fdfbf7;
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(30,20,10,.45); display: flex; align-items: flex-start;
  justify-content: center; padding: 40px 20px; z-index: 100; overflow: auto;
}
.modal {
  background: #fff; border-radius: var(--radius); max-width: 720px; width: 100%;
  box-shadow: var(--shadow); padding: 24px 26px;
}
.modal h2 { margin-top: 0; }
.modal-close { background: transparent; color: var(--muted); border: none; padding: 4px 8px; }

/* ---------- Print stylesheet (proposal + event detail + generic) ---------- */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .primary-nav, .header-tools, .mode-switcher, .no-print {
    display: none !important;
  }
  .container { padding: 0; max-width: 100%; }
  .card {
    box-shadow: none;
    border: 1px solid #ddd;
    padding: 12px;
    margin-bottom: 14px;
    page-break-inside: avoid;
  }
  table th, table td { border-color: #ccc; }
  /* Hide every interactive control — buttons, form inputs (except text values
     in inputs which stay visible because the .value-text fallback below) */
  button, .btn, .row-actions, .row-actions-toggle,
  .bulk-actions-bar, .bulk-row-check, #bulk-select-all,
  .checklist-add-row, .checklist-task-checkbox, .checklist-add-row input,
  .comm-row-actions,
  textarea, input[type="search"], input[type="file"],
  .event-tag-add, .event-tag-rm,
  details > summary { display: none !important; }
  details { display: block; }
  details > div, details > p, details > table { display: block !important; }
  /* Inputs inside the event editor become plain text on print */
  input, select { border: none !important; background: transparent !important; padding: 0 !important; }
  /* Page breaks before each major section */
  h1 { page-break-before: auto; }
  h3 { page-break-after: avoid; }
  /* Don't break a checklist or list mid-row */
  .activity-entry, .activity-system, .checklist-task, .task-row { page-break-inside: avoid; }
  /* Activity log: drop the new-note input */
  #new-note-body, #btn-add-note, #activity-search { display: none !important; }
  /* Remove background tints so toner isn't wasted */
  .badge { background: transparent !important; border: 1px solid #888; }
  .calendar-cell, .kpi-tile, .checklist-task, .task-row, .comm-row {
    background: transparent !important;
    box-shadow: none !important;
  }
  a { color: #000; text-decoration: none; }
  a[href]:after { content: ""; } /* don't append URLs after links */
}

/* ---------- Mobile polish (Phase 2.7) ---------- */
@media (max-width: 600px) {
  .container { padding: 12px; }
  /* Header now uses CSS grid (see top of file); nav already scrolls horizontally */
  .row, .row-3, .row-4 {
    grid-template-columns: 1fr !important;
  }
  .space-between {
    flex-wrap: wrap;
  }
  .btn-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .btn-row .btn,
  .btn-row button,
  .btn-row select { flex: 1 1 auto; }
  /* Tables that scroll horizontally instead of squishing */
  .events-list-table,
  .inv-table,
  .merge-vars-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  /* Recipe / menu item edit hero collapses to single column */
  .recipe-overview-row {
    grid-template-columns: 1fr !important;
  }
  /* KPI strip stacks 2-up instead of squeezing 4 */
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Activity feed gets more breathing room */
  .activity-system { gap: 8px; }
  /* Modals — full screen on phone */
  .modal { padding: 14px; max-height: 92vh; }
  /* Settings sidebar: already responsive in earlier media query */
}

/* ---------- Generate-schedule modal — template picker cards ---------- */
.schedule-template-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .08s ease, background .08s ease;
}
.schedule-template-card:hover {
  border-color: var(--accent-2);
  background: #fcfaf7;
}
.schedule-template-card.selected {
  border-color: var(--accent);
  background: #fbf6ee;
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.schedule-template-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.schedule-template-splits {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .85rem;
}
.schedule-template-split-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 8px;
  align-items: baseline;
}

/* ---------- Payment receipts inline thumbnails ---------- */
.payment-receipts {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.payment-receipt-thumb {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
  text-decoration: none;
}
.payment-receipt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.payment-receipt-thumb .doc-icon {
  font-size: 18px;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  height: 100%;
}
.payment-receipt-thumb .rm {
  position: absolute;
  top: 1px; right: 1px;
  width: 14px; height: 14px;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 10px;
  line-height: 0;
  cursor: pointer;
  padding: 0;
}
.payment-receipt-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
}
.payment-receipt-add:hover {
  border-color: var(--accent-2);
  color: var(--ink);
}

/* PDF — small "if by card" sublabel under base amount */
.pdf-card-amt {
  font-style: italic;
}

/* ---------- Functions card (event detail) ---------- */
.function-row {
  background: #fbf8f4;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.function-row-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.function-row-meta {
  margin-top: 4px;
  font-size: .85rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.function-row-billable {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: .9rem;
}

/* ---------- Activity log (event detail) ---------- */
.activity-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.activity-entry {
  background: #fbf8f4;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.activity-meta {
  display: block;
  margin-bottom: 4px;
  overflow: hidden;
}
.activity-body {
  white-space: pre-wrap;
  line-height: 1.5;
}
.legacy-note {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fcf6ee;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  color: var(--ink);
}

/* System (auto-tracked) activity entries — compact, muted, icon-led */
.activity-system {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  background: transparent;
  font-size: .85rem;
}
.activity-system-icon {
  flex: 0 0 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #efece6;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 500;
}
.activity-system-body {
  flex: 1;
}
.activity-system-summary {
  color: var(--ink);
}
.activity-system.a-status   .activity-system-icon { background: #eef3ff; color: #2a4b9b; }
.activity-system.a-proposal .activity-system-icon,
.activity-system.a-proposal-rm .activity-system-icon { background: #e8f2ee; color: #2b6a47; }
.activity-system.a-payment  .activity-system-icon { background: #e0f2e9; color: #1e5a36; }
.activity-system.a-payment-rm .activity-system-icon { background: #fbe3df; color: #8a2d1c; }
.activity-system.a-contract .activity-system-icon { background: #fdeecb; color: #8a5900; }
.activity-system.a-contract-rm .activity-system-icon { background: #f3e7e3; color: #6b4a3f; }
.activity-system.a-function .activity-system-icon { background: #e5deed; color: #5c3a86; }
.activity-system.a-function-rm .activity-system-icon { background: #f3e7e3; color: #6b4a3f; }
.activity-system.a-contact  .activity-system-icon { background: #fff3e0; color: #8a5a00; font-size: .75rem; }
.activity-system.a-contact-rm .activity-system-icon { background: #f3e7e3; color: #6b4a3f; }

/* ---------- Events list: status counter strip ---------- */
.status-counter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 14px;
}
.status-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .85rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .08s ease;
}
.status-counter:hover { border-color: var(--accent-2); }
.status-counter.active {
  border-color: var(--accent);
  background: #fbf6ee;
}
.status-counter-count {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 24px;
  text-align: center;
}

/* ---------- Events list: inline actions menu ---------- */
.events-list-table tr[data-event-id] {
  cursor: pointer;
}
.row-actions {
  position: relative;
  display: inline-block;
}
.row-actions-toggle {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.row-actions-toggle:hover {
  background: #f6f1e9;
  color: var(--ink);
}
.row-actions-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(20,15,10,.12);
  min-width: 160px;
  z-index: 50;
  overflow: hidden;
}
.row-actions-menu.open { display: block; }
.row-actions-menu a,
.row-actions-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-size: .9rem;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  border-radius: 0;
}
.row-actions-menu a:hover,
.row-actions-menu button:hover {
  background: #fbf6ee;
}
.row-actions-menu button.danger {
  color: var(--danger);
}
.row-actions-menu button.danger:hover {
  background: #fbe3df;
}

/* ---------- Settings: page header + sidebar layout ---------- */
.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
}
/* Phase 5.9b — Tile-first layout has no sidebar; .settings-content
   fills the full width. */
.settings-layout.settings-layout-no-sidebar {
  display: block;
}

/* Pivot tabs (Venue / Event Designer) — appears above the tile grid
   when both modules are enabled. */
.settings-pivot-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--panel, #f7f3ec);
  border: 1px solid var(--line);
  border-radius: 8px;
  width: fit-content;
}
.settings-pivot-tab {
  background: transparent;
  border: 0;
  padding: 8px 18px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink-soft, #6b5f54);
  transition: background .12s ease, color .12s ease;
}
.settings-pivot-tab.active {
  background: white;
  color: var(--ink, #2a2520);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.settings-pivot-tab:hover:not(.active) {
  color: var(--ink, #2a2520);
}
.settings-sidebar {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  align-self: start;
}
.settings-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 10px 14px;
  font-size: .95rem;
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.settings-nav-item:hover {
  background: #fbf6ee;
}
.settings-nav-item.active {
  background: var(--accent);
  color: #fff;
}

/* TOC under the pivot tabs — clickable jump-links to each card */
.settings-toc-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 4px;
}
.settings-toc-label {
  font-size: 10px;
  letter-spacing: 0.6px;
  color: #888;
  padding: 4px 14px;
  text-transform: uppercase;
}
.settings-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  padding: 2px 0;
}
/* Each category group is a collapsible accordion */
.settings-toc-group {
  border-radius: var(--radius-sm);
}
.settings-toc-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink);
  text-align: left;
  border-radius: var(--radius-sm);
}
.settings-toc-group-head:hover {
  background: #fbf6ee;
}
.settings-toc-chev {
  font-size: 10px;
  color: #888;
  width: 12px;
  flex-shrink: 0;
}
.settings-toc-group.is-open .settings-toc-chev {
  color: var(--accent);
}
.settings-toc-group-label {
  flex: 1;
  font-weight: 600;
}
.settings-toc-group-count {
  background: #f0e9dd;
  color: #6a5238;
  padding: 1px 8px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
}
.settings-toc-group.is-open .settings-toc-group-count {
  background: var(--accent);
  color: #fff;
}
.settings-toc-group-body {
  padding: 2px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Collapse state — wins over the default flex display */
.settings-toc-group-body[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------
   Phase 6.0 — Settings LEFT SIDEBAR group nav.
   Replaces the old quick-tile strip + TOC accordion. One topical
   group is active at a time; clicking a sidebar button swaps which
   set of cards is visible in the right pane. Groups with zero
   visible cards under the current business pivot are hidden by JS
   so each tenant only sees what applies to them.
--------------------------------------------------------------------- */
.settings-layout-has-groups {
  /* Left sidebar (180px) + content (1fr). Overrides the default
     .settings-layout grid-template-columns of 200px 1fr only so we
     can give the new nav a slightly tighter width. */
  grid-template-columns: 188px 1fr;
}
.settings-group-nav {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel, #f7f3ec);
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  padding: 8px;
  align-self: start;
}
.settings-group-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink, #2a2520);
  cursor: pointer;
  border-radius: var(--radius-sm, 6px);
  transition: background .12s ease, color .12s ease;
}
.settings-group-btn:hover:not(.active) {
  background: #fbf6ee;
}
.settings-group-btn.active {
  background: var(--accent, #c9a866);
  color: #fff;
}
.settings-group-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.settings-group-label {
  flex: 1;
  font-weight: 600;
}
/* Cards filtered out by the active sidebar group. Layered with
   .settings-section-hidden (the business pivot filter) — either
   class will hide the card; both must allow it to show. */
.settings-group-hidden {
  display: none !important;
}

/* Stack the sidebar above the content on narrow screens. */
@media (max-width: 760px) {
  .settings-layout-has-groups {
    grid-template-columns: 1fr;
  }
  .settings-group-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding: 6px;
  }
  .settings-group-btn {
    flex-shrink: 0;
    padding: 8px 12px;
  }
  .settings-group-label {
    font-weight: 500;
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------
   Phase 5.3 — Proposal builder sub-sections
   <details class="prop-section"> elements inside the builder card.
--------------------------------------------------------------------- */
.prop-section {
  border-top: 1px solid #e7e3df;
  padding-top: 14px;
}
.prop-section > summary {
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
}
.prop-section > summary::-webkit-details-marker { display: none; }
.prop-section > summary::before {
  content: "▸";
  display: inline-block;
  width: 14px;
  color: #888;
  transition: transform .15s ease;
}
.prop-section[open] > summary::before {
  transform: rotate(90deg);
}
.prop-section.legacy {
  background: #faf8f5;
  border-left: 3px solid #c9a866;
  padding: 12px 14px;
  border-radius: 6px;
}
.prop-section.legacy > summary {
  color: #6d5a3a;
}

/* ---------------------------------------------------------------------
   Phase 5.4 — Collapsible cards on the event detail page.
--------------------------------------------------------------------- */
.collapsible-card .collapse-chevron {
  display: inline-block;
  margin-left: 8px;
  font-size: .8em;
  color: #888;
  transition: transform .15s ease;
  vertical-align: middle;
}
.collapsible-card.collapsed .collapse-chevron {
  transform: rotate(-90deg);
}
.collapsible-card.collapsed .card-body {
  display: none !important;
}
/* When the card is closed, tighten its padding so it reads as a strip. */
.collapsible-card.collapsed {
  padding-bottom: 14px;
}
.collapsible-card > h3 {
  /* Make the whole h3 text + chevron feel like a clickable affordance */
  display: inline-flex;
  align-items: center;
}
.settings-toc-link {
  display: block;
  padding: 5px 14px 5px 32px;
  font-size: 0.84rem;
  color: var(--ink);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  line-height: 1.3;
  cursor: pointer;
}
.settings-toc-link:hover {
  background: #fbf6ee;
  border-left-color: var(--accent);
}
/* Brief flash when a card is jumped to */
.settings-toc-flash {
  animation: tocFlash 1s ease-out;
}
@keyframes tocFlash {
  0%   { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 0   transparent; }
}

/* Phase 5.2 — collapsible Settings cards.
   Every .card inside .settings-content gets a click-to-toggle h3 header.
   Default state is collapsed; click to expand. State persists per-card
   in sessionStorage. The TOC links auto-expand on click. */
.settings-content .card > h3,
.settings-content .card > h2,
.settings-content .card > .space-between > div > h3 {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 30px;
  margin-top: 0;
}
.settings-content .card > h3::after,
.settings-content .card > h2::after,
.settings-content .card > .space-between > div > h3::after {
  content: '▾';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--accent, #8a6b4b);
  transition: transform 0.15s ease;
}
.settings-content .card.is-collapsed > h3::after,
.settings-content .card.is-collapsed > h2::after,
.settings-content .card.is-collapsed > .space-between > div > h3::after {
  content: '▸';
}
.settings-content .card.is-collapsed > *:not(h3):not(h2):not(.space-between) {
  display: none !important;
}
.settings-content .card.is-collapsed > .space-between > .btn-row,
.settings-content .card.is-collapsed > .space-between > *:not(div) {
  display: none !important;
}
.settings-content .card.is-collapsed {
  padding-bottom: 12px;
}
.settings-content {
  min-width: 0;
}
.settings-section-hidden {
  display: none !important;
}

/* ---------- Settings → Automations ---------- */
.automation-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.automation-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  position: relative;
}
.automation-row:hover {
  border-color: var(--accent, #b58a4a);
  background: #fbf7f0;
}
.automation-toggle {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  cursor: pointer;
  accent-color: var(--accent, #b58a4a);
}
.automation-row-text { min-width: 0; }
.automation-row-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 4px;
}
.automation-row-help { line-height: 1.45; }
.automation-row-rec { margin-top: 6px; font-style: italic; }
.automation-saved-indicator {
  font-size: .75rem;
  color: #2b6a47;
  background: #e0f2e9;
  padding: 4px 10px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 200ms ease;
  align-self: center;
  white-space: nowrap;
}
.automation-row.automation-saved .automation-saved-indicator {
  opacity: 1;
}
@media (max-width: 760px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-sidebar {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
  }
  .settings-nav-item {
    width: auto;
    flex: 0 0 auto;
  }
}

/* ---------- Recipe edit page: hero image + overview row ---------- */
.recipe-overview-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  align-items: start;
}
.recipe-hero-image {
  width: 240px;
  height: 240px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: #fbf8f4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.recipe-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.recipe-overview-fields {
  min-width: 0;
}
@media (max-width: 720px) {
  .recipe-overview-row { grid-template-columns: 1fr; }
  .recipe-hero-image { width: 100%; height: auto; aspect-ratio: 1/1; }
}

/* Menu item list thumbnail */
.menu-item-thumb {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fbf8f4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Allergen multi-select chips */
.allergen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.allergen-chip {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  font-size: .9rem;
}
.allergen-chip input { margin-right: 8px; }
.allergen-chip:has(input:checked) {
  background: #fbf6ee;
  border-color: var(--accent);
}

/* Recipe list thumbnail */
.recipe-list-thumb {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fbf8f4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.recipe-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.recipe-list-thumb-placeholder {
  font-size: 1.4rem;
  color: var(--muted);
}

/* ---------- Contact modal — vendor / venue extra section ---------- */
.vendor-fields-header {
  margin-top: 12px;
  margin-bottom: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: Georgia, serif;
  font-size: .95rem;
  color: var(--accent);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- Room edit — venue layout preview tile ---------- */
.venue-layout-preview {
  width: 240px;
  height: 160px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
}
.venue-layout-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.venue-layout-preview .doc-icon {
  font-size: 2.4rem;
  color: var(--muted);
}

/* ---------- Settings: contract templates ---------- */
.merge-vars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 12px;
  background: #fbf8f4;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.merge-var-row code {
  display: inline-block;
  font-size: .8rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 6px;
}
.template-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}

/* ---------- Contract signatures (proposal page) ---------- */
.sig-card {
  flex: 1 1 220px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: #fbf8f4;
  min-height: 130px;
}
.sig-image {
  display: block;
  background: #fff;
  border: 1px dashed var(--line);
  margin-top: 6px;
  max-width: 100%;
  max-height: 90px;
  border-radius: 4px;
}
.sig-empty {
  margin-top: 6px; padding: 18px 12px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 4px;
  text-align: center;
}

/* Signing modal pad */
.sig-pad-wrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fffefb;
  padding: 6px;
}
#sig-pad {
  width: 100%;
  height: 220px;
  background:
    linear-gradient(to bottom, transparent 0, transparent calc(100% - 32px), #c9a27a 100%) no-repeat;
  cursor: crosshair;
  display: block;
  border-radius: 4px;
  touch-action: none; /* keep page from scrolling while you draw on touch */
}
#sig-clear {
  position: absolute;
  top: 8px;
  right: 8px;
}
.signing-terms {
  background: #fffefb;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: .9rem;
  line-height: 1.6;
  max-height: 220px;
  overflow: auto;
}

/* PDF-side signature rendering */
.pdf-sign-filled {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 60px;
}
.pdf-sign-filled img {
  max-height: 60px;
  max-width: 220px;
  object-fit: contain;
  margin-bottom: 4px;
}
.pdf-sign-filled-date {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.pdf-sign-name {
  font-family: Georgia, serif;
  font-size: .95rem;
  margin-bottom: 2px;
}

/* ===================================================================
   Branded PDF preview — Samantha-style compound document
   =================================================================== */

.pdf-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.pdf-doc {
  background: #fff;
  color: var(--ink);
  max-width: 8.5in;
  margin: 0 auto;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  /* Phase 6.42 — Body text size is controlled via Settings → Brand →
     "PDF body text size". The JS render writes `font-size: <Npx>` as an
     inline style on the .pdf-doc when a custom size is set; this line
     just establishes the default the variable falls back to. */
  font-size: var(--pdf-body-size, inherit);
}

.pdf-page {
  padding: 0.85in 0.75in;
  page-break-after: always;
  break-after: page;
  border-bottom: 1px dashed var(--line);  /* visual divider on screen only */
}
.pdf-page:last-of-type { border-bottom: none; }

/* Cover page — full-bleed, centered, serif typography */
.pdf-cover {
  min-height: 9.5in;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background:
    radial-gradient(ellipse at top, #fbf6ee 0%, #fff 60%),
    #fff;
}
.pdf-cover-mark {
  font-family: Georgia, serif;
  font-size: 1rem;
  letter-spacing: .25em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pdf-cover-logo {
  max-height: 96px;
  max-width: 360px;
  object-fit: contain;
  margin-bottom: 14px;
  display: block;
}
.pdf-cover-divider {
  width: 60px;
  height: 1px;
  background: var(--accent);
  margin: 0 auto 28px;
}
.pdf-cover-title {
  font-family: Georgia, serif;
  /* Phase 6.42 — Settings → Brand → "PDF headline size" wins via the
     --pdf-headline-size CSS variable injected on .pdf-doc. Default keeps
     the historical 2.6rem feel when no custom size is set. */
  font-size: var(--pdf-headline-size, 2.6rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 8px;
  font-weight: 400;
}
.pdf-cover-sub {
  font-style: italic;
  color: var(--muted);
  margin-bottom: 24px;
}
.pdf-cover-date {
  font-family: Georgia, serif;
  font-size: 1.2rem;
  margin-bottom: 20px;
}
.pdf-cover-venue {
  margin-bottom: 36px;
}
.pdf-cover-address {
  color: var(--muted);
  font-size: .9rem;
  margin-top: 4px;
}
.pdf-cover-prepared {
  margin-top: 60px;
}
.pdf-cover-foot {
  margin-top: auto;
  padding-top: 60px;
}

/* Section headers across all interior pages */
.pdf-section-head {
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.pdf-section-eyebrow {
  display: inline-block;
  font-family: Georgia, serif;
  font-size: .8rem;
  letter-spacing: .2em;
  color: var(--accent);
  margin-bottom: 6px;
}
.pdf-section-title {
  font-family: Georgia, serif;
  /* Phase 6.42 — Section titles scale with the headline size setting.
     We derive section size as ~70% of the cover headline so changing one
     setting cascades through the whole document hierarchy. */
  font-size: calc(var(--pdf-headline-size, 2.6rem) * 0.7);
  font-weight: 400;
  margin: 0;
  color: var(--ink);
}
.pdf-section-lead {
  margin-top: 8px;
  color: var(--muted);
  font-style: italic;
  max-width: 520px;
}
.pdf-subhead {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  font-weight: 400;
  margin: 24px 0 8px;
}

/* ---------------------------------------------------------------------
   Phase 5.5 — Florist proposal PDF refresh.
   Scoped under .pdf-doc-florist so the venue PDF keeps its existing look.
   These styles mirror client-proposal-mockup.html.
--------------------------------------------------------------------- */
.pdf-doc-florist {
  --flor-accent:   #b87f5a;      /* warm terracotta */
  --flor-accent-2: #8a6a4c;
  --flor-ink-soft: #6b5f54;
  --flor-line:     #e8dfd4;
  --flor-bg:       #faf6f1;
}
/* Cover page — hero photo + ornamental divider with sparkle */
.pdf-doc-florist .pdf-cover {
  padding-bottom: 0;
}
.pdf-doc-florist .pdf-cover-mark {
  color: var(--flor-accent);
  letter-spacing: .4em;
}
.pdf-doc-florist .pdf-cover-title {
  font-style: italic;
  color: var(--ink);
}
.pdf-doc-florist .pdf-cover-ornament {
  margin: 36px auto 32px;
  width: 90px;
  height: 1px;
  background: var(--flor-accent);
  position: relative;
}
.pdf-doc-florist .pdf-cover-ornament::after {
  content: '✦';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 0 10px;
  color: var(--flor-accent);
  font-size: 14px;
}
.pdf-doc-florist .pdf-cover-hero {
  width: 100%;
  max-height: 380px;
  height: 380px;
  margin-top: 40px;
  object-fit: cover;
  display: block;
}

/* "A note from us" cover letter page */
.pdf-doc-florist .pdf-letter-eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--flor-accent);
  margin-bottom: 10px;
}
.pdf-doc-florist .pdf-letter-h {
  font-family: Georgia, serif;
  font-size: 2rem;
  font-style: italic;
  font-weight: 400;
  margin: 0 0 24px;
}
.pdf-doc-florist .pdf-letter-body p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 0 16px;
}
.pdf-doc-florist .pdf-letter-signoff {
  margin-top: 24px;
  font-style: italic;
  color: var(--flor-ink-soft);
}

/* Event details — grid with subtle dotted dividers + palette chips */
.pdf-doc-florist .pdf-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 40px;
  margin-top: 18px;
}
.pdf-doc-florist .pdf-detail {
  padding-bottom: 12px;
  border-bottom: 1px dotted var(--flor-line);
}
.pdf-doc-florist .pdf-detail-lbl {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--flor-ink-soft);
  margin-bottom: 4px;
}
.pdf-doc-florist .pdf-detail-val {
  font-size: 1rem;
}
.pdf-doc-florist .pdf-palette-chips {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.pdf-doc-florist .pdf-palette-chip {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--flor-line);
}

/* Function blocks — the heart of the document */
.pdf-doc-florist .pdf-flor-fn {
  margin-top: 36px;
  page-break-inside: avoid;
}
.pdf-doc-florist .pdf-flor-fn:first-of-type {
  margin-top: 0;
}
.pdf-doc-florist .pdf-flor-fn-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--flor-accent);
}
.pdf-doc-florist .pdf-flor-fn-name {
  font-family: Georgia, serif;
  font-size: 1.8rem;
  font-style: italic;
  font-weight: 400;
  margin: 0;
  line-height: 1.1;
}
.pdf-doc-florist .pdf-flor-fn-when {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--flor-ink-soft);
  text-align: right;
  line-height: 1.7;
  white-space: nowrap;
}
.pdf-doc-florist .pdf-flor-fn-when strong {
  color: var(--ink);
  letter-spacing: .12em;
}
.pdf-doc-florist .pdf-flor-fn-narrative {
  font-style: italic;
  color: var(--flor-ink-soft);
  margin: 0 0 20px;
  font-size: 1.05rem;
}
.pdf-doc-florist .pdf-flor-fn-photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 22px;
  display: block;
}
.pdf-doc-florist .pdf-flor-items {
  display: grid;
  gap: 16px;
}
.pdf-doc-florist .pdf-flor-item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px dotted var(--flor-line);
  align-items: start;
}
.pdf-doc-florist .pdf-flor-item:last-child {
  border-bottom: none;
}
.pdf-doc-florist .pdf-flor-item.no-thumb {
  grid-template-columns: 1fr auto;
}
.pdf-doc-florist .pdf-flor-item-thumb {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--flor-line);
  background: #faf3ec;
}
.pdf-doc-florist .pdf-flor-item-qty {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--flor-ink-soft);
  margin-bottom: 4px;
}
.pdf-doc-florist .pdf-flor-item-name {
  font-size: 1.05rem;
  margin: 0 0 4px;
  font-weight: 500;
}
.pdf-doc-florist .pdf-flor-item-desc {
  color: var(--flor-ink-soft);
  font-size: .92rem;
  line-height: 1.5;
}
.pdf-doc-florist .pdf-flor-item-price {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: .92rem;
  white-space: nowrap;
  text-align: right;
}
.pdf-doc-florist .pdf-flor-fn-subtotal {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--flor-line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--flor-ink-soft);
}
.pdf-doc-florist .pdf-flor-fn-subtotal strong {
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .02em;
}
.pdf-doc-florist .pdf-flor-possibilities {
  margin-top: 22px;
  padding: 18px 22px;
  background: #faf3ec;
  border-left: 3px solid #d4a5a5;
}
.pdf-doc-florist .pdf-flor-possibilities-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--flor-accent-2);
  margin-bottom: 8px;
}
.pdf-doc-florist .pdf-flor-possibilities-note {
  font-size: .88rem;
  font-style: italic;
  color: var(--flor-ink-soft);
  margin: 0 0 12px;
}
.pdf-doc-florist .pdf-flor-poss-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(0,0,0,.06);
  font-size: .95rem;
}
.pdf-doc-florist .pdf-flor-poss-row:last-child {
  border-bottom: none;
}
.pdf-doc-florist .pdf-flor-poss-row .pdf-flor-poss-price {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: .88rem;
  color: var(--flor-ink-soft);
}

/* ---------------------------------------------------------------------
   Phase 5.11 — Venue proposal PDF refresh.
   Scoped under .pdf-doc-venue so it doesn't leak into florist or other
   PDFs. Mirrors venue-proposal-mockup.html: deep forest green + warm
   gold palette, formal facts table layout, per-person headline strip.
--------------------------------------------------------------------- */
.pdf-doc-venue {
  --ven-accent:    #2c4a3e;          /* deep forest green */
  --ven-accent-2:  #1f3a30;
  --ven-gold:      #b08b3f;          /* warm gold */
  --ven-gold-soft: #d4b574;
  --ven-ink-soft:  #5c6661;
  --ven-line:      #dcd6c9;
  --ven-bg:        #f6f4ef;           /* warm stone */
}

/* Cover page — formal, gold ornament */
.pdf-doc-venue .pdf-cover-mark {
  color: var(--ven-accent);
  letter-spacing: .35em;
  font-weight: 500;
}
.pdf-doc-venue .pdf-cover-title {
  font-style: italic;
  color: var(--ven-accent);
}
.pdf-doc-venue .pdf-cover-ornament {
  margin: 36px auto 32px;
  width: 90px;
  height: 1px;
  background: var(--ven-gold);
  position: relative;
}
.pdf-doc-venue .pdf-cover-ornament::after {
  content: '◆';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 0 10px;
  color: var(--ven-gold);
  font-size: 12px;
}
.pdf-doc-venue .pdf-cover-hero {
  width: 100%;
  height: 380px;
  margin-top: 40px;
  object-fit: cover;
  display: block;
}
.pdf-doc-venue .pdf-cover-brand-sub {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--ven-gold);
  margin-bottom: 32px;
}

/* "Welcome" letter page */
.pdf-doc-venue .pdf-letter-eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--ven-gold);
  margin-bottom: 10px;
}
.pdf-doc-venue .pdf-letter-h {
  font-family: Georgia, serif;
  font-size: 2rem;
  font-style: italic;
  font-weight: 400;
  margin: 0 0 24px;
  color: var(--ven-accent);
}
.pdf-doc-venue .pdf-letter-body p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 0 16px;
}
.pdf-doc-venue .pdf-letter-signoff {
  margin-top: 24px;
  font-style: italic;
  color: var(--ven-ink-soft);
}

/* Event facts table — formal contract-style rows */
.pdf-doc-venue .pdf-ven-facts {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
}
.pdf-doc-venue .pdf-ven-facts tr {
  border-bottom: 1px solid var(--ven-line);
}
.pdf-doc-venue .pdf-ven-facts td {
  padding: 14px 0;
  vertical-align: top;
}
.pdf-doc-venue .pdf-ven-facts td:first-child {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ven-ink-soft);
  width: 35%;
}
.pdf-doc-venue .pdf-ven-facts td:last-child {
  font-size: 1rem;
}

/* Per-person investment headline strip — sits between facts + functions */
.pdf-doc-venue .pdf-ven-per-person {
  background: var(--ven-accent);
  color: white;
  padding: 22px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px -64px 0;        /* bleed past section padding */
  border-radius: 0;
}
.pdf-doc-venue .pdf-ven-pp-lbl {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ven-gold-soft);
}
.pdf-doc-venue .pdf-ven-pp-amt {
  font-size: 1.8rem;
  font-style: italic;
  color: white;
  font-family: Georgia, serif;
}
.pdf-doc-venue .pdf-ven-pp-right { text-align: right; }

/* Function blocks — each Function is its own "chapter" */
.pdf-doc-venue .pdf-ven-fn {
  margin-top: 36px;
  page-break-inside: avoid;
}
.pdf-doc-venue .pdf-ven-fn:first-of-type { margin-top: 0; }
.pdf-doc-venue .pdf-ven-fn-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ven-gold);
}
.pdf-doc-venue .pdf-ven-fn-name {
  font-family: Georgia, serif;
  font-size: 1.8rem;
  font-style: italic;
  font-weight: 400;
  margin: 0;
  line-height: 1.1;
  color: var(--ven-accent);
}
.pdf-doc-venue .pdf-ven-fn-when {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ven-ink-soft);
  text-align: right;
  line-height: 1.7;
  white-space: nowrap;
}
.pdf-doc-venue .pdf-ven-fn-when strong {
  color: var(--ven-accent);
  letter-spacing: .12em;
}
.pdf-doc-venue .pdf-ven-fn-photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 22px;
  display: block;
}
.pdf-doc-venue .pdf-ven-fn-narrative {
  font-style: italic;
  color: var(--ven-ink-soft);
  margin: 0 0 18px;
  font-size: 1rem;
}

/* Courses inside a function block — passed hors d'oeuvres, first course, etc. */
.pdf-doc-venue .pdf-ven-course {
  margin-bottom: 22px;
}
.pdf-doc-venue .pdf-ven-course-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--ven-gold);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ven-line);
}
.pdf-doc-venue .pdf-ven-dish {
  padding: 12px 0;
  border-bottom: 1px dotted var(--ven-line);
}
.pdf-doc-venue .pdf-ven-dish:last-child { border-bottom: none; }
.pdf-doc-venue .pdf-ven-dish-name {
  font-size: 1rem;
  font-style: italic;
  margin: 0 0 4px;
  color: var(--ven-accent);
  font-family: Georgia, serif;
}
.pdf-doc-venue .pdf-ven-dish-desc {
  color: var(--ven-ink-soft);
  font-size: .9rem;
  line-height: 1.5;
}
.pdf-doc-venue .pdf-ven-dish-tag {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: rgba(176,139,63,.12);
  color: var(--ven-gold);
  padding: 2px 7px;
  border-radius: 2px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Package-list rows (rentals, bar package, service lines) */
.pdf-doc-venue .pdf-ven-pkg {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px dotted var(--ven-line);
}
.pdf-doc-venue .pdf-ven-pkg:last-child { border-bottom: none; }
.pdf-doc-venue .pdf-ven-pkg-name {
  font-size: 1rem;
  color: var(--ink);
  flex: 1;
}
.pdf-doc-venue .pdf-ven-pkg-meta {
  font-size: .85rem;
  color: var(--ven-ink-soft);
  margin-top: 2px;
}
.pdf-doc-venue .pdf-ven-pkg-price {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: .9rem;
  white-space: nowrap;
  margin-left: 16px;
}
.pdf-doc-venue .pdf-ven-pkg-price .per {
  font-size: 10.5px;
  color: var(--ven-ink-soft);
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* Function subtotal strip */
.pdf-doc-venue .pdf-ven-fn-sub {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--ven-accent);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ven-ink-soft);
}
.pdf-doc-venue .pdf-ven-fn-sub strong {
  color: var(--ven-accent);
  font-family: Georgia, serif;
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .02em;
}
.pdf-doc-venue .pdf-ven-fn-sub-pp {
  font-size: 11px;
  color: var(--ven-ink-soft);
  font-style: italic;
  font-family: Georgia, serif;
  text-transform: none;
  letter-spacing: .04em;
  margin-left: 10px;
}

/* Investment summary — closing chord */
.pdf-doc-venue .pdf-ven-invest {
  background: linear-gradient(180deg, #f7f4ec 0%, #ede7d5 100%);
  padding: 56px 64px;
}
.pdf-doc-venue .pdf-ven-sum {
  margin-top: 30px;
  border-top: 2px solid var(--ven-gold);
  padding-top: 26px;
}
.pdf-doc-venue .pdf-ven-sum-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 1rem;
}
.pdf-doc-venue .pdf-ven-sum-row.sub { color: var(--ven-ink-soft); }
.pdf-doc-venue .pdf-ven-sum-row.calc {
  color: var(--ven-ink-soft);
  font-size: .9rem;
  padding: 4px 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: .03em;
}
.pdf-doc-venue .pdf-ven-sum-row.sub-bold {
  font-weight: 500;
  border-top: 1px solid var(--ven-line);
  margin-top: 6px;
  padding-top: 14px;
}
.pdf-doc-venue .pdf-ven-sum-row.tot {
  border-top: 1px solid var(--ven-accent);
  margin-top: 14px;
  padding-top: 22px;
  font-size: 1.5rem;
  font-style: italic;
  color: var(--ven-accent);
  font-family: Georgia, serif;
}
.pdf-doc-venue .pdf-ven-deposit {
  margin-top: 28px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--ven-accent);
  border-radius: 4px;
  text-align: center;
}
.pdf-doc-venue .pdf-ven-deposit-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ven-gold);
  margin-bottom: 6px;
}
.pdf-doc-venue .pdf-ven-deposit-amt {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--ven-accent);
}
.pdf-doc-venue .pdf-ven-deposit-note {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  color: var(--ven-ink-soft);
  margin-top: 4px;
}
.pdf-doc-venue .pdf-ven-accept {
  margin-top: 36px;
  text-align: center;
}
.pdf-doc-venue .pdf-ven-accept-btn {
  display: inline-block;
  background: var(--ven-accent);
  color: white;
  padding: 16px 44px;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  letter-spacing: .25em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 0;
}
.pdf-doc-venue .pdf-ven-accept-note {
  display: block;
  margin-top: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: var(--ven-ink-soft);
}
@media print {
  .pdf-doc-venue .pdf-ven-accept-btn {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ven-accent);
  }
}

/* Investment summary — closing chord of the document */
.pdf-doc-florist .pdf-flor-invest {
  background: #f7f0e8;
  padding: 56px 64px;
}
.pdf-doc-florist .pdf-flor-sum {
  margin-top: 30px;
  border-top: 1px solid var(--flor-accent);
  padding-top: 26px;
}
.pdf-doc-florist .pdf-flor-sum-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 1rem;
}
.pdf-doc-florist .pdf-flor-sum-row.sub {
  color: var(--flor-ink-soft);
}
.pdf-doc-florist .pdf-flor-sum-row.sub-bold {
  font-weight: 500;
  border-top: 1px solid var(--flor-line);
  margin-top: 6px;
  padding-top: 14px;
}
.pdf-doc-florist .pdf-flor-sum-row.tot {
  border-top: 1px solid var(--flor-accent);
  margin-top: 14px;
  padding-top: 22px;
  font-size: 1.5rem;
  font-style: italic;
}
.pdf-doc-florist .pdf-flor-deposit {
  margin-top: 28px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--flor-accent);
  border-radius: 4px;
  text-align: center;
}
.pdf-doc-florist .pdf-flor-deposit-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--flor-accent);
  margin-bottom: 6px;
}
.pdf-doc-florist .pdf-flor-deposit-amt {
  font-size: 1.2rem;
  font-style: italic;
}
.pdf-doc-florist .pdf-flor-deposit-note {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  color: var(--flor-ink-soft);
  margin-top: 4px;
}
.pdf-doc-florist .pdf-flor-accept {
  margin-top: 36px;
  text-align: center;
}
.pdf-doc-florist .pdf-flor-accept-btn {
  display: inline-block;
  background: var(--flor-accent);
  color: white;
  padding: 16px 44px;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  letter-spacing: .25em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 0;
}
.pdf-doc-florist .pdf-flor-accept-note {
  display: block;
  margin-top: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: var(--flor-ink-soft);
}
/* On print, replace the button with text instructions — clients will sign
   the actual contract, not a button on a printed PDF. */
@media print {
  .pdf-doc-florist .pdf-flor-accept-btn {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--flor-accent);
    padding: 14px 36px;
  }
}

/* Mood board grid */
.pdf-mood-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pdf-mood-tile {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #f6f1e9;
}
.pdf-mood-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* People & Vendors */
.pdf-people-group {
  margin-bottom: 24px;
}
.pdf-people-grouphead {
  font-family: Georgia, serif;
  font-size: 1.05rem;
  color: var(--accent);
  letter-spacing: .04em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  margin-bottom: 10px;
}
.pdf-people-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 18px;
}
.pdf-person {
  break-inside: avoid;
}
.pdf-person-name {
  font-weight: 500;
  margin-bottom: 2px;
}
.pdf-person-role {
  font-style: italic;
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 2px;
}
.pdf-person-meta {
  color: var(--muted);
  font-size: .85rem;
}

/* Event details */
.pdf-details-grid,
.pdf-details-design,
.pdf-pay-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  margin-top: 10px;
}
.pdf-pay-summary {
  grid-template-columns: repeat(4, 1fr);
}
.pdf-details-design {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.pdf-details-note {
  grid-column: 1 / -1;
}
.pdf-label {
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.pdf-value {
  font-size: 1rem;
}

/* PDF — Function header block (Patel-style "Garba / May 23 / Renaissance / Theme" gray bar) */
.pdf-fn-header {
  background: #ececea;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 4px;
  break-inside: avoid;
}
.pdf-fn-name {
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: .02em;
}
.pdf-fn-meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: .9rem;
}
.pdf-fn-theme {
  margin-top: 6px;
  font-family: Georgia, serif;
  font-style: italic;
  color: var(--ink);
}
.pdf-fn-times {
  margin-top: 4px;
}
.pdf-fn-description {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #d8d8d6;
  font-size: .9rem;
  color: var(--ink);
  line-height: 1.6;
}

/* Proposal categories + line items */
.pdf-prop-group {
  margin-bottom: 20px;
  break-inside: avoid;
}
.pdf-prop-grouphead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  color: var(--accent);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  margin-bottom: 6px;
}
.pdf-prop-table {
  width: 100%;
  font-size: .9rem;
  border-collapse: collapse;
}
.pdf-prop-table thead th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: left;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.pdf-prop-table tbody td {
  padding: 8px 6px;
  border-bottom: 1px solid #f0ebe2;
  vertical-align: top;
}
.pdf-prop-table tbody tr:last-child td {
  border-bottom: none;
}
.pdf-item-name {
  font-weight: 500;
}
.pdf-item-desc {
  color: var(--muted);
  font-size: .85rem;
  margin-top: 2px;
}
/* Phase 4.9 — long-form description on its own table row below the line item,
   matching the Karolina Pirog proposal format. */
.pdf-item-desc-row {
  font-size: .85rem;
  color: #555;
  padding: 2px 8px 12px !important;
  border-bottom: 0.5px solid #eee;
  line-height: 1.45;
}

/* Totals block */
.pdf-totals {
  margin-top: 24px;
  margin-left: auto;
  width: 320px;
  font-size: .95rem;
}
.pdf-totals-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 4px 0;
}
.pdf-totals-grand {
  border-top: 2px solid var(--ink);
  margin-top: 6px;
  padding-top: 8px;
  font-size: 1.15rem;
  font-weight: 500;
}

/* Terms + signature */
.pdf-terms {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--ink);
}
.pdf-sign-block {
  margin-top: 50px;
}
.pdf-sign-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 36px;
}
.pdf-sign-line {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 30px;
}

.pdf-foot-mark {
  text-align: center;
  font-family: Georgia, serif;
  font-style: italic;
  color: var(--muted);
  padding: 18px;
  font-size: .85rem;
}

/* Print rules — when actually printing/saving the PDF */
@media print {
  @page {
    size: letter;
    margin: 0;
  }
  body { background: #fff; }
  .site-header, .pdf-toolbar, .no-print { display: none !important; }
  .container { padding: 0; max-width: 100%; }
  .pdf-doc {
    border: none;
    box-shadow: none;
    max-width: 100%;
  }
  .pdf-page {
    border-bottom: none;
    page-break-after: always;
    break-after: page;
  }
  .pdf-page:last-of-type {
    page-break-after: auto;
  }
  .pdf-cover { min-height: 10in; }
  .pdf-foot-mark { display: none; }
}

/* proposal PDF view */
.proposal-view h1 { font-size: 2rem; }
.proposal-view .meta { color: var(--muted); margin-bottom: 16px; }
.proposal-view .totals { margin-top: 14px; max-width: 360px; margin-left: auto; }
.proposal-view .totals .row { grid-template-columns: 2fr 1fr; gap: 6px; padding: 4px 0; }
.proposal-view .totals .row.total { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 8px; font-weight: bold; }

/* ===================================================================== */
/* Hierarchical proposal builder — Phase 5.20 (May 13, 2026)             */
/* ---------------------------------------------------------------------- */
/* Function and Item Category become section headings instead of per-row  */
/* dropdowns. Items live inside Function → Category sections.             */
/* ===================================================================== */

.prop-sections-wrap {
  margin-top: 8px;
}

.prop-fn-section {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 18px;
  background: #fdfaf4;
  overflow: hidden;
}

.prop-fn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(0deg, #f5ecdb, #fbf5e8);
  border-bottom: 1px solid var(--line);
}

.prop-fn-name {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.prop-fn-name .fn-eyebrow {
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.prop-fn-rm,
.prop-cat-rm {
  border: 0;
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 3px;
}

.prop-fn-rm:hover,
.prop-cat-rm:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--danger);
}

.prop-cat-section {
  padding: 6px 16px 12px;
  border-top: 1px dashed #e3d8c2;
}

.prop-cat-section:first-of-type {
  border-top: 0;
}

.prop-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 6px;
}

.prop-cat-name {
  font-weight: 500;
  color: #4d4332;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.prop-cat-items {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 6px;
}

.prop-cat-items th {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.prop-cat-items th.num {
  text-align: right;
}

.prop-cat-items td {
  padding: 6px;
  border-bottom: 1px solid #f0eadd;
  vertical-align: top;
}

.prop-cat-items td.num {
  text-align: right;
}

.prop-cat-items input,
.prop-cat-items select,
.prop-cat-items textarea {
  width: 100%;
}

.prop-cat-items .item-cell {
  min-width: 220px;
}

.prop-cat-items .item-cell select {
  font-size: 0.95rem;
}

.prop-cat-empty {
  padding: 8px 4px;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}

.prop-cat-add {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.prop-cat-add-section,
.prop-add-fn {
  padding: 8px 16px 14px;
}

.prop-add-fn {
  margin-top: 4px;
  text-align: left;
}

.prop-section-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 4px;
  margin-top: 4px;
}

.prop-section-picker select {
  padding: 4px 8px;
}

/* Print: collapse the chrome but keep the structure visible. */
@media print {
  .prop-fn-rm, .prop-cat-rm, .prop-cat-add, .prop-cat-add-section, .prop-add-fn {
    display: none;
  }
}

/* ===================================================================== */
/* Address fields with 📍 Open in Maps button — Phase 5.24 (May 14, 2026) */
/* ===================================================================== */
.addr-with-maps {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.addr-with-maps > input,
.addr-with-maps > textarea {
  flex: 1;
  min-width: 0;
}
.addr-maps-btn {
  white-space: nowrap;
  padding: 6px 10px;
  background: #f5f0e8;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink);
}
.addr-maps-btn:hover {
  background: #ebe2d0;
  border-color: #c9bfa9;
}

/* ===================================================================== */
/* "Possibility" lines (excluded from totals) — Phase 5.25 (May 14, 2026) */
/* When a proposal item has include_in_total=false, this styling makes it */
/* visually obvious in the proposal builder that the line doesn't roll   */
/* up into Profitability or the proposal total.                          */
/* ===================================================================== */
.prop-cat-items tr.is-possibility {
  background: #fafaf6;
}
.prop-cat-items tr.is-possibility td {
  color: #888;
}
.prop-cat-items tr.is-possibility input[type="number"],
.prop-cat-items tr.is-possibility input[type="text"],
.prop-cat-items tr.is-possibility select,
.prop-cat-items tr.is-possibility textarea {
  background: #f7f3ec;
  color: #555;
}
.prop-cat-items tr.is-possibility .prop-poss-badge {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: #fdf6e3;
  color: #a76f1d;
  padding: 2px 7px;
  border-radius: 2px;
  margin-bottom: 4px;
  font-weight: 600;
  border: 1px solid #e7d8a7;
}
.prop-cat-items tr.is-possibility .prop-poss-total {
  text-decoration: line-through;
  color: #aaa;
}

/* ===================================================================== */
/* Drag-and-drop reorder in proposal builder — Phase 5.26 (May 14, 2026) */
/* ===================================================================== */
.prop-cat-items th.drag-col,
.prop-cat-items td.drag-cell {
  width: 28px;
  padding: 6px 4px;
  text-align: center;
  vertical-align: middle;
}
.prop-cat-items .drag-handle {
  display: inline-block;
  cursor: grab;
  color: #bbb;
  font-size: 1.05rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 3px;
  user-select: none;
}
.prop-cat-items .drag-handle:hover {
  color: #555;
  background: #f0e9d8;
}
.prop-cat-items .drag-handle:active { cursor: grabbing; }

/* SortableJS-applied classes during drag */
.prop-cat-items tr.sortable-ghost {
  opacity: 0.35;
  background: #fdf6e3 !important;
}
.prop-cat-items tr.sortable-chosen {
  background: #faf3e0;
}
.prop-cat-items tr.sortable-drag {
  opacity: 0.95;
  background: #fff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* When a tbody is the drop target, show a soft tint */
.prop-cat-section.drop-target {
  background: #f9f3e3;
  outline: 2px dashed #c9a866;
  outline-offset: -4px;
}

/* ===================================================================== */
/* Per-list search box — Phase 5.29 (May 14, 2026)                        */
/* ===================================================================== */
.list-search-wrap {
  margin: 12px 0 10px;
}
.list-search-input {
  width: 100%;
  max-width: 360px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.95rem;
  background: #fff;
}
.list-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 168, 102, 0.18);
}

/* ===================================================================== */
/* Calendar day-cell hover popover — Phase 5.31 (May 14, 2026)            */
/* ===================================================================== */
.calendar-cell { position: relative; }
.calendar-cell.has-events { cursor: pointer; }
.calendar-cell.is-hovered {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 5;
}

#cal-popover {
  position: fixed;
  z-index: 9999;
  min-width: 280px;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  padding: 0;
  display: none;
  font-size: 0.92rem;
  pointer-events: auto;
}
#cal-popover.is-open { display: block; }
.cal-popover-head {
  padding: 10px 14px;
  background: linear-gradient(0deg, #f5ecdb, #fbf5e8);
  border-bottom: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
  font-weight: 600;
}
.cal-popover-head .cal-popover-day-of-week {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 2px;
}
.cal-popover-list {
  max-height: 360px;
  overflow-y: auto;
  padding: 6px 0;
}
.cal-popover-event {
  display: block;
  padding: 8px 14px;
  border-bottom: 1px solid #f5f0e8;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.cal-popover-event:last-child { border-bottom: 0; }
.cal-popover-event:hover { background: #faf3ec; }
.cal-popover-event-time {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--muted);
  margin-right: 6px;
  min-width: 48px;
}
.cal-popover-event-name {
  font-weight: 500;
  color: var(--ink);
}
.cal-popover-event-meta {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--muted);
}
.cal-popover-event .badge {
  font-size: 0.65rem;
  margin-left: 6px;
  vertical-align: middle;
}
.cal-popover-foot {
  padding: 6px 14px;
  border-top: 1px solid var(--line);
  text-align: right;
  font-size: 0.75rem;
  color: var(--muted);
  background: #faf7f0;
  border-radius: 0 0 6px 6px;
}

/* ===================================================================== */
/* Grouped dropdown nav — Phase 5.32 (May 14, 2026)                       */
/* Replaces the 18-tab flat nav with 6 collapsible groups.                */
/* ===================================================================== */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.primary-nav .nav-item,
.primary-nav .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.primary-nav .nav-item:hover,
.primary-nav .nav-toggle:hover,
.primary-nav .nav-group.is-open > .nav-toggle {
  background: #f5ecdb;
  border-color: var(--line);
}
.primary-nav .nav-item.primary {
  font-weight: 600;
}
.primary-nav .nav-toggle .nav-caret {
  font-size: 0.7rem;
  margin-left: 2px;
  color: var(--muted);
}

.nav-group {
  position: relative;
  display: inline-block;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px 0;
  display: none;
  z-index: 1000;
}
.nav-group.is-open > .nav-dropdown { display: block; }
.nav-dropdown a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.nav-dropdown a:hover {
  background: #faf3ec;
}
.nav-dropdown .nav-section-label {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 16px 4px;
  font-weight: 500;
}
.nav-dropdown .nav-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--line);
}

/* Bigger / more prominent search box */
.global-search-wrap {
  flex: 1 1 320px;
  max-width: 460px;
  margin: 0 18px;
}
.global-search-wrap #global-search-input {
  width: 100%;
  padding: 8px 14px;
  font-size: 0.95rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.global-search-wrap #global-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 168, 102, 0.18);
}

/* Brand block gets more presence */
.brand .logo {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand .sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin-left: 6px;
}

/* ===================================================================== */
/* Supabase Auth login overlay — Phase 5.35 (May 14, 2026)                */
/* ===================================================================== */
body.unauthenticated > header.site-header,
body.unauthenticated > main#app,
body.unauthenticated > #modal-root {
  display: none !important;
}
#auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fbf5e8 0%, #f5ecdb 100%);
}
body.unauthenticated #auth-overlay { display: flex; }
.auth-card {
  background: #fff;
  padding: 36px 40px 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  max-width: 380px;
  width: 92%;
  text-align: left;
}
.auth-card h1 {
  margin: 0 0 4px;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
}
.auth-card .auth-sub {
  color: var(--muted);
  margin: 0 0 20px;
  font-size: 0.9rem;
}
.auth-card .field { margin-bottom: 12px; }
.auth-card .field label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.auth-card .field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.95rem;
}
.auth-card .field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 168, 102, 0.18);
}
.auth-card .auth-error {
  background: #fbe3df;
  color: #8a2d1c;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-top: 4px;
  display: none;
}
.auth-card .auth-error.is-visible { display: block; }
.auth-card .auth-submit {
  width: 100%;
  padding: 11px;
  font-size: 0.95rem;
  margin-top: 8px;
}
.auth-card .auth-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #f0eadd;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}
.auth-card .auth-foot a { color: var(--accent); }

/* ===================================================================== */
/* BEO (Banquet Event Order) PDF — Phase 5.37 (May 14, 2026)              */
/* Compact, scannable, print-friendly. Internal operational document      */
/* distributed to kitchen / service / captains / AV.                      */
/* ===================================================================== */
.pdf-beo-doc {
  font-family: var(--body-font, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  color: var(--ink);
  background: #fff;
  /* Phase 5.46 — proper page padding so text doesn't run to the edge.
     Matches .pdf-page's padding so BEO and proposal PDFs look uniform. */
  padding: 0.85in 0.75in;
}
.pdf-beo-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.pdf-beo-head h1 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
}
.pdf-beo-head .pdf-beo-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.pdf-beo-head .pdf-beo-event-date {
  font-size: 1.05rem;
  font-weight: 500;
  text-align: right;
}
.pdf-beo-head .pdf-beo-brand {
  text-align: right;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

.pdf-beo-section {
  margin-bottom: 18px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.pdf-beo-section-title {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  margin: 0 0 8px;
}

.pdf-beo-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.pdf-beo-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px 24px;
}
.pdf-beo-kv {
  font-size: 0.85rem;
}
.pdf-beo-kv-label {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.pdf-beo-kv-value {
  font-weight: 500;
}

.pdf-beo-fn {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: #fdfaf4;
}
.pdf-beo-fn-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.pdf-beo-fn-name {
  font-weight: 600;
  font-size: 1rem;
}
.pdf-beo-fn-when {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: right;
}
.pdf-beo-fn-narrative {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink);
  margin: 4px 0 8px;
}
.pdf-beo-course {
  margin-top: 8px;
}
.pdf-beo-course-name {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 0.5px solid #ddd;
  padding: 4px 0;
  margin-bottom: 4px;
}
.pdf-beo-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  font-size: 0.88rem;
  border-bottom: 0.5px solid #f0eadd;
}
.pdf-beo-line:last-child { border-bottom: 0; }
.pdf-beo-line .pdf-beo-line-name {
  font-weight: 500;
  flex: 1;
}
.pdf-beo-line .pdf-beo-line-meta {
  font-size: 0.75rem;
  color: var(--muted);
  margin-left: 8px;
}
.pdf-beo-line .pdf-beo-line-qty {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  color: var(--muted);
}
.pdf-beo-tag {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: middle;
}
.pdf-beo-tag.allergen { background: #fbe3df; color: #8a2d1c; }
.pdf-beo-tag.diet     { background: #e0f2e9; color: #1e5a36; }

.pdf-beo-tasks {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pdf-beo-tasks li {
  padding: 4px 0;
  font-size: 0.85rem;
  border-bottom: 0.5px solid #f0eadd;
}
.pdf-beo-tasks li:last-child { border-bottom: 0; }
.pdf-beo-tasks li.done {
  color: #888;
  text-decoration: line-through;
}
.pdf-beo-tasks li .pdf-beo-task-due {
  font-size: 0.7rem;
  color: var(--muted);
  float: right;
}

.pdf-beo-notes {
  background: #fdf6e3;
  border-left: 3px solid #d4a017;
  padding: 10px 14px;
  font-size: 0.88rem;
  border-radius: 0 4px 4px 0;
  white-space: pre-wrap;
}
.pdf-beo-notes-author {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 6px;
}

.pdf-beo-signoff {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--ink);
}
.pdf-beo-sig {
  font-size: 0.78rem;
}
.pdf-beo-sig-line {
  border-top: 1px solid var(--ink);
  margin-top: 28px;
  padding-top: 4px;
  text-align: center;
  color: var(--muted);
}

.pdf-beo-foot {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.7rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}

@media print {
  .pdf-beo-doc { font-size: 11pt; }
  .pdf-beo-section { page-break-inside: avoid; }
}

/* ===================================================================== */
/* Invoice PDF — Phase 6.2                                                */
/* Client-facing single-installment invoice. One table row, clean header. */
/* ===================================================================== */
.pdf-invoice-doc {
  font-family: var(--body-font, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  color: var(--ink);
  background: #fff;
  padding: 0.85in 0.75in;
}
.pdf-invoice-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 14px;
  margin-bottom: 22px;
  gap: 24px;
}
.pdf-invoice-logo {
  max-height: 60px;
  max-width: 180px;
  object-fit: contain;
}
.pdf-invoice-wordmark {
  font-family: Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pdf-invoice-tagline {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 4px;
}
.pdf-invoice-meta {
  text-align: right;
}
.pdf-invoice-title {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.pdf-invoice-num {
  font-family: monospace;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.pdf-invoice-dates {
  font-size: 0.85rem;
  line-height: 1.5;
}
.pdf-invoice-dates strong {
  color: var(--muted);
  font-weight: 500;
  display: inline-block;
  min-width: 50px;
}
.pdf-invoice-parties {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 22px;
}
.pdf-invoice-label {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.pdf-invoice-items {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
}
.pdf-invoice-items thead th {
  background: #f7f0e8;
  border-bottom: 1px solid var(--ink);
  text-align: left;
  padding: 10px 12px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.pdf-invoice-items thead th.num { text-align: right; }
.pdf-invoice-items tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid #e7e3df;
  vertical-align: top;
}
.pdf-invoice-items tfoot td {
  padding: 12px 12px;
  font-size: 1rem;
  border-top: 2px solid var(--ink);
}
.pdf-invoice-items tfoot td.right { text-align: right; }
.pdf-invoice-block {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.pdf-invoice-foot {
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: center;
}
@media print {
  .pdf-invoice-doc { font-size: 11pt; }
  .pdf-invoice-head, .pdf-invoice-items, .pdf-invoice-block { page-break-inside: avoid; }
}

/* =====================================================================
   Sprint 3 — Clock-in bar (mobile-first, fixed bottom on phones,
   bottom-right card on desktop). Visible only for PIN-logged users
   in staff roles. Owner hides it by default (can opt in via Settings
   later).
   ===================================================================== */
.clock-in-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--line, #e0d6c2);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.10);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  z-index: 90;
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
}
.clock-in-bar[hidden] { display: none !important; }

.clock-in-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.clock-in-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #c8c0b2;
  flex-shrink: 0;
  transition: background .2s, box-shadow .2s;
}
.clock-in-bar.clocked-in .clock-in-dot {
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
  animation: clockInPulse 2s ease-in-out infinite;
}
@keyframes clockInPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0.08); }
}
.clock-in-label {
  font-weight: 600;
  color: var(--ink, #1c1c1c);
  white-space: nowrap;
}
.clock-in-meta {
  color: var(--ink-soft, #8b7e63);
  font-size: 13px;
  margin-left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clock-in-btn {
  padding: 12px 24px;
  border-radius: 999px;
  border: 0;
  background: #16a34a;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  min-width: 130px;
  min-height: 44px;       /* iOS touch target floor */
  transition: background .15s, transform .1s;
  flex-shrink: 0;
}
.clock-in-btn:hover  { background: #15803d; }
.clock-in-btn:active { transform: scale(0.97); }
.clock-in-bar.clocked-in .clock-in-btn { background: #dc2626; }
.clock-in-bar.clocked-in .clock-in-btn:hover { background: #b91c1c; }
.clock-in-btn:disabled {
  opacity: 0.65;
  cursor: wait;
  background: #8b7e63 !important;
}

/* Owners CAN punch the clock too (a lot of small-business owners do).
   If you'd rather hide it for owner, set body.hide-clock-bar-for-owner on
   load and uncomment the rule below.
   body[data-role="owner"] .clock-in-bar { display: none; } */

/* When the bar is mounted, push #app content up so it doesn't hide content */
body.has-clock-bar #app { padding-bottom: 92px; }

/* Desktop: anchor to TOP-RIGHT, BELOW the brand-header + white separator
   line so it sits cleanly in the page content area instead of floating
   on top of the role chip / Tools button. */
@media (min-width: 900px) {
  .clock-in-bar {
    top: 100px;         /* user-tuned — sits right at the white separator line */
    right: 24px;
    bottom: auto;
    left: auto;
    max-width: 380px;
    border-radius: 16px;
    border: 1px solid var(--line, #e0d6c2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  }
  body.has-clock-bar #app { padding-bottom: 0; padding-top: 6px; }
}

/* Minimize state — collapsed to a small status pill (just the dot + a chevron). */
.clock-in-bar.minimized {
  padding: 8px 12px;
  gap: 8px;
  min-width: 0;
  max-width: 240px;
}
.clock-in-bar.minimized .clock-in-meta,
.clock-in-bar.minimized .clock-in-btn { display: none; }
.clock-in-bar.minimized .clock-in-label { font-size: 13px; }

/* The minimize/expand toggle button */
.clock-in-min {
  background: transparent;
  border: 0;
  font-size: 16px;
  cursor: pointer;
  color: var(--ink-soft, #8b7e63);
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.clock-in-min:hover { background: rgba(0,0,0,0.05); }

/* =====================================================================
   Sprint 4 — Timesheets page (manager view)
   Per-employee × per-day grid with pinned name + issues columns,
   totals strip at the top (Connecteam-style).
   ===================================================================== */
.ts-totals {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--line, #e0d6c2);
  border-radius: 12px;
  font-size: 13px;
}
.ts-stat { display: inline-flex; flex-direction: column; min-width: 96px; }
.ts-stat .lbl { color: var(--ink-soft, #8b7e63); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.ts-stat .val { font-size: 19px; font-weight: 700; color: var(--ink, #1c1c1c); font-feature-settings: 'tnum'; }
.ts-stat.strong .val { color: #1c3978; }
.ts-stat.ts-pay .val { color: #15803d; }
.ts-stat.ts-issues .val { color: #dc2626; }
.ts-stat-sep { color: var(--ink-soft, #8b7e63); font-size: 18px; font-weight: 400; align-self: center; }

.ts-grid-wrap {
  background: #fff;
  border: 1px solid var(--line, #e0d6c2);
  border-radius: 12px;
  overflow-x: auto;
}
.ts-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ts-grid thead th {
  background: #faf6ec;
  border-bottom: 1px solid var(--line, #e0d6c2);
  padding: 10px 10px;
  text-align: center;
  font-weight: 600;
  color: var(--ink-soft, #8b7e63);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ts-grid .ts-name-col, .ts-grid .ts-issues-col {
  position: sticky;
  background: #fff;
  z-index: 2;
}
.ts-grid thead .ts-name-col, .ts-grid thead .ts-issues-col { background: #faf6ec; }
.ts-grid .ts-name-col   { left: 0;    min-width: 180px; text-align: left !important; padding-left: 16px; }
.ts-grid .ts-issues-col { left: 180px; min-width: 70px; border-right: 1px solid var(--line, #e0d6c2); }
.ts-grid thead .ts-name-col, .ts-grid thead .ts-issues-col,
.ts-grid tbody .ts-name-col, .ts-grid tbody .ts-issues-col {
  box-shadow: 2px 0 0 var(--line, #e0d6c2);
}

.ts-grid .ts-dow { font-size: 11px; }
.ts-grid .ts-mmdd { font-size: 13px; font-weight: 700; color: var(--ink, #1c1c1c); margin-top: 2px; }

.ts-grid tbody td {
  border-bottom: 1px solid #f5efe2;
  padding: 8px 10px;
  vertical-align: middle;
}
.ts-grid tbody tr:hover td { background: #fdfbf5; }

.ts-cell {
  text-align: center;
  font-feature-settings: 'tnum';
}
.ts-cell-empty { color: #c8c0b2; }
.ts-cell-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e6f4ea;
  border: 1px solid #b6e0c2;
  color: #14532d;
  padding: 5px 12px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-feature-settings: 'tnum';
  transition: background .15s, border-color .15s;
}
.ts-cell-btn:hover { background: #d3edd9; }
.ts-cell-issue .ts-cell-btn {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #78350f;
}
.ts-cell-issue .ts-cell-btn:hover { background: #fde68a; }
.ts-cell-flag { font-size: 12px; }

.ts-tot-col { text-align: right; padding-right: 14px; font-feature-settings: 'tnum'; }
.ts-pay-col { text-align: right; padding-right: 16px; color: #15803d; font-weight: 600; font-feature-settings: 'tnum'; }

.ts-issue-badge {
  display: inline-block;
  background: #dc2626;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.ts-issue-ok { color: #16a34a; font-size: 16px; }

/* Day detail modal */
.ts-entry-row {
  padding: 14px 0;
  border-bottom: 1px solid #f5efe2;
}
.ts-entry-row:last-child { border-bottom: 0; }
.ts-entry-times {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.ts-entry-times label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--ink-soft, #8b7e63);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ts-entry-times input[type="datetime-local"] {
  padding: 6px 8px;
  border: 1px solid var(--line, #e0d6c2);
  border-radius: 6px;
  font-size: 14px;
  margin-top: 3px;
}
.ts-entry-hrs {
  font-weight: 700;
  font-size: 18px;
  font-feature-settings: 'tnum';
  margin-left: auto;
}
.ts-entry-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ts-status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ts-status-open     { background: #fef3c7; color: #78350f; }
.ts-status-closed   { background: #e0e7ff; color: #1e3a8a; }
.ts-status-approved { background: #d1fae5; color: #065f46; }
.ts-status-rejected { background: #fee2e2; color: #991b1b; }
.ts-status-edited   { background: #fde68a; color: #78350f; }
.ts-issue-chip {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.ts-entry-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Sprint 7 — Tips row inside the day-detail modal */
.ts-entry-tips {
  margin-top: 8px;
  padding: 8px 12px;
  background: #faf6ec;
  border-radius: 6px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.ts-entry-tips label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--ink-soft, #8b7e63);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ts-entry-tips input[type="number"] {
  width: 110px;
  margin-top: 3px;
  padding: 5px 8px;
  border: 1px solid var(--line, #e0d6c2);
  border-radius: 6px;
  font-size: 14px;
  font-feature-settings: 'tnum';
}
.ts-entry-tips .ts-tips-save-btn {
  margin-left: auto;
}

/* Mobile: collapse the totals strip + let the grid scroll horizontally */
@media (max-width: 700px) {
  .ts-totals { gap: 8px; padding: 10px 12px; font-size: 12px; }
  .ts-stat { min-width: 80px; }
  .ts-stat .val { font-size: 16px; }
}

/* Toast (used for geofence warnings + success confirms) */
.clock-toast {
  position: fixed;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%) translateY(10px);
  padding: 12px 22px;
  border-radius: 26px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  z-index: 200;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  max-width: 88vw;
  text-align: center;
}
.clock-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.clock-toast.tone-ok    { background: #16a34a; }
.clock-toast.tone-warn  { background: #d97706; }
.clock-toast.tone-error { background: #dc2626; }
@media (min-width: 900px) {
  /* Toast lives just below the clock-in bar (top-right). */
  .clock-toast { top: 175px; right: 24px; left: auto; bottom: auto; transform: translateY(-10px); }
  .clock-toast.show { transform: translateY(0); }
}