/* ── Import CSS variables from SystemSettings ──────────────────────────────── */
@import url('/theme.css');

/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
    font-family: var(--theme-font, "Segoe UI", Arial, sans-serif);
    background: var(--theme-bg, #f6f7f9);
    color: var(--theme-charcoal, #1D252D);
    line-height: 1.5;
    min-height: 100vh;
}

a { color: var(--theme-steel); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.site-header {
    background: var(--theme-maroon);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.site-header .logo { height: 36px; }

.site-header .site-title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .02em;
    flex: 1;
}

.site-header .user-info {
    font-size: .85rem;
    opacity: .85;
}

.site-wrapper { display: flex; min-height: calc(100vh - 56px); }

.sidebar {
    width: 220px;
    background: var(--theme-charcoal);
    color: #ccc;
    flex-shrink: 0;
    padding: 1rem 0;
}

.sidebar a {
    display: block;
    padding: .55rem 1.25rem;
    color: #ccc;
    font-size: .9rem;
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s, color .15s;
}

.sidebar a:hover,
.sidebar a.active {
    background: rgba(255,255,255,.08);
    border-left-color: var(--theme-gold);
    color: #fff;
    text-decoration: none;
}

.sidebar .nav-group-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #888;
    padding: 1rem 1.25rem .3rem;
}

.main-content {
    flex: 1;
    padding: 1.5rem;
    min-width: 0;
}

/* ── Activity Sub-Nav ────────────────────────────────────────────────────────── */
.activity-subnav {
    background: var(--theme-card);
    border-bottom: 2px solid var(--theme-line);
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: -1.5rem -1.5rem 1.5rem;
    padding: 0 1.5rem;
}

.activity-subnav a {
    padding: .7rem 1rem;
    font-size: .875rem;
    color: var(--theme-charcoal);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.activity-subnav a:hover,
.activity-subnav a.active {
    color: var(--theme-maroon);
    border-bottom-color: var(--theme-maroon);
    text-decoration: none;
}

/* ── Page Header ─────────────────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.page-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--theme-charcoal);
}

.page-header .subtitle {
    font-size: .875rem;
    color: #666;
    margin-top: .2rem;
}

/* ── Cards ───────────────────────────────────────────────────────────────────── */
.card {
    background: var(--theme-card);
    border: 1px solid var(--theme-line);
    border-radius: 6px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--theme-line);
}

.card-header h2 {
    font-size: 1rem;
    font-weight: 600;
}

/* ── Stat Cards ──────────────────────────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--theme-card);
    border: 1px solid var(--theme-line);
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-maroon);
    line-height: 1;
}

.stat-card .stat-label {
    font-size: .8rem;
    color: #666;
    margin-top: .3rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border-radius: 4px;
    font-size: .875rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .15s, border-color .15s, opacity .15s;
    white-space: nowrap;
}

.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:hover { text-decoration: none; }

.btn-primary   { background: var(--theme-maroon);  color: #fff; }
.btn-secondary { background: var(--theme-steel);   color: #fff; }
.btn-success   { background: var(--theme-ok);      color: #fff; }
.btn-danger    { background: var(--theme-bad);     color: #fff; }
.btn-warning   { background: var(--theme-warn);    color: #fff; }
.btn-teal      { background: var(--theme-teal);    color: #fff; }
.btn-outline   { background: transparent; border-color: var(--theme-line); color: var(--theme-charcoal); }
.btn-sm        { padding: .3rem .7rem; font-size: .8rem; }
.btn-xs        { padding: .2rem .5rem; font-size: .75rem; }

.btn-primary:hover  { background: #5a0a1e; }
.btn-secondary:hover { background: #35607a; }
.btn-teal:hover     { background: #005246; }
.btn-outline:hover  { background: var(--theme-line); }

.btn-group { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Forms ───────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }

label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: .35rem;
    color: var(--theme-charcoal);
}

label.required::after { content: " *"; color: var(--theme-bad); }

input[type="text"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: .45rem .75rem;
    border: 1px solid var(--theme-line);
    border-radius: 4px;
    font-family: inherit;
    font-size: .875rem;
    background: #fff;
    color: var(--theme-charcoal);
    transition: border-color .15s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--theme-steel);
    box-shadow: 0 0 0 3px rgba(65,116,141,.15);
}

input[type="checkbox"] { width: auto; margin-right: .4rem; }

.form-hint { font-size: .78rem; color: #777; margin-top: .25rem; }
.form-error { font-size: .78rem; color: var(--theme-bad); margin-top: .25rem; }

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    cursor: pointer;
}

/* Aligned grid of toggle "chips" (e.g. the activity Config options) */
.toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .6rem;
}

/* Activity lifecycle transition buttons (Config header + activities list) */
.status-actions { display: inline-flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.page-header .status-actions { margin-top: .6rem; }

.toggle-item {
    margin: 0;
    padding: .55rem .75rem;
    border: 1px solid var(--theme-line);
    border-radius: 6px;
    background: #fff;
    transition: border-color .15s, background .15s;
}

.toggle-item:hover { border-color: var(--theme-steel); background: #fbfcfd; }
.toggle-item input[type="checkbox"] { flex-shrink: 0; }

/* ── Tables ──────────────────────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

thead th {
    background: var(--theme-charcoal);
    color: #fff;
    padding: .6rem .85rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

tbody tr { border-bottom: 1px solid var(--theme-line); }
tbody tr:hover { background: rgba(0,0,0,.02); }
tbody td { padding: .55rem .85rem; vertical-align: middle; }

.table-striped tbody tr:nth-child(even) { background: #fafbfc; }

/* ── Status Badges ───────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-draft     { background: #e9ecef; color: #555; }
.badge-open      { background: #d4edda; color: #155724; }
.badge-alloc     { background: #cce5ff; color: #004085; }
.badge-finalised { background: #d0e8ff; color: #003166; }
.badge-archived  { background: #f3f3f3; color: #888; }

.badge-pending   { background: #fff3cd; color: #856404; }
.badge-approved  { background: #d4edda; color: #155724; }
.badge-rejected  { background: #f8d7da; color: #721c24; }

.badge-attending    { background: #d4edda; color: #155724; }
.badge-notattending { background: #f8d7da; color: #721c24; }
.badge-unknown      { background: #e2e3e5; color: #555; }

/* ── Alerts ──────────────────────────────────────────────────────────────────── */
.alert {
    padding: .75rem 1rem;
    border-radius: 5px;
    margin-bottom: 1rem;
    font-size: .875rem;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.alert-success { background: #d4edda; border-left: 4px solid var(--theme-ok); color: #155724; }
.alert-error   { background: #f8d7da; border-left: 4px solid var(--theme-bad); color: #721c24; }
.alert-warning { background: #fff3cd; border-left: 4px solid var(--theme-warn); color: #856404; }
.alert-info    { background: #cce5ff; border-left: 4px solid var(--theme-steel); color: #004085; }

/* ── Allocation Board ────────────────────────────────────────────────────────── */
.board-layout {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 1rem;
    align-items: start;
}

.pool-panel {
    background: var(--theme-card);
    border: 1px solid var(--theme-line);
    border-radius: 6px;
    position: sticky;
    top: 70px;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}

.pool-panel-header {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--theme-line);
    flex-shrink: 0;
}

.pool-panel-header h3 { font-size: .95rem; font-weight: 600; }

.pool-search {
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--theme-line);
    flex-shrink: 0;
}

.pool-search input { width: 100%; }

.pool-list {
    flex: 1;
    overflow-y: auto;
    padding: .5rem;
}

.pool-student {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .6rem;
    border-radius: 4px;
    cursor: grab;
    background: #fff;
    border: 1px solid var(--theme-line);
    margin-bottom: .3rem;
    font-size: .85rem;
    transition: box-shadow .1s;
    user-select: none;
}

.pool-student:hover     { box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.pool-student.dragging  { opacity: .5; }
.pool-student input[type="checkbox"] { flex-shrink: 0; }

.pool-student .student-name { font-weight: 500; flex: 1; }
.pool-student .student-meta { font-size: .75rem; color: #888; }

/* Team grid */
.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.team-card {
    background: var(--theme-card);
    border: 2px solid var(--theme-line);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.team-card.team-full { border-color: var(--theme-bad); }
.team-card.team-low  { border-color: var(--theme-warn); }

.team-card-header {
    padding: .6rem .85rem;
    background: var(--theme-charcoal);
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.team-card-header .team-name {
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-size-badge {
    font-size: .75rem;
    background: rgba(255,255,255,.15);
    color: #fff;
    padding: .1rem .45rem;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ✕ delete control on the (dark) team-card header — white so it's visible.
   A real <button>, reset back to look like the plain glyph it always was. */
.team-remove-btn {
    background: none;
    border: none;
    font: inherit;
    color: #fff;
    opacity: .7;
    font-weight: 700;
    cursor: pointer;
    padding: 0 .25rem;
    flex-shrink: 0;
    transition: opacity .15s, color .15s;
}
.team-remove-btn:hover { opacity: 1; color: #ff9a9a; }
.team-remove-btn:focus-visible,
.remove-btn:focus-visible,
.family-remove-btn:focus-visible,
.move-to-select:focus-visible {
    outline: 2px solid var(--theme-steel);
    outline-offset: 1px;
}

/* Keyboard-reachable stand-in for the drag itself — moves an already-placed
   chip or family block to another team (or back to Unallocated) without a
   pointer. Kept visually quiet: same size as the ✕ next to it. */
.move-to-select {
    font-size: .68rem;
    max-width: 6.5rem;
    padding: 0 .1rem;
    border: 1px solid var(--theme-line);
    border-radius: 3px;
    background: #fff;
    color: #666;
    flex-shrink: 0;
}

.team-members {
    padding: .5rem;
    min-height: 60px;
    flex: 1;
}

.team-member {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .5rem;
    border-radius: 4px;
    background: #f8f9fa;
    border: 1px solid var(--theme-line);
    margin-bottom: .25rem;
    font-size: .8rem;
    cursor: grab;
    user-select: none;
    transition: box-shadow .1s;
}

.team-member:hover  { box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.team-member-captain { cursor: default; }
.team-member-captain:hover { box-shadow: none; }
.team-member .captain-icon { color: var(--theme-gold); font-size: .7rem; }
.team-member .remove-btn   {
    margin-left: auto; background: none; border: none; font: inherit;
    color: #bbb; cursor: pointer; font-size: .75rem;
}
.team-member .remove-btn:hover { color: var(--theme-bad); }

.sortable-ghost { opacity: .35; background: var(--theme-cream) !important; }
.sortable-chosen { box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.drop-zone-active { background: #f0f7ff; border-color: var(--theme-steel) !important; }

/* Family seating — one draggable block, several seats. Styled distinctly
   from .team-member/.pool-student so it reads as a group, not a person. */
.family-block {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .4rem .5rem;
    border-radius: 4px;
    background: var(--theme-cream, #f4efe6);
    border: 1px solid var(--theme-gold, #c9a227);
    margin-bottom: .3rem;
    font-size: .8rem;
    cursor: grab;
    user-select: none;
    transition: box-shadow .1s;
}

.family-block:hover { box-shadow: 0 1px 4px rgba(0,0,0,.1); }

.family-block-head { display: flex; align-items: center; gap: .4rem; }

.family-seats-badge {
    background: var(--theme-gold, #c9a227);
    color: #fff;
    min-width: 1.3rem;
    text-align: center;
    padding: .05rem .35rem;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.family-block .family-remove-btn {
    margin-left: auto; background: none; border: none; font: inherit;
    color: #a88; cursor: pointer; font-size: .75rem;
}
.family-block .family-remove-btn:hover { color: var(--theme-bad); }
.family-block .move-to-select { margin-left: auto; }
.family-block .family-remove-btn { margin-left: .3rem; }

.family-guest-list {
    font-size: .72rem;
    color: #7a6b3f;
    padding-left: 1.7rem;
    line-height: 1.3;
}

.pool-section-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #888;
    padding: .3rem .1rem .2rem;
    margin-top: .2rem;
}
.pool-section-label:first-child { margin-top: 0; }

/* Drop targets, shown only while a drag is in flight. The Unallocated panel is
   the deallocate target, and it is a separate sticky column — without this cue
   it is not obvious that dropping there is what frees a student. */
#pool-list.drop-zone, .team-members.drop-zone {
    outline: 1px dashed var(--theme-steel);
    outline-offset: -3px;
    border-radius: 4px;
}

#pool-list.drop-zone-active, .team-members.drop-zone-active {
    outline: 2px solid var(--theme-steel);
    outline-offset: -3px;
    background: #f0f7ff;
}

/* A team that can't fit what's currently being dragged over it — most
   visible for a multi-seat family block landing on a table with only one
   or two seats left, which still happily accepts an ordinary single
   student and so gave no clue at all why the family bounced back. */
.team-members.drop-zone-blocked {
    outline: 2px solid var(--theme-bad);
    outline-offset: -3px;
    background: #fdecea;
    cursor: not-allowed;
}

.pool-drop-hint { display: none; }

body.drag-in-progress .pool-drop-hint {
    display: block;
    margin-top: .3rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--theme-steel);
}

/* Chip pointed out by the board-wide search (it may be one of hundreds) */
.team-member.chip-flash {
    animation: chip-flash 1.3s ease-in-out 2;
    border-color: var(--theme-steel);
}
@keyframes chip-flash {
    0%, 100% { background: #f8f9fa; }
    50%      { background: #fff3cd; box-shadow: 0 0 0 3px rgba(255,193,7,.45); }
}

/* Board-wide student search */
.board-find { margin-bottom: 1rem; padding: .6rem .85rem; }

.board-find-row {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
}

.board-find-row label {
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
}

.board-find-row input { flex: 1; min-width: 220px; }

#board-search-results {
    margin-top: .6rem;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--theme-line);
    border-radius: 4px;
}

.bsr-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .6rem;
    font-size: .85rem;
    border-bottom: 1px solid var(--theme-line);
}

.bsr-row:last-child { border-bottom: none; }
.bsr-row:hover      { background: var(--theme-cream); }

.bsr-name  { font-weight: 600; flex: 1; min-width: 140px; }
.bsr-acts  { display: flex; gap: .3rem; flex-shrink: 0; }
.bsr-empty { padding: .6rem; font-size: .85rem; color: #888; }

.bsr-class {
    background: var(--theme-line);
    padding: .1rem .35rem;
    border-radius: 3px;
    font-size: .72rem;
    font-weight: 600;
    flex-shrink: 0;
}

.bsr-team {
    background: var(--theme-steel);
    color: #fff;
    padding: .1rem .45rem;
    border-radius: 3px;
    font-size: .75rem;
    font-weight: 600;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bsr-free {
    color: #856404;
    background: #fff3cd;
    padding: .1rem .45rem;
    border-radius: 3px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Board pagination */
.board-pagination {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* ── Per-user team hiding ─────────────────────────────────────────────────────
   The bar is deliberately quiet but never subtle enough to miss: it is the only
   thing on the page saying the board is drawing fewer teams than the activity
   has, and without it a hidden table gets reported as missing. */
.board-hidden-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .45rem .7rem;
    margin-bottom: .75rem;
    background: var(--theme-cream, #f4efe6);
    border: 1px dashed var(--theme-line);
    border-radius: 4px;
}

.board-hidden-count { font-size: .8rem; font-weight: 600; }

.board-hidden-note { flex-basis: 100%; }

.board-hidden-list { font-size: .8rem; }
.board-hidden-list summary { cursor: pointer; user-select: none; }

.board-hidden-items {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding-top: .4rem;
}

.board-hidden-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    background: var(--theme-card);
    border: 1px solid var(--theme-line);
    border-radius: 12px;
    padding: .1rem .25rem .1rem .55rem;
}

/* 👁 on the (dark) team-card header, reset and sized to match the ✕ beside it.
   Blue on hover rather than the ✕'s red: one puts a card away on your own
   screen, the other destroys a team, and they must not read as the same act. */
.team-hide-btn {
    background: none;
    border: none;
    font: inherit;
    color: #fff;
    opacity: .55;
    cursor: pointer;
    padding: 0 .25rem;
    flex-shrink: 0;
    transition: opacity .15s, color .15s;
}

.team-hide-btn:hover { opacity: 1; color: #9ecbff; }

.team-hide-btn:focus-visible {
    outline: 2px solid var(--theme-steel);
    outline-offset: 1px;
}

/* Marks a search hit whose team the searcher has hidden. The row still names
   the team; this only explains why Show has no card to scroll to yet. */
.bsr-hidden {
    font-size: .7rem;
    opacity: .75;
    white-space: nowrap;
}

/* ── Student Portal ──────────────────────────────────────────────────────────── */
.portal-header {
    background: var(--theme-maroon);
    color: #fff;
    padding: 1.25rem 1.5rem;
    margin: -1.5rem -1.5rem 1.5rem;
}

.portal-header h1 { font-size: 1.3rem; }
.portal-header .subtitle { opacity: .8; font-size: .9rem; }

.portal-activity-list { display: flex; flex-direction: column; gap: 1rem; }

.portal-activity-card {
    background: var(--theme-card);
    border: 1px solid var(--theme-line);
    border-radius: 6px;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.portal-activity-card .activity-info h3 { font-size: 1rem; font-weight: 600; }
.portal-activity-card .activity-info .meta { font-size: .82rem; color: #666; margin-top: .2rem; }

.progress-dots { display: flex; gap: .5rem; margin-top: .5rem; }

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--theme-line);
    background: #fff;
}

.dot.done { background: var(--theme-ok); border-color: var(--theme-ok); }
.dot.warn { background: var(--theme-warn); border-color: var(--theme-warn); }

/* Section panels for student activity view */
.section-panel {
    background: var(--theme-card);
    border: 1px solid var(--theme-line);
    border-radius: 6px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.section-panel-header {
    background: var(--theme-teal);
    color: #fff;
    padding: .65rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-panel-body { padding: 1rem; }

.closed-banner {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: .65rem 1rem;
    font-size: .875rem;
    color: #856404;
    margin-bottom: 1rem;
}

/* ── Search Box ──────────────────────────────────────────────────────────────── */
.search-box {
    position: relative;
    display: inline-block;
}

.search-box input { padding-left: 2.2rem; }

.search-box::before {
    content: "🔍";
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .85rem;
    pointer-events: none;
}

/* ── Utilities ───────────────────────────────────────────────────────────────── */
.text-muted   { color: #888; }
.text-small   { font-size: .8rem; }
.text-danger  { color: var(--theme-bad); }
.text-success { color: var(--theme-ok); }
.text-warning { color: var(--theme-warn); }
.text-center  { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.gap-1 { gap: .5rem; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.hidden { display: none !important; }

/* ── Error Pages ─────────────────────────────────────────────────────────────── */
.error-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.error-container { text-align: center; max-width: 480px; padding: 2rem; }
.error-icon { font-size: 4rem; margin-bottom: 1rem; }
.error-container h1 { font-size: 1.6rem; margin-bottom: .75rem; }
.error-container p { color: #666; margin-bottom: .75rem; }
.error-detail { font-size: .82rem; background: #f3f3f3; padding: .5rem; border-radius: 4px; }

/* ── Two-column panels (responsive) ──────────────────────────────────────────── */
/* Used by pages that pair two cards side by side (Sources, Captains, Admins,
   Auto-Allocate, team-name items, the board's create-team panel). Collapses to a
   single column on narrower / non-maximised windows so nothing gets cramped. */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
.two-col > * { min-width: 0; }   /* let wide children shrink instead of overflowing */

/* ── Board: keep the always-visible requests panel from eating the fold ───────── */
#prefs-body {
    max-height: 42vh;
    overflow-y: auto;
}

/* ── Density tuning for short viewports (e.g. 1920×1200 @ 150% ≈ 1280×800) ─────── */
/* At high OS scaling the usable height is only ~700px, so trim vertical chrome. */
@media (max-height: 820px) {
    .main-content      { padding: 1rem; }
    .activity-subnav   { margin: -1rem -1rem 1rem; padding: 0 1rem; }
    .activity-subnav a { padding: .5rem .85rem; }
    .portal-header     { margin: -1rem -1rem 1rem; padding: .85rem 1.25rem; }
    .page-header       { margin-bottom: .85rem; }
    .stat-grid         { margin-bottom: 1rem; }
    .card              { padding: 1rem; }
    .section-panel-body { padding: .75rem; }
    .pool-panel        { max-height: calc(100vh - 66px); }
}

/* Collapse the paired panels before the sidebar-hiding breakpoint, so a
   partial-width or 150%-scaled window degrades gracefully. */
@media (max-width: 1200px) {
    .two-col { grid-template-columns: 1fr; }
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
.nav-toggle-btn { display: none; }

@media (max-width: 900px) {
    .sidebar { display: none; }
    .board-layout { grid-template-columns: 1fr; }
    .pool-panel { position: static; max-height: 300px; }

    /* The sidebar was the only route to Activities, Help, Student Portal,
       Settings, Administration and Logs — below this width it simply
       vanished with nothing put in its place. Re-shown as a slide-in
       overlay, toggled by the header button next to it. */
    .nav-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.1rem;
        height: 2.1rem;
        font-size: 1.3rem;
        background: none;
        border: 1px solid rgba(255,255,255,.4);
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        margin-right: .5rem;
    }
    /* The header has to sit ABOVE the overlay and its backdrop. It didn't, so
       the panel covered the ☰ that opens it and the toggle became one-way —
       closing needed the backdrop, Escape or a link, none of which announce
       themselves. .site-header is position:sticky, so it already establishes a
       stacking context; only the z-index needed raising. */
    body.nav-open .site-header { z-index: 1100; }

    /* Stops the page behind scrolling while the overlay is open, which also
       keeps the sticky header pinned to the top of the viewport where the
       padding-top below expects it. */
    body.nav-open { overflow: hidden; }

    body.nav-open .sidebar {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        overflow-y: auto;
        box-shadow: 2px 0 12px rgba(0,0,0,.35);
        /* Clears the 56px header the panel now sits under, so the first nav
           link isn't hidden behind it. */
        padding-top: calc(56px + 1rem);
    }
    .nav-backdrop { display: none; }
    body.nav-open .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 999;
    }
}

@media (max-width: 600px) {
    .main-content { padding: 1rem; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .page-header { flex-direction: column; align-items: flex-start; }
    .btn-group { gap: .35rem; }
    .teams-grid { grid-template-columns: 1fr; }
}

/* ── Print ───────────────────────────────────────────────────────────────────
   Shared rules for every printable page. A view needing something different
   (two cards to a sheet, one venue per page) overrides these from its own
   @media print block, which is emitted after this file.

   Two helpers: .no-print is dropped on paper, .print-only appears only there.

   The recurring trap: browsers do NOT print background colours by default, so
   anything on this site relying on a background for contrast — table headers are
   white-on-charcoal, badges are dark-on-tint — comes out invisible or
   unreadable. Everything below redraws those in ink instead of depending on the
   user having ticked "background graphics".
   ────────────────────────────────────────────────────────────────────────── */
.print-only { display: none; }

@media print {
    @page { size: A4 portrait; margin: 12mm; }

    /* Site furniture is not part of a report: masthead, nav, filter controls and
       every action button. The page header itself stays — it titles the print. */
    .site-header,
    .sidebar,
    .activity-subnav,
    .no-print,
    .page-header .btn-group,
    .page-header .status-actions,
    .btn,
    button,
    input,
    select,
    textarea            { display: none !important; }

    .site-wrapper       { display: block; min-height: 0; }
    .main-content       { padding: 0; min-width: 0; }

    body                { background: #fff; color: #000; font-size: 10pt; }

    .print-only         { display: block !important; }

    /* Kept on paper, and redrawn in ink because backgrounds do not print. A
       printed board silently missing six teams is worse than a printed note
       saying six are hidden — and the reader of the paper is often not the
       person who hid them. (The team REPORTS are unaffected either way: hiding
       never reaches the repository, so every team is on those regardless.) */
    .board-hidden-bar {
        border: 1px solid #000;
        background: none;
    }

    /* The print-only banner each report puts at the top of the paper. */
    .print-header {
        border-bottom: 2px solid #000;
        padding-bottom: .3rem;
        margin-bottom: .7rem;
    }
    .print-header .ph-title { font-size: 13pt; font-weight: 700; }
    .print-header .ph-meta  { font-size: 8.5pt; }

    /* White-on-charcoal becomes black-on-white with a rule under it. */
    thead th {
        background: #fff !important;
        color: #000 !important;
        border-bottom: 2px solid #000;
        padding: .25rem .4rem;
    }
    /* Repeat the header on every sheet a long table spills onto. */
    thead               { display: table-header-group; }
    table               { font-size: 9pt; }
    td                  { padding: .22rem .4rem; }
    tbody tr            { border-bottom: 1px solid #ccc; page-break-inside: avoid; }
    .table-striped tbody tr:nth-child(even) { background: transparent !important; }
    /* A horizontal scroller on screen must not clip the page on paper. */
    .table-wrapper      { overflow: visible !important; }

    /* Tinted pills carry their meaning in the background colour, so outline them. */
    .badge {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #777;
        padding: 0 .3rem;
        font-size: 8pt;
    }

    .alert {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #777;
        border-left-width: 3px;
        page-break-inside: avoid;
    }

    .card, .stat-card {
        border: 1px solid #999;
        box-shadow: none;
        page-break-inside: avoid;
    }
    .card               { padding: .6rem .8rem; }

    /* Four stat cards across the page rather than two rows of huge ones. */
    .stat-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: .4rem;
        margin-bottom: .8rem;
    }
    .stat-card              { padding: .4rem; }
    .stat-card .stat-value  { font-size: 1.3rem; }
    .stat-card .stat-label  { font-size: 7.5pt; }

    /* Underlined blue links read as noise on paper, and the URL is not there. */
    a { color: #000 !important; text-decoration: none !important; }

    h1                      { font-size: 14pt; }
    h2                      { font-size: 11pt; }
    .page-header            { display: block; margin-bottom: .6rem; }
    .page-header .subtitle  { font-size: 8.5pt; }
}