/* EPC theme for Bootstrap 5: cool grays, blue accents, soft cards. */

:root,
[data-bs-theme="light"] {
    --bs-font-sans-serif: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-bg: #f4f7fb;
    --bs-body-bg-rgb: 244, 247, 251;
    --bs-body-color: #0f172a;
    --bs-secondary-color: #64748b;
    --bs-border-color: #e6ebf2;
    --bs-border-radius: 0.5rem;
    --bs-border-radius-lg: 1rem;
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: #2563eb;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: #1d4ed8;
    --bs-link-hover-color-rgb: 29, 78, 216;
    --epc-surface: #ffffff;
    --epc-hover: #f1f5f9;
    --epc-primary-soft: #eaf1ff;
    --epc-hero-tint: #e3edff;
    --epc-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.05);
    --epc-gold-bg: #fdf0c4;
    --epc-gold: #92610a;
    --epc-silver-bg: #e9edf2;
    --epc-silver: #475569;
    --epc-bronze-bg: #fde3cf;
    --epc-bronze: #9a4a12;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #0b1120;
    --bs-body-bg-rgb: 11, 17, 32;
    --bs-body-color: #e2e8f0;
    --bs-secondary-color: #94a3b8;
    --bs-border-color: #1e293b;
    --bs-primary: #60a5fa;
    --bs-primary-rgb: 96, 165, 250;
    --bs-link-color: #60a5fa;
    --bs-link-color-rgb: 96, 165, 250;
    --bs-link-hover-color: #93c5fd;
    --bs-link-hover-color-rgb: 147, 197, 253;
    --epc-surface: #111827;
    --epc-hover: #1e293b;
    --epc-primary-soft: rgba(96, 165, 250, 0.14);
    --epc-hero-tint: rgba(37, 99, 235, 0.22);
    --epc-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --epc-gold-bg: rgba(250, 204, 21, 0.18);
    --epc-gold: #fcd34d;
    --epc-silver-bg: rgba(148, 163, 184, 0.18);
    --epc-silver: #cbd5e1;
    --epc-bronze-bg: rgba(251, 146, 60, 0.18);
    --epc-bronze: #fdba74;
}

body {
    -webkit-font-smoothing: antialiased;
}

/* Buttons */

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.9);
    --bs-btn-hover-border-color: transparent;
}

.btn-icon {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--epc-hover);
    --bs-btn-active-bg: var(--epc-hover);
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-padding-y: 0.375rem;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
}

/* App shell: sidebar beside the page from lg up, an offcanvas panel below. */

.app-main {
    min-width: 0;
}

.sidebar {
    --bs-offcanvas-width: 16rem;
    --bs-offcanvas-bg: var(--epc-surface);
}

.sidebar-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (min-width: 992px) {
    .app {
        display: flex;
        min-height: 100vh;
    }

    .app-main {
        flex: 1;
    }

    .sidebar-column {
        flex: 0 0 16rem;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        scrollbar-width: thin;
        background: var(--epc-surface);
        border-right: 1px solid var(--bs-border-color);
    }

    [data-sidebar="collapsed"] .sidebar-column {
        display: none;
    }
}

.sidebar .offcanvas-body {
    padding: 1rem 0.875rem;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 0.5rem 1rem;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: inherit;
    text-decoration: none;
}

.sidebar-brand img {
    height: 2.5rem;
}

.sidebar-nav .nav-heading {
    padding: 0.875rem 0.75rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.625rem;
    font-size: 0.9rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

.sidebar-nav a .bi {
    font-size: 1.05rem;
    color: var(--bs-secondary-color);
}

.sidebar-nav a:hover {
    background: var(--epc-hover);
}

.sidebar-nav li.active > a {
    background: var(--epc-primary-soft);
    color: var(--bs-primary);
    font-weight: 600;
}

.sidebar-nav li.active > a .bi {
    color: var(--bs-primary);
}

.topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4rem;
    padding: 0.625rem 1.5rem;
    background: rgba(var(--bs-body-bg-rgb), 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bs-border-color);
}

.topbar-divider {
    align-self: stretch;
    width: 1px;
    margin: 0.375rem 0;
    background: var(--bs-border-color);
}

.page-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.page-title .bi {
    font-size: 1.2rem;
}

.season-select {
    width: auto;
    max-width: 12rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    border-radius: 0.625rem;
    background-color: var(--epc-surface);
    font-size: 0.9rem;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.375rem;
    border: none;
    color: var(--bs-body-color);
}

.user-menu:hover {
    background: var(--epc-hover);
}

.avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: var(--epc-surface);
    font-weight: 600;
}

.dropdown-menu {
    --bs-dropdown-bg: var(--epc-surface);
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-link-hover-bg: var(--epc-hover);
    --bs-dropdown-font-size: 0.9rem;
    box-shadow: var(--epc-shadow);
}

.dropdown-item .bi {
    margin-right: 0.375rem;
}

.content {
    padding: 1.5rem;
}

@media (max-width: 575.98px) {
    .topbar {
        gap: 0.375rem;
        padding: 0.5rem 0.75rem;
    }

    .season-select {
        max-width: 8.5rem;
    }

    .content {
        padding: 1rem 0.75rem;
    }
}

/* Cards */

.card {
    --bs-card-bg: var(--epc-surface);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-inner-border-radius: var(--bs-border-radius-lg);
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    box-shadow: var(--epc-shadow);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 var(--bs-card-spacer-x);
    padding: 1.125rem 0 0.875rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.card-header .card-icon {
    font-size: 1.35rem;
    color: var(--bs-primary);
}

.card-header h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.card-header .card-more {
    margin-left: auto;
    padding: 0.25rem 0.375rem;
    border-radius: var(--bs-border-radius);
    color: var(--bs-secondary-color);
}

.card-header .card-more:hover {
    background: var(--epc-hover);
    color: var(--bs-body-color);
}

/* Tables */

.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--epc-hover);
    --bs-table-border-color: var(--bs-border-color);
    font-size: 0.9rem;
}

.table th {
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--epc-hover);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.rank-1 { background: var(--epc-gold-bg); color: var(--epc-gold); }
.rank-2 { background: var(--epc-silver-bg); color: var(--epc-silver); }
.rank-3 { background: var(--epc-bronze-bg); color: var(--epc-bronze); }

.ranked-table td,
.ranked-table th {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    vertical-align: middle;
}

.ranked-table tr.home > * {
    background: var(--epc-primary-soft);
    color: var(--bs-primary);
    font-weight: 700;
}

.ranked-table tr.home .rank {
    background: rgba(var(--bs-primary-rgb), 0.18);
    color: var(--bs-primary);
}

.ranked-table tr.home > :first-child { border-radius: 0.5rem 0 0 0.5rem; }
.ranked-table tr.home > :last-child { border-radius: 0 0.5rem 0.5rem 0; }

.division-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
}

.division-title .bi {
    color: var(--bs-primary);
}

.division + .division {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Dashboard */

/* The header graphic is the background of a layer covering the right of the card (::before).
   `contain` scales it to fill that layer as far as it can without ever leaving the card:
   by width on narrower cards, by height on wide ones. */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(100deg, var(--epc-surface) 38%, var(--epc-hero-tint) 100%);
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: max(80%, 30rem);
    max-width: 100%;
    background: url("../images/epc-header-graphic.webp") right bottom / contain no-repeat;
    opacity: 0.5;
    pointer-events: none;
}

.hero .card-body {
    --crest-size: 5rem;
    --crest-gap: 1.25rem;
    position: relative;
    padding: 1.75rem 2rem;
}

/* On phones the chips stack, so the graphic spans the card below them. */
@media (max-width: 575.98px) {
    .hero::before {
        width: 100%;
    }

    .hero .card-body {
        padding: 1.5rem 1.25rem 7rem;
    }
}

.hero-heading {
    display: flex;
    align-items: center;
    gap: var(--crest-gap);
    margin-bottom: 0.75rem;
}

.hero-heading .hero-title {
    margin-bottom: 0;
}

.hero-crest {
    flex: none;
    width: var(--crest-size);
    height: var(--crest-size);
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.15));
}

/* Line the advisor and join-code rows up with the text beside the crest. */
.hero-heading:has(.hero-crest) ~ .hero-meta {
    padding-left: calc(var(--crest-size) + var(--crest-gap));
}

@media (max-width: 575.98px) {
    .hero .card-body {
        --crest-size: 3.5rem;
        --crest-gap: 0.875rem;
    }
}

.eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.hero-title {
    margin: 0.25rem 0 0.75rem;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    color: var(--bs-secondary-color);
}

.hero-meta .bi {
    color: var(--bs-primary);
}

.join-code {
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--bs-body-color);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 12rem;
    padding: 0.75rem 1.25rem 0.75rem 0.875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.875rem;
    background: var(--epc-surface);
    box-shadow: var(--epc-shadow);
}

.chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--epc-primary-soft);
    color: var(--bs-primary);
    font-size: 1.1rem;
}

.chip-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.chip-value {
    font-weight: 700;
}

.points-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1.25rem 0;
    text-align: center;
}

.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--epc-primary-soft);
    color: var(--bs-primary);
    font-size: 2rem;
}

.points-label {
    margin-top: 0.75rem;
    font-weight: 700;
}

.points-value {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.sparkline {
    display: block;
    width: 100%;
    height: 4rem;
    margin-top: auto;
    color: var(--bs-primary);
}

.status-dot {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-left: 0.375rem;
    border-radius: 50%;
    background: #10b981;
    vertical-align: middle;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 16rem;
    padding: 2rem 1rem;
    text-align: center;
}

.empty-state h3 {
    margin: 0.75rem 0 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.empty-state p {
    max-width: 18rem;
    margin: 0;
    color: var(--bs-secondary-color);
}

.matches li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 0.9rem;
}

.matches li:last-child {
    border-bottom: none;
}

.date-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 3rem;
    padding: 0.25rem 0;
    border-radius: 0.625rem;
    background: var(--epc-primary-soft);
    color: var(--bs-primary);
    line-height: 1.1;
}

.date-tile .month {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.date-tile .day {
    font-size: 1.15rem;
    font-weight: 800;
}

/* Sortable tables (js/sortable-table.js) */

table[data-sortable] th button {
    all: unset;
    cursor: pointer;
    white-space: nowrap;
}

table[data-sortable] th button:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

table[data-sortable] th button .bi {
    font-size: 0.75em;
    opacity: 0.6;
}

/* ---------------------------------------------------------------------------
   Site components (see docs/ui-style-guide.md for the markup each one expects)
   --------------------------------------------------------------------------- */

/* Page header: breadcrumb, title, optional subtitle, actions on the right. */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.page-header h1 {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.page-header .page-subtitle {
    margin: 0.25rem 0 0;
    color: var(--bs-secondary-color);
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.breadcrumb {
    --bs-breadcrumb-margin-bottom: 0.25rem;
    --bs-breadcrumb-divider-color: var(--bs-secondary-color);
    --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
    font-size: 0.85rem;
}

.breadcrumb a {
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--bs-primary);
}

/* Sections inside a page */

.section-title {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.card-header .card-header-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* Tables in cards: a card with .card-table holds a full-width table. */

.card-table .table {
    margin: 0;
}

.card-table .table > :not(caption) > * > :first-child {
    padding-left: var(--bs-card-spacer-x);
}

.card-table .table > :not(caption) > * > :last-child {
    padding-right: var(--bs-card-spacer-x);
}

.card-table .table thead th {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background: var(--epc-hover);
    border-bottom-color: var(--bs-border-color);
}

.card-table .table thead th:first-child {
    border-top-left-radius: var(--bs-border-radius-lg);
}

.card-table .table thead th:last-child {
    border-top-right-radius: var(--bs-border-radius-lg);
}

.card-table .table tbody tr:last-child > * {
    border-bottom: none;
}

.table td,
.table th {
    vertical-align: middle;
}

/* Names in tables that link to a profile read as plain text until hovered. */
.table a.text-reset {
    text-decoration: none;
}

.table a.text-reset:hover {
    color: var(--bs-primary) !important;
    text-decoration: underline;
}

.actions-col {
    width: 1%;
    white-space: nowrap;
    text-align: end;
}

/* A column only as wide as its contents (a button, a rank), however wide the table gets. */
.fit-col {
    width: 1%;
    white-space: nowrap;
}

/* Detail lists (Details and Delete pages) */

.detail-list {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    margin: 0;
}

.detail-list dt,
.detail-list dd {
    margin: 0;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.detail-list dt {
    padding-right: 1.5rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.detail-list dt:last-of-type,
.detail-list dd:last-of-type {
    border-bottom: none;
}

@media (max-width: 575.98px) {
    .detail-list {
        grid-template-columns: 1fr;
    }

    .detail-list dt {
        padding-bottom: 0;
        border-bottom: none;
    }
}

/* Forms */

.form-card {
    max-width: 44rem;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 600;
}

.form-control,
.form-select {
    border-radius: 0.625rem;
    background-color: var(--epc-surface);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.6);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-text {
    color: var(--bs-secondary-color);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

/* ASP.NET validation classes (server-rendered and aspnet-client-validation) */

.input-validation-error,
.input-validation-error:focus {
    border-color: var(--bs-form-invalid-border-color);
}

.input-validation-error:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.2);
}

.field-validation-error {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--bs-form-invalid-color);
}

.field-validation-valid,
.validation-summary-valid {
    display: none;
}

.validation-summary-errors {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-danger-border-subtle);
    border-radius: var(--bs-border-radius);
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 1.25rem;
}

/* Alerts, nav pills, badges */

.alert {
    --bs-alert-border-radius: 0.75rem;
}

.nav-pills {
    --bs-nav-pills-border-radius: 0.625rem;
    --bs-nav-pills-link-active-bg: var(--epc-primary-soft);
    --bs-nav-pills-link-active-color: var(--bs-primary);
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--bs-primary);
    gap: 0.125rem;
}

.nav-pills .nav-link.active {
    font-weight: 600;
}

/* Dialogs (js/dialogs.js) */

.modal {
    --bs-modal-bg: var(--epc-surface);
    --bs-modal-border-radius: 1rem;
}

.epc-dialog-icon {
    margin-bottom: 0.75rem;
    font-size: 2.75rem;
    line-height: 1;
}

/* DataTables 2 with Bootstrap 5 (D1) */

div.dt-container .dt-search input,
div.dt-container .dt-length select {
    border-radius: 0.625rem;
}

div.dt-container .dt-buttons .btn {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-font-size: 0.85rem;
}

div.dt-container .dt-paging .page-link {
    border-radius: 0.5rem;
    margin: 0 0.125rem;
}

.pagination {
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-color: var(--bs-body-color);
    --bs-pagination-bg: var(--epc-surface);
}

/* Tom Select (multi-select) */

.ts-wrapper.form-select,
.ts-wrapper.form-control {
    border-radius: 0.625rem;
}

/* Sign-in and other pages without the sidebar (_LayoutAuth) */

.auth-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 100vh;
    padding: 2rem 1rem 3rem;
    background:
        url("../images/epc-header-graphic.webp") center bottom / min(70rem, 140%) auto no-repeat,
        linear-gradient(180deg, var(--bs-body-bg) 40%, var(--epc-hero-tint) 100%);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: inherit;
    text-decoration: none;
}

.auth-brand img {
    height: 3rem;
}

.auth-card {
    width: 100%;
    max-width: 28rem;
}

.auth-card.auth-card-wide {
    max-width: 40rem;
}

.auth-card .card-body {
    padding: 2rem;
}

.auth-card h1 {
    font-size: 1.5rem;
    font-weight: 800;
}

.auth-shell .theme-corner {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
}

.btn-lichess {
    --bs-btn-bg: #262421;
    --bs-btn-color: #fff;
    --bs-btn-border-color: #262421;
    --bs-btn-hover-bg: #3a3733;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: #3a3733;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-lichess img {
    height: 1.25rem;
}

/* Print: drop the shell so rules and exports print cleanly. */

@media print {
    .sidebar-column,
    .topbar,
    .page-actions,
    .no-print {
        display: none !important;
    }

    .content {
        padding: 0;
    }

    .card {
        box-shadow: none;
    }
}

.join-code-input {
    max-width: 14rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Anchor links (e.g. the rules contents) land below the sticky top bar. */
html {
    scroll-padding-top: 5rem;
}

/* Keep line breaks in user-entered text such as message descriptions. */
.pre-line {
    white-space: pre-line;
}

/* Matchup columns (Matches list): home | vs | away, each aligned down the table. */
.table .matchup-vs {
    width: 1%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    text-align: center;
}

/* Roster setup: an empty list still needs a usable drop area (SortableJS). */
.roster-setup ol,
.roster-setup ul {
    min-height: 3.5rem;
}

/* Player card: a small popover under (or over) a player's name. Opened by js/player-card.js anywhere a name has
   data-player-card, and by the live match page for its boards. */

.player-card {
    position: absolute;
    z-index: 1080;
    min-width: 13rem;
    max-width: min(18rem, calc(100vw - 1rem));
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--epc-surface);
    box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.18);
    font-size: 0.85rem;
}

.player-card[hidden] {
    display: none;
}

.player-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
}

.player-card-lichess {
    display: inline-block;
    margin-top: 0.125rem;
    text-decoration: none;
}

.player-card-lichess .bi {
    font-size: 0.75em;
}

.player-card-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0.625rem 0 0;
    padding-top: 0.625rem;
    border-top: 1px solid var(--bs-border-color);
}

.player-card-details dt {
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.player-card-details dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.player-card-profile {
    display: block;
    margin-top: 0.625rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color);
    font-weight: 600;
    text-decoration: none;
}

.player-card-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    color: var(--bs-secondary-color);
}

.player-card-school {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    color: inherit;
    text-decoration: none;
    text-align: right;
}

.player-card-school:hover {
    text-decoration: underline;
}

.player-card-crest {
    flex: none;
    object-fit: contain;
}

[data-player-card]:not(a) {
    cursor: pointer;
}

/* Dashboard: an upcoming match links to its match page, underlined only on hover. */
.upcoming-link {
    text-decoration: none;
}

.upcoming-link:hover,
.upcoming-link:focus-visible {
    text-decoration: underline;
}

/* League setup "Copy from": the checkbox column stays narrow. */
.season-copy-table .season-copy-check {
    width: 2rem;
}

/* Scrimmages: the same badge everywhere a scrimmage is listed or shown. */
.scrimmage-badge {
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
    border: 1px dashed var(--bs-info-border-subtle);
    font-weight: 600;
    vertical-align: middle;
}

h1 .scrimmage-badge {
    font-size: 0.8rem;
}

/* Team manager → Scrimmages: each challenge's date, side, place and clock on one wrapping line. */
.scrimmage-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.875rem 1.25rem;
}

.scrimmage-confirmed {
    box-shadow: inset 4px 0 0 var(--bs-success);
}

.scrimmage-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    font-size: 0.875rem;
}

.scrimmage-note {
    margin: 0;
    padding: 0.375rem 0.75rem;
    border-left: 3px solid var(--bs-border-color);
    font-size: 0.875rem;
    white-space: pre-line;
    color: var(--bs-secondary-color);
}

/* League setup → Matches → Import schedule: a mistake is a red cell with its reason under the value. */
.import-abbreviations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.import-abbreviations code {
    display: inline-block;
    min-width: 3.25rem;
    font-weight: 700;
}

.import-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.import-summary-item {
    padding: 0.375rem 0.75rem;
    border-radius: var(--bs-border-radius);
    background: var(--epc-hover);
}

.import-table td,
.import-table th {
    vertical-align: top;
}

.import-table .import-row-error > th {
    box-shadow: inset 4px 0 0 var(--bs-danger);
    color: var(--bs-danger-text-emphasis);
}

.import-table .import-cell-error {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    font-weight: 600;
}

.import-table .import-cell-warning {
    background: var(--bs-warning-bg-subtle);
}

.import-note {
    max-width: 22rem;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    font-weight: 400;
    white-space: normal;
}

.import-cell-warning .import-note {
    color: var(--bs-warning-text-emphasis);
}

.import-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: transparent;
}

/* ---------------------------------------------------------------------------
   League announcements (js/announcements.js, Views/Shared/Announcements)
   --------------------------------------------------------------------------- */

.min-w-0 {
    min-width: 0;
}

/* Kind colours: alert red, notification blue, news green. */
.kind-alert { --epc-kind: var(--bs-danger); --epc-kind-bg: var(--bs-danger-bg-subtle); }
.kind-notification { --epc-kind: var(--bs-primary); --epc-kind-bg: var(--epc-primary-soft); }
.kind-news { --epc-kind: var(--bs-success); --epc-kind-bg: var(--bs-success-bg-subtle); }

.announcement-kind {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--epc-kind);
    font-weight: 600;
    font-size: 0.875rem;
}

/* Navbar bell */
.announcement-bell .btn-icon {
    position: relative;
}

.bell-badge {
    position: absolute;
    top: 0.1rem;
    right: 0.05rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--bs-danger);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}

.announcement-dropdown {
    width: min(22rem, calc(100vw - 2rem));
    padding: 0;
    overflow: hidden;
}

.announcement-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.announcement-dropdown-list {
    max-height: min(24rem, 60vh);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.announcement-dropdown-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

.announcement-dropdown-item:hover,
.announcement-dropdown-item:focus-visible {
    background: var(--epc-hover);
}

.announcement-dropdown-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.announcement-dropdown-item.unread .announcement-dropdown-title {
    font-weight: 700;
}

.announcement-dropdown-meta {
    display: block;
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
}

.announcement-dropdown-empty {
    padding: 1.25rem 1rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

.announcement-dropdown-footer {
    display: block;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

/* Lists (dashboard panel, archive) */
.announcement-list {
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
}

.announcement-item {
    position: relative;
    display: flex;
    gap: 0.75rem;
    margin: 0 1.25rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.announcement-item:last-child {
    border-bottom: 0;
}

.announcement-item-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--epc-kind-bg);
    color: var(--epc-kind);
    font-size: 1.05rem;
}

.announcement-item-title {
    color: var(--bs-body-color);
    font-weight: 600;
    text-decoration: none;
}

.announcement-item-title:hover {
    text-decoration: underline;
}

.announcement-item.unread .announcement-item-title {
    font-weight: 800;
}

.announcement-item.unread .announcement-item-title::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: var(--bs-primary);
    vertical-align: 0.1rem;
}

.announcement-item-summary {
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}

.announcement-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-top: 0.25rem;
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
}

/* Dashboard news box (above Upcoming matches): headline, one-line teaser, date. */
.news-teasers {
    margin: 0;
    padding: 0.25rem 1.25rem;
    list-style: none;
}

.news-teasers li {
    position: relative;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.news-teasers li:last-child {
    border-bottom: 0;
}

.news-teaser-title {
    display: block;
    overflow: hidden;
    color: var(--bs-body-color);
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-teaser-title:hover {
    text-decoration: underline;
}

.news-teaser-text {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.news-teaser-date {
    margin-top: 0.125rem;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

.announcement-more {
    display: block;
    padding: 0 1.25rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Dashboard alert cards */
.announcement-alert-card {
    position: relative;
    display: flex;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--bs-danger-border-subtle);
    border-left: 4px solid var(--bs-danger);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-danger-bg-subtle);
    box-shadow: var(--epc-shadow);
}

/* Above the card's stretched link, so the X dismisses instead of opening the alert. */
.announcement-alert-close {
    position: relative;
    z-index: 2;
    flex: none;
    align-self: flex-start;
}

.announcement-alert-card .announcement-alert-icon {
    color: var(--bs-danger);
    font-size: 1.5rem;
}

.announcement-alert-card-title {
    color: var(--bs-body-color);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
}

.announcement-alert-card-title:hover {
    text-decoration: underline;
}

/* Live alert modal */
.announcement-alert-header {
    align-items: flex-start;
    gap: 0.875rem;
    border-bottom: 0;
}

.announcement-alert-header .announcement-alert-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
    font-size: 1.35rem;
}

/* Live alert banner (match pages) */
.announcement-banners {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.announcement-banners:empty {
    display: none;
}

.announcement-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--bs-border-radius);
    background: #b91c1c;
    color: #fff;
}

.announcement-banner > .bi {
    font-size: 1.15rem;
}

.announcement-banner-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Reading view */
.announcement-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.announcement-article-title {
    margin: 0.5rem 0 0.25rem;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.announcement-byline {
    margin-bottom: 1rem;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}

/*
   An announcement's message looks the same in the composer's editor as it does published, so what a director types is
   what readers see. Each rule styles the published body (.announcement-body, Markdig's HTML from AnnouncementText) and
   the editor's content area together. The editor selector is long enough to win over TOAST UI's own rules, including
   its dark theme. Published headings are two levels lower than the editor's (h1 → h3), under the page title.
*/
.announcement-body,
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents {
    max-width: 46rem;
    color: var(--bs-body-color);
    font-family: var(--bs-font-sans-serif);
    font-size: 1rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents {
    padding: 1rem 1.25rem;
}

.announcement-body p,
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents p {
    margin: 0 0 1rem;
    color: inherit;
    line-height: inherit;
}

.announcement-body a,
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents a {
    color: var(--bs-link-color);
    text-decoration: underline;
}

.announcement-body :is(h3, h4, h5, h6),
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents :is(h1, h2, h3, h4, h5, h6) {
    margin: 1.25rem 0 0.5rem;
    padding: 0;
    border: 0;
    color: inherit;
    font-weight: 700;
    line-height: 1.3;
}

.announcement-body h3,
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents h1 { font-size: 1.25rem; }

.announcement-body h4,
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents h2 { font-size: 1.1rem; }

.announcement-body :is(h5, h6),
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents :is(h3, h4, h5, h6) { font-size: 1rem; }

.announcement-body > :first-child,
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents > :first-child {
    margin-top: 0;
}

/* Lists: the browser's own bullets and numbers in both (TOAST UI draws its own dots). */
.announcement-body :is(ul, ol),
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents :is(ul, ol) {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
    color: inherit;
}

.announcement-body ul,
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents ul { list-style: disc; }

.announcement-body ol,
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents ol { list-style: decimal; }

.announcement-body li,
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents li {
    margin: 0.125rem 0;
    color: inherit;
}

/* The editor wraps every list item's text in a paragraph; published lists usually don't. */
.announcement-body li > p,
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents li > p {
    margin: 0;
}

.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents ul > li:not(.task-list-item)::before,
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents ol > li::before {
    content: none;
}

/* Checklists: the same box drawn in both (Markdig writes a disabled checkbox, TOAST UI a ::before). */
.announcement-body .contains-task-list {
    padding-left: 0;
    list-style: none;
}

.announcement-body .task-list-item,
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents li.task-list-item {
    position: relative;
    margin-left: 0;
    padding-left: 1.75rem;
    list-style: none;
}

.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents ul:has(> li.task-list-item) {
    padding-left: 0;
}

.announcement-body .task-list-item > input[type="checkbox"],
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents li.task-list-item::before {
    position: absolute;
    top: 0.3em;
    left: 0;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    border: 1.5px solid var(--bs-secondary-color);
    border-radius: 0.25rem;
    background: var(--epc-surface);
    appearance: none;
    opacity: 1;
    content: "";
}

.announcement-body .task-list-item > input[type="checkbox"]:checked,
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents li.task-list-item.checked::before {
    border-color: var(--bs-primary);
    background: var(--bs-primary) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3.5 8.5l3 3 6-7'/%3e%3c/svg%3e") center / 0.8rem no-repeat;
}

/* Tables: a light header row and a border round every cell, in both. */
.announcement-body table,
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents table {
    margin: 0 0 1rem;
    border-collapse: collapse;
    color: inherit;
}

.announcement-body :is(th, td),
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents table :is(th, td) {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
    vertical-align: top;
}

.announcement-body th,
.announcement-editor .toastui-editor-defaultUI .toastui-editor-contents table th {
    background: var(--epc-hover);
    font-weight: 600;
}

.announcement-body p:last-child,
.announcement-body ul:last-child,
.announcement-body ol:last-child,
.announcement-body table:last-child {
    margin-bottom: 0;
}

/* Wide tables scroll inside the published body instead of widening the page. */
.announcement-body table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
}

/* The composer's TOAST UI editor frame, in the site's colours and corners. */
.announcement-editor .toastui-editor-defaultUI {
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    font-family: var(--bs-font-sans-serif);
}

.announcement-editor .toastui-editor-defaultUI .toastui-editor-ww-container {
    background: var(--epc-surface);
}

/* TOAST UI's empty-editor hint shares its class name with Bootstrap's loading skeleton (.placeholder). */
.announcement-editor .placeholder {
    display: inline;
    min-height: 0;
    vertical-align: baseline;
    cursor: text;
    background-color: transparent;
    opacity: 1;
}

.announcement-action {
    margin-top: 1rem;
}

.announcement-reader .card-body {
    padding: 1.75rem;
}

.announcement-ack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--bs-border-radius);
    background: var(--epc-primary-soft);
}

.announcement-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Management page */

/* Row actions: icons with tooltips until there is room for their words. The words stay readable by screen readers. */
@media (max-width: 1399.98px) {
    .crud-options .action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}
.announcement-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.announcement-summary-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--epc-surface);
    color: var(--bs-body-color);
    text-decoration: none;
}

.announcement-summary-item.active,
.announcement-summary-item:hover {
    border-color: var(--bs-primary);
}

.announcement-summary-count {
    font-size: 1.5rem;
    font-weight: 800;
}

.announcement-summary-label {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

/* Composer */
.kind-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 767.98px) {
    .kind-picker {
        grid-template-columns: 1fr;
    }
}

.kind-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.625rem;
    align-items: center;
    height: 100%;
    padding: 0.875rem;
    border: 2px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    cursor: pointer;
}

.kind-option-icon {
    color: var(--epc-kind);
    font-size: 1.25rem;
}

.kind-option-name {
    font-weight: 700;
}

.kind-option-hint {
    grid-column: 1 / -1;
    color: var(--bs-secondary-color);
    font-size: 0.825rem;
}

.btn-check:checked + .kind-option {
    border-color: var(--epc-kind);
    background: var(--epc-kind-bg);
}

.btn-check:focus-visible + .kind-option {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.target-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.25rem 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--bs-border-radius);
    background: var(--epc-hover);
}

.target-list[hidden] {
    display: none;
}

.composer-options > summary {
    cursor: pointer;
    list-style: none;
}

.composer-options > summary::-webkit-details-marker {
    display: none;
}

.composer-options:not([open]) > summary {
    padding-bottom: 1.125rem;
    border-bottom: 0;
}

.composer-options[open] > summary .bi-chevron-down {
    transform: rotate(180deg);
}

@media (min-width: 992px) {
    .composer-summary {
        position: sticky;
        top: 5rem;
    }
}

.composer-reach {
    font-size: 1.05rem;
    font-weight: 600;
}

/* Previews */
.preview-label {
    margin: 1.25rem 0 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.preview-label:first-child {
    margin-top: 0;
}

.announcement-preview-modal {
    max-width: 32rem;
    pointer-events: none;
}

.announcement-preview-list {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--epc-surface);
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Help: the ? beside form labels (HelpTipTagHelper, js/help-tips.js)
   --------------------------------------------------------------------------- */
.btn-help-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.25rem 0 -0.25rem -0.125rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    line-height: 1;
    vertical-align: baseline;
}

.btn-help-tip:hover,
.btn-help-tip[aria-expanded="true"] {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.btn-help-tip:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

/* On phones the button is a full touch target without moving the label. */
@media (pointer: coarse) {
    .btn-help-tip {
        width: 2rem;
        height: 2rem;
        margin: -0.5rem -0.25rem -0.5rem -0.375rem;
    }
}

.help-popover {
    --bs-popover-max-width: 20rem;
    --bs-popover-body-padding-y: 0.625rem;
    --bs-popover-font-size: 0.875rem;
}

/* Help Center (Views/Help), the Help panel (js/help-panel.js) and "Need help with this page?" (_PageHelp) */
.help-list .list-group-item {
    padding: 0.625rem 1rem;
    background: transparent;
}

.help-list-title {
    font-weight: 600;
    text-decoration: none;
}

.help-list-title:hover {
    text-decoration: underline;
}

.help-drawer .help-list .list-group-item {
    padding-inline: 0;
}

.help-body > :last-child {
    margin-bottom: 0;
}

.help-body h2 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.help-body h3 {
    margin: 1.25rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.help-body > h2:first-child,
.help-body > h3:first-child {
    margin-top: 0;
}

.page-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--epc-surface);
}

.page-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-size: 1.25rem;
}

.page-help-text {
    flex: 1 1 14rem;
    min-width: 0;
}

.page-help-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media print {
    .page-help {
        display: none;
    }
}

/* Page tours (js/help-tour.js, Driver.js 1.8.0): the "Help me" button and the tour popover in the EPC theme. */
.btn-help-me {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d9488;
    --bs-btn-border-color: #0d9488;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0f766e;
    --bs-btn-hover-border-color: #0f766e;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #115e59;
    --bs-btn-active-border-color: #115e59;
    --bs-btn-focus-shadow-rgb: 13, 148, 136;
    font-weight: 600;
}

.driver-popover.epc-tour {
    max-width: min(24rem, calc(100vw - 2rem));
    padding: 1rem 1.125rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--epc-surface);
    color: var(--bs-body-color);
    font-family: inherit;
    box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.25);
}

.driver-popover.epc-tour .driver-popover-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.driver-popover.epc-tour .driver-popover-description {
    margin-top: 0.375rem;
    color: var(--bs-body-color);
    font-size: 0.9rem;
    line-height: 1.5;
}

.driver-popover.epc-tour .driver-popover-progress-text {
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
}

.driver-popover.epc-tour .driver-popover-footer button {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--epc-surface);
    color: var(--bs-body-color);
    font-size: 0.875rem;
    text-shadow: none;
}

.driver-popover.epc-tour .driver-popover-footer .driver-popover-next-btn {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #fff;
}

.driver-popover.epc-tour .driver-popover-footer button:focus-visible,
.driver-popover.epc-tour .driver-popover-close-btn:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.driver-popover.epc-tour .driver-popover-close-btn {
    color: var(--bs-secondary-color);
}

/* The arrow takes the popover's colour in both themes. */
.driver-popover.epc-tour .driver-popover-arrow {
    border-color: var(--epc-surface);
}

.driver-popover.epc-tour .driver-popover-arrow-side-left { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }
.driver-popover.epc-tour .driver-popover-arrow-side-right { border-top-color: transparent; border-left-color: transparent; border-bottom-color: transparent; }
.driver-popover.epc-tour .driver-popover-arrow-side-top { border-right-color: transparent; border-left-color: transparent; border-bottom-color: transparent; }
.driver-popover.epc-tour .driver-popover-arrow-side-bottom { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; }

/* A legend with field help (HelpTipTagHelper): browsers always lay a fieldset's legend out as a block, so the legend
   and its ? float side by side (a floated legend isn't laid out as one) and what follows starts on a new line. */
legend.has-help-tip {
    float: left;
    width: auto;
    margin-right: 0.25rem;
}

legend.has-help-tip + .btn-help-tip {
    float: left;
    clear: none;   /* Bootstrap's reboot clears whatever follows a legend */
}

legend.has-help-tip ~ :not(.btn-help-tip) {
    clear: left;
}

/* Task tutorials (js/help-tour.js): the "do this to continue" line of a handoff step, and the chip shown while a
   tutorial waits for its next page. */
.driver-popover.epc-tour .epc-tour-handoff {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--bs-border-radius);
    background: rgba(13, 148, 136, 0.12);
    color: var(--bs-body-color);
    font-weight: 600;
}

.driver-popover.epc-tour .epc-tour-handoff .bi {
    color: #0d9488;
}

.tutorial-chip {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 0.625rem 0.75rem 0.625rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid #0d9488;
    border-radius: var(--bs-border-radius-lg);
    background: var(--epc-surface);
    box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.18);
    font-size: 0.875rem;
}

.tutorial-chip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tutorial-chip-text span {
    color: var(--bs-secondary-color);
}

@media print {
    .tutorial-chip {
        display: none;
    }
}

/* Dashboard: the coach's match pre-flight checklist (ViewComponents/MatchPreflightViewComponent). */
.preflight-checks {
    display: grid;
    gap: 0.625rem;
}

.preflight-check {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: start;
}

.preflight-check > .bi {
    margin-top: 0.15rem;
    font-size: 1rem;
}