/* =========================================================
   Mobile Schedule UX — additive layout, sticky action bar,
   tap-to-place, collapsible cards, queue count, quick actions.

   All rules are scoped to phone-width (max-width: 720px) so
   desktop browser layout, drag/drop, edit and existing flows
   are completely untouched at >720px.
   ========================================================= */

/* ----- 1. Mobile ordering (phones only) ------------------- */
@media (max-width: 720px) {

  #vScheduler .sv4-body {
    display: block;
    position: relative;
  }
  /* Stack center grid first, then the side panels with explicit
     order so phone reading order is: header, schedule grid,
     queue, lily, alerts, unscheduled, filters/legend. */
  #vScheduler .sv4-side-center {
    order: 1;
    display: block;
    width: 100%;
  }
  /* The order of side-left panels (#sv4UnschedPanel, #sv4ReqPanel)
     is rewritten with flex order on mobile via JS-applied classes. */
  #vScheduler .sv4-side-left,
  #vScheduler .sv4-side-right {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  /* Mobile order: Unscheduled Jobs (Request queue) immediately
     followed by Unscheduled Workers, so it is obvious at a glance
     whether anyone is sitting idle while jobs need scheduling.
     Lily and Schedule Alerts move below those two so they no
     longer separate them. */
  #vScheduler #sv4ReqPanel       { order: 2; }
  #vScheduler #sv4UnschedPanel   { order: 3; }
  #vScheduler .sv4-side-right .sv4-panel.lily { order: 4; }
  /* Schedule Alerts (#sv6AlertsPanel) is mounted as a sibling of
     #sv4Root; on mobile we lift it into the stack below Lily so
     it no longer sits between Unscheduled Jobs and Unscheduled
     Workers. */
  #sv6AlertsPanel.msx-alerts-mobile-stack { order: 5; }
  /* Filters + legend + advanced tools after */
  #vScheduler .sv4-side-right .sv4-panel:not(.lily) { order: 6; }
  #vScheduler .sv4-h-row2 { order: 7; }

  /* Force a phone-friendly grid wrap. */
  #vScheduler .sv4-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Schedule Alerts width matches Lily on mobile (full width, stacked) */
  #sv6AlertsPanel { width: 100%; max-width: 100%; box-sizing: border-box; }
  #sv6AlertsPanel.msx-alerts-mobile-stack { margin: 8px 0; }

  /* Bottom padding so sticky action bar never covers content. */
  #vScheduler.msx-mobile-padbottom { padding-bottom: 88px; }
  body.msx-mobile-padbottom { padding-bottom: 88px; }
}

/* ----- 2. Sticky mobile action bar ------------------------ */
.msx-mobile-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  display: none; /* shown only on mobile */
  background: linear-gradient(180deg, rgba(255,255,255,.96), #ffffff);
  border-top: 1px solid #d8dee5;
  box-shadow: 0 -4px 14px rgba(0,0,0,.08);
  padding: 8px max(env(safe-area-inset-left, 8px), 8px) calc(8px + env(safe-area-inset-bottom, 0px))
           max(env(safe-area-inset-right, 8px), 8px);
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}
.msx-mobile-actionbar .msx-mab-btn {
  flex: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  border: 1px solid #d8dee5;
  border-radius: 10px;
  background: #ffffff;
  color: var(--navy, #1A1916);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,107,0,.18);
}
.msx-mobile-actionbar .msx-mab-btn:active {
  background: #f4fbfa;
  border-color: var(--teal, #FF6B00);
}
.msx-mobile-actionbar .msx-mab-btn[data-action="add-job"] {
  background: var(--teal, #FF6B00);
  color: #fff;
  border-color: var(--teal, #FF6B00);
}
.msx-mobile-actionbar .msx-mab-btn[data-action="ask-lily"] {
  background: #fffbe8;
  border-color: #e9c46a;
  color: #8a5a00;
}
@media (max-width: 720px) {
  .msx-mobile-actionbar { display: flex; }
}
/* Post-PR-#72 redline: the mobile sticky quick-action strip is retired.
   The container is kept (so observer / round-37 hide logic still has a
   stable target) but it must never render or reserve space. Both classes
   below force it hidden regardless of viewport. */
.msx-mobile-actionbar.msx-mobile-actionbar-empty,
.msx-mobile-actionbar[data-msx-empty="1"] {
  display: none !important;
  visibility: hidden;
  height: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

/* ----- 3. Tap-to-place selection state -------------------- */
.msx-tap-selected {
  outline: 3px solid var(--teal, #FF6B00);
  outline-offset: 2px;
  background: #e8f7f4 !important;
  box-shadow: 0 0 0 4px rgba(255,107,0,.18);
}
.msx-tap-target-hint {
  outline: 2px dashed var(--teal, #FF6B00);
  outline-offset: -2px;
  background: rgba(232,247,244,.55);
}
.msx-tap-banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9001;
  padding: 10px 14px;
  background: var(--teal, #FF6B00);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.msx-tap-banner .msx-tap-cancel {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.38);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.msx-tap-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 9002;
  background: #1A1916;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* ----- 4. Collapsible mobile job cards -------------------- */
@media (max-width: 720px) {
  /* Hide secondary details when collapsed. We do NOT remove them
     from the DOM — desktop and tests can still see them. */
  #vScheduler .sv4-card[data-msx-collapsed="1"] .sv4-card-meta:nth-of-type(n+3),
  #vScheduler .sv4-card[data-msx-collapsed="1"] .sv4-card-flags .sv4-flag-ack,
  #vScheduler .sv4-card[data-msx-collapsed="1"] .sv4-card-mobile-actions .sv4-mobile-add-worker {
    display: none;
  }
  #vScheduler .sv4-card .msx-card-expand {
    position: absolute;
    top: 4px;
    right: 80px;
    background: #f4fbfa;
    border: 1px solid #d8dee5;
    color: var(--navy, #1A1916);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    z-index: 2;
    min-height: 28px;
  }
  #vScheduler .sv4-card .msx-card-quick-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
  }
  #vScheduler .sv4-card .msx-card-quick-row button {
    min-height: 36px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #d8dee5;
    background: #fff;
    color: var(--navy, #1A1916);
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
  }
  #vScheduler .sv4-card .msx-card-quick-row button[data-msx-quick="add-day"] {
    background: #f4fbfa;
    border-color: var(--teal, #FF6B00);
    color: var(--teal-dk, #1f6b62);
  }
}

/* ----- 5. Mobile-friendly Edit button (top-right thumb) --- */
@media (max-width: 720px) {
  #vScheduler .sv4-card .sf-card-edit-btn {
    top: 4px;
    right: 4px;
    min-height: 32px;
    min-width: 56px;
    padding: 4px 10px;
    font-size: 11px;
  }
  /* Re-enable the "Edit" text on phones since we have room and want
     a clearly thumb-friendly target. */
  #vScheduler .sv4-card .sf-card-edit-btn .sf-card-edit-text {
    display: inline;
  }
}

/* ----- 6. Request Queue count badge ----------------------- */
#vScheduler #sv4ReqPanel .msx-queue-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fffbe8;
  border: 1px solid #e9c46a;
  color: #8a5a00;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
}
#vScheduler #sv4ReqPanel .msx-queue-count[data-msx-queue-count="0"] {
  background: #f1f5f5;
  border-color: #d8dee5;
  color: #6b7785;
}
#vScheduler #sv4ReqPanel .msx-queue-count .msx-queue-count-num { font-weight: 800; }

/* ----- 7. Last-action toast for collaboration feedback ---- */
.msx-last-action {
  position: fixed;
  left: 12px;
  bottom: 96px;
  z-index: 8990;
  padding: 8px 12px;
  background: #1A1916;
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  max-width: calc(100vw - 24px);
}
@media (min-width: 721px) {
  .msx-last-action {
    bottom: 16px;
    left: 16px;
  }
}