/* Tabler owns the layout and components; ClubNow supplies its brand colour. */
:root, [data-bs-theme] {
    --tblr-primary: #0e5c63;
    --tblr-primary-rgb: 14, 92, 99;
    --tblr-link-color: #0e5c63;
    --tblr-link-hover-color: #09464b;
}
[data-bs-theme=dark] { --tblr-link-color: #80c8cd; --tblr-link-hover-color: #b2e0e3; }
[data-bs-theme=dark] .text-primary, [data-bs-theme=dark] .bg-primary-lt { color: #80c8cd !important; }
.cn-sidebar .navbar-brand-image { height: 26px; width: auto; }
.icon.ti { font-size: 1.25rem; line-height: 1; }
.cn-settings-menu { border-bottom: 1px solid var(--tblr-border-color); }
.cn-settings-content { min-width: 0; }
.cn-settings-nav .list-group-item { gap: .75rem; border-radius: var(--tblr-border-radius); }
.cn-settings-nav .list-group-item.active { color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb),.08); font-weight: 600; }
[data-bs-theme=dark] .cn-settings-nav .list-group-item.active { color: #80c8cd; background: rgba(128,200,205,.12); }
.cn-settings-nav .list-group-item:focus-visible, summary:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
.cn-settings-panel[hidden] { display: none !important; }
.cn-settings-panel .card-body + .card-body { border-top: 1px solid var(--tblr-border-color); }
.cn-settings-panel .card-body { padding: 1.5rem; }
.cn-settings-panel summary { cursor: pointer; }
.cn-settings-panel summary::marker { color: var(--tblr-secondary); }
.cn-session-agent { overflow-wrap: anywhere; }
.cn-backup-codes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; max-width: 26rem; }
@media(min-width:992px) {
    .cn-settings-menu { border-bottom: 0; border-right: 1px solid var(--tblr-border-color); }
    .cn-settings-panel { min-height: 580px; }
    .cn-settings-panel .card-body { padding: 2rem; }
}
@media(max-width:575.98px) {
    .cn-settings-panel .card-body { padding: 1.25rem; }
    .cn-settings-nav .list-group-item { flex: 1 1 auto; padding: .65rem .75rem; }
}
@media(max-width:991.98px) {
    .cn-settings-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .25rem; }
    .cn-settings-nav .list-group-item { width: auto; padding: .65rem .5rem; }
}
dialog::backdrop { background: rgba(0,0,0,.45); }
/* Keep feedback readable alongside the visibility control on small screens. */
.auth-shell .input-group .form-control, [data-account-form] .input-group .form-control { min-width: 0; }

/* Tall registration forms must start on-screen instead of centring above the viewport. */
.cn-auth-page { justify-content: safe center; }
.auth-brand img { width: 180px; height: auto; }
.cn-club-wizard [hidden] { display: none !important; }
.cn-club-wizard .steps { --tblr-steps-color: var(--tblr-primary); padding-left: 0; margin-left: 0; border-left: 0; }
.cn-club-wizard .step-item.active ~ .step-item { color: var(--tblr-secondary); }
.cn-club-wizard.is-enhanced [data-wizard-panel] { border-top: 0 !important; padding-top: 1rem; }
.cn-club-wizard [data-wizard-panel] h2:focus { outline: none; }
.cn-club-wizard .cn-review-value { white-space: pre-wrap; }
@media(max-width:575.98px) {
    .cn-club-wizard .step-item { font-size: .75rem; }
}
.auth-shell .card-body { padding: 2rem; }
@media(max-width:575.98px) {
    .auth-shell .card-body { padding: 1.25rem; }
}

/* Tabler's bundled selector uses Bootstrap variable names. Keep it on the app theme. */
.cn-club-wizard .ts-wrapper, .cn-club-wizard .ts-dropdown {
    --bs-body-bg: var(--tblr-bg-surface);
    --bs-body-color: var(--tblr-body-color);
    --bs-border-color: var(--tblr-border-color);
    --bs-border-color-translucent: var(--tblr-border-color-translucent);
    --bs-border-radius: var(--tblr-border-radius);
    --bs-border-radius-sm: var(--tblr-border-radius-sm);
    --bs-border-width: var(--tblr-border-width);
    --bs-secondary-bg: var(--tblr-bg-surface-secondary);
    --bs-tertiary-bg: var(--tblr-bg-surface-tertiary);
}
.cn-club-wizard .ts-wrapper { min-width: 0; }
.cn-club-wizard .ts-control, .cn-club-wizard .ts-dropdown { color: var(--tblr-body-color); }
.cn-club-wizard .ts-dropdown .active { background: rgba(var(--tblr-primary-rgb), .12); color: var(--tblr-body-color); }
.cn-club-wizard .ts-wrapper.multi .ts-control > div { color: var(--tblr-body-color); background: var(--tblr-bg-surface-secondary); }
.cn-club-wizard .ts-wrapper.focus .ts-control { border-color: var(--tblr-primary); box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .15); }
.cn-club-wizard .ts-wrapper.is-invalid .ts-control { border-color: var(--tblr-danger); }

/* Club identity accents are separate from platform navigation and status colours. */
[data-club-colour] { --cn-club-colour: #0e5c63; --cn-club-foreground: #fff; }
[data-club-colour="navy"] { --cn-club-colour: #243b64; }
[data-club-colour="blue"] { --cn-club-colour: #2256a3; }
[data-club-colour="ocean"] { --cn-club-colour: #12617a; }
[data-club-colour="indigo"] { --cn-club-colour: #4945a6; }
[data-club-colour="violet"] { --cn-club-colour: #6b3e9b; }
[data-club-colour="purple"] { --cn-club-colour: #733d80; }
[data-club-colour="plum"] { --cn-club-colour: #6a3e64; }
[data-club-colour="rose"] { --cn-club-colour: #953f70; }
[data-club-colour="slate"] { --cn-club-colour: #475569; }
[data-club-colour="graphite"] { --cn-club-colour: #444b57; }
[data-club-colour="midnight"] { --cn-club-colour: #30354b; }
[data-club-colour="turquoise"] { --cn-club-colour: #2dd4bf; --cn-club-foreground: #102a43; }
[data-club-colour="sky"] { --cn-club-colour: #38bdf8; --cn-club-foreground: #102a43; }
[data-club-colour="lilac"] { --cn-club-colour: #c084fc; --cn-club-foreground: #102a43; }
[data-club-colour="pink"] { --cn-club-colour: #f472b6; --cn-club-foreground: #102a43; }
[data-club-colour="coral"] { --cn-club-colour: #fb7185; --cn-club-foreground: #102a43; }
[data-club-colour="orange"] { --cn-club-colour: #fb923c; --cn-club-foreground: #102a43; }
[data-club-colour="gold"] { --cn-club-colour: #facc15; --cn-club-foreground: #102a43; }
[data-club-colour="emerald"] { --cn-club-colour: #34d399; --cn-club-foreground: #102a43; }
[data-club-colour="forest"] { --cn-club-colour: #166534; }
.cn-club-accent, .cn-colour-swatch, .cn-colour-swatch:hover, .cn-colour-swatch:active {
    background: var(--cn-club-colour) !important; color: var(--cn-club-foreground) !important;
}
.cn-colour-swatch { width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid rgba(255,255,255,.35); }
.cn-colour-picker { display: grid; grid-template-columns: repeat(8, 2.75rem); gap: .75rem; }
@media(max-width:575.98px) {
    .cn-colour-picker { grid-template-columns: repeat(4, 2.75rem); }
}
.cn-colour-swatch i { visibility: hidden; font-size: 1.25rem; }
.cn-colour-swatch[aria-pressed="true"] i { visibility: visible; }
.cn-colour-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--tblr-bg-surface), 0 0 0 4px var(--tblr-body-color); }
.cn-colour-swatch:focus-visible { outline: 3px solid var(--tblr-body-color); outline-offset: 4px; }
.cn-colour-dot { display: inline-block; width: 1rem; height: 1rem; flex: 0 0 1rem; vertical-align: middle; border-radius: 50%; background: var(--cn-club-colour); border: 1px solid rgba(128,128,128,.5); }

/* Club pages share an accent; the common account sidebar defaults to ClubNow teal. */
[data-club-theme] {
    --tblr-primary: var(--cn-theme-accent);
    --tblr-primary-rgb: var(--cn-theme-accent-rgb);
    --tblr-primary-fg: var(--cn-theme-on-accent);
    --tblr-primary-darken: var(--cn-theme-accent-hover);
    --tblr-primary-lt: var(--cn-theme-subtle-light);
    --tblr-link-color: var(--cn-theme-link-light);
    --tblr-link-hover-color: var(--cn-theme-link-hover-light);
    --cn-theme-subtle: var(--cn-theme-subtle-light);
    --cn-theme-on-subtle: var(--cn-theme-on-subtle-light);
    --cn-theme-control: var(--cn-theme-link-light);
}
[data-club-theme][data-bs-theme=dark], [data-bs-theme=dark] [data-club-theme] {
    --tblr-primary-lt: var(--cn-theme-subtle-dark);
    --tblr-link-color: var(--cn-theme-link-dark);
    --tblr-link-hover-color: var(--cn-theme-link-hover-dark);
    --cn-theme-subtle: var(--cn-theme-subtle-dark);
    --cn-theme-on-subtle: var(--cn-theme-on-subtle-dark);
}
/* Use Tabler's page header spacing, without a detached decorative bar. */
.page-wrapper { min-width: 0; }
.page-header .col { min-width: 0; }
.cn-sidebar .cn-nav-heading .nav-link { min-height: auto; padding-top: .6rem; padding-bottom: .2rem; font-size: .65rem; letter-spacing: .08em; opacity: .75; }
.cn-disclosure > summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; }
.cn-disclosure[open] > summary { border-bottom: 1px solid var(--tblr-border-color); }
.cn-disclosure > .card-body > .card:last-child { margin-bottom: 0 !important; }
/* Contain screen-reader-only labels inside horizontally scrolling tables. */
.table-responsive { position: relative; }
.cn-calendar-place { min-width: 0; max-width: 100%; }
.cn-calendar-place .form-select { min-width: 0; width: 100%; }
@media (min-width: 992px) {
    .cn-sidebar { overflow-y: auto; }
}
@media (max-width: 575.98px) {
    .cn-member-table, .cn-member-table tbody, .cn-fee-table, .cn-fee-table tbody { display: block; }
    .cn-member-table thead, .cn-fee-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .cn-member-table tr, .cn-fee-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; padding: 1rem; border-bottom: 1px solid var(--tblr-border-color); }
    .cn-member-table td, .cn-fee-table td { padding: 0 !important; border: 0; min-width: 0; }
    .cn-person-name, .cn-person-contact, .cn-person-access, .cn-person-roles { grid-column: 1; }
    [data-member-dialog="add"] .modal-footer [data-save-member] { flex: 1 0 100%; }
    .cn-person-name { font-weight: 500; }
    .cn-person-contact { font-size: .8125rem; }
    .cn-person-actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .cn-fee-person { grid-column: 1; grid-row: 1; font-weight: 500; }
    .cn-fee-description { grid-column: 1; grid-row: 2; color: var(--tblr-secondary); }
    .cn-fee-amount { grid-column: 2; grid-row: 1; font-weight: 600; }
    .cn-fee-state { grid-column: 2; grid-row: 2; text-align: right; }
    .cn-fee-date { grid-column: 1; grid-row: 3; align-self: center; font-size: .8125rem; }
    .cn-fee-open { grid-column: 2; grid-row: 3; text-align: right; }
}
[data-club-theme] .btn-primary {
    --tblr-btn-border-color: var(--tblr-link-color);
    --tblr-btn-hover-border-color: var(--tblr-link-hover-color);
    --tblr-btn-active-border-color: var(--tblr-link-hover-color);
    --tblr-btn-active-bg: var(--cn-theme-accent-active);
}
[data-club-theme] .btn-outline-primary {
    --tblr-btn-color: var(--tblr-link-color);
    --tblr-btn-border-color: var(--tblr-link-color);
}
[data-club-theme] .cn-club-wizard [data-wizard-back],
[data-club-theme] .cn-club-wizard [data-edit-step],
[data-club-theme] .card-header .btn:not(.btn-primary) {
    --tblr-btn-active-color: var(--cn-theme-on-subtle);
    --tblr-btn-active-bg: var(--cn-theme-subtle);
}
[data-club-theme] .btn-primary:focus-visible,
[data-club-theme] .btn-outline-primary:focus-visible,
[data-club-theme] a:focus-visible {
    outline: 2px solid var(--tblr-link-color); outline-offset: 3px;
}
[data-club-theme] .text-primary { color: var(--tblr-link-color) !important; }
[data-club-theme] .link-primary { color: var(--tblr-link-color) !important; }
[data-club-theme] .link-primary:hover, [data-club-theme] .link-primary:focus { color: var(--tblr-link-hover-color) !important; }
[data-club-theme] .bg-primary-lt {
    color: var(--cn-theme-on-subtle) !important; background-color: var(--cn-theme-subtle) !important;
}
[data-club-theme] .text-bg-primary { color: var(--cn-theme-on-accent) !important; }
[data-club-theme] .nav-pills .nav-link.active,
[data-club-theme] .nav-pills .show > .nav-link {
    color: var(--cn-theme-on-accent); background-color: var(--cn-theme-accent);
}
[data-club-theme] .cn-club-wizard .steps { --tblr-steps-color: var(--tblr-link-color); }
[data-club-theme] .cn-club-wizard .step-item:before { color: #fff; background: var(--cn-theme-control); border: 1px solid var(--tblr-link-color); }
[data-club-theme] .cn-club-wizard .step-item.active ~ .step-item:before {
    color: var(--tblr-secondary); background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color);
}
/* A darker control fill keeps Tabler's white check/radio glyph readable for bright accents. */
[data-club-theme] .form-check-input:checked:not(.is-invalid):not(.is-valid),
[data-club-theme] .form-check-input[type=checkbox]:indeterminate:not(.is-invalid):not(.is-valid) {
    background-color: var(--cn-theme-control); border-color: var(--tblr-link-color);
}
[data-club-theme] .form-control:focus:not(.is-invalid):not(.is-valid),
[data-club-theme] .form-select:focus:not(.is-invalid):not(.is-valid),
[data-club-theme] .form-check-input:focus:not(.is-invalid):not(.is-valid),
[data-club-theme] .ts-wrapper.focus:not(.is-invalid) .ts-control {
    border-color: var(--tblr-link-color); outline: 1px solid var(--tblr-link-color); outline-offset: 1px;
}
[data-club-theme] .ts-dropdown .active { color: var(--cn-theme-on-subtle); background: var(--cn-theme-subtle); }
[data-club-theme] .ts-wrapper.multi .ts-control > div { color: var(--cn-theme-on-subtle); background: var(--cn-theme-subtle); }

/* The shell wears the theme (Louis, 2026-10-02): ClubNow teal on account pages,
   the club's own colour on its pages. Everything in the sidebar is drawn in
   the one foreground ClubColour pairs with that colour (white on deep colours,
   dark on bright ones), so the logo, text, icons and controls stay readable
   whichever of the sixteen a club picks. Emphasis is a tint of that foreground,
   never a second colour. The fallbacks are teal, for a page with no theme. */
.cn-sidebar {
    --cn-shell-bg: var(--cn-theme-accent, #0e5c63);
    --cn-shell-fg: var(--cn-theme-on-accent, #fff);
    --cn-shell-hover: color-mix(in srgb, var(--cn-shell-fg) 7%, transparent);
    --cn-shell-tint: color-mix(in srgb, var(--cn-shell-fg) 16%, transparent);
    --cn-shell-line: color-mix(in srgb, var(--cn-shell-fg) 24%, transparent);
    --tblr-navbar-bg: var(--cn-shell-bg);
    --tblr-navbar-border-color: transparent;
    --tblr-navbar-color: var(--cn-shell-fg);
    --tblr-navbar-hover-color: var(--cn-shell-fg);
    --tblr-navbar-active-color: var(--cn-shell-fg);
    --tblr-navbar-active-bg: var(--cn-shell-tint);
    --tblr-navbar-active-border-color: var(--cn-shell-fg);
    --tblr-navbar-toggler-color: var(--cn-shell-fg);
    background: var(--cn-shell-bg);
    color: var(--cn-shell-fg);
    transition: background-color .15s ease, color .15s ease;
}
.cn-sidebar .navbar-brand, .cn-sidebar .navbar-toggler, .cn-sidebar .nav-link, .cn-sidebar .nav-link-icon { color: var(--cn-shell-fg); }
.cn-sidebar a.nav-link:hover { color: var(--cn-shell-fg); background: var(--cn-shell-hover); }
.cn-sidebar .active .nav-link, .cn-sidebar .active .nav-link:hover {
    color: var(--cn-shell-fg); background: var(--cn-shell-tint); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--cn-shell-fg);
}
.cn-sidebar-account { border-top: 1px solid var(--cn-shell-line); }
.cn-sidebar .cn-sidebar-caption { opacity: .75; }
.cn-sidebar .cn-sidebar-club { min-height: 6rem; color: var(--cn-shell-fg); border-bottom: 1px solid var(--cn-shell-line); }
.cn-sidebar-club > div { min-width: 0; }
.cn-sidebar-caption { color: inherit; }
/* R3-UI21: the space's name is the link to its overview, drawn as the plain name it was. */
.cn-sidebar .cn-current-space-name { color: inherit; text-decoration: none; }
.cn-sidebar .cn-current-space-name:hover { color: inherit; text-decoration: underline; }
/* R3-UI21: the one quiet line while a club has no tool on, in the headings' secondary style. */
.cn-sidebar .cn-sidebar-note p { padding: .75rem 1rem .25rem; line-height: 1.4; }
.cn-sidebar .cn-sidebar-note a { color: inherit; text-decoration: underline; }
/* The identity mark is the sidebar inverted, so it stands out on any colour. */
.cn-sidebar .cn-sidebar-avatar { color: var(--cn-shell-bg); background: var(--cn-shell-fg); }
.cn-sidebar .cn-sidebar-btn {
    --tblr-btn-color: var(--cn-shell-fg);
    --tblr-btn-bg: transparent;
    --tblr-btn-border-color: var(--cn-shell-fg);
    --tblr-btn-hover-color: var(--cn-shell-bg);
    --tblr-btn-hover-bg: var(--cn-shell-fg);
    --tblr-btn-hover-border-color: var(--cn-shell-fg);
    --tblr-btn-active-color: var(--cn-shell-bg);
    --tblr-btn-active-bg: var(--cn-shell-fg);
    --tblr-btn-active-border-color: var(--cn-shell-fg);
}
.cn-sidebar a:focus-visible, .cn-sidebar .nav-link:focus-visible { outline: 2px solid var(--cn-shell-fg); outline-offset: -3px; }
.cn-sidebar .navbar-toggler:focus-visible, .cn-sidebar .cn-sidebar-btn:focus-visible { outline: 2px solid var(--cn-shell-fg); outline-offset: 3px; }
/* The calendar (R7-J). FullCalendar draws it; these give it Tabler's surfaces and ClubNow's teal, in light and dark. */
.cn-calendar { --fc-border-color: var(--tblr-border-color); --fc-page-bg-color: var(--tblr-bg-surface); --fc-neutral-bg-color: var(--tblr-bg-surface-secondary); --fc-list-event-hover-bg-color: var(--tblr-bg-surface-secondary);
    --fc-today-bg-color: rgba(var(--tblr-primary-rgb), .08); --fc-event-bg-color: var(--tblr-primary); --fc-event-border-color: var(--tblr-primary); --fc-event-text-color: #fff; --fc-small-font-size: .8125rem; }
[data-bs-theme=dark] .cn-calendar { --fc-today-bg-color: rgba(128,200,205,.12); }
.cn-calendar a { text-decoration: none; }
.cn-calendar .fc-daygrid-dot-event, .cn-calendar .fc-list-event-title a { color: var(--tblr-body-color); }
.cn-calendar .fc-col-header-cell-cushion, .cn-calendar .fc-daygrid-day-number, .cn-calendar .fc-list-day-text, .cn-calendar .fc-list-day-side-text, .cn-calendar .fc-multimonth-title { color: var(--tblr-body-color); }
.cn-calendar .fc-multimonth { border-color: var(--tblr-border-color); }
.cn-calendar .fc-event { cursor: pointer; }
.cn-calendar .cn-cal-cancelled .fc-event-title, .cn-calendar .cn-cal-cancelled .fc-list-event-title a, .cn-calendar .cn-cal-cancelled .fc-event-time { text-decoration: line-through; }
.cn-calendar .cn-cal-cancelled { opacity: .65; }
.cn-calendar .cn-cal-money { --fc-event-bg-color: #f59f00; --fc-event-border-color: #f59f00; --fc-event-text-color: #1d273b; cursor: default; }
.cn-calendar .cn-cal-held { --fc-event-bg-color: var(--tblr-secondary); --fc-event-border-color: var(--tblr-secondary); cursor: default; }
.cn-calendar .cn-cal-mark { font-weight: 400; opacity: .85; }
.cn-calendar.cn-calendar-clickable .fc-daygrid-day, .cn-calendar.cn-calendar-clickable .fc-timegrid-slot { cursor: pointer; }
.cn-cal-key { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; vertical-align: -1px; background: var(--tblr-primary); }
.cn-cal-key-cancelled { opacity: .5; }
.cn-cal-key-money { background: #f59f00; }
.cn-cal-key-held { background: var(--tblr-secondary); }
/* A month's title goes onto another line between words, and is NEVER BROKEN INSIDE A WORD (R10-A): a word wider than its day is cut short with an ellipsis. The whole title is in its tooltip, on the list and one click away. */
.cn-calendar .fc-daygrid-event { white-space: normal; align-items: flex-start; } .cn-calendar .fc-daygrid-event .fc-event-title { min-width: 0; overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: manual; text-overflow: ellipsis; } .cn-calendar .fc-daygrid-event-dot { margin-top: .4em; flex-shrink: 0; }
/* And where there is not room for a few letters of it beside the time, the title goes under the time and has the day's whole width. */
.cn-calendar .fc-daygrid-dot-event { flex-wrap: wrap; } .cn-calendar .fc-daygrid-dot-event .fc-event-title { flex: 1 0 4.5em; }
/* On a phone a month's day is about 45 pixels wide: an event with a time shows its time, and its title is in the list and one tap away. A whole-day event and money due keep their words, small. No sideways scroll. */
@media (max-width: 767.98px) {
    .cn-calendar .fc-daygrid-day-number { padding: 2px; font-size: .75rem; } .cn-calendar .fc-col-header-cell-cushion { padding: 2px 0; font-size: .75rem; }
    .cn-calendar .fc-dayGridMonth-view .fc-daygrid-dot-event .fc-event-title, .cn-calendar .fc-dayGridMonth-view .fc-daygrid-event-dot { display: none; }
    .cn-calendar .fc-dayGridMonth-view .fc-daygrid-dot-event { padding: 1px 0; justify-content: center; }
    .cn-calendar .fc-dayGridMonth-view .fc-daygrid-dot-event .fc-event-time { margin: 0; font-size: .7rem; font-weight: 600; }
    .cn-calendar .fc-dayGridMonth-view .fc-daygrid-block-event .fc-event-title { font-size: .625rem; white-space: normal; line-height: 1.15; }
    .cn-calendar .fc-dayGridMonth-view .fc-daygrid-block-event .fc-event-time { display: none; }
}

/* R7-UI2: a Tabler workspace with room for the calendar, including at laptop widths. */
.cn-calendar-page > .page-header > .container-xl, .cn-calendar-page > .page-body > .container-xl { max-width: none; }
.cn-calendar-page > .page-header { margin-top: 1rem; }
.cn-calendar-page > .page-body { margin-top: 1rem; }
.cn-calendar-page > .page-header .col-12 { width: auto; }
.cn-calendar-workspace > .card-body { padding-top: .875rem; }
.cn-calendar-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.cn-calendar-views { display: flex; gap: .15rem; padding: .25rem; background: var(--tblr-bg-surface-secondary); border-radius: var(--tblr-border-radius); }
.cn-calendar-views .btn { border: 0; background: transparent; box-shadow: none; padding: .4rem .7rem; }
.cn-calendar-views .btn.active { background: var(--tblr-bg-surface); color: var(--tblr-primary); box-shadow: 0 1px 3px #00000015; }
.cn-calendar-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cn-calendar-tools .input-icon { min-width: 8rem; }
.cn-calendar-tools > .btn, .cn-calendar-tools > details { flex-shrink: 0; }
.cn-calendar-tools .btn-icon { width: 2rem; min-width: 2rem; height: 2rem; font-size: 1rem; }
.cn-calendar-search { flex: 0 1 22rem; }
.cn-calendar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-left: auto; }
.cn-calendar-popover { position: relative; }
.cn-calendar-popover > summary { list-style: none; }
.cn-calendar-popover > summary::-webkit-details-marker { display: none; }
.cn-calendar-popover-panel { position: absolute; top: calc(100% + .5rem); z-index: 20; width: 18rem; max-width: calc(100vw - 3rem); padding: 1rem; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); background: var(--tblr-bg-surface); box-shadow: var(--tblr-box-shadow-dropdown); }
.cn-calendar-help .cn-calendar-popover-panel { right: 0; }
.cn-calendar-date .cn-calendar-popover-panel { left: 0; width: 14rem; }
.cn-calendar-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.cn-calendar-canvas { padding: 0 1.25rem 1.25rem; min-width: 0; }
.cn-calendar .fc-dayGridMonth-view .fc-daygrid-day-frame { min-height: 100px; }
.cn-calendar .fc-col-header-cell { padding: .5rem 0; background: var(--tblr-bg-surface-secondary); font-size: .75rem; font-weight: 600; }
.cn-calendar .fc-daygrid-day-number { padding: .5rem .65rem; }
.cn-calendar .fc-day-today .fc-daygrid-day-number { color: var(--tblr-primary); font-weight: 700; }
.cn-calendar .fc-daygrid-event { border-radius: 4px; margin: 2px 4px; padding: 3px 4px; }
.cn-calendar .fc-daygrid-dot-event { background: color-mix(in srgb, var(--fc-event-border-color) 9%, var(--tblr-bg-surface)); }
.cn-calendar .cn-cal-type-meeting { --fc-event-bg-color: #4263eb; --fc-event-border-color: #4263eb; }
.cn-calendar .cn-cal-type-social { --fc-event-bg-color: #9c36b5; --fc-event-border-color: #9c36b5; }
.cn-calendar .cn-cal-type-match { --fc-event-bg-color: #d97706; --fc-event-border-color: #d97706; }
.cn-calendar .cn-cal-type-other { --fc-event-bg-color: #667382; --fc-event-border-color: #667382; }
.cn-cal-key-meeting { background: #4263eb; } .cn-cal-key-social { background: #9c36b5; } .cn-cal-key-match { background: #d97706; }
.cn-calendar-dialog { padding: 0; width: min(560px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius-lg); background: var(--tblr-bg-surface); color: var(--tblr-body-color); box-shadow: 0 20px 80px #0003; }
.cn-calendar-dialog::backdrop { background: #18243380; }
.cn-calendar-dialog .card-title { line-height: 1.4; }
.cn-calendar-description { white-space: pre-wrap; }
.cn-calendar-expanded { position: fixed; inset: 1rem; z-index: 1040; overflow: auto; }
.cn-calendar-focusing { overflow: hidden; }
@media (max-width: 767.98px) {
    .cn-calendar-canvas { padding: 0 .5rem .75rem; }
    .cn-calendar-toolbar { gap: .75rem; }
    .cn-calendar-toolbar .h3 { font-size: .9rem; }
    .cn-calendar-toolbar > div:first-child { gap: .25rem !important; }
    .cn-calendar-toolbar > div:first-child .btn { padding: .35rem .5rem; }
    .cn-calendar-toolbar > div:first-child .btn-icon { width: 2rem; min-width: 2rem; height: 2rem; }
    .cn-calendar-views { width: 100%; }
    .cn-calendar-views .btn { flex: 1; padding: .4rem .5rem; }
    .cn-calendar-tools { display: grid; grid-template-columns: 1fr auto auto auto; }
    .cn-calendar-tools .input-icon { grid-column: 1 / 4; }
    .cn-calendar-meta { margin-left: 0; gap: 0; flex-direction: column; align-items: flex-start; }
    .cn-calendar-help { justify-self: end; }
    .cn-calendar-date .cn-calendar-popover-panel { left: auto; right: 0; }
    .cn-calendar-filters { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .cn-calendar .fc-list-event-time { white-space: normal; min-width: 4rem; }
    .cn-calendar .fc-list-event-title { word-break: normal; }
    .cn-calendar .fc-dayGridMonth-view .fc-daygrid-day-frame { min-height: 68px; }
}
.cn-calendar .fc-timegrid-event .fc-event-resizer-end { display: block; height: 8px; bottom: 0; cursor: ns-resize; }
.cn-calendar .fc-timegrid-event .fc-event-resizer-end::after { content: ''; display: block; width: 22px; height: 2px; margin: 3px auto; background: currentColor; opacity: .65; border-radius: 2px; }
@media (max-width: 767.98px) {
    .cn-calendar-filter-wide { grid-column: 1 / -1; }
}

/* R7-UI3: event creation stays in the calendar, with the existing server form. */
.cn-calendar-create { width: min(760px, calc(100% - 2rem)); }
.cn-calendar-create > .card-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; padding: 1rem 1.25rem; background: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); }
.cn-calendar-create [data-event-form] > .card-body:first-of-type > .card-title { display: none; }
.cn-calendar-create [data-event-form], .cn-calendar-create [data-series-confirm] { border: 0; box-shadow: none; border-radius: 0; }
.cn-calendar-create [data-cal-create-body]:empty { min-height: 5rem; }
.cn-calendar-create .card-footer { background: var(--tblr-bg-surface); }
.cn-calendar-create form > .card-footer { position: sticky; bottom: 0; z-index: 1; border-top: 1px solid var(--tblr-border-color); }
@media (max-width: 575.98px) {
    .cn-calendar-create { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
    .cn-calendar-create .card-body { padding: 1rem; }
}

/* Keep long activity descriptions from stretching every card in the row. */
.cn-club-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cn-space-card { transition: border-color .15s ease, box-shadow .15s ease; }
.cn-space-card:hover, .cn-space-card:focus-within { border-color: var(--tblr-primary); box-shadow: var(--tblr-box-shadow); }
.cn-space-card .stretched-link:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 3px; border-radius: 2px; }

/* Personal calendar uses club wall times and the shared teal palette. */
#account-calendar { --fc-event-bg-color: var(--tblr-primary); --fc-event-border-color: var(--tblr-primary); --fc-list-event-hover-bg-color: var(--tblr-primary-lt); }
#account-calendar .fc-daygrid-event { white-space: normal; overflow-wrap: anywhere; padding: 2px; font-size: .75rem; }
#account-calendar .fc-daygrid-event span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Account controls belong to the top bar; space controls anchor the sidebar. */
/* Tabler's centred-page scrollbar offset would leave a gap beside the fixed sidebar. */
html.cn-app-shell { margin-left: 0; scrollbar-gutter: stable; }
.cn-app-shell .page-body [id] { scroll-margin-top: 4.25rem; }
.cn-account-header { min-height: 52px; padding: .25rem 0; background: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); position: sticky; top: 0; z-index: 1040; }
.cn-account-header .navbar-brand-image { height: 24px; width: auto; }
.cn-account-header .navbar-brand { padding: 0; color: var(--tblr-primary); }
.cn-account-header .container-fluid { flex-wrap: nowrap; }
.cn-account-name { max-width: 12rem; }
.cn-notifications { position: relative; width: 40px; height: 40px; min-width: 40px; padding: 0; flex-shrink: 0; }
.cn-notifications .icon { margin: 0; }
.cn-notifications [data-notification-count] { position: absolute; top: 1px; right: 0; left: auto; margin: 0; transform: none; min-width: 17px; height: 17px; padding: 0 3px; border: 2px solid var(--tblr-bg-surface); border-radius: 999px; font-size: 10px; line-height: 13px; font-weight: 600; color: var(--tblr-red-fg); }
.cn-notifications [data-notification-count][hidden], [data-personal-notification-count][hidden] { display: none; }
.cn-app-shell .cn-context-switcher [data-personal-notification-count].badge { position: static; transform: none; flex-shrink: 0; min-width: 1.25rem; padding: .2rem .35rem; border-radius: 999px; color: var(--tblr-red-fg); font-size: .7rem; line-height: 1; }
.cn-notifications[aria-current=page] { background: var(--tblr-primary-lt); color: var(--tblr-primary); }
.cn-shell-menu { position: relative; }
.cn-shell-menu > summary { cursor: pointer; list-style: none; min-height: 40px; }
.cn-shell-menu > summary::-webkit-details-marker { display: none; }
.cn-shell-menu > summary:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: -2px; }
.cn-account-menu > summary:hover, .cn-account-menu[open] > summary { background: var(--tblr-bg-surface-secondary); }
.cn-account-menu > .dropdown-menu { position: absolute; top: calc(100% + .5rem); right: 0; left: auto; width: 16rem; max-width: calc(100vw - 2rem); }
.cn-account-menu .dropdown-item { white-space: normal; }
.cn-current-space { border-bottom: 1px solid var(--cn-shell-line); flex-shrink: 0; }
.cn-sidebar-account { flex-shrink: 0; }
.cn-sidebar .cn-footer-menu { width: 100%; }
.cn-sidebar .cn-footer-menu > summary:hover { background: var(--cn-shell-hover); }
.cn-sidebar .cn-footer-menu > summary:focus-visible { outline-color: var(--cn-shell-fg); }
.cn-nav-backdrop { display: none; }
body.cn-drawer-open { overflow: hidden; }
@media (min-width: 992px) {
    .cn-sidebar { overflow: visible; height: 100dvh; }
    .cn-sidebar.navbar-vertical .navbar-brand { justify-content: flex-start; width: 100%; min-height: 52px; margin: 0; padding: .75rem 1rem; }
    .cn-sidebar > .container-fluid { height: 100%; min-height: 0; }
    .cn-sidebar .navbar-collapse { min-height: 0; flex: 1; width: 100%; overflow: visible; }
    .cn-sidebar-navigation { min-height: 0; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
}
@media (max-width: 991.98px) {
    .cn-sidebar { display: none; position: fixed; inset: 52px auto 0 0; width: min(320px, 100%); padding: 0; z-index: 1035; }
    .cn-sidebar:has(.navbar-collapse.show), .cn-sidebar:has(.navbar-collapse.collapsing) { display: flex; }
    .cn-sidebar > .container-fluid { height: 100%; padding: 0; align-items: stretch; }
    .cn-sidebar .navbar-collapse.show { display: flex; flex-direction: column; height: 100%; }
    .cn-sidebar .navbar-collapse { width: 100%; min-height: 0; }
    .cn-sidebar-navigation { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .cn-sidebar:has(.navbar-collapse.show) ~ .cn-nav-backdrop { display: block; position: fixed; inset: 52px 0 0; z-index: 1030; border: 0; background: var(--tblr-dark); opacity: .5; }
}
@media print {
    .cn-sidebar, .cn-account-header, .cn-nav-backdrop, .tracy-debug, #tracy-debug { display: none !important; }
    .page-wrapper { margin-left: 0 !important; }
    .page-header { display: block !important; }
}

[data-payment-club][hidden], [data-payment-filters][hidden] { display: none !important; }
/* Tabler's vertical navbar treats dropdowns as inline submenus; these open upwards. */
.cn-sidebar.navbar-vertical.navbar-expand-lg .navbar-collapse .cn-footer-panel {
    position: absolute; inset: auto .5rem calc(100% + .25rem) .5rem; width: auto; max-height: min(55dvh, 28rem); overflow-y: auto;
    padding: .5rem 0; margin: 0; background: var(--tblr-bg-surface); color: var(--tblr-body-color);
    border: 1px solid var(--tblr-border-color); box-shadow: var(--tblr-box-shadow-dropdown); z-index: 1040;
}
.cn-sidebar.navbar-vertical.navbar-expand-lg .navbar-collapse .cn-footer-panel .dropdown-item,
.cn-sidebar.navbar-vertical.navbar-expand-lg .navbar-collapse .cn-footer-panel .nav-link {
    padding: .6rem 1rem; color: var(--tblr-body-color); white-space: normal; overflow-wrap: anywhere;
}
.cn-sidebar .cn-footer-panel .nav-link-icon { color: inherit; }
.cn-sidebar.navbar-vertical.navbar-expand-lg .navbar-collapse .cn-footer-panel .dropdown-item:hover,
.cn-sidebar.navbar-vertical.navbar-expand-lg .navbar-collapse .cn-footer-panel .dropdown-item.active,
.cn-sidebar.navbar-vertical.navbar-expand-lg .navbar-collapse .cn-footer-panel .nav-link:hover,
.cn-sidebar.navbar-vertical.navbar-expand-lg .navbar-collapse .cn-footer-panel .active .nav-link {
    background: var(--tblr-primary-lt); color: var(--tblr-primary); box-shadow: none;
}
.cn-sidebar .cn-footer-panel a:focus-visible { outline-color: var(--tblr-primary); }

/* Search starts with authorised navigation and spaces; record search can follow. */
.cn-header-search { position: relative; flex: 0 1 26rem; min-width: 0; }
.cn-search-results { position: absolute; inset: calc(100% + .5rem) 0 auto; max-height: min(65dvh, 28rem); overflow-y: auto; }
.cn-search-results[hidden], .cn-header-search[hidden] { display: none !important; }
.cn-search-results .dropdown-item { white-space: normal; overflow-wrap: anywhere; }
.cn-search-results a:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: -2px; background: var(--tblr-primary-lt); }
@media (max-width: 991.98px) {
    .cn-header-search { position: static; flex: 0 0 auto; margin-left: auto; }
    .cn-search-box { display: none; position: absolute; top: calc(100% + .5rem); left: .75rem; right: .75rem; padding: .5rem; background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); box-shadow: var(--tblr-box-shadow-dropdown); }
    .cn-header-search[data-open] .cn-search-box { display: block; }
    .cn-search-results { top: 100%; }
}
@media (max-width: 375px) {
    .cn-account-header .navbar-brand-image { width: 80px; height: auto; }
    .cn-account-header .container-fluid { gap: .25rem !important; }
}
/* Role editor summaries stay within the page and leave actions reachable. */
.cn-role-save { position: sticky; bottom: .75rem; z-index: 5; }
[data-role-person][hidden] { display: none !important; }
@media (min-width: 992px) {
    .cn-role-summary { position: sticky; top: 4.25rem; max-height: calc(100dvh - 10rem); overflow-y: auto; }
}

/* Compact role editor: all areas scan as rows, details stay with their area. */
.cn-permission-area { min-width: 0; margin: 0; border: 0; border-top: 1px solid var(--tblr-border-color); }
.cn-permission-heading { min-height: 3.25rem; }
.cn-access-preset { width: 10rem; }
.cn-role-options { max-height: 16rem; overflow-y: auto; }
@media (max-width: 575.98px) {
    .cn-permission-heading > .flex-fill { flex-basis: 100%; }
    .cn-access-preset { flex: 1; }
}

/* J1: the import review. Names and addresses stay on one line and the table scrolls inside its card on a phone; the reasons wrap at a readable width. */
.cn-import-table .cn-import-groups { min-width: 9rem; }
.cn-import-table .cn-import-result { min-width: 15rem; }

/* J2: the privacy notice and the terms read as a document inside a Tabler card. */
.cn-legal h2 { font-size: 1.125rem; margin-top: 1.75rem; margin-bottom: .5rem; }
.cn-legal h2:first-of-type { margin-top: 1rem; }
.cn-legal p, .cn-legal li { max-width: 46rem; }