/* sortable panels — shared styling for drag handle, hover, drag/drop states */

.sortable-panel {
  position: relative;
  /* 16 Sep 2026 - Hugo: "what is that dark square sharp shape behind the shot breakdown
     panel?" It is AROUND the card, square where the card is rounded, and it does not appear
     in headless Chrome - which is the signature of a compositing artefact rather than a
     stray background. A full DOM walk proved nothing here paints: every ancestor and sibling
     computes background-color rgba(0,0,0,0) and background-image none.
     The trigger is this wrapper. It sits pixel-identical to the card, it clips with
     `overflow: hidden`, and it had `border-radius: 0` while the card inside it is 20px and
     carries `backdrop-filter: blur(22px)`. Chromium clips a backdrop-filter to the nearest
     clipping ancestor, so the blurred backdrop was being painted into this SQUARE box and
     its corners showed past the card's rounded ones.
     Rounding the wrapper's clip costs nothing - it paints no background of its own and its
     box already matches the card exactly, so nothing moves and no other theme changes. */
  border-radius: var(--r-lg);
  transition: transform 150ms ease, opacity 150ms ease, box-shadow 150ms ease;
}

/* While a panel is being dragged, freeze pointer events on every panel's
   children so dragover/drop always reach the panel itself, not a button or
   text node inside. The panel surface stays interactive. */
body.is-dnd-active .sortable-panel > * {
  pointer-events: none;
}

/* the panel itself remains a normal card; we just add states */
.sortable-panel.is-dragging {
  opacity: 0.6;
  box-shadow:
    0 18px 32px -10px color-mix(in srgb, var(--shade-11) 55%, transparent),
    0 6px 12px -4px color-mix(in srgb, var(--shade-11) 35%, transparent);
  transform: scale(0.985);
  cursor: grabbing;
}

/* drop indicator — soft gold line where the panel will land */
.sortable-panel.is-drop-before::before,
.sortable-panel.is-drop-after::after {
  content: "";
  position: absolute;
  border-radius: var(--r-round);
  pointer-events: none;
  z-index: 7;
  background: linear-gradient(90deg, transparent 0%, var(--gold-18) 6%, var(--gold-18) 94%, transparent 100%);
  opacity: 0.95;
}
.sortable-panel.axis-y.is-drop-before::before {
  top: -8px; left: 4px; right: 4px; height: 2px;
}
.sortable-panel.axis-y.is-drop-after::after {
  bottom: -8px; left: 4px; right: 4px; height: 2px;
}
.sortable-panel.axis-x.is-drop-before::before {
  top: 4px; bottom: 4px; left: -8px; width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--gold-18) 6%, var(--gold-18) 94%, transparent 100%);
}
.sortable-panel.axis-x.is-drop-after::after {
  top: 4px; bottom: 4px; right: -8px; width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--gold-18) 6%, var(--gold-18) 94%, transparent 100%);
}

/* ---------- WHOLE-PANEL DRAG (no handle button) ---------- */
/* Each sortable panel surface itself is the grab target.
   Interactive children (button, a, input, etc.) keep their own
   cursor and clicks via shouldSuppressDrag() in the JS hook. */
.sortable-panel {
  cursor: grab;
}
.sortable-panel.is-dragging {
  cursor: grabbing;
}
/* Standard interactive children should look interactive, not grabbable */
.sortable-panel button,
.sortable-panel a,
.sortable-panel input,
.sortable-panel select,
.sortable-panel textarea,
.sortable-panel label,
.sortable-panel [role="button"],
.sortable-panel [contenteditable="true"],
.sortable-panel .row-shot,
.sortable-panel .sb-q-row,
.sortable-panel .week-cell,
.sortable-panel .time-slot,
.sortable-panel .pipe-row-item,
.sortable-panel .activity-row,
.sortable-panel .media-thumb,
.sortable-panel .dropzone,
.sortable-panel .pdot,
.sortable-panel .pipe-donut-wrap,
.sortable-panel .rc-iconbtn,
.sortable-panel .sb-queue--clickable {
  cursor: auto;
}
.sortable-panel button,
.sortable-panel a,
.sortable-panel [role="button"],
.sortable-panel .pdot,
.sortable-panel .media-thumb,
.sortable-panel .week-cell,
.sortable-panel .row-shot,
.sortable-panel .rc-iconbtn {
  cursor: pointer;
}

/* Sidebar zone — sortable list takes over the .sidebar-footer contents */
.sortable-zone-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sortable-zone-sidebar .sortable-panel {
  /* let inner card style the visuals; wrapper is just a positioning shell */
  display: block;
}

/* Right column zone */
.sortable-zone-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sortable-zone-right .sortable-panel {
  display: block;
}

/* Footer zone — horizontal row of equal-width cards */
.sortable-zone-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sortable-zone-footer .sortable-panel {
  display: block;
  min-width: 0;
}

/* Settings reset button */
.layout-reset-card {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cream-10) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.layout-reset-card .lr-text { display: flex; flex-direction: column; gap: 2px; }
.layout-reset-card .lr-title {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  color: var(--ink);
  letter-spacing: var(--track-005);
}
.layout-reset-card .lr-sub { font-size: var(--fs-12); color: var(--ink-muted); }
.layout-reset-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cream-5) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  color: var(--ink);
  font-size: var(--fs-12); font-weight: var(--fw-semi);
  cursor: pointer;
  transition: background var(--dur-1) ease, transform 80ms ease;
}
.layout-reset-btn:hover { background: color-mix(in srgb, var(--cream-5) 95%, transparent); }
.layout-reset-btn:active { transform: translateY(1px); }
.layout-reset-btn.confirmed {
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  border-color: color-mix(in srgb, var(--leaf) 50%, transparent);
}