/* CleanCheck, restyled to the Superhero design system the other apps use: flat #f4f6f8 page,
   white cards with a hairline border and 22px corners, system sans, blue as the one brand
   colour and everything else as signal. Loaded AFTER cleaning-app-v2.css and only restyles;
   no markup or script changes, so every behaviour is untouched. Remove this file and the
   old look comes back. */

:root {
  --sand: #ffffff;        /* the other apps sit on the theme's white page */
  --warm-white: #ffffff;
  --forest: #0c71c3;
  --forest-light: #0a63ab;
  --ink: #0f172a;
  --ink-soft: #2d3748;
  --mist: #e8edf2;
  --mist-dark: #cfd8e3;
  --done: #28ae63;
  --warn: #ef4444;
  --clay: #d97706;
  --clay-light: #fde68a;
  --clay-dark: #b45309;
  --clay-deep: #92400e;
  --shh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shh-shadow: 0 1px 0 rgba(15,23,42,.03), 0 8px 22px rgba(15,23,42,.03);
  --shh-radius: 22px;
}

/* ---------- page and type ---------- */
body { background: var(--sand) !important; font-family: var(--shh-font) !important; color: var(--ink); }
body .entry-content, body .entry-content button, body .entry-content input, body .entry-content select, body .entry-content textarea,
.settings-modal, .settings-modal *, .invite-access-modal, .invite-access-modal *, .stay-calendar-modal, .stay-calendar-modal *,
.fab-dock, .fab-dock *, .submit-bar, .submit-bar *, .lightbox, .lightbox *, .rating-modal, .rating-modal * {
  font-family: var(--shh-font);
}
.logo { font-family: var(--shh-font); font-weight: 700; font-size: 22px; letter-spacing: -0.2px; color: var(--ink); }
.logo span { color: var(--forest); font-style: normal; }
.success-title, .rating-title { font-family: var(--shh-font); font-weight: 700; }

/* ---------- header ---------- */
/* Sticky, so it needs the page colour behind it or the content scrolls through it. */
header { background: #fff; border-bottom: 1px solid var(--mist); padding-top: 10px; padding-bottom: 8px; }
.logo-badge-img { height: 56px; }
.property-select {
  background-color: #fff; border: 1px solid var(--mist-dark); border-radius: 999px;
  font-family: var(--shh-font); font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 8px 32px 8px 16px; min-height: 40px; max-width: 420px;
}
.property-select:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(12,113,195,.15); }

/* ---------- top tabs ---------- */
.ui-tabs-wrap { background: transparent; border-bottom: 1px solid var(--mist); padding: 0 14px; gap: 2px; }
.ui-tab-btn {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent;
  color: var(--ink-soft); font-size: 15px; font-weight: 600; padding: 10px 14px; min-height: 42px;
}
.ui-tab-btn:hover { background: transparent; color: var(--ink); }
.ui-tab-btn.active { border-color: transparent; border-bottom-color: var(--forest); background: transparent; color: var(--forest); box-shadow: none; }
.ui-calendar-btn, .ui-settings-btn {
  background: #fff; border: 1px solid var(--mist-dark); border-radius: 999px; color: var(--ink-soft);
  width: 38px; height: 38px; min-height: 38px; min-width: 38px; margin: 2px 0 2px 4px;
}
.ui-calendar-btn:hover, .ui-settings-btn:hover { background: #f8fafc; color: var(--forest); border-color: var(--forest); }

/* ---------- status rows ---------- */
.checkout-link-row { background: transparent; border: 0; padding: 10px 14px 0; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.checkout-link-row[data-state="linked"] { color: var(--ink-soft); }
.progress-bar-wrap { background: transparent; border-bottom: 0; padding: 4px 14px 10px; }
.progress-label { font-size: 12.5px; color: var(--ink-soft); }
.progress-track { height: 6px; background: var(--mist); border-radius: 999px; }
.progress-fill { background: var(--forest); border-radius: 999px; }
.sync-status { color: #3f4a5a; }

/* ---------- section / room pickers ---------- */
.picker-row, .picker-block, .tabs-wrap, .section-tabs-wrap {
  background: transparent !important; border-color: var(--mist) !important; box-shadow: none !important;
}
/* Desktop: the pickers are a plain sidebar. Under 1100px the section picker is a dropdown
   overlay in the original CSS and must keep a solid surface, so it gets a card instead. */
@media (min-width: 1100px) {
  .picker-panel, #sectionTabsPanel, #roomTabsPanel { background: transparent !important; border: 0 !important; box-shadow: none !important; }
}
@media (max-width: 1099px) {
  /* The picker row is a sticky bar under the header at these widths, so it needs a solid
     surface or the room photos scroll up through it. */
  .picker-row { background: #fff !important; border-bottom: 1px solid var(--mist) !important; box-shadow: 0 4px 10px rgba(15,23,42,.05) !important; }
  #roomTabsPanel { background: transparent !important; border: 0 !important; box-shadow: none !important; }
  #sectionTabsPanel { background: #fff !important; border: 1px solid var(--mist-dark) !important; border-top: 0 !important;
    border-radius: 0 0 16px 16px !important; box-shadow: 0 16px 30px rgba(15,23,42,.16) !important; }
}
.section-tab, .tab {
  background: #fff; border: 1px solid var(--mist); border-radius: 12px;
  color: var(--ink); font-size: 14px; font-weight: 600; box-shadow: var(--shh-shadow);
}
.section-tab { border-radius: 12px; margin-bottom: 0; padding: 9px 12px; }
.section-tab:hover, .tab:hover { border-color: var(--mist-dark); background: #fff; }
.section-tab.active, .tab.active { background: var(--forest); border-color: var(--forest); color: #fff; box-shadow: none; }
.tab.active.complete, .section-tab.active.complete { background: var(--done); border-color: var(--done); }
.section-tab.complete { border-color: #bbf7d0; color: #15803d; }
.tab-badge { border-radius: 999px; font-size: 11px; padding: 2px 8px; background: #f1f5f9; color: var(--ink-soft); font-weight: 700; }
.section-tab.complete .tab-badge { background: var(--done); }
.section-tab.partial .tab-badge { background: var(--clay); }
.section-tab.none .tab-badge, .tab .tab-badge.none { background: #fee2e2; color: #b91c1c; }
.tab .tab-badge { background: #fef2f2; color: #b91c1c; }
.tab.active .tab-badge, .section-tab.active .tab-badge { background: rgba(255,255,255,.25); color: #fff; }
.picker-toggle, .picker-heading, .section-tabs-heading, .tabs-heading {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3f4a5a;
}

/* ---------- room panel ---------- */
.room-header { background: transparent; border-bottom: 0; padding: 14px 14px 6px; }
.room-name { font-family: var(--shh-font); font-size: 24px; font-weight: 700; letter-spacing: -0.2px; }
.room-subtitle { color: var(--ink-soft); font-size: 14px; }
.room-notes-section, .check-card, .captured-photos-section, .reference-images-section {
  background: #fff; border: 1px solid var(--mist-dark); border-radius: var(--shh-radius);
  box-shadow: var(--shh-shadow); padding: 18px 20px;
}
.check-card { padding: 0; border-radius: 18px; }
.room-notes-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3f4a5a; }
.reference-notes-section { background: #fffbeb; border-color: #fde68a; }
.reference-notes-section .room-notes-label { color: #92400e; }
.reference-images-section { background: #fff; border-color: var(--mist-dark); }
.reference-images-section .room-notes-label { color: #3f4a5a; }
.captured-photos-section { background: #fff; border-color: var(--mist-dark); }
.reference-images-section.is-complete { border-color: #bbf7d0; background: #f0fdf4; }
.photo-thumb, .ref-gallery-item, .captured-thumb { border-radius: 12px; }
.btn-photo { border: 1.5px dashed var(--mist-dark); border-radius: 14px; background: #fafbfc; color: var(--ink-soft); }
.btn-photo:hover { border-color: var(--forest); color: var(--forest); background: #eef4fb; }

/* ---------- buttons and inputs ---------- */
.btn-admin, .btn-submit, .btn-new, .btn.primary, .stay-calendar-pick-date-btn {
  background: var(--forest); color: #fff; border: 1px solid var(--forest); border-radius: 999px;
  font-family: var(--shh-font); font-weight: 600; box-shadow: none;
}
.btn-admin:hover, .btn-submit:hover, .btn-new:hover, .btn.primary:hover { background: var(--forest-light); border-color: var(--forest-light); }
.btn { border-radius: 999px; font-family: var(--shh-font); font-weight: 600; }
.btn-secondary, .btn.secondary, .history-load-btn, .history-last-btn {
  background: #fff; color: var(--ink); border: 1px solid var(--mist-dark); border-radius: 999px;
}
.history-delete-btn { border-radius: 999px; }
.admin-input, .comment-input, .room-notes-textarea, .rating-note, .settings-language-select, input.admin-input, select.admin-input, textarea.admin-input {
  border: 1px solid var(--mist-dark); border-radius: 8px; background: #fff; font-family: var(--shh-font); color: var(--ink);
}
.admin-input:focus, .comment-input:focus, .room-notes-textarea:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(12,113,195,.15); }
.toggle-switch input:checked + .toggle-slider { background: var(--forest); }

/* ---------- floating action + submit bar ---------- */
.fab-launcher { background: var(--forest); box-shadow: 0 8px 22px rgba(15,23,42,.18), 0 0 0 3px #fff; }
.fab-launcher:hover { background: var(--forest-light); }
.submit-bar { background: #fff; border-top: 1px solid var(--mist-dark); box-shadow: 0 -6px 22px rgba(15,23,42,.08); }

/* ---------- modals ---------- */
.settings-card, .invite-access-card, .stay-calendar-card, .rating-card, .success-card, .history-card {
  border-radius: var(--shh-radius); border: 1px solid var(--mist-dark); box-shadow: 0 24px 60px rgba(15,23,42,.22);
  font-family: var(--shh-font);
}
.settings-title, .invite-access-title { font-family: var(--shh-font); font-weight: 700; color: var(--ink); }
.settings-toggle-row { border-color: var(--mist); }
.invite-access-tab.active { color: var(--forest); border-color: var(--forest); }

/* ---------- past cleanings / admin lists ---------- */
.history-item, .admin-item, .admin-section, .admin-panel .card, .cleaning-card, .past-cleaning-card {
  background: #fff; border: 1px solid var(--mist-dark); border-radius: 16px; box-shadow: var(--shh-shadow);
}
.admin-panel { background: transparent; }
.admin-subsection-title, .admin-item-title { color: var(--ink); font-family: var(--shh-font); }

/* ---------- misc chips ---------- */
.qc-chip { border-radius: 999px; }
.inspection-invite-wrap { background: transparent; }
.btn-invite-access { background: #fff; color: var(--ink); border: 1px solid var(--mist-dark); border-radius: 999px; font-weight: 600; box-shadow: none; }
.btn-invite-access:hover { background: #f8fafc; border-color: var(--forest); color: var(--forest); }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .ui-tab-btn { font-size: 14px; padding: 8px 10px; min-height: 40px; white-space: nowrap; }
  .ui-tabs-wrap { padding: 0 8px; }
  .room-notes-section, .captured-photos-section, .reference-images-section { padding: 14px 14px; border-radius: 18px; }
  .room-name { font-size: 21px; }
  .property-select { max-width: none; }
}

/* ---------- manager mode: property / section / room chips, ICS feeds, team access ---------- */
.admin-section { background: #fff; border: 1px solid var(--mist-dark); border-radius: var(--shh-radius); box-shadow: var(--shh-shadow); }
.admin-section-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3f4a5a; }
.admin-section-title em, .admin-section-title i { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.title-add-btn { background: #fff; border: 1px solid var(--mist-dark); color: var(--forest); }
.title-add-btn:hover { background: #eef4fb; border-color: var(--forest); }
.property-tab, .section-tag, .room-tag {
  background: #fff; border: 1px solid var(--mist-dark); border-radius: 999px; margin-bottom: 0; color: var(--ink); box-shadow: none;
}
.property-tab { border-radius: 14px; }
.property-tab.active-prop, .section-tag.active-tag, .room-tag.active-tag { background: var(--forest); border-color: var(--forest); color: #fff; }
.property-tab.active-prop .property-tab-name, .property-tab.active-prop .property-tab-address, .property-tab.active-prop .property-tab-main { color: #fff; }
.section-tag.active-tag .section-tag-main, .room-tag.active-tag .room-tag-main,
.section-tag.active-tag .section-tag-del, .room-tag.active-tag .room-tag-del,
.section-tag.active-tag button, .room-tag.active-tag button, .property-tab.active-prop button { color: #fff; }
.section-tag-del, .room-tag-del { color: #94a3b8; }
.admin-field label, .admin-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.admin-inline-message { border-radius: 10px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.admin-inline-message.error, .admin-inline-message.is-error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.btn-admin:disabled, .btn-admin[disabled] { background: #fff; color: #94a3b8; border-color: var(--mist); cursor: default; }
.ics-source-row .btn-admin, .ics-remove-btn { min-width: 40px; }

/* Team access modal (kept for the fallback path; the button normally opens the shared panel) */
.invite-access-tabs { border-bottom: 1px solid var(--mist); gap: 2px; }
.invite-access-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--ink-soft); font-weight: 600; padding: 8px 14px; }
.invite-access-tab.active { background: transparent; color: var(--forest); border-bottom-color: var(--forest); }
.invite-access-section, .invite-access-card .admin-subsection, .invite-access-panel > div { border-radius: 16px; }
.invite-property-checklist label, .invite-property-item { border: 1px solid var(--mist-dark); border-radius: 10px; background: #fff; }
.invite-hint { color: #3f4a5a; }

/* ---------- settings as a tab ---------- */
#settingsTab { padding: 12px 14px 40px; }
#settingsTab .shha { max-width: 1080px; }
.cc-settings-card { background: #fff; border: 1px solid var(--mist-dark); border-radius: var(--shh-radius); box-shadow: var(--shh-shadow); padding: 6px 20px; }
.cc-settings-card .settings-body { padding: 0; }
.cc-settings-card .settings-toggle-row { padding: 12px 0; border-bottom: 1px solid var(--mist); font-size: 15px; }
.cc-settings-card .settings-toggle-row:last-child { border-bottom: 0; }
.cc-settings-card .settings-account-row { padding: 12px 0; border-bottom: 1px solid var(--mist); }
/* Language is on the shared You pane too, but this row applies instantly with no Save,
   which is what a cleaner switching to Spanish wants. Both write the same setting. */
.cc-settings-card #languageRow { display: flex; }
.cc-settings-card #languageRow .settings-language-select { min-width: 160px; }
@media (max-width: 640px) { #settingsTab { padding: 8px 8px 40px; } .cc-settings-card { padding: 4px 14px; } }

/* ---------- manage as a tab ---------- */
.ui-tab-btn.manager-gate { display: none; }
.ui-tab-btn.manager-gate.visible { display: inline-flex; align-items: center; }
#manageTab { padding: 8px 14px 60px; }
#manageTab .admin-panel { display: none; }
#manageTab .admin-panel.visible { display: block; background: transparent; border-bottom: 0; }
@media (max-width: 640px) { #manageTab { padding: 6px 8px 60px; } }
/* Manage is a tab, so the tab strip must stay while manager mode is on. */
body.admin-only-mode .ui-tabs-wrap .ui-tab-btn { display: inline-flex !important; align-items: center; }
body.admin-only-mode .ui-tabs-wrap .ui-tab-btn.manager-gate:not(.visible) { display: none !important; }

/* manager panel inside the Settings tab, with dropdown pickers for section and room */
#settingsTab .admin-panel { display: none; background: transparent; border-bottom: 0; }
#settingsTab .admin-panel.visible { display: block; }
#settingsTab .admin-panel .admin-section { margin-left: 0; margin-right: 0; }
.cc-pick-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 8px; }
.cc-pick-row select.cc-pick { width: auto; min-width: 220px; max-width: 100%; border-radius: 999px; padding: 8px 36px 8px 14px; font-weight: 600; min-height: 40px; }
.cc-pick-btn { border: 1px solid var(--mist-dark); background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: var(--shh-font); min-height: 36px; }
.cc-pick-btn:hover { background: #f8fafc; border-color: var(--forest); color: var(--forest); }
.cc-pick-btn.warn:hover { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.cc-pick-btn[disabled] { opacity: .4; cursor: default; }
@media (max-width: 640px) { .cc-pick-row select.cc-pick { min-width: 0; flex: 1 1 100%; } }
/* The round add buttons were being squeezed once the panel moved into the narrower settings column. */
.admin-section-title-row { display: flex; align-items: center; gap: 10px; }
.admin-section-title-row .admin-section-title { flex: 1 1 auto; min-width: 0; }
.title-add-btn, .admin-section-title-row > button { flex: 0 0 auto; }

.cc-manage-host { max-width: 1080px; }
.cc-manage-host[hidden] { display: none; }

/* Cleaning entries the morning run created for a real check-out that nobody started. */
.history-status-chip.scheduled { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.history-status-chip.missed { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* Past cleanings: the progress line reads at a glance, with the percentage beside it. */
.history-item .history-progress { font-size: 15px; color: #1f2937; margin: 4px 0 2px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.history-item .history-progress strong { font-size: 17px; font-weight: 700; color: #0f172a; letter-spacing: .01em; }
.history-item .history-progress span { color: #55677c; }
.history-item .history-progress .history-pct { font-weight: 700; color: #0c71c3; background: #e8f4ff; border: 1px solid #d4e8fb; border-radius: 999px; padding: 1px 8px; font-size: 13px; line-height: 1.5; }
.history-item .history-progress .history-pct.done { color: #15803d; background: #ecfdf5; border-color: #bbf7d0; }

/* Reference tile while its rotation is in flight. */
.ref-image-item.rotating img { opacity: .45; filter: blur(1px); }
.ref-image-item.rotating .ref-image-item-actions { display: flex; opacity: 1; }
.ref-image-item .ref-image-btn { font-size: 15px; }

/* Cleaner notes: a note card rather than grey running text. Same treatment for the read-only note,
   the translated note, and the box a cleaner types into. */
.cleaner-notes-section .cleaner-note-readonly,
.cleaner-notes-section .cleaner-note-primary {
  font-size: 16px; line-height: 1.65; color: #0f172a;
  background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #f59e0b; border-radius: 12px;
  padding: 12px 14px; margin: 4px 0 0; white-space: pre-wrap; word-break: break-word;
}
.cleaner-notes-section .cleaner-note-readonly.is-empty {
  background: transparent; border: 1px dashed #e2e8f0; border-radius: 12px; color: #9aa7b5; font-style: italic; font-size: 14px; padding: 10px 14px;
}
.cleaner-notes-section .cleaner-note-original-label { margin-top: 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #64748b; font-weight: 700; }
.cleaner-notes-section textarea.room-notes-textarea { font-size: 16px; line-height: 1.6; color: #0f172a; min-height: 120px; padding: 12px 14px; border-radius: 12px; }

/* Settings: the straighten button and its status line. */
#aiOrientRunRow .btn-admin { white-space: nowrap; }
#aiOrientRunRow .btn-admin[disabled] { opacity: .55; cursor: default; }
#aiOrientRunMsg { display: inline-block; margin-top: 6px; font-style: normal; font-size: 13px; }

/* Sections the shell hides (Properties, Connected Calendars live on the Properties tab). */
.admin-section[hidden]{display:none !important}

/* Line icons beside section headings: inherit the heading colour, sit on the text baseline. */
.cc-ico{width:16px;height:16px;display:inline-block;vertical-align:-3px;margin-right:2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.room-notes-label .cc-ico{width:15px;height:15px;vertical-align:-3px;color:#0c71c3}
.reference-notes-section .room-notes-label .cc-ico{color:#b45309}
.admin-section-title .cc-ico{color:#0c71c3}
.settings-toggle-row > span > .cc-ico{width:17px;height:17px;vertical-align:-4px;color:#0c71c3}

/* "Original" under a translated cleaner note is a fold: owners/managers get it closed by default (2026-09-21). */
.cleaner-notes-section .cleaner-note-original-label[role="button"] { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.cleaner-note-original-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity: .7; transition: transform .15s; }
.cleaner-notes-section.note-orig-collapsed .cleaner-note-original-caret { transform: rotate(-45deg); margin-top: 0; }
.cleaner-notes-section.note-orig-collapsed .room-notes-textarea,
.cleaner-notes-section.note-orig-collapsed .cleaner-note-readonly { display: none; }

/* Main tabs: the selected one is marked by its underline only. No box (the browser's focus ring) around a tab that was just clicked. */
.ui-tab-btn:focus, .ui-tab-btn:focus-visible, .ui-tab-btn:active { outline: none; box-shadow: none; -webkit-tap-highlight-color: transparent; }