/* @cascade-order: 6 — do not reorder. Split 7/10 of the former
   monolithic style.css (see docs/ui-pattern-audit.md and ADR-0095-style-css-split-into-ten-contiguous-files).
   Originally a contiguous slice of style.css in @cascade-order. That
   ordering is still enforced (tests/unit/css-split-structure.test.js);
   byte-for-byte reconstruction is NOT enforced and must not be relied on
   — the split files have been edited independently since. Earlier headers
   cited tests/unit/css-split-equality.test.js, which does not exist.
   Contains: The camp attendance page — one large section, the day-of check-in surface before its V3 redesign.
   Original line range: 12920-14001. */
/* ============================================================================
   ATTENDANCE PAGE
   ============================================================================ */

/* --- Header Bar: Camp Select + Date Nav --- */
.attendance-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-sm);
}

/* --- Toolbar: Stats + Coach + Search + Actions --- */
/* `.attendance-toolbar` is owned by v3.css. The rule that used to sit here was
   from 2026-03-16 ("fix toolbar height to match the phase toggle"), for a
   toolbar layout the V3 command bar replaced. v3.css overrode its display,
   align-items, padding and background — but not `border-radius` or
   `flex-wrap`, so those two survived by NOT conflicting and gave the
   full-width command bar rounded corners the design does not have. Its only
   consumer is that bar. */

.att-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-size: var(--text-sm);
}

.att-stat i {
  font-size: var(--text-xs);
}

.att-stat span {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.att-stat-highlight span {
  color: var(--color-accent);
}

.att-stat-warning,
.att-stat-warning i,
.att-stat-warning span {
  color: var(--color-warning);
}

/* `.attendance-toolbar-right` was here and is DELETED (ADR-0124): the event
   toolbar's right slot, a second spelling of the `.toolbar-right` camp's band
   already used for the same job. The two disagreed about more than the name —
   this one was `align-items: stretch`, which is the only reason event's one
   action stood 34.5px tall while camp's two stood 31px. The band declares that
   height itself now, in v3.css, beside the slot. */

/* The "Group filter badges" block that lived here is GONE.

   It styled `.filter-group` as a dashed chip, and was superseded on 2026-03-20
   by the compact age badges (20559b9f) — its markup went with it, leaving the
   rules behind. `.filter-group-delete` and `.filter-group.active` had zero
   consumers anywhere in public/.

   It had stopped being merely dead: the V3 crosswalk renames the filter panel's
   column (`.fcol`) onto `.filter-group`, so this chip's dashed border and 2px/8px
   padding leaked into the panel's columns. v3.css only redeclares display /
   flex-direction / gap, so the border and padding survived by not conflicting.
   Deleting the rule that actually applies is the fix; out-specifying it would
   have left two owners. */

/* Roll call history badges */
.rollcall-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
}
.rollcall-badge-time {
  opacity: 0.6;
}

/* Quick-info popover. The pointer is the shared `.anchored.arrow-*` family in
   v3.css (ADR-0120) — this element carries `anchored` and the placement owner
   writes the class. Its own near-copy of those triangles is deleted: same two
   shapes, but drawn with a translateY instead of a margin and at 8/7px instead
   of 8px + a 1px inset, so the two pointers were subtly different sizes on two
   cards that sit side by side on the same page. */
.quickinfo-popover {
  position: fixed;
  z-index: var(--z-anchored, 1000);
  width: 300px;
  padding: var(--space-3);
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Contact card section */
.qi-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.qi-contact-child {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-md);
}
.qi-age {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.qi-contact-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.qi-phone {
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.qi-phone i {
  font-size: var(--text-xs);
}

/* Alert section */
.qi-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.qi-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.qi-alert i {
  flex-shrink: 0;
  margin-top: 2px;
}
.qi-alert-medical {
  background: var(--color-danger-tint, rgba(220, 53, 69, 0.08));
  color: var(--color-danger);
  font-weight: var(--font-medium);
}
.qi-alert-note {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}
.qi-alert-campnote {
  background: var(--color-info-tint, rgba(23, 162, 184, 0.08));
  color: var(--color-info);
  font-weight: var(--font-medium);
}

/* Status flags */
.qi-flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.qi-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
}
.qi-flag i {
  font-size: 0.7143rem;
}
.qi-flag-warn {
  background: var(--color-warning-tint);
  color: var(--color-warning);
}
.qi-flag-late {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-warning);
}
.qi-flag-buddy {
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

/* Employee action row (account / registration / balance deep-links). Sits
   under the read-only safety card, separated by the popover's own gap plus a
   hairline so the card above stays the visual subject. Full-width stacked
   rows via the app's existing .overflow-menu-item pattern — not squeezed
   3-across chips, which read as too small to be clearly tappable labels. */
.qi-actions {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-2);
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-border);
}
.qi-actions .overflow-menu-item {
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
/* Pushes the "Owes $X.XX" pill to the row's right edge — the only child that
   needs it; the icon + "Balance" label stay left-aligned like the other rows. */
.qi-actions .overflow-menu-item .balance-badge {
  margin-left: auto;
}

.quickinfo-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-anchored, 1000) - 1);
  background: rgba(0, 0, 0, 0.3);
}

.quickinfo-popover.quickinfo-centered {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw - 32px);
  max-width: 360px;
}

/* Attendance locked banner */
.attendance-locked-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.attendance-locked-banner .unlock-link {
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
}

.complete-camp-btn {
  margin-left: auto;
}

/* Staff checklist in Edit Camp modal */

/* The two `#overview-search .search-clear` rules that were here are gone
   (ADR-0128). They existed only to undo `.search-wrapper .search-clear`'s
   solid accent-blue fill and put the button back to the quiet base — an
   override of an override of the one correct rule. Both are deleted with the
   copy they were fighting. */

.attendance-actions {
  align-items: stretch;
}

/* Match action buttons to btn-toggle sizing */
.attendance-actions .btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

/* --- Attendance Groups --- */
.group-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.group-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.group-count {
  background: var(--color-bg);
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.group-action-btn {
  margin-left: auto;
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
}

/* Present group */
#group-present .group-header {
  background: var(--color-success-tint);
  border-bottom-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}

[data-theme="dark"] #group-present .group-header {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-bg-subtle));
}

#group-present .group-count {
  background: var(--color-success);
  color: white;
}

.row-main {
  cursor: pointer;
  padding: var(--space-1);
  margin: calc(-1 * var(--space-1));
  border-radius: var(--radius-sm);
}

.row-meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.row-pickup {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-left: auto;
}

.waiver-warning {
  color: var(--color-warning);
}

.has-notes {
  font-size: var(--text-sm);
}

/* Days indicator for partial week registrations */

/* Action Buttons */
.row-action {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-checkin {
  background: var(--color-success);
  color: white;
}

.btn-checkin:hover {
  filter: brightness(1.1);
}

.btn-checkout {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn-checkout:hover {
  background: var(--color-warning-tint);
  border-color: var(--color-warning);
}

.btn-undo {
  background: transparent;
  color: var(--color-text-muted);
  padding: var(--space-2);
  font-size: var(--text-lg);
}

.btn-undo:hover {
  color: var(--color-text);
  background: var(--color-bg-subtle);
}

.btn-edit-placeholder {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.btn-edit {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: transparent;
  color: var(--color-text-muted);
  padding: var(--space-1);
  font-size: var(--text-sm);
}

.btn-edit:hover {
  color: var(--color-accent);
  background: var(--color-bg-subtle);
}

/* Gone section is muted */
#group-gone .attendance-row {
  opacity: 0.7;
}

#group-gone .attendance-row:hover {
  opacity: 1;
}

/* Quick Checkout Modal */
.quick-checkout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.quick-checkout .late-warning {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-warning-tint);
  border-radius: var(--radius-md);
  color: var(--color-warning);
}

.quick-checkout .checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.quick-checkout .optional-field {
  margin-top: var(--space-2);
}

/* Camper Card Modal */
.camper-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.camper-card .card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
}

.camper-card .card-row .label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.camper-card .card-row .value {
  font-weight: var(--font-medium);
}

.camper-card .card-row.clickable {
  cursor: pointer;
  padding: var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  border-radius: var(--radius-md);
}

.camper-card .card-row.clickable:hover {
  background: var(--color-bg-subtle);
}

.camper-card .card-section {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}

.camper-card .card-section.notes {
  background: var(--color-bg-subtle);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin: var(--space-2) 0;
  border-top: none;
}

.camper-card .note {
  margin: 0;
  font-size: var(--text-sm);
}

.camper-card .note + .note {
  margin-top: var(--space-2);
}

.camper-card .note.warning {
  color: var(--color-warning);
}

.camper-card .value.warning {
  color: var(--color-warning);
}

.camper-card .value.ok {
  color: var(--color-success);
}

.camper-card .value.danger {
  color: var(--color-danger);
  font-weight: var(--font-semibold);
}

/* Enhanced Camper Profile Modal */
.camper-profile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.camper-profile .profile-section {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.camper-profile .profile-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.camper-profile .profile-section.muted {
  opacity: 0.7;
}

.camper-profile .section-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
}

.camper-profile .card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
}

.camper-profile .card-row .label {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.camper-profile .card-row .value {
  text-align: right;
  word-break: break-word;
}

.camper-profile .card-row .value.highlight {
  color: var(--color-accent);
  font-weight: var(--font-medium);
}

.camper-profile .card-row .value.link {
  color: var(--color-accent);
}

.camper-profile .card-row.clickable {
  cursor: pointer;
  padding: var(--space-2) var(--space-1);
  margin: 0 calc(-1 * var(--space-1));
  border-radius: var(--radius-sm);
}

.camper-profile .card-row.clickable:hover {
  background: var(--color-bg-subtle);
}

.camper-profile .note {
  font-size: var(--text-sm);
  padding: var(--space-2);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  margin-top: var(--space-1);
}

.camper-profile .note.warning {
  background: var(--color-warning-tint);
  color: var(--color-warning);
}

.camper-profile .value.warning {
  color: var(--color-warning);
}

.camper-profile .value.ok {
  color: var(--color-success);
}

.camper-profile .value.danger {
  color: var(--color-danger);
  font-weight: var(--font-semibold);
}

.camper-profile .text-xs {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Tablet/Touch Friendly - Camp UI */
@media (max-width: 600px) {
  .group-header {
    padding: var(--space-2) var(--space-3);
  }
}

/* Roll Call Modal */
.rollcall-modal {
  min-width: 320px;
}

.rollcall-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.rollcall-time {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.rollcall-list {
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.rollcall-list .attendance-row {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  gap: var(--space-3);
}

.rollcall-counted {
  opacity: 0.5;
}

.rollcall-count {
  padding: var(--space-2) 0;
  text-align: center;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Checkout Modal */
.checkout-modal h3 {
  margin-bottom: var(--space-4);
}

.checkout-late-warning {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-warning-tint);
  border-radius: var(--radius-md);
}

/* Camp Form */
.camp-form {
  max-width: 600px;
}

.camp-dates-input {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.camp-dates-input input {
  width: auto;
}

/* Read-only form values with status colors (waiver, age in registration edit) */
.form-value.ok {
  color: var(--color-success);
}

.form-value.warning {
  color: var(--color-warning);
}

/* Linked Account Card in Registration Edit */
.linked-account-section {
  margin-bottom: var(--space-4);
}

.linked-account-card.ok {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 5%, var(--color-bg-elevated));
}

.linked-account-card.warning {
  border-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 5%, var(--color-bg-elevated));
}

.linked-account-card.not-linked {
  border-style: dashed;
  background: var(--color-bg-subtle);
}

.linked-account-details .ok {
  color: var(--color-success);
}

.linked-account-details .warning {
  color: var(--color-warning);
}

/* Compact variant for view modal */
.linked-account-card.compact {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.linked-account-card.compact .linked-account-name {
  margin-bottom: 0;
  font-weight: var(--font-medium);
}

.linked-account-card.compact .ok {
  color: var(--color-success);
}

.linked-account-card.compact .warning {
  color: var(--color-warning);
}

/* Info Card Component (unified card for contact/order info in camper profile) */
.info-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg-elevated);
  font-size: var(--text-sm);
}

.info-card.empty {
  border-style: dashed;
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}

/* Section label between info-cards (View Account modal: Camps / Balance / Notes). */
.info-card-section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: var(--space-3) 0 var(--space-1);
}
.info-card-section-label:first-child { margin-top: 0; }

.info-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  gap: var(--space-2);
}

.info-card-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.info-card-row:first-child {
  padding-top: 0;
}

.info-card-label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.info-card-value {
  text-align: right;
  min-width: 0;
}

.info-card-link {
  color: var(--color-accent);
  text-decoration: none;
}

.info-card-link:hover {
  text-decoration: underline;
}

.info-card-alert {
  margin-top: var(--space-2);
  padding: 8px var(--space-2);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  border-radius: var(--radius-sm);
  color: var(--color-warning);
  font-size: var(--text-xs);
}

.info-card.compact {
  padding: var(--space-2);
}

.info-card.compact .info-card-row {
  padding: 4px 0;
}

.text-truncate {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Info Cards Row (side-by-side Contact + Order cards) */
.info-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

@media (max-width: 500px) {
  .info-cards-row {
    grid-template-columns: 1fr;
  }
}