/* =========================================================
   Schedule — Round 39 quick buttons + mobile flow

   Look-preserving additions only — no color, typography, or
   shape changes. Just two things:

     1. Make the slide-over editor render above the sticky
        mobile action bar so the user can see it on phones.
     2. Stack Schedule → Queue → Lily on mobile (relies on
        the JS module relocating .sr8-ribbon-stack to live
        directly after #sv4SideLeft on phones).
     3. Tiny visible-change pulses for Today / Quick Request
        / Lily so taps never look like silent no-ops.

   Desktop (≥721px) is untouched.
   ========================================================= */

@media (max-width: 720px) {
  /* Make .sv4-body a flex column so children honor `order` and
     so a relocated ribbon stack drops in cleanly between the
     queue (side-left) and Lily-now-below-it. */
  #vScheduler .sv4-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Order: Schedule (center grid) → Queue (side-left) → Lily
     ribbon (relocated by JS as a direct .sv4-body child) →
     side-right (alerts/legend etc.). */
  #vScheduler .sv4-side-center { order: 1; }
  #vScheduler .sv4-side-left   { order: 2; }
  /* The relocated ribbon stack sits directly under .sv4-body. */
  #vScheduler .sv4-body > .sr8-ribbon-stack { order: 3; display: block; }
  #vScheduler .sv4-side-right  { order: 4; }

  /* Slide-over editor on phones is full-viewport. Lift it
     above the sticky action bar (z-index 9000) so it isn't
     hidden behind the bar. We also reserve enough bottom
     padding so the editor footer can be reached. */
  #vScheduler .sv4-slideover {
    z-index: 9100;
  }
  #vScheduler .sv4-slideover.open .sv4-slideover-body {
    padding-bottom: 96px;
  }
  #vScheduler .sv4-slideover.r39-elevated {
    z-index: 9100;
  }

  /* Conflict + standard modals also need to clear the action
     bar so the user can read and tap their actions. */
  #vScheduler .sv4-modal-overlay {
    z-index: 9200;
  }
}

/* Small visible-change cues. Subtle so we don't change the
   overall Field Portal look. */
.r39-flash {
  animation: r39FlashKf 700ms ease-out;
}
@keyframes r39FlashKf {
  0%   { box-shadow: 0 0 0 0 rgba(255,107,0,0); }
  30%  { box-shadow: 0 0 0 4px rgba(255,107,0,.35); }
  100% { box-shadow: 0 0 0 0 rgba(255,107,0,0); }
}

.r39-pulse {
  animation: r39PulseKf 1400ms ease-out;
}
@keyframes r39PulseKf {
  0%   { box-shadow: 0 0 0 0 rgba(255,107,0,.0); outline: 0; }
  30%  { box-shadow: 0 0 0 6px rgba(255,107,0,.22); outline: 2px solid rgba(255,107,0,.4); outline-offset: 2px; }
  100% { box-shadow: 0 0 0 0 rgba(255,107,0,.0); outline: 0; }
}