/* CleanCheck UI2 (2026-09-20): phone/tablet layout pass. Loads after cleancheck-modern.css and only
   applies under body.cc-ui2 (option vrl_cc_ui2, ?ui2=0|1 override) and under 1100px, where the app
   is a single column. The desktop grid (>=1100px) is untouched. Remove the file to revert.

   Tokens follow the Superhero apps: white page, hairline cards, 16px radius, one blue accent, colour
   only as signal (green done / amber partial / red none). */

@media (max-width: 1099px) {

  /* ---------- top bar ---------- */
  /* The past-cleaning state is a pill (below), not a tab label, so the tab never turns orange. */
  body.cc-ui2 .ui-tab-btn.editing-past { color: inherit; background: transparent; }
  body.cc-ui2 .ui-tab-btn.editing-past.active { color: var(--forest, #0c71c3); border-bottom-color: var(--forest, #0c71c3); }
  body.cc-ui2 .ui-tabs-wrap { padding: 0 8px; }
  body.cc-ui2 .ui-tab-btn { padding: 10px 12px; font-size: 14.5px; }

  /* Compact pill instead of the amber banner. */
  body.cc-ui2 #pastCleaningBanner {
    margin: 10px 14px 0; padding: 7px 8px 7px 12px; gap: 8px; align-items: center;
    background: #eef4fb; border: 1px solid #d4e8fb; border-radius: 999px; color: #0f172a;
    font-size: 13px; line-height: 1.35;
  }
  body.cc-ui2 #pastCleaningBanner.is-readonly { background: #fef2f2; border-color: #fecaca; }
  body.cc-ui2 .past-cleaning-banner-icon { display: none; }
  body.cc-ui2 .past-cleaning-banner-text { flex: 1 1 auto; min-width: 0; }
  body.cc-ui2 .past-cleaning-banner-btn {
    flex: 0 0 auto; margin: 0; padding: 5px 12px; min-height: 30px; border-radius: 999px;
    background: #fff; border: 1px solid #cfd8e3; color: #0f172a; font-size: 13px; font-weight: 600;
  }

  /* ---------- progress + room picker, stuck under the header ---------- */
  body.cc-ui2 .progress-bar-wrap {
    position: sticky; top: var(--cc2-top, 76px); z-index: 90;
    background: #fff; padding: 8px 14px 10px; border-bottom: 1px solid #e8edf2; margin: 0;
  }
  body.cc-ui2 .picker-row { display: none !important; }
  body.cc-ui2 .cc2-picker {
    display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; min-height: 46px;
    padding: 6px 12px 6px 14px; background: #fff; border: 1px solid #cfd8e3; border-radius: 14px;
    font-family: inherit; text-align: left; color: #0f172a; cursor: pointer;
  }
  body.cc-ui2 .cc2-picker:active { background: #f8fafc; }
  body.cc-ui2 .cc2-picker[hidden] { display: none; }
  body.cc-ui2 .cc2-picker-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
  body.cc-ui2 .cc2-picker-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.cc-ui2 .cc2-picker-sec { font-size: 12px; color: #3f4a5a; font-weight: 500; margin-top: 1px; }
  body.cc-ui2 .cc2-picker-caret {
    flex: 0 0 auto; width: 10px; height: 10px; margin: 0 4px 4px 2px;
    border-right: 2px solid #3f4a5a; border-bottom: 2px solid #3f4a5a; transform: rotate(45deg);
  }
  body.cc-ui2 .cc2-chip {
    flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    font-variant-numeric: tabular-nums; border: 1px solid transparent;
  }
  body.cc-ui2 .cc2-chip.complete { background: #e6f6ea; color: #197a45; border-color: #d1ecd8; }
  body.cc-ui2 .cc2-chip.partial  { background: #fffbeb; color: #b45309; border-color: #fde68a; }
  body.cc-ui2 .cc2-chip.none     { background: #f1f5f9; color: #3f4a5a; border-color: #e2e8f0; }

  /* Bottom sheet with every section and room. */
  body.cc-ui2 .cc2-sheet { position: fixed; inset: 0; z-index: 10006; display: none; }
  body.cc-ui2 .cc2-sheet.open { display: block; }
  body.cc-ui2 .cc2-sheet-bg { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
  body.cc-ui2 .cc2-sheet-card {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: #fff; border-radius: 22px 22px 0 0; padding: 6px 10px calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(15,23,42,.18);
  }
  body.cc-ui2 .cc2-sheet-grip { width: 40px; height: 4px; border-radius: 999px; background: #cfd8e3; margin: 6px auto 4px; }
  body.cc-ui2 .cc2-sheet-sec {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3f4a5a;
  }
  body.cc-ui2 .cc2-sheet-sec-n { font-variant-numeric: tabular-nums; letter-spacing: 0; }
  body.cc-ui2 .cc2-sheet-room {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 10px;
    background: #fff; border: 0; border-radius: 12px; font-family: inherit; font-size: 15.5px; font-weight: 600;
    color: #0f172a; text-align: left; cursor: pointer;
  }
  body.cc-ui2 .cc2-sheet-room:active { background: #f1f5f9; }
  body.cc-ui2 .cc2-sheet-room.is-active { background: #e8f4ff; color: #0a63ab; }
  body.cc-ui2 .cc2-sheet-room.is-done .cc2-sheet-name { color: #3f4a5a; font-weight: 500; }
  body.cc-ui2 .cc2-sheet-tick { flex: 0 0 22px; text-align: center; color: #28ae63; font-weight: 700; }
  body.cc-ui2 .cc2-sheet-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.cc-ui2 .cc2-sheet-empty { padding: 20px; text-align: center; color: #3f4a5a; }
  body.cc2-sheet-open { overflow: hidden; }

  /* ---------- room ---------- */
  body.cc-ui2 .room-header { padding: 14px 2px 10px; background: transparent; border: 0; }
  body.cc-ui2 .room-name { font-size: 22px; font-weight: 700; letter-spacing: -.2px; }
  body.cc-ui2 .room-subtitle { font-size: 13px; color: #3f4a5a; }

  /* One card style for every section. */
  body.cc-ui2 .room-notes-section {
    background: #fff; border: 1px solid #e8edf2; border-radius: 16px; padding: 14px; margin-bottom: 12px; box-shadow: none;
  }
  body.cc-ui2 .room-notes-section.reference-notes-section { background: #fffbeb; border-color: #fde68a; }
  body.cc-ui2 .room-notes-label { font-size: 11.5px; letter-spacing: .08em; color: #3f4a5a; }
  body.cc-ui2 .room-notes-label.collapsible-header { min-height: 36px; gap: 8px; }
  /* The caret is drawn with borders, so the touch target grows through the header's height, not the caret. */
  body.cc-ui2 .collapsible-caret { width: 10px; height: 10px; margin-right: 6px; opacity: .7; }
  body.cc-ui2 .room-notes-section.sec-collapsed { padding-bottom: 10px; }
  body.cc-ui2 .ref-progress-chip, body.cc-ui2 .captured-count-chip { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; }
  body.cc-ui2 .ref-history-chip { min-height: 32px; padding: 0 12px; }
  body.cc-ui2 .collapsible-header-text { flex-wrap: wrap; row-gap: 6px; }

  /* Reference tiles: a badge says "still open" instead of a tinted outline. */
  body.cc-ui2 .ref-gallery-item { border: 1px solid #e8edf2; border-radius: 12px; }
  body.cc-ui2 .ref-gallery-item.pending { border-color: #e8edf2; }
  body.cc-ui2 .ref-gallery-item.completed { border-color: #d1ecd8; }
  body.cc-ui2 .cc2-badge {
    position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 999px;
    background: rgba(217,119,6,.95); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em;
    pointer-events: none;
  }

  /* Captured photos: the floating camera button is the one way to capture. */
  body.cc-ui2 .photos-grid .image-tile-split, body.cc-ui2 .photos-grid > .image-tile-button { display: none !important; }
  body.cc-ui2 .cc2-empty {
    grid-column: 1 / -1; padding: 18px 14px; border: 1px dashed #cfd8e3; border-radius: 12px;
    text-align: center; color: #3f4a5a; font-size: 14px; line-height: 1.45;
  }

  /* Inventory count panels (Superhero Inventory widget) as the same cards; keep each list's tint. */
  body.cc-ui2 .shiw { font-family: inherit; }
  body.cc-ui2 .shiw-panel { border-radius: 16px; border: 1px solid #e8edf2; margin-bottom: 12px; }
  body.cc-ui2 .shiw-head { align-items: center; padding: 12px 14px; }
  body.cc-ui2 .shiw-title { font-size: 15px; }
  body.cc-ui2 .shiw-chev { margin-left: auto; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin-right: -10px; }
  body.cc-ui2 .shiw-panel.is-folded .shiw-searchrow { display: none; }

  /* Duplicated controls: Team Access lives in Settings, and the sticky picker makes scroll-to-top pointless. */
  body.cc-ui2 .inspection-invite-wrap { display: none !important; }
  body.cc-ui2 #shh-top { display: none !important; }
  body.cc-ui2 #roomContent { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }

  /* One accent: the FAB and progress are blue already; make sure nothing else shouts. */
  body.cc-ui2 .progress-fill { background: #0c71c3; }
}

/* Desktop (>=1100px) keeps its sidebar picker. cleancheck-ui2.js injects these on every width,
   and their styles only exist in the phone block above, so hide them here or they show up as
   bare buttons/text (the room sheet used to dump at the bottom of the page). */
@media (min-width: 1100px) {
  body.cc-ui2 .cc2-picker,
  body.cc-ui2 .cc2-sheet,
  body.cc-ui2 .cc2-badge,
  body.cc-ui2 .cc2-empty { display: none !important; }
}