/* @cascade-order: 7 — do not reorder. Split 8/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 camper profile modal (the largest section in the file), the notes system, account status icons, balance entries, and the management notes page.
   Original line range: 14002-16869. */
.section-actions {
  margin-top: var(--space-2);
  text-align: right;
}

.section-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Modal Sections */

/* Contact Section */

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

.contact-link:hover {
  text-decoration: underline;
}

.medical-alert {
  margin-top: var(--space-3);
  padding: 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);
}

/* Schedule Section */
.schedule-days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.day-tag {
  display: inline-block;
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.partial-week-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.schedule-extras {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  justify-content: space-between;
  font-size: var(--text-sm);
}

.schedule-label {
  color: var(--color-text-muted);
}

.schedule-value {
  font-weight: var(--font-medium);
}

/* Notes Section */

/* Order Section */

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

.order-number {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.order-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.order-items {
  margin-bottom: var(--space-3);
}

.order-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2)0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.order-item-name {
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  word-break: break-word;
}

.order-item-row.variation {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-top: 2px;
}

.order-pricing {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-bottom: var(--space-3);
}

.price-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  padding: 4px 0;
}

.price-row.total {
  border-top: 1px solid var(--color-border-subtle);
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  font-weight: var(--font-semibold);
}

.order-payer {
  font-weight: var(--font-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: var(--space-2);
}

.payer-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.payer-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.payer-email {
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: none;
  display: block;
}

.payer-email:hover {
  text-decoration: underline;
}

.payer-phone {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  display: block;
}

.payer-phone:hover {
  text-decoration: underline;
}

/* Order Actions */
.order-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* Edit Mode Tweaks */

/* Edit Account Link Button */
/* A label on a block, not a toggle. It carried `cursor: pointer` and a hover
   tint for 26 camp-modal headers that have never had a click handler — the
   affordance was left behind by a collapsible variant nothing ever emitted
   (ADR-0123). These blocks hold a line or two each, several of them rendered
   only when they are non-empty, side by side in a three-column grid: there is
   nothing to fold away. */

/* Link-styled button. The base carries the shape; variants differ by COLOR
   only. `font: inherit` matters — `.btn-link` is also combined with `.btn`
   (app.js notes header), and a hardcoded size there would shrink that header. */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-accent);
  font: inherit;
  font-weight: var(--font-medium);
  text-transform: none;
  letter-spacing: normal;
}

.btn-link:hover {
  text-decoration: underline;
}

/* Larger Input Fields */
.form-input-lg {
  padding: var(--space-3);
  font-size: var(--text-base);
}

.form-input-lg::placeholder {
  font-size: var(--text-sm);
}

textarea.form-input-lg {
  min-height: 120px;
  resize: vertical;
}

/* Flex grow section */

/* Compact Day Checkboxes for Edit Registration */
.days-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.day-checkbox-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background 0.15s;
}

.day-checkbox-inline:hover {
  background: var(--color-bg-elevated);
}

.day-checkbox-inline:has(input:checked) {
  background: var(--color-accent-tint);
}

.day-checkbox-inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
}

.day-checkbox-inline span {
  flex: 1;
}

.day-checkbox-inline.cancelled {
  opacity: 0.6;
}

.day-checkbox-inline .cancelled-badge {
  font-size: var(--text-xs);
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Add Charge Modal */
.charge-back-btn {
  cursor: pointer;
  margin-right: var(--space-2);
  color: var(--color-text-muted);
  transition: color 0.15s;
}

.charge-back-btn:hover {
  color: var(--color-accent);
}

.charge-paid-section {
  margin-top: var(--space-3);
}

.charge-paid-toggle {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.charge-add-form {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}

.charge-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.charge-action-buttons {
  margin-top: var(--space-3);
}

.radio-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

/* Pricing Tiers Editor */
.pricing-tiers-editor {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.tier-inputs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: flex-end;
}

.tier-prefix {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.tier-suffix {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.tier-per-day {
  width: 70px;
  text-align: right;
}

/* Modify Days Modal */
.modify-days-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

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

.modify-days-rate {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Camp Balance Entries (in registration modal) */
.camp-balance-entries {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.camp-balance-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-subtle, #f0f0f0);
}

.camp-balance-row:last-child {
  border-bottom: none;
}

.camp-balance-desc {
  flex: 1;
  min-width: 0;
}

.camp-balance-amount {
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.camp-balance-status {
  font-size: var(--text-xs);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.camp-balance-status.unpaid {
  background: var(--color-warning-tint, #fff7ed);
  color: var(--color-warning, #d97706);
}

.camp-balance-status.paid {
  background: var(--color-success-tint, #f0fdf4);
  color: var(--color-success);
}

.camp-balance-pay-btn {
  font-size: var(--text-xs);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-warning, #d97706);
  background: var(--color-warning-tint, #fff7ed);
  color: var(--color-warning, #d97706);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.camp-balance-pay-btn:hover {
  background: var(--color-success-tint, #f0fdf4);
  border-color: var(--color-success);
  color: var(--color-success);
}

.camp-balance-pay-btn.is-paid {
  background: var(--color-success-tint, #f0fdf4);
  border-color: var(--color-success);
  color: var(--color-success);
  cursor: default;
}

/* Add Camper Today Modal */
.add-camper-today {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.add-camper-list {
  display: flex;
  flex-direction: column;
  max-height: 400px;
  overflow-y: auto;
}

.add-camper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.1s ease;
}

.add-camper-row:hover {
  background: var(--hover-row);
}

.add-camper-row:last-child {
  border-bottom: none;
}

.add-camper-name {
  font-weight: var(--font-medium);
}

.add-camper-info {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.add-camper-pricing {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pricing-calc {
  color: var(--color-text-muted);
}

.pricing-total strong {
  color: var(--color-accent);
  font-weight: var(--font-semibold);
}

.add-camper-price {
  font-weight: var(--font-semibold);
  color: var(--color-accent);
}

.add-camper-price.tone-credit {
  color: var(--color-success);
}

.add-camper-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.add-camper-divider::before,
.add-camper-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--color-border);
}

.add-camper-new {
  width: 100%;
}

/* Contact Modal */
.contact-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-modal .contact-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.contact-modal .contact-actions .btn {
  flex: 1;
  text-align: center;
  text-decoration: none;
}

/* Attendance Row Actions */

.attendance-row .btn-contact {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
}

.attendance-row .btn-contact:hover {
  background: var(--color-bg-subtle);
}

/* No-show badge */
.no-show-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-danger);
  background: var(--color-danger-tint, color-mix(in srgb, var(--color-danger) 10%, transparent));
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* No-show button on waiting items ; red like a cancel action */
.member-icon-single.icon-noshow {
  background: var(--color-bg-elevated);
  color: var(--color-danger);
}
.member-icon-single.icon-noshow:hover {
  background: var(--color-danger);
  color: #fff;
}

/* Late pickup group */
#group-late-pickup .group-header {
  background: var(--color-warning-tint);
  border-bottom-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}

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

#group-late-pickup .group-count {
  background: var(--color-warning);
  color: white;
}

#group-late-pickup .group-title i {
  margin-right: 4px;
}

/* `.import-registration-modal .form-static` was here and is DELETED
   (ADR-0129): the import modal stopped emitting `.form-static` at some point
   and nothing noticed, so the ONLY rule in the app for that class was scoped
   to a surface that no longer used it — while the camp form, which did, got
   nothing. `.form-static` has a base in v3.css now. */

.import-search-results {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.import-order-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg-elevated);
}

.import-order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.import-order-payer {
  font-weight: var(--font-semibold);
}

.import-order-meta {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.import-order-items {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.import-order-item {
  padding: 2px 0;
}

.import-order-total {
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

/* Import Account Selection */
.import-account-section {
  margin-top: var(--space-3);
}

.import-account-results {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.import-account-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.import-account-item:hover {
  background: var(--color-accent-tint);
}

.import-account-name {
  font-weight: var(--font-medium);
}

.import-account-email {
  margin-left: var(--space-2);
}

.import-selected-account {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-success-tint);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.import-selected-account .selected-label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.import-selected-account #import-selected-name {
  font-weight: var(--font-semibold);
  flex: 1;
}

.import-create-account {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-2);
}

#import-create-form {
  padding: var(--space-2);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
}

#import-create-form .form-group {
  margin-bottom: var(--space-2);
}

#import-create-form .form-group:last-of-type {
  margin-bottom: var(--space-2);
}

/* Registration Detail Modal */
.registration-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

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

.detail-section h4 {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.item-price-breakdown {
  margin-top: var(--space-1);
  padding: 2px 0;
  font-style: italic;
}

/* Camp creation modal styles */
.detected-dates {
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

.detected-dates.text-success {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
}

.detected-dates.text-warning {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning);
}

.detected-dates i {
  margin-right: 6px;
}

#camp-date-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding: 8px 12px;
  background: var(--color-bg-subtle);
  border-radius: 6px;
}

.camp-date-check {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  font-size: var(--text-sm);
}

.registration-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--color-bg-subtle);
  border-radius: 8px;
}

/* Dark mode overrides for camp creation modal */
[data-theme="dark"] .detected-dates.text-success {
  background: color-mix(in srgb, var(--color-success) 20%, transparent);
}

[data-theme="dark"] .detected-dates.text-warning {
  background: color-mix(in srgb, var(--color-warning) 20%, transparent);
}

.registration-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.registration-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.registration-item label {
  cursor: pointer;
  flex: 1;
}

.registration-item-details {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.registration-item-dates {
  margin-top: 2px;
}

.registration-item-dates.text-primary {
  color: var(--color-accent);
  font-weight: var(--font-medium);
}

.item-camp-status {
  margin-top: 4px;
}

.item-camp-status .btn {
  margin-left: 0;
}

/* Responsive Camps */
@media (max-width: 600px) {
  .camps-layout {
    grid-template-columns: 1fr;
  }

  .attendance-header {
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
  }

  .attendance-date-strip {
    margin-left: 0;
  }

  /* The band's own narrow-screen block MOVED to v3.css, beside the band
     (ADR-0124 / ADR-0095: v3.css owns the shared component, including what it
     does at a breakpoint). It could never have worked from here: this file
     loads BEFORE v3.css, and at equal specificity the later file wins, so
     `align-items: stretch` lost to the base's `align-items: center` every
     time. `flex-direction: column` survived only because the base does not
     declare it — the band stacked on a phone with its children still centred.
     `tests/unit/css-cascade-order.test.js` names the pair. */

  .attendance-stats-inline {
    justify-content: center;
  }

  /* `.attendance-search { order: -1 }` MOVED to v3.css's narrow band block as `.attendance-toolbar .attendance-search`:
     unscoped, it lifted every search field above its siblings on a phone, so the Share a pass people search jumped
     over the list it adds to. */

  /* `.attendance-search .search-wrapper` / `.attendance-search .form-input`
     removed (ADR-0128): the field's input is a bare `<input>` and has been
     since the V3 toolbar rewrite, so neither selector could ever match. */

  .attendance-actions {
    justify-content: stretch;
  }

  .attendance-actions .btn {
    flex: 1;
  }
}

/* Pending Camp Orders */
.pending-camp-order {
  padding: var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.pending-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.pending-order-info {
  display: flex;
  flex-direction: column;
}

.pending-order-customer {
  font-weight: 500;
}

.pending-order-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pending-order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
}

.pending-order-item .item-info {
  display: flex;
  flex-direction: column;
}

.pending-order-item .item-name {
  font-weight: 500;
}

.coach-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.coach-row input {
  flex: 1;
}

.coach-row .remove-coach-btn {
  font-size: 1.1rem;
  line-height: 1;
  padding: var(--space-1);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.coach-row .remove-coach-btn:hover {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
}

.coaches-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Edit Registration Modal */

.days-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.day-checkbox {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}

.day-checkbox:has(input:checked) {
  background: var(--color-accent-tint);
}

.day-checkbox.cancelled {
  opacity: 0.6;
}

.day-checkbox input {
  margin-right: var(--space-2);
}

/* Registrations Stats */
.registrations-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.age-breakdown {
  display: flex;
  gap: var(--space-3);
}

.age-stat {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  cursor: help;
}

.waiver-alert {
  font-weight: 500;
}

.stats-right {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.family-stat {
  cursor: help;
}

/* Sibling Indicator */
.sibling-indicator {
  cursor: help;
  font-size: var(--text-sm);
}

/* ==========================================================================
   NOTES SYSTEM
   ========================================================================== */

/* Notes Badge (in members list) */

/* Notes Help Legend */
/* Notes List Container */
.notes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Note Card */
.note-card {
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.note-card.archived {
  opacity: 0.7;
  background: var(--color-bg-subtle);
}

.note-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.note-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.note-info-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.note-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.note-author {
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}

.note-actions {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}

.note-actions .btn-xs {
  font-size: 1.1429rem;
  padding: var(--space-1) var(--space-2);
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.note-content {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
}

.note-content p {
  margin: 0 0 var(--space-2) 0;
}

.note-content p:last-child {
  margin-bottom: 0;
}

.note-content ul,
.note-content ol {
  margin: 0 0 var(--space-2) 0;
  padding-left: var(--space-5);
}

.note-content a {
  text-decoration: underline;
}

/* Note Editor Modal */
#note-editor-container {
  min-height: 200px;
  margin-top: 0.5rem;
}

#note-editor {
  height: 200px;
}

/* Quill Editor Customization */
.ql-container {
  font-family: inherit;
  font-size: var(--text-sm);
}

.ql-editor {
  min-height: 150px;
}

.ql-toolbar.ql-snow {
  border-color: var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-bg-subtle);
}

.ql-container.ql-snow {
  border-color: var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Quill Editor ; Dark Mode */
[data-theme="dark"] .ql-toolbar.ql-snow {
  background: var(--color-bg-muted);
}

[data-theme="dark"] .ql-container.ql-snow {
  background: var(--color-bg-elevated);
}

[data-theme="dark"] .ql-editor {
  color: var(--color-text);
}

[data-theme="dark"] .ql-editor.ql-blank::before {
  color: var(--color-text-muted);
}

[data-theme="dark"] .ql-snow .ql-stroke {
  stroke: var(--color-text-secondary);
}

[data-theme="dark"] .ql-snow .ql-fill {
  fill: var(--color-text-secondary);
}

[data-theme="dark"] .ql-snow .ql-picker-label {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .ql-snow .ql-picker-options {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
}

/* Important Note Card ; Dark Mode */
[data-theme="dark"] .note-card.important {
  background: var(--color-warning-tint);
  border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-border));
}

/* Note Editor Modal ; Mobile */
@media (max-width: 600px) {
  #note-editor-modal .modal {
    max-width: 100% !important;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }

  #note-editor-container {
    min-height: 150px;
  }

  #note-editor {
    height: 150px;
  }
}

/* Utility: margin-top */
.mt-3 {
  margin-top: var(--space-3);
}

/* Utility: padding-y */
.py-4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  text-align: center;
}

/* Important Notes Preview in Search Results */
.notes-preview-important {
  /* One line of the note at the row's own text size, ended with an ellipsis by
     CSS (not cut to a character count in JS), so the cell's width decides how
     much shows; the row keeps its height. Hovering opens the notes preview,
     which shows every note whole. */
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: var(--space-1) var(--space-2);
  background: var(--color-warning-tint, #fef3c7);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.35;
  overflow: hidden;
}

/* Important Note Card */
.note-card.important {
  border-color: var(--color-warning, #d97706);
  background: var(--color-warning-tint, #fffbeb);
}

/* Text Warning Color */
.text-warning:where(:not(.btn-ghost)) {
  color: var(--color-warning, #d97706);
}

/* Note Meta Badges - unified sizing for all badges in note cards */
.note-badges .badge,
.note-badges .note-category-badge,
.follow-up-note-chips .note-category-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-medium);
  line-height: 1;
}

/* Note Category Badge */
.note-category-badge {
  background: color-mix(in srgb, var(--category-color, #6b7280) 15%, var(--color-bg-elevated));
  color: var(--category-color, #6b7280);
  border: 1px solid color-mix(in srgb, var(--category-color, #6b7280) 30%, transparent);
}

.note-category-badge i {
  font-size: 0.65rem;
}

/* Note Card assigned to management */
.note-card.assigned-mgmt {
  border-color: var(--color-accent);
  border-left-width: 3px;
}

/* ==========================================================================
   ACCOUNT STATUS ICONS
   Single source of truth for account status indicators
   ========================================================================== */

.account-status {
  flex-shrink: 0;
}

/* Belt to renderStatusStrip's braces (ADR-0070). Row builders go through that
   helper, which never emits an empty wrapper — but hand-written markup can,
   and margin-left on an empty inline-flex leaves a phantom gap after the name.
   No builder puts whitespace inside the wrapper, so :empty matches. */
.account-status:empty {
  display: none;
}

/* Status colors */

.status-lifecycle-inactive {
  color: var(--color-text-muted);
}

/* Lifecycle markers are admin-only context. Markup renders for everyone (single
   source of truth — renderAccountStatus stays role-unaware); visibility is gated
   here off the body.is-admin class so it stays correct if the role resolves
   after first paint. Non-admin staff never see the inactive marker. */
body:not(.is-admin) .status-lifecycle {
  display: none;
}

/* The waiver icon is an EXCEPTION signal (ADR-0070): a covered account renders
   no icon at all, so there is exactly one waiver class. The old four-state
   vocabulary (.status-waiver / -new / -pending / -expired) is gone — three of
   its four states meant "fine", which spent the icon strip's attention budget
   on nothing. ADR-0070 stopped EMITTING all four in 2026-08; the four rules
   themselves outlived it in v3.css's status-icon block until ui-pattern-audit
   D7 swept them, which is why this comment used to describe a deletion the
   stylesheet had not actually had. */
.status-waiver-blocked {
  color: var(--color-danger);
}

.status-reassigned {
  color: var(--color-accent);
  cursor: pointer;
}

.status-reassigned:hover {
  opacity: 0.8;
}

/* ==========================================================================
   BALANCE ENTRIES SYSTEM
   ========================================================================== */

/* Dollar sign in circle icon for search results */
.balance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  background: #d4a017;
  color: white;
  border-radius: 50%;
  font-size: 0.91em;
  line-height: 1;
  vertical-align: 0.1em;
}

.balance-icon i {
  font-size: 0.9em;
}

.balance-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.balance-card:last-child {
  margin-bottom: 0;
}

.balance-card-paid {
  opacity: 0.7;
  background: var(--color-bg-subtle);
}

/* Archived (soft-deleted) entries — M4. Slightly more muted than resolved. */
.balance-card-archived {
  opacity: 0.55;
  background: var(--color-bg-subtle);
}

.balance-card-content {
  flex: 1;
  min-width: 0;
}

/* Amount row with type badge */
.balance-amount-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.balance-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.balance-type-badge.tone-owes {
  background: var(--color-danger-tint, #fef2f2);
}

.balance-type-badge.tone-credit {
  background: var(--color-success-tint, #f0fdf4);
}

.balance-participant {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-weight: var(--font-medium);
}

.balance-amount {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: 0;
}

.balance-card-paid .balance-amount,
.balance-card-archived .balance-amount {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* Charge / Credit is `.btn-group-toggle` (ADR-0129) — `.balance-type-btn` and
   its own bordered-pair layout are deleted. What stays is an INSTANCE rule,
   and the reason it earns one is that here the pressed colour is not decoration:
   red means money owed and green means money held, and the accent blue every
   other segmented control lights up with would say neither. So the family owns
   the track, the segments and the marker; this owns what the two segments MEAN.
   The pair also splits the modal's width rather than sizing to its words, since
   there are exactly two and they are opposites. */
.balance-type-toggle { display: flex; margin-top: var(--space-1); }
.balance-type-toggle .btn-toggle { flex: 1; justify-content: center; gap: var(--space-1); }

.balance-type-toggle .btn-toggle[aria-pressed="true"][data-type="charge"] {
  background: var(--color-danger-tint, #fef2f2);
  color: var(--color-danger);
}

.balance-type-toggle .btn-toggle[aria-pressed="true"][data-type="credit"] {
  background: var(--color-success-tint, #f0fdf4);
  color: var(--color-success);
}

.balance-description {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.balance-meta {
  font-size: var(--text-xs);
}

.balance-paid-info {
  font-size: var(--text-xs);
  color: var(--color-success);
  margin-top: var(--space-1);
}

.balance-card-actions {
  display: flex;
  gap: var(--space-1);
  margin-left: var(--space-3);
}

/* Sidebar nav badge — owned entirely by v3.css:818, which declares every
   shared property with byte-identical values. The only thing this rule added
   was a five-property flex box the design never authored, and it leaked
   because silence never overrides. */

/* Collapsed sidebar badge — owned by v3.css:1467
   (.shell .app-nav.collapsed .nav-badge), which already wins on position, top,
   right, margin-left, padding, font-size and line-height. Only the shadow and
   the transform leaked from here, and below L3 a boundary is an edge in this
   design, never a shadow. */