/* Admissions (js/admissions.js) */
.adm-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.adm-pipe-cell { border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; cursor: pointer; background: var(--panel); border-top: 3px solid var(--c, var(--accent)); transition: transform .08s ease, box-shadow .12s ease; }
.adm-pipe-cell:hover { transform: translateY(-1px); box-shadow: 0 3px 12px rgba(0,0,0,.08); }
.adm-pipe-cell.on { background: color-mix(in srgb, var(--c) 12%, var(--panel)); }
.adm-pipe-n { font-size: 24px; font-weight: 800; color: var(--c); line-height: 1; }
.adm-pipe-l { font-size: 12px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.adm-status { font-size: 12px; font-weight: 700; color: var(--c); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.adm-row { transition: box-shadow .12s ease; }
.adm-row:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.adm-scan-note { margin-bottom: 10px; padding: 8px 11px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.adm-raw { white-space: pre-wrap; font-size: 11px; max-height: 180px; overflow: auto; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-top: 8px; color: var(--muted); }

/* Class field: the dropdown, the ＋ New class button beside it, and the creator
   strip that opens on its own full-width line underneath (flex-basis 100% — the
   fields must never squeeze the dropdown they exist to fill). */
.adm-cls-field { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.adm-cls-field > label.fld { flex: 1 1 180px; min-width: 0; }
.adm-cls-field > .btn { flex: 0 0 auto; }
.adm-cls-new { display: none; flex: 1 0 100%; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; padding: 8px; border: 1px dashed var(--line); border-radius: 10px; background: var(--panel-2); }
.adm-cls-new.on { display: flex; }
.adm-cls-new select { min-width: 0; width: auto; }
.adm-cls-new input { min-width: 0; width: 104px; }
.adm-cls-new .btn { flex: 0 0 auto; }

@media (max-width: 620px) { .adm-pipe { grid-template-columns: repeat(2, 1fr); } }
/* Phone: one control per line, full width, so the 44px touch floor applies.
   flex-wrap MUST go with the column direction, and the strip's flex-basis MUST go
   back to auto: 100% of the main axis in a column is 100% of the HEIGHT, which made
   the wrapper wrap into a second COLUMN and pushed the dialog 254px sideways. */
.is-mobile .adm-cls-new, .is-mobile .adm-cls-field { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.is-mobile .adm-cls-new, .is-mobile .adm-cls-field > label.fld { flex: 0 0 auto; }   /* 180px of basis is 180px of HEIGHT once the axis turns */
.is-mobile .adm-cls-new select, .is-mobile .adm-cls-new input, .is-mobile .adm-cls-new .btn, .is-mobile .adm-cls-field > .btn { width: 100%; }