/* /connect/admin/views/sunday-school.css — Sunday School dashboard v1
 *
 * Skin for the admin Sunday School view (sunday-school.js). All classes are
 * prefixed `ssx-` and scoped so nothing leaks into other admin views.
 * Requires: /shared/tokens.css, /connect/connect-tokens.css,
 *           /connect/admin/admin-shell.css, /connect/admin/admin-views.css
 * Tokens only (`var(--bcc-*)`); the sole literal colour is #fff on gradients.
 * ─────────────────────────────────────────────────────────────────── */

/* ================================================================
   HEADER
=============================================================== */
.ssx-view .ssx-header {
  position:      relative;
  overflow:      hidden;
  align-items:   flex-start;
  background:    linear-gradient(135deg, var(--bcc-primary) 0%, var(--bcc-primary-hover) 52%, var(--bcc-secondary) 150%);
  border:        1px solid transparent;
  border-radius: var(--bcc-r-lg);
  padding:       var(--bcc-s5) var(--bcc-s6);
  margin-bottom: var(--bcc-s5);
  box-shadow:    var(--bcc-shadow-2);
}
.ssx-view .ssx-header::after {
  content:        '';
  position:       absolute;
  top:            -40%;
  right:          -8%;
  width:          300px;
  height:         300px;
  background:     radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 68%);
  pointer-events: none;
}
.ssx-header-titles { position: relative; z-index: 1; min-width: 0; }
.ssx-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--bcc-s1);
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.86);
  margin-bottom:  var(--bcc-s2);
}
.ssx-view .ssx-header .adm-view-title { color: #fff; }
.ssx-view .ssx-header .adm-view-sub   { color: rgba(255,255,255,.85); }

.ssx-view .ssx-header-actions {
  position:   relative;
  z-index:    1;
  flex-wrap:  wrap;
  gap:        var(--bcc-s2);
  align-items: center;
}
.ssx-view .ssx-header-actions .bcc-btn-primary {
  background:   #fff;
  color:        var(--bcc-primary);
  border-color: transparent;
  box-shadow:   0 2px 8px rgba(0,0,0,.18);
}
.ssx-view .ssx-header-actions .bcc-btn-primary:hover { background: #fff; color: var(--bcc-primary-hover); }
.ssx-view .ssx-header-actions .bcc-btn-ghost {
  color:        #fff;
  background:   rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.30);
}
.ssx-view .ssx-header-actions .bcc-btn-ghost:hover { background: rgba(255,255,255,.26); color: #fff; }

.ssx-session-picker {
  display:     inline-flex;
  align-items: center;
  gap:         var(--bcc-s2);
  min-width:   0;
  max-width:   100%;
}
.ssx-session-label {
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.86);
  flex-shrink:    0;
}
.ssx-session-picker .bcc-select {
  min-width:   180px;
  max-width:   100%;
  background:  rgba(255,255,255,.16);
  color:       #fff;
  border-color: rgba(255,255,255,.30);
}
.ssx-session-picker .bcc-select option { color: var(--bcc-ink); }

/* ================================================================
   TABS
=============================================================== */
.ssx-view .ssx-tabs {
  display:          flex;
  gap:              var(--bcc-s1);
  overflow-x:       auto;
  scrollbar-width:  thin;
  border-bottom:    1px solid var(--bcc-border);
  margin-bottom:    0;
  -webkit-overflow-scrolling: touch;
}
.ssx-view .ssx-tabs .bcc-tab {
  gap:         var(--bcc-s2);
  height:     42px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.ssx-view .ssx-tabs .bcc-tab.active {
  color:               var(--bcc-primary);
  border-bottom-color: var(--bcc-primary);
  background:          var(--bcc-primary-tint);
}
.ssx-content { margin-top: var(--bcc-s5); outline: none; }

/* ================================================================
   SHARED PIECES
=============================================================== */
.ssx-view .bcc-section-title { display: inline-flex; align-items: center; gap: var(--bcc-s2); }
.ssx-view .bcc-section-title .bcc-icon { color: var(--bcc-primary); }
.ssx-view .ssx-panel { margin-bottom: var(--bcc-s5); }

.ssx-section-actions { display: flex; justify-content: flex-end; margin-bottom: var(--bcc-s4); }

.ssx-loading { display: flex; flex-direction: column; gap: var(--bcc-s5); }
.ssx-skel { border-radius: var(--bcc-r-lg); }
.ssx-skel-stat  { height: 104px; }
.ssx-skel-panel { height: 300px; }

.ssx-state {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  padding:     var(--bcc-s6);
  justify-content: center;
  color:       var(--bcc-ink-3);
  font-size:   var(--bcc-t-sm);
}
.ssx-state-error { color: var(--bcc-danger); }

.ssx-empty { background: transparent; }
.ssx-empty .bcc-empty-icon { color: var(--bcc-ink-muted); }
.ssx-empty-action { margin-top: var(--bcc-s4); }

.ssx-gated {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            var(--bcc-s2);
  padding:        var(--bcc-s12) var(--bcc-s6);
}
.ssx-gated-icon  { color: var(--bcc-ink-muted); }
.ssx-gated-title { font-family: var(--bcc-font-display); font-size: var(--bcc-t-xl); color: var(--bcc-ink); margin: 0; }
.ssx-gated-sub   { color: var(--bcc-ink-3); max-width: 46ch; margin: 0; }

/* ================================================================
   STATS
=============================================================== */
.ssx-stats {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--bcc-s3);
  margin-bottom:         var(--bcc-s5);
}
.ssx-stat { position: relative; overflow: hidden; }
.ssx-stat .bcc-stat-card__icon { background: var(--bcc-primary-soft); color: var(--bcc-primary); }
.ssx-stat--warn .bcc-stat-card__icon { background: var(--bcc-warning-soft); color: var(--bcc-warning); }
.ssx-stat--warn .bcc-stat-card__value { color: var(--bcc-warning); }

/* ================================================================
   CODE VERIFY
=============================================================== */
.ssx-verify { margin-bottom: var(--bcc-s5); }
.ssx-verify-row {
  display:   flex;
  gap:       var(--bcc-s2);
  align-items: stretch;
  flex-wrap: wrap;
}
.ssx-code-input {
  flex:           1 1 200px;
  min-width:      0;
  font-family:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size:      var(--bcc-t-lg);
  font-weight:    600;
}
.ssx-verify-result { margin-top: var(--bcc-s3); }
.ssx-verify-card {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s3);
  flex-wrap:       wrap;
  padding:         var(--bcc-s3) var(--bcc-s4);
  border:          1px solid var(--bcc-success);
  border-radius:   var(--bcc-r-md);
  background:      var(--bcc-success-soft);
}
.ssx-verify-card--muted { border-color: var(--bcc-border); background: var(--bcc-surface-2); }
.ssx-verify-card--error {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  color:       var(--bcc-danger);
  border-color: var(--bcc-danger);
  background:  var(--bcc-danger-soft);
}
.ssx-verify-main { min-width: 0; }
.ssx-verify-name { font-size: var(--bcc-t-lg); font-weight: 700; color: var(--bcc-ink); }
.ssx-verify-meta { font-size: var(--bcc-t-sm); color: var(--bcc-ink-2); }
.ssx-verify-side {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  flex-wrap:   wrap;
}
.ssx-verify-actions { display: flex; gap: var(--bcc-s2); flex-wrap: wrap; }

/* ================================================================
   CODE HEALTH
=============================================================== */
.ssx-health { margin-bottom: var(--bcc-s5); }
.ssx-health-grid {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--bcc-s2);
  margin-top:            var(--bcc-s3);
}
.ssx-health-item {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s2);
  width:         100%;
  text-align:    left;
  padding:       var(--bcc-s2) var(--bcc-s3);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  background:    var(--bcc-surface-1);
  color:         var(--bcc-ink-2);
  font-size:     var(--bcc-t-sm);
  min-height:    44px;
}
button.ssx-health-item { cursor: pointer; }
button.ssx-health-item:hover { border-color: var(--bcc-primary); }
.ssx-health-item--flag { border-color: var(--bcc-warning); background: var(--bcc-warning-soft); }
.ssx-health-count {
  flex-shrink:   0;
  min-width:     28px;
  height:        28px;
  border-radius: var(--bcc-r-pill);
  background:    var(--bcc-surface-3);
  color:         var(--bcc-ink);
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-size:     var(--bcc-t-xs);
}
.ssx-health-item--flag .ssx-health-count { background: var(--bcc-warning); color: #fff; }
.ssx-health-label { flex: 1; min-width: 0; }
.ssx-health-go { color: var(--bcc-ink-3); display: inline-flex; }

/* ================================================================
   FILTERS
=============================================================== */
.ssx-filters {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--bcc-s2);
  margin-bottom:         var(--bcc-s3);
}
.ssx-filters .bcc-select,
.ssx-filters .ssx-search { min-width: 0; width: 100%; }

/* ================================================================
   TABLES
=============================================================== */
.ssx-view .ssx-table-card { padding: 0; overflow: hidden; }
.ssx-table { width: 100%; }
.ssx-child-cell { display: flex; align-items: center; gap: var(--bcc-s2); }
.ssx-child-name { font-weight: 600; color: var(--bcc-ink); }
.ssx-row-actions { display: flex; gap: var(--bcc-s1); flex-wrap: wrap; }
.ssx-session-name { font-weight: 600; color: var(--bcc-ink); }
.ssx-codes-grid td[data-label="Actions"] .ssx-row-actions { justify-content: flex-end; }

.ssx-code-chip {
  display:        inline-block;
  font-family:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight:    700;
  letter-spacing: .14em;
  padding:        2px 8px;
  border-radius:  var(--bcc-r-sm);
  background:     var(--bcc-primary-soft);
  color:          var(--bcc-primary);
}
.ssx-code-missing { background: var(--bcc-surface-3); color: var(--bcc-ink-3); }
.ssx-code-invalid { background: var(--bcc-danger-soft); color: var(--bcc-danger); }

.ssx-code-row--needs_attention { box-shadow: inset 4px 0 0 var(--bcc-warning); }
.ssx-code-row--missing { box-shadow: inset 4px 0 0 var(--bcc-danger); }

/* ================================================================
   CLASSES
=============================================================== */
.ssx-class-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--bcc-s4);
}
.ssx-class-card { display: flex; flex-direction: column; gap: var(--bcc-s2); }
.ssx-class-inactive { opacity: .7; }
.ssx-class-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bcc-s2); }
.ssx-class-title { min-width: 0; }
.ssx-class-name { margin: 0; font-size: var(--bcc-t-lg); color: var(--bcc-ink); }
.ssx-class-room {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-3);
}
.ssx-class-meta {
  display:        flex;
  flex-wrap:      wrap;
  gap:            var(--bcc-s3);
  font-size:      var(--bcc-t-sm);
  color:          var(--bcc-ink-2);
}
.ssx-class-counts { display: flex; gap: var(--bcc-s4); color: var(--bcc-ink-2); font-size: var(--bcc-t-sm); }
.ssx-class-count strong { color: var(--bcc-primary); font-size: var(--bcc-t-lg); }
.ssx-class-actions { display: flex; flex-wrap: wrap; gap: var(--bcc-s2); margin-top: var(--bcc-s2); }

/* ================================================================
   MY CLASS (teacher view)
=============================================================== */
.ssx-myclass-head {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--bcc-s4);
  margin-bottom:   var(--bcc-s4);
}
.ssx-myclass-headmain { min-width: 0; flex: 1 1 240px; display: flex; flex-direction: column; gap: var(--bcc-s2); }
.ssx-myclass-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--bcc-s3); min-width: 0; }
.ssx-myclass-meta {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--bcc-s1) var(--bcc-s4);
  font-size: var(--bcc-t-sm);
  color:     var(--bcc-ink-2);
}
.ssx-myclass-picker { display: inline-flex; align-items: center; gap: var(--bcc-s2); max-width: 100%; }
.ssx-myclass-picker-label {
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--bcc-ink-3);
  flex-shrink:    0;
}
.ssx-myclass-picker .bcc-select { min-width: 0; max-width: 100%; }
.ssx-myclass-actions { display: flex; flex-wrap: wrap; gap: var(--bcc-s2); }

.ssx-roster-badges { display: inline-flex; flex-wrap: wrap; gap: var(--bcc-s1); }
.ssx-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       2px 8px;
  border-radius: var(--bcc-r-pill);
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
  white-space:   nowrap;
}
.ssx-badge-unaccompanied {
  background: var(--bcc-warning-soft);
  color:      var(--bcc-warning);
  border:     1px solid var(--bcc-warning);
}

/* ================================================================
   CHECKOUT / UNACCOMPANIED MODALS
=============================================================== */
.ssx-checkout { display: flex; flex-direction: column; gap: var(--bcc-s3); }
.ssx-checkout-child { display: flex; align-items: center; gap: var(--bcc-s3); min-width: 0; }
.ssx-checkout-ident { min-width: 0; }
.ssx-checkout-name { font-size: var(--bcc-t-lg); font-weight: 700; color: var(--bcc-ink); }
.ssx-checkout-meta {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--bcc-s2);
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
}
.ssx-checkout-help { margin: 4px 0 0; font-size: var(--bcc-t-xs); color: var(--bcc-ink-3); }
.ssx-checkout-note {
  display:     flex;
  align-items: center;
  gap:         4px;
  margin:      0;
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-3);
}
.ssx-checkout-status { min-height: 1.2em; font-size: var(--bcc-t-sm); }
.ssx-checkout-error {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  color:       var(--bcc-danger);
  overflow-wrap: anywhere;
}

/* ================================================================
   ENROLLMENTS
=============================================================== */
.ssx-enroll-list {
  list-style:     none;
  margin:         var(--bcc-s3) 0 0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
}
.ssx-enroll-row {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s3);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  background:    var(--bcc-surface-1);
  min-width:     0;
}
.ssx-enroll-main {
  flex:           1 1 220px;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s1);
}
.ssx-enroll-child {
  display:       inline-flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           var(--bcc-s1);
  font-weight:   600;
  color:         var(--bcc-ink);
  overflow-wrap: anywhere;
}
.ssx-enroll-meta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--bcc-s3);
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
  min-width:   0;
}
.ssx-enroll-dob,
.ssx-enroll-guardian,
.ssx-enroll-class,
.ssx-enroll-time {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  min-width:     0;
  overflow-wrap: anywhere;
}
.ssx-enroll-notes {
  margin:        var(--bcc-s1) 0 0;
  font-size:     var(--bcc-t-sm);
  color:         var(--bcc-ink-3);
  overflow-wrap: anywhere;
}
.ssx-enroll-actions { display: flex; flex-wrap: wrap; gap: var(--bcc-s2); margin-left: auto; }
.ssx-enroll-recent { opacity: .94; }
.ssx-enroll-status { margin-top: var(--bcc-s3); min-height: 1.2em; font-size: var(--bcc-t-sm); }
.ssx-enroll-note  { color: var(--bcc-ink-3); }
.ssx-enroll-error { color: var(--bcc-danger); }
.ssx-enroll-ineligible {
  display:       inline-flex;
  align-items:   flex-start;
  gap:           4px;
  margin:        var(--bcc-s1) 0 0;
  font-size:     var(--bcc-t-sm);
  color:         var(--bcc-danger);
  overflow-wrap: anywhere;
}
.ssx-elig-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 8px;
  border-radius: var(--bcc-r-pill);
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
  white-space:   nowrap;
}
.ssx-elig-minor   { background: var(--bcc-success-soft); color: var(--bcc-success); }
.ssx-elig-adult   { background: var(--bcc-danger-soft);  color: var(--bcc-danger); }
.ssx-elig-unknown { background: var(--bcc-warning-soft); color: var(--bcc-warning); }

/* ================================================================
   MODAL LISTS
=============================================================== */
.ssx-modal-search { width: 100%; margin-bottom: var(--bcc-s3); }
.ssx-modal-list {
  display:    flex;
  flex-direction: column;
  gap:        var(--bcc-s1);
  max-height: min(52vh, 420px);
  overflow-y: auto;
}
.ssx-modal-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s2);
  padding:         var(--bcc-s2) var(--bcc-s2);
  border-bottom:   1px solid var(--bcc-border-soft);
  min-height:      44px;
}
.ssx-modal-name { font-weight: 600; color: var(--bcc-ink); min-width: 0; }
.ssx-modal-note { font-weight: 400; font-size: var(--bcc-t-xs); color: var(--bcc-ink-3); }
.ssx-modal-row-actions { display: flex; gap: var(--bcc-s1); flex-wrap: wrap; justify-content: flex-end; }
.ssx-modal-empty { padding: var(--bcc-s5); text-align: center; color: var(--bcc-ink-3); }

/* ================================================================
   LABEL MODAL
=============================================================== */
.ssx-label-body {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            var(--bcc-s2);
  padding:        var(--bcc-s3);
  border:         2px dashed var(--bcc-border-strong);
  border-radius:  var(--bcc-r-md);
  background:     var(--bcc-surface-1);
}
.ssx-label-church {
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--bcc-ink-3);
}
.ssx-label-name { font-family: var(--bcc-font-display); font-size: var(--bcc-t-2xl); font-weight: 700; color: var(--bcc-ink); line-height: 1.15; }
.ssx-label-class { font-size: var(--bcc-t-md); color: var(--bcc-ink-2); }
.ssx-label-session { font-size: var(--bcc-t-sm); color: var(--bcc-ink-3); }
.ssx-label-qr-wrap { padding: var(--bcc-s2) 0; }
.ssx-label-qr { width: 180px; height: 180px; display: block; }
.ssx-label-code-label {
  font-size:      var(--bcc-t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--bcc-ink-3);
}
.ssx-label-code {
  font-family:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:      var(--bcc-t-3xl);
  font-weight:    700;
  letter-spacing: .3em;
  color:          var(--bcc-primary);
}
.ssx-label-time { font-size: var(--bcc-t-xs); color: var(--bcc-ink-3); }

/* ================================================================
   RESPONSIVE — tablet (>=640) and desktop (>=768)
=============================================================== */
@media (min-width: 640px) {
  .ssx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ssx-class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssx-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssx-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .ssx-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ssx-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ssx-health-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ssx-class-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ssx-enroll-row { flex-wrap: nowrap; }
}

/* Phones: tables become stacked cards using the data-label pattern. */
@media (max-width: 767px) {
  .ssx-view .bcc-table-wrap { overflow: visible; }
  .ssx-view .ssx-table thead { display: none; }
  .ssx-view .ssx-table,
  .ssx-view .ssx-table tbody,
  .ssx-view .ssx-table tr,
  .ssx-view .ssx-table td { display: block; width: 100%; }
  .ssx-view .ssx-table tr {
    background:    var(--bcc-surface-1);
    border:        1px solid var(--bcc-border);
    border-radius: var(--bcc-r-md);
    padding:       var(--bcc-s3) var(--bcc-s4);
    margin-bottom: var(--bcc-s3);
    box-shadow:    none !important;
  }
  .ssx-view .ssx-table td {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--bcc-s3);
    padding:         var(--bcc-s1) 0;
    border-bottom:   none;
  }
  .ssx-view .ssx-table td::before {
    content:        attr(data-label);
    font-size:      var(--bcc-t-xs);
    font-weight:    600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color:          var(--bcc-ink-3);
    flex-shrink:    0;
  }
  .ssx-view .ssx-table td:not([data-label])::before,
  .ssx-view .ssx-table td[data-label=""]::before { content: none; }
  .ssx-view .ssx-table td.ssx-child-cell { justify-content: flex-end; }
  .ssx-view .ssx-table td[data-label="Actions"] .ssx-row-actions { justify-content: flex-end; }
}

/* Touch ergonomics on small screens. */
@media (max-width: 767px) {
  .ssx-view .bcc-btn { min-height: 44px; }
  .ssx-view .ssx-tabs .bcc-tab { min-height: 44px; }
  .ssx-view .bcc-select,
  .ssx-view .bcc-input { min-height: 44px; }
  .ssx-btn-text { display: none; }
  .ssx-view .ssx-row-actions .bcc-btn { padding-left: var(--bcc-s3); padding-right: var(--bcc-s3); }
  .ssx-view .ssx-enroll-actions { margin-left: 0; width: 100%; }
  .ssx-view .ssx-enroll-actions .bcc-btn { flex: 1 1 auto; }
  .ssx-enroll-meta { gap: var(--bcc-s1) var(--bcc-s3); }
  /* My Class: stack the header and let action buttons fill the row. */
  .ssx-myclass-head { flex-direction: column; }
  .ssx-myclass-actions { width: 100%; }
  .ssx-myclass-actions .bcc-btn { flex: 1 1 auto; }
  .ssx-myclass-picker { width: 100%; }
  .ssx-myclass-picker .bcc-select { flex: 1; min-width: 0; }
  .ssx-view .ssx-table td.ssx-child-cell { flex-wrap: wrap; }
}

@media (max-width: 380px) {
  .ssx-view .ssx-header { padding: var(--bcc-s4); border-radius: var(--bcc-r-md); }
  .ssx-view .ssx-header .adm-view-title { font-size: var(--bcc-t-2xl); }
  .ssx-view .ssx-header-actions { width: 100%; }
  .ssx-view .ssx-header-actions .bcc-btn { flex: 1 1 auto; }
  .ssx-session-picker { width: 100%; }
  .ssx-session-picker .bcc-select { flex: 1; min-width: 0; }
  .ssx-stats { grid-template-columns: 1fr; }
  .ssx-code-input { letter-spacing: .2em; font-size: var(--bcc-t-md); }
}

/* Guard against horizontal page overflow on the narrowest phones. */
.ssx-view,
.ssx-content { min-width: 0; }
.ssx-view .bcc-table-wrap { max-width: 100%; }

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ssx-view * { transition: none !important; }
}

/* ================================================================
   PRINT — check-in labels
=============================================================== */
@media print {
  body.ssx-printing > *:not(.bcc-overlay) { display: none !important; }
  body.ssx-printing .bcc-overlay {
    position:   static !important;
    background: #fff !important;
    padding:    0 !important;
    inset:      auto !important;
    display:    block !important;
  }
  body.ssx-printing .bcc-modal {
    box-shadow: none !important;
    border:     none !important;
    max-width:  100% !important;
    width:      100% !important;
    margin:     0 !important;
    background: #fff !important;
    color:      #000 !important;
  }
  body.ssx-printing .bcc-modal:not(.ssx-label-modal) { display: none !important; }
  body.ssx-printing .ssx-label-modal .bcc-modal-header,
  body.ssx-printing .ssx-label-modal .bcc-modal-foot,
  body.ssx-printing .ssx-label-modal .bcc-modal-close { display: none !important; }
  body.ssx-printing .ssx-label-body {
    border:     none !important;
    background: #fff !important;
    color:      #000 !important;
  }
  body.ssx-printing .ssx-label-code { color: #000 !important; }
  body.ssx-printing .ssx-label-qr { width: 200px; height: 200px; }
}