:root {
    --bg: #f6f6f6;
    --text: #302c40;
    --card-bg: #ffffff;
    --th-bg: #05233a;
    --th-text: #ffffff;
    --border-color: #e6e6e6;
    --row-hover-bg: #eef4f8;
    --muted-text: #666666;
    --input-bg: #ffffff;
    --input-border: #b9bec4;
    --fieldset-border: #dddddd;
    --badge-bg: #dde3e8;
    --shadow-color: rgba(5, 35, 58, 0.12);

    --navy: #05233a;
    --navy-hover: #0a3a5f;
    --accent: #0581c1;
    --accent-hover: #046a9e;
    --header-bg: #05233a;
    --header-text: #ffffff;
    --header-link: #dddddd;
    --danger: #a33333;
    --tab-color: #0581c1;
}

html.dark-mode {
    --bg: #0e161f;
    --text: #dfe4ea;
    --card-bg: #17222e;
    --th-bg: #0c3a5c;
    --th-text: #ffffff;
    --border-color: #2a3742;
    --row-hover-bg: #1e2c39;
    --muted-text: #93a1ad;
    --input-bg: #121c26;
    --input-border: #38454f;
    --fieldset-border: #313e49;
    --badge-bg: #313e49;
    --shadow-color: rgba(0, 0, 0, 0.5);

    --navy: #0c3a5c;
    --navy-hover: #14496f;
    --accent: #3aa8e0;
    --accent-hover: #5bbcef;
    --header-bg: #081b2c;
    --header-text: #f0f4f7;
    --header-link: #c4ccd3;
    --danger: #e08a8a;
    --tab-color: #3aa8e0;
}

* { box-sizing: border-box; }

body {
    font-family: "Verdana", "Geneva", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

a {
    color: var(--accent);
}

a:hover {
    color: var(--accent-hover);
}

/* Plain links (e.g. "Forgot your password?") default to the browser's blue
   otherwise -- readable on the light background, but a hard clash on dark. */
html.dark-mode a {
    color: #ffffff;
}

header {
    background: var(--header-bg);
    color: var(--header-text);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px solid var(--accent);
    position: sticky;
    top: 0;
    z-index: 100;
}

header h1 {
    margin: 0;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

header nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

header nav a {
    color: var(--header-link);
    text-decoration: none;
    font-size: 14px;
}

header nav a:hover, header nav a.active {
    color: #fff;
    text-decoration: underline;
}

.theme-toggle-btn {
    background: transparent;
    color: var(--header-text);
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
}

.theme-toggle-btn:hover {
    background: rgba(255,255,255,0.15);
    opacity: 1;
}

main {
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 24px;
}

h2 {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--text);
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.toolbar input[type="text"] {
    padding: 8px 10px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    min-width: 240px;
    background: var(--input-bg);
    color: var(--text);
}

button, .btn {
    background: var(--navy);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.btn {
    display: inline-block;
    text-decoration: none;
}

/* .btn's display:inline-block (and any other explicit display rule) would
   otherwise override the browser's default [hidden]{display:none} -- author
   styles always beat the UA stylesheet regardless of the attribute. Force
   [hidden] to always win so JS-toggled visibility (nav links, buttons) is
   never silently overridden by an element's own display rule. */
[hidden] {
    display: none !important;
}

.secondary {
    background: #8a9299;
}

button.danger {
    background: var(--danger);
}

.attended-toggle {
    min-width: 56px;
}

.attended-toggle.no {
    background: var(--danger);
}

.attended-toggle.yes {
    background: #1a7d3a;
}

html.dark-mode .attended-toggle.yes {
    background: #206b3d;
}

button:hover { opacity: 0.9; }

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

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    box-shadow: 0 1px 3px var(--shadow-color);
}

th, td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

th {
    background: var(--th-bg);
    color: var(--th-text);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 13px;
}

tr:hover td { background: var(--row-hover-bg); }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    background: var(--badge-bg);
    color: var(--text);
}

.badge.core { background: #f0c94a; color: #3a2e00; }
.badge.inactive { background: #ddd; color: #666; }
html.dark-mode .badge.inactive { background: #3a4550; color: #aeb8c1; }
.badge.finalized { background: #1a7d3a; color: #fff; }
html.dark-mode .badge.finalized { background: #2f9d55; color: #fff; }

.pool-finalize {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 16px;
}

/* Top-level retreat header on My Pools -- collapsible, one level up from
   .pool-bar below. Click to show/hide everything for that retreat. */
.retreat-bar {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}
.retreat-bar:hover { border-color: var(--accent); }
.retreat-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.retreat-bar-chevron {
    flex: none;
    align-self: center;
    color: var(--muted-text);
    transition: transform 0.15s ease;
}
.retreat-bar.open .retreat-bar-chevron { transform: rotate(90deg); }

.retreat-bar-title { font-weight: 700; font-size: 18px; }
.retreat-bar-meta { color: var(--muted-text); font-size: 14px; }

.retreat-bar-body {
    margin: 12px 0 32px;
    padding-left: 16px;
    border-left: 2px solid var(--border-color);
}
.retreat-bar-body[hidden] { display: none; }

/* "All pools" combined bar on My Pools -- a compressed clickable summary that
   expands to the full overview table. */
.pools-bar-wrap { margin: 4px 0 20px; }

.pools-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
}
.pools-bar:hover { border-color: var(--accent); }
.pools-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pools-bar-chevron {
    flex: none;
    color: var(--muted-text);
    transition: transform 0.15s ease;
}
.pools-bar.open .pools-bar-chevron { transform: rotate(90deg); }

.pools-bar-head {
    flex: none;
    display: flex;
    flex-direction: column;
    min-width: 150px;
}
.pools-bar-head .t {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pools-bar-head .s { font-size: 12px; color: var(--muted-text); }

.pools-bar-cells { display: flex; gap: 8px; flex-wrap: wrap; }

.pools-bar-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    min-width: 72px;
    max-width: 104px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--badge-bg);
}
.pools-bar-cell .l { font-size: 11px; line-height: 1.15; color: var(--muted-text); }
.pools-bar-cell .c {
    font-size: 14px;
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pools-bar-cell.met { background: #1a7d3a; }
.pools-bar-cell.met .l, .pools-bar-cell.met .c { color: #fff; }
html.dark-mode .pools-bar-cell.met { background: #2f9d55; }

.pools-bar-detail { margin-top: 10px; overflow-x: auto; }
.pools-bar-detail[hidden] { display: none; }

/* A single pool's collapsible header line -- replaces the old View/Edit
   toggle. Click the bar (name · assignee · accepted/target · status) to
   expand or collapse that pool's working area. */
.pool-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 8px 4px;
    border-radius: 4px;
}
.pool-bar:hover { background: var(--row-hover-bg); }
.pool-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pool-bar-chevron {
    flex: none;
    color: var(--muted-text);
    transition: transform 0.15s ease;
}
.pool-bar.open .pool-bar-chevron { transform: rotate(90deg); }

.pool-bar-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.pool-bar-name { font-weight: 700; font-size: 16px; }
.pool-bar-sep { color: var(--muted-text); }
.pool-bar-meta { color: var(--muted-text); font-size: 13px; }
.pool-bar-count { font-weight: 700; font-size: 14px; }
.pool-bar-status { font-size: 13px; }
.pool-bar-status.filled { color: #1a7d3a; font-weight: 700; }
html.dark-mode .pool-bar-status.filled { color: #4fd485; }

.pool-bar-body { margin: 4px 0 8px; }
.pool-bar-body[hidden] { display: none; }
.pool-bar-counts { font-size: 13px; color: var(--muted-text); margin: 0 0 12px; }

.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* "Manually Number" while it's toggled on. */
.manual-number-btn.active {
    background: var(--accent);
}

/* Per-row "stamp the next call-order number" button during order entry. */
.auto-num-btn {
    padding: 2px 8px;
    margin-left: 6px;
    font-size: 13px;
    line-height: 1.4;
    background: var(--card-bg);
    color: var(--accent);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
.auto-num-btn:hover { border-color: var(--accent); }
.auto-num-btn[hidden] { display: none; }

/* Green "Filled"/"Finalized" status text in the All-pools overview table too. */
td .status-filled { color: #1a7d3a; font-weight: 700; }
html.dark-mode td .status-filled { color: #4fd485; }

.badge.over-capacity {
    background: var(--danger);
    color: #fff;
    margin-left: 6px;
}

.composition-summary {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px 14px;
    margin: 12px 0 20px;
    font-size: 14px;
}

.composition-summary .over-capacity {
    color: var(--danger);
    font-weight: 600;
}

.tab-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.tab-btn {
    background: transparent;
    color: var(--tab-color);
    border-radius: 4px 4px 0 0;
    padding: 10px 16px;
    border-bottom: 3px solid transparent;
}

.tab-btn.active {
    border-bottom: 3px solid var(--tab-color);
    font-weight: 700;
}

.tab-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tab-btn.tab-complete {
    color: #1a7d3a;
}

html.dark-mode .tab-btn.tab-complete {
    color: #4fd485;
}

.tab-btn.tab-complete.active {
    border-bottom-color: #1a7d3a;
}

html.dark-mode .tab-btn.tab-complete.active {
    border-bottom-color: #4fd485;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--accent);
}

.page-header-row h2 {
    margin: 0 0 8px 0;
}

.page-header-row .tab-bar {
    margin-bottom: 0;
    border-bottom: none;
}

.card-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.phase-card {
    border-left: 4px solid var(--accent);
}

.tools-details {
    margin-bottom: 16px;
}

.tools-details summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 8px;
}

tr.warning td {
    background: #fff7ed;
    border-top: 1px solid #fdba74;
    border-bottom: 1px solid #fdba74;
}

html.dark-mode tr.warning td {
    background: #3a2c18;
    border-top: 1px solid #7a5a2c;
    border-bottom: 1px solid #7a5a2c;
}

tr.shifted td {
    background: #eff6ff;
}

html.dark-mode tr.shifted td {
    background: #1c2c3d;
}

.hold-diff {
    background: #eff6ff;
    font-weight: 600;
}

html.dark-mode .hold-diff {
    background: #1c2c3d;
}

.warning-text {
    color: #9a3412;
    font-weight: 600;
}

html.dark-mode .warning-text {
    color: #f0a26a;
}

.warning-banner {
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.warning-banner a {
    color: #9a3412;
    font-weight: 600;
}

html.dark-mode .warning-banner {
    background: #3a2c18;
    border-color: #7a5a2c;
}

html.dark-mode .warning-banner a {
    color: #f0a26a;
}

.checkbox-cell {
    text-align: center;
    width: 70px;
}

dialog {
    border: none;
    border-radius: 6px;
    padding: 0;
    width: min(640px, 92vw);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    background: var(--card-bg);
    color: var(--text);
}

dialog::backdrop {
    background: rgba(0,0,0,0.4);
}

dialog form {
    padding: 20px 24px;
}

dialog h2 { margin-top: 0; }

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.field-grid .full { grid-column: 1 / -1; }

label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

input, select, textarea {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    font-size: 14px;
    background: var(--input-bg);
    color: var(--text);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    border-color: var(--accent);
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.checkbox-row input { width: auto; }

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

fieldset {
    border: 1px solid var(--fieldset-border);
    border-radius: 4px;
    margin: 16px 0;
}

legend {
    font-weight: 700;
    padding: 0 6px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 13px;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.error-message {
    color: var(--danger);
    font-size: 13px;
    margin: 8px 0;
    min-height: 1em;
}

.muted { color: var(--muted-text); font-size: 13px; }

.back-link {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--accent);
}

.roster-add-results {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    margin-top: 8px;
}

.roster-add-results .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}

/* Long candidate lists inside a My Pools block scroll internally so the
   next pool stays within reach. Header stays pinned while scrolling. */
.pool-scroll {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.pool-scroll table {
    box-shadow: none;
}

.pool-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.matrix-scroll {
    overflow: auto;
    max-height: 60vh;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.matrix-scroll table {
    box-shadow: none;
    border-collapse: separate;
    border-spacing: 0;
}

#admin-matrix-table, #director-matrix-table {
    table-layout: fixed;
}

.matrix-scroll th, .matrix-scroll td {
    white-space: nowrap;
}

.matrix-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--th-bg);
}

.matrix-scroll .name-col {
    width: 160px;
}

.matrix-scroll .item-col {
    width: 56px;
    padding: 6px 4px;
    text-align: center;
}

.matrix-scroll .date-col {
    width: 40px;
    padding: 6px 4px;
    text-align: center;
    font-size: 12px;
}

.attendance-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--danger);
}

.attendance-dot.yes {
    background: #1a7d3a;
}

html.dark-mode .attendance-dot.yes {
    background: #206b3d;
}

/* Truncation lives on a child element, never on the sticky <th> itself --
   overflow:hidden combined with position:sticky on the same element
   silently breaks the sticky behavior in Chromium. */
.cell-truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.matrix-scroll th.item-col .cell-truncate {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    height: 150px;
    max-height: 150px;
    margin: 0 auto;
    font-weight: 600;
    font-size: 12px;
    cursor: default;
}

.name-cell {
    display: flex;
    align-items: center;
    gap: 4px;
}

.name-cell .cell-truncate {
    flex: 1 1 auto;
    min-width: 0;
}

.info-icon {
    flex: none;
    color: var(--muted-text);
    cursor: help;
    font-size: 13px;
}

.item-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.matrix-scroll td.item-col input[type="date"] {
    width: 100%;
    min-width: 0;
    padding: 2px;
    font-size: 11px;
}

.badge.compliant { background: #cfe8d4; color: #1a5c2f; }
html.dark-mode .badge.compliant { background: #1f4a2c; color: #7ee0a0; }

.badge.expiring-soon { background: #fde3b8; color: #8a5a09; }
html.dark-mode .badge.expiring-soon { background: #5a4315; color: #f0c876; }

.badge.expired { background: #f3c6c6; color: #8a1f1f; }
html.dark-mode .badge.expired { background: #5a2323; color: #f19999; }

.badge.never { background: var(--badge-bg); color: var(--muted-text); }

.matrix-date-input {
    width: 130px;
}

.alphabet-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.alphabet-letters {
    display: flex;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
}

.alphabet-bar button {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--accent);
    padding: 3px 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 3px;
}

.alphabet-bar button:hover {
    background: var(--row-hover-bg);
    opacity: 1;
}

.alphabet-bar button.active {
    background: var(--accent);
    color: #fff;
}

.alphabet-all {
    flex-shrink: 0;
    padding-left: 12px !important;
    border-left: 1px solid var(--border-color);
}

.row-clickable {
    cursor: pointer;
}

.status-flag {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    margin-right: 4px;
    color: var(--danger);
}

.matrix-actions-row td {
    background: var(--row-hover-bg);
    padding: 8px 12px;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
}

.matrix-actions-row .save-row-btn {
    margin-right: 8px;
}

.person-picker {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 10px;
}

.person-picker-group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--muted-text);
    margin: 8px 0 2px;
}

.person-picker-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}

.person-picker-row input {
    width: auto;
}