/* Patient board — the main view after login */

.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.board-stats {
  display: flex;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.board-stats strong {
  color: var(--text);
}

.board-filters {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.filter-chip {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--card);
  cursor: pointer;
  transition: all 0.15s;
}

.filter-chip:hover,
.filter-chip.active {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary);
}

/* Patient card grid */
.patient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--sp-3);
}

@media (max-width: 480px) {
  .patient-grid {
    grid-template-columns: 1fr;
  }
}

/* Patient card */
.patient-card {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  position: relative;
}

.patient-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--border);
}

/* Acuity left stripe */
.patient-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.patient-card.acuity-1::before { background: var(--critical); }
.patient-card.acuity-2::before { background: var(--serious); }
.patient-card.acuity-3::before { background: var(--watch); }
.patient-card.acuity-4::before { background: var(--stable); }
.patient-card.acuity-5::before { background: var(--stable); }

.patient-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.patient-name {
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--text);
}

.patient-room {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}

.patient-meta {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.patient-complaint {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--sp-3);
  line-height: 1.4;
}

.patient-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.patient-actions-count {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.patient-actions-count .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warning);
}

.patient-actions-count .dot.done {
  background: var(--stable);
}

/* Handoff status indicator on card */
.handoff-indicator {
  font-size: var(--fs-xs);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.handoff-indicator .status-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.handoff-indicator.draft .status-icon    { background: var(--surface); color: var(--text-muted); }
.handoff-indicator.sent .status-icon     { background: var(--primary-bg); color: var(--primary); }
.handoff-indicator.verified .status-icon { background: var(--stable-bg); color: var(--stable); }

/* Shift bar */
.shift-bar {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
}

.shift-info {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.shift-type {
  font-weight: 600;
  text-transform: capitalize;
}

.shift-time {
  color: var(--text-muted);
}

.shift-team {
  display: flex;
  gap: var(--sp-1);
}

.team-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  border: 2px solid var(--card);
}

.team-avatar:not(:first-child) {
  margin-left: -8px;
}