/* =========================================================
   Schedule — Round 45a mobile day row full-row toggle CSS

   Look-preserving. Adds:
     • A subtle pressed/active background tint on the day
       header row so it reads as a single tappable row.
     • A slightly larger, more visible chevron so the
       expand/collapse cue is easier to spot.
     • A bigger hit area on the chevron itself.
   All gated to mobile (max-width: 720px). Desktop is
   completely untouched.
   ========================================================= */

@media (max-width: 720px) {

  /* The whole header row reads as a button. The teal accent
     comes from the existing palette; we use it at very low
     opacity so the visual change is minimal but the press
     state is felt. */
  #vScheduler .sv4-col[data-r40-decorated="1"] > .sv4-col-hdr[data-r45a-row="1"] {
    cursor: pointer;
    /* Reinforce the full-row hit target with a tiny bit of
       horizontal padding so the chevron and date label
       always stay inside the tap region. R41 already made
       it min-height: 44px / display:flex; we keep that. */
    -webkit-tap-highlight-color: rgba(255,107,0,.18);
    transition: background-color 120ms ease-out;
  }

  /* Pressed state — only while finger is actively down. */
  #vScheduler .sv4-col[data-r40-decorated="1"] > .sv4-col-hdr[data-r45a-row="1"]:active {
    background-color: rgba(255,107,0,.10);
  }

  /* Slightly enlarge the chevron so the affordance reads
     clearly on a phone. Stay within the existing color
     palette by inheriting from the header. */
  #vScheduler .sv4-col[data-r45a-row="1"] .r40-day-chev,
  #vScheduler .sv4-col[data-r45a-row="1"] .r45a-day-chev {
    font-size: 16px;
    /* Keep R41's hit-area trick (negative margin) so the
       chevron has a 28px square pressable region without
       visually moving anything. */
    padding: 8px;
    margin: -8px;
    opacity: .9;
  }

  /* When collapsed, raise opacity a touch so it really pops
     as the only visual cue that there's hidden content. */
  #vScheduler .sv4-col[data-r40-collapsed="1"][data-r40-decorated="1"]
    > .sv4-col-hdr[data-r45a-row="1"] .r40-day-chev,
  #vScheduler .sv4-col[data-r40-collapsed="1"][data-r40-decorated="1"]
    > .sv4-col-hdr[data-r45a-row="1"] .r45a-day-chev {
    opacity: 1;
  }

  /* Belt-and-suspenders: any interactive control that lives
     inside an expanded card should be obviously NOT part of
     the row toggle. We add data-r45a-no-toggle as an opt-in
     attribute — JS already scopes the toggle to the header
     row, so this rule is purely a documentation/affordance
     hook for future controls that want to opt out
     explicitly. No visual change. */
  #vScheduler .sv4-col-body [data-r45a-no-toggle] {
    /* placeholder rule — keeps the selector live in the
       cascade so `data-r45a-no-toggle` shows up in devtools
       inspections. */
    position: relative;
  }
}

/* Desktop: fully neutralize anything we might have added
   (defense-in-depth — JS already gates to mobile). */
@media (min-width: 721px) {
  #vScheduler .sv4-col[data-r45a-row="1"] > .sv4-col-hdr {
    cursor: default;
    background-color: transparent !important;
  }
}