/* =========================================================
   SCHEDULER REDLINES v8 (additive, visual-preserving)
   Implements Villa scheduler redline updates without changing
   the existing portal/scheduler look:
     • Full-width Lily ribbon directly below the schedule grid
       (collapsed by default, expands downward into chat).
     • Full-width Schedule Alerts directly below the Lily ribbon
       (matches container width).
     • Duration dropdown (1-30 days) + quick +/- day control on
       schedule cards.
     • Lead + Additional Help fields.
     • Office-staff notify checkboxes.
     • Restored flag-button toggle behavior.
   All selectors namespaced with .sr8-*.
   ========================================================= */

/* Hide the existing inline Lily panel inside the right sidebar
   so we don't render Lily twice. We don't remove the old DOM —
   we just make it invisible / non-interactive when the ribbon
   layer is active. */
#vScheduler.sr8-active #sv4SideRight .sv4-panel.lily{display:none !important}
/* Also hide the Suggestions panel duplication when the ribbon is active so
   the right sidebar still feels useful without overlapping with the ribbon. */
#vScheduler.sr8-active #sv4SideRight .sv4-panel:not(.lily):not(.sr8-keep){
  /* keep visible — only Lily moves to the ribbon */
}

/* ----- Ribbon container that wraps the Lily ribbon (and, as a
   fallback, Schedule Alerts when the request-queue panel isn't
   present). Mounted directly after .sv4-side-center inside the
   schedule body so it inherits the same width as the schedule
   grid above it. Spans both side columns visually by living
   inside .sv4-side-center. */
.sr8-ribbon-stack{
  display:flex;flex-direction:column;gap:10px;
  margin-top:12px;
}

/* ----- Schedule Legend + Schedule Alerts relocated under the
   Request queue (left sidebar). Per user feedback on PR #8, both
   panels move up so they're discoverable directly below the
   request queue. The flex/gap rules on .sv4-side-left already
   give them consistent spacing; we just trim a couple of edges
   so they feel native to the left rail (which is narrower than
   the original right sidebar). */
#vScheduler.sr8-active #sv4SideLeft #sv4LegendPanel.sr8-under-reqq,
#vScheduler.sr8-active #sv4SideLeft #sv6AlertsPanel.sr8-under-reqq,
#vScheduler.sr8-active #sv4SideLeft #sv6PolicyHelper.sr8-under-reqq{
  width:auto;
  max-width:100%;
  margin:0; /* parent gap handles spacing */
  box-sizing:border-box;
}

/* Hide the legend's old slot in the right sidebar — it's been
   moved into the left rail. The legend node may still get
   re-rendered into #sv4SideRight by scheduling_v4 on initial
   render; once relocateAlerts() runs, the relocated copy is
   what the user sees. To prevent a flash of duplicated legend,
   we suppress any stray sv4LegendPanel that is still attached
   to #sv4SideRight while sr8 is active. */
#vScheduler.sr8-active #sv4SideRight #sv4LegendPanel:not(.sr8-under-reqq){
  display:none !important;
}

/* ===== Lily ribbon =====
   Color direction matches the Home Lily big button (.home-bigbtn-lily)
   and the right-corner Lily helper (.lily-fab / .lily-modal-hdr) so the
   schedule assistant feels visually unified with the rest of the portal.
   Palette tokens (kept local to .sr8-lily so the rest of the scheduler is
   untouched):
     --sr8-lily-purple-1 : #7e3af2  (matches .home-bigbtn-lily start)
     --sr8-lily-purple-2 : #a855f7  (matches .home-bigbtn-lily end)
     --sr8-lily-tint     : #f3edff  (matches .lily-msg.you tint)
     --sr8-lily-tint-bd  : #e0d3fa  (matches .lily-msg.you border)
*/
.sr8-lily{
  --sr8-lily-purple-1:#7e3af2;
  --sr8-lily-purple-2:#a855f7;
  --sr8-lily-tint:#f3edff;
  --sr8-lily-tint-bd:#e0d3fa;
  --sr8-lily-shadow:rgba(126,58,242,.32);
  background:#fff;
  border:1px solid var(--sr8-lily-tint-bd);
  border-radius:14px;
  box-shadow:0 8px 22px var(--sr8-lily-shadow);
  font-family:'Barlow',sans-serif;
  overflow:hidden;
  transition:max-height .18s ease;
}
.sr8-lily-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--sr8-lily-purple-1),var(--sr8-lily-purple-2));
}
.sr8-lily-bar:hover{
  background:linear-gradient(135deg,#6f2ee0 0%,#9748ec 100%);
}
.sr8-lily-icon{
  width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.22);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.sr8-lily-title{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;color:#fff;
  font-size:14px;letter-spacing:.4px;text-transform:uppercase;
  flex:1;
}
.sr8-lily-hint{
  font-size:12px;color:rgba(255,255,255,.92);font-weight:500;
  margin-right:6px;font-style:italic;
}
.sr8-lily-min{
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-weight:800;font-size:14px;line-height:1;
  width:24px;height:24px;border-radius:6px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;font-family:'Barlow',sans-serif;
}
.sr8-lily-min:hover{background:rgba(255,255,255,.28)}
.sr8-lily-chev{
  color:#fff;font-size:11px;font-weight:700;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.16);
  padding:3px 7px;border-radius:6px;
  transition:transform .15s;
  flex-shrink:0;
}
.sr8-lily.is-open .sr8-lily-chev{transform:rotate(180deg)}

.sr8-lily-body{
  display:none;
  padding:10px 14px 12px;
  border-top:1px solid var(--bd-lt);
  background:#fff;
}
.sr8-lily.is-open .sr8-lily-body{display:block}

.sr8-lily-suggestions{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;
}
.sr8-lily-action{
  background:var(--sr8-lily-tint);border:1px solid var(--sr8-lily-tint-bd);
  color:var(--sr8-lily-purple-1);padding:5px 10px;border-radius:7px;
  font-size:12px;font-weight:650;cursor:pointer;
  font-family:'Barlow',sans-serif;
}
.sr8-lily-action:hover{
  background:linear-gradient(135deg,var(--sr8-lily-purple-1),var(--sr8-lily-purple-2));
  color:#fff;border-color:var(--sr8-lily-purple-1);
}
.sr8-lily-action.is-conflict{background:#fff4ec;border-color:#f5c39d;color:#9c4a18}

.sr8-lily-chat{
  border:1px solid var(--sr8-lily-tint-bd);border-radius:10px;
  background:#fafafd;
  display:flex;flex-direction:column;
  min-height:180px;max-height:320px;
}
.sr8-lily-log{
  flex:1;padding:10px 12px;overflow:auto;
  font-size:13px;color:var(--tx);line-height:1.45;
}
.sr8-lily-msg{margin-bottom:8px}
.sr8-lily-msg .who{
  font-weight:700;color:var(--navy);font-size:11px;
  text-transform:uppercase;letter-spacing:.5px;margin-right:6px;
}
.sr8-lily-msg.you .who{color:var(--sr8-lily-purple-1)}
.sr8-lily-row{
  display:flex;gap:6px;padding:8px;border-top:1px solid var(--sr8-lily-tint-bd);
  background:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;
}
.sr8-lily-input{
  flex:1;border:1px solid var(--bd);border-radius:8px;
  padding:7px 10px;font-size:13px;font-family:'Barlow',sans-serif;
  outline:none;color:var(--tx);
}
.sr8-lily-input:focus{border-color:var(--sr8-lily-purple-1)}
.sr8-lily-send{
  background:linear-gradient(135deg,var(--sr8-lily-purple-1),var(--sr8-lily-purple-2));
  color:#fff;border:0;
  padding:7px 14px;border-radius:8px;cursor:pointer;
  font-weight:700;font-size:12px;font-family:'Barlow',sans-serif;
}
.sr8-lily-send:hover{filter:brightness(1.06)}

/* ===== Schedule Alerts (full-width sibling below the ribbon).
   When .sr8-active is set on #vScheduler, the existing
   #sv6AlertsPanel is moved into .sr8-ribbon-stack — these styles
   make it visually consistent with the ribbon. */
#vScheduler.sr8-active #sv6AlertsPanel{
  margin:0; /* remove default since stacking gap handles spacing */
}

/* ===== Editor additions ===== */
.sr8-edit-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;margin-bottom:8px}
.sr8-edit-row label{
  flex:1;min-width:160px;display:flex;flex-direction:column;gap:3px;
  font-size:11px;font-weight:700;color:var(--navy);
  text-transform:uppercase;letter-spacing:.4px;
}
.sr8-edit-row select,
.sr8-edit-row input[type=text]{
  border:1px solid var(--bd);border-radius:8px;
  padding:7px 9px;font-size:13px;font-family:'Barlow',sans-serif;
  color:var(--tx);background:#fff;outline:none;
}
.sr8-edit-row select:focus,
.sr8-edit-row input[type=text]:focus{border-color:var(--teal)}

/* Multi-select for "Additional help" rendered as a chip list */
.sr8-helper-list{
  display:flex;flex-wrap:wrap;gap:4px;
  border:1px solid var(--bd);border-radius:8px;
  padding:6px;background:#fff;min-height:36px;
  max-height:140px;overflow:auto;
}
.sr8-helper-chip{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--bd);background:#f5faf9;
  padding:3px 8px;border-radius:999px;
  font-size:12px;color:var(--tx);cursor:pointer;
  font-weight:600;font-family:'Barlow',sans-serif;
}
.sr8-helper-chip.on{
  background:var(--teal);color:#fff;border-color:var(--teal);
}
.sr8-helper-chip.disabled{
  opacity:.45;pointer-events:none;background:#f0f0f0;
}

/* Office staff section */
.sr8-edit-section{
  margin-top:14px;border-top:1px solid var(--bd-lt);
  padding-top:12px;
}
.sr8-edit-section h4{
  font-family:'Barlow Condensed',sans-serif;font-size:13px;
  text-transform:uppercase;letter-spacing:.6px;
  color:var(--navy);margin-bottom:8px;font-weight:700;
}
.sr8-office-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.sr8-office-row{
  display:flex;align-items:center;gap:6px;
  padding:5px 8px;border:1px solid var(--bd);
  border-radius:7px;background:#fff;cursor:pointer;
  font-size:13px;color:var(--tx);user-select:none;
}
.sr8-office-row input{margin:0;cursor:pointer}
.sr8-office-row.on{background:var(--teal-lt);border-color:var(--teal-md)}

/* Quick +/- duration popover anchored to a card */
.sr8-card-dur{
  display:inline-flex;align-items:center;gap:3px;
  background:#fff;border:1px solid var(--bd);
  border-radius:999px;padding:1px 4px;font-size:11px;
  color:var(--tx-md);font-weight:700;cursor:pointer;
  vertical-align:middle;margin-left:4px;
}
.sr8-card-dur:hover{border-color:var(--teal);color:var(--teal-dk)}
.sr8-card-dur button{
  background:#f4f7f6;border:1px solid var(--bd-lt);color:var(--navy);
  width:18px;height:18px;border-radius:50%;cursor:pointer;
  font-weight:800;font-size:12px;line-height:1;padding:0;
}
.sr8-card-dur button:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.sr8-card-dur .sr8-card-dur-num{
  min-width:34px;text-align:center;font-family:'Barlow',sans-serif;
  font-weight:700;color:var(--navy);
}

/* Visual-neutral: "Hard Start" conflict callout from +/- expansion */
.sr8-toast-conflict{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  background:#fff4ec;border:1px solid #f5c39d;color:#9c4a18;
  padding:9px 14px;border-radius:10px;font-size:13px;font-weight:650;
  box-shadow:0 6px 18px rgba(0,0,0,.15);z-index:9999;
  display:none;
}
.sr8-toast-conflict.show{display:block}
@media (max-width:640px){
  /* Mobile: avoid bottom-right Ask Lily FAB collision zone. */
  .sr8-toast-conflict{bottom:auto;top:14px}
}

/* Mobile tweaks — let ribbon span full width on small screens too */
@media (max-width:900px){
  .sr8-ribbon-stack{margin-top:10px}
  .sr8-lily-chat{min-height:140px}
}