/* Honshu Dojo theme — "licht & modern": dark purple top band, light page, white cards,
   one purple accent (no Bootstrap blue). Colors live here as tokens; components use them. */
:root {
    --hd-band: #2a1631;
    --hd-band-text: #d8c7e0;
    --hd-accent: #7b2d93;
    --hd-accent-dark: #5b1f6e;
    --hd-accent-light: #c77ddf;
    --hd-bg: #f4f2f6;
    --hd-surface: #ffffff;
    --hd-text: #2b2830;
    --hd-muted: #6f6a78;
    --hd-line: #e3dfe8;
    --hd-thead: #faf8fc;
    --hd-radius: 8px;
    --hd-shadow: 0 1px 2px rgba(40, 20, 50, .06);

    /* Bootstrap hooks, so links, focus rings and checkboxes follow the accent too. */
    --bs-link-color: var(--hd-accent);
    --bs-link-color-rgb: 123, 45, 147;
    --bs-link-hover-color: var(--hd-accent-dark);
    --bs-link-hover-color-rgb: 91, 31, 110;
    --bs-body-color: var(--hd-text);
    /* --bs-body-bg stays white: Bootstrap also uses it for inputs. The page grey is set on body. */
}

html, body {
    font-family: "Segoe UI", "Helvetica Neue", Arial, Helvetica, sans-serif;
    background: var(--hd-bg);
    color: var(--hd-text);
}

a, .btn-link {
    color: var(--hd-accent);
}

a:hover, .btn-link:hover {
    color: var(--hd-accent-dark);
}

h1 {
    font-size: 1.55em;
    font-weight: 700;
    color: var(--hd-text);
    margin: 0 0 14px;
}

h2 {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--hd-text);
}

h3 {
    font-size: 1.05em;
    font-weight: 600;
    color: var(--hd-text);
    border-bottom: 1px solid var(--hd-line);
    padding-bottom: 4px;
    margin-top: 18px;
    margin-bottom: 8px;
}

/* Page title row: heading left, primary action (e.g. "+ Nieuw lid") right. */
.hd-pagehead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.hd-pagehead h1 {
    margin: 0;
}

/* Small uppercase label above a group of tiles or a section. */
.hd-section-label {
    font-size: .75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--hd-muted);
    margin: 22px 0 8px;
}

.hd-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

/* Home page tile groups: each group has its own colour (--hd-g: icon, --hd-g-soft: icon
   background, --hd-g-ink: group label). The general group keeps the club purple with filled icons. */
.hd-group-info { --hd-g: var(--hd-accent); --hd-g-soft: #f3e9f7; --hd-g-ink: var(--hd-accent-dark); }
.hd-group-attendance { --hd-g: #1f7a6d; --hd-g-soft: #e3f3f0; --hd-g-ink: #165a50; }
.hd-group-exams { --hd-g: #b5651d; --hd-g-soft: #fbefe3; --hd-g-ink: #8a4a12; }
.hd-group-members { --hd-g: #2f5fa8; --hd-g-soft: #e6eef9; --hd-g-ink: #22477f; }

[class^="hd-group-"] .hd-section-label {
    color: var(--hd-g-ink);
}

.hd-tile {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--hd-surface);
    border: 1px solid var(--hd-line);
    border-radius: 10px;
    box-shadow: var(--hd-shadow);
    padding: 12px 14px;
    color: var(--hd-text);
    text-decoration: none;
}

.hd-tile:hover {
    border-color: var(--hd-g, var(--hd-accent-light));
    color: var(--hd-text);
}

.hd-tile-icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--hd-g-soft, var(--hd-line));
    color: var(--hd-g, var(--hd-accent));
    display: flex;
    align-items: center;
    justify-content: center;
}

.hd-tile-icon svg {
    width: 22px;
    height: 22px;
}

.hd-group-info .hd-tile-icon {
    background: var(--hd-g);
    color: #fff;
}

.hd-tile-title {
    display: block;
    font-weight: 700;
    font-size: 1em;
}

.hd-tile-desc {
    display: block;
    font-size: .83em;
    color: var(--hd-muted);
    margin-top: 2px;
}

.hd-tile.disabled {
    opacity: .55;
    pointer-events: none;
}

/* Tables: white card with a quiet uppercase header. Wrap in .hd-table for rounded corners. */
.table {
    --bs-table-bg: var(--hd-surface);
    --bs-table-striped-bg: #f5f1f7;
    --bs-table-hover-bg: #f6f2f8;
    border: 1px solid var(--hd-line);
    font-size: .92em;
}

/* Every list gets zebra rows, with or without .table-striped. A lone row (e.g. the empty-table
   placeholder) stays plain. */
.table > tbody > tr:nth-of-type(odd):not(:only-child) > * {
    --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table > thead th {
    font-weight: 600;
    font-size: .78em;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hd-muted);
    background: var(--hd-thead);
    border-bottom: 1px solid var(--hd-line);
    vertical-align: bottom;
}

.table > :not(caption) > * > * {
    border-color: var(--hd-line);
    vertical-align: middle;
}

.hd-table {
    background: var(--hd-surface);
    border: 1px solid var(--hd-line);
    border-radius: var(--hd-radius);
    box-shadow: var(--hd-shadow);
    overflow: hidden;
}

.hd-table > .table {
    border: none;
    margin: 0;
}

/* Sign-in and password pages: one centered card. */
.hd-auth {
    max-width: 420px;
    margin: 24px auto;
    background: var(--hd-surface);
    border: 1px solid var(--hd-line);
    border-radius: var(--hd-radius);
    box-shadow: var(--hd-shadow);
    padding: 24px 28px;
}

.hd-auth h1 {
    font-size: 1.4em;
    margin-bottom: 6px;
}

.hd-auth-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    color: var(--hd-muted);
    font-size: .85em;
}

.hd-auth-or::before,
.hd-auth-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--hd-line);
}

/* Small square icon button/link in table rows (edit, mail, delete). */
.hd-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--hd-accent);
    vertical-align: middle;
}

.hd-icon-btn:hover {
    background: #f3e8f7;
    border-color: #e2c9ec;
    color: var(--hd-accent-dark);
}

.hd-icon-btn.danger {
    color: #b02a37;
}

.hd-icon-btn.danger:hover {
    background: #fbe9eb;
    border-color: #f1c3c8;
}

.hd-icon-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Sortable table header: the whole label is the button. */
.hd-sort {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.hd-sort:hover,
.hd-sort.active {
    color: var(--hd-accent);
}

.hd-sort-arrow {
    font-size: .9em;
    opacity: .45;
    margin-left: 2px;
}

.hd-sort.active .hd-sort-arrow {
    opacity: 1;
}

/* Exam result icon: green check / red cross in a small circle. */
.hd-result {
    display: inline-flex;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    vertical-align: -5px;
}

.hd-result svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hd-result.ok { background: #2f9e5b; }
.hd-result.fail { background: #c0392b; }

/* Compact account status in the extended member list. */
.hd-status {
    display: inline-block;
    font-size: .78em;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--hd-line);
    color: var(--hd-muted);
    white-space: nowrap;
}

.hd-status.ok {
    background: #dcf2e3;
    color: #1e6b3a;
}

/* "18+" next to a member who came of age while still linked through a guardian's account. */
.hd-flag {
    display: inline-block;
    margin-left: 6px;
    font-size: .72em;
    font-weight: 600;
    padding: 0 6px;
    border-radius: 8px;
    background: #fdecc8;
    color: #8a5a00;
    text-decoration: none;
    vertical-align: middle;
}

.hd-flag:hover {
    background: #f9d98e;
    color: #6b4500;
}

/* Extended member list: more columns, so slightly smaller type. */
.table.hd-details {
    font-size: .84em;
}

/* Wrapper that drops a component's own bottom margin, to align it with buttons in a flex row. */
.hd-flush > * {
    margin-bottom: 0 !important;
}

/* Placeholder row for an empty table. */
.hd-empty {
    text-align: center;
    color: var(--hd-muted);
    font-style: italic;
    padding: 28px 12px !important;
}

/* Sub-navigation under a page title (e.g. attendance per training / per month). */
.hd-subtabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--hd-line);
    margin: -6px 0 18px;
}

.hd-subtabs a {
    padding: 6px 14px;
    color: var(--hd-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: .92em;
}

.hd-subtabs a:hover {
    color: var(--hd-text);
}

.hd-subtabs a.active {
    color: var(--hd-accent);
    border-bottom-color: var(--hd-accent);
    font-weight: 600;
}

.hd-subtabs a.hd-subtabs-action {
    margin: 0 0 6px auto;
    padding: 2px 10px;
    color: var(--hd-text);
    border-bottom: 1px solid var(--hd-line);
    align-self: center;
}

/* Month picker: ‹ [month input] › plus a "this month" shortcut. */
.hd-monthpicker {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hd-monthpicker input[type=month] {
    width: 170px;
}

/* Banner above the entry tiles for a custom training (stage, yudansha, ...). */
.hd-session-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    margin-bottom: 12px;
    border-radius: var(--hd-radius);
    background: #f3e8f7;
    border: 1px solid #e2c9ec;
}

.hd-session-banner .badge {
    background: var(--hd-accent);
}

/* Leaderboard bar behind the count. */
.hd-bar {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--hd-line);
    min-width: 80px;
}

.hd-bar > span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 4px;
    background: var(--hd-accent);
}

.hd-podium {
    display: inline-flex;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85em;
    background: var(--hd-line);
}

.hd-podium.p1 { background: #f5d76e; }
.hd-podium.p2 { background: #d9d9de; }
.hd-podium.p3 { background: #e3b48a; }

/* Recent trainings: one scrollable row, so it doesn't wrap into a block on a phone. */
.hd-recent {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.hd-recent .btn {
    white-space: nowrap;
}

.hd-recent-count {
    display: inline-block;
    min-width: 1.6em;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .08);
    font-size: .85em;
}

/* Attendance per training: every name is a big toggle tile with a visual check box. */
.hd-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(210px, 45%), 1fr));
    gap: 8px;
}

.hd-check-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    background: var(--hd-surface);
    border: 1px solid var(--hd-line);
    border-radius: var(--hd-radius);
    box-shadow: var(--hd-shadow);
    color: var(--hd-text);
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: background-color .12s, border-color .12s;
}

.hd-check-tile:hover {
    border-color: var(--hd-accent-light);
}

.hd-check-tile.on {
    background: #f3e8f7;
    border-color: var(--hd-accent);
}

.hd-check-box {
    flex: none;
    width: 22px;
    height: 22px;
    border: 2px solid #c9c2d1;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.hd-check-box svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    visibility: hidden;
}

.hd-check-tile.on .hd-check-box {
    background: var(--hd-accent);
    border-color: var(--hd-accent);
}

.hd-check-tile.on .hd-check-box svg {
    visibility: visible;
}

.hd-check-tile.on .hd-check-name {
    font-weight: 600;
}

/* Sticky save bar under the tiles: stays reachable at the bottom of a phone screen. */
.hd-savebar {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--hd-surface);
    border: 1px solid var(--hd-line);
    border-radius: var(--hd-radius);
    box-shadow: 0 -2px 10px rgba(40, 20, 50, .08);
}

/* Label that follows the mouse — see wwwroot/js/cursor-tip.js. */
.hd-cursor-tip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    pointer-events: none;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--hd-band);
    color: #fff;
    font-size: .8rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .08s;
}

.hd-cursor-tip.show {
    opacity: 1;
}

/* Row under a table: count/summary left, export buttons right. */
.hd-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    color: var(--hd-muted);
    font-size: .88em;
}

.hd-table-footer .hd-export {
    margin-top: 0;
}

/* Export buttons, right-aligned under a table. */
.hd-export {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.hd-file-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: -3px;
}

/* Styled confirm dialog — see wwwroot/js/confirm-dialog.js. */
dialog.hd-confirm {
    border: none;
    border-radius: var(--hd-radius);
    padding: 20px 22px 16px;
    max-width: 440px;
    width: calc(100% - 32px);
    box-shadow: 0 12px 40px rgba(42, 22, 49, .25);
    color: var(--hd-text);
}

dialog.hd-confirm::backdrop {
    background: rgba(42, 22, 49, .45);
}

dialog.hd-confirm h2 {
    font-size: 1.15em;
    margin: 0 0 8px;
}

dialog.hd-confirm p {
    color: var(--hd-muted);
    margin: 0 0 18px;
}

.hd-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.hd-disabled-link {
    color: gray;
}

.btn-primary {
    --bs-btn-bg: var(--hd-accent);
    --bs-btn-border-color: var(--hd-accent);
    --bs-btn-hover-bg: var(--hd-accent-dark);
    --bs-btn-hover-border-color: var(--hd-accent-dark);
    --bs-btn-active-bg: var(--hd-accent-dark);
    --bs-btn-active-border-color: var(--hd-accent-dark);
    --bs-btn-disabled-bg: var(--hd-accent);
    --bs-btn-disabled-border-color: var(--hd-accent);
}

.btn-outline-secondary {
    --bs-btn-color: var(--hd-text);
    --bs-btn-bg: var(--hd-surface);
    --bs-btn-border-color: var(--hd-line);
    --bs-btn-hover-color: var(--hd-text);
    --bs-btn-hover-bg: var(--hd-thead);
    --bs-btn-hover-border-color: var(--hd-accent-light);
    --bs-btn-active-color: var(--hd-text);
    --bs-btn-active-bg: var(--hd-line);
    --bs-btn-active-border-color: var(--hd-accent-light);
    --bs-btn-disabled-color: var(--hd-muted);
    --bs-btn-disabled-bg: var(--hd-surface);
    --bs-btn-disabled-border-color: var(--hd-line);
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--hd-accent-light);
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(123, 45, 147, .35);
}

.content {
    padding-top: 1.1rem;
}

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;
}

.hd-rank-icon {
    height: 28px;
    width: auto;
}