/* Day detail — shared component (frontend/js/components/day-detail.js), shown
   in the docked side panel (shared/side-panel.css) beside the month on
   Current Schedule and Published Roster. The panel is 340px wide, so each
   shift type is a label line over its wrapping chips. */
@layer components {

.day-detail-loc {
  margin-bottom: var(--space-4);
}

.day-detail-loc:last-child {
  margin-bottom: 0;
}

.day-detail-loc-title {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
}

.day-detail-shift-row {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.day-detail-shift-row:last-child {
  margin-bottom: 0;
}

.day-detail-shift-label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.day-detail-shift-fill {
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: var(--space-1);
}

.day-detail-shift-fill.understaffed {
  color: var(--danger);
}

.day-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.day-detail-chips .shift-chip,
.day-detail-chips .chip-unfilled {
  flex: 0 1 auto;
  max-width: 100%;
  margin-bottom: 0;
}

.day-detail-actions { grid-template-columns: 1fr 1fr; }

.day-detail-leave,
.day-detail-violations {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.day-detail-violations .conflict-chip {
  margin-bottom: var(--space-2);
}

.day-detail-empty {
  color: var(--muted);
  font-size: var(--text-sm);
  padding: var(--space-4) 0;
}
/* Print one day's roster from the day panel: everything that neither is nor
   contains the panel is hidden, and the panel prints as a plain block with
   its whole body (side-panel.css otherwise hides panels in print). */
@media print {
  body.printing-day-detail *:not(:has(.day-detail-panel)):not(.day-detail-panel):not(.day-detail-panel *) { display: none !important; }
  body.printing-day-detail #app,
  body.printing-day-detail .side-panel-workspace { display: block !important; }
  body.printing-day-detail #main-content { padding: 0; }
  body.printing-day-detail .side-panel.day-detail-panel {
    position: static;
    display: block;
    width: auto;
    max-height: none;
    border: 0;
    box-shadow: none;
  }
  body.printing-day-detail .day-detail-panel .side-panel-body { overflow: visible; padding: 0; }
  body.printing-day-detail .day-detail-panel .side-panel-head { padding: 0 0 var(--space-2); }
  body.printing-day-detail .day-detail-panel .side-panel-icon,
  body.printing-day-detail .day-detail-panel .side-panel-footer { display: none !important; }
}

/* ── Day information (features/day-information) ────────────────────────────── */
.day-information-panel { margin-bottom:var(--space-4); }
.day-information-back { display:inline-flex; align-items:center; gap:var(--space-1); min-height:44px; margin-bottom:var(--space-1); }
.day-information-header { flex-wrap:wrap; gap:var(--space-3); }
.day-information-stepper { display:flex; align-items:center; gap:var(--space-2); }
.day-information-stepper .btn { min-width:36px; justify-content:center; }
.day-information-item { border-left:3px solid var(--primary); background:var(--surface-sunk); padding:var(--space-2) var(--space-3); margin-top:var(--space-2); border-radius:var(--radius-sm); }
.day-information-item.important { border-left-color:var(--warning); }
.day-information-title { font-weight:700; }
.day-information-meta { color:var(--muted); font-size:.8rem; margin-top:2px; }
.day-information-description { margin-top:var(--space-2); white-space:pre-wrap; }

.day-info-badge { pointer-events: auto; display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; min-height: 32px; padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--primary); cursor: pointer; font: inherit; }
.day-info-badge.important { color: var(--warning); }
/* The roster editor needs a stronger signal in its dense date column. */
.day-info-badge--prominent {
  min-height: 36px;
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.day-info-badge--prominent:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.day-info-badge--prominent.important { background: var(--warning); border-color: var(--warning); color: var(--on-warning); }
.day-info-badge--prominent.important:hover { background: var(--warning-hover); border-color: var(--warning-hover); }
.day-info-count { padding: 1px var(--space-1); border-radius: var(--r-pill); background: color-mix(in srgb, currentColor 18%, transparent); }
.rgv2-date-td .day-info-badge--prominent { display: flex; width: max-content; margin-top: var(--space-2); }
.day-info-preview { display: inline-block; max-width: 24ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.day-information-item summary { cursor: pointer; overflow-wrap: anywhere; }
.day-information-item .day-information-meta { display: block; }
.day-information-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block: var(--space-2); }
.day-information-options { margin-block: var(--space-3); }
/* Edit, record outcome and notify: states that replace the surface's body
   (day-information-editor.js), with their own Save/Cancel row. */
.day-information-state { display: grid; gap: var(--space-3); }
.day-information-state h3 { margin: 0; font-size: var(--text-base); overflow-wrap: anywhere; }
.day-information-state p { margin: 0; }
.day-information-state .day-information-options { margin-block: 0; }
.day-information-state-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.day-information-state-delete { margin-right: auto; }
.day-information-state-actions .inline-confirm { flex-basis: 100%; order: -1; margin-top: 0; }
.day-information-item { overflow-wrap: anywhere; }
@media (pointer: coarse) { .day-info-badge { min-height: 44px; } }
@media screen { .day-information-print { display: none; } }
@media print {
 .day-information-actions, .day-info-badge { pointer-events: auto; display: none; }
 .day-information-item { break-inside: avoid; }
 .day-information-print { break-before: page; }
}
/* Changed-since-publish indicator (Roster Editor manual amendment or a peer's
   Day-Ahead Self-Service move — roster_slots.source = 'amendment', §16's
   "Day-Ahead Self-Service Reassignment" entry). A badge icon: outlines are
   reserved for interaction (docs/ROSTER_SIGNALS_PLAN_2026-10-04.md §2). */
.chip-amended {
  color: var(--info);
  font-size: 0.75rem;
  margin-left: 2px;
  display: inline-block;
  vertical-align: middle;
}

/* Staffing-override marker (chips.js staffingOverrideMarkerHtml): a
   configuration fact, not a problem, so neutral rather than amber — a badge
   after the chip's other badges, or the cell's marker in the dense grid's
   add column. */
.chip-override {
  color: var(--muted);
  font-size: 0.75rem;
  margin-left: 2px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* On-duty coordinator marker (chips.js onDutyBadgeHtml; day-detail.js and
   day-ahead.js mark the holder's chip once the on-duty lookup resolves). A
   fact about the assignment, not a problem: a neutral badge, no fill and no
   amber (docs/ROSTER_SIGNALS_PLAN_2026-10-04.md §2 — amber chip fill means
   open through sickness). */
.chip-duty-badge {
  color: var(--text);
  font-size: 0.75rem;
  margin-left: 2px;
  display: inline-block;
  vertical-align: middle;
}


/* A named sick slot (chips.js, day-detail.js): the name and its dot are
   struck through and dimmed; the badges stay at full strength, so the amber
   sick badge and a person-problem mark (roster-grid.css .chip-problem) read
   clearly in both themes. Sickness is amber, never red
   (docs/ROSTER_SIGNALS_PLAN_2026-10-04.md §3.3). */
.chip-sick-leave .chip-name { text-decoration: line-through; }
.chip-sick-leave .chip-name,
.chip-sick-leave .chip-dot { opacity: 0.72; }

.chip-sick {
  color: var(--warning);
  font-size: 0.75rem;
  margin-left: 2px;
  display: inline-block;
}


.day-panel-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

} /* @layer components */