/* ============================================================
   Time, Umpire! — Admin Panel Styles
   Colour scheme: Pink/magenta + Dark purple
   ============================================================ */

:root {
    --tu-primary: #C2185B;
    --tu-primary-dark: #880E4F;
    --tu-secondary: #4A148C;
    --tu-secondary-light: #7B1FA2;
    --tu-sidebar-width: 260px;
    --tu-topbar-height: 60px;
}

/* ---------- Body ---------- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f5f5f5;
    min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--tu-sidebar-width);
    height: 100vh;
    background: #2d1b4e;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    overflow-y: auto;
}

/* Seamless thin scrollbar (matches manager panel) */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.sidebar-header {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-brand {
    color: #fff;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar-brand:hover {
    color: #fff;
}

.sidebar-brand i {
    font-size: 1.5rem;
}

.sidebar-association {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.875rem;
}

.sidebar-nav {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    flex: 1;
}

.sidebar-item {
    margin: 1px 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

.sidebar-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-left-color: var(--tu-primary);
    font-weight: 600;
}

.sidebar-link i {
    font-size: 1.1rem;
    width: 1.25rem;
    text-align: center;
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
}

/* ---------- Main Content ---------- */
#main-content {
    margin-left: var(--tu-sidebar-width);
    min-height: 100vh;
    transition: margin-left 0.3s ease;
}

.topbar {
    height: var(--tu-topbar-height);
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.topbar-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.content-wrapper {
    padding: 1.5rem;
    /* Extra bottom clearance so the floating Report Bug button never overlaps
       page content. (The allocations grid uses the fullscreen layout, not this.) */
    padding-bottom: 90px;
}

/* ---------- Status Cards ---------- */
.stat-card {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1.25rem;
    border: 1px solid #e0e0e0;
    transition: box-shadow 0.2s ease;
}

.stat-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #fff;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #333;
}

.stat-card .stat-label {
    font-size: 0.8rem;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bg-tu-primary    { background-color: var(--tu-primary) !important; }
.bg-tu-secondary  { background-color: var(--tu-secondary) !important; }
.bg-tu-success    { background-color: #2E7D32 !important; }
.bg-tu-warning    { background-color: #F57F17 !important; }
.bg-tu-info       { background-color: #1565C0 !important; }

/* ---------- Dashboard Sections ---------- */
.dash-card {
    background: #fff;
    border-radius: 0.5rem;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.dash-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dash-card-body {
    padding: 1.25rem;
}

/* ---------- Activity Timeline ---------- */
.timeline {
    position: relative;
    padding-left: 1.5rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 2px;
    background: #e0e0e0;
}

.timeline-item {
    position: relative;
    padding-bottom: 1rem;
    padding-left: 0.75rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -1.125rem;
    top: 0.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tu-primary);
    border: 2px solid #fff;
}

.timeline-item .timeline-text {
    font-size: 0.875rem;
    color: #424242;
}

.timeline-item .timeline-time {
    font-size: 0.75rem;
    color: #9e9e9e;
}

/* ---------- Platform News Badge ---------- */
.news-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

/* ---------- Login Page ---------- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--tu-secondary) 0%, var(--tu-primary-dark) 50%, var(--tu-primary) 100%);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 0.75rem;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.login-logo {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-logo i {
    font-size: 2.5rem;
    color: var(--tu-primary);
}

.login-logo-img {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    margin: 0 auto 0.5rem;
}

/* The full-colour logo has dark text, so place it on a white panel wherever the
   background is dark (sidebar + association selector) so it stays legible. */
.sidebar-logo,
.select-assoc-logo {
    display: block;
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
}
.select-assoc-logo {
    display: inline-block;
    max-width: 280px;
}
.sidebar-logo img,
.select-assoc-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.login-logo h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tu-secondary);
    margin: 0.5rem 0 0.25rem;
}

.login-logo p {
    color: #757575;
    font-size: 0.875rem;
    margin: 0;
}

.btn-tu-primary {
    background-color: var(--tu-primary);
    border-color: var(--tu-primary);
    color: #fff;
}

.btn-tu-primary:hover {
    background-color: var(--tu-primary-dark);
    border-color: var(--tu-primary-dark);
    color: #fff;
}

/* ---------- Association Selector ---------- */
.assoc-selector-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--tu-secondary) 0%, var(--tu-primary-dark) 50%, var(--tu-primary) 100%);
}

.assoc-card {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid #e0e0e0;
}

.assoc-card:hover {
    border-color: var(--tu-primary);
    box-shadow: 0 4px 12px rgba(194, 24, 91, 0.15);
}

/* ---------- Placeholder Badge ---------- */
.badge-coming-soon {
    background-color: #e0e0e0;
    color: #616161;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ---------- Quick Help ---------- */
.help-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f5f5f5;
}

.help-item:last-child {
    border-bottom: none;
}

.help-item i {
    color: var(--tu-primary);
    font-size: 1.1rem;
    margin-top: 0.15rem;
}

/* ---------- Phase 2: User Detail Avatar ---------- */
.avatar-placeholder-lg {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tu-primary), var(--tu-secondary));
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Phase 2: Module Cards ---------- */
.module-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.2s ease;
}

.module-card.module-enabled {
    border-color: var(--tu-primary);
    background: #fce4ec;
}

.module-card.module-locked {
    opacity: 0.6;
}

.module-toggle {
    cursor: pointer;
    width: 2.75rem !important;
    height: 1.4rem;
}

.module-toggle:checked {
    background-color: var(--tu-primary);
    border-color: var(--tu-primary);
}

/* ---------- Phase 2: Tabs Override ---------- */
.nav-tabs .nav-link {
    color: #666;
    font-size: 0.9rem;
}

.nav-tabs .nav-link.active {
    color: var(--tu-primary);
    font-weight: 600;
    border-bottom-color: var(--tu-primary);
}

.nav-tabs .nav-link:hover:not(.active) {
    border-color: transparent;
    color: var(--tu-primary-dark);
}

/* ---------- Phase 2: Pagination Override ---------- */
.page-item.active .page-link {
    background-color: var(--tu-primary);
    border-color: var(--tu-primary);
}

.page-link {
    color: var(--tu-primary);
}

.page-link:hover {
    color: var(--tu-primary-dark);
}

/* ---------- Phase 2: Table Hover ---------- */
.table-hover tbody tr:hover {
    background-color: rgba(194, 24, 91, 0.03);
}

/* ---------- Phase 2: Border danger card ---------- */
.dash-card.border-danger {
    border-color: #dc3545;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    #main-content {
        margin-left: 0;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1035;
    }

    .sidebar-overlay.show {
        display: block;
    }
}

/* ============================================================
   Phase 3: Calendar, Availability & CSV Import
   ============================================================ */

/* ---------- Calendar Status Workflow ---------- */
.bg-tu-secondary { background-color: var(--tu-secondary) !important; }

/* ---------- Timeslot Row (create/edit forms) ---------- */
.timeslot-row {
    animation: slideIn 0.2s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Availability Grid ---------- */
#availTable th {
    white-space: nowrap;
    font-size: 0.85rem;
}

#availTable .bi-check-circle-fill {
    font-size: 1.1rem;
}

#availTable .bi-x-circle-fill {
    font-size: 1.1rem;
}

.admin-note-btn {
    padding: 0.2rem 0.4rem;
    line-height: 1;
}

.admin-note-btn .bi-sticky-fill {
    color: #F57F17;
}

/* ---------- Availability Filter Buttons ---------- */
#availFilter .btn.active {
    font-weight: 600;
}

#availFilter .btn-outline-success.active {
    background-color: #2E7D32;
    border-color: #2E7D32;
    color: #fff;
}

#availFilter .btn-outline-danger.active {
    background-color: #C62828;
    border-color: #C62828;
    color: #fff;
}

/* ---------- Saved Timeslot Template Cards ---------- */
.dash-card .badge.bg-info {
    background-color: #1565C0 !important;
}

/* ---------- CSV Import ---------- */
pre.bg-light {
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ---------- Responsive: dropdown actions on calendar list ---------- */
@media (max-width: 767.98px) {
    .table-responsive .dropdown-menu {
        position: static !important;
        transform: none !important;
    }
}

/* ============================================================
   Phase 4: Allocation Grid & Roster  (v4 legacy-match rebuild)
   ============================================================ */

/* ---------- Grid wrapper ---------- */
.alloc-grid-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.alloc-grid-table {
    min-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
}

/* ---------- Header rows ---------- */
.alloc-grid-head th {
    background: linear-gradient(180deg, var(--tu-secondary) 0%, var(--tu-primary-dark) 100%);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.55rem 0.5rem;
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
    border-color: rgba(255,255,255,0.15) !important;
}

.alloc-time-col {
    width: 100px;
    min-width: 100px;
}

.alloc-court-col {
    min-width: 160px;
}

/* Second header row (Umpires | Mentors sub-headers) */
.alloc-sub-head th {
    background: linear-gradient(180deg, var(--tu-primary-dark) 0%, #5d0e38 100%);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.5rem;
    top: 2.2rem;       /* sit right under the top header row when sticky */
    font-weight: 500;
}

.alloc-sub-col {
    min-width: 110px;
}

.alloc-sub-umpires {
    /* primary ref column — default styling is enough */
}

.alloc-sub-mentors {
    background: linear-gradient(180deg, #4a148c 0%, #38106b 100%) !important;
}

/* Additional Roles column header */
.alloc-additional-col {
    background: linear-gradient(180deg, #6a1b9a 0%, #4a148c 100%) !important;
    min-width: 180px;
}

/* ---------- Body cells ---------- */
.alloc-time-cell {
    background: #f8f9fa;
    font-size: 0.85rem;
    padding: 0.5rem !important;
    vertical-align: top;
    border-right: 2px solid #dee2e6 !important;
    white-space: nowrap;
}

.alloc-time-cell-empty {
    padding: 0 !important;
    border: none !important;
    width: 0;
    min-width: 0;
}

.alloc-cell {
    padding: 0.4rem !important;
    vertical-align: top;
    min-height: 60px;
    position: relative;
    transition: background-color 0.15s ease;
}

.alloc-cell:hover {
    background-color: rgba(194, 24, 91, 0.03);
}

/* Sub-column cells — subtle tint to visually group by role */
.alloc-sub-umpires-cell {
    /* umpire cells stay default white */
    border-right: 1px dashed #e0e0e0 !important;
}

.alloc-sub-mentors-cell {
    background-color: #f7f4fb;
    border-right: 2px solid #dee2e6 !important;
}

.alloc-sub-mentors-cell:hover {
    background-color: #eee4f5;
}

/* Additional Roles cell */
.alloc-additional-cell {
    background-color: #faf5ff;
    border-left: 2px solid #ce93d8 !important;
}

/* Status overlays */
.alloc-cell-cancelled {
    background-color: #f5f5f5 !important;
    opacity: 0.6;
}

.alloc-cell-flagged {
    background-color: #fffde7 !important;
    border-left: 3px solid #F57F17 !important;
}

.alloc-cell-banned {
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 5px,
        rgba(198, 40, 40, 0.06) 5px,
        rgba(198, 40, 40, 0.06) 10px
    ) !important;
}

.alloc-cell-empty {
    background-color: #fafafa;
}

/* Drop target highlight */
.alloc-cell-drop-target {
    background-color: rgba(194, 24, 91, 0.1) !important;
    outline: 2px dashed var(--tu-primary);
    outline-offset: -2px;
}

/* ---------- Supervisor Row ---------- */
.alloc-supervisor-row td {
    background: #f3e5f5;
    border-bottom: 2px solid #ce93d8 !important;
}

.alloc-supervisor-cell {
    padding: 0.35rem 0.5rem !important;
}

/* ---------- Allocation Chips ---------- */
.alloc-chips {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.alloc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.78rem;
    line-height: 1.4;
    max-width: 100%;
    transition: all 0.15s ease;
}

.alloc-chip:hover {
    border-color: var(--tu-primary);
    box-shadow: 0 1px 4px rgba(194, 24, 91, 0.12);
}

.alloc-chip[draggable="true"] {
    cursor: grab;
}

.alloc-chip[draggable="true"]:active {
    cursor: grabbing;
}

.alloc-chip-referee {
    border-left: 3px solid var(--tu-primary);
}

.alloc-chip-mentor {
    border-left: 3px solid #5c6bc0;
    background: #e8eaf6;
}

.alloc-chip-supervisor {
    border-left: 3px solid #7B1FA2;
    background: #f3e5f5;
}

.alloc-chip-custom {
    border-left: 3px solid #6a1b9a;
    background: #f3e5f5;
}

.alloc-chip-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tu-secondary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
}

.alloc-chip-mentor .alloc-chip-role {
    background: #5c6bc0;
}

.alloc-chip-supervisor .alloc-chip-role,
.alloc-chip-custom .alloc-chip-role {
    background: #7B1FA2;
}

.alloc-chip-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: #333;
}

.alloc-chip-status {
    font-size: 0.6rem;
    padding: 1px 4px;
    flex-shrink: 0;
}

.alloc-chip-remove {
    background: none;
    border: none;
    color: #999;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}

.alloc-chip-remove:hover {
    color: #C62828;
}

/* ---------- Cell action buttons ---------- */
.alloc-cell-actions {
    display: flex;
    gap: 3px;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.alloc-cell:hover .alloc-cell-actions {
    opacity: 1;
}

.alloc-add-btn {
    padding: 1px 5px !important;
    font-size: 0.72rem !important;
    line-height: 1.3;
}

/* ---------- Game Info ---------- */
.alloc-game-info {
    margin-bottom: 3px;
    padding-bottom: 3px;
    border-bottom: 1px dashed #e0e0e0;
    line-height: 1.3;
}

.alloc-game-info small {
    font-size: 0.7rem;
}

/* ---------- Flag & Note indicators ---------- */
.alloc-flag-indicator,
.alloc-note-indicator {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    font-size: 0.72rem;
}

.alloc-flag-indicator i,
.alloc-note-indicator i {
    font-size: 0.75rem;
}

/* ---------- Banned / Cancelled notices ---------- */
.alloc-banned-notice,
.alloc-cancelled-notice {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.5rem 0;
    justify-content: center;
}

/* In a cancelled cell the notice fills the umpire area so the match footer
   drops into its usual "match" row, lining up with the active cells' footers. */
.alloc-court-inner > .alloc-cancelled-notice {
    grid-column: 1 / -1;
    grid-row: 1 / 3;
}

/* ---------- Header: date nav arrows & group badge ---------- */
.alloc-date-arrow {
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

.alloc-date-select {
    min-width: 320px;
    flex: 1 1 auto;
    max-width: 520px;
}

.alloc-group-badge {
    font-size: 0.7rem;
    padding: 0.35em 0.55em;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ---------- Officials Sidebar (LEFT) ---------- */
.alloc-sidebar {
    position: sticky;
    top: calc(var(--tu-topbar-height) + 1.5rem);
    max-height: calc(100vh - var(--tu-topbar-height) - 3rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.alloc-sidebar .dash-card-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.alloc-official-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

.alloc-official-item {
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 3px;
    cursor: default;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    border-left-width: 3px;
}

.alloc-official-item[draggable="true"] {
    cursor: grab;
}

.alloc-official-item[draggable="true"]:active {
    cursor: grabbing;
}

.alloc-official-item:hover {
    background: #f5f5f5;
    border-color: #e0e0e0;
    border-left-color: inherit; /* keep the availability stripe visible on hover */
}

.alloc-official-item.alloc-dragging {
    opacity: 0.5;
    background: #fce4ec;
}

/* Availability stripe + dot only — no row background fill. The right-hand dot
   carries the available/unavailable/no-response state; the row background is
   reserved for the time-selected member highlight (see .alloc-off-time-match). */
.alloc-off-available {
    border-left-color: #2E7D32;
}

.alloc-off-unavailable {
    border-left-color: #C62828;
    opacity: 0.7;
}

.alloc-off-noresponse {
    border-left-color: #9e9e9e;
}

/* Assigned members get a subtle secondary indicator */
.alloc-off-assigned {
    box-shadow: inset -3px 0 0 0 var(--tu-primary);
}

.alloc-off-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.alloc-off-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center;
    gap: 4px;
}

.alloc-off-badge {
    font-size: 0.58rem;
    padding: 0.1em 0.35em;
    font-weight: 600;
    vertical-align: middle;
}

.alloc-off-meta {
    font-size: 0.7rem;
    line-height: 1.3;
    color: #666;
    margin-top: 1px;
}

.alloc-off-count {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--tu-primary);
    color: #fff;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.5;
}

.alloc-off-count i {
    font-size: 0.6rem;
}

/* ---------- Confirmation Filter (preserved from original) ---------- */
#confFilter .btn.active {
    font-weight: 600;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    /* On tablets/phones, let the sidebar and grid stack naturally.
       Bootstrap's order-1/order-2 is only active at lg+, so the default
       source order (sidebar first) puts officials on top — swap to
       grid-first on small screens via order override. */
    .alloc-sidebar {
        position: static;
        max-height: none;
    }
    .alloc-official-list {
        max-height: 320px;
    }
    .alloc-court-col,
    .alloc-sub-col {
        min-width: 120px;
    }
}

@media (max-width: 767.98px) {
    .alloc-grid-table {
        font-size: 0.8rem;
    }
    .alloc-chip {
        font-size: 0.72rem;
        padding: 1px 4px;
    }
    .alloc-cell-actions {
        opacity: 1;
    }
    .alloc-date-select {
        min-width: 0;
    }
}


/* ============================================================
   Phase 5: Chat Groups
   ============================================================ */

/* ---------- Group List Icon ---------- */
.chat-group-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tu-primary), var(--tu-secondary));
    color: #fff;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-group-icon-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tu-primary), var(--tu-secondary));
    color: #fff;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------- Member Picker (Add Members Modal) ---------- */
.chat-member-option {
    transition: background-color 0.1s ease;
    cursor: pointer;
    /* Flex row instead of Bootstrap's float-based .form-check, whose negative
       margin pulled the checkbox off the left edge of the modal. */
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-left: 1rem;
}

.chat-member-option:hover {
    background-color: #f8f9fa;
}

.chat-member-option .form-check-input {
    float: none;
    margin: 0;
    flex-shrink: 0;
}

.chat-member-option .form-check-label {
    cursor: pointer;
    margin: 0;
    padding-left: 0;
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------- Message List ---------- */
.chat-message-list {
    max-height: 600px;
    overflow-y: auto;
}

.chat-message-item {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.1s ease;
}

.chat-message-item:last-child {
    border-bottom: none;
}

.chat-message-item:hover {
    background-color: #fafafa;
}

.chat-message-item:hover .chat-msg-delete-btn {
    opacity: 1;
}

.chat-message-deleted {
    background-color: #f9f9f9;
    opacity: 0.7;
}

/* ---------- Message Avatar ---------- */
.chat-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tu-primary), var(--tu-secondary));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Message Content ---------- */
.chat-msg-text {
    font-size: 0.9rem;
    color: #333;
    word-break: break-word;
    line-height: 1.5;
}

.chat-msg-image {
    max-width: 200px;
    max-height: 150px;
    object-fit: cover;
    border: 1px solid #e0e0e0;
}

/* ---------- Delete Button (hidden until hover) ---------- */
.chat-msg-delete-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* ---------- Nav Tabs Override for Chat ---------- */
.nav-tabs .nav-link.active {
    color: var(--tu-primary);
    border-bottom-color: var(--tu-primary);
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    color: var(--tu-primary-dark);
}

/* ---------- Responsive: show delete button on touch ---------- */
@media (max-width: 991.98px) {
    .chat-msg-delete-btn {
        opacity: 0.6;
    }

    .chat-message-list {
        max-height: none;
    }
}

/* ============================================================
   Phase 6: Documents, Events, News
   ============================================================ */

/* ---------- User Avatar (small) ---------- */
.user-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tu-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* ---------- Document Icon ---------- */
.doc-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #fff0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ---------- Event Date Badge ---------- */
.event-date-badge {
    width: 44px;
    min-width: 44px;
    text-align: center;
    border-radius: 8px;
    background: var(--tu-primary);
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
}

.event-date-badge .event-date-month {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.15);
    padding: 2px 0;
}

.event-date-badge .event-date-day {
    font-size: 1.125rem;
    font-weight: 700;
    padding: 2px 0 4px;
    line-height: 1.2;
}

/* ---------- News Content ---------- */
.news-content {
    line-height: 1.7;
    color: #333;
}

/* ---------- Event Description ---------- */
.event-description {
    line-height: 1.7;
    color: #333;
}

/* ---------- RSVP Tab Overrides ---------- */
.tab-content .tab-pane {
    min-height: 60px;
}

/* ---------- Progress bar in tables ---------- */
.table .progress {
    background-color: #e9ecef;
    border-radius: 3px;
}

/* ============================================================
   Phase 4 — Zip 1b: Full-screen shell + A/B slots + legend
   (Appended to admin.css. Extends the existing .alloc-* rules.)
   ============================================================ */

/* ---------- Full-screen body / layout shell ---------- */
body.fs-body {
    margin: 0;
    padding: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #f6f7fb;
}

.fs-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    height: 48px;
    background: linear-gradient(90deg, var(--tu-secondary) 0%, var(--tu-primary-dark) 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
    z-index: 1030;
}

.fs-topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}

.fs-topbar-brand i {
    font-size: 1.1rem;
}

.fs-topbar-assoc {
    flex: 1 1 auto;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.92);
    max-width: 50%;
    margin: 0 auto;
}

.fs-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.fs-topbar-right a,
.fs-topbar-user {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    transition: background 0.15s;
}

.fs-topbar-right a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.fs-topbar-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
}

.fs-flash-area {
    padding: 0.5rem 1rem 0;
    flex-shrink: 0;
}

.fs-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ---------- Allocation page layout ---------- */
.fs-alloc-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.fs-alloc-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.fs-alloc-datebar {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.fs-alloc-datebar .alloc-date-select {
    min-width: 280px;
    max-width: 420px;
}

.fs-alloc-header-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

.fs-alloc-date-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
}

.fs-alloc-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-left: auto;
}

.fs-alloc-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

/* Workflow-stage prompts shown in place of the grid (draft / availability-open) */
.fs-alloc-stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    /* In draft the sidebar is hidden, so the stage is the only grid child — span
       the full workspace width so the card centres on the whole page. */
    grid-column: 1 / -1;
}
.fs-alloc-stage-card {
    max-width: 560px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--tu-border, #e4e4ea);
    border-radius: 12px;
    padding: 2rem 2.25rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.fs-alloc-stage-timeslots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
/* Availability-open card: badges for the times the selected member is available */
.alloc-stage-ts { transition: background-color .12s ease, border-color .12s ease; }
.alloc-stage-ts.alloc-stage-ts-avail {
    background: #e7f5ec !important;
    border-color: #2f8a4f !important;
    color: #1f6b3a !important;
    font-weight: 600;
}

/* Create-date timeslots — flow left-to-right as compact tiles to save vertical space */
.timeslots-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}
.timeslot-chip {
    border: 1px solid #e4e4ea;
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    background: #fafafb;
}
.timeslot-add-tile {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 31px; /* matches form-control-sm so it lines up with the inputs */
    align-self: flex-end;
    border: 1px dashed var(--tu-primary);
    background: transparent;
    color: var(--tu-primary);
    border-radius: 8px;
    padding: 0 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.timeslot-add-tile:hover {
    background: var(--tu-primary);
    color: #fff;
}

/* Calendar row actions — keep every row's buttons in aligned columns */
.calendar-actions { justify-content: flex-end; }
.calendar-actions .calendar-action-main {
    min-width: 175px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.calendar-actions .calendar-action-slot {
    display: inline-block;
    width: 31px;
    flex: 0 0 31px;
}

/* ---------- Workspace: sidebar + grid ---------- */
.fs-alloc-workspace {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.fs-alloc-sidebar {
    background: #fff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.fs-alloc-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid #e0e0e0;
    background: linear-gradient(180deg, #fafafa 0%, #f4f4f6 100%);
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    flex-shrink: 0;
}

.fs-alloc-sidebar-controls {
    padding: 0.6rem 0.6rem 0.4rem;
    flex-shrink: 0;
    border-bottom: 1px solid #ececec;
}

.fs-alloc-sidebar-hint {
    margin-top: 0.45rem;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    background: #f3f5f9;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.2s, color 0.2s;
}

.fs-alloc-sidebar-hint.alloc-sidebar-hint-active {
    background: #e8f5e9;
}

.fs-alloc-sidebar-hint.alloc-sidebar-hint-active small {
    color: #1b5e20 !important;
    font-weight: 500;
}

.fs-alloc-sidebar-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.4rem 0.5rem 0.8rem;
    min-height: 0;
}

/* Override the legacy .alloc-sidebar sticky rule since we're in a flex-column now */
.fs-alloc-sidebar .alloc-official-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

/* ---------- Sidebar member rows (layout tweaks for fullscreen) ---------- */
.alloc-off-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alloc-off-name-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.alloc-off-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.alloc-off-count-inline {
    color: var(--tu-primary);
    font-weight: 600;
    font-size: 0.75rem;
}

/* Small round availability dot on the right of each member row */
.alloc-off-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #9e9e9e;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.alloc-off-available .alloc-off-dot   { background: #2E7D32; }
.alloc-off-unavailable .alloc-off-dot { background: #C62828; }
.alloc-off-noresponse .alloc-off-dot  { background: #9e9e9e; }

/* ---------- Click-to-assign selection states ---------- */
.alloc-member-selected {
    background: #fce4ec !important;
    outline: 2px solid var(--tu-primary);
    outline-offset: -2px;
}

.alloc-member-dimmed {
    opacity: 0.4;
}
.alloc-member-dimmed:hover {
    opacity: 0.75;
}

/* ---------- Availability highlighting (member ⇄ timeslot) ---------- */
.alloc-time-clickable { cursor: pointer; }
.alloc-time-clickable:hover { background: #eef0f2; }

/* Selected member → the TIME cells they are available for glow green */
.alloc-time-cell.alloc-time-avail {
    background: #d4edda;
    box-shadow: inset 0 0 0 2px #2E7D32;
}

/* A TIME cell is clicked to filter the member list */
.alloc-time-cell.alloc-time-active {
    background: #c3e6cb;
    box-shadow: inset 0 0 0 2px #1b5e20;
}

/* Sidebar members available for the clicked time */
.alloc-off-time-match {
    background: #e8f5e9 !important;
    outline: 2px solid #2E7D32;
    outline-offset: -2px;
}

/* Let the row Actions dropdown escape the calendar table card — it was clipped by
   .dash-card overflow:hidden and .table-responsive's overflow. The table fits at
   desktop widths, so dropping the scroll-clip here is safe. */
.calendar-dates-card,
.calendar-dates-card .table-responsive {
    overflow: visible;
}

/* Live-editable availability status dropdown (admin /availabilities) */
.avail-status-select { font-weight: 600; }
.avail-status-select[data-val="2"] { color: #2E7D32; border-color: #2E7D32; }
.avail-status-select[data-val="1"] { color: #C62828; border-color: #C62828; }
.avail-status-select[data-val="0"] { color: #6c757d; }

/* ---------- Sortable report tables ---------- */
.report-sortable thead th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.report-sortable thead th:hover { background: #eef0f2; }
/* Faint up/down on every sortable column so users know it's sortable… */
.report-sortable thead th::after  { content: " ↕"; opacity: 0.3; font-size: 0.85em; }
/* …and the solid arrow on the column currently sorted. */
.report-sortable thead th.sort-asc::after  { content: " ↑"; opacity: 0.9; font-size: 1em; }
.report-sortable thead th.sort-desc::after { content: " ↓"; opacity: 0.9; font-size: 1em; }

/* ---------- Print (reports → Save as PDF) ---------- */
.report-print-footer { display: none; }
@media print {
    body * { visibility: hidden; }
    .report-print, .report-print * { visibility: visible; }
    .report-print {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        box-shadow: none !important;
        border: none !important;
    }
    .d-print-none { display: none !important; }

    /* Footer pinned to the bottom of every printed page */
    .report-print-footer,
    .report-print-footer * { visibility: visible; }
    .report-print-footer {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 4px 2px;
        border-top: 1px solid #bbb;
        font-size: 10px;
        color: #555;
    }

    /* Keep grid rows together across page breaks */
    .report-grid tr { page-break-inside: avoid; }
    .report-grid { font-size: 10px; }

    /* Each court-chunk prints on its own page so no courts are cut off */
    .report-grid-page { page-break-after: always; }
    .report-grid-page:last-child { page-break-after: auto; }
    .report-grid-printset .report-grid { width: 100%; table-layout: auto; }
}

/* ---------- Date Court Allocations (grid print) ---------- */
/* height:1px is a deliberate hack — it gives the table a resolvable height so the
   cells' height:100% (and the bottom-pinned match line) actually work in Chrome.
   Content still expands the table well past 1px. */
.report-grid { height: 1px; }
.report-grid td,
.report-grid th { padding: 0.3rem 0.4rem; }
.report-grid-time { white-space: nowrap; width: 1%; }
.report-grid-cell { min-width: 110px; height: 100%; vertical-align: top; }
/* Full-height flex column so the match line can be pinned to the bottom,
   keeping match details aligned across every court in a row. */
.report-grid-cellinner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
}
.report-grid-line { line-height: 1.35; }
.report-grid-pos {
    display: inline-block;
    min-width: 1.4em;
    font-weight: 600;
    color: #C2185B;
}
.report-grid-mentor .report-grid-pos { color: #6c757d; }
.report-grid-mentor { color: #555; }
.report-grid-match {
    margin-top: auto; /* pin to the bottom of the cell so match lines align across the row */
    padding-top: 3px;
    border-top: 1px dotted #ccc;
    font-size: 0.85em;
    color: #555;
}
.report-grid-grade { font-weight: 600; }
.report-grid-suprow td { background: #faf5f9; }

/* When a selection is active, empty slots glow to invite a click */
body.alloc-has-selection [data-assign-slot="1"] {
    box-shadow: inset 0 0 0 1px rgba(194, 24, 91, 0.35);
    cursor: pointer;
}
body.alloc-has-selection [data-assign-slot="1"]:hover {
    background-color: rgba(194, 24, 91, 0.08) !important;
    box-shadow: inset 0 0 0 2px var(--tu-primary);
}

/* ---------- Grid area ---------- */
.fs-alloc-grid-area {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.fs-alloc-grid-wrapper {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
}

/* Keep the existing .alloc-grid-table styling; just let it breathe full-width */
.fs-alloc-grid-wrapper .alloc-grid-table {
    margin: 0;
    width: 100%;
}

/* ---------- Court cells: CSS grid for A/B slots + match footer ---------- */
.alloc-court-cell {
    padding: 0 !important;
    vertical-align: top;
    min-width: 220px;
    position: relative;
}

.alloc-court-cell-dual {
    min-width: 320px;
}

.alloc-court-inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "ump-a"
        "ump-b";
    grid-auto-flow: row;
    gap: 1px;
    background: #eceff1;
    padding: 1px;
}

.alloc-court-cell-dual .alloc-court-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "ump-a    mentor-a"
        "ump-b    mentor-b";
}

/* A cancelled cell's content is shorter than active cells. The cell (<td>) is
   position:relative with no padding, so absolutely fill it — then a flex column
   pins the match footer to the bottom, lined up with the other cells' footers. */
.alloc-cell-cancelled .alloc-court-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Sub-headers inside the court TH cell */
.alloc-court-subhead {
    display: flex;
    margin-top: 2px;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0.85;
}
.alloc-court-subhead-ump,
.alloc-court-subhead-mentor {
    flex: 1 1 0;
    text-align: center;
}
.alloc-court-subhead-mentor {
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

/* ---------- A/B slot cells ---------- */
.alloc-slot {
    background: #fff;
    padding: 0.3rem 0.4rem 0.3rem 0.5rem;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    border-left: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s;
    font-size: 0.78rem;
}

.alloc-slot-ump-a     { grid-area: ump-a; }
.alloc-slot-ump-b     { grid-area: ump-b; }
.alloc-slot-mentor-a  { grid-area: mentor-a; background: #f7f4fb; }
.alloc-slot-mentor-b  { grid-area: mentor-b; background: #f7f4fb; }

/* Under-cell role slots (Chunk C): Reserve + association-defined roles.
   Full court width, flowing between the umpire/mentor block and the match
   footer. A small leading caption names the role. */
.alloc-slot-role {
    grid-column: 1 / -1;
    background: #fbf7f9;
}
.alloc-slot-role-label {
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #8a6d79;
    padding: 1px 5px;
    border-radius: 3px;
    background: #f0e6ec;
}
.alloc-slot-role.alloc-slot-empty .alloc-slot-role-label { opacity: 0.75; }

/* ---------- Roles control dropdown (Chunk C) ---------- */
.alloc-roles-menu {
    min-width: 220px;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}
.alloc-roles-menu .dropdown-header {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9e9e9e;
}
.alloc-roles-menu .dropdown-divider {
    margin: 0.35rem 0.25rem;
}
/* Each toggle is a clean row: name on the left, switch on the right. */
.alloc-roles-menu .form-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.5rem;
    margin: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.12s;
}
.alloc-roles-menu .form-check:hover {
    background: rgba(194, 24, 91, 0.06);
}
.alloc-roles-menu .form-check-label {
    order: 1;
    cursor: pointer;
    font-size: 0.82rem;
    color: #333;
}
.alloc-roles-menu .form-check-input {
    order: 2;
    float: none;
    margin: 0 0 0 0.75rem;
    width: 2em;
    height: 1.1em;
    flex-shrink: 0;
    cursor: pointer;
}
/* Branded "on" state — matches the rest of the panel (magenta) */
.alloc-roles-menu .form-check-input:checked {
    background-color: var(--tu-primary);
    border-color: var(--tu-primary);
}
.alloc-roles-menu .form-check-input:focus {
    border-color: var(--tu-primary);
    box-shadow: 0 0 0 0.18rem rgba(194, 24, 91, 0.18);
}

.alloc-slot-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: #eceff1;
    color: #666;
    font-size: 0.62rem;
    font-weight: 700;
    flex-shrink: 0;
}

.alloc-slot-mentor .alloc-slot-tag {
    background: #e8eaf6;
    color: #3949ab;
}

.alloc-slot-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: #333;
    cursor: grab;
}

.alloc-slot-name:active { cursor: grabbing; }

.alloc-slot-status {
    font-size: 0.58rem;
    padding: 1px 4px;
    flex-shrink: 0;
}

/* Confirmation dot (left of name): green tick = confirmed, grey = not yet */
.alloc-slot-confirm {
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
}
.alloc-chip-confirm {
    font-size: 0.72rem;
    line-height: 1;
    flex-shrink: 0;
}
/* Unconfirmed dot: very light grey — visible, but far softer than the green confirmed dot */
.alloc-slot-confirm.text-secondary,
.alloc-chip-confirm.text-secondary {
    color: #ced4da !important;
}

.alloc-slot-note-icon {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.alloc-slot-remove {
    background: none;
    border: none;
    color: #bbb;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}
.alloc-slot-remove:hover {
    color: #C62828;
}

.alloc-slot-empty-hint {
    color: #bdbdbd;
    font-size: 0.9rem;
    margin-left: auto;
}

/* Availability-of-the-allocated-member border colours */
.alloc-slot-filled.alloc-slot-avail-yes  { border-left-color: #2E7D32; }
.alloc-slot-filled.alloc-slot-avail-no   { border-left-color: #F57F17; /* warning — not available but assigned */ }
.alloc-slot-filled.alloc-slot-avail-none { border-left-color: #9e9e9e; }

/* Confirmation highlight — keep it subtle (user chose badge-style, not full-cell) */
.alloc-slot-confirmed .alloc-slot-name { color: #1b5e20; }

/* Empty slot hint / hover */
.alloc-slot-empty {
    color: #9e9e9e;
    font-style: italic;
}
.alloc-slot-empty:hover {
    background-color: rgba(194, 24, 91, 0.05);
}

/* Drop-target highlight from JS */
.alloc-slot-drop-target {
    background-color: rgba(194, 24, 91, 0.12) !important;
    outline: 2px dashed var(--tu-primary);
    outline-offset: -2px;
}

/* ---------- Match details footer (bottom of court cell) ---------- */
.alloc-match-footer {
    grid-column: 1 / -1;
    background: #fafbfc;
    padding: 3px 6px;
    font-size: 0.7rem;
    color: #555;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-height: 20px;
}

.alloc-match-grade {
    font-weight: 600;
    color: var(--tu-secondary);
}

.alloc-match-teams {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alloc-match-empty {
    font-size: 0.7rem;
}

.alloc-match-flag {
    margin-left: auto;
    flex-shrink: 0;
}

/* ---------- Court-level hover actions (kebab menu) ---------- */
.alloc-court-actions {
    position: absolute;
    top: 2px;
    right: 2px;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}
.alloc-court-cell:hover .alloc-court-actions { opacity: 0.85; }
.alloc-court-actions:hover                    { opacity: 1; }

.alloc-court-menu {
    font-size: 0.85rem;
    line-height: 1;
    padding: 1px 4px !important;
}

/* ---------- Supervisor row (BELOW timeslot, legacy style) ---------- */
.alloc-supervisor-row td {
    background: #f3e5f5;
    border-top: none !important;
    border-bottom: 2px solid #ce93d8 !important;
}

.alloc-supervisor-cell {
    padding: 0.35rem 0.6rem !important;
}

.alloc-supervisor-label {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
}

.alloc-add-supervisor {
    color: var(--tu-secondary);
    padding: 0.1rem 0.35rem !important;
    font-size: 0.85rem;
    line-height: 1;
}

.alloc-add-supervisor:hover {
    color: var(--tu-primary);
}

/* Supervisor chip availability borders (parallel to A/B slots) */
.alloc-chip-avail-yes  { box-shadow: inset 3px 0 0 0 #2E7D32; }
.alloc-chip-avail-no   { box-shadow: inset 3px 0 0 0 #F57F17; }
.alloc-chip-avail-none { box-shadow: inset 3px 0 0 0 #9e9e9e; }

/* ---------- Legend strip ---------- */
.alloc-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    padding: 0.5rem 1rem;
    background: #fafbfc;
    border-top: 1px solid #e0e0e0;
    font-size: 0.72rem;
    color: #555;
    flex-shrink: 0;
}

.alloc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.alloc-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.alloc-legend-available    { background: #2E7D32; }
.alloc-legend-unavailable  { background: #C62828; }
.alloc-legend-noresponse   { background: #9e9e9e; }
.alloc-legend-selected     { background: #fce4ec; border-color: var(--tu-primary); border-width: 2px; }

/* ---------- Sidebar external-link indicator (on /allocations nav item) ---------- */
.sidebar-link-external {
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0.55;
    flex-shrink: 0;
}

/* ---------- Responsive: stack on narrow screens ---------- */
@media (max-width: 900px) {
    .fs-alloc-workspace {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .fs-alloc-sidebar {
        max-height: 220px;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }
    .fs-alloc-header {
        gap: 0.4rem;
    }
    .fs-alloc-datebar .alloc-date-select {
        min-width: 200px;
    }
    .fs-alloc-header-meta {
        order: 3;
        flex-basis: 100%;
    }
}

@media (max-width: 600px) {
    .fs-topbar-assoc {
        max-width: 40%;
        font-size: 0.78rem;
    }
    .alloc-legend {
        font-size: 0.68rem;
        gap: 0.7rem;
    }
}

/* ============================================================
   Dev Tools — page comments / bug-capture widget
   ============================================================ */

/* Floating launcher (bottom-right, every page) */
.dc-launch {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--tu-primary) 0%, var(--tu-secondary) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dc-launch:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    color: #fff;
}
.dc-launch i { font-size: 1.05rem; }
@media (max-width: 575px) {
    .dc-launch-label { display: none; }
    .dc-launch { padding: 0.6rem; }
}

/* Drop / paste zone */
.dc-drop {
    border: 2px dashed #c7c7d2;
    border-radius: 8px;
    padding: 1.1rem;
    text-align: center;
    color: #6c757d;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.dc-drop:hover,
.dc-drop-over {
    border-color: var(--tu-primary);
    background: #fde7f1;
}
.dc-drop i { font-size: 1.6rem; display: block; margin-bottom: 0.25rem; }
.dc-drop-text { font-size: 0.85rem; }

/* Thumbnails (modal + management page) */
.dc-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.dc-thumb-wrap { position: relative; }
.dc-thumb {
    height: 84px;
    width: auto;
    max-width: 160px;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 6px;
    display: block;
}
.dc-thumb-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--tu-danger, #C62828);
    color: #fff;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Management page entries */
.dc-entry:last-child {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ---- Dev Comments: enhancements (severity/status, cell ctx, annotation) ---- */

/* Captured grid cell chip */
.dc-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #fde7f1;
    color: var(--tu-primary-dark);
    border: 1px solid #f5b8d4;
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

/* Annotate button on thumbnails */
.dc-thumb-annotate {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--tu-secondary);
    color: #fff;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Console error block on management page */
.dc-errpre {
    background: #fff5f5;
    border: 1px solid #ffd5d5;
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    font-size: 0.75rem;
    color: #a01818;
    white-space: pre-wrap;
    margin-bottom: 0;
    max-height: 220px;
    overflow: auto;
}

/* Annotation editor overlay */
.dc-annotate {
    position: fixed;
    inset: 0;
    z-index: 2200;
    background: rgba(20, 12, 30, 0.92);
    display: flex;
    flex-direction: column;
}
.dc-annotate.d-none { display: none !important; }
.dc-annotate-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: rgba(0, 0, 0, 0.4);
}
.dc-tools, .dc-colours, .dc-annotate-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.dc-annotate-actions { margin-left: auto; }
.dc-tool {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
}
.dc-tool.active { background: var(--tu-primary); border-color: var(--tu-primary); }
.dc-colour {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
}
.dc-colour.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); }
.dc-annotate-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 1rem;
}
#dc-anno-canvas {
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    cursor: crosshair;
    touch-action: none;
}

/* ======================================================================
   Allocation grid — Zip 2 additions
   (calendar popover, court pager, context menus, toast, highlight,
    match-history, drag affordances)
   ====================================================================== */

/* ---------- Calendar popover date picker ---------- */
.alloc-cal-dropdown {
    flex: 0 0 auto;
}
.alloc-cal-toggle {
    display: inline-flex;
    align-items: center;
    max-width: 360px;
}
.alloc-cal-toggle-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.alloc-cal-popover {
    min-width: 280px;
    padding: 0.5rem;
}
.alloc-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.25rem 0.4rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.4rem;
}
.alloc-cal-nav .alloc-cal-prev,
.alloc-cal-nav .alloc-cal-next {
    color: var(--tu-primary);
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 1;
}
.alloc-cal-month-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--tu-secondary);
}
.alloc-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 2px;
}
.alloc-cal-weekdays span {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: #9e9e9e;
    padding: 2px 0;
}
.alloc-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.alloc-cal-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    min-height: 34px;
    border-radius: 6px;
    font-size: 0.8rem;
    text-decoration: none;
}
.alloc-cal-day-pad {
    visibility: hidden;
}
.alloc-cal-day-empty {
    color: #cfcfcf;
}
.alloc-cal-day-has {
    color: #fff;
    background-color: var(--tu-primary);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.alloc-cal-day-has:hover {
    background-color: var(--tu-primary-dark);
    color: #fff;
}
.alloc-cal-day-selected {
    outline: 2px solid var(--tu-secondary);
    outline-offset: 1px;
    background-color: var(--tu-secondary);
}
.alloc-cal-daynum {
    line-height: 1;
}
.alloc-cal-multi {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: #fff;
    color: var(--tu-secondary);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

/* ---------- Court pagination ---------- */
.alloc-court-pager {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.5rem;
}
.alloc-court-pager-label {
    font-size: 0.8rem;
    color: #555;
    white-space: nowrap;
    min-width: 9rem;
    text-align: center;
}

/* ---------- Floating context menu ---------- */
.alloc-ctx-menu {
    position: fixed;
    z-index: 1040;
    min-width: 200px;
    max-width: 280px;
    padding: 0.3rem 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
}
.alloc-ctx-menu[hidden] {
    display: none;
}
.alloc-ctx-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.45rem 0.85rem;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 0.85rem;
    color: #333;
    cursor: pointer;
}
.alloc-ctx-item i {
    width: 1rem;
    text-align: center;
    color: var(--tu-secondary-light);
    flex-shrink: 0;
}
.alloc-ctx-item:hover:not(:disabled),
.alloc-ctx-item:focus-visible:not(:disabled) {
    background-color: rgba(194, 24, 91, 0.08);
    color: var(--tu-primary-dark);
}
.alloc-ctx-item:disabled {
    color: #bdbdbd;
    cursor: default;
}
.alloc-ctx-item:disabled i {
    color: #d0d0d0;
}
.alloc-ctx-danger {
    color: #c62828;
}
.alloc-ctx-danger i {
    color: #c62828;
}
.alloc-ctx-danger:hover:not(:disabled),
.alloc-ctx-danger:focus-visible:not(:disabled) {
    background-color: rgba(198, 40, 40, 0.08);
    color: #b71c1c;
}
.alloc-ctx-divider {
    height: 1px;
    margin: 0.3rem 0;
    background: #eee;
}

/* ---------- Lightweight toast (stub / informational) ---------- */
.alloc-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 1090;
    max-width: 90vw;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.1rem;
    background: var(--tu-secondary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.25;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(45, 27, 78, 0.30);
    opacity: 0;
    transform: translate(-50%, 14px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.alloc-toast i {
    font-size: 1.05rem;
    line-height: 1;
    flex: 0 0 auto;
}
.alloc-toast-success { background: #1e7e4f; box-shadow: 0 10px 30px rgba(30, 126, 79, 0.32); }
.alloc-toast-danger  { background: #c0392b; box-shadow: 0 10px 30px rgba(192, 57, 43, 0.32); }
.alloc-toast-warning { background: #b9770e; box-shadow: 0 10px 30px rgba(185, 119, 14, 0.32); }
.alloc-toast-info    { background: var(--tu-secondary); }
.alloc-toast[hidden] {
    display: none;
}
.alloc-toast-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---------- Highlight Unallocated toggle ---------- */
#highlightUnallocatedBtn[aria-pressed="true"] {
    background-color: var(--tu-primary);
    border-color: var(--tu-primary);
    color: #fff;
}
body.alloc-highlight-unallocated .alloc-slot-empty {
    background-color: rgba(233, 30, 130, 0.12);
    outline: 1px dashed var(--tu-primary);
    outline-offset: -2px;
    border-radius: 3px;
    font-style: normal;
    color: var(--tu-primary-dark);
}
body.alloc-highlight-unallocated .alloc-slot-empty:hover {
    background-color: rgba(233, 30, 130, 0.2);
}

/* ---------- Match-details modal: change history ---------- */
.alloc-match-history {
    border-top: 1px solid #eee;
    padding-top: 0.5rem;
}
.alloc-match-history-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #777;
    background: #fafafa;
}
.alloc-match-history-table td {
    font-size: 0.8rem;
    vertical-align: middle;
}

/* ---------- Drag affordances (placed allocations) ---------- */
.alloc-slot-name[draggable="true"] {
    cursor: grab;
}
.alloc-slot.alloc-dragging,
.alloc-slot-name.alloc-dragging {
    opacity: 0.5;
}
.alloc-slot-name.alloc-dragging {
    cursor: grabbing;
}

/* ---------- Multi-event day picker (Zip 3) ---------- */
/* The multi-event day is a <button>; reset UA chrome so it matches the <a> days. */
button.alloc-cal-day {
    width: 100%;
    border: 0;
    padding: 0;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}
.alloc-cal-daypicker {
    padding: 0.25rem 0.15rem 0.1rem;
}
.alloc-cal-daypicker-nav {
    margin-bottom: 0.35rem;
}
.alloc-cal-daypicker-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 240px;
    overflow-y: auto;
}
.alloc-cal-day-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid #eee;
    border-radius: 8px;
    text-decoration: none;
    color: #2d1b4e;
    background: #fff;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.alloc-cal-day-option:hover {
    background: #faf3f9;
    border-color: var(--tu-primary);
    color: var(--tu-primary-dark);
}
.alloc-cal-day-option-main {
    font-size: 0.85rem;
    font-weight: 600;
}
.alloc-cal-day-option-status {
    font-size: 0.68rem;
    white-space: nowrap;
}
.alloc-cal-day-back {
    color: var(--tu-primary);
}

/* ---------- Match change-history: current row highlight ---------- */
.alloc-match-history-table tr.alloc-match-history-current td {
    background: #faf3f9;
    font-weight: 600;
}

/* ═══════════════ No-reload grid (Zip 4) ═══════════════ */

/* Match footer is click-to-edit when the grid is editable (cursor affordance
   was previously set inline in JS; now handled here as the handler is delegated). */
.fs-alloc-page:not([data-can-edit="0"]) .alloc-match-footer {
    cursor: pointer;
}

/* While an action is in flight the grid is briefly non-interactive so a second
   click can't race the morph. Kept subtle — no visible flicker. */
#allocApp.alloc-busy {
    pointer-events: none;
}
#allocApp.alloc-busy .fs-alloc-workspace {
    opacity: 0.85;
    transition: opacity 0.12s ease;
}

/* ============================================================
   Allocation grid — "light & airy" refinement (Variant A)
   ------------------------------------------------------------
   Added June 2026. Purely cosmetic restyle of the full-screen
   allocation workspace. Everything is scoped under .fs-alloc-page
   so it cannot affect any other page, and nothing here touches
   markup, data- attributes or JS hooks. Delete this whole block
   to revert to the previous look.
   ============================================================ */
.fs-alloc-page {
    --tu-grid-ink: #37003C;        /* brand aubergine — quiet accent only */
    --tu-grid-accent: #FE0058;     /* brand magenta — selection / active only */
    --tu-grid-line: rgba(0, 0, 0, 0.10);
    --tu-grid-line-soft: rgba(0, 0, 0, 0.06);
    background: #F4F4F4;
}

/* Court header: drop the purple gradient band + ALL-CAPS.
   Light, sentence-case, hairline separator, subtle lift when sticky. */
.fs-alloc-page .alloc-grid-head th {
    background: #ffffff;
    color: #2b2b30;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    border-color: var(--tu-grid-line) !important;
    border-bottom: 1px solid var(--tu-grid-line) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Umpires / Mentors sub-labels: quiet, sentence case, no caps */
.fs-alloc-page .alloc-court-subhead {
    opacity: 1;
    color: #9a9aa0;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
}
.fs-alloc-page .alloc-court-subhead-mentor {
    border-left: 1px solid var(--tu-grid-line);
}

/* Time rail: light, with a whisper of brand on the left edge */
.fs-alloc-page .alloc-time-cell {
    background: #ffffff;
    color: #6b6b72;
    border-left: 2px solid var(--tu-grid-ink) !important;
    border-right: 1px solid var(--tu-grid-line) !important;
}

/* Working cells stay white and calm — remove the purple mentor tint */
.fs-alloc-page .alloc-slot-mentor-a,
.fs-alloc-page .alloc-slot-mentor-b {
    background: #ffffff;
}

/* Reserve / additional-role caption: neutral, sentence case */
.fs-alloc-page .alloc-slot-role {
    background: #fafafa;
}
.fs-alloc-page .alloc-slot-role-label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: #7a7a80;
    background: #efeef0;
}

/* Match footer: centred and hierarchical, no fill */
.fs-alloc-page .alloc-match-footer {
    background: transparent;
    border-top: 1px solid var(--tu-grid-line-soft);
    justify-content: center;
    text-align: center;
    color: #6b6b72;
}
.fs-alloc-page .alloc-match-grade {
    color: #2b2b30;
    font-weight: 500;
}
.fs-alloc-page .alloc-match-teams {
    flex: 0 1 auto;
    color: #6b6b72;
}
.fs-alloc-page .alloc-match-flag {
    margin-left: 6px;
}

/* Supervisor strip: soft neutral instead of the purple wash */
.fs-alloc-page .alloc-supervisor-row td {
    background: #eceae8;
    border-top: 1px solid var(--tu-grid-line-soft) !important;
    border-bottom: 1px solid var(--tu-grid-line) !important;
}
.fs-alloc-page .alloc-add-supervisor {
    color: var(--tu-grid-ink);
}
.fs-alloc-page .alloc-add-supervisor:hover {
    color: var(--tu-grid-accent);
}

/* Sidebar member rows: softer corners; accents → brand magenta, used sparingly */
.fs-alloc-page .alloc-official-item {
    border-radius: 8px;
}
.fs-alloc-page .alloc-member-selected {
    background: rgba(254, 0, 88, 0.07) !important;
    outline-color: var(--tu-grid-accent);
}
.fs-alloc-page .alloc-off-count-inline {
    color: var(--tu-grid-accent);
}
.fs-alloc-page .alloc-off-count {
    background: var(--tu-grid-accent);
}
.fs-alloc-page .alloc-off-assigned {
    box-shadow: inset -3px 0 0 0 var(--tu-grid-accent);
}

/* Hover tints realigned from the panel pink to brand magenta */
.fs-alloc-page .alloc-cell:hover,
.fs-alloc-page .alloc-slot-empty:hover {
    background-color: rgba(254, 0, 88, 0.04);
}

/* Legend: keep the semantic status colours; align "selected" to brand */
.fs-alloc-page .alloc-legend-selected {
    background: rgba(254, 0, 88, 0.10);
    border-color: var(--tu-grid-accent);
}

/* ============================================================
   Allocation grid — refinement round 2 (structure, to match mockup)
   ------------------------------------------------------------
   Card-style court cells, clean sidebar rows, refined top bar and
   supervisor badge. Still cosmetic; still scoped to the grid.
   Pairs with the icon swap in partials/allocation-grid.php.
   Delete this block (and revert that partial) to roll back.
   ============================================================ */

/* --- Top bar: solid aubergine instead of the purple→magenta gradient --- */
body .fs-topbar {
    background: #37003C;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
body .fs-topbar-brand i {
    color: #FE0058;
}

/* --- Turn the bordered table into separated cards --- */
.fs-alloc-page .alloc-grid-table {
    border-collapse: separate !important;
    border-spacing: 8px 10px;
}
/* Drop Bootstrap's table-bordered cell borders; we draw card edges instead.
   No !important here, so semantic borders (e.g. flagged) keep their own. */
.fs-alloc-page .alloc-grid-table > :not(caption) > * > * {
    border: 0;
}

/* Court header = its own rounded card sitting above the column */
.fs-alloc-page .alloc-grid-head th.alloc-court-col {
    border: 1px solid var(--tu-grid-line) !important;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* "Time" header + time cells read as a quiet rail, not cards. The sticky header
   must be OPAQUE (in the canvas colour) so the time cells scrolling up underneath
   it are hidden instead of bleeding through; the magenta rail edge is carried
   through it so the left edge stays continuous to the top. */
.fs-alloc-page .alloc-grid-head th.alloc-time-col {
    background: #F4F4F4 !important;
    border-left: 2px solid #37003C !important;
    box-shadow: none !important;
    color: #9a9aa0;
    z-index: 3;
}
.fs-alloc-page .alloc-time-cell {
    background: transparent !important;
    border: 0 !important;
    border-left: 2px solid #37003C !important;
    border-radius: 0;
}

/* Each court (per timeslot) = a white rounded card */
.fs-alloc-page td.alloc-court-cell {
    padding: 0 !important;
    background: #ffffff;
    border: 1px solid var(--tu-grid-line) !important;
    border-radius: 10px;
    overflow: hidden;
}
/* Flagged cell: rely on the footer flag icon only — no amber edge or tint */
.fs-alloc-page td.alloc-court-cell.alloc-cell-flagged {
    border: 1px solid var(--tu-grid-line) !important;
    background: #ffffff !important;
}

/* Supervisor strip = its own card (content cell only, not the spanned time rail) */
.fs-alloc-page .alloc-supervisor-row td.alloc-supervisor-cell {
    border: 1px solid var(--tu-grid-line) !important;
    border-radius: 10px;
}

/* --- Sidebar member rows: drop the edge brackets, keep the dot --- */
.fs-alloc-page .alloc-official-item {
    border-left-width: 1px;
    border-color: transparent;
}
.fs-alloc-page .alloc-off-available,
.fs-alloc-page .alloc-off-unavailable,
.fs-alloc-page .alloc-off-noresponse {
    border-left-color: transparent;
}
.fs-alloc-page .alloc-off-assigned {
    box-shadow: none;
}

/* --- Supervisor badge: quiet aubergine chip, not a bold purple pill --- */
.fs-alloc-page .alloc-supervisor-label {
    background-color: rgba(55, 0, 60, 0.07) !important;
    color: #37003C !important;
    font-weight: 500;
}

/* ============================================================
   Allocation grid — refinement round 3 (availability highlight)
   ------------------------------------------------------------
   Consistent grammar: magenta = the item you clicked, green = the
   available match. Works both ways — pick a member and their
   available times glow green; pick a timeslot and the members
   available then glow green, the rest fade back.
   ============================================================ */

/* The member you clicked to place — magenta (active selection) */
.fs-alloc-page .alloc-member-selected {
    background: #fde7ef !important;
    outline: none !important;
    border-color: #FE0058 !important;
    border-left: 3px solid #FE0058 !important;
}

/* The timeslot you clicked to inspect — magenta (active selection) */
.fs-alloc-page .alloc-time-cell.alloc-time-active {
    background: #fde7ef !important;
    border-left: 3px solid #FE0058 !important;
    box-shadow: none !important;
    color: #b2003e !important;
    font-weight: 500;
}

/* Times the selected member is available for — green, lit up */
.fs-alloc-page .alloc-time-cell.alloc-time-avail {
    background: #e7f5ec !important;
    border-left: 3px solid #2f8a4f !important;
    box-shadow: none !important;
    color: #1f6b3a !important;
    font-weight: 500;
}

/* Members available for the selected timeslot — green, lit up */
.fs-alloc-page .alloc-off-time-match {
    background: #e7f5ec !important;
    outline: none !important;
    border-color: transparent !important;
    border-left: 3px solid #2f8a4f !important;
}

/* Everything not matching the current selection fades back */
.fs-alloc-page .alloc-member-dimmed {
    opacity: 0.4;
}

/* ============================================================
   Allocation grid — refinement round 4 (selection polish)
   ------------------------------------------------------------
   When a member is selected, don't outline every empty court/reserve
   slot — an empty slot is obviously empty. Keep the pointer cursor
   and a quiet cue only on the slot actually being hovered. The
   supervisor "+" button keeps its original glow.
   ============================================================ */
body.alloc-has-selection .alloc-slot[data-assign-slot="1"] {
    box-shadow: none;
}
body.alloc-has-selection .alloc-slot[data-assign-slot="1"]:hover {
    background-color: rgba(254, 0, 88, 0.06) !important;
    box-shadow: inset 0 0 0 2px #FE0058;
}

/* ============================================================
   Allocation grid — refinement round 5 (member allocation map)
   ------------------------------------------------------------
   When a member is selected, every slot they are already
   allocated to gets a green background (no border) so you can
   see their existing placements at a glance before re-placing.
   Tagged from JS via .alloc-slot-mine on the slot.
   ============================================================ */
.fs-alloc-page .alloc-slot.alloc-slot-mine {
    background: #e7f5ec !important;
}

/* ============================================================
   Allocation grid — refinement round 8 (sticky header anchor)
   ------------------------------------------------------------
   border-spacing adds a 10px strip ABOVE the sticky header row, so for
   the first ~10px of scroll the header drifted up that strip before
   locking at top:0. Pull the table up by that amount so the header sits
   flush at the top of the scroll area with nowhere to travel. The 10px
   gaps BETWEEN timeslot rows are unaffected.
   ============================================================ */
.fs-alloc-grid-wrapper .alloc-grid-table {
    margin-top: -10px;
}

/* ============================================================
   Allocation grid — refinement round 9 (snap-scroll by timeslot)
   ------------------------------------------------------------
   Snap the vertical scroll so each gesture lands a WHOLE timeslot at
   the top of the grid, never half a slot. Each timeslot's court row is
   a snap point; its supervisor row rides along beneath it. scroll-stop
   "always" means one scroll = one timeslot (no skipping). scroll-padding
   lands the snapped row just below the sticky header.

   Tuning notes: switch `mandatory` → `proximity` for a gentler feel;
   nudge scroll-padding-top if the snapped timeslot tucks under the
   header (increase) or leaves too big a gap (decrease).
   ============================================================ */
.fs-alloc-grid-wrapper {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 52px;
    scroll-behavior: smooth;   /* glide between snap points instead of stepping */
}
.fs-alloc-grid-wrapper .alloc-court-row {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* ============================================================
   Allocation grid — refinement round 10
   (gap-fill helper + completion pill)
   ============================================================ */

/* ---- Completion pill (toolbar): coverage · unconfirmed · against-availability ---- */
.fs-alloc-page .alloc-completion {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    padding: 2px;
    background: #ffffff;
    border: 1px solid var(--tu-grid-line);
    border-radius: 8px;
}
.fs-alloc-page .alloc-comp-seg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    color: #37003C;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.fs-alloc-page .alloc-comp-seg i { font-size: 0.82rem; opacity: 0.85; }
.fs-alloc-page .alloc-comp-seg:hover { background: #f4eef5; }
.fs-alloc-page .alloc-comp-seg.is-warn  { color: #B45309; }   /* unconfirmed > 0 */
.fs-alloc-page .alloc-comp-seg.is-warn:hover  { background: #fdf3e6; }
.fs-alloc-page .alloc-comp-seg.is-alert { color: #C62828; }   /* against availability > 0 */
.fs-alloc-page .alloc-comp-seg.is-alert:hover { background: #fcebea; }

/* ---- Gap-fill: the picked empty slot reads as "selected for allocation" (magenta) ---- */
.fs-alloc-page .alloc-slot.alloc-slot-fill-target {
    box-shadow: inset 0 0 0 2px var(--tu-grid-accent) !important;
    background: #fde7ef !important;
}
/* A member already rostered at that timeslot — clearly not a candidate */
.fs-alloc-page .alloc-off-booked { opacity: 0.4; }

/* ---- Pill jump: brief attention pulse on the targeted slots/cells ---- */
@keyframes alloc-comp-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(254, 0, 88, 0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(254, 0, 88, 0); }
    100% { box-shadow: 0 0 0 0 rgba(254, 0, 88, 0); }
}
.fs-alloc-page .alloc-comp-pulse {
    animation: alloc-comp-pulse 1.1s ease-out 2;
    border-radius: 6px;
    position: relative;
    z-index: 1;
}

/* round 10 addendum: the unallocated figure shows an "on" state while its
   grid highlight is active (mirrors the old Unallocated button's pressed look) */
.fs-alloc-page .alloc-comp-seg.is-active {
    background: var(--tu-primary);
    color: #fff;
}
.fs-alloc-page .alloc-comp-seg.is-active i { opacity: 1; }
.fs-alloc-page .alloc-comp-seg.is-active:hover { background: var(--tu-primary); }

/* round 10 addendum: per-role breakdown under the unallocated figure
   (shows on hover, and stays pinned while the highlight is switched on) */
.fs-alloc-page .alloc-comp-unalloc-wrap { position: relative; display: inline-flex; }
.fs-alloc-page .alloc-comp-breakdown {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 158px;
    background: #ffffff;
    border: 1px solid var(--tu-grid-line);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
    padding: 6px;
    z-index: 30;
}
.fs-alloc-page .alloc-comp-unalloc-wrap:hover .alloc-comp-breakdown,
.fs-alloc-page .alloc-completion.is-pinned .alloc-comp-breakdown { display: block; }
.fs-alloc-page .alloc-comp-bd-head {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a7d8f;
    font-weight: 700;
    padding: 2px 6px 5px;
}
.fs-alloc-page .alloc-comp-bd-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 3px 6px;
    font-size: 0.8rem;
    color: #37003C;
}
.fs-alloc-page .alloc-comp-bd-row b { font-weight: 700; }

/* ── Refinement: space out the member-row note icons ──────────────────
   The confirmed / comment / admin-note icons sat flush together, so a
   native title tooltip from the neighbouring icon would show when you
   thought you were over a different one. A small left margin puts empty
   (non-hover) space between each icon's hover zone. */
.alloc-off-meta i.bi {
    margin-left: 0.45rem;
    vertical-align: -1px;
}

/* ── Court-cell menu handle (⋮ at the end of each cell's footer row) ──
   Always present (when editable) so the court menu — cancel match, flag,
   mark not-in-use, notes — is reachable on desktop and tablet, with or
   without the match-details module. Opens on click/tap and right-click. */
.alloc-cell-menu-btn {
    flex: 0 0 auto;
    margin-left: auto;            /* pin to the end of the footer row */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #b0a9b8;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.alloc-cell-menu-btn i { font-size: 0.95rem; }
.alloc-court-cell:hover .alloc-cell-menu-btn { color: #6b6470; }
.alloc-cell-menu-btn:hover,
.alloc-cell-menu-btn:focus-visible {
    color: var(--tu-grid-ink, #37003C);
    background: rgba(55, 0, 60, 0.08);
    outline: none;
}

/* ── Tappable slot confirmation icon (admin) ─────────────────────────── */
.fs-alloc-page .alloc-slot-confirm-btn { cursor: pointer; transition: transform .08s ease; }
.fs-alloc-page .alloc-slot-confirm-btn:hover { transform: scale(1.2); }

/* ── Selected-member action bar (top of sidebar) ─────────────────────── */
.fs-alloc-page .fs-alloc-actionbar {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .4rem .5rem;
    margin-bottom: .4rem;
    background: var(--tu-grid-ink, #37003C);
    color: #fff;
    border-radius: .4rem;
}
.fs-alloc-page .fs-alloc-actionbar[hidden] { display: none; }   /* beats the flex rule above */
.fs-alloc-page .fs-alloc-actionbar-name {
    font-weight: 600;
    font-size: .76rem;
    line-height: 1.15;
    opacity: .95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fs-alloc-page .fs-alloc-actionbar-btns { display: flex; gap: .3rem; }
.fs-alloc-page .fs-alloc-actionbar-btns .btn {
    flex: 1;
    font-size: .72rem;
    padding: .18rem .4rem;
    white-space: nowrap;
}

/* ── Report Bug widget ─────────────────────────────────────── */
.rb-launch {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1080;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 24px;
    padding: 10px 16px;
    background: var(--tu-primary);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    cursor: pointer;
    font-size: .9rem;
}
.rb-launch:hover { background: var(--tu-primary-dark); }
.rb-drop {
    border: 1px dashed #ccc;
    border-radius: 8px;
    padding: 14px;
    text-align: center;
    color: #888;
    cursor: pointer;
    font-size: .85rem;
}
.rb-drop:hover, .rb-drop-over { border-color: var(--tu-primary); color: var(--tu-primary); }