/**
 * PR-FIX-8A — draggable_overlays.css
 * Drag handle styles + full-page promotion styles.
 * Tenant-neutral. No hardcoded company references.
 */

/* ── Drag handle cursor on title bars ──────────────────────────────────────── */
[data-drag-handle] {
  cursor: move !important;
  user-select: none;
  -webkit-user-select: none;
}

[data-drag-handle]:active {
  cursor: grabbing !important;
}

/* Subtle drag-indicator dots on the left of every draggable handle bar */
[data-drag-handle]::before {
  content: '⠿';
  font-size: 14px;
  opacity: 0.35;
  margin-right: 8px;
  letter-spacing: -1px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Draggable panels get a smooth shadow boost while being dragged */
[data-tr-draggable] {
  transition: box-shadow 0.15s ease;
  will-change: transform;
}

/* ── Full-page overlay promotion ───────────────────────────────────────────── */
/* Replaces the small centered card with a fleet-style full-page experience */

.tr-fullpage-overlay {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.tr-fullpage-shell {
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  margin: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* True fullscreen variant (Bid Tracker Enlarge — already fills inset:0) */
.tr-fullpage-overlay--full {
  padding: 0 !important;
}

.tr-fullpage-shell--full {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* ── Customer Hub modal → full-page ────────────────────────────────────────── */
.vch-modal-overlay.tr-fullpage-overlay {
  z-index: 12000;
}

.vch-modal-overlay.tr-fullpage-overlay .vch-modal-card.tr-fullpage-shell {
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ── Permissions Matrix → full-page ───────────────────────────────────────── */
.psr-perm-modal.tr-fullpage-overlay {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  z-index: 9000;
}

.psr-perm-modal.tr-fullpage-overlay .psr-perm-card.tr-fullpage-shell {
  max-width: 100% !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow-y: auto !important;
}

.psr-perm-modal.tr-fullpage-overlay .psr-perm-hd {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--navy, #1A1A2E);
  color: #fff;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.psr-perm-modal.tr-fullpage-overlay .psr-perm-hd h3 {
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  flex: 1;
}

.psr-perm-modal.tr-fullpage-overlay .psr-perm-table {
  font-size: 14px;
  margin: 1.5rem;
  width: calc(100% - 3rem);
}

/* ── Bid Tracker Enlarge → true fullscreen ─────────────────────────────────── */
.btw-enlarge-overlay.tr-fullpage-overlay {
  inset: 0 !important;
  padding: 0 !important;
  background: rgba(0,0,0,.92) !important;
  z-index: 7200;
}

.btw-enlarge-overlay.tr-fullpage-overlay .btw-enlarge-shell.tr-fullpage-shell--full {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #0d1117 !important;
}

/* ── Drag handle injection for bars that lack flex display ─────────────────── */
/* mgr-bar already has display:flex via its own CSS — just ensure the
   pseudo-element doesn't break the layout */
.mgr-bar[data-drag-handle]::before {
  color: rgba(255,255,255,.5);
  order: -1;
}

.phcc-bar[data-drag-handle]::before {
  color: rgba(255,255,255,.5);
  order: -1;
}

.lbi-shell-h[data-drag-handle]::before {
  color: rgba(255,255,255,.5);
  display: inline-block;
}

.vbps-overlay-bar[data-drag-handle]::before {
  color: rgba(26,25,22,.4);
}

.r16-modal-hd[data-drag-handle]::before {
  color: rgba(26,25,22,.4);
}

.vinv-hd[data-drag-handle]::before {
  color: rgba(255,255,255,.5);
  order: -1;
}

/* Service modal h4 gets a pill drag hint instead of dots */
.sjs-modal-card h4[data-drag-handle]::before {
  content: '⣿';
  font-size: 11px;
  opacity: 0.3;
  margin-right: 6px;
}

/* ── Mobile: disable drag on touch devices narrower than 600px ─────────────── */
@media (max-width: 599px) {
  [data-drag-handle] {
    cursor: default !important;
  }
  [data-tr-draggable] {
    position: static !important;
    left: auto !important;
    top: auto !important;
  }
}

/* ── Print: hide all overlays ──────────────────────────────────────────────── */
@media print {
  .tr-fullpage-overlay,
  [data-tr-draggable] {
    display: none !important;
  }
}