/* ===================================================================
   azool.css — Phase 14 shared design system (generated)
   Source geometry: style.css (re-skinned to Azool palette).
   Regenerate: python3 _build_azool_css.py
   =================================================================== */

/* ============ component layer (geometry from style.css, Azool palette) ============ */
/* cleaning-app v4.0 — shared styles */
/* Font and palette match the existing calendar.html from cleaning-script */

/* ── Phase 7: Azool onboarding wizard chrome (navy #1c3a5e / amber #d99a2b) ── */
.ob-wrap{max-width:520px;margin:56px auto 0;padding:0 18px 64px}
.ob-logo{font-size:1.4rem;font-weight:800;color:#1c3a5e;letter-spacing:-.02em;margin-bottom:4px}
.ob-sub{font-size:.85rem;color:#5b6b7f;margin-bottom:26px}
.ob-progress{display:flex;gap:6px;align-items:center;margin-bottom:26px}
.ob-dot{width:9px;height:9px;border-radius:50%;background:#e3e7ec}
.ob-dot-active{background:#1c3a5e}
.ob-dot-done{background:#d5e0ec}
.ob-step-label{font-size:.76rem;color:#5b6b7f;margin-left:6px}
.ob-card{background:#fff;border:1px solid #e3e7ec;border-radius:12px;padding:30px 26px}
.ob-card h2{margin:0 0 8px;font-size:1.35rem;font-weight:700;color:#1c3a5e}
.ob-card p{margin:0 0 20px;font-size:.92rem;color:#5b6b7f;line-height:1.6}
.ob-card ul{margin:0 0 22px;padding-left:20px;font-size:.92rem;color:#5b6b7f;line-height:1.8}
.ob-label{display:block;font-size:.85rem;font-weight:600;color:#1f2a37;margin-bottom:16px}
.ob-label-sm{display:block;font-size:.72rem;font-weight:600;color:#5b6b7f;margin-bottom:4px}
.ob-input,.ob-select{display:block;width:100%;margin-top:6px;padding:11px 13px;font-size:16px;border:1.5px solid #e3e7ec;border-radius:9px;background:#f5f6f8;box-sizing:border-box;color:#1f2a37}
.ob-input:focus,.ob-select:focus{outline:none;border-color:#1c3a5e;background:#fff}
.ob-hint{display:block;font-size:.78rem;color:#5b6b7f;margin-top:5px;font-weight:400}
.ob-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px}
.ob-btn-primary{padding:11px 22px;font-size:.95rem;font-weight:600;color:#fff;background:#1c3a5e;border:none;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block}
.ob-btn-primary:hover{background:#14304d}
.ob-btn-primary:disabled{opacity:.6;cursor:default}
.ob-btn-secondary{padding:11px 18px;font-size:.92rem;font-weight:600;color:#1c3a5e;background:#eef2f6;border:1px solid #d5e0ec;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block}
.ob-btn-secondary:hover{background:#e6ebf1}
.ob-btn-skip{font-size:.9rem;color:#2c5686;text-decoration:underline;background:none;border:none;cursor:pointer}
.ob-btn-skip:hover{color:#1c3a5e}
.ob-error{background:#fdf0f0;border:1px solid #e8a5a5;border-radius:8px;padding:10px 14px;font-size:.84rem;color:#8c2a2a;margin-bottom:16px}
.ob-error ul{margin:0;padding-left:18px;color:#8c2a2a}
.ob-success{background:#eaf5ee;border:1px solid #d3ecd9;border-radius:8px;padding:10px 14px;font-size:.84rem;color:#1f5c33;margin-bottom:16px}
.ob-no-prop,.ob-warn{background:#fbf4e5;border:1px solid #f3e2b8;border-radius:8px;padding:10px 14px;font-size:.84rem;color:#6b4b06;margin-bottom:16px}
.ob-role-note{font-size:.85rem;color:#5b6b7f;line-height:1.7;background:#f5f6f8;border-radius:8px;padding:12px 14px}
.ob-add-btn{margin:4px 0 8px;padding:8px 14px;font-size:.85rem;font-weight:600;color:#1c3a5e;background:#eef2f6;border:1px solid #d5e0ec;border-radius:8px;cursor:pointer}
.crew-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-bottom:12px}
.crew-remove{padding:8px 10px;font-size:.8rem;color:#6b4b06;background:#fff;border:1px solid #f4c4c4;border-radius:6px;cursor:pointer;height:fit-content}
.ob-skip-all{display:inline-block;margin-top:22px;font-size:.82rem;color:#5b6b7f;text-decoration:underline}
.ob-skip-all:hover{color:#1c3a5e}
.ob-ics-box{background:#eef2f6;border:1px solid #d5e0ec;border-radius:10px;padding:14px 16px;margin-bottom:20px}
.ob-ics-label{font-size:.85rem;font-weight:600;color:#1c3a5e;margin-bottom:8px}
.ob-ics-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ob-ics-url{flex:1;min-width:180px;font-size:.8rem;color:#1f2a37;border:1px solid #d5e0ec;border-radius:6px;padding:8px 10px;background:#fff;font-family:monospace}
.ob-ics-copy{padding:8px 14px;font-size:.85rem;font-weight:600;color:#1c3a5e;background:#fff;border:1px solid #d5e0ec;border-radius:8px;cursor:pointer;white-space:nowrap}
.ob-ics-copy.copied{background:#d3ecd9;border-color:#bcdcc4;color:#1f5c33}
.ob-ics-hint{font-size:.76rem;color:#5b6b7f;margin-top:8px}
@media(max-width:560px){.crew-row{grid-template-columns:1fr}.ob-actions{gap:10px}.ob-wrap{margin-top:32px}}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 12px 16px 40px;
  background: #f5f6f8;
  color: #1f2a37;
  line-height: 1.5;
}

h1 {
  margin: 0 0 4px;
  font-size: 1.4rem;
  font-weight: 700;
}

h2 {
  margin: 28px 0 12px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #33404f;
}

h3 {
  margin: 24px 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #5b6b7f;
}

.subtitle {
  margin: 0 0 16px;
  font-size: 0.88rem;
  color: #5b6b7f;
}

/* Calendar navigation bar */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.cal-nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cal-month-header {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2a37;
}

.cal-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #eef1f4;
  border: 1px solid #e3e7ec;
  border-radius: 6px;
  font-size: 1.5rem;
  line-height: 1;
  color: #4a5a6e;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.cal-chevron:hover {
  background: #e3e7ec;
  color: #1f2a37;
}

.cal-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-jump-select {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #e3e7ec;
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
  color: #1f2a37;
  background: #f5f6f8;
  cursor: pointer;
}

.cal-today-btn {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  background: #d99a2b;
  color: #1a1a1a;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.12s;
}

.cal-today-btn:hover {
  background: #d99a2b;
}

/* Calendar outer container — matches generate_calendar.py */
.cal-outer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  background: #1f2a37;
}

/* Legend row below calendar */
.legend {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

/* Tasks section */
.tasks-header {
  margin-top: 0;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

/* Clickable task card — min tap target 44px */
.task-card {
  display: block;
  min-height: 64px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.task-card:hover {
  border-color: #8a97a8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.task-card.done {
  background: #f5f6f8;
  border-color: #e3e7ec;
  opacity: 0.75;
  cursor: default;
}

.task-cabin {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 4px;
}

.task-meta {
  font-size: 0.85rem;
  color: #5b6b7f;
}

.task-done-at {
  font-size: 0.78rem;
  color: #8a97a8;
  margin-top: 4px;
}

.done-header {
  color: #5b6b7f;
}

.done-list .task-card {
  cursor: default;
}

/* Empty state */
.empty-state {
  color: #5b6b7f;
  font-style: italic;
  margin: 12px 0;
  font-size: 0.9rem;
}

/* Checklist page */
.back-link {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 0.88rem;
  color: #4a5a6e;
  text-decoration: none;
  min-height: 44px;
  line-height: 44px;
}

.back-link:hover {
  color: #1f2a37;
  text-decoration: underline;
}

.task-subheader {
  margin: 4px 0 24px;
  font-size: 0.9rem;
  color: #5b6b7f;
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checklist li {
  border-radius: 8px;
  overflow: hidden;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  min-height: 52px;
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.1s;
  width: 100%;
}

.checklist-item:hover {
  background: #eef1f4;
}

.checklist-cb {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #1f5c33;
}

.done-btn {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 14px 24px;
  background: #1f5c33;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.done-btn:hover {
  background: #1f5c33;
}

.done-btn:active {
  background: #1f5c33;
}

/* Status page footer */
.site-footer {
  margin-top: 40px;
  padding-top: 12px;
  border-top: 1px solid #e3e7ec;
  font-size: 0.78rem;
  color: #8a97a8;
}

.footer-link {
  color: #8a97a8;
  text-decoration: none;
}

.footer-link:hover {
  color: #5b6b7f;
  text-decoration: underline;
}

/* Routine items section (crew view) */
.routine-header {
  margin-top: 32px;
}

.routine-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.routine-card {
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  padding: 14px 16px;
}

.routine-card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.routine-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.routine-dot-on_track { background: #1f5c33; }
.routine-dot-due_soon { background: #d99a2b; }
.routine-dot-overdue  { background: #b3261e; }

.routine-property {
  font-size: 0.82rem;
  font-weight: 600;
  color: #5b6b7f;
  margin-bottom: 2px;
}

.routine-task-name {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2a37;
  margin-bottom: 4px;
}

.routine-status {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.routine-status-on_track { color: #1f5c33; }
.routine-status-due_soon { color: #d99a2b; }
.routine-status-overdue  { color: #b3261e; }

.routine-last-done {
  font-size: 0.78rem;
  color: #8a97a8;
}

.routine-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  background: #eef1f4;
  color: #33404f;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: center;
}

.routine-btn:hover {
  background: #e3e7ec;
  border-color: #c4ccd6;
}

/* Confirmation dialog */
.maint-dialog {
  border: 1px solid #e3e7ec;
  border-radius: 12px;
  padding: 20px 24px;
  max-width: 340px;
  width: calc(100vw - 48px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.maint-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.maint-dialog-msg {
  font-size: 0.95rem;
  color: #1f2a37;
  margin: 0 0 20px;
  line-height: 1.5;
}

.maint-dialog-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.maint-dialog-cancel {
  min-height: 44px;
  padding: 10px 20px;
  background: #eef1f4;
  color: #4a5a6e;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.maint-dialog-cancel:hover {
  background: #e3e7ec;
}

.maint-dialog-confirm {
  min-height: 44px;
  padding: 10px 20px;
  background: #1f5c33;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.maint-dialog-confirm:hover {
  background: #1f5c33;
}

/* Tab bar (operator pages: /status, /settings) */
.tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e3e7ec;
  padding-bottom: 0;
}

.tab-link {
  display: inline-block;
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #5b6b7f;
  text-decoration: none;
  border-radius: 6px 6px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  margin-bottom: -2px;
  min-height: 44px;
  line-height: 28px;
  transition: color 0.12s, background 0.12s;
}

.tab-link:hover {
  color: #33404f;
  background: #eef1f4;
}

.tab-active {
  color: #1f2a37;
  background: #fff;
  border-color: #e3e7ec;
  border-bottom-color: #fff;
}

.tab-link-logout {
  margin-left: auto;
  color: #8a97a8;
  font-weight: 400;
}

.tab-link-logout:hover {
  color: #5b6b7f;
  background: transparent;
}

/* Flash messages */
.flash {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  font-weight: 500;
}
.flash-ok  { background: #d3ecd9; color: #1f5c33; border: 1px solid #d3ecd9; }
.flash-err { background: #f9d8d8; color: #8c2a2a; border: 1px solid #f4c4c4; }

/* Settings page */
.settings-item {
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.settings-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.settings-key-badge {
  font-size: 0.78rem;
  font-weight: 700;
  color: #4a5a6e;
  background: #eef1f4;
  border: 1px solid #e3e7ec;
  border-radius: 4px;
  padding: 2px 8px;
  font-family: monospace;
  flex-shrink: 0;
}

.settings-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.settings-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #5b6b7f;
}

.settings-input {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #e3e7ec;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  color: #1f2a37;
  background: #f5f6f8;
  width: 180px;
}

.settings-input:focus {
  outline: 2px solid #2c5686;
  outline-offset: 1px;
  background: #fff;
}

.settings-input-wide  { width: 320px; }
.settings-input-short { width: 80px; }
.settings-input-flex  { flex: 1; width: auto; min-width: 140px; }

.settings-select {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #e3e7ec;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  color: #1f2a37;
  background: #f5f6f8;
  width: 200px;
}

.settings-hint {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: #8a97a8;
}

.settings-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 28px;
}

.settings-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.checklist-reorder {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.reorder-btn {
  display: block;
  width: 28px;
  height: 22px;
  padding: 0;
  background: #eef1f4;
  border: 1px solid #e3e7ec;
  border-radius: 4px;
  font-size: 0.6rem;
  color: #5b6b7f;
  cursor: pointer;
  line-height: 1;
}

.reorder-btn:hover {
  background: #e3e7ec;
  color: #33404f;
}

.add-btn {
  min-height: 38px;
  padding: 8px 16px;
  background: #eef1f4;
  color: #33404f;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid #e3e7ec;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.add-btn:hover {
  background: #e3e7ec;
  border-color: #c4ccd6;
}

.save-btn {
  min-height: 38px;
  padding: 8px 16px;
  background: #1c3a5e;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
  margin-left: auto;
}

.save-btn:hover {
  background: #1c3a5e;
}

.remove-btn {
  min-height: 38px;
  padding: 8px 16px;
  background: #fff;
  color: #b3261e;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid #f4c4c4;
  border-radius: 7px;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: background 0.12s;
}

.remove-btn:hover {
  background: #f9d8d8;
}

.remove-btn-sm {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-left: 0;
}

/* ── Property detail page ────────────────────────────────────── */

.settings-prop-name {
  font-size: 0.88rem;
  color: #1f2a37;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prop-view-link {
  font-size: 0.78rem;
  font-weight: 500;
  color: #2c5686;
  text-decoration: none;
  flex-shrink: 0;
}

.prop-view-link:hover { text-decoration: underline; }

.prop-subsection-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: #c4ccd6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.prop-subsection { margin-bottom: 4px; }

.prop-detail-back {
  display: inline-block;
  font-size: 0.82rem;
  color: #5b6b7f;
  text-decoration: none;
  margin-bottom: 6px;
}

.prop-detail-back:hover { color: #33404f; text-decoration: underline; }

.prop-detail-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.prop-detail-title h1 { margin: 0; }

.prop-section {
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.prop-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #8a97a8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 16px;
}

.prop-section-placeholder {
  font-size: 0.85rem;
  color: #8a97a8;
  margin: 0 0 4px;
}

.prop-section-placeholder a { color: #2c5686; }

/* Labels inside property detail sections: slightly larger than settings list */
.prop-section .settings-label {
  font-size: 0.875rem;
  gap: 6px;
}

/* Hint text inside property detail sections */
.prop-section .settings-hint {
  font-size: 0.8rem;
  margin-top: 0;
}

/* Save/action row inside property detail sections */
.prop-section .settings-bar {
  margin-top: 16px;
  margin-bottom: 0;
}

/* Time inputs: wide enough to show HH:MM without clipping */
.settings-input-time {
  width: 110px;
  min-width: 110px;
}

@media (max-width: 640px) {
  .prop-section {
    padding: 16px;
  }
}

.settings-input-full {
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
}

.settings-fields-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

/* ── Shared base button + modifier classes ──────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.12s, border-color 0.12s;
  text-decoration: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: #1c3a5e; color: #fff; }
.btn-primary:hover { background: #1c3a5e; }

.btn-danger { background: #b3261e; color: #fff; }
.btn-danger:hover { background: #b91c1c; }

.btn-secondary { background: #eef1f4; color: #33404f; border: 1px solid #e3e7ec; }
.btn-secondary:hover { background: #e3e7ec; border-color: #c4ccd6; }

.btn-warning { background: #d99a2b; color: #fff; }
.btn-warning:hover { background: #6b4b06; }

.btn-ghost { background: transparent; color: #4a5a6e; border: 1px solid #e3e7ec; }
.btn-ghost:hover { background: #eef1f4; }

/* Status page pending action buttons */
.btn-confirm,
.btn-dismiss,
.btn-apply,
.btn-reject {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
}
.btn-confirm { background: #b3261e; color: #fff; }
.btn-confirm:hover { background: #b91c1c; }
.btn-dismiss { background: #1f5c33; color: #fff; }
.btn-dismiss:hover { background: #1f5c33; }
.btn-apply   { background: #1c3a5e; color: #fff; }
.btn-apply:hover   { background: #1c3a5e; }
.btn-reject  { background: #5b6b7f; color: #fff; }
.btn-reject:hover  { background: #4a5a6e; }

/* ── Booking edit / cancel dialog ─────────────────────────── */

.booking-dialog {
  border: 1px solid #e3e7ec;
  border-radius: 12px;
  padding: 20px 24px 24px;
  max-width: 480px;
  width: calc(100vw - 32px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  background: #fff;
}

.booking-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.dialog-title {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f2a37;
}

.ical-warning {
  background: #fbf4e5;
  color: #6b4b06;
  border: 1px solid #f3e2b8;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.82rem;
  margin-bottom: 12px;
}

.dialog-fieldset {
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  padding: 12px 14px 10px;
  margin: 0 0 14px;
}

.dialog-legend {
  font-size: 0.78rem;
  font-weight: 600;
  color: #5b6b7f;
  padding: 0 4px;
}

.dialog-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #5b6b7f;
  margin-bottom: 10px;
}

.dialog-label:last-child {
  margin-bottom: 0;
}

.dialog-input {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #e3e7ec;
  border-radius: 6px;
  font-size: 0.88rem;
  font-family: inherit;
  color: #1f2a37;
  background: #f5f6f8;
  width: 100%;
  box-sizing: border-box;
}

.dialog-input:focus {
  outline: 2px solid #2c5686;
  outline-offset: 1px;
  background: #fff;
}

.dialog-input-short {
  width: 100px;
}

.dialog-textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.4;
}

.dialog-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dialog-row .dialog-label {
  flex: 1;
  min-width: 120px;
}

.dialog-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
}

.dialog-cancel-msg {
  font-size: 0.9rem;
  color: #1f2a37;
  line-height: 1.5;
  margin: 0 0 20px;
}

.dialog-btn-cancel {
  min-height: 44px;
  padding: 10px 20px;
  background: #eef1f4;
  color: #4a5a6e;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}

.dialog-btn-cancel:hover {
  background: #e3e7ec;
}

.dialog-btn-save {
  min-height: 44px;
  padding: 10px 24px;
  background: #1c3a5e;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}

.dialog-btn-save:hover {
  background: #1c3a5e;
}

.dialog-btn-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.date-conflict-error {
  background: #f9d8d8;
  color: #8c2a2a;
  border: 1px solid #f4c4c4;
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 6px;
  font-size: 0.82rem;
}

.dialog-btn-danger {
  min-height: 44px;
  padding: 10px 24px;
  background: #b3261e;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}

.dialog-btn-danger:hover {
  background: #b91c1c;
}

/* ── Create booking mode buttons ──────────────────────────── */

.create-mode-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.create-mode-btn {
  flex: 1;
  padding: 9px 12px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  border: 2px solid #c4ccd6;
  border-radius: 8px;
  background: #f5f6f8;
  color: #5b6b7f;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.create-mode-btn--active {
  border-color: #2c5686;
  background: #eef2f6;
  color: #1c3a5e;
}

.create-mode-btn:hover:not(.create-mode-btn--active) {
  border-color: #8a97a8;
  color: #33404f;
}

.create-error {
  background: #f9d8d8;
  color: #8c2a2a;
  border: 1px solid #f4c4c4;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.85rem;
}

/* ── Home split layout ─────────────────────────────────────── */

.home-split {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 768px) {
  .home-split {
    flex-direction: row;
    align-items: flex-start;
    gap: 28px;
  }
  .home-tasks-col {
    flex: 1;
    min-width: 0;
  }
  .home-activity-col {
    flex: 1;
    min-width: 0;
  }
}

/* ── Status two-column layout ──────────────────────────────── */

.status-split {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 768px) {
  .status-split {
    flex-direction: row;
    align-items: flex-start;
    gap: 28px;
  }
  .status-main-col {
    flex: 1;
    min-width: 0;
  }
  .status-side-col {
    flex: 1;
    min-width: 0;
  }
}

/* ── Home panel card (shared by tasks and activity columns) ─── */

.home-panel {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  padding: 14px 16px;
}

/* ── Activity feed ─────────────────────────────────────────── */

.activity-summary {
  margin: 20px 0 0;
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  padding: 14px 16px;
}

.activity-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.activity-summary-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #33404f;
}

.activity-see-all {
  font-size: 0.78rem;
  color: #2c5686;
  text-decoration: none;
}

.activity-see-all:hover {
  text-decoration: underline;
}

.activity-empty {
  font-size: 0.82rem;
  color: #8a97a8;
  font-style: italic;
  margin: 6px 0 0;
}

.activity-row-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid #eef1f4;
  font-size: 0.82rem;
  line-height: 1.4;
}

.activity-dot-sm {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.activity-rel-time {
  color: #8a97a8;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
}

.activity-summary-text {
  color: #33404f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Full activity page */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.activity-item {
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  padding: 12px 14px;
}

.activity-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.activity-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.activity-type-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.activity-abs-time {
  font-size: 0.75rem;
  color: #8a97a8;
  margin-left: auto;
}

.activity-item-summary {
  font-size: 0.88rem;
  color: #1f2a37;
  line-height: 1.4;
}

.activity-details-expander {
  margin-top: 8px;
}

.activity-details-toggle {
  font-size: 0.78rem;
  color: #2c5686;
  cursor: pointer;
}

.activity-details-pre {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: #f5f6f8;
  border: 1px solid #e3e7ec;
  border-radius: 6px;
  font-size: 0.75rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Activity event type colors */
.evt-green  { background: #1f5c33; }
.evt-red    { background: #b3261e; }
.evt-amber  { background: #d99a2b; }
.evt-blue   { background: #1c3a5e; }
.evt-grey   { background: #8a97a8; }

.activity-type-green  { color: #1f5c33; }
.activity-type-red    { color: #b3261e; }
.activity-type-amber  { color: #d99a2b; }
.activity-type-blue   { color: #1c3a5e; }
.activity-type-grey   { color: #5b6b7f; }

/* ── Booking events card (inline widget) ───────────────────── */

.be-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #eef1f4;
}

.be-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-items: flex-start;
  padding-top: 2px;
}

.be-source-badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: #5b6b7f;
  background: #eef1f4;
  border: 1px solid #e3e7ec;
  border-radius: 4px;
  padding: 2px 5px;
  white-space: nowrap;
}

.be-type-badge {
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 5px;
  white-space: nowrap;
}

.be-type-green { background: #d3ecd9; color: #1f5c33; }
.be-type-red   { background: #f9d8d8; color: #8c2a2a; }
.be-type-amber { background: #fbf4e5; color: #6b4b06; }
.be-type-grey  { background: #eef1f4; color: #5b6b7f; }

.be-body {
  flex: 1;
  min-width: 0;
}

.be-guest {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f2a37;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.be-meta {
  font-size: 0.76rem;
  color: #5b6b7f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.be-time {
  font-size: 0.74rem;
  color: #8a97a8;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 3px;
}

/* ── Booking events full page ───────────────────────────────── */

.events-filter-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.events-filter-btn {
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #4a5a6e;
  background: #f5f6f8;
  border: 1px solid #e3e7ec;
  border-radius: 20px;
  text-decoration: none;
}

.events-filter-btn:hover { background: #eef1f4; }

.events-filter-active {
  color: #1c3a5e;
  background: #eef2f6;
  border-color: #c9d6e6;
  font-weight: 600;
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.be-card {
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  padding: 12px 14px;
}

.be-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.be-card-time {
  font-size: 0.75rem;
  color: #8a97a8;
  margin-left: auto;
}

.be-card-link {
  font-size: 0.78rem;
  color: #2c5686;
  text-decoration: none;
}

.be-card-link:hover { text-decoration: underline; }

.be-card-body {
  font-size: 0.88rem;
  color: #1f2a37;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.be-sep { color: #c4ccd6; }

.be-prop, .be-nights, .be-checkin { color: #4a5a6e; }

.be-card-summary {
  font-size: 0.78rem;
  color: #8a97a8;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.events-pagination {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.events-page-btn {
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #1c3a5e;
  background: #eef2f6;
  border: 1px solid #c9d6e6;
  border-radius: 6px;
  text-decoration: none;
}

.events-page-btn:hover { background: #e6ebf3; }

.events-page-info {
  font-size: 0.82rem;
  color: #8a97a8;
}

/* ── Rebook alert ─────────────────────────────────────────── */

.bk-rebook-alert {
  background: #fbf4e5;
  border: 1px solid #f3e2b8;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.bk-rebook-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #6b4b06;
  margin-bottom: 6px;
}

.bk-rebook-msg {
  font-size: 0.82rem;
  color: #5b6b7f;
  margin: 0 0 8px;
  line-height: 1.5;
}

.bk-rebook-link {
  font-size: 0.82rem;
  color: #1c3a5e;
  text-decoration: none;
}

.bk-rebook-link:hover {
  text-decoration: underline;
}

.bk-rebook-badge {
  color: #d99a2b;
  font-size: 0.82rem;
  margin-left: 4px;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  body {
    padding: 10px 12px 32px;
  }

  h1 {
    font-size: 1.15rem;
  }

  .task-cabin {
    font-size: 0.95rem;
  }

  /* Stack dialog rows vertically so date/time pairs don't squeeze */
  .dialog-row {
    flex-direction: column;
    gap: 0;
  }

  /* 16px prevents iOS auto-zoom on focus; tighter padding saves vertical space */
  input[type="date"].dialog-input,
  input[type="time"].dialog-input {
    font-size: 16px;
    padding: 6px 8px;
    min-height: 34px;
  }

  /* Cap date width — no need to span the full viewport */
  input[type="date"].dialog-input {
    max-width: 180px;
  }
}

/* ── Bookings tab ────────────────────────────────────────────── */

.bk-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.bk-search {
  flex: 1 1 200px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #c4ccd6;
  border-radius: 7px;
  font-size: 0.88rem;
  background: #fff;
  color: #1f2a37;
}

.bk-search:focus {
  outline: none;
  border-color: #2c5686;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}

.bk-select {
  padding: 8px 10px;
  border: 1px solid #c4ccd6;
  border-radius: 7px;
  font-size: 0.85rem;
  background: #fff;
  color: #1f2a37;
  cursor: pointer;
}

.bk-select:focus {
  outline: none;
  border-color: #2c5686;
}

/* Split layout — stacked on mobile, side-by-side on desktop */
.bk-split {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 768px) {
  .bk-split {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }

  .bk-list-col {
    flex: 0 0 33%;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    border: 1px solid #e3e7ec;
    border-radius: 10px;
    background: #fff;
  }

  .bk-detail-col {
    flex: 1 1 0;
  }
}

/* Mobile: body.has-selection hides list, shows detail only */
@media (max-width: 767px) {
  body.has-selection .bk-list-col {
    display: none;
  }

  .bk-detail-col {
    display: none;
  }

  body.has-selection .bk-detail-col {
    display: block;
  }
}

/* Booking list items */
.bk-item {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid #eef1f4;
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
}

.bk-item:last-of-type {
  border-bottom: none;
}

.bk-item:hover {
  background: #f5f6f8;
}

.bk-item--selected {
  background: #eef2f6;
  border-left: 3px solid #2c5686;
  padding-left: 11px;
}

.bk-item--selected:hover {
  background: #e6ebf3;
}

.bk-item--pending {
  border-left: 3px solid #d99a2b;
  padding-left: 11px;
}

.bk-item--cancelled {
  opacity: 0.55;
}

.bk-item--completed {
  opacity: 0.7;
}

.bk-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.bk-item-guest {
  font-size: 0.92rem;
  font-weight: 600;
  color: #1f2a37;
}

.bk-item-prop {
  font-size: 0.8rem;
  color: #5b6b7f;
  margin-bottom: 1px;
}

.bk-item-dates {
  font-size: 0.8rem;
  color: #8a97a8;
}

.bk-item-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fbf4e5;
  color: #6b4b06;
}

.bk-item--cancelled .bk-item-badge {
  background: #f9d8d8;
  color: #8c2a2a;
}

.bk-item--completed .bk-item-badge {
  background: #eef1f4;
  color: #4a5a6e;
}

.bk-load-more {
  display: block;
  text-align: center;
  padding: 12px;
  font-size: 0.85rem;
  color: #2c5686;
  text-decoration: none;
  border-top: 1px solid #e3e7ec;
}

.bk-load-more:hover {
  background: #f5f6f8;
}

/* Source indicator dot */
.bk-source-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.bk-src-airbnb  { background: #FF5A5F; }
.bk-src-booking { background: #003580; }
.bk-src-vrbo    { background: #1B5EDE; }
.bk-src-smoobu  { background: #1c3a5e; }
.bk-src-direct  { background: #1f5c33; }
.bk-src-website { background: #0891b2; }

/* Status badge */
.bk-status-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 4px;
  background: #eef1f4;
  color: #4a5a6e;
}

.bk-status-active             { background: #d3ecd9; color: #1f5c33; }
.bk-status-pending_modification,
.bk-status-pending_cancellation { background: #fbf4e5; color: #6b4b06; }
.bk-status-cancelled          { background: #f9d8d8; color: #8c2a2a; }
.bk-status-completed          { background: #eef1f4; color: #4a5a6e; }

/* Booking detail pane */
.bk-back-link {
  display: none;
  font-size: 0.85rem;
  color: #2c5686;
  text-decoration: none;
  margin-bottom: 12px;
}

@media (max-width: 767px) {
  .bk-back-link {
    display: inline-block;
  }
}

.bk-detail {
  padding: 4px 0 24px;
}

.bk-detail-empty {
  padding: 32px 0;
}

@media (min-width: 768px) {
  .bk-detail {
    padding: 4px 2px 24px;
  }
}

.bk-detail-header {
  margin-bottom: 16px;
}

.bk-detail-prop {
  font-size: 0.82rem;
  color: #5b6b7f;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.bk-detail-guest {
  font-size: 1.25rem;
  font-weight: 700;
  color: #14304d;
  margin-bottom: 6px;
}

.bk-detail-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #5b6b7f;
}

/* Pending section in detail */
.bk-pending-section {
  background: #fff;
  border: 2px solid #d99a2b;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.bk-pending-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #6b4b06;
  margin-bottom: 6px;
}

.bk-pending-msg {
  font-size: 0.82rem;
  color: #5b6b7f;
  margin: 0 0 10px;
}

.bk-pending-change {
  font-size: 0.82rem;
  color: #6b4b06;
  background: #fbf4e5;
  border-radius: 4px;
  padding: 4px 8px;
  display: inline-block;
  margin-bottom: 6px;
}

.bk-pending-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Detail rows */
.bk-detail-section {
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  padding: 4px 16px;
  margin-bottom: 16px;
}

.bk-detail-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #eef1f4;
  font-size: 0.88rem;
}

.bk-detail-row:last-child {
  border-bottom: none;
}

.bk-detail-row--notes {
  align-items: flex-start;
}

.bk-detail-lbl {
  flex: 0 0 110px;
  color: #5b6b7f;
  font-weight: 600;
  font-size: 0.82rem;
}

.bk-detail-val {
  color: #1f2a37;
  flex: 1;
  word-break: break-word;
}

.bk-detail-val a {
  color: #1c3a5e;
  text-decoration: none;
}

.bk-detail-val a:hover {
  text-decoration: underline;
}

.bk-detail-notes {
  white-space: pre-wrap;
  font-size: 0.85rem;
}

.bk-detail-uid {
  font-family: monospace;
  font-size: 0.75rem;
  color: #8a97a8;
  word-break: break-all;
}

/* Action buttons in detail pane */
.bk-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bk-action-edit {
  background: #1c3a5e;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 8px 16px;
  min-height: 38px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}

.bk-action-edit:hover {
  background: #1c3a5e;
}

.bk-action-cancel {
  background: #fff;
  color: #b3261e;
  border: 1px solid #e8a5a5;
  border-radius: 7px;
  padding: 8px 16px;
  min-height: 38px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}

.bk-action-cancel:hover {
  background: #f9d8d8;
}

.bk-action-view {
  background: #5b6b7f;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 8px 16px;
  min-height: 38px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}

.bk-action-view:hover {
  background: #4b5563;
}

/* ── Conflict cards (v6.7) ──────────────────────────────────────────────────── */
.conflict-section {
  margin-bottom: 20px;
}
.conflict-card {
  background: #fdf0f0;
  border: 2px solid #b3261e;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.conflict-header {
  font-size: 0.95rem;
  font-weight: 700;
  color: #b91c1c;
  margin-bottom: 8px;
}
.conflict-row {
  font-size: 0.88rem;
  color: #1f2a37;
  margin-bottom: 4px;
}
.conflict-portal {
  font-size: 0.82rem;
  color: #5b6b7f;
  margin: 0 4px;
}
.conflict-link {
  color: #1c3a5e;
  font-weight: 600;
  text-decoration: none;
}
.conflict-link:hover {
  text-decoration: underline;
}

/* ── Status indicator utilities (global) ────────────────────── */

.status-ok    { color: #1f5c33; font-weight: 600; }
.status-fail  { color: #b3261e; font-weight: 600; }
.status-muted { color: #8a97a8; }

/* ── Calendar Connections body ──────────────────────────────── */

.settings-feed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 6px;
}

.settings-feed-url {
  font-size: 0.8rem;
  color: #8a97a8;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-feed-status {
  font-size: 0.8rem;
  flex-shrink: 0;
}

.settings-feed-empty {
  font-size: 0.8rem;
  color: #8a97a8;
  margin: 4px 0 8px;
}

.settings-outbound-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.settings-outbound-url {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  font-family: monospace;
  color: #4a5a6e;
  background: #f5f6f8;
  border: 1px solid #e3e7ec;
  border-radius: 6px;
  padding: 7px 10px;
  min-height: 36px;
  box-sizing: border-box;
}

.settings-outbound-meta {
  font-size: 0.8rem;
  color: #8a97a8;
  margin-top: 4px;
}

/* ── Messages / email templates ─────────────────────────────── */

.settings-textarea {
  width: 100%;
  max-width: 560px;
  min-height: 130px;
  padding: 8px 10px;
  border: 1px solid #e3e7ec;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  color: #1f2a37;
  background: #f5f6f8;
  box-sizing: border-box;
  resize: vertical;
  line-height: 1.5;
}

.settings-textarea:focus {
  outline: 2px solid #2c5686;
  outline-offset: 1px;
  background: #fff;
}

.msg-tmpl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.msg-enabled-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #5b6b7f;
  cursor: pointer;
}

.msg-enabled-check {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #1c3a5e;
}

/* ── Collapsible message template cards ── */
.msg-card { padding: 0; }

.msg-card-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.88rem;
  color: #1f2a37;
}

.msg-card-toggle:hover { background: #f5f6f8; border-radius: 8px 8px 0 0; }

.msg-card-name {
  font-weight: 600;
  white-space: nowrap;
}

.msg-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}

.msg-enabled-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  white-space: nowrap;
}

.msg-badge-on  { background: #d3ecd9; color: #1f5c33; }
.msg-badge-off { background: #eef1f4; color: #5b6b7f; }
.msg-badge-draft { background: #fbf4e5; color: #6b4b06; }

.msg-card-trigger-summary {
  font-size: 0.78rem;
  color: #5b6b7f;
}

.msg-card-chevron {
  font-size: 0.75rem;
  color: #8a97a8;
  flex-shrink: 0;
}

.msg-card-body {
  padding: 0 14px 14px;
  border-top: 1px solid #eef1f4;
}

.msg-relative-fields { margin-top: 4px; }

.msg-vars-details { margin: 12px 0 4px; }

.msg-vars-summary {
  font-size: 0.82rem;
  color: #1c3a5e;
  cursor: pointer;
  list-style: none;
}

.msg-vars-summary::-webkit-details-marker { display: none; }

/* ── Booking detail Messages section ── */
.bk-messages-section {
  margin-top: 16px;
  border-top: 1px solid #e3e7ec;
  padding-top: 12px;
}

.bk-msg-empty {
  font-size: 0.82rem;
  color: #8a97a8;
  margin: 0;
}

.bk-msg-list { margin-bottom: 8px; }

.bk-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #eef1f4;
  flex-wrap: wrap;
}

.bk-msg-row:last-child { border-bottom: none; }

.bk-msg-sent   { opacity: 1; }
.bk-msg-pending { }
.bk-msg-failed  { }
.bk-msg-cancelled { opacity: 0.55; }

.bk-msg-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #33404f;
  flex: 1;
  min-width: 120px;
}

.bk-msg-edited {
  font-size: 0.7rem;
  font-weight: 500;
  color: #5b6b7f;
  background: #eef1f4;
  border-radius: 4px;
  padding: 1px 5px;
}

.bk-msg-detail {
  font-size: 0.75rem;
  color: #5b6b7f;
  flex: 1;
  min-width: 120px;
}

.bk-msg-failed .bk-msg-name { color: #b3261e; }

.bk-msg-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.bk-msg-btn {
  font-size: 0.75rem;
  padding: 3px 8px;
  border: 1px solid #e3e7ec;
  border-radius: 4px;
  background: #eef1f4;
  color: #33404f;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  font-weight: 600;
}

.bk-msg-btn:hover { background: #e3e7ec; border-color: #c4ccd6; }

.bk-msg-btn-primary {
  background: #1c3a5e;
  border-color: #1c3a5e;
  color: #fff;
}

.bk-msg-btn-primary:hover { background: #1c3a5e; }

.bk-msg-btn-danger {
  background: #fff;
  border-color: #f4c4c4;
  color: #b3261e;
}

.bk-msg-btn-danger:hover { background: #f9d8d8; }

.bk-msg-cancelled-header {
  font-size: 0.72rem;
  color: #8a97a8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 0 4px;
  border-top: 1px solid #eef1f4;
  margin-top: 4px;
}

.bk-msg-add {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.bk-msg-tmpl-select {
  font-size: 0.82rem;
  padding: 4px 8px;
  border: 1px solid #e3e7ec;
  border-radius: 6px;
  background: #fff;
  color: #33404f;
  flex: 1;
  min-width: 0;
}

.bk-preview-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5b6b7f;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bk-preview-val {
  font-size: 0.88rem;
  color: #1f2a37;
  margin-top: 2px;
}

.bk-preview-body {
  font-size: 0.82rem;
  color: #33404f;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f5f6f8;
  border: 1px solid #e3e7ec;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
  font-family: inherit;
}

.msg-vars-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 480px;
  font-size: 0.85rem;
}

.msg-var-token {
  font-family: monospace;
  font-size: 0.82rem;
  color: #1c3a5e;
  background: #eef2f6;
  border: 1px solid #d5e3f7;
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
  vertical-align: top;
}

.msg-var-desc {
  padding: 4px 0 4px 12px;
  color: #4a5a6e;
  vertical-align: top;
}

/* ── Status page (shared between /status standalone and /settings#status) ─── */

.pending-section {
  background: #fff;
  border: 2px solid #d99a2b;
  border-radius: 10px;
  padding: 4px 16px;
  margin-bottom: 20px;
}
.pending-row {
  padding: 14px 0;
  border-bottom: 1px solid #fbf4e5;
}
.pending-row:last-child { border-bottom: none; }
.pending-meta {
  font-size: 0.88rem;
  color: #1f2a37;
  font-weight: 600;
  margin-bottom: 4px;
}
.pending-detail {
  font-size: 0.82rem;
  color: #5b6b7f;
  margin-bottom: 8px;
}
.pending-change {
  font-size: 0.82rem;
  color: #6b4b06;
  background: #fbf4e5;
  border-radius: 4px;
  padding: 4px 8px;
  display: inline-block;
  margin-bottom: 8px;
}
.pending-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.status-section {
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  padding: 4px 16px;
  margin-bottom: 20px;
}
.status-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eef1f4;
}
.status-row:last-child { border-bottom: none; }
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}
.dot-green { background: #1f5c33; }
.dot-red   { background: #b3261e; }
.dot-amber { background: #d99a2b; }
.dot-grey  { background: #c4ccd6; }
.status-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #33404f;
  min-width: 130px;
  flex-shrink: 0;
}
.status-body {
  font-size: 0.88rem;
  color: #1f2a37;
}
.status-pending { color: #d99a2b; font-weight: 600; }
.status-time {
  font-size: 0.82rem;
  color: #8a97a8;
  margin-left: 8px;
}
.status-error-detail {
  font-size: 0.82rem;
  color: #b3261e;
  margin-top: 3px;
  opacity: 0.85;
}
.status-sub {
  font-size: 0.82rem;
  color: #5b6b7f;
  margin-top: 2px;
}
.data-freshness {
  font-size: 0.82rem;
  margin-bottom: 10px;
}
.freshness-green  { color: #1f5c33; }
.freshness-yellow { color: #d99a2b; }
.freshness-red    { color: #b3261e; }
.count-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.count-card {
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  padding: 10px 14px;
}
.count-label {
  font-size: 0.78rem;
  color: #5b6b7f;
  font-weight: 600;
  margin-bottom: 6px;
}
.count-row {
  font-size: 0.88rem;
  color: #33404f;
  line-height: 1.7;
}
@media (max-width: 500px) {
  .status-label { min-width: 110px; }
  .count-grid { grid-template-columns: 1fr; }
}

/* ── Shared data table (settings user table + performance table) ─── */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 8px;
}
.data-table th {
  text-align: left;
  font-size: 0.72rem;
  color: #5b6b7f;
  font-weight: 600;
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid #e3e7ec;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.data-table td {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid #eef1f4;
  vertical-align: middle;
}

/* ── Performance page ─── */

.occ-total-row td {
  border-top: 2px solid #e3e7ec;
  border-bottom: none;
  font-weight: 600;
  padding-top: 8px;
}

.perf-headline {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2a37;
  margin: 0 0 4px;
}
.perf-subtext {
  font-size: 0.88rem;
  color: #5b6b7f;
  margin: 0 0 20px;
}

/* ── Archived properties group (settings) ─── */

.prop-archived-group {
  margin-bottom: 16px;
}

.prop-archived-summary {
  font-size: 0.82rem;
  font-weight: 600;
  color: #5b6b7f;
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
}

.prop-archived-summary::-webkit-details-marker { display: none; }

.prop-archived-summary::before {
  content: "▸ ";
  color: #8a97a8;
}

.prop-archived-group[open] .prop-archived-summary::before {
  content: "▾ ";
}

.prop-archived-list {
  padding-top: 6px;
}

.prop-archived-item {
  opacity: 0.7;
}

.prop-archived-name {
  font-size: 0.85rem;
  color: #5b6b7f;
}

.prop-archived-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: #eef1f4;
  color: #5b6b7f;
  white-space: nowrap;
}

/* ── Property archive state pill (property_detail System section) ─── */

.prop-state-pill {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

.prop-state-pill-active {
  background: #d3ecd9;
  color: #1f5c33;
}

.prop-state-pill-archived {
  background: #eef1f4;
  color: #5b6b7f;
}

/* v7.2.1 — PriceLabs demand overlay on calendar day cells.
   Dot sits in the bottom-right of a day column inside the property row grid.
   The grid container is already position:relative (inline-style in the
   _generate_calendar_html output), so absolute positioning works as written. */
.demand-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  bottom: 4px;
  pointer-events: auto;
  z-index: 1;
}
.demand-dot.demand-unavailable { background: transparent; }
.demand-dot.demand-low      { background: #d3ecd9; }
.demand-dot.demand-normal   { background: #4f8a3a; }
.demand-dot.demand-good     { background: #2c5686; }
.demand-dot.demand-high     { background: #1f5f8b; }

/* Freshness indicator shown wherever PriceLabs data is surfaced. */
.pl-freshness {
  font-size: 0.78rem;
  color: #8a97a8;
  margin-top: 8px;
}
.pl-freshness.pl-stale { color: #b91c1c; }

/* SVG forecast chart on property detail page. */
.pl-forecast-chart {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
}
.pl-forecast-legend {
  font-size: 0.78rem;
  color: #5b6b7f;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.pl-forecast-legend .pl-legend-line {
  display: inline-block;
  width: 28px;
  border-top: 2px solid #1c3a5e;
  vertical-align: middle;
  margin-right: 4px;
}
.pl-forecast-legend .pl-legend-line.dashed {
  border-top: 2px dashed #8a97a8;
}
.pl-forecast-legend .pl-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2c5686;
  vertical-align: middle;
  margin-right: 4px;
}

/* v7.3.0 — Guest-facing check-in form (mobile-first, no top nav). */
.checkin-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  color: #1f2a37;
}
.checkin-h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.checkin-lede {
  font-size: 0.95rem;
  color: #4a5a6e;
  margin: 0 0 12px;
}
.checkin-intro {
  background: #f5f6f8;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 16px 0 20px;
  font-size: 0.88rem;
  color: #4a5a6e;
}
.checkin-intro p { margin: 0 0 8px; }
.checkin-intro p:last-child { margin: 0; }
.checkin-form { display: flex; flex-direction: column; gap: 16px; }
.checkin-fieldset {
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.checkin-fieldset legend {
  font-size: 0.85rem;
  font-weight: 700;
  color: #5b6b7f;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 6px;
}
.checkin-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.checkin-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
/* v7.3.1: scope the flex sizing to fields INSIDE a row. Otherwise a bare
   .checkin-field as a direct child of .checkin-form (column flex) interprets
   the 220px basis as vertical height, producing a tall empty gap (the
   v7.3.0 bug between Place of issue and Email/Phone). */
.checkin-row > .checkin-field {
  flex: 1 1 220px;
}
.checkin-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #33404f;
}
.checkin-req { color: #b3261e; margin-left: 2px; }
.checkin-field input,
.checkin-field select,
.checkin-field textarea {
  font: inherit;
  padding: 9px 10px;
  border: 1px solid #c4ccd6;
  border-radius: 6px;
  background: #fff;
  color: #1f2a37;
  min-height: 40px;
}
.checkin-field textarea { min-height: 80px; resize: vertical; }
.checkin-field input:focus,
.checkin-field select:focus,
.checkin-field textarea:focus {
  outline: 2px solid #1c3a5e;
  outline-offset: 1px;
  border-color: #1c3a5e;
}
.checkin-err {
  color: #b91c1c;
  font-size: 0.78rem;
}
.checkin-submit {
  appearance: none;
  border: none;
  background: #1f5c33;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 16px;
  border-radius: 8px;
  cursor: pointer;
  min-height: 48px;
}
.checkin-submit:hover  { background: #1f5c33; }
.checkin-submit:active { background: #14532d; }
.checkin-footer {
  text-align: center;
  font-size: 0.78rem;
  color: #8a97a8;
  padding: 24px 16px;
}

/* v7.3.1 — Additional guests styling.
   v7.3.3: collapsible removed; section renders inline as a peer of Main Guest
   using <fieldset class="checkin-fieldset"><legend>. The collapsible CSS
   (summary/chevron) is gone — only the card + Add button styles remain. */
.checkin-additional-note {
  font-size: 0.86rem;
  color: #4a5a6e;
  margin: 0;
}
.checkin-additional-add {
  appearance: none;
  background: #eef1f4;
  color: #1c3a5e;
  border: 1px dashed #c4ccd6;
  border-radius: 7px;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 14px;
  cursor: pointer;
  text-align: center;
  align-self: flex-start;
}
.checkin-additional-add:hover {
  background: #e3e7ec;
  border-color: #8a97a8;
  border-style: solid;
}
.checkin-additional-card {
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  padding: 12px;
  margin: 10px 0;
  background: #f5f6f8;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.checkin-additional-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  color: #4a5a6e;
  font-size: 0.86rem;
}
.checkin-additional-remove {
  appearance: none;
  border: 1px solid #f4c4c4;
  background: #fff;
  color: #b3261e;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.checkin-additional-remove:hover { background: #fdf0f0; }

/* v7.3.0 — Operator-side Guest check-in section on /bookings/<id>. */
.bk-checkin-section {
  margin-top: 16px;
  border-top: 1px solid #e3e7ec;
  padding-top: 12px;
}
.bk-checkin-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  background: #eef1f4;
  border: 1px solid #e3e7ec;
  border-radius: 6px;
  padding: 6px 8px;
  word-break: break-all;
  display: block;
  margin: 6px 0;
}


/* ============ foundations + base chrome (Phase 14) ============ */
/* ── design tokens ──────────────────────────────────────────────────────── */
:root {
  --navy: #1c3a5e;
  --navy-hover: #16324f;
  --amber: #d99a2b;
  --amber-hover: #c2861f;
  --ground: #f5f6f8;
  --card: #ffffff;
  --border: #e3e7ec;
  --radius: 12px;
  --text: #1f2a37;
  --muted: #5b6b7f;
  --faint: #8a97a8;
  --divider: #eef1f4;
  /* sidebar */
  --sb-w: 232px;
  --sb-text: #c9d4e2;
  --sb-active: rgba(255,255,255,.10);
  --sb-sub: #9fb0c6;
  /* status pills */
  --green-bg: #d3ecd9; --green-fg: #1f5c33;
  --red-bg: #f9d8d8;   --red-fg: #8c2a2a;
  --warn-bg: #fbf4e5;  --warn-fg: #6b4b06;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-head: "Lora", Georgia, serif;
}

/* ── reset / base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Phase 14 polish: mockup type scale. 15px root (14px read too small in
   practice); body 15px, page title 32px, section titles 19px, meta 13px. Line
   heights kept generous (1.5 body, 1.2 headings) so denser text still reads. */
html { font-size: 15px; }

body {
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--text);
  font-size: 1rem;            /* 15px */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .page-title, .prop-detail-title h1 {
  font-family: var(--font-head);
}
h1 { margin: 0 0 4px; font-size: 23px; font-weight: 700; color: var(--navy); line-height: 1.2; }
h2 { margin: 22px 0 12px; font-size: 19px; font-weight: 600; color: var(--navy); line-height: 1.25; }  /* section titles */
h3 { margin: 18px 0 10px; font-size: 15px; font-weight: 600; color: var(--muted); }
a { color: var(--navy); }
.subtitle { margin: 0 0 16px; font-size: 13px; color: var(--muted); }

/* ── app shell: sidebar + content ───────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }

.app-sidebar {
  width: var(--sb-w); min-width: var(--sb-w); background: var(--navy);
  color: #fff; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sb-brand { padding: 20px 20px 16px; }
.sb-tenant {
  font-family: var(--font-head); font-size: 20px; font-weight: 700;
  color: #fff; line-height: 1.2; word-break: break-word;
}
.sb-user { font-size: 12px; color: var(--sb-sub); margin-top: 4px; }
.sb-nav { display: flex; flex-direction: column; padding: 8px 12px; gap: 2px; flex: 1 1 auto; }
.sb-nav-spacer { flex: 1 1 auto; }   /* pushes Profile/Help/Log out to the bottom */
.sb-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: 8px; font-size: 14px; font-weight: 500;
  color: var(--sb-text); text-decoration: none; white-space: nowrap;
}
.sb-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sb-link.active { background: var(--sb-active); color: #fff; }
.sb-link svg { width: 18px; height: 18px; flex: none; stroke-width: 1.8; }
.sb-group-sep { height: 1px; background: rgba(255,255,255,.10); margin: 10px 14px; }
.sb-footer { padding: 14px 20px 18px; font-size: 12px; color: var(--sb-sub); }
.sb-footer a { color: var(--amber); font-family: var(--font-head); font-weight: 600;
  text-decoration: none; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content { padding: 32px 40px; flex: 1; max-width: 1400px; width: 100%; margin: 0 auto; }

/* ── page header ────────────────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.page-header-text { min-width: 0; }
.page-title {
  font-family: var(--font-head); font-size: 32px; font-weight: 700;
  color: var(--navy); margin: 0; line-height: 1.15;
}
.page-subtitle { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.page-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── flash bar (slim, under header) ─────────────────────────────────────── */
.flash, .flash-bar {
  border-radius: 8px; padding: 10px 14px; font-size: 0.88rem;
  margin: 0 0 16px; border: 1px solid transparent;
}
.flash-ok  { background: var(--green-bg); color: var(--green-fg); border-color: #bcdcc4; }
.flash-err { background: var(--red-bg);   color: var(--red-fg);   border-color: #e8b6b6; }

/* ── mobile top bar + bottom tab bar ────────────────────────────────────── */
.app-topbar, .app-tabbar { display: none; }
.app-topbar {
  background: var(--navy); color: #fff; align-items: center;
  justify-content: space-between; padding: 10px 16px; gap: 12px;
  position: sticky; top: 0; z-index: 40;
}
.tb-tenant { font-family: var(--font-head); font-weight: 700; font-size: 16px;
  line-height: 1.15; }
.tb-date { font-size: 11px; color: var(--sb-sub); }
.tb-initials {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.16);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex: none;
}
.app-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: #fff; border-top: 1px solid var(--border);
  justify-content: space-around; padding: 4px 0 env(safe-area-inset-bottom);
}
.tab-item {
  flex: 1; min-height: 52px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-decoration: none; background: none; border: none; cursor: pointer;
  border-top: 2px solid transparent;
}
.tab-item svg { width: 20px; height: 20px; stroke-width: 1.8; }
.tab-item.active { color: var(--navy); border-top-color: var(--amber); }
.more-sheet { border: none; border-radius: 16px 16px 0 0; padding: 0;
  width: 100%; max-width: 100%; margin: 0 0 0 0; position: fixed; bottom: 0; }
.more-sheet::backdrop { background: rgba(0,0,0,.4); }
.more-sheet-inner { padding: 8px 8px 18px; }
.more-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border);
  margin: 10px auto 6px; }
.more-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  font-size: 15px; color: var(--text); text-decoration: none; border-radius: 10px; }
.more-link:hover { background: var(--divider); }
.more-link svg { width: 20px; height: 20px; stroke-width: 1.8; color: var(--muted); }

/* ── buttons (spec: 40px tall, radius 8px) ──────────────────────────────── */
.btn, .save-btn, .btn-primary, .btn-secondary, .btn-danger, .btn-warning {
  height: 40px; padding: 0 18px; border-radius: 8px; font-size: 0.9rem;
  font-weight: 600; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; border: 1px solid transparent;
  text-decoration: none; line-height: 1; font-family: var(--font-body);
}
.btn-primary, .save-btn { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover, .save-btn:hover { background: var(--navy-hover); border-color: var(--navy-hover); }
.btn-accent { background: var(--amber); color: #fff; border-color: var(--amber); }
.btn-accent:hover { background: var(--amber-hover); }
.btn-secondary { background: #fff; color: var(--navy); border-color: #d8dee6; }
.btn-secondary:hover { background: var(--divider); }
.btn-danger { background: #fff; color: var(--red-fg); border-color: #e3b3b3; }
.btn-danger:hover { background: #fdf0f0; }
.btn:disabled, .save-btn:disabled { opacity: .55; cursor: default; }

/* ── inputs / toggles / tabs ────────────────────────────────────────────── */
.settings-input, .settings-select, .settings-textarea, .dialog-input,
.bk-search, .bk-select, .ob-input, .ob-select {
  border-radius: 8px; border: 1px solid #d8dee6; color: var(--text);
}
.settings-input:focus, .settings-select:focus, .settings-textarea:focus,
.dialog-input:focus, .bk-search:focus, .bk-select:focus,
.ob-input:focus, .ob-select:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 2px rgba(28,58,94,.12);
}

/* card token unification */
.prop-section, .home-panel, .bk-detail, .msg-card, .count-card, .ob-card,
.checkin-additional-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.prop-section-title, .prop-subsection-label { color: var(--faint); }

/* channel chips / status pills keep meaning (values set in component layer);
   status pill base shape */
.bk-status-badge, .prop-state-pill, .be-type-badge {
  border-radius: 999px; font-weight: 600;
}

/* Settings sub-tabs: amber 2px underline */
.stab-active, .settings-tab.active { border-bottom: 2px solid var(--amber); color: var(--navy); }

/* ── public / pre-tenant pages (no sidebar) ─────────────────────────────── */
.public-wrap { max-width: 560px; margin: 0 auto; padding: 40px 20px 64px; }
.public-topbar { text-align: center; padding: 28px 20px 8px; }
.public-brand { font-family: var(--font-head); font-weight: 700; font-size: 22px;
  color: var(--navy); letter-spacing: -.01em; }
.public-footer { text-align: center; font-size: 12px; color: var(--faint);
  padding: 24px 20px 40px; }
.public-footer a { color: var(--amber); font-family: var(--font-head); font-weight: 600;
  text-decoration: none; }

/* ── responsive switch ──────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .app-sidebar { display: none; }
  .app-topbar { display: flex; }
  .app-tabbar { display: flex; }
  .app-content { padding: 18px 16px 76px; }  /* room for bottom tab bar */
  .page-title { font-size: 24px; }
}
@media (min-width: 1024px) {
  .app-topbar, .app-tabbar { display: none !important; }
}

/* ================================================================= */
/* Phase 14 polish — values copied from design-reference/*.html      */
/* ================================================================= */

/* cards get the reference soft shadow */
.home-panel, .prop-section, .bk-detail, .activity-summary, .msg-card,
.count-card, .cal-card { box-shadow: 0 1px 2px rgba(28,58,94,0.04); }

/* ── calendar: grid inside a white card + header control group ───── */
.cal-card {
  background: #fff; border: 1px solid #e3e7ec; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(28,58,94,0.04); padding: 6px; margin-bottom: 22px;
  overflow: hidden;
}
.cal-card .cal-outer { border: 0; margin: 0; }
.cal-card .legend {
  padding: 14px 14px 2px; margin: 0; display: flex; flex-wrap: wrap;
  gap: 18px; font-size: 12px; color: #5b6b7f; align-items: center;
}
.cal-nav--right { display: flex; justify-content: flex-end; margin: 0 0 4px; }
.cal-nav-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-actions .cal-nav-group { margin: 0; }
.cal-today-btn, .cal-chevron {
  height: 40px; border-radius: 8px; border: 1px solid #d8dee6; background: #fff;
  color: #1c3a5e; font-weight: 600; display: inline-flex; align-items: center;
  justify-content: center; text-decoration: none;
}
.cal-today-btn { padding: 0 14px; font-size: 14px; }
.cal-chevron { width: 40px; font-size: 16px; }
.cal-month-header {
  font-family: var(--font-head); font-weight: 600; font-size: 18px;
  color: #1c3a5e; min-width: 180px; text-align: center;
}
.cal-jump-select {
  height: 40px; border-radius: 8px; border: 1px solid #d8dee6; background: #fff;
  color: #1c3a5e; padding: 0 10px; font-size: 14px;
}
.btn-newbooking {
  height: 40px; padding: 0 16px; border-radius: 8px; border: 0; background: #d99a2b;
  color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; margin-left: 8px;
}
.btn-newbooking:hover { background: #c48a24; }

/* ── Today + Recent two-up cards ─────────────────────────────────── */
.home-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
@media (max-width: 900px) { .home-split { grid-template-columns: 1fr; } }
.home-panel { padding: 22px 24px; }
.today-head { display: flex; justify-content: space-between; align-items: baseline; }
.tasks-header, .activity-summary-title { font-size: 18px; }
.today-tz { font-size: 12px; color: #5b6b7f; }
.task-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.today-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border: 1px solid #eef1f4; border-radius: 10px; text-decoration: none;
  background: #fff;
}
.today-row:hover { border-color: #d8dee6; }
.today-time { width: 44px; text-align: center; font-weight: 700; font-size: 13px; flex: none; }
.today-time--out { color: #8c2a2a; }
.today-time--in { color: #1f5c33; }
.today-row-body { flex: 1; min-width: 0; }
.today-row-body .task-cabin { font-weight: 600; color: #1c3a5e; }
.today-row-body .task-meta { font-size: 13px; color: #5b6b7f; }
.cleaning-pill, .ready-pill {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  white-space: nowrap; flex: none;
}
.cleaning-pill { color: #6b4b06; background: #fbf4e5; }   /* pending: amber */
.ready-pill    { color: #1f5c33; background: #d3ecd9; }   /* done: green */
.today-row--done { opacity: 0.6; }
.today-row--done .today-time--out { color: #8a97a8; }
.today-done-time { color: var(--muted); font-size: 12px; margin-left: 8px; }

/* ── Recent bookings: one line per row ───────────────────────────── */
.be-row--line {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid #eef1f4;
}
.be-row--line:last-child { border-bottom: 0; }
.be-line-name { font-weight: 600; color: #1c3a5e; }
.be-line-meta { color: #5b6b7f; font-size: 13px; flex: 1; min-width: 0; }
.be-row--line .be-time { color: #8a97a8; font-size: 12px; white-space: nowrap; }
.be-row--line .be-type-badge {
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
}

/* ── channel + status pills (shared) ─────────────────────────────── */
.bk-chan-pill, .bk-status-badge {
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  display: inline-block; white-space: nowrap;
}
.bk-src-airbnb  { background: #f9d8d8; color: #8c2a2a; }
.bk-src-booking { background: #d5e3f7; color: #1c3a5e; }
.bk-src-vrbo    { background: #f6e7b7; color: #6b4b06; }
.bk-src-website { background: #e6d8f4; color: #4d2c7a; }
.bk-src-direct  { background: #d3ecd9; color: #1f5c33; }
.bk-src-block   { background: #e6e8eb; color: #5b6b7f; }
.bk-src-smoobu  { background: #e6e8eb; color: #5b6b7f; }
.bk-status-active            { background: #d3ecd9; color: #1f5c33; }
.bk-status-completed         { background: #e6e8eb; color: #5b6b7f; }
.bk-status-cancelled         { background: #f9d8d8; color: #8c2a2a; }
.bk-status-pending_cancellation,
.bk-status-pending_modification { background: #fbf4e5; color: #6b4b06; }

/* ── Bookings list rows ──────────────────────────────────────────── */
.bk-list-col { background: #fff; border: 1px solid #e3e7ec; border-radius: 12px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(28,58,94,0.04); }
.bk-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid #eef1f4; border-left: 3px solid transparent;
  text-decoration: none;
}
.bk-item-top { flex: 1; min-width: 0; display: block; }
.bk-item-guest { font-weight: 600; color: #1c3a5e; display: block; }
.bk-item-prop, .bk-item-dates { font-size: 13px; color: #5b6b7f; }
.bk-item--selected { background: #fbf4e5; border-left-color: #d99a2b; }
.bk-item--cancelled .bk-item-guest, .bk-item--completed .bk-item-guest,
.bk-item--cancelled .bk-item-prop, .bk-item--completed .bk-item-prop,
.bk-item--cancelled .bk-item-dates, .bk-item--completed .bk-item-dates {
  color: #8a97a8;
}
.bk-item .bk-chan-pill { align-self: center; }

/* ── Booking detail: eyebrow, name, pills, stat cards, kv ────────── */
.bk-detail { padding: 26px 30px; position: relative; }
.bk-detail-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  color: #8a97a8; text-transform: uppercase; }
.bk-detail-guest { font-family: var(--font-head); font-size: 26px; font-weight: 700;
  color: #1c3a5e; margin-top: 6px; }
/* Edit/Cancel float to the top-right of the card (markup order unchanged) */
.bk-detail-actions { position: absolute; top: 26px; right: 30px; display: flex; gap: 8px; margin: 0; }
.bk-action-edit, .bk-action-view {
  height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid #d8dee6;
  background: #fff; color: #1c3a5e; font-weight: 600; font-size: 14px; cursor: pointer;
}
.bk-action-cancel {
  height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid #f1c9c9;
  background: #fff; color: #8c2a2a; font-weight: 600; font-size: 14px; cursor: pointer;
}
.bk-detail-pills { display: flex; gap: 8px; margin-top: 8px; }
.bk-stat-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px; margin-top: 22px; }
.bk-stat { border: 1px solid #eef1f4; border-radius: 10px; padding: 14px 16px; }
.bk-stat-lbl { font-size: 12px; color: #5b6b7f; }
.bk-stat-val { font-weight: 700; color: #1c3a5e; font-size: 16px; margin-top: 4px; }
.bk-stat-sub { color: #5b6b7f; font-weight: 600; }
.bk-detail-section { margin-top: 18px; }
.bk-detail-row { display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid #eef1f4; font-size: 14px; }
.bk-detail-lbl { color: #5b6b7f; }
.bk-detail-val { color: #1f2a37; text-align: right; }

/* ── Settings > Properties master list (left column of cards) ────── */
.props-master { display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.prop-card {
  display: block; background: #fff; border: 1px solid #e3e7ec; border-radius: 12px;
  padding: 14px 16px; text-decoration: none;
}
.prop-card:hover { border-color: #d8dee6; }
.prop-card-name { font-weight: 600; color: #1c3a5e; }
.prop-card-sub { font-size: 13px; color: #5b6b7f; margin-top: 2px; }
.prop-add-btn {
  height: 42px; border-radius: 8px; border: 1px dashed #b9c3cf; background: transparent;
  color: #1c3a5e; font-weight: 600; font-size: 14px; cursor: pointer; width: 100%;
}
.prop-add-btn:hover { background: #f5f6f8; }

/* ── Settings > Properties master-detail ─────────────────────────── */
.props-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .props-layout { grid-template-columns: 1fr; } }
.props-left { display: flex; flex-direction: column; gap: 12px; }
.props-left .settings-bar { margin: 16px 0 0; padding: 0; }   /* 16px between last card and + Add property */
.props-master { display: flex; flex-direction: column; gap: 10px; max-width: none; }
.props-master .settings-item { border: 0; background: none; padding: 0; margin: 0; }  /* no card-in-card */
.prop-card--selected { border-left: 3px solid #d99a2b; background: #fbf4e5; }
.props-currency { margin-top: 4px; }
.props-right { min-width: 0; }
.props-right .prop-detail-title { margin-top: 0; }
.props-right .prop-section:first-of-type { margin-top: 0; }
/* One Save per property: sticky bar with title + Save changes at the top right */
.prop-save-bar {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ground); padding: 4px 0 12px; margin-bottom: 4px;
}
.prop-save-bar .prop-detail-title { margin: 0; }
.prop-save-bar .save-btn { flex: none; }

/* ── Settings > Message templates master-detail ──────────────────── */
.msg-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .msg-layout { grid-template-columns: 1fr; } }
.msg-left { display: flex; flex-direction: column; gap: 10px; }
.msg-left .prop-add-btn { margin-top: 6px; }
.msg-nav {
  display: block; text-align: left; width: 100%; cursor: pointer;
  background: #fff; border: 1px solid #e3e7ec; border-left: 3px solid transparent;
  border-radius: 12px; padding: 12px 14px; font-family: var(--font-body);
}
.msg-nav:hover { border-color: #d8dee6; }
.msg-nav--selected { border-left-color: #d99a2b; background: #fbf4e5; }
.msg-nav-name { font-weight: 600; color: #1c3a5e; }
.msg-nav-sub { font-size: 12px; color: #5b6b7f; margin-top: 2px; line-height: 1.35; }
.msg-nav-pills { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.msg-right { min-width: 0; }
.msg-right .msg-editor { margin-top: 0; }

/* ── Status tab: calendar-refresh age colour (green<30m / amber30-120m / red) ── */
.cal-age-green { color: #1f5c33; }
.cal-age-amber { color: #6b4b06; }
.cal-age-red   { color: #8c2a2a; }

/* ── Message templates: amber warning + link-styled variable toggle ──────── */
.msg-warn {
  background: #fbf4e5; border-left: 3px solid #d99a2b; color: #6b4b06;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: .9rem; line-height: 1.5;
}
.msg-warn code { background: rgba(217,154,43,.18); padding: 1px 5px; border-radius: 4px; }
.msg-vars-details { margin-top: 8px; }
.msg-vars-summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  color: var(--navy); font-size: .88rem; font-weight: 600; width: max-content;
}
.msg-vars-summary::-webkit-details-marker { display: none; }
.msg-vars-summary:hover { text-decoration: underline; }
.msg-vars-chevron { display: inline-block; transition: transform .12s; }
.msg-vars-details[open] .msg-vars-chevron { transform: rotate(90deg); }

/* ── Status tab: parallel column section headings ("System health" | "System activity") ── */
.status-col-head { margin: 0 0 12px; font-size: 19px; }
.status-main-col > .status-col-head:first-child,
.status-side-col > .status-col-head:first-child { margin-top: 0; }
.activity-summary-header--seeall { justify-content: flex-end; }

/* ── Cleaning task page: reopen button + dimmed (but visible) routines ────── */
.done-btn--reopen { background: #fff !important; color: #1c3a5e !important; border: 1px solid #d8dee6 !important; }
.routine-list--dim { opacity: 0.6; }

/* ── Sub-tabs (shared by Settings + Admin) ───────────────────────────────── */
.settings-subtabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch; }
.settings-subtab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 16px;
  font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; margin-bottom: -1px;
  font-family: var(--font-body); }
.settings-subtab:hover { color: var(--navy); }
.settings-subtab.active { color: var(--navy); border-bottom-color: var(--amber); font-weight: 600; }
.settings-section { display: none; }
.settings-section.active { display: block; }

/* channel pill: muted grey when no real channel resolves (feed-source fallback) */
.bk-chan-pill.bk-chan-muted { background: #e6e8eb; color: #8a97a8; }

/* ── Settings property detail as ONE card (sections separated by dividers) ── */
.prop-detail-card {
  background: #fff; border: 1px solid #e3e7ec; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(28,58,94,.04); padding: 0 30px;
}
/* sections inside the card: no inner card, no double padding, a 1px divider between */
.prop-detail-card .prop-section {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  margin: 0; padding: 22px 0; border-bottom: 1px solid #eef1f4;
}
.prop-detail-card > .prop-section:last-child { border-bottom: 0; }
/* card header: title + "Save changes" top-right, sticky, divider under it */
.prop-detail-card .prop-save-bar {
  background: #fff; padding: 20px 0 14px; margin: 0; border-bottom: 1px solid #eef1f4;
}