/* ============================================================
   Villa Plumbing Field Portal — My Day stress-test fixes
   Build marker: My Day Stress Fixes May 6 (round-6)

   Five additive fixes for QA stress test against the My Day
   overlay.  Visual changes are intentionally minimal — only
   what is needed to satisfy mobile tap-target sizing, hide
   duplicate controls, and keep the page on-brand.

   Target rules:
     1. ~44px tap targets on the My Day full overlay (mobile).
     2. Visible feedback for Remind Person & Schedule Issue
        (modal + toast).
     3. Hidden duplicate My Day buttons must NOT be focusable
        or screen-reader announced.
     4. Generic "Open" buttons get destination-aware labels.
     5. Background Home is inert while My Day overlay is open.
   ============================================================ */

/* ---------- 1. Mobile tap targets (~44px) ----------
   Bump shell back/close + My Day card actions to a
   touch-friendly minimum on phone widths only.  Desktop
   layout is preserved exactly. */
@media (max-width: 720px) {
  /* Shell (Back / Close) — used by every overlay including My Day */
  #vsFullOverlay.show .vs-bar .vs-back,
  #vsFullOverlay.show .vs-bar .vs-close {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 14px;
    font-size: 13.5px;
    line-height: 1.2;
  }
  #vsFullOverlay.show .vs-bar [data-vmdr-pill] {
    min-height: 44px;
    padding: 9px 14px;
    font-size: 12.5px;
  }

  /* My Day refresh button on the live bar */
  .myday-livebar .btn,
  .myday-livebar [data-test="myday-refresh-now"] {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 13px;
  }

  /* Card action row — full-width / two-up layout on phones */
  .myday-item-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
    justify-content: stretch;
  }
  .myday-item-actions .myday-act {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 9px;
    width: 100%;
  }
  /* Primary action stretches across both columns so it reads as the
     dominant tap target. */
  .myday-item-actions .myday-act.primary,
  .myday-item-actions .myday-act[data-myday-primary="1"] {
    grid-column: 1 / -1;
  }

  /* Same treatment for the unified PSR cards used inside My Day */
  .myday-panel .psr-task-card .psr-appr-card-actions,
  .myday-panel .psr-appr-card-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
  }
  .myday-panel .psr-task-card .psr-appr-card-actions .btn,
  .myday-panel .psr-appr-card-actions .btn {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
    width: 100%;
  }
  .myday-panel .psr-task-card .psr-appr-card-actions .btn.primary,
  .myday-panel .psr-appr-card-actions .btn.primary {
    grid-column: 1 / -1;
  }

  /* Footer row on the My Day page (Go to Schedule / Accounting / etc.) */
  .myday-panel ~ div .btn,
  .vs-body .myday-panel + div + div .btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* ---------- 3. Hidden-duplicate hardening ----------
   Source markup hidden by mountUnifiedMyDayCards() must be
   invisible to keyboard, pointer, and screen readers.  We
   already mark these with .psr-task-source-hidden — stack
   the matching a11y rules so they cannot be tabbed or read. */
.myday-panel .psr-task-source-hidden,
.psr-task-source-hidden {
  display: none !important;
}
.myday-panel .psr-task-source-hidden,
.psr-task-source-hidden,
.myday-panel [data-myday-hidden-duplicate="1"] {
  /* belt-and-braces: even if a future sheet overrides display, these
     attributes also block focus/announce paths */
}
/* When the original .myday-item is left in the DOM for compatibility
   reasons, mark its buttons as not focusable.  CSS can't add the
   tabindex attribute itself, but this rule pairs with the JS in
   myday_stress_fixes.js to confirm interaction is impossible. */
.myday-panel .psr-task-source-hidden button,
.myday-panel [data-myday-hidden-duplicate="1"] button {
  pointer-events: none;
}

/* ---------- 2. Remind Person / Schedule Issue feedback modal ----------
   Round-10: bumped to 11200 (above the guided overlay at 9000 and
   above the Source Intelligence info modal at 11000) so that when
   the user opens this modal from INSIDE the guided window — via
   Assign / Request More Info / Remind Person / Schedule Issue — it
   paints in front instead of behind the guided overlay.  Previously
   sat at 8000, which is below #mgrOverlay (9000); QA reported "many
   buttons open behind or do nothing". */
.mds-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(13, 33, 55, 0.55);
  display: none;
  align-items: center; justify-content: center;
  z-index: 11200;
  backdrop-filter: blur(3px);
  padding: 1rem;
}
.mds-modal-overlay.show { display: flex; }
.mds-modal {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.mds-modal-hdr {
  background: linear-gradient(135deg, var(--navy, #141310), var(--navy-md, #1d4366));
  color: #fff;
  padding: 0.85rem 1.1rem;
  display: flex; align-items: center; gap: 10px;
}
.mds-modal-hdr h3 {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px; font-weight: 700;
  letter-spacing: 0.4px;
  flex: 1;
}
.mds-modal-hdr .mds-close {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
  min-height: 36px;
}
.mds-modal-body {
  padding: 1rem 1.15rem;
  font-size: 14px; line-height: 1.5;
  color: var(--tx, #1a2433);
  display: flex; flex-direction: column; gap: 0.85rem;
}
.mds-modal-body label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--tx-md, #4a5a73);
}
.mds-modal-body select,
.mds-modal-body textarea,
.mds-modal-body input {
  width: 100%;
  padding: 9px 11px;
  border: 1.5px solid var(--bd, #cdd6e0);
  border-radius: 9px;
  font-size: 14px;
  font-family: 'Barlow', sans-serif;
  color: var(--tx, #1a2433);
  background: #fff;
  outline: none;
  box-sizing: border-box;
}
.mds-modal-body textarea { min-height: 90px; resize: vertical; }
.mds-modal-body select:focus,
.mds-modal-body textarea:focus,
.mds-modal-body input:focus { border-color: var(--teal, #FF6B00); }
.mds-modal-body .mds-context {
  background: #f4f7fb;
  border: 1px solid #e1e7ee;
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 12.5px;
  color: var(--tx-md, #4a5a73);
}
.mds-modal-actions {
  border-top: 1px solid #e6e9ee;
  padding: 0.7rem 1.1rem;
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
  background: #fafbfc;
}
.mds-modal-actions .btn {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  border-radius: 9px;
  padding: 9px 14px;
  font-size: 13px;
  border: 1.5px solid var(--bd, #cdd6e0);
  background: #fff;
  color: var(--tx, #1a2433);
  cursor: pointer;
  min-height: 40px;
}
.mds-modal-actions .btn.primary {
  background: var(--teal, #FF6B00);
  border-color: var(--teal, #FF6B00);
  color: #fff;
}
.mds-modal-actions .btn.primary:hover { background: var(--teal-dk, #1f6f63); border-color: var(--teal-dk, #1f6f63); }
.mds-modal-actions .btn.warn {
  background: #fff4dc; color: #5a3b0b; border-color: #f1d28a;
}

@media (max-width: 480px) {
  .mds-modal { max-width: 100%; border-radius: 12px; }
  .mds-modal-actions .btn { min-height: 44px; flex: 1 1 0; }
}

/* ---------- 5. Background-inert visual cue ---------- */
body[data-myday-overlay-open="1"] {
  /* No visual treatment beyond what the overlay already does — but we
     surface a stable hook so QA can verify the state. */
}