/* Empty-state canvas: faint grid overlay hinting where widgets will snap. */
#dashboard-empty {
  min-height: 60vh;
  cursor: pointer;
  border: 1px dashed var(--bs-border-color);
  border-radius: .5rem;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 59px, var(--bs-border-color-translucent) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, var(--bs-border-color-translucent) 80px);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
/* Each widget is a flex-column card filling its grid cell: the card-header stays put while
   only the card-body scrolls. */
.grid-stack-item-content { overflow: hidden; }
.grid-stack-item-content > .card { height: 100%; display: flex; flex-direction: column; }
.grid-stack-item-content > .card > .card-header { flex: 0 0 auto; }
.grid-stack-item-content > .card > .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Mobile (< Bootstrap md): GridStack positions items absolutely and reserves h×cellHeight even when
   a body is hidden, which would leave gaps under collapsed widgets. Override to a natural document
   flow so each widget is exactly as tall as its content and collapsing reclaims the space. Desktop
   keeps the real grid. */
@media (max-width: 767.98px) {
  /* Same stacking treatment for the home dashboard (#dashboard-grid) and the analytics board
     (#analytics-grid) — both are 12-column GridStack boards that must fall to a single readable
     column on phones. NB: the collapse-to-header rule stays #dashboard-grid-only; the analytics
     widgets have no collapse control. */
  #dashboard-grid.grid-stack,
  #analytics-grid.grid-stack { height: auto !important; }
  #dashboard-grid > .grid-stack-item,
  #analytics-grid > .grid-stack-item {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    inset: auto !important;
    margin: 0 0 .5rem 0 !important;
  }
  #dashboard-grid > .grid-stack-item > .grid-stack-item-content,
  #analytics-grid > .grid-stack-item > .grid-stack-item-content {
    position: static !important;
    inset: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  #dashboard-grid .grid-stack-item-content > .card,
  #analytics-grid .grid-stack-item-content > .card { height: auto !important; }
  #dashboard-grid .grid-stack-item-content > .card > .card-body,
  #analytics-grid .grid-stack-item-content > .card > .card-body { overflow: visible !important; }
  /* Collapsed: fold the widget to just its header. */
  #dashboard-grid .card.dash-collapsed > .card-body { display: none !important; }
}

/* Staff widget: master-detail. Desktop = avatar tab rail (left) + detail (right). */
.dash-staff-wrap { display: flex; gap: .75rem; height: 100%; }
.dash-staff-rail { display: flex; flex-direction: column; gap: .25rem; overflow-y: auto; flex: 0 0 auto; }
.dash-staff-detail { flex: 1 1 auto; min-width: 0; overflow-y: auto; }

/* Each staff entry is a clickable avatar tab with hover/selected pill states. */
.dash-staff-tab {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .25rem; border: 1px solid transparent; border-radius: .5rem;
  background: transparent; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.dash-staff-tab:hover { background: var(--bs-secondary-bg); }
.dash-staff-tab.selected {
  background: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
}
.dash-staff-avatar { position: relative; line-height: 0; flex: 0 0 auto; }
.dash-bday-ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e83e8c; }
.dash-bday-mark { position: absolute; bottom: -2px; right: -2px; font-size: .8rem; }
.dash-away-ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fd7e14; }
.dash-away-mark { position: absolute; bottom: -2px; right: -2px; width: .7rem; height: .7rem; border-radius: 50%; background: #fd7e14; border: 1px solid #fff; }
.dash-away-badge { background-color: #fd7e14; color: #fff; }
.dash-upcoming-badge { background-color: var(--bs-secondary); color: #fff; }

/* Mobile: rail flips to a horizontal scrollable strip on top, detail below. */
@media (max-width: 767.98px) {
  .dash-staff-wrap { flex-direction: column; }
  .dash-staff-rail { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
}