/* Docked side panel — shared component (frontend/js/components/side-panel.js):
   the Roster Editor inspector, the Leave Requests review, the day detail
   (Current Schedule, Published Roster), the wish day editor, the Planning
   Calendar's day inspector (wide) and the person details of Shift
   Distribution, the working-hours report and wish-based absences.
   The content and the panel side by side while it is open (the content keeps
   its own sideways scroll), one column when closed; no backdrop, nothing
   covers the content. The panel stays in view below the 56px app topbar and
   scrolls its own body. `position: sticky` cannot do that here
   (#main-content is an overflow container while the window scrolls), so the
   panel is fixed over its own reserved 340px column and side-panel.js places
   it (--side-panel-top/-left/-max-height) on scroll, on resize and when the
   content around the workspace changes size.
   ≤600px: a bottom sheet (below). */
@layer components {

.side-panel-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
/* While open the workspace is at least this tall, so a short list or a
   week of the roster still leaves the panel room for its body. */
.side-panel-workspace--open { grid-template-columns: minmax(0, 1fr) 340px; min-height: min(600px, calc(100vh - 160px)); }
/* The content column may shrink below its content's width (a wide grid scrolls inside it). */
.side-panel-workspace > * { min-width: 0; }
.side-panel {
  position: fixed;
  top: var(--side-panel-top, calc(56px + var(--space-2)));
  left: var(--side-panel-left, auto);
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: 340px;
  max-height: var(--side-panel-max-height, calc(100vh - 56px - var(--space-4)));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.side-panel-head { display: flex; align-items: flex-start; gap: var(--space-1); padding: var(--space-3) var(--space-2) var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.side-panel-head--centered { align-items: center; }
.side-panel-heading { flex: 1; min-width: 0; }
.side-panel-title { margin: 0; font-size: var(--text-base); font-weight: 600; overflow-wrap: anywhere; }
.side-panel-head--centered .side-panel-title { text-align: center; }
.side-panel-title:focus { outline: none; }
.side-panel-title:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* An icon button in the header (close, back, previous / next). */
.side-panel-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0; color: var(--text); }
/* The caller's mount point: a column whose own body scrolls. */
.side-panel-content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
/* A plain scrolling body and a fixed footer for callers without their own layout. */
.side-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-3); }
.side-panel-footer { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); border-top: 1px solid var(--border); }

/* .side-panel--wide: a 430px panel and column for content that needs it (the
   Planning Calendar's five-column Need table). Above 600px only: the bottom
   sheet below is the same for every panel. */
@media (min-width: 601px) {
  .side-panel--wide { width: 430px; }
  .side-panel-workspace--open:has(> .side-panel--wide) { grid-template-columns: minmax(0, 1fr) 430px; }
}

@media (max-width: 600px) {
  /* A bottom sheet over the content. */
  .side-panel-workspace--open { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .side-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 450;
    width: auto;
    max-height: 70vh;
    padding-bottom: env(safe-area-inset-bottom);
    border-width: 1px 0 0;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow-overlay);
  }
}
@media print {
  .side-panel { display: none; }
  .side-panel-workspace--open, .side-panel-workspace--open:has(> .side-panel--wide) { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}

} /* @layer components */