/* @cascade-order: 5 — do not reorder. Split 6/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. In this file
   specifically, the form control family was consolidated into v3.css on
   2026-09-08 (see the FORMS block there). Earlier headers cited
   tests/unit/css-split-equality.test.js, which does not exist.
   Contains: access rules, backup settings, database health, access config, mobile responsiveness fixes, and the start of the camps module.
   Original line range: 10689-12919. */
/* Danger outline button */
.btn-danger-outline {
  background: transparent;
  color: var(--color-danger);
}

@media not all and (hover: none) {
  .btn-danger-outline:hover {
    background: var(--color-danger);
  }
}

.btn-danger-outline:hover {
  color: white;
}

/* `.form-control` (+ its never-declared `.form-control-sm` modifier) was here
   and is DELETED (ADR-0129). It was the Bootstrap-era second control skin: a
   full base declaration — --text-sm where the family sits at --text-md, a
   2px/15% focus ring where the family rings at 3px/accent-tint, --color-bg
   where the family sits on --color-bg-elevated — under a name v3.css never
   claimed, so twelve fields across five modals drew as a different control
   beside a `.form-input` in the same form. `.form-input` is the one control
   (ADR-0099). */

/* Recommendation Box - for highlighting suggested actions */
.recommendation-box {
  background: var(--color-accent-tint);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-3)0;
  border: 1px solid var(--color-border);
}

/* `.recommendation-checkbox` + `.recommendation-content` / `-title` / `-hint`
   were here and are DELETED (ADR-0129). `recommendationBox()` builds the card
   and puts `formField({type:'checkbox'})` inside it; the box IS the emphasis,
   and the checkbox inside a card is still the app's one checkbox. */

/* Color Input */
.color-input-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.color-preview {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

.color-input-group .form-input {
  width: 100px;
  flex-shrink: 0;
}

/* Preview Badge in Modals - matches schedule-class-item styling */
.modal-preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: color-mix(in srgb, var(--preview-color, var(--color-bg-muted)) 18%, var(--color-bg-elevated));
  border: 1px solid color-mix(in srgb, var(--preview-color, var(--color-border)) 25%, var(--color-border));
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.modal-preview-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--preview-color, #808080) 30%, transparent);
}

.modal-preview-text {
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  color: var(--color-text);
}

/* Schedule modal form improvements */
#schedule-modal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* Checkbox toggle styling for modals */
.modal-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* `.modal-checkbox-item` and its `.checkbox-content` / `.checkbox-title` /
   `.checkbox-description` trio were here and are DELETED (ADR-0129). The four
   emitters (all in the schedule modal) are `formField({type:'checkbox'})` with
   a hint — the same box, the same line, the same smaller line under it. The
   tinted hoverable row went with them: a `.form-checkbox` label is already
   click-through-to-the-box across its whole width, so the tint was decoration
   that made three checkboxes in a modal read as a list of cards.
   `.modal-checkbox-group` STAYS — it is the stack's layout, not a skin. */

/* Custom color toggle in schedule modal */
#schedule-color-row {
  margin-top: var(--space-2);
}

/* ==========================================================================
   ACCESS RULES SETTINGS
   ========================================================================== */

.access-rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-6);
}

.access-rules-section h5 {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.access-rules-section > .text-muted {
  margin-bottom: var(--space-4);
}

.access-rules-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.access-rule-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.access-rule-label {
  min-width: 160px;
  flex-shrink: 0;
}

.access-rule-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* `.access-checkbox` was here and is DELETED (ADR-0129): a fifth checkbox
   skin with ZERO emitters — grep-confirmed across `public/js` and
   `index.html`. It was still being cited in v3.css's own `.form-checkbox`
   comment as evidence of what the app's checkboxes look like. */

.access-rules-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 600px) {
  .access-rules-grid {
    grid-template-columns: 1fr;
  }

  .access-rule-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .access-rule-label {
    min-width: unset;
    margin-bottom: var(--space-2);
  }
}

/* ==========================================================================
   BACKUP SETTINGS
   ========================================================================== */

@media (max-width: 600px) {
  .restore-collections-list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   DATABASE HEALTH
   ========================================================================== */

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

/* ==========================================================================
   ACCESS CONFIG MANAGEMENT
   ========================================================================== */

/* Three columns, which is what this grid was always written for: memberships,
   passes, access categories. The `.two-column` modifier that lived here is
   deleted with its last caller (admin-UI plan Phase 4 PR5) — it existed only
   because `#class-types-container` had no markup, so the third column stood
   empty and the fold rendered two. */
/* `minmax(0, 1fr)`, not `1fr`: a track's minimum is its content's, and an archived
   badge row (badge, Archived chip, three controls) is wider than a third of the
   page, so it stretched the third column past the edge. */
.access-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.access-config-column {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

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

.access-column-header h4 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.type-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  gap: var(--space-2);
  transition: border-color 0.15s ease;
}

.type-item:hover {
  border-color: var(--color-border-strong);
}

.type-item.dragging {
  opacity: 0.5;
  box-shadow: var(--shadow-md);
}

/* An archived catalog type (ADR-0118): retired from every picker, still
   resolved everywhere it is displayed. A recessed ground rather than an accent
   stripe — the "Archived" .state-chip in the row carries the label, this only
   has to make the row read as one step back.

   It used to need `.type-item.is-archived .type-item-actions { opacity: 1 }`,
   because the slot was `opacity: 0` until hover and Restore is the thing you
   came to the row for. The shared slot is `.72` at rest (ADR-0130), so Restore
   is findable on every row and the special case is gone. */
.type-item.is-archived {
  background: var(--color-bg-subtle);
}

.type-item-drag {
  cursor: grab;
  color: var(--color-text-muted);
  font-size: 0.8571rem;
  user-select: none;
  flex-shrink: 0;
}

.type-item-drag:active {
  cursor: grabbing;
}

.type-color-badge {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}

/* Badge preview in type items - use standard badge sizes */
.type-item .pass-badge {
  flex-shrink: 0;
}

.type-item-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Trailing metadata: the "Archived" chip and a row's facts (`.settings-row-fact`:
   a class type's length, an age group's ages). Absorbed from `.config-item-meta`
   / `.config-item-dot` when the discipline and age-group lists moved onto this
   row (ADR-0130). */
.type-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.type-item-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* A schedule style with an icon leads with it instead of the dot, drawn as its
   schedule cards draw it (in its colour, toward the text colour), in the dot's
   14px so the names still line up (ADR-0242). */
.type-item-icon {
  display: inline-flex;
  justify-content: center;
  width: 14px;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  color: color-mix(in srgb, var(--class-color) 70%, var(--color-text));
}

/* The slot itself is `.row-actions` in v3.css. What is local is the 22px
   button, which is what keeps these dense config rows at their height. */
.type-item .row-actions .btn-icon {
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7857rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.type-item .row-actions .btn-icon:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

.type-item .row-actions .btn-icon.btn-danger:hover {
  background: var(--color-danger-tint);
  color: var(--color-danger);
}

@media (max-width: 1080px) {
  .access-config-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   MOBILE RESPONSIVENESS FIXES
   Added: January 2026
   Reference: docs/MOBILE-AUDIT.md
   ========================================================================== */

/* ---------------------------------------------
   Small Phone Breakpoint (480px)
   --------------------------------------------- */
@media (max-width: 480px) {
  /* A modal on a phone is a bottom sheet (v3.css, MODAL AS A SHEET, ADR-0248). */

  /* Tighter spacing */
  .card-body {
    padding: var(--space-3);
  }
}

/* ---------------------------------------------
   Mobile Breakpoint (600px) - Core Fixes
   --------------------------------------------- */
@media (max-width: 600px) {
  /* Class header stats wrap */
  .class-header-stat-tiles {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .class-header-info {
    text-align: center;
    align-items: center;
    flex: 1;
    min-width: 0;
  }

  .class-header-name-row {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* --- TOUCH TARGETS: 44px Minimum --- */
  /* No mobile button metrics here. v3.css owns the family and pins .btn-sm to
     22px -- .pass-badge's height -- so nothing in a row reads shorter than the
     badges beside it. v3 is SILENT about min-height, so one set here survives
     and beats that pin: .btn-sm rendered 40px next to a 22px badge. The
     .btn-icon 44px target was already dead (v3's 28px is later, same
     specificity). */

  /* Search input in header */
  .search-input {
    min-height: 44px;
  }

  /* --- SUB-NAV BANDS --- */
  /* Every `.settings-subnav` band (Waivers, Training, History, and Settings'
     sibling band) scrolls sideways on a narrow screen instead of wrapping. The
     Settings phone picker sheet and its `#tab-settings > .settings-subnav`
     hide are gone (ADR-0165): the phone shows the sibling band like any other. */
  .settings-subnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .settings-subnav-item {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Attendance list items */
  .attendance-item {
    min-height: 48px;
    padding: var(--space-3);
  }

  /* --- ROSTER --- */
  .roster-item {
    min-height: 48px;
    padding: var(--space-3);
  }
}

/* ---------------------------------------------
   Safe Area (Notch) Support - Mobile Only
   --------------------------------------------- */
/* Safe area support now built directly into mobile styles using env() */

/* ==========================================================================
   CAMPS MODULE
   ========================================================================== */

/* Info Bar - a visible strip of facts (owner: any page with a fact set worth
   always showing, not tucked behind a ⋮ click — ui-pattern-audit B6 carves
   this out from "no stat tiles": that rule is about SECONDARY numbers, this
   is a bar of PRIMARY ones. First owner: Camps overview. Second: Settings →
   Account lifecycle, ADR-0135. */
.info-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  flex-wrap: wrap;
  position: relative;
  min-height: 44px;
}

.info-bar .info-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}

.info-bar .info-item i {
  color: var(--color-text-muted);
}

.info-bar .info-divider {
  width: 1px;
  height: 16px;
  background: var(--color-border);
}

/* Camps' own overflow trigger sits in the bar's corner, which needs room
   reserved on the right — scoped by id since only this consumer has one. */

/* Date Strip - Horizontal day navigation */
.camp-date-strip {
  min-width: 0;
  overflow: hidden;
  margin-left: auto;
}

.attendance-date-strip {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
}

.date-strip-scroll {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px;
  margin-left: auto;
}

.date-strip-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: var(--space-1) var(--space-2);
  min-width: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-success-tint);
  cursor: pointer;
  scroll-snap-align: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
  user-select: none;
}

.date-strip-day-empty {
  background: var(--color-danger-tint);
}

.date-strip-day:hover {
  filter: brightness(0.95);
}

.date-strip-day-active {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

.date-strip-day-active:hover {
  background: var(--color-accent-hover);
}

.date-strip-day-today:not(.date-strip-day-active) {
  border-color: var(--color-accent);
}

.date-strip-day-past:not(.date-strip-day-active) {
  opacity: 0.45;
}

.date-strip-dayname {
  font-size: 0.7143rem;
  text-transform: uppercase;
  opacity: 0.7;
  line-height: 1;
}

.date-strip-num {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1.2;
}

.date-strip-count {
  font-size: 0.7143rem;
  opacity: 0.7;
  line-height: 1;
}

.date-strip-day-active .date-strip-dayname,
.date-strip-day-active .date-strip-count {
  opacity: 0.9;
}

/* The camp header's day strip is the design's `.camp-header-strip` / `.chs-day`
   now (v3.css:1441-1449), so the `is-camp-header` variant that used to be
   declared here — wide 60px chips sized to the stat pills they once replaced —
   is gone with the markup that wore it. One difference is deliberately dropped
   with it: those chips turned the DANGER tint on a past day. The design's chip
   dims a past day to 50% instead, and red on a finished camp day was saying
   "something is wrong" about the ordinary passage of time. The wrong-day
   warning banner is what actually flags a mistake, and it still does. */

/* The back arrow to the camp is a link that looks like the header's icon buttons. */
.camp-checkin-header .camp-header-back,
.camp-checkin-header .camp-header-back:hover {
  text-decoration: none;
}

/* The strip sits at the RIGHT END of the header, beside the overflow.
   `base.css` gives it `margin-left: 8px`, which parks it immediately after the
   name — and because `.class-header-actions` carries its own `margin-left:auto`,
   the free space opened up between the two, leaving the days floating in the
   middle of the band. The days are the camp header's controls, so they belong
   with the controls: `margin-left: auto` here claims the free space first, and
   the actions then follow directly after it. */
.camp-checkin-header .camp-header-strip {
  margin-left: auto;
}

/* ...and the actions give up theirs, or the two auto margins SPLIT the free
   space between them (that is what an auto margin does in flex) and the strip
   lands half way, 264px short of the edge. One auto margin, one gap. */
.camp-checkin-header .class-header-actions {
  margin-left: 0;
}

/* A clickable age filter is a `<button>` (ADR-0124); a read-only tally is a
   `<span>`. `font-family: inherit` is what keeps the two identical — a button
   otherwise takes the UA's own font. */

/* Paper ignores the per-device text-size preference (ADR-0081). */
@media print {
  html {
    --ui-font-scale: 1;
  }
}

/* Responsive - Mobile */
@media (max-width: 600px) {
  /* --- Header: stack selectors, keep actions row --- */

  /* --- Info Bar: 2-column grid --- */
  .info-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    align-items: center;
  }

  .info-bar .info-divider {
    display: none;
  }

  .info-bar .info-item {
    white-space: normal;
  }

  .info-bar .state-chip {
    grid-column: 1 / -1;
    justify-self: start;
  }

  /* --- Stats Bar: wrap properly --- */

  /* The field fills the stacked row and stops growing on focus — there is
     nothing beside it to make room for. */

  /* --- Registration Rows: flex layout adapts naturally, just tighten spacing --- */

  /* --- Family Headers: compact on mobile --- */
}