/* Portal, sign-in pages and credits (index.html, login.html, credits.html, the OAuth pages).
   Same colours, font and shapes as the public website (site.css); owner decision 2026-10-27 (3.007):
   yellow buttons with dark text, navy for links and text accents, but the portal keeps its smaller
   text so tables and forms fit. Yellow is never used for text on white: it can't be read. */
:root {
  --yellow: #fbd420;
  --yellow-dark: #e0b900;
  --navy: #1f2733;
  --navy-soft: #2a3644;
  --ink: #15191e;
  --ink-soft: #5b6673;
  --line: #e4e7eb;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --sidebar: var(--navy);
  --sidebar-line: #313d4b;
  --sidebar-text: #c7d0da;
  --accent: var(--yellow);
  --accent-ink: var(--ink);
  --link: var(--navy);
  --danger: #b8503f;
  --radius: 10px;
  font-size: 15px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--link); text-decoration-color: var(--yellow-dark); text-underline-offset: 3px; }

.shell {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: 270px;
  flex-shrink: 0;
  background: var(--sidebar);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  max-height: 100vh;
  position: sticky;
  top: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 400;
  color: #fff;
  padding: 0 20px 18px;
  border-bottom: 1px solid var(--sidebar-line);
  margin-bottom: 14px;
}
/* The duck's black outline disappears on navy, so it sits on a white disc like the website's hero. */
.brand img { width: 38px; height: 38px; background: #fff; border-radius: 50%; padding: 5px; flex-shrink: 0; }

.sidebar-section { padding: 0 12px; margin-bottom: 10px; display: flex; flex-direction: column; }

.sidebar-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  font-size: 12.5px;
  color: #8b96a3;
}

.icon-btn {
  background: transparent;
  border: 1px solid var(--sidebar-line);
  color: var(--sidebar-text);
  width: 22px;
  height: 22px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1;
  font-size: 15px;
}
.icon-btn:hover { background: var(--sidebar-line); }

.company-list, .property-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.company-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 13.5px;
}
.company-row:hover { background: rgba(255,255,255,0.05); }
.company-row > span { flex: 1; cursor: pointer; }
.company-row.selected { background: rgba(251, 208, 0, 0.16); color: #fff; box-shadow: inset 3px 0 0 var(--yellow); }
.company-row.filter-row { color: #a9b4bf; }
.company-row.filter-row.selected { color: #fff; }
.company-row[hidden] { display: none; }

/* Company switcher (sidebar.js): the chosen company on one line, the list in a pop-up over the properties. */
.company-switcher { position: relative; }
.company-current-row { display: flex; gap: 6px; align-items: center; }
.company-current {
  flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--sidebar-line); border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; text-align: left;
}
.company-current > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-current:hover, .company-current[aria-expanded=true] { border-color: var(--yellow); }
.company-current .caret { color: var(--yellow); font-size: 12px; }
.settings-btn { width: 34px; height: 34px; border-radius: 8px; font-size: 16px; }
.settings-btn.active { background: rgba(251, 208, 0, 0.16); border-color: var(--yellow); color: #fff; }
.company-menu {
  position: absolute; top: 100%; left: 12px; right: 12px; z-index: 20; margin-top: 6px;
  display: flex; flex-direction: column; gap: 6px; max-height: 60vh; padding: 8px;
  background: var(--navy-soft); border: 1px solid var(--sidebar-line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.company-menu[hidden] { display: none; }
/* Only the list scrolls, so search and "+ Add company" stay in sight. */
.company-menu .company-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.company-menu input[type=search] {
  background: var(--navy); color: #fff; border-color: var(--sidebar-line); font-size: 13px; padding: 6px 9px;
}
.company-menu input[type=search][hidden] { display: none; }
.company-add {
  background: none; border: none; border-top: 1px solid var(--sidebar-line); color: var(--yellow);
  font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; padding: 8px 8px 2px; cursor: pointer;
}
.company-add:hover { text-decoration: underline; }

.company-row .del {
  opacity: 0;
  background: none;
  border: none;
  color: #d99d92;
  cursor: pointer;
  font-size: 13px;
}
.company-row:hover .del { opacity: 1; }

.properties-section { flex: 1; overflow-y: auto; }

.property-group-label {
  font-size: 11.5px;
  text-transform: none;
  color: #6d7885;
  padding: 10px 8px 4px;
}

.property-row {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--sidebar-text);
}
.property-row:hover { background: rgba(255,255,255,0.06); }
/* Same muted yellow with a bar on the left as the selected company (owner decision 2026-10-27). */
.property-row.selected {
  background: rgba(251, 208, 0, 0.16); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--yellow);
}
.property-row .sub { display: block; font-size: 12px; color: #93a0ad; }
.property-row.selected .sub { color: #c7d0da; font-weight: 400; }

/* ---------- Main ---------- */

.main {
  flex: 1;
  padding: 28px 36px 60px;
  max-width: 980px;
}

/* Property name with the Preview button next to it (3.013) */
.main-header-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.main-header-row .btn[hidden] { display: none; }

.main-header h1 {
  font-size: 26px;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}

.tab {
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--link); border-bottom-color: var(--accent); font-weight: 700; }

.panel { display: none; }
.panel.active { display: block; }

/* ---------- Shared building blocks ---------- */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 800px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* My account's sub menu takes the place of the companies and properties (account.js) */
.account-nav { display: none; gap: 2px; }
.sidebar.account-mode #accountNav, .sidebar.emails-mode #emailNav { display: flex; }
.sidebar.account-mode .company-switcher, .sidebar.account-mode .properties-section,
.sidebar.emails-mode .company-switcher, .sidebar.emails-mode .properties-section { display: none; }
.account-nav .property-row { background: none; border: none; font: inherit; font-size: 14px; text-align: left; width: 100%; }
.account-nav .property-row:hover { background: rgba(255,255,255,0.06); }
.account-nav .property-row.selected { background: rgba(251, 208, 0, 0.16); }
.account-nav .property-row[hidden] { display: none; }
.account-back {
  background: none; border: none; color: var(--yellow); font: inherit; font-size: 13.5px; font-weight: 600;
  text-align: left; padding: 4px 10px 12px; cursor: pointer;
}
.account-back:hover { text-decoration: underline; }

/* On/off pills (property-general.js), all one width: on looks like the sidebar's selected property, muted
   yellow with a yellow bar on the left (owner decision 2026-10-31) */
.toggle-pills { display: grid; grid-template-columns: repeat(5, minmax(0, 150px)); gap: 10px; }
@media (max-width: 800px) { .toggle-pills { grid-template-columns: repeat(2, 1fr); } }
.toggle-pill { position: relative; cursor: pointer; }
.toggle-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.toggle-pill span {
  display: block; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  color: var(--ink-soft); font-size: 13.5px; font-weight: 600; text-align: center;
}
.toggle-pill:hover span { border-color: var(--navy); }
.toggle-pill input:checked + span {
  background: rgba(251, 212, 32, 0.2); border-color: rgba(251, 212, 32, 0.55); color: var(--ink);
  box-shadow: inset 4px 0 0 var(--yellow);
}
.toggle-pill input:checked + span::before { content: '✓ '; }
.toggle-pill input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }

.wifi-qr-row { display: flex; gap: 16px; align-items: flex-start; }
.wifi-qr { width: 110px; height: 110px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 6px; }
.wifi-qr.placeholder { object-fit: contain; padding: 14px; background: var(--yellow-soft, #fff8d6); }

/* The yellow top edge is the website's card mark. */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 4px solid var(--yellow);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.card h2 {
  font-size: 15px;
  margin: 0 0 14px;
  color: var(--ink);
  font-weight: 700;
}

.field-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #f0f1f3;
  font-size: 13.5px;
}
.field-row:last-child { border-bottom: none; }
.field-row .label { color: var(--ink-soft); flex-shrink: 0; }
.field-row .value { text-align: right; word-break: break-word; }

.reveal-btn {
  background: none;
  border: none;
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--yellow-dark);
  text-underline-offset: 3px;
  cursor: pointer;
  font-size: 12.5px;
  padding: 0;
  margin-left: 8px;
}

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 12px;
  border: 1px solid var(--line);
}
.pill.yes { background: #e8f5ec; border-color: #b9dfc6; color: #1e6b3a; }
.pill.no { background: #f6eeee; border-color: #e3cdc8; color: #8a4237; }

.rules-text {
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--ink);
  margin-top: 10px;
}

label.form-label {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 14px 0 5px;
}
label.form-label:first-child { margin-top: 0; }

input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password],
input[type=datetime-local], input[type=time], textarea, select {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #c9ced5;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
}
input:focus, textarea:focus, select:focus { outline: 3px solid rgba(251, 208, 0, 0.5); border-color: var(--navy); }
textarea { resize: vertical; min-height: 80px; }

.char-count { font-size: 11.5px; color: var(--ink-soft); text-align: right; margin-top: 3px; }
.char-count.over { color: var(--danger); }

/* Pill buttons like the website: yellow = the main action, navy outline = the others. */
.btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.btn:hover { background: var(--yellow-dark); border-color: var(--yellow-dark); }
.btn.secondary { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn.secondary:hover { background: var(--navy); color: #fff; }
.btn.danger { background: #fff; color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger); color: #fff; }
.btn:disabled, .btn:disabled:hover { opacity: 0.45; cursor: not-allowed; }
.btn.secondary:disabled:hover { background: #fff; color: var(--navy); }
.btn.danger:disabled:hover { background: #fff; color: var(--danger); }

.empty-state {
  color: var(--ink-soft);
  font-size: 14px;
  padding: 40px 0;
  text-align: center;
}

/* ---------- Reservations ---------- */

table.res-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.res-table th {
  text-align: left;
  color: var(--ink-soft);
  font-weight: 500;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
table.res-table td { padding: 9px 10px; border-bottom: 1px solid #f0f1f3; vertical-align: top; }
table.res-table tr:last-child td { border-bottom: none; }

.source-tag { font-size: 11px; color: var(--ink-soft); }

.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 16px; }
.inline-form .field { display: flex; flex-direction: column; gap: 4px; }
.inline-form label { font-size: 12px; color: var(--ink-soft); }
.inline-form input { min-width: 160px; }

/* ---------- Media ---------- */

.category-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.category-tabs button {
  background: #fff;
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-soft);
}
.category-tabs button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

.upload-box {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13.5px;
  margin-bottom: 20px;
}
.upload-box input { margin-top: 10px; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.media-tile {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.media-tile img { width: 100%; height: 100px; object-fit: cover; display: block; background: #f2f3f5; }
.media-tile .meta { padding: 7px 8px; font-size: 11px; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; }
.media-tile .del { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 12px; }

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

.toast {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13.5px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--danger); }

/* ---------- Homescreen ---------- */

.bg-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.bg-actions label.btn { cursor: pointer; }

/* Select from Gallery: a 3 x 3 grid, scrolling when there are more (3.013) */
.gallery-drop { position: relative; }
.gallery-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: 456px;
  max-width: calc(100vw - 40px);
  max-height: 290px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.gallery-menu[hidden] { display: none; }
.gallery-menu .hint { grid-column: 1 / -1; margin: 4px; }
.gallery-tile {
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #f2f3f5;
}
.gallery-tile:hover { border-color: var(--navy); }
.gallery-tile.selected { border-color: var(--accent); }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Admin → Gallery */
.gallery-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.gallery-admin-grid figure { margin: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.gallery-admin-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.gallery-admin-grid figcaption { font-size: 12px; color: var(--ink-soft); word-break: break-all; }

.style-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.bg-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.bg-picker .bg-tile {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  height: 70px;
  background: #f2f3f5;
}
.bg-picker .bg-tile.selected { border-color: var(--accent); }
.bg-picker .bg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.social-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f1f3;
}
.social-row img { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 4px; }
.social-row .info { flex: 1; font-size: 13.5px; }
.social-row .info .platform { font-weight: 600; }
.social-row .info .url { color: var(--ink-soft); font-size: 12px; word-break: break-all; }

/* ---------- Guide Books ---------- */

.guide-entry {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
  background: #fff;
}
.guide-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.guide-entry-header h3 { margin: 0; font-size: 15.5px; }

.guide-elements-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.guide-element {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: #fff;
}
.guide-element-body { flex: 1; }
.guide-element-text {
  flex: 1;
  font-size: 13.5px;
  font-family: inherit;
  border: none;
  padding: 4px;
  resize: vertical;
}
.guide-element-image { flex: 1; display: flex; gap: 10px; align-items: center; }
.guide-element-image img { width: 100px; height: 70px; object-fit: cover; border-radius: 5px; background: #f2f3f5; flex-shrink: 0; }
.guide-element-image input { flex: 1; font-size: 13px; }
.guide-element-del { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 12px; flex-shrink: 0; margin-top: 4px; }

/* ---------- Recommendations ---------- */

.rec-layout { display: flex; gap: 20px; align-items: flex-start; }
.rec-categories { width: 230px; flex-shrink: 0; }
.rec-main { flex: 1; min-width: 0; }
.rec-category-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.rec-category-tabs button {
  background: #fff; border: 1px solid var(--line); padding: 6px 12px;
  border-radius: 99px; font-size: 13px; cursor: pointer; color: var(--ink-soft);
}
.rec-category-tabs button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.rec-category-tabs .del-cat { margin-left: 4px; color: var(--danger); cursor: pointer; }

.rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.rec-card {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; position: relative;
  display: flex; flex-direction: column;
}
/* Distance and buttons sit at the bottom, in the same place on every card of a row (3.013) */
.rec-card .body { flex: 1; display: flex; flex-direction: column; }
.rec-card .meta-row { margin-top: auto; }
/* Places in the TV's order, dragged into place (3.013) */
.rec-card[draggable=true], .cat-row[draggable=true], .entry-row-header[draggable=true] { cursor: grab; }
.rec-card.dragging, .cat-row.dragging, .entry-row.dragging, .guide-element.dragging { opacity: 0.4; outline: 1px dashed var(--ink-soft); }
/* The six-dot grip: what you hold to drag a guide book or one of its blocks (3.013) */
.drag-grip { color: var(--ink-soft); font-size: 15px; line-height: 22px; }
.guide-element .drag-grip { flex-shrink: 0; cursor: grab; padding: 0 2px; }
.guide-element .drag-grip:hover { color: var(--navy); }
.rec-card .drag-handle {
  position: absolute; top: 6px; right: 8px; z-index: 1; padding: 0 5px; border-radius: 5px;
  background: rgba(255,255,255,0.85); color: var(--ink-soft); font-size: 16px; line-height: 22px;
}
.rec-order-hint { margin: 18px 0 8px; }
.place-form + .rec-grid, .place-form + .entry-list { margin-top: 22px; }
/* Add a place: folded until opened, so the places below stay in view */
.place-form summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.place-form summary::-webkit-details-marker { display: none; }
.place-form summary h2 { margin: 0; }
.place-form summary::after { content: '+'; font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1; }
.place-form[open] summary::after { content: '−'; }
.place-form[open] summary { margin-bottom: 12px; }
/* Pop-up asking for one name (core.js openTextDialog) */
.text-dialog { max-width: 460px; margin-top: 12vh; }
.admin-pages { border: none; padding: 0; margin: 10px 0 0 24px; }
.admin-pages:disabled { opacity: 0.45; }
.rec-card img { width: 100%; height: 110px; object-fit: cover; display: block; background: #f2f3f5; }
.rec-card .body { padding: 10px 12px; }
.rec-card .name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.rec-card .addr { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; }
.rec-card .desc { font-size: 12.5px; margin-bottom: 8px; }
.rec-card .meta-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.rec-card .meta-row a { color: var(--link); }

/* ---------- Company settings ---------- */

.company-logo-preview { width: 90px; height: 90px; border: 1px solid var(--line); border-radius: 8px; object-fit: contain; background: #fafafa; margin-bottom: 12px; display: block; }


/* ---------- Sidebar titles ---------- */
.sidebar-title {
  font-size: 16px;
  font-weight: 600;
  color: #e6ebf0;
  letter-spacing: 0.2px;
}
.sidebar-heading .count { font-size: 12px; color: #8b96a3; font-weight: 400; margin-left: 6px; }

/* ---------- Collapsible entry lists (Guide Books, Check-out Tasks) ---------- */
.entry-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.entry-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.entry-row-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
.entry-row-header:hover { background: #f7f8fa; }
.entry-row-header .chevron { color: var(--ink-soft); width: 14px; transition: transform 0.15s; }
.entry-row.open .entry-row-header .chevron { transform: rotate(90deg); }
.entry-row-header .title { font-weight: 600; font-size: 15px; flex: 1; }
.entry-row-header .meta { font-size: 12px; color: var(--ink-soft); }
.entry-row-body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.entry-row .guide-entry { border: none; padding: 0; margin: 0; }

/* ---------- Property checklist ("Assign properties") ---------- */
.assign-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
  background: #fafbfc;
}
.assign-panel label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 3px 0; }
.assign-panel label.full { color: var(--ink-soft); }
.assign-panel .assign-actions { display: flex; gap: 12px; margin-bottom: 6px; font-size: 12.5px; }
.assign-panel .assign-actions a { color: var(--link); cursor: pointer; }
.task-body-preview { font-size: 13.5px; color: var(--ink); white-space: pre-wrap; margin: 8px 0; }

.required { color: var(--danger); }
.unit-choice { display: flex; gap: 14px; align-items: center; font-size: 13.5px; margin-top: 8px; }
.unit-choice label { display: flex; align-items: center; gap: 5px; }
.pill.overridden { background: #fff4e5; border-color: #f0d3a8; color: #8a5a14; }


/* ---------- My account / Accounts ---------- */

.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 800px) { .account-grid { grid-template-columns: 1fr; } }
.hint { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 8px 0 10px; }
.sub { font-size: 12px; color: var(--ink-soft); }
.button-row { display: flex; gap: 10px; margin: 14px 0 4px; }
.btn.small { padding: 4px 10px; font-size: 12.5px; }
.link-btn {
  background: none; border: none; padding: 0; color: var(--link); cursor: pointer; font-size: 12.5px;
  font-family: inherit; margin-bottom: 6px;
  text-decoration: underline; text-decoration-color: var(--yellow-dark); text-underline-offset: 3px;
}
/* Same notice as the website: a coloured bar on the left. */
.notice {
  background: #fffbe8;
  border: 1px solid #f1e3a3;
  border-left: 4px solid var(--yellow);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13.5px;
  margin: 10px 0 22px;
  line-height: 1.7;
}
.notice.error { background: #f6eeee; border-color: #e3cdc8; border-left-color: #c8372d; color: #8a4237; margin: 10px 0; }
.field-error { color: #8a4237; font-size: 0.9em; margin: 4px 0 0; }
.notice.warn { background: #fbf4e6; border-color: #ead7ad; border-left-color: #e09a1f; color: #6b4e14; margin: 10px 0; }
.temp-password { font-size: 16px; background: #fff; padding: 2px 8px; border-radius: 4px; margin-right: 8px; }
.totp-setup { display: flex; gap: 16px; align-items: center; margin: 10px 0 14px; }
.totp-setup img { width: 160px; height: 160px; border: 1px solid var(--line); border-radius: 6px; flex-shrink: 0; }
.totp-setup code { word-break: break-all; }
input.code-input { font-size: 22px; letter-spacing: 6px; text-align: center; max-width: 200px; }
.inline-form { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr auto; gap: 12px; align-items: end; }
.inline-form .form-label { margin-top: 0; }
@media (max-width: 800px) { .inline-form { grid-template-columns: 1fr; } }
.accounts-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.accounts-table th { text-align: left; font-weight: 600; color: var(--ink-soft); font-size: 12.5px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.accounts-table td { padding: 10px 8px; border-bottom: 1px solid #f0f1f3; vertical-align: top; }
.accounts-table tr.disabled td { color: var(--ink-soft); }

/* ---------- Sign-in page ---------- */

body.auth-page {
  display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 10vh 16px 40px;
}
.auth-box { width: 100%; max-width: 420px; }
.auth-brand {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 22px; text-align: center; margin-bottom: 20px; color: var(--ink);
}
.auth-brand img { width: 72px; height: 72px; }
.auth-box .card h2 { font-size: 17px; color: var(--ink); }
.auth-actions { display: flex; gap: 10px; margin-top: 18px; }
.auth-note { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* ---------- Account menu (top right) ---------- */

.user-menu { position: fixed; top: 14px; right: 18px; z-index: 50; display: flex; gap: 8px; }
.menu-wrap { position: relative; }
.menu-wrap[hidden] { display: none; }
.menu-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.menu-btn span { display: block; width: 18px; height: 2px; background: var(--ink-soft); border-radius: 1px; }
.menu-btn:hover, .menu-btn[aria-expanded=true] { border-color: var(--navy); box-shadow: inset 0 -3px 0 var(--yellow); }
.admin-menu-btn { width: auto; padding: 0 12px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--link); }
.menu-panel {
  position: absolute;
  top: 44px;
  right: 0;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  padding: 8px;
  display: flex;
  flex-direction: column;
}
.menu-panel[hidden] { display: none; }
.user-email { font-size: 12px; color: var(--ink-soft); padding: 4px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid #f0f1f3; word-break: break-all; }
.user-link {
  background: none;
  border: none;
  text-align: left;
  color: var(--ink);
  font-size: 13.5px;
  font-family: inherit;
  padding: 7px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.user-link:hover { background: var(--bg); }
.user-link.selected { color: var(--link); font-weight: 700; box-shadow: inset 3px 0 0 var(--yellow); }
.user-link[hidden] { display: none; }
.menu-version { font-size: 11.5px; color: var(--ink-soft); padding: 8px 8px 2px; margin-top: 4px; border-top: 1px solid #f0f1f3; }
input.code-input.small { font-size: 18px; letter-spacing: 3px; text-transform: uppercase; max-width: none; }
.tv-code-box { margin-top: 18px; padding: 14px 18px; background: var(--bg); border-radius: 8px; }
.tv-code { font-size: 34px; font-weight: 700; letter-spacing: 4px; margin: 4px 0; }
.older-tv { margin-top: 18px; }
.older-tv summary { cursor: pointer; color: var(--link); font-size: 13px; }
.link-btn.danger-link { color: var(--danger); }
.errors-table td { font-size: 13px; }
.error-row { cursor: pointer; }
.error-row:hover td { background: #f7f8fa; }
.error-detail { white-space: pre-wrap; font-size: 11.5px; background: #f7f8fa; padding: 8px; border-radius: 4px; max-height: 260px; overflow: auto; margin: 8px 0 0; }

/* ---------- View as customer ---------- */
.view-as-banner {
  background: #fff4e5;
  border: 1px solid #f0d3a8;
  color: #8a5a14;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 0 56px 18px 0; /* leaves room for the menu button */
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.view-as-banner[hidden] { display: none; }
body.viewing-as .sidebar { box-shadow: inset 4px 0 0 #f0a640; }

/* ---------- Credits page ---------- */
.auth-box.credits { max-width: 560px; }
.credits h3 { font-size: 14px; margin: 18px 0 6px; }
.credits ul { padding-left: 20px; }
.auth-footer { text-align: center; font-size: 12.5px; margin-top: 14px; }
.auth-footer a, a.menu-version { color: var(--ink-soft); }
a.menu-version { border-top: none; padding-top: 2px; }

/* ---------- Marketing consent checkbox ---------- */
.consent-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); line-height: 1.45; margin-top: 16px; cursor: pointer; }
.consent-check input { margin-top: 3px; flex-shrink: 0; }
/* Sign-up: the bot-trap field stays out of sight; room for Cloudflare's check */
.auth-box .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile-box:not(:empty) { margin-top: 16px; }

/* ---------- Website, Legal documents, Messages (admin) ---------- */
.section-title { font-size: 14px; font-weight: 600; color: var(--ink-soft); margin: 0 0 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.checkbox-row { display: flex; gap: 8px; align-items: center; font-size: 13.5px; margin: 10px 0; cursor: pointer; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { text-align: left; border-bottom: 1px solid var(--line); padding: 7px 6px; vertical-align: top; }
.site-page-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.site-section { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; background: #fff; }
.site-section.open { border-color: var(--accent); }
.site-section-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.site-section-head .row-actions { margin-top: 0; }
.site-editor { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 6px; }
.site-editor input[type=text], .site-editor textarea { width: 100%; }
.site-list-title { margin: 18px 0 6px; font-size: 13px; }
.site-list-item { border: 1px dashed var(--line); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
.site-list-head { display: flex; gap: 6px; align-items: center; }
.site-image-field { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.site-image-field img { max-height: 70px; max-width: 160px; border-radius: 4px; border: 1px solid var(--line); }
.legal-upload { margin-top: 12px; }
.legal-upload summary { list-style: none; }
.legal-upload form { margin-top: 10px; }
.legal-list { padding-left: 18px; font-size: 14px; }
.legal-list li { margin-bottom: 8px; }
.message { border-bottom: 1px solid var(--line); padding: 10px 0; }
.message.handled { opacity: 0.6; }
.message-body { white-space: pre-wrap; font-size: 13.5px; margin: 6px 0; }

/* Hospitable API token popup (account.js) */
.token-dialog { max-width: 640px; }
.token-dialog .notice p { margin: 0 0 8px; }
.token-dialog .notice p:last-child { margin-bottom: 0; }
.token-steps { padding-left: 20px; line-height: 1.7; font-size: 13.5px; }
.token-steps li { margin-bottom: 10px; }
.token-steps img { display: block; max-width: 100%; margin: 8px 0 4px; border: 1px solid var(--line); border-radius: var(--radius); }

/* ---------- TV-control helper guide ---------- */
.guide-modal { position: fixed; inset: 0; background: rgba(20, 24, 30, 0.45); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 30px 14px; overflow-y: auto; }
.guide-modal[hidden] { display: none; }
.guide-dialog { background: #fff; border-radius: 10px; max-width: 860px; width: 100%; padding: 20px 24px 28px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.guide-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.guide-head h2 { margin: 0; font-size: 18px; }
.guide-question { margin-top: 18px; }
.guide-question h3 { font-size: 14px; margin: 0 0 8px; }
.guide-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.guide-brand-row { display: flex; gap: 8px; flex-wrap: wrap; }
.guide-brand-row select, .guide-brand-row input { max-width: 300px; }
.guide-output { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 14px; }
.guide-output h2 { font-size: 20px; margin: 4px 0 16px; }
.guide-steps { padding-left: 20px; }
.guide-steps > li { margin-bottom: 26px; }
/* Step titles stand clearly above the bold words inside the steps. */
.guide-steps > li::marker { font-size: 18px; font-weight: 700; color: var(--navy); }
.guide-steps h3 {
  font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 3px solid var(--yellow);
}
.guide-body { font-size: 14px; line-height: 1.55; }
.guide-body ol, .guide-body ul { padding-left: 20px; margin: 6px 0; }
.guide-body li { margin-bottom: 4px; }
.guide-body code { background: #f3f4f6; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.guide-images { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.guide-figure { margin: 0; width: 240px; }
.guide-figure img { width: 100%; border-radius: 6px; border: 1px solid var(--line); }
.guide-figure figcaption { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.guide-placeholder { width: 100%; aspect-ratio: 4 / 3; border: 2px dashed var(--line); border-radius: 6px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; color: var(--ink-soft); padding: 10px; }
.guide-faq { border-bottom: 1px solid var(--line); padding: 10px 0; }
.guide-faq summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.guide-lights td:first-child { white-space: nowrap; }

/* TV control card (2.005, tv-control.js) */
.card h3 { font-size: 15px; margin: 18px 0 8px; }
.guide-start { display: grid; grid-template-columns: max-content 1fr; gap: 10px 14px; align-items: center; margin: 4px 0 6px; }
.guide-start .btn { width: 100%; }
.guide-start p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 600px) { .guide-start { grid-template-columns: 1fr; } }
.helper-box { border: 1px solid var(--line, #e3e3e3); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.helper-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.code-line { background: #f3f1ec; border-radius: 6px; padding: 8px 10px; font-size: 13px; overflow-x: auto; white-space: pre; }
.copy-line { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.copy-line .code-line { flex: 1; margin: 0; }
.check-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; }
/* Groups form fields only to switch them off together (one helper per property); no box of its own */
.plain-fieldset { display: contents; }
input:disabled { opacity: 0.55; cursor: not-allowed; }
.feature-accounts { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 12px; font-size: 13px; }

/* Property Info card (property-info.js, 2.001 part 2) */
.card-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.button-row.tight { margin: 0 0 8px; gap: 6px; flex-wrap: wrap; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 800px) { .form-pair { grid-template-columns: 1fr; } }
.property-info-form .consent-check { margin-top: 8px; color: var(--ink); }
.property-info-form .notice.warn { margin: 6px 0 10px; }

/* Calendar stays on the Reservations tab (property-calendars.js, 2.001 part 2) */
table.res-table tr.ignored td { color: var(--ink-soft); opacity: 0.75; }
table.res-table tr.double-booking td { background: #f9e3e0; color: #8a2f24; }
table.res-table tr.double-booking:hover td { background: #f4d4cf; }

.inline-form .field[hidden] { display: none; }

/* The logo and name lead to the dashboard (3.011) */
a.brand { text-decoration: none; cursor: pointer; }
a.brand:hover span { color: var(--yellow); }

/* Dashboard (dashboard.js, 3.011): tiles, today's stays, needs attention, the week */
.dash-greeting { margin: -6px 0 18px; color: var(--ink-soft); font-size: 14px; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
.dash-tile {
  display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: inherit;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
}
button.dash-tile { cursor: pointer; }
button.dash-tile:hover { border-color: var(--navy); box-shadow: 0 2px 8px rgba(28, 37, 48, 0.08); }
.dash-tile-label { font-size: 12.5px; color: var(--ink-soft); }
.dash-tile-value { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--navy); }
.dash-tile-value small { font-size: 16px; font-weight: 600; color: var(--ink-soft); }
.dash-tile-detail { font-size: 12px; color: var(--ink-soft); }
.dash-tile.warn { border-left: 4px solid #d08a1c; }
.dash-tile.warn .dash-tile-detail { color: #8a5a14; font-weight: 600; }
.dash-row { margin-bottom: 22px; }
.dash-subhead { font-size: 13px; margin: 14px 0 6px; color: var(--ink); }
.dash-subhead:first-of-type { margin-top: 0; }
/* A stay line: the time and property open the Reservations tab; the TV tag and Customize greeting sit on the right. */
.dash-stay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid #f0f1f3; padding: 4px 0; }
.dash-stay-link, .dash-alert {
  display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: inherit;
  background: none; border: none; padding: 6px 4px; border-radius: 6px;
}
.dash-stay-link { flex: 1; min-width: 160px; cursor: pointer; }
.dash-alert { width: 100%; border-bottom: 1px solid #f0f1f3; border-radius: 0; padding: 8px 4px; }
button.dash-alert { cursor: pointer; }
.dash-stay-link:hover, button.dash-alert:hover { background: var(--bg); }
.greeting-dialog { max-width: 560px; }
.legal-text { line-height: 1.6; font-size: 13.5px; }
.legal-text table { border-collapse: collapse; width: 100%; }
.legal-text th, .legal-text td { border: 1px solid #dfe3e8; padding: 6px 8px; text-align: left; vertical-align: top; }
.no-tv-dialog { max-width: 440px; }
.dash-stay-time { width: 70px; flex-shrink: 0; font-weight: 700; font-size: 13px; color: var(--navy); }
.dash-stay-main { flex: 1; min-width: 0; font-size: 13.5px; }
.dash-stay-main .sub { display: block; }
.dash-alert { font-size: 13.5px; align-items: flex-start; }
.dash-alert-icon { width: 20px; flex-shrink: 0; text-align: center; }
.dash-alert.critical { color: #8a2f24; }
.dash-alert-text { flex: 1; min-width: 0; }
.dash-alert > .btn { flex-shrink: 0; align-self: center; }
/* Set-up: to-dos, not alarms (owner decision 2026-10-28) */
.dash-setup-head { margin-top: 18px; color: var(--ink-soft); }
.dash-alert.setup { color: var(--ink-soft); font-size: 13px; }
.dash-count {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 99px;
  background: var(--yellow); color: var(--ink); font-size: 12px; text-align: center;
}
.dash-all-good { color: #1e6b3a; font-size: 14px; margin: 4px 0; }
.dash-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; height: 180px; align-items: end; }
.dash-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.dash-bar { width: 60%; max-width: 44px; background: var(--navy); border-radius: 4px 4px 0 0; }
.dash-day:first-child .dash-bar { background: var(--yellow-dark); }
.dash-bar-value { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.dash-day-label { font-size: 12px; color: var(--ink); border-top: 1px solid var(--line); width: 100%; text-align: center; padding-top: 6px; }
.dash-day-out { font-size: 11.5px; color: var(--ink-soft); }
.dash-footer { margin-top: 14px; font-size: 12px; color: var(--ink-soft); }

/* Close account card (My account, 3.015): on its own at the very bottom */
.close-account-card { margin-top: 22px; }
/* The newest 5 payments show; the rest scroll under the headings (owner, 2026-10-31).
   Fixed row heights make the box exactly a heading row and 5 payments high. */
.payments-scroll {
  --payment-row: 49px; --payment-head: 36px;
  max-height: calc(var(--payment-head) + 5 * var(--payment-row)); overflow-y: auto;
}
.payments-scroll th { position: sticky; top: 0; z-index: 1; height: var(--payment-head); background: var(--panel); }
.payments-scroll td { height: var(--payment-row); }
.close-account-card p { max-width: 760px; }

/* Admin → Logs (3.015): the logs on the left, the chosen one on the right */
.logs-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: start; }
.logs-menu .link-btn { display: block; text-align: left; font-size: 13.5px; }
.logs-menu .link-btn.selected { font-weight: 700; text-decoration: none; color: var(--ink); }
.log-filter { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; }
.log-filter > div { flex: 0 0 auto; max-width: 100%; }
.log-filter .log-search { width: 240px; }
.log-filter .log-date { width: 160px; }
.log-table-wrap { overflow-x: auto; margin-top: 12px; }
.log-table td { white-space: nowrap; vertical-align: top; }
.log-pager { align-items: center; }
@media (max-width: 800px) {
  .logs-layout { grid-template-columns: 1fr; }
}

/* Sign-up checkout and My account (3.001): Standard and Pro slots, billing, Paddle's embedded form */
.slot-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.billing-choice { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.billing-choice .consent-check { margin-top: 10px; color: var(--ink); }
.checkout-container { margin-top: 12px; }
.slot-change-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.slot-change-row input { max-width: 110px; }

/* Admin → Email notifications (3.016): the emails, the editor, the placeholders */
.main.main-wide { max-width: 1500px; }
/* The list of emails in the sidebar: only the list scrolls, so Return to Dashboard stays in sight */
.email-nav { flex: 1; min-height: 0; }
.email-nav-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.email-nav .property-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13.5px; }
.email-nav .pill { flex-shrink: 0; padding: 0 6px; font-size: 10.5px; border-color: var(--sidebar-line); color: #c7d0da; }
.email-nav .pill.no { color: #8a4237; }
.email-tpl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; }
.email-tpl-layout.no-placeholders { grid-template-columns: minmax(0, 1fr); }
/* The placeholders stay in sight while the page scrolls, below the top right menus */
.email-tpl-placeholders { position: sticky; top: 64px; max-height: calc(100vh - 78px); overflow-y: auto; }
.email-tpl-editor .btn { white-space: nowrap; }
.email-tpl-editor .button-row { flex-wrap: wrap; }
.email-sender-row { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(0, 3fr); gap: 14px; margin-top: 14px; }
.email-sender { display: flex; align-items: center; gap: 6px; }
.email-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; background: var(--bg);
  border: 1px solid var(--line); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0;
}
.email-toolbar select { width: auto; max-width: 130px; padding: 4px 8px; }
.email-color { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.email-color input { width: 34px; height: 26px; padding: 0; border: 1px solid var(--line); }
.email-body-editor { min-height: max(240px, calc(100vh - 500px)); border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); padding: 12px 14px;
  background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.5; color: #1f2937; overflow-wrap: anywhere; }
.email-body-editor:focus { outline: 2px solid var(--yellow-dark); outline-offset: 1px; }
.email-body-editor p { margin: 0 0 10px; }
.email-body-editor a { color: #1d4ed8; }
.placeholder-list { list-style: none; padding: 0; margin: 0 0 10px; }
.placeholder-list li { margin-bottom: 8px; }
.placeholder-chip { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 6px; cursor: pointer; }
.placeholder-chip:hover { border-color: var(--navy); }
.placeholder-check { font-weight: 700; margin-left: 4px; }
.placeholder-check.is-in { color: #2f7d4f; }
.placeholder-check.is-missing { color: var(--danger); }
@media (max-width: 1100px) {
  .email-tpl-layout { grid-template-columns: minmax(0, 1fr); }
  .email-tpl-placeholders { position: static; max-height: none; }
}