/* ============================================================
   platform-v2.css — Apple-restrained theme for BS5 pages.
   Scoped under .bs5-page so legacy BS3 pages are untouched.
   ============================================================ */

.bs5-page {
    --brand: #1d4ed8;
    --brand-2: #2563eb;
    --brand-dark: #1e3a8a;

    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-2: #fafafa;
    --border: #e5e5e7;
    --border-strong: #d2d2d7;
    --text: #1d1d1f;
    --text-muted: #6e6e73;
    --text-faint: #86868b;

    --success: #34a853;
    --warning: #f59e0b;
    --danger: #d93025;
    --info: #0a84ff;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow:    0 4px 12px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);

    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 120ms;
    --t: 180ms;

    font-family: var(--font-sans);
    font-feature-settings: "cv11", "ss01", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg);
    color: var(--text);
    letter-spacing: -0.005em;
}

.bs5-page h1, .bs5-page h2, .bs5-page h3,
.bs5-page h4, .bs5-page h5, .bs5-page h6 {
    color: var(--text);
    letter-spacing: -0.02em;
    font-weight: 600;
    font-family: var(--font-sans);
}

/* ----- App shell ----- */
.bs5-page .app-shell {
    min-height: 100vh;
    padding-top: 64px;
    display: flex;
    flex-direction: column;
}
/* The 64px above clears the fixed .app-nav. Pages that suppress that nav
   (the payment chain and thank-you pages, index3.php's $skipTopMenu) were
   reserving the whole 64px for something that never rendered. Zeroing it
   looked wrong at first, but only because .pay-wrap still carried its -70px
   pull-up at the time; with that gone the page's own 12px is enough.

   Both this and .app-main's padding are zeroed, matching exactly what
   api.php forces in embedded mode. Leaving either in place meant the direct
   page sat lower than the embedded one, and because the two had different
   breakpoints (768px each, stacking) the heading jumped 28px as the window
   crossed it. */
.bs5-page .app-shell.app-shell--nonav {
    padding-top: 0;
}
.bs5-page .app-shell--nonav .app-main {
    padding-top: 0;
}

.bs5-page .app-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
}
.bs5-page .app-nav__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: 0.9375rem;
}
.bs5-page .app-nav__brand img { height: 28px; width: auto; }
.bs5-page .app-nav__brand:hover { color: var(--text); text-decoration: none; }

.bs5-page .app-nav__menu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}
.bs5-page .app-nav__link {
    color: var(--text-muted);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    transition: all var(--t-fast) var(--ease);
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bs5-page .app-nav__link:hover {
    color: var(--text);
    background: var(--surface-2);
    text-decoration: none;
}

.bs5-page .app-nav__burger {
    display: none;
    background: none;
    border: 0;
    color: var(--text);
    margin-left: auto;
    padding: 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
@media (max-width: 768px) {
    .bs5-page .app-nav__menu { display: none; }
    .bs5-page .app-nav__menu.is-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 64px;
        left: 0; right: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: 8px 16px 16px;
        gap: 2px;
        align-items: stretch;
    }
    .bs5-page .app-nav__menu.is-open .app-nav__link {
        padding: 12px;
        font-size: 0.9375rem;
    }
    .bs5-page .app-nav__burger { display: block; }
}

/* ----- Nav dropdowns ----- */
.bs5-page .app-nav__dropdown { position: relative; }
.bs5-page .app-nav__link--dropdown i {
    font-size: 10px;
    color: var(--text-faint);
    transition: transform var(--t-fast) var(--ease);
}
.bs5-page .app-nav__dropdown.is-open .app-nav__link--dropdown i {
    transform: rotate(180deg);
}
.bs5-page .app-nav__dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 180px;
    padding: 4px;
    z-index: 1001;
}
.bs5-page .app-nav__dropdown.is-open .app-nav__dropdown-menu {
    display: block;
}
.bs5-page .app-nav__dropdown-menu .app-nav__link {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}

/* ----- Page container ----- */
.bs5-page .app-main {
    flex: 1;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 24px 64px;
}
@media (max-width: 768px) {
    .bs5-page .app-main { padding: 20px 16px 40px; }
}

.bs5-page .page-header { margin-bottom: 28px; }
.bs5-page .page-header__title {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
}
.bs5-page .page-header__subtitle {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin: 0;
}

.bs5-page .section { margin-bottom: 32px; }
.bs5-page .section__title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin: 0 0 12px;
    padding-left: 4px;
}

/* ----- Tiles ----- */
.bs5-page .tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
@media (max-width: 480px) {
    .bs5-page .tile-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

.bs5-page .tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    min-height: 140px;
}
.bs5-page .tile:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--text);
}
.bs5-page .tile:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}

.bs5-page .tile__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    margin-bottom: 14px;
    font-size: 18px;
}
.bs5-page .tile__icon i { font-size: 18px; }

.bs5-page .tile__count {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 4px;
}
.bs5-page .tile__label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: auto;
}
.bs5-page .tile__label strong { color: var(--text); font-weight: 500; }

.bs5-page .tile__icon-wrap {
    position: relative;
    margin-bottom: 14px;
    width: fit-content;
}
.bs5-page .tile__icon-wrap .tile__icon { margin-bottom: 0; }

.bs5-page .tile__info {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-faint);
    font-size: 13px;
    cursor: help;
    transition: all var(--t-fast) var(--ease);
    z-index: 2;
}
.bs5-page .tile__info:hover {
    background: var(--surface-2);
    color: var(--text-muted);
}

.bs5-page .tile__status {
    position: absolute;
    top: 14px;
    right: 38px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
}
.bs5-page .tile__status--active {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
}
.bs5-page .tile__status--pending,
.bs5-page .tile__status--warning {
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    color: #b45309;
}

.bs5-page .tile__ai-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--text);
    color: white;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1.4;
}

/* ----- Banners ----- */
.bs5-page .banner {
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 0.9375rem;
    border: 1px solid transparent;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.bs5-page .banner__icon {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 16px;
}
.bs5-page .banner__body { flex: 1; }
.bs5-page .banner__title { font-weight: 600; margin: 0 0 2px; }
.bs5-page .banner__text { color: var(--text-muted); margin: 0; }

.bs5-page .banner--info {
    background: color-mix(in srgb, var(--info) 6%, white);
    border-color: color-mix(in srgb, var(--info) 18%, transparent);
}
.bs5-page .banner--info .banner__icon { color: var(--info); }
.bs5-page .banner--warning {
    background: color-mix(in srgb, var(--warning) 8%, white);
    border-color: color-mix(in srgb, var(--warning) 22%, transparent);
}
.bs5-page .banner--warning .banner__icon { color: #b45309; }
.bs5-page .banner--danger {
    background: color-mix(in srgb, var(--danger) 6%, white);
    border-color: color-mix(in srgb, var(--danger) 20%, transparent);
}
.bs5-page .banner--danger .banner__icon { color: var(--danger); }
.bs5-page .banner--success {
    background: color-mix(in srgb, var(--success) 8%, white);
    border-color: color-mix(in srgb, var(--success) 22%, transparent);
}
.bs5-page .banner--success .banner__icon { color: var(--success); }

/* ----- Help card ----- */
.bs5-page .help-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.bs5-page .help-card__body { flex: 1; min-width: 240px; }
.bs5-page .help-card__title { font-size: 1.0625rem; font-weight: 600; margin: 0 0 4px; }
.bs5-page .help-card__text { color: var(--text-muted); margin: 0; font-size: 0.9375rem; }
.bs5-page .help-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ----- Buttons ----- */
.bs5-page .btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 8px 16px;
    transition: all var(--t-fast) var(--ease);
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    line-height: 1.4;
}
.bs5-page .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.bs5-page .btn-primary {
    background: var(--brand-2);
    border-color: var(--brand-2);
    color: #ffffff;
}
.bs5-page .btn-primary:hover,
.bs5-page .btn-primary:focus {
    background: color-mix(in srgb, var(--brand-2) 88%, black);
    border-color: color-mix(in srgb, var(--brand-2) 88%, black);
    color: #ffffff;
}
.bs5-page .btn-tinted {
    background: color-mix(in srgb, var(--brand-2) 10%, transparent);
    border-color: transparent;
    color: var(--brand-2);
}
.bs5-page .btn-tinted:hover,
.bs5-page .btn-tinted:focus {
    background: color-mix(in srgb, var(--brand-2) 16%, transparent);
    color: var(--brand-2);
}

/* ----- Footer ----- */
.bs5-page .app-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 32px 24px;
    text-align: center;
    color: var(--text-faint);
    font-size: 0.8125rem;
}
.bs5-page .app-footer a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}
.bs5-page .app-footer a:hover { color: var(--text); }

.bs5-page .app-footer__cols {
    display: flex;
    justify-content: center;
    gap: 64px;
    flex-wrap: wrap;
    max-width: 720px;
    margin: 0 auto 24px;
    text-align: left;
}
@media (max-width: 480px) {
    .bs5-page .app-footer__cols { gap: 32px; text-align: center; }
}
.bs5-page .app-footer__col { min-width: 160px; }
.bs5-page .app-footer__heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 12px;
}
.bs5-page .app-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bs5-page .app-footer__list li {
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.bs5-page .app-footer__links {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.bs5-page .app-footer__divider {
    height: 1px;
    background: var(--border);
    margin: 24px auto;
    max-width: 720px;
}

.bs5-page .app-footer__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

/* ---------- Microsite nav ------------------------------------------------
   Shared by main_menu.php (platform microsites) and inc/menu-top.php (the
   wildcard hosts), so the two stay identical. Was inline in main_menu.php,
   which is how the wildcard's hand-rolled copy drifted away from it.

   Takes --brand from its nearest ancestor that sets it: .bs5-public on the
   platform, <body class="bs5-page"> on the wildcard. Not fixed-top - the
   platform's own .app-nav is fixed when shown; this bar sits in flow.
   --------------------------------------------------------------------- */
.bs5-microsite-nav {
	background-color: var(--brand);
	padding: 8px 0;
	margin: 0 0 24px;
	border-radius: 6px;
}
/* .bs5-microsite-nav--offset removed. It pushed the microsite nav 50px
   below the platform nav in double-menu mode, leaving a gap; the two
   bars should meet. The shell's own padding-top clears the fixed
   platform nav, so no extra offset is needed. */
.bs5-microsite-nav > .container {
	max-width: 1280px;
	padding: 0 24px;
	margin: 0 auto;
}
.bs5-microsite-nav .navbar-brand,
.bs5-microsite-nav .nav-link {
	color: #fff !important;
	font-weight: 500;
}
.bs5-microsite-nav .navbar-brand {
	font-size: 1.125rem;
	padding: 6px 8px;
}
.bs5-microsite-nav .nav-link {
	padding: 8px 14px;
	border-radius: 6px;
	transition: background 0.15s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.bs5-microsite-nav .nav-link:hover,
.bs5-microsite-nav .nav-link:focus {
	background: rgba(255,255,255,0.14);
}
.bs5-microsite-nav .nav-link.active {
	background: rgba(255,255,255,0.22);
}
.bs5-microsite-nav .badge {
	background: rgba(255,255,255,0.28);
	color: #fff;
	font-weight: 500;
	font-size: 0.72rem;
	border-radius: 10px;
	padding: 2px 7px;
}
.bs5-microsite-nav .navbar-toggler {
	border: 1px solid rgba(255,255,255,0.5);
	color: #fff;
	padding: 4px 10px;
	background: transparent;
}
.bs5-microsite-nav .navbar-toggler:focus {
	box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}
.bs5-microsite-nav .navbar-toggler i { color: #fff; font-size: 1rem; }
@media (max-width: 991px) {
	.bs5-microsite-nav .navbar-nav { gap: 2px; padding-top: 8px; width: 100%; }
	.bs5-microsite-nav .nav-link { justify-content: space-between; width: 100%; }
}

/* ---------- Wildcard / custom-domain hosts -------------------------------
   The wildcard shell has no .app-shell, so the app-shell--microsite rules
   in main_menu.php never reach it. These give it the same treatment: the
   nav is the page's own chrome so it runs edge to edge and square, and the
   content sits in the same 1280px column rather than a Bootstrap
   .container, which collapses to 540px on a narrow viewport and wasted
   most of the width.
   --------------------------------------------------------------------- */
body.bs5-page > .bs5-microsite-nav {
    border-radius: 0;
    margin: 0 0 24px;
}

/* Footer to the bottom of the viewport on short pages.

   The wildcard is the one host whose pages can be shorter than the screen -
   a microsite tab inside the platform shell rarely is. The footer arrives
   inside api.php's response, so it sits three levels down and the flex
   chain has to reach it: body > main > .wildcard-main > .app-footer-wrap.

   dvh rather than vh: mobile browser chrome makes vh overshoot, which would
   leave the footer just below the fold. vh first as the fallback. */
body.bs5-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
body.bs5-page > main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
body.bs5-page > main > .wildcard-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
body.bs5-page .wildcard-main > .app-footer-wrap {
    margin-top: auto;
}
/* .wildcard-main is a full-width wrapper. The 1280px column is applied to
   the embedded content row instead - the same element the microsite shell
   constrains - so the footer, which api.php emits outside .bs5-embedded,
   can span the full width as it does on the platform. */
body.bs5-page .bs5-embedded .bs5-public > .row {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
}
body.bs5-page .bs5-embedded .bs5-public > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}
/* api.php forces the embedded shell white so the widget sits cleanly on any
   partner background. On a wildcard host the shell IS the page, so let the
   body's --bg show through instead. Scoped on body.bs5-page, which only the
   wildcard sets - a partner's own body will not match, so their embeds keep
   the white panel. Out-specifies api.php's !important rule. */
body.bs5-page .bs5-page.bs5-embedded .app-shell {
    background: transparent !important;
}
/* .app-main carries its own padding (32px 24px 64px, or 20px 16px 40px on
   narrow viewports). The sides stacked on top of .wildcard-main's, and the
   bottom left a gap the microsite does not have. app-shell--microsite zeroes
   the lot on the platform; same here. */
body.bs5-page .bs5-page.bs5-embedded .app-main {
    max-width: none;
    padding: 0;
}
@media (max-width: 768px) {
    body.bs5-page > .bs5-microsite-nav > .container { padding: 0 16px; }
    body.bs5-page .bs5-embedded .bs5-public > .row { padding: 0 16px; }
}

/* ---------- ekko-lightbox in a Bootstrap 5 page --------------------------
   ekko-lightbox is a Bootstrap 3 plugin. It builds BS3 modal markup
   (.close rather than .btn-close, and no flex assumptions) and sets an
   inline width on the image from its own measurement, which BS5's modal
   sizing then overflows. Used by include_charity_galleries.php and
   inner194.php; the modal is appended to <body>, so this is scoped on the
   plugin's own class rather than on any page wrapper.
   --------------------------------------------------------------------- */
.ekko-lightbox .modal-dialog {
    max-width: min(94vw, 900px);
    margin: 1.5rem auto;
}
.ekko-lightbox .modal-content {
    border: 0;
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}
.ekko-lightbox .modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #e5e5ea);
}
/* BS3 floated .close right; BS5 does not, so it landed left of the title
   with nothing between them. Ordered explicitly instead of relying on float. */
.ekko-lightbox .modal-header .modal-title {
    order: 1;
    flex: 1 1 auto;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}
.ekko-lightbox .modal-header .close {
    order: 2;
    flex: 0 0 auto;
    margin: 0;
    padding: 4px 8px;
    background: none;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-muted, #6e6e73);
    opacity: 1;
    cursor: pointer;
}
.ekko-lightbox .modal-header .close:hover { color: var(--text, #1d1d1f); }

.ekko-lightbox .modal-body {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* !important because ekko writes an inline width on the image. */
.ekko-lightbox .modal-body img,
.ekko-lightbox .modal-body .ekko-lightbox-item img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 80vh;
    display: block;
}
.ekko-lightbox .ekko-lightbox-container { width: 100% !important; }
.ekko-lightbox .ekko-lightbox-nav-overlay a { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

@media (max-width: 575px) {
    .ekko-lightbox .modal-dialog { max-width: 96vw; margin: 0.75rem auto; }
    .ekko-lightbox .modal-header { padding: 12px 14px; gap: 12px; }
    .ekko-lightbox .modal-body img { max-height: 70vh; }
}

/* ---------- Microsite footer -------------------------------------------
   Compact variant used on pages in $_NO_BOTTOM_MENU (the public microsite
   tabs and the project page), where the full platform footer is suppressed.
   Replaces the inline styles the legacy BS3 branch uses.
   --------------------------------------------------------------------- */
.bs5-page .app-footer--microsite {
    /* margin-top because the microsite shell zeroes .app-main's bottom
       padding, so without it the page content sits on the border-top. */
    margin-top: 48px;
    padding: 24px 24px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.bs5-page .app-footer--microsite .app-footer__poweredby {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    text-decoration: none;
    color: var(--text-muted);
}
.bs5-page .app-footer--microsite .app-footer__poweredby:hover { color: var(--text); }
.bs5-page .app-footer--microsite .app-footer__poweredby img { flex-shrink: 0; display: block; }
.bs5-page .app-footer__poweredby-text { text-align: left; line-height: 1.3; }
.bs5-page .app-footer__poweredby-small { display: block; font-size: 0.625rem; }
.bs5-page .app-footer__poweredby-text > span { display: block; font-size: 0.75rem; }
.bs5-page .app-footer__copy { font-size: 0.75rem; }
.bs5-page .app-footer__credit { font-size: 0.6875rem; color: var(--text-faint); }
.bs5-page .app-footer__legal { font-size: 0.75rem; display: flex; gap: 6px; align-items: center; }

.bs5-page .purple-checked-badge {
    display: inline-block;
    background: white;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: all var(--t-fast) var(--ease);
}
.bs5-page .purple-checked-badge:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
}
.bs5-page .purple-checked-badge img { display: block; }

@media (prefers-reduced-motion: reduce) {
    .bs5-page * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Form cards (used on inner88 Account page and similar)
   ============================================================ */
.bs5-page .card-v2 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    overflow: hidden;
}
.bs5-page .card-v2__header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
}
.bs5-page .card-v2__title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--text);
}
.bs5-page .card-v2__sub {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}
.bs5-page .card-v2__body {
    padding: 20px 24px 24px;
}
.bs5-page .card-v2__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}
.bs5-page .card-v2__actions--split {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
@media (max-width: 480px) {
    .bs5-page .card-v2__header { padding: 16px 16px 12px; }
    .bs5-page .card-v2__body   { padding: 16px; }
}

/* Form layout */
.bs5-page .form-row-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 640px) {
    .bs5-page .form-row-2 { grid-template-columns: 1fr; }
}

.bs5-page .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
}
.bs5-page .form-field--narrow { max-width: 320px; }

.bs5-page .form-field label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.bs5-page .form-field__hint {
    font-weight: 400;
    color: var(--text-faint);
    font-size: 0.75rem;
}

.bs5-page .form-field label.is-invalid-label,
.bs5-page label.is-invalid-label {
    color: var(--danger);
}

/* Inputs */
.bs5-page .form-control {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--text);
    transition: all var(--t-fast) var(--ease);
    width: 100%;
    line-height: 1.4;
}
.bs5-page .form-control:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.bs5-page .form-control.is-invalid {
    border-color: var(--danger);
}
.bs5-page .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}
.bs5-page textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

/* Radio group */
.bs5-page .form-org-label {
    font-size: 0.9375rem;
    color: var(--text);
    margin-bottom: 8px;
}
.bs5-page .form-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}
.bs5-page .form-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--text);
}
.bs5-page .form-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    margin: 0;
    cursor: pointer;
    position: relative;
    transition: all var(--t-fast) var(--ease);
    flex-shrink: 0;
}
.bs5-page .form-radio input[type="radio"]:checked {
    border-color: var(--brand);
    border-width: 5px;
}
.bs5-page .form-radio input[type="radio"]:focus {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* Help tip icon */
.bs5-page .help-tip {
    color: var(--text-faint);
    font-size: 13px;
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}
.bs5-page .help-tip:hover {
    color: var(--text-muted);
    text-decoration: none;
}

/* Form footer (cancel / return links) */
.bs5-page .form-footer-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* ============================================================
   Language tabs (used on inner84 Profile page)
   ============================================================ */
.bs5-page .lang-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border-bottom: 1px solid var(--border);
}
.bs5-page .lang-tabs li {
    margin-bottom: -1px;
}
.bs5-page .lang-tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 8px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--t-fast) var(--ease);
}
.bs5-page .lang-tab img {
    width: 16px;
    height: auto;
    border-radius: 2px;
}
.bs5-page .lang-tab:hover {
    color: var(--text);
}
.bs5-page .lang-tab.is-active {
    color: var(--brand-2);
    border-bottom-color: var(--brand-2);
}

.bs5-page .lang-tab-content > .tab-pane {
    display: none;
}
.bs5-page .lang-tab-content > .tab-pane.active {
    display: block;
}

/* ============================================================
   Colour picker swatch (used on inner84 Branding card)
   ============================================================ */
.bs5-page .form-color {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.bs5-page .form-color input[type="color"] {
    width: 44px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
}
.bs5-page .form-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.bs5-page .form-color input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 4px;
}
.bs5-page .form-color__hex {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Native select inherits form-control styling */
.bs5-page select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}

/* ============================================================
   Logo preview + file drop (used on inner86 Logo upload)
   ============================================================ */
.bs5-page .logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    min-height: 160px;
}
.bs5-page .logo-preview img {
    max-height: 120px;
    max-width: 100%;
    height: auto;
    width: auto;
}
.bs5-page .logo-preview__empty {
    text-align: center;
    color: var(--text-faint);
}
.bs5-page .logo-preview__empty i {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
    opacity: 0.6;
}
.bs5-page .logo-preview__empty p {
    margin: 0;
    font-size: 0.875rem;
}

.bs5-page .file-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--surface-2);
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 36px 24px;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}
.bs5-page .file-drop:hover {
    border-color: var(--brand-2);
    background: color-mix(in srgb, var(--brand-2) 4%, var(--surface-2));
}
.bs5-page .file-drop.is-dragging {
    border-color: var(--brand-2);
    background: color-mix(in srgb, var(--brand-2) 8%, var(--surface-2));
    transform: scale(1.005);
}
.bs5-page .file-drop.has-file {
    border-style: solid;
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 4%, var(--surface-2));
}
.bs5-page .file-drop__icon {
    font-size: 28px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.bs5-page .file-drop.has-file .file-drop__icon {
    color: var(--success);
}
.bs5-page .file-drop__title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 4px;
}
.bs5-page .file-drop__hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.bs5-page .file-drop__filename {
    margin-top: 12px;
    font-size: 0.875rem;
    color: var(--success);
    font-weight: 500;
    word-break: break-all;
}
.bs5-page .file-drop__filename:empty { display: none; }

/* ============================================================
   List page components (used on inner250 Events list)
   ============================================================ */

/* Toolbar-style page header */
.bs5-page .page-header--toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.bs5-page .page-header__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.bs5-page .btn-sm {
    padding: 6px 12px;
    font-size: 0.8125rem;
}

/* Pagination */
.bs5-page .list-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0;
}

/* Empty state */
.bs5-page .empty-state {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
}
.bs5-page .empty-state i {
    font-size: 32px;
    color: var(--text-faint);
    margin-bottom: 12px;
    display: block;
}
.bs5-page .empty-state p {
    margin: 0 0 16px;
    font-size: 0.9375rem;
}

/* ----- Event card (and similar list items) ----- */
.bs5-page .event-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bs5-page .event-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border-left: 3px solid var(--brand-2);
    transition: border-color var(--t-fast) var(--ease);
}
.bs5-page .event-card--past {
    border-left-color: var(--text-faint);
    opacity: 0.85;
}
.bs5-page .event-card--hidden {
    border-left-color: var(--warning);
    background: var(--surface-2);
}

.bs5-page .event-card__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.bs5-page .event-card__image {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.bs5-page .event-card__title-block {
    flex: 1;
    min-width: 0;
}
.bs5-page .event-card__title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--text);
}
.bs5-page .event-card__date {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bs5-page .event-card__pip {
    position: static;
    flex-shrink: 0;
    align-self: center;
}

.bs5-page .event-card__body {
    padding: 12px 20px;
}
.bs5-page .event-card__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
.bs5-page .event-card__action-danger {
    color: var(--danger);
}
.bs5-page .event-card__action-danger:hover,
.bs5-page .event-card__action-danger:focus {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}
.bs5-page .event-card__visibility {
    margin-left: auto;
}

/* ----- Inline metrics (used inside event-card__body for single-tier rows) ----- */
.bs5-page .event-card__metrics {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}
.bs5-page .event-card__metrics > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bs5-page .event-card__metric-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    font-weight: 600;
}
.bs5-page .event-card__metric-value {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.1;
}
.bs5-page .event-card__metric-unit {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 2px;
}

/* ----- Data table (compact, used inside cards) ----- */
.bs5-page .data-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}
.bs5-page .data-table th {
    text-align: left;
    font-weight: 500;
    color: var(--text-faint);
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    padding: 6px 10px 6px 0;
    border-bottom: 1px solid var(--border);
}
.bs5-page .data-table td {
    padding: 8px 10px 8px 0;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.bs5-page .data-table tr:last-child td {
    border-bottom: 0;
}
.bs5-page .data-table th:first-child,
.bs5-page .data-table td:first-child {
    padding-left: 0;
}

/* ----- Toggle switch ----- */
.bs5-page .toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.bs5-page .toggle-switch input {
    display: none;
}
.bs5-page .toggle-switch__track {
    position: relative;
    width: 32px;
    height: 18px;
    background: var(--border-strong);
    border-radius: 999px;
    transition: background var(--t-fast) var(--ease);
    flex-shrink: 0;
}
.bs5-page .toggle-switch__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    transition: transform var(--t-fast) var(--ease);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.bs5-page .toggle-switch input:checked + .toggle-switch__track {
    background: var(--success);
}
.bs5-page .toggle-switch input:checked + .toggle-switch__track::after {
    transform: translateX(14px);
}

/* ----- BS5 modal overrides for v2 ----- */
.bs5-page .modal-content {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.bs5-page .modal-header {
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
}
.bs5-page .modal-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
.bs5-page .modal-body {
    padding: 20px;
}
.bs5-page .modal-footer {
    border-top: 1px solid var(--border);
    padding: 12px 20px;
}

.bs5-page .status-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.bs5-page .status-summary > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bs5-page .status-summary__label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    font-weight: 600;
}
.bs5-page .status-ticket {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.bs5-page .status-ticket:last-child { border-bottom: 0; }
.bs5-page .status-ticket__desc {
    font-weight: 500;
    margin: 0 0 8px;
}
.bs5-page .status-ticket__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.bs5-page .status-ticket__metrics > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.875rem;
}

/* ============================================================
   Custom HTML editor panel (custom_html.php)
   ============================================================ */
.bs5-page .custom-html-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.bs5-page .custom-html-buttons {
    margin-left: auto;
    display: flex;
    gap: 8px;
}
.bs5-page .custom-html-saved {
    font-size: 0.8125rem;
    color: var(--success);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
}
.bs5-page .custom-html-saved.is-visible {
    opacity: 1;
}

/* ============================================================
   Modal extras (ticket_modal.php and similar)
   ============================================================ */
.bs5-page .modal-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin: 0 0 12px;
}
.bs5-page .modal-section-title--spaced {
    margin-top: 24px;
}
.bs5-page .modal-tickets-block {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.bs5-page .form-field__required {
    color: var(--danger);
}
.bs5-page .modal-lg .modal-dialog {
    max-width: 800px;
}

/* ============================================================
   Form layout extras (used on inner221, inner222 event forms)
   ============================================================ */
.bs5-page .form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 8px;
}
@media (max-width: 768px) {
    .bs5-page .form-row-3 { grid-template-columns: 1fr; }
}
.bs5-page .form-field__hint {
    font-size: 0.75rem;
    color: var(--text-faint);
    display: block;
    margin-top: 4px;
}
.bs5-page .form-footer-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-start;
}

/* ============================================================
   Ticket options checkbox list (main_tickets_fields)
   ============================================================ */
.bs5-page .ticket-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bs5-page .ticket-option {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.bs5-page .ticket-option:hover {
    border-color: var(--border-strong);
}
.bs5-page .ticket-option input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}
.bs5-page .ticket-option:has(input:checked) {
    border-color: var(--brand-2);
    background: color-mix(in srgb, var(--brand-2) 4%, var(--surface));
}
.bs5-page .ticket-option__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.bs5-page .ticket-option__body strong {
    font-size: 0.9375rem;
    color: var(--text);
}
.bs5-page .ticket-option__body span {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ============================================================
   Tickets table — secret-link rows
   ============================================================ */
.bs5-page .tickets-table-wrap {
    overflow-x: auto;
    margin: 0 -4px;
}
.bs5-page .tickets-table th,
.bs5-page .tickets-table td {
    padding: 6px 8px;
    vertical-align: middle;
}
.bs5-page .tickets-table .form-control-sm {
    padding: 4px 8px;
    font-size: 0.875rem;
}
.bs5-page .ticket-secret-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bs5-page .ticket-secret-code {
    max-width: 120px;
}
.bs5-page .ticket-secret-link-row {
    background: var(--surface-2);
}
.bs5-page .ticket-secret-link {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bs5-page .ticket-secret-link i {
    color: var(--text-muted);
}

/* ============================================================
   Event image row (current preview + uploader side-by-side)
   ============================================================ */
.bs5-page .event-image-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 640px) {
    .bs5-page .event-image-row { grid-template-columns: 1fr; }
}
.bs5-page .event-image-row__preview {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}
.bs5-page .event-image-row__preview img {
    max-width: 100%;
    max-height: 120px;
    height: auto;
    width: auto;
}

/* Compact file-drop variant for inline use */
.bs5-page .file-drop--compact {
    padding: 20px 16px;
}
.bs5-page .file-drop--compact .file-drop__icon {
    font-size: 22px;
    margin-bottom: 6px;
}

/* ============================================================
   Banner: warning variant (used on inner221 error)
   ============================================================ */
.bs5-page .banner--warning {
    background: color-mix(in srgb, var(--warning) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
}
.bs5-page .banner--warning .banner__icon {
    color: var(--warning);
}

/* ============================================================
   Confirmation prompt (used on inner223 delete event)
   ============================================================ */
.bs5-page .card-v2--danger {
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}

.bs5-page .confirm-prompt {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.bs5-page .confirm-prompt__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
    font-size: 18px;
}
.bs5-page .confirm-prompt__body {
    flex: 1;
}
.bs5-page .confirm-prompt__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--text);
}
.bs5-page .confirm-prompt__text {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.bs5-page .btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}
.bs5-page .btn-danger:hover,
.bs5-page .btn-danger:focus {
    background: color-mix(in srgb, var(--danger) 88%, black);
    border-color: color-mix(in srgb, var(--danger) 88%, black);
    color: #ffffff;
}
/* ============================================================
   Attendees list (inner2000) — responsive table → cards
   ============================================================ */

.bs5-page .attendees-form { margin: 0; }

/* Filter inputs row */
.bs5-page .attendees-filters {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
@media (max-width: 768px) {
    .bs5-page .attendees-filters {
        grid-template-columns: 1fr 1fr;
    }
    .bs5-page .attendees-filters select {
        grid-column: 1 / -1;
    }
}

/* Toolbar (search/reset/csv etc.) */
.bs5-page .attendees-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.bs5-page .attendees-toolbar__spacer { flex: 1; }
@media (max-width: 768px) {
    .bs5-page .attendees-toolbar__spacer { display: none; flex: 0; }
}

/* Meta line (Page X of Y · N total) */
.bs5-page .attendees-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 16px 4px 8px;
}
.bs5-page .attendees-meta__sep { color: var(--text-faint); }

/* The table itself — desktop view */
.bs5-page .attendees-table {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 0.875rem;
}
.bs5-page .attendees-table thead th {
    text-align: left;
    font-weight: 500;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    background: var(--surface-2);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.bs5-page .attendees-table thead th.cell-amount,
.bs5-page .attendees-table thead th.cell-actions {
    text-align: right;
}
.bs5-page .attendees-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.bs5-page .attendees-table tbody tr:last-child td { border-bottom: 0; }
.bs5-page .attendees-table .cell-amount { text-align: right; font-variant-numeric: tabular-nums; }
.bs5-page .attendees-table .cell-actions { text-align: right; }

/* Guest rows — indented, tinted background */
.bs5-page .attendees-table .attendee-row--guest td {
    background: var(--surface-2);
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 0.8125rem;
}
.bs5-page .attendees-table .attendee-row--guest .cell-attendee {
    padding-left: 32px;
}

/* Cell content styles */
.bs5-page .attendees-table .attendee-name {
    font-weight: 500;
    color: var(--text);
    margin-bottom: 2px;
}
.bs5-page .attendees-table .attendee-email a {
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-decoration: none;
}
.bs5-page .attendees-table .attendee-email a:hover { color: var(--brand-2); }
.bs5-page .attendees-table .attendee-company {
    font-size: 0.75rem;
    color: var(--text-faint);
    margin-top: 2px;
}
.bs5-page .attendees-table .event-title {
    color: var(--text);
    font-weight: 500;
    margin-bottom: 2px;
}
.bs5-page .attendees-table .event-date {
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.bs5-page .attendees-table .amount-value {
    font-weight: 500;
    color: var(--text);
}
.bs5-page .attendees-table .amount-currency {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}
.bs5-page .attendees-table .amount-paid {
    font-size: 0.75rem;
    color: var(--success);
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bs5-page .attendees-table .row-actions {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.bs5-page .ticket-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.bs5-page .ticket-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--text);
    white-space: nowrap;
}
.bs5-page .ticket-pill__qty {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.bs5-page .guest-tag {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 4px;
    vertical-align: middle;
}

/* Pagination buttons row */
.bs5-page .pagination-buttons {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.bs5-page .list-pagination .pagination-buttons {
    margin-left: auto;
}

/* ===== Mobile: re-flow table as stacked cards ===== */
@media (max-width: 768px) {
    .bs5-page .attendees-table {
        display: block;
        background: transparent;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    .bs5-page .attendees-table thead { display: none; }
    .bs5-page .attendees-table tbody { display: block; }

    .bs5-page .attendees-table tbody tr.attendee-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name    amount"
            "event   event"
            "tickets tickets"
            "actions actions";
        gap: 6px 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px 14px;
        margin-bottom: 10px;
    }
    .bs5-page .attendees-table tbody tr.attendee-row > td {
        display: block;
        padding: 0;
        border: 0;
        background: none !important;
    }
    .bs5-page .attendees-table .cell-attendee { grid-area: name; min-width: 0; }
    .bs5-page .attendees-table .cell-amount   { grid-area: amount; text-align: right; }
    .bs5-page .attendees-table .cell-event    {
        grid-area: event;
        font-size: 0.8125rem;
        color: var(--text-muted);
        padding-bottom: 8px !important;
        border-bottom: 1px solid var(--border) !important;
    }
    .bs5-page .attendees-table .cell-event .event-title { display: inline; font-weight: 400; color: var(--text-muted); }
    .bs5-page .attendees-table .cell-event .event-title::after { content: " · "; color: var(--text-faint); }
    .bs5-page .attendees-table .cell-event .event-date  { display: inline; }
    .bs5-page .attendees-table .cell-tickets  { grid-area: tickets; }
    .bs5-page .attendees-table .cell-actions  { grid-area: actions; text-align: left; }
    .bs5-page .attendees-table .row-actions { justify-content: stretch; width: 100%; }
    .bs5-page .attendees-table .row-actions .btn { flex: 1; }

    /* Guest rows on mobile — nest as a small block inside the parent's flow */
    .bs5-page .attendees-table tbody tr.attendee-row--guest {
        background: var(--surface-2);
        border-style: dashed;
        margin-top: -6px;
        margin-bottom: 10px;
        padding: 10px 14px;
        font-size: 0.8125rem;
        grid-template-areas:
            "name    name"
            "tickets tickets";
    }
    .bs5-page .attendees-table tr.attendee-row--guest .cell-event,
    .bs5-page .attendees-table tr.attendee-row--guest .cell-amount,
    .bs5-page .attendees-table tr.attendee-row--guest .cell-actions { display: none; }
    .bs5-page .attendees-table tr.attendee-row--guest .attendee-name { font-size: 0.875rem; }
    .bs5-page .attendees-table tr.attendee-row--guest .cell-attendee {
        padding-left: 0 !important;
    }
}

/* Members variant — same table, but no tickets column.
   Override mobile grid template to skip the tickets row. */
@media (max-width: 768px) {
    .bs5-page .attendees-table--members tbody tr.attendee-row {
        grid-template-areas:
            "name    amount"
            "event   event"
            "actions actions";
    }
}

/* Payments variant — same table, plus a Date paid column.
   Desktop: the date appears in its own column (cell-date); the inline event-date is hidden.
   Mobile: the standalone cell-date hides; event-date inside cell-event shows inline. */
.bs5-page .attendees-table--payments .cell-date {
    color: var(--text-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}
.bs5-page .attendees-table--payments .cell-event .event-date {
    /* On desktop, the date is in its own column; hide the inline copy. */
    display: none;
}
@media (max-width: 768px) {
    .bs5-page .attendees-table--payments tbody tr.attendee-row {
        grid-template-areas:
            "name    amount"
            "event   event"
            "actions actions";
    }
    /* Hide the standalone date cell on mobile */
    .bs5-page .attendees-table--payments .cell-date { display: none !important; }
    /* Show the inline date inside cell-event */
    .bs5-page .attendees-table--payments .cell-event .event-date {
        display: inline;
    }
    /* Override the inner2000 default that appends " · " after every event-title.
       For payments we want " · " before the date, not after every title. */
    .bs5-page .attendees-table--payments .cell-event .event-title::after { content: ""; }
    .bs5-page .attendees-table--payments .cell-event .event-date::before {
        content: " · Paid ";
        color: var(--text-faint);
    }
}

/* ============================================================
   Financial report (inner112) — metric cards, report table, totals
   ============================================================ */

/* --- Summary metric cards row --- */
.bs5-page .metric-cards-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 1.5rem;
}
.bs5-page .metric-card {
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.bs5-page .metric-card__label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.bs5-page .metric-card__value {
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
    .bs5-page .metric-cards-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Report filters row (3 selects) --- */
.bs5-page .report-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}
@media (max-width: 768px) {
    .bs5-page .report-filters {
        grid-template-columns: 1fr;
    }
}

.bs5-page .report-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.bs5-page .report-toolbar__spacer { flex: 1; }
@media (max-width: 768px) {
    .bs5-page .report-toolbar__spacer { display: none; flex: 0; }
}

/* --- Report table extra column types --- */
.bs5-page .attendees-table--report .cell-fees,
.bs5-page .attendees-table--report .cell-balance {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.bs5-page .attendees-table--report thead .cell-fees,
.bs5-page .attendees-table--report thead .cell-balance,
.bs5-page .attendees-table--report thead .cell-amount {
    text-align: right;
}
.bs5-page .attendees-table--report .cell-fees .fees-value {
    color: var(--text-muted);
    font-size: 0.8125rem;
}
.bs5-page .attendees-table--report .cell-group,
.bs5-page .attendees-table--report .cell-event {
    color: var(--text-muted);
    font-size: 0.8125rem;
}
.bs5-page .attendees-table--report .cell-status { white-space: nowrap; }

/* Status pip (used in table + adjustments) */
.bs5-page .status-pip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.bs5-page .status-pip i {
    font-size: 0.5rem;
}
.bs5-page .status-pip--success i { color: var(--success); }
.bs5-page .status-pip--info    i { color: var(--brand-2); }
.bs5-page .status-pip--warning i { color: var(--warning, #d97706); }

/* --- Mobile reflow for the report table (8 columns desktop) --- */
@media (max-width: 768px) {
    .bs5-page .attendees-table--report tbody tr.attendee-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name    amount"
            "event   balance"
            "fees    status";
    }
    .bs5-page .attendees-table--report .cell-attendee { grid-area: name; }
    .bs5-page .attendees-table--report .cell-amount   { grid-area: amount; text-align: right; }
    .bs5-page .attendees-table--report .cell-event    {
        grid-area: event;
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
        font-size: 0.8125rem;
    }
    .bs5-page .attendees-table--report .cell-balance  {
        grid-area: balance;
        text-align: right;
        font-size: 0.8125rem;
        color: var(--text-muted);
    }
    .bs5-page .attendees-table--report .cell-balance::before {
        content: "Bal ";
        color: var(--text-faint);
    }
    .bs5-page .attendees-table--report .cell-fees     {
        grid-area: fees;
        font-size: 0.75rem;
        padding-top: 8px !important;
        border-top: 1px solid var(--border) !important;
    }
    .bs5-page .attendees-table--report .cell-fees::before {
        content: "Fees ";
        color: var(--text-faint);
    }
    .bs5-page .attendees-table--report .cell-status   {
        grid-area: status;
        text-align: right;
        padding-top: 8px !important;
        border-top: 1px solid var(--border) !important;
    }
    /* Date and Group hide on mobile — date is in event cell, group is rare */
    .bs5-page .attendees-table--report .cell-date     { display: none !important; }
    .bs5-page .attendees-table--report .cell-group    { display: none !important; }
}

/* --- Totals grid --- */
.bs5-page .totals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin: 0;
}
.bs5-page .totals-grid__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bs5-page .totals-grid__item dt {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    font-weight: 400;
}
.bs5-page .totals-grid__item dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.bs5-page .totals-grid__item--strong dd {
    font-size: 1.25rem;
    color: var(--brand-dark, var(--text));
}

/* ============================================================
   Payments-full report variant (inner112)
   10 columns desktop: Donor / Date / Paid / Received / Deposited /
   Fees / Group / Project / Qty / Status
   ============================================================ */

/* Numeric columns — right-align tabular numerals */
.bs5-page .attendees-table--payments-full .cell-paid,
.bs5-page .attendees-table--payments-full .cell-received,
.bs5-page .attendees-table--payments-full .cell-deposited,
.bs5-page .attendees-table--payments-full .cell-fees,
.bs5-page .attendees-table--payments-full .cell-qty {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.bs5-page .attendees-table--payments-full thead .cell-paid,
.bs5-page .attendees-table--payments-full thead .cell-received,
.bs5-page .attendees-table--payments-full thead .cell-deposited,
.bs5-page .attendees-table--payments-full thead .cell-fees,
.bs5-page .attendees-table--payments-full thead .cell-qty {
    text-align: right;
}

/* Slimmer padding for the dense 10-column version on desktop */
.bs5-page .attendees-table--payments-full thead th,
.bs5-page .attendees-table--payments-full tbody td {
    padding: 8px 10px;
    font-size: 0.8125rem;
}

.bs5-page .attendees-table--payments-full .cell-fees .fees-value {
    color: var(--text-muted);
    cursor: help;
    border-bottom: 1px dotted var(--border);
}
.bs5-page .attendees-table--payments-full .cell-group,
.bs5-page .attendees-table--payments-full .cell-event,
.bs5-page .attendees-table--payments-full .cell-qty {
    color: var(--text-muted);
}
.bs5-page .attendees-table--payments-full .cell-status { white-space: nowrap; }
.bs5-page .attendees-table--payments-full .cell-date .date-paidout {
    font-size: 0.6875rem;
    color: var(--text-faint);
    margin-top: 2px;
}

/* ===== Mobile reflow for payments-full ===== */
@media (max-width: 768px) {
    .bs5-page .attendees-table--payments-full tbody tr.attendee-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name      paid"
            "event     deposited"
            "fees      status";
    }
    .bs5-page .attendees-table--payments-full .cell-attendee  { grid-area: name; min-width: 0; }
    .bs5-page .attendees-table--payments-full .cell-paid      { grid-area: paid; text-align: right; }
    .bs5-page .attendees-table--payments-full .cell-event     {
        grid-area: event;
        font-size: 0.8125rem;
        color: var(--text-muted);
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
    }
    .bs5-page .attendees-table--payments-full .cell-event::before {
        content: "Project ";
        color: var(--text-faint);
    }
    .bs5-page .attendees-table--payments-full .cell-deposited {
        grid-area: deposited;
        text-align: right;
        font-size: 0.8125rem;
        color: var(--text-muted);
    }
    .bs5-page .attendees-table--payments-full .cell-deposited::before {
        content: "Dep ";
        color: var(--text-faint);
    }
    .bs5-page .attendees-table--payments-full .cell-fees {
        grid-area: fees;
        text-align: left;
        font-size: 0.75rem;
        padding-top: 8px !important;
        border-top: 1px solid var(--border) !important;
    }
    .bs5-page .attendees-table--payments-full .cell-fees::before {
        content: "Fees ";
        color: var(--text-faint);
    }
    .bs5-page .attendees-table--payments-full .cell-status {
        grid-area: status;
        text-align: right;
        padding-top: 8px !important;
        border-top: 1px solid var(--border) !important;
    }
    /* Hide secondary columns on mobile — Date is in event subtitle area, Received duplicates Paid for single-currency, Group/Qty rarely useful on phone */
    .bs5-page .attendees-table--payments-full .cell-date     { display: none !important; }
    .bs5-page .attendees-table--payments-full .cell-received { display: none !important; }
    .bs5-page .attendees-table--payments-full .cell-group    { display: none !important; }
    .bs5-page .attendees-table--payments-full .cell-qty      { display: none !important; }
}

/* --- Batch info banner (when a specific batch is selected) --- */
.bs5-page .batch-info {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.bs5-page .batch-info__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bs5-page .batch-info__label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.bs5-page .batch-info__value {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.bs5-page .batch-info__tz {
    font-size: 0.75rem;
    color: var(--text-faint);
    font-weight: 400;
}

/* --- Totals table styling (used at the bottom of the report) --- */
.bs5-page .totals-table thead th {
    background: var(--surface-2);
}
.bs5-page .totals-table tbody td {
    font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
    /* Totals table on mobile — one card per currency.
       Each row reflows into a card with the currency as the heading and
       each cell rendered as a labelled definition (Pledge: £xx, etc.). */
    .bs5-page .totals-table {
        display: block;
        background: transparent;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    .bs5-page .totals-table thead { display: none; }
    .bs5-page .totals-table tbody { display: block; }

    .bs5-page .totals-table tbody tr.attendee-row {
        display: block;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px 14px;
        margin-bottom: 10px;
    }
    .bs5-page .totals-table tbody tr.attendee-row > td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 6px 0;
        border: 0;
        background: none !important;
        font-variant-numeric: tabular-nums;
        text-align: left;
    }
    /* The first cell (Currency code) is the card heading */
    .bs5-page .totals-table tbody tr.attendee-row > td:first-child {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text);
        padding-bottom: 8px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--border) !important;
        display: block;
    }
    .bs5-page .totals-table tbody tr.attendee-row > td:first-child::before {
        content: none;
    }
    /* All other cells: labelled definition rows */
    .bs5-page .totals-table tbody tr.attendee-row > td:not(:first-child)::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 0.8125rem;
        font-weight: 400;
    }
    /* Balance is the row before last (or last when no Adjustments) — emphasise it */
    .bs5-page .totals-table tbody tr.attendee-row > td:last-child {
        padding-top: 10px;
        margin-top: 4px;
        border-top: 1px solid var(--border) !important;
        font-size: 1rem;
    }
}

/* ============================================================
   Mailer / CRM shell nav (inner1000)
   ============================================================ */

.bs5-page .mailer-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    padding: 6px 0 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}
.bs5-page .mailer-nav__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}
.bs5-page .mailer-nav__item:hover {
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}
.bs5-page .mailer-nav__item--active {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 500;
}
.bs5-page .mailer-nav__item i {
    font-size: 0.8125rem;
    color: var(--text-faint);
}
.bs5-page .mailer-nav__item--active i { color: var(--brand-2); }
.bs5-page .mailer-nav__actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
}
@media (max-width: 768px) {
    .bs5-page .mailer-nav {
        gap: 4px;
        padding-bottom: 10px;
    }
    .bs5-page .mailer-nav__actions {
        margin-left: 0;
        width: 100%;
        padding-top: 8px;
        border-top: 1px solid var(--border);
        margin-top: 4px;
    }
}
.bs5-page .mailer-content { min-height: 200px; }

/* ============================================================
   Subscribers list (mailer/html/view-subscribers)
   ============================================================ */

/* Filter pills row */
.bs5-page .subs-filter-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.bs5-page .subs-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.8125rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.bs5-page .subs-filter-pill:hover {
    background: var(--surface-2);
    color: var(--text);
}
.bs5-page .subs-filter-pill input[type=checkbox] {
    display: none;
}
.bs5-page .subs-filter-pill:has(input:checked) {
    background: var(--brand-2);
    border-color: var(--brand-2);
    color: #fff;
}

/* Subscribers table — extra column types */
.bs5-page .attendees-table--subscribers .cell-member-no { white-space: nowrap; }
.bs5-page .attendees-table--subscribers .cell-mailer    { text-align: center; }
.bs5-page .attendees-table--subscribers thead .cell-mailer { text-align: center; }
.bs5-page .attendees-table--subscribers .cell-mailer .form-check-input {
    cursor: pointer;
    width: 1.1em;
    height: 1.1em;
}

/* Email action icons */
.bs5-page .email-mailto,
.bs5-page .email-crm,
.bs5-page .email-edit {
    font-size: 0.9375rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.1s;
}
.bs5-page .email-mailto:hover { color: var(--success); }
.bs5-page .email-crm:hover    { color: var(--brand-2); }
.bs5-page .email-edit:hover   { color: var(--text); }

/* Member number badge */
.bs5-page .badge-member-no {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, #1a6b8a, #0d4d6b);
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}
.bs5-page .badge-member-no .badge-prefix {
    font-size: 0.5625rem;
    font-weight: 400;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    margin-bottom: 1px;
}

/* Type pills (Event / Member / Direct) */
.bs5-page .type-pill {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 10px;
    margin-bottom: 3px;
}
.bs5-page .type-pill-member {
    background: #e8f4f8;
    color: #1a6b8a;
    border: 1px solid #b8dce8;
}
.bs5-page .type-pill-event {
    background: #fef3e2;
    color: #b07a00;
    border: 1px solid #f5d78e;
}
.bs5-page .type-pill-direct {
    background: #f0e8f8;
    color: #6b2d8a;
    border: 1px solid #d4b8e8;
}

/* Mobile reflow for subscribers table */
@media (max-width: 768px) {
    .bs5-page .attendees-table--subscribers tbody tr.attendee-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name     actions"
            "event    event"
            "tickets  amount"
            "mailer   member";
    }
    .bs5-page .attendees-table--subscribers .cell-attendee  { grid-area: name; }
    .bs5-page .attendees-table--subscribers .cell-actions   { grid-area: actions; text-align: right; }
    .bs5-page .attendees-table--subscribers .cell-event     {
        grid-area: event;
        font-size: 0.8125rem;
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
    }
    .bs5-page .attendees-table--subscribers .cell-tickets   { grid-area: tickets; }
    .bs5-page .attendees-table--subscribers .cell-amount    { grid-area: amount; text-align: right; }
    .bs5-page .attendees-table--subscribers .cell-mailer    { grid-area: mailer; text-align: left; padding-top: 8px !important; border-top: 1px solid var(--border) !important; }
    .bs5-page .attendees-table--subscribers .cell-member-no { grid-area: member; text-align: right; padding-top: 8px !important; border-top: 1px solid var(--border) !important; }
    .bs5-page .attendees-table--subscribers .cell-date      { display: none !important; }

    /* Guest rows on mobile — collapse to name + tickets */
    .bs5-page .attendees-table--subscribers tbody tr.attendee-row--guest {
        grid-template-areas:
            "name    name"
            "tickets tickets";
    }
    .bs5-page .attendees-table--subscribers tr.attendee-row--guest .cell-event,
    .bs5-page .attendees-table--subscribers tr.attendee-row--guest .cell-amount,
    .bs5-page .attendees-table--subscribers tr.attendee-row--guest .cell-mailer,
    .bs5-page .attendees-table--subscribers tr.attendee-row--guest .cell-member-no,
    .bs5-page .attendees-table--subscribers tr.attendee-row--guest .cell-actions,
    .bs5-page .attendees-table--subscribers tr.attendee-row--guest .cell-date { display: none !important; }
}