/* Defaults below are Jonathan Creek's brand-skill values (Deep Lake/Slate/
   Copper/Sand/Fog/Mist) -- the first paint before app.js's
   applyPropertyTheme() runs. Every value that differs by property (colors,
   font, header background/pattern/rule, primary button colors, divider
   colors, success color) is re-set on these same custom properties from
   PROPERTIES' theme objects in app.js; only --warn (a warning/in-progress
   amber -- as universal a convention as the red used for errors) is truly
   brand-neutral and never swapped. --good ("pushed"/"done" state) IS
   themed, not a flat universal green -- a stock green read as a jarring,
   unrelated color dropped onto Jonathan Creek's palette, so its own
   --good is Deep Lake itself (the app's own anchor color), per direct
   request. Cedarmore's own --good stays a true green since that's
   already its brand's primary color. */
:root {
  --teal: #7E919A;
  --teal-dark: #12464F;
  --bright-orange: #7E919A;
  --burnt-orange: #12464F;
  --warm-gold: #E1D2C1;
  --mid-gray: #5C7378;
  --ink: #12464F;
  --paper: #E9EAEC;
  --card: #F4F6F6;
  --line: #D3D8DA;
  --good: #12464F;
  --good-bg: #E2E9EA;
  --warn: #b45f06;
  --font-sans: "Montserrat", system-ui, -apple-system, sans-serif;

  /* Filled status-pill colors (Sand/Slate/Copper), per the brand kit's
     tag/badge row reference -- see the .pill rules for how these are
     used. */
  --status-pending-bg: #E1D2C1;
  --status-pending-text: #12464F;
  --status-active-bg: #7E919A;
  --status-active-text: #E9EAEC;
  --status-ready-bg: #945D38;
  --status-ready-text: #E9EAEC;

  /* Header/shell branding -- see the property theme comment above. Copper
     (#945D38) is the palette's warm counterpoint, reserved for exactly
     this spot -- the guide names the header accent bar as "Copper's most
     reliable use." Header text is Fog at ~72% opacity, not a color swatch
     -- keeps Slate (--teal, #7E919A) reserved for actual interactive/
     structural elements instead of spreading it into plain header text. */
  --header-bg: var(--teal-dark);
  --header-accent-text: rgba(233,234,236,.72);
  --header-rule-width: 4px;
  --header-rule: #945D38;
  --header-rule-image: linear-gradient(to right, #945D38 0%, transparent 100%) 1;
  /* Relative to THIS file (css/style.css) -- app.js's applyPropertyTheme()
     overrides this via an inline style on <html> instead, which resolves
     relative URLs against the document (index.html) rather than this
     stylesheet, so its own copy of this path is "assets/..." (no "../"). */
  --header-pattern: url("../assets/jonathan-creek-ripple.svg");
  --btn-primary-bg: var(--teal-dark);
  --btn-primary-bg-hover: var(--teal);
  --btn-primary-text: #E9EAEC;

  /* Dot-and-rule divider (both brand skills' "used to open a body
     section" element) -- see .body-divider below. */
  --divider-dot-color: var(--teal);
  --divider-line-color: var(--line);
  --divider-dot-size: 7px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.45;
}
h1, h2, h3 { font-family: var(--font-sans); font-weight: 900; margin: 0 0 .3em; line-height: 1.15; }
button { font-family: var(--font-sans); cursor: pointer; }
body.modal-open { overflow: hidden; }

/* ---------- Login ---------- */
.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--header-bg);
  background-image: var(--header-pattern);
  background-repeat: no-repeat;
  background-position: top right;
}
.login-card {
  background: var(--card); border-radius: 20px; padding: 40px 36px;
  width: 360px; max-width: calc(100vw - 32px); text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.login-card h1 { font-size: 26px; color: var(--teal); }
.login-card .page-sub { color: var(--mid-gray); margin: 0 0 20px; font-size: 14px; }
.login-card label { display: block; text-align: left; font-size: 13px; font-weight: 700; margin: 14px 0 4px; }
.login-card input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 15px; font-family: var(--font-sans);
}
.login-error { color: #b42318; font-size: 13px; min-height: 18px; margin-top: 8px; }
#app-shell { display: none; }
#app-shell.visible { display: block; }
#login-screen.hidden { display: none; }

/* ---------- Shell ---------- */
.topbar {
  background: var(--header-bg); color: #fff;
  background-image: var(--header-pattern);
  background-repeat: no-repeat;
  background-position: top right;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 28px;
  position: relative; overflow: hidden;
  border-bottom-width: var(--header-rule-width); border-bottom-style: solid; border-bottom-color: var(--header-rule);
  border-image: var(--header-rule-image);
}
.topbar .brand { font-weight: 900; font-size: 20px; }
.topbar .brand small { display: block; font-weight: 500; font-size: 11px; color: var(--header-accent-text); letter-spacing: .08em; text-transform: uppercase; }
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 13px; color: var(--header-accent-text); opacity: .75; margin-right: 4px; }
.property-switch {
  display: flex; background: rgba(255,255,255,.14); border-radius: 10px; padding: 3px; gap: 2px;
}
.property-switch button {
  border: 0; border-radius: 8px; padding: 7px 14px; font-weight: 700; font-size: 13px;
  color: #fff; background: transparent; opacity: .75; cursor: pointer; font-family: var(--font-sans);
}
.property-switch button:hover { opacity: 1; }
.property-switch button.active { background: rgba(255,255,255,.95); color: var(--teal); opacity: 1; }
.btn {
  border: 0; border-radius: 10px; padding: 10px 16px;
  font-weight: 700; font-size: 14px; color: #fff; background: var(--teal-dark);
}
.btn:hover { opacity: .9; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* The app's primary-action color -- Deep Lake/Slate for Jonathan
   Creek, Espresso/Cedarmore Green for Cedarmore (each brand's own button
   spec: a dark anchor background, hover to that brand's signature
   accent -- not either brand's "use sparingly" warm accent, Copper/
   Terracotta) -- see --btn-primary-* in PROPERTIES' theme objects
   (app.js). All-caps + wide tracking matches both brands' own button spec. */
.btn-orange { background: var(--btn-primary-bg); color: var(--btn-primary-text); text-transform: uppercase; letter-spacing: .04em; }
.btn-orange:hover { background: var(--btn-primary-bg-hover); }
.btn-ghost { background: rgba(255,255,255,.14); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.24); }
.btn-outline { background: var(--card); color: var(--teal); border: 1px solid var(--line); }
.btn-outline:hover { background: #eef1f1; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }

/* Each property's logo, swapped by applyPropertyTheme() (app.js) --
   already-dark-grounded lockups (both brands' own guides: the logo
   "already carries its own dark ground" / "white lettering renders
   correctly as-is"), so no reversed/light variant is needed on the dark
   header or on the login screen's teal/espresso background. */
.property-logo { display: block; }
.topbar-logo { height: 40px; width: auto; }
.login-logo { height: 64px; width: auto; margin: 0 auto 14px; }

/* Dot-and-rule divider -- both brand skills' signature element for
   opening a body section: a small accent-colored dot followed by a
   full-width 1px divider line. */
.body-divider { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.body-divider::before {
  content: ""; flex-shrink: 0; border-radius: 50%;
  width: var(--divider-dot-size); height: var(--divider-dot-size);
  background: var(--divider-dot-color);
}
.body-divider::after { content: ""; flex: 1; height: 1px; background: var(--divider-line-color); }

.wrap { max-width: 1400px; margin: 0 auto; padding: 28px; }

/* ---------- Chunky card grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}
.card {
  background: var(--card); border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(33,40,43,.05);
  overflow: hidden; display: flex; flex-direction: column;
}
.upload-card {
  border: 2px dashed var(--line); border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 36px 20px; text-align: center; min-height: 220px;
  background: #fff; color: var(--mid-gray); transition: border-color .15s, background .15s;
}
.upload-card.dragover { border-color: var(--bright-orange); background: #fff6ee; }
.upload-card.disabled { opacity: .55; pointer-events: none; }
.upload-card .icon { font-size: 38px; }
.upload-card strong { color: var(--teal); font-size: 16px; }
.upload-card input[type=file] { display: none; }

.snap-card { padding: 22px; min-height: 220px; position: relative; }
.card-delete {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--mid-gray); font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.card-delete:hover { background: #fbe9e7; color: #b42318; border-color: #f0b4ae; }
.snap-card .accent { height: 6px; margin: -22px -22px 16px; background: var(--bright-orange); }
.snap-card.status-error .accent { background: #b42318; }
.snap-card.status-parsing .accent { background: var(--warm-gold); }
.snap-card.status-parsed .accent { background: var(--bright-orange); }
.snap-card.status-pushed .accent { background: var(--good); }
.snap-card h3 { font-size: 20px; color: var(--teal); }
.snap-card .sub { color: var(--mid-gray); font-size: 13.5px; margin-bottom: 12px; }
.snap-card .filename { font-size: 12px; color: var(--mid-gray); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); word-break: break-all; }
.snap-card .actions { margin-top: 12px; display: flex; gap: 8px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  background: #eef1f1; color: var(--mid-gray); width: fit-content;
}
/* Filled badges, per the Jonathan Creek brand kit's tag/badge row
   reference (Sand/Slate/Copper/Deep Lake, each with light or dark text
   for contrast) -- Cedarmore's own --status-* values below just reproduce
   its previous pale-background pill look unchanged, since this request
   was specifically about Jonathan Creek's tags. */
.pill.uploaded { background: var(--status-pending-bg); color: var(--status-pending-text); }
.pill.parsing { background: var(--status-active-bg); color: var(--status-active-text); }
.pill.parsed { background: var(--status-ready-bg); color: var(--status-ready-text); }
.pill.pushed { background: var(--good); color: var(--btn-primary-text); }
.pill.error { background: #fbe9e7; color: #b42318; }

.empty-state {
  grid-column: 1 / -1; text-align: center; color: var(--mid-gray);
  padding: 40px 20px; font-size: 14.5px;
}

/* ---------- Detail overlay ---------- */
.detail-back {
  position: fixed; inset: 0; background: rgba(20,28,31,.55);
  display: none; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 40px 16px; z-index: 50;
}
.detail-back.open { display: flex; }
.detail {
  background: var(--paper); border-radius: 20px; width: 100%; max-width: 980px;
  padding: 0 0 32px; box-shadow: 0 30px 70px rgba(0,0,0,.35);
}
.detail-head {
  background: var(--header-bg); color: #fff; padding: 24px 32px; border-radius: 20px 20px 0 0;
  background-image: var(--header-pattern);
  background-repeat: no-repeat;
  background-position: top right;
  display: flex; align-items: flex-start; gap: 16px;
  position: relative; overflow: hidden;
  border-bottom-width: var(--header-rule-width); border-bottom-style: solid; border-bottom-color: var(--header-rule);
  border-image: var(--header-rule-image);
}
.detail-head .titles { flex: 1; }
.detail-head h2 { font-size: 24px; margin: 0 0 4px; }
.detail-head .sub { color: var(--header-accent-text); font-size: 13.5px; font-weight: 700; }
.detail-head .close-btn {
  background: rgba(255,255,255,.15); border: 0; color: #fff; border-radius: 10px;
  width: 34px; height: 34px; font-size: 16px; font-weight: 700;
}
.detail-body { padding: 24px 32px 0; }
.detail-wide { max-width: 1140px; }

/* Left nav + one panel at a time -- the weekend detail overlay used to be a
   single long scroll through group summaries, the scheduler, the PDF
   preview, and the Asana preview all stacked; now only one shows at once. */
.detail-layout { display: flex; align-items: flex-start; min-height: 320px; }
.detail-nav {
  flex-shrink: 0; width: 200px; padding: 20px 0; border-right: 1px solid var(--line);
  position: sticky; top: 0; display: flex; flex-direction: column;
}
.detail-nav-item {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 13px 22px; font-family: var(--font-sans); font-weight: 700; font-size: 13.5px;
  color: var(--mid-gray); border-left: 3px solid transparent; cursor: pointer;
}
.detail-nav-item:hover { background: #eef1f1; color: var(--ink); }
.detail-nav-item.active { color: var(--teal); background: #eef6f8; border-left-color: var(--bright-orange); }
.detail-panels { flex: 1; min-width: 0; padding: 24px 32px; }
.detail-panel[hidden] { display: none; }

.flags {
  background: #fdf1de; border: 1px solid var(--warm-gold); border-radius: 14px;
  padding: 14px 18px; margin-bottom: 22px;
}
.flags h4 { margin: 0 0 8px; font-size: 13px; color: var(--warn); text-transform: uppercase; letter-spacing: .04em; }
.flags ul { margin: 0; padding-left: 20px; font-size: 13.5px; }
.flags li { margin-bottom: 4px; }

.edits-made { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--warm-gold); }
.edits-made h5 { margin: 0 0 6px; font-size: 12px; color: var(--warn); text-transform: uppercase; letter-spacing: .04em; }
.edits-made ul { margin: 0; padding-left: 20px; font-size: 13px; }
.edits-made li { margin-bottom: 4px; }
.revert-link {
  background: none; border: 0; padding: 0; margin: 0; color: var(--teal); text-decoration: underline;
  cursor: pointer; font-size: 13px; font-weight: 700;
}
.revert-link:hover { color: var(--teal-dark); }

.sections-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-bottom: 26px;
}
.section-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
}
.section-card h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--teal); margin-bottom: 0; }
.section-card ul { margin: 0; padding-left: 18px; font-size: 14px; }
.section-card li { margin-bottom: 4px; }
.section-card p { margin: 0; font-size: 14px; }
.section-card.empty { color: var(--mid-gray); font-style: italic; }
.section-card.edited { border-color: var(--warm-gold); }

.section-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.section-card-head h4 { flex: 1; }
.edited-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  color: var(--warn); background: #fdf1de; border: 1px solid var(--warm-gold);
  border-radius: 6px; padding: 2px 6px; white-space: nowrap;
}
.card-edit-btn {
  background: none; border: 0; cursor: pointer; color: var(--mid-gray); font-size: 14px;
  padding: 2px 6px; border-radius: 6px; line-height: 1.4; flex-shrink: 0;
}
.card-edit-btn:hover { background: #eef1f1; color: var(--teal); }
.section-card-view input[type=text], .section-card-view textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  font-family: var(--font-sans); font-size: 14px; resize: vertical; box-sizing: border-box;
}
.card-edit-hint { margin: 4px 0 0; font-size: 11.5px; color: var(--mid-gray); font-style: italic; }
.card-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
.card-revert-btn { margin-top: 10px; }

.task-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px;
}
.task-panel .task-panel-head { display: flex; align-items: center; margin-bottom: 14px; gap: 10px; }
.task-panel .task-panel-head h4 { margin: 0; font-size: 15px; color: var(--teal); flex: 1; }
.task-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.task-row:last-of-type { border-bottom: 0; }
.task-row input[type=checkbox] { margin-top: 12px; width: 18px; height: 18px; flex-shrink: 0; }
.task-row .task-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.task-row input[type=text], .task-row textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  font-family: var(--font-sans); font-size: 14px;
}
.task-row .task-title { font-weight: 700; }
.task-row textarea { resize: vertical; min-height: 34px; font-size: 13px; color: var(--mid-gray); }
.task-row .section-tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mid-gray);
  font-weight: 700;
}
.task-row .remove-task { align-self: flex-start; }

.pending-file-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.pending-file-row:last-child { border-bottom: 0; }
.pending-file-row .file-status { color: var(--mid-gray); font-size: 12.5px; }
/* An <input type=color>, styled to still read as a plain round swatch --
   clicking it opens the browser's native color picker to edit that
   preset's color in place, instead of only being settable at creation. */
input.preset-swatch {
  -webkit-appearance: none; appearance: none; display: inline-block;
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15);
  padding: 0; cursor: pointer; overflow: hidden; flex-shrink: 0;
}
input.preset-swatch::-webkit-color-swatch-wrapper { padding: 0; }
input.preset-swatch::-webkit-color-swatch { border: none; border-radius: 50%; }
input.preset-swatch::-moz-color-swatch { border: none; border-radius: 50%; }

.group-block {
  border: 1px solid var(--line); border-radius: 14px; margin-bottom: 16px;
  overflow: hidden; background: var(--card);
}
.group-block summary {
  list-style: none; cursor: pointer; padding: 14px 18px;
  display: flex; align-items: center; gap: 14px; background: #f9fafa;
}
.group-block summary::-webkit-details-marker { display: none; }
.group-block summary::before { content: "▸"; color: var(--mid-gray); transition: transform .15s; flex-shrink: 0; }
.group-block[open] summary::before { transform: rotate(90deg); }
.group-block .group-name { font-weight: 900; color: var(--teal); font-size: 16px; }
.group-block .group-sub { color: var(--mid-gray); font-size: 13px; flex: 1; }
.group-block .group-body { padding: 18px; }

.group-photos { margin-bottom: 20px; }
.group-photos h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--teal); margin: 0 0 8px; }
.photo-thumb-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.photo-thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #f1f2f2; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.photo-thumb-remove {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0;
  background: rgba(20,28,31,.65); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center;
}
.photo-thumb-remove:hover { background: #b42318; }

/* ---------- Staff Duty Schedule ---------- */
.staff-schedule { margin-top: 22px; }
.staff-schedule-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.staff-schedule-head .titles { flex: 1; }
.staff-schedule-head h3 { margin: 0; font-size: 15px; color: var(--ink); }
.staff-schedule-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--mid-gray); }

.staff-schedule-roster {
  border: 1px solid var(--line); background: var(--card); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 16px;
}
.staff-schedule-roster h4 { margin: 0; font-size: 13.5px; color: var(--ink); }
.staff-schedule-roster p { margin: 4px 0 10px; font-size: 12.5px; color: var(--mid-gray); }
.roster-grid-wrap { overflow-x: auto; margin-bottom: 10px; }
.roster-grid { border-collapse: collapse; font-size: 13px; }
.roster-grid th, .roster-grid td { border: 1px solid var(--line); padding: 6px 10px; }
.roster-grid .row-label-cell { position: sticky; left: 0; background: var(--card); z-index: 1; min-width: 130px; }
.roster-grid th.row-label-cell { background: #f9fafa; }
.roster-grid input[type=text] {
  border: 0; background: transparent; padding: 4px; font-size: 13px; font-weight: 700;
  width: 130px; font-family: var(--font-sans); box-sizing: border-box;
}
.roster-grid input[type=text]:focus { background: #eef6f8; outline: none; }
.roster-grid th:not(.row-label-cell) { font-weight: 700; color: var(--teal); text-align: center; font-size: 12px; }
.roster-check-cell { text-align: center; }
.roster-check-cell input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; }
.roster-all-weekend-cell { background: #fdf1de; border-right: 2px solid var(--warm-gold) !important; }

.schedule-day {
  border: 1px solid var(--line); border-radius: 14px; margin-bottom: 18px;
  background: var(--card); overflow: hidden;
}
.schedule-day-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: #f9fafa; border-bottom: 1px solid var(--line);
}
.schedule-day-head input[type=text] {
  font-weight: 900; font-size: 15px; color: var(--teal); border: 1px solid transparent;
  border-radius: 6px; padding: 5px 7px; background: transparent; font-family: var(--font-sans);
}
.schedule-day-head input[type=text]:hover, .schedule-day-head input[type=text]:focus {
  border-color: var(--line); background: #fff; outline: none;
}
.schedule-day-actions { margin-left: auto; }
.schedule-day-head.clickable { cursor: pointer; }
.schedule-day-head.clickable:hover { background: #f1f4f4; }

/* Each day is its own independently-scrolling pane (both axes) rather than
   just growing the whole page tall -- that's what lets the frozen header/
   group rows and the frozen name column actually mean something: there has
   to be a bounded scroll area for something to stay pinned inside of. */
.schedule-grid-wrap { overflow: auto; max-height: 60vh; padding: 4px 14px 14px; }
.schedule-grid { border-collapse: collapse; font-size: 13px; }
.schedule-grid th, .schedule-grid td { border: 1px solid var(--line); padding: 0; }
.schedule-grid .row-label-cell {
  position: sticky; left: 0; background: var(--card); z-index: 1;
  min-width: 140px; display: flex; align-items: center; gap: 2px;
}
.schedule-grid th.row-label-cell { background: #f9fafa; }
.schedule-grid .group-row .row-label-cell { background: #fdf1de; }
.schedule-grid .group-row td { background: #fffaf0; }
/* The slot-header row and every group row underneath it (see
   applyScheduleStickyOffsets in app.js, which sets each one's `top` from
   its real rendered height) stay pinned to the top of .schedule-grid-wrap
   as the staff rows below scroll past -- z-index above the plain
   left-sticky-only name column so a scrolling staff row's own name cell
   never paints over the frozen band, and an explicit background on every
   plain (non-group) header cell so scrolling text doesn't show through it. */
.schedule-grid > tr:first-child > th { background: #f9fafa; }
.schedule-grid tr.schedule-row-sticky { position: sticky; z-index: 2; }
.schedule-grid input[type=text] {
  border: 0; background: transparent; padding: 8px; font-size: 13px; width: 78px;
  font-family: var(--font-sans); box-sizing: border-box; text-align: center;
  /* A slot is often too narrow for its own text ("Sunday Breakfast" in a
     single half-hour column) -- an ellipsis makes it visually obvious
     there's more to see, and title (set in JS, kept live while typing)
     surfaces the full text on hover without needing to click in. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A merged (colspan) cell's <td> is as wide as all the slots it covers --
   the input just needs to fill that td, not keep the single-slot width
   above, or a multi-hour block would look like it's missing its label. */
.schedule-grid td input[type=text] { width: 100%; }
.schedule-grid .row-label-cell input[type=text] { font-weight: 700; width: 130px; text-align: left; }
.schedule-grid .slot-header { vertical-align: middle; }
.schedule-grid .slot-header input[type=text] { width: 78px; font-weight: 700; color: var(--teal); }
.schedule-grid input[type=text]:focus { background: #eef6f8; outline: none; }
.schedule-remove-btn {
  background: none; border: 0; color: var(--mid-gray); cursor: pointer; font-size: 11px;
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
}
.schedule-remove-btn:hover { background: #fbe9e7; color: #b42318; }
.schedule-add-row-btn { margin: 0 14px 14px 0; }
.schedule-empty { color: var(--mid-gray); font-style: italic; padding: 10px 2px 20px; }

/* Shift+click range selection -- !important so this stays visible even on
   a cell that's already colored by a matching Duty Preset (an inline style,
   which normally beats a stylesheet class, loses to an !important rule). */
.schedule-grid td.cell-selected { background: rgba(241, 133, 68, 0.28) !important; box-shadow: inset 0 0 0 2px var(--bright-orange); }

.selection-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 14px; margin: 0 14px 14px; background: #eef6f8;
  border: 1px solid var(--line); border-radius: 10px;
}
.selection-count { font-weight: 700; font-size: 12.5px; color: var(--teal); margin-right: 4px; }
.selection-preset-btn {
  border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 700; color: var(--ink); font-family: var(--font-sans); cursor: pointer;
}
.selection-preset-btn.active { box-shadow: inset 0 0 0 2px var(--teal-dark); }

.roster-bulk-toolbar {
  display: none; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: 12px; background: #eef6f8;
  border: 1px solid var(--line); border-radius: 10px;
}

.btn-outline.active { background: var(--teal); color: #fff; border-color: var(--teal); }

.roster-bulk-add-panel {
  margin-top: 12px; padding: 14px; max-width: 420px;
  background: #fbfbfa; border: 1px solid var(--line); border-radius: 10px;
}
.roster-bulk-add-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.roster-bulk-add-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.roster-bulk-add-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; padding: 3px 0; }
.roster-bulk-add-footer { display: flex; gap: 10px; }
.selection-toolbar input[type=text] {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--font-sans); font-size: 13px; width: 140px;
}
.selection-chips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.selection-chip {
  display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 4px 4px 10px; font-size: 12px; font-weight: 700; color: var(--ink);
}
.selection-chip button {
  background: none; border: 0; color: var(--mid-gray); cursor: pointer; font-size: 10px;
  width: 18px; height: 18px; border-radius: 50%; margin-left: 2px;
}
.selection-chip button:hover { background: #fbe9e7; color: #b42318; }

/* ---------- Day pop-out ---------- */
.day-popout-overlay {
  position: fixed; inset: 0; background: rgba(20, 24, 28, 0.55);
  display: flex; align-items: center; justify-content: center; z-index: 250; padding: 20px;
}
.day-popout-box {
  background: var(--paper); border-radius: 16px; width: 100%; max-width: 1400px;
  max-height: 92vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 20px 24px 24px;
}
.day-popout-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.day-popout-head h3 { margin: 0; font-size: 16px; color: var(--teal); }
.day-popout-box .schedule-day { margin-bottom: 0; }
.day-popout-box .schedule-day-head { cursor: default; }

/* ---------- Photo lightbox -- click any group-leader thumbnail ---------- */
.photo-lightbox-overlay {
  position: fixed; inset: 0; background: rgba(10, 12, 14, 0.85);
  display: flex; align-items: center; justify-content: center; z-index: 300; padding: 30px;
  cursor: zoom-out;
}
.photo-lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default; }
.photo-lightbox-close {
  position: fixed; top: 20px; right: 24px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.4); font-size: 16px;
}
.photo-lightbox-close:hover { background: rgba(255,255,255,.3); }

/* ---------- "Needs Scheduling" pending items + placement modal ---------- */
.schedule-pending {
  border: 1px solid #f0d199; background: #fffaf0; border-radius: 12px;
  padding: 12px 16px; margin-bottom: 16px;
}
.schedule-pending h4 { margin: 0; font-size: 13.5px; color: var(--ink); }
.schedule-pending p { margin: 4px 0 10px; font-size: 12.5px; color: var(--mid-gray); }
.schedule-pending-list { display: flex; flex-wrap: wrap; gap: 8px; }
.schedule-pending-item {
  border: 1px solid #e8b84b; background: #fff; color: var(--ink); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; cursor: pointer; font-family: var(--font-sans);
}
.schedule-pending-item:hover { background: #fdf1de; }

.schedule-place-overlay {
  position: fixed; inset: 0; background: rgba(20, 24, 28, 0.45);
  display: flex; align-items: center; justify-content: center; z-index: 200;
}
.schedule-place-box {
  background: #fff; border-radius: 14px; padding: 22px; width: 320px;
  max-width: 90vw; box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.schedule-place-box h4 { margin: 0 0 6px; font-size: 15px; color: var(--ink); }
.schedule-place-box p { margin: 0 0 14px; font-size: 12.5px; color: var(--mid-gray); }
.schedule-place-box label {
  display: block; font-weight: 700; font-size: 12.5px; margin-bottom: 12px; color: var(--ink);
}
.schedule-place-box label select, .schedule-place-box label input[type=text] {
  display: block; width: 100%; margin-top: 5px; padding: 8px 10px; font-weight: 400;
  border: 1px solid var(--line); border-radius: 8px; font-family: var(--font-sans); font-size: 14px;
  box-sizing: border-box;
}
.schedule-place-error { color: #b42318; font-size: 12.5px; min-height: 16px; margin-bottom: 6px; }
.schedule-place-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* ---------- One-Sheet PDF preview ---------- */
.pdf-preview {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; margin-top: 22px;
}
.pdf-preview-head {
  padding: 16px 20px 14px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 16px;
}
.pdf-preview-head .titles { flex: 1; }
.pdf-preview-head h3 { margin: 0; font-size: 15px; color: var(--ink); }
.pdf-preview-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--mid-gray); }

.pdf-subtitle { padding: 12px 20px 0; font-size: 12.5px; font-style: italic; color: var(--mid-gray); }

.pdf-swatch-row { display: flex; flex-wrap: wrap; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #fafbfb; }
.pdf-swatch { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.pdf-swatch input[type=color] { width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 6px; padding: 0; cursor: pointer; }

.pdf-group-row { display: flex; gap: 10px; padding: 10px 20px; border-top: 1px solid #f1f2f2; }
.pdf-group-row .pdf-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
.pdf-group-info strong { font-size: 13.5px; color: var(--ink); }
.pdf-sub { font-size: 12px; color: var(--mid-gray); margin-top: 2px; }
.pdf-prayer { font-size: 12px; font-style: italic; color: var(--ink); margin-top: 4px; }
.pdf-photo-row { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.pdf-photo-thumb { width: 52px; height: 65px; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); background: #f1f2f2; cursor: zoom-in; }

.pdf-section-label {
  padding: 10px 20px 6px; border-top: 1px solid var(--line); background: #fafbfb;
  font-weight: 800; font-size: 13px; color: var(--teal); text-transform: uppercase; letter-spacing: .03em;
}

.pdf-resource-row { display: flex; align-items: center; gap: 8px; padding: 6px 20px; font-size: 13px; border-top: 1px solid #f7f8f8; }
.pdf-resource-row.plain { padding-left: 20px; }
.pdf-dot.sm { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.pdf-group-tag { font-weight: 700; }

/* ---------- Asana-style task preview ---------- */
.asana-preview {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; margin-top: 8px;
}
.asana-preview-head {
  padding: 16px 20px 14px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 16px;
}
.asana-preview-head .titles { flex: 1; }
.asana-preview-head h3 { margin: 0; font-size: 15px; color: var(--ink); }
.asana-preview-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--mid-gray); }
.asana-empty { padding: 18px 20px; color: var(--mid-gray); font-size: 13.5px; }

.asana-breakdown { padding: 8px 20px 4px 46px; }
.asana-breakdown-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px;
}
.asana-breakdown-row .subtask-arrow { color: var(--mid-gray); flex-shrink: 0; font-size: 13px; }
.asana-breakdown-row .bd-group {
  font-weight: 700; color: var(--teal); flex-shrink: 0; width: 150px;
  border: 1px solid transparent; background: transparent; font-family: var(--font-sans);
  font-size: 13px; padding: 3px 5px; border-radius: 4px;
}
.asana-breakdown-row .bd-detail {
  flex: 1; border: 1px solid transparent; background: transparent; font-family: var(--font-sans);
  font-size: 13px; color: var(--ink); padding: 3px 5px; border-radius: 4px; min-width: 0;
}
.asana-breakdown-row .bd-group:focus,
.asana-breakdown-row .bd-detail:focus { background: #eef1f1; border-color: var(--line); outline: none; }
.asana-task-notes {
  margin: 4px 20px 8px 46px; font-size: 12.5px; color: var(--mid-gray);
  border: 1px solid transparent; background: transparent; font-family: var(--font-sans);
  padding: 3px 5px; border-radius: 4px; width: calc(100% - 66px); resize: vertical;
}
.asana-task-notes:focus { background: #eef1f1; border-color: var(--line); outline: none; }

.asana-meta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 20px 8px 46px;
}
.asana-tag-group { display: inline-flex; align-items: center; gap: 5px; }
.asana-tag-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--mid-gray);
}
/* Filled per resource category, using these pills' own guide colors --
   Building on the anchor color, Housing on the warm contrast color,
   Meeting Space on the signature accent, Programming on the pale warm
   neutral (dark text, since that background is the lightest of the four). */
.asana-tag-chip {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; padding: 2px 9px;
}
.asana-tag-chip.cat-building { background: var(--ink); color: var(--btn-primary-text); }
.asana-tag-chip.cat-housing { background: var(--header-rule); color: var(--btn-primary-text); }
.asana-tag-chip.cat-meeting-space { background: var(--teal); color: var(--btn-primary-text); }
.asana-tag-chip.cat-programming { background: var(--warm-gold); color: var(--ink); }
.asana-due-date { font-size: 11.5px; color: var(--mid-gray); font-weight: 600; }

.asana-snapshot-preview {
  margin: 4px 20px 14px 46px; padding: 14px 16px; background: #fafbfb;
  border: 1px solid var(--line); border-radius: 10px; font-size: 13px;
  max-height: 280px; overflow-y: auto;
}
.asana-snapshot-preview h1 { font-size: 15px; margin: 0 0 8px; color: var(--teal); }
.asana-snapshot-preview h2 { font-size: 13px; margin: 10px 0 6px; color: var(--ink); font-weight: 800; }
.asana-snapshot-preview h1:first-child, .asana-snapshot-preview h2:first-child { margin-top: 0; }
.asana-snapshot-preview ul { margin: 0 0 4px; padding-left: 20px; }
.asana-snapshot-preview li { margin-bottom: 3px; }

.asana-section { border-bottom: 1px solid var(--line); }
.asana-section:last-child { border-bottom: 0; }
.asana-section-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 20px;
  cursor: pointer; user-select: none; background: #fafbfb;
}
.asana-section-head .chevron { color: var(--mid-gray); font-size: 10px; transition: transform .15s; width: 10px; }
.asana-section.collapsed .chevron { transform: rotate(-90deg); }
.asana-section.collapsed .asana-task-row,
.asana-section.collapsed .asana-add-task-row { display: none; }
.asana-section-head .area-name { font-weight: 800; font-size: 13.5px; color: var(--ink); text-transform: uppercase; letter-spacing: .03em; }
.asana-section-head .area-count { font-size: 12px; color: var(--mid-gray); }
.asana-section-head .asana-area-not-pushed { font-size: 11px; font-style: italic; color: var(--mid-gray); text-transform: none; letter-spacing: normal; }

.asana-task-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 20px 9px 46px;
  border-top: 1px solid #f1f2f2;
}
.asana-task-row:hover { background: #fafbfb; }
.asana-check {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #c9cdce;
  flex-shrink: 0; appearance: none; -webkit-appearance: none; cursor: pointer;
  position: relative; background: #fff;
}
.asana-check:checked { background: var(--good); border-color: var(--good); }
.asana-check:checked::after {
  content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; line-height: 1;
}
.asana-task-title {
  flex: 1; border: 0; background: transparent; font-family: var(--font-sans);
  font-size: 14px; color: var(--ink); padding: 3px 5px; border-radius: 4px; min-width: 0;
}
.asana-task-title:focus { background: #eef1f1; outline: none; }
.asana-task-row.excluded .asana-task-title { text-decoration: line-through; color: var(--mid-gray); }
.asana-group-select {
  font-size: 11.5px; font-weight: 700; color: #fff; background: var(--teal);
  border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer;
  max-width: 160px; flex-shrink: 0;
}
.asana-remove-btn {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
  color: var(--mid-gray); font-size: 11px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.asana-remove-btn:hover { background: #fbe9e7; color: #b42318; border-color: #f0b4ae; }
.asana-add-task-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 20px 12px 46px;
  color: var(--mid-gray); font-size: 13.5px; cursor: pointer; border-top: 1px solid #f1f2f2;
}
.asana-add-task-row:hover { color: var(--teal); }

.push-result {
  margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--good-bg);
  color: var(--good); font-size: 14px; font-weight: 700;
}
.push-result a { color: var(--good); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--teal-dark); color: #fff; padding: 12px 22px; border-radius: 10px;
  font-size: 14px; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.toast.error { background: #b42318; }