h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* EventCalendar */

:root {
    color-scheme: light;
    --ink: #1c2530;
    --muted: #5b6774;
    --border: #d8dee5;
    --accent: #2f6fed;
    --accent-ink: #ffffff;
    --bg: #f7f8fa;
    --card-bg: #ffffff;
    --good: #1f9d55;
    --warn: #c77c11;
    --bad: #c0392b;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--bg);
    color: var(--ink);
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}

.top-bar a { color: var(--ink); text-decoration: none; font-weight: 600; }

.page {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
}

.narrow-card {
    max-width: 420px;
    margin: 2rem auto;
    padding: 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; margin-top: 2rem; }

label { display: block; margin-top: 0.75rem; font-weight: 600; font-size: 0.9rem; color: var(--muted); }

input, textarea, select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    margin-top: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
}

.inline-check { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 400; margin-right: 1rem; width: auto; }
.inline-check input { width: auto; }

button, .button {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

button.secondary {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

button.link-button {
    background: none;
    color: var(--muted);
    border: none;
    padding: 0;
    margin: 0;
    font-weight: 400;
    text-decoration: underline;
}

button.danger {
    background: transparent;
    color: var(--bad);
    border: 1px solid var(--bad);
}
button.danger:hover {
    background: var(--bad);
    color: #fff;
}

.danger-heading { color: var(--bad); }

button:disabled { opacity: 0.5; cursor: not-allowed; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.data-table th, .data-table td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    vertical-align: middle;
}

/* Wide tables (the everyone's-votes grid) scroll within themselves instead of pushing the
   whole page wider - the first column stays pinned so names remain visible while scrolling. */
.table-scroll {
    overflow-x: auto;
    margin-top: 1rem;
    /* Reserve room for the scrollbar below the table - on touch/mobile rendering it's an overlay
       that draws on top of content rather than pushing it down, so without this it cuts into the
       last row instead of sitting cleanly underneath it. */
    padding-bottom: 0.85rem;
    border-radius: 8px;
    /* A thin, subtle scrollbar instead of the chunky default - looks intentional rather than
       like a stuck/disabled control when it's only carrying a small amount of overflow. */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.table-scroll::-webkit-scrollbar { height: 6px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.table-scroll .data-table { margin-top: 0; min-width: max-content; }

.votes-grid th:first-child, .votes-grid td:first-child {
    position: sticky;
    left: 0;
    background: var(--bg);
    box-shadow: 1px 0 0 var(--border);
}

.votes-grid-vote { text-align: center; font-size: 1rem; }
.votes-grid-selected { background: #eef4ff; }

.plain-list { list-style: none; padding: 0; }
.plain-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }

.callout {
    background: #eef4ff;
    border: 1px solid #c9dcff;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.callout-confirmed {
    background: #eafaf0;
    border-color: #bfe9cf;
}

/* Collapsible sections (e.g. Retired) - closed by default so a long list doesn't eat page space. */
.section-disclosure summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.15rem;
    margin-top: 2rem;
    list-style: none;
    color: var(--ink);
}
.section-disclosure summary::-webkit-details-marker { display: none; }
.section-disclosure summary::before { content: '▸ '; color: var(--muted); }
.section-disclosure[open] summary::before { content: '▾ '; }
.section-disclosure[open] summary { margin-bottom: 0.5rem; }

.error-text { color: var(--bad); font-size: 0.85rem; margin-top: 0.25rem; }
.muted-text { color: var(--muted); }

.comments-disclosure summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.85rem;
    list-style: none;
}
.comments-disclosure summary::-webkit-details-marker { display: none; }
.comments-disclosure[open] summary { margin-bottom: 0.4rem; }
.comments-disclosure ul { max-width: 320px; }
.comments-disclosure li { white-space: normal; font-size: 0.85rem; }

.status-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #eee;
}

.status-open { background: #e6f0ff; color: var(--accent); }
.status-needsnewdates { background: #fff3e0; color: var(--warn); }
.status-confirmed { background: #e4f8ec; color: var(--good); }

.inline-form { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.inline-form label { margin-top: 0; }
.inline-form button { margin-top: 0; }

/* Vote grid (replaces a <table> for the voting rows - a table's per-cell box model fights
   alignment when rows mix plain text with taller custom controls like the vote pills; grid
   rows keep every cell in a row centered on the same baseline regardless of content height). */

.vote-grid {
    display: grid;
    grid-template-columns: minmax(9rem, auto) minmax(7rem, auto) auto 1fr;
    column-gap: 1.25rem;
    margin-top: 1rem;
}

/* Every cell stretches to fill its row's height (grid's default), so borders land on the same
   line across a row; each cell then centers its own content with flex rather than the grid
   centering cells individually, which would leave shorter cells with a shorter, misaligned box. */
.vote-grid-header, .vote-grid-cell {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.vote-grid-header {
    font-weight: 700;
    font-size: 0.9rem;
    padding-bottom: 0.6rem;
}

.vote-grid-cell {
    padding: 0.6rem 0;
    font-size: 0.9rem;
}

/* Vote pills */

.vote-options {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.vote-options label {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-top: 0;
    padding: 0.35rem 0.85rem;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.vote-options label:hover {
    border-color: var(--accent);
    color: var(--ink);
}

.vote-options label:active {
    transform: scale(0.97);
}

.vote-options input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.vote-options .vote-yes:has(input:checked) { background: var(--good); border-color: var(--good); color: #fff; }
.vote-options .vote-no:has(input:checked) { background: var(--bad); border-color: var(--bad); color: #fff; }
.vote-options .vote-maybe:has(input:checked) { background: var(--warn); border-color: var(--warn); color: #fff; }

/* Vote tallies */

.tally { display: flex; gap: 0.75rem; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.tally-yes { color: var(--good); }
.tally-no { color: var(--bad); }
.tally-maybe { color: var(--warn); }