/*
 * Brand layer.
 *
 * Reads the CSS custom properties emitted by the dashboard layout from
 * config/branding.php. Never hard-code a brand hex here; change config and
 * every consumer follows.
 *
 * This file is written in plain CSS on purpose. It is independent of the
 * Tailwind build, so it survives the removal of that build in a later phase.
 * Load it after the design system stylesheet so these rules win.
 */

/* ---------------------------------------------------------------- surfaces */

/* The page floor. Cards are the only content surface and stay white. */
body,
#kt_body,
.app-default {
    background-color: var(--brand-canvas);
}

/* ---------------------------------------------------------------- buttons */

.btn-brand-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

.btn-brand-primary:hover,
.btn-brand-primary:focus {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: var(--brand-on-primary);
}

.btn-brand-primary:active,
.btn-brand-primary.active {
    background-color: var(--brand-primary-active);
    border-color: var(--brand-primary-active);
    color: var(--brand-on-primary);
}

.btn-brand-secondary {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: var(--brand-on-primary);
}

.btn-brand-secondary:hover,
.btn-brand-secondary:focus {
    background-color: var(--brand-secondary-hover);
    border-color: var(--brand-secondary-hover);
    color: var(--brand-on-primary);
}

.btn-brand-danger {
    background-color: var(--brand-danger);
    border-color: var(--brand-danger);
    color: var(--brand-on-primary);
}

.btn-brand-danger:hover,
.btn-brand-danger:focus {
    background-color: var(--brand-danger-hover);
    border-color: var(--brand-danger-hover);
    color: var(--brand-on-primary);
}

/* ----------------------------------------------------------------- accent */

/*
 * The accent blue carries links and small interactive text, which the navy is
 * too dark to do well. See config/branding.php for where each is legible.
 * Rule of thumb: .text-accent on a white card, .text-accent-strong on grey.
 */

.btn-accent {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--brand-on-primary);
}

.btn-accent:hover,
.btn-accent:focus {
    background-color: var(--brand-accent-hover);
    border-color: var(--brand-accent-hover);
    color: var(--brand-on-primary);
}

.text-accent          { color: var(--brand-accent) !important; }
.text-accent-strong   { color: var(--brand-accent-strong) !important; }
.bg-accent            { background-color: var(--brand-accent) !important; }
.bg-accent-soft       { background-color: var(--brand-accent-soft) !important; }
.hover\:text-accent:hover { color: var(--brand-accent) !important; }

/* A link on a white card. On the grey canvas use .text-accent-strong. */
.link-accent {
    color: var(--brand-accent);
    text-decoration: none;
}

.link-accent:hover {
    color: var(--brand-accent-hover);
    text-decoration: underline;
}

/* ------------------------------------------------------------- utilities */

.bg-brand        { background-color: var(--brand-primary) !important; }
.bg-brand-50     { background-color: var(--brand-primary-50) !important; }
.bg-brand-100    { background-color: var(--brand-primary-100) !important; }
.text-brand      { color: var(--brand-primary) !important; }
.text-brand-muted { color: var(--brand-primary-muted) !important; }
.border-brand-100 { border-color: var(--brand-primary-100) !important; }

/*
 * Interaction variants.
 *
 * The brand utilities above are plain classes, not generated by the utility
 * framework, so the framework cannot generate hover or group-hover variants for
 * them. They are written out here. This also means they keep working after the
 * utility framework is removed.
 */
.hover\:bg-brand:hover { background-color: var(--brand-primary) !important; }
.hover\:text-brand:hover { color: var(--brand-primary) !important; }
.group:hover .group-hover\:text-brand { color: var(--brand-primary) !important; }
.group:hover .group-hover\:bg-brand { background-color: var(--brand-primary) !important; }

/* ------------------------------------------------ sidebar, the brand face */

.aside-brand {
    background-color: var(--brand-sidebar-bg) !important;
}

.aside-brand .menu-item .menu-link.active,
.aside-brand .menu-item .menu-link.active:hover {
    background-color: var(--brand-sidebar-active) !important;
}

.aside-brand .brand-section-label {
    color: var(--brand-sidebar-label);
}

/* --------------------------------------------------------------- a11y */

/*
 * One visible focus treatment for everything reachable by keyboard. The brand
 * navy sits at 9.93:1 against the page canvas, so the ring is legible on both
 * the canvas and white cards.
 *
 * The selectors are written out rather than wrapped in :where() because
 * :where() contributes no specificity, and the design system sets
 * ".btn:focus { outline: 0 }" at two classes. A zero-specificity rule lost to
 * it on every button, so the ring never appeared. These match or beat it and
 * load afterwards.
 *
 * box-shadow is cleared on buttons for the same reason: the design system
 * draws its own glow in its blue, which would sit under the navy ring as a
 * second, differently coloured halo.
 */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.btn:focus-visible {
    box-shadow: none;
}

/* On the navy sidebar the navy ring would be invisible, so it turns white. */
.aside-brand a:focus-visible,
.aside-brand button:focus-visible,
.aside-brand .btn:focus-visible,
.aside-brand [tabindex]:focus-visible {
    outline-color: #ffffff;
}

/*
 * Buttons and navigation links need !important, because the design system
 * removes their outline with one of its own:
 *
 *   .btn                    { outline: 0 !important }
 *   .menu-item .menu-link   { outline: 0 !important }
 *
 * No ordinary rule can beat those at any specificity, so before this every
 * button and every sidebar link was a silent tab stop: 22 of the 29 stops on a
 * page had no visible focus at all. These are the only !important declarations
 * in this file and they exist solely to undo those two.
 */
.btn:focus-visible,
.btn-close:focus-visible {
    outline: 2px solid var(--brand-primary) !important;
    outline-offset: 2px !important;
}

.menu-item .menu-link:focus-visible {
    outline: 2px solid var(--brand-primary) !important;
    /* Inset, because a sidebar link sits flush against the aside edge. */
    outline-offset: -2px !important;
}

.aside-brand .btn:focus-visible,
.aside-brand .menu-item .menu-link:focus-visible {
    outline-color: #ffffff !important;
}

/*
 * Respect a reduced-motion preference. The design system's movement is
 * decorative, so there is nothing to preserve when someone asks for less.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ======================================================== components
 *
 * The shared Blade components in resources/views/components. Every rule here
 * reads a --brand-* variable; none contains a colour of its own.
 *
 * These override the design system where its defaults contradict the brand:
 * card headers are grey rather than white, and the light badge tones are
 * rebuilt because the stock ones fail contrast (warning text at 1.3:1) and
 * its "info" is purple.
 */

/* ------------------------------------------------------------------ card */

.card-brand {
    background-color: var(--brand-card-bg);
    border: 0;
    box-shadow: var(--brand-card-shadow);
    overflow: hidden;
}

/* The grey title band. Same tone as the canvas, so it reads as an inset of the
   page floor rather than as a new colour. */
.card-brand > .card-header-band {
    background-color: var(--brand-card-header-bg);
    border-bottom: 1px solid var(--brand-hairline);
    min-height: 70px;
    padding: 0 2rem;
}

.card-title-text {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--brand-text-strong);
    margin: 0;
}

.card-subtitle-text {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--brand-text-muted);
}

.card-brand > .card-footer {
    background-color: var(--brand-card-bg);
    border-top: 1px solid var(--brand-hairline);
}

/* ----------------------------------------------------------- stat cards */

.overview-stats > .card-body {
    background-color: var(--brand-card-bg);
}

.stat-card {
    color: inherit;
    transition: box-shadow 0.15s ease-in-out;
}

a.stat-card:hover {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.stat-card-icon {
    width: 50px;
    height: 50px;
    background-color: var(--brand-surface-muted);
    color: var(--brand-text-muted);
    font-size: 1.35rem;
}

.stat-card-icon-brand   { background-color: var(--brand-primary-100); color: var(--brand-primary); }
.stat-card-icon-accent  { background-color: var(--brand-accent-soft); color: var(--brand-accent-strong); }
.stat-card-icon-success { background-color: var(--brand-success-soft); color: var(--brand-success-text); }
.stat-card-icon-info    { background-color: var(--brand-info-soft); color: var(--brand-info-text); }
.stat-card-icon-warning { background-color: var(--brand-warning-soft); color: var(--brand-warning-text); }
.stat-card-icon-danger  { background-color: var(--brand-danger-soft); color: var(--brand-danger-text); }

.stat-card-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--brand-text-strong);
}

.stat-card-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-text-muted);
}

/* ---------------------------------------------------------------- tables */

.brand-table {
    color: var(--brand-text-body);
}

/*
 * The design system sets the root font size to 13px, so 0.8rem would render the
 * uppercase column heads at 10.4px. This is its own fs-7 instead: small, but
 * still readable, and the same size the rest of the product uses for fine print.
 */
.brand-table > thead > tr.brand-table-head > th {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-text-muted);
    border-bottom: 1px solid var(--brand-hairline-strong);
    white-space: nowrap;
}

.brand-table > tbody > tr:hover > * {
    background-color: var(--brand-secondary-soft);
}

/* The empty state fills the row, so it takes no hover tint. */
.brand-table > tbody > tr.brand-table-empty-row:hover > * {
    background-color: transparent;
}

/* ---------------------------------------------------------------- badges */

.brand-badge {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.brand-badge.badge-light-success   { color: var(--brand-success-text);   background-color: var(--brand-success-soft); }
.brand-badge.badge-light-info      { color: var(--brand-info-text);      background-color: var(--brand-info-soft); }
.brand-badge.badge-light-warning   { color: var(--brand-warning-text);   background-color: var(--brand-warning-soft); }
.brand-badge.badge-light-danger    { color: var(--brand-danger-text);    background-color: var(--brand-danger-soft); }
.brand-badge.badge-light-secondary { color: var(--brand-secondary-text); background-color: var(--brand-secondary-soft); }
.brand-badge.badge-light-dark      { color: var(--brand-dark-text);      background-color: var(--brand-dark-soft); }

/* The brand tone is the only one that is not semantic: it marks something as
   ours rather than as a state. The navy on its own soft fill is 10.76:1. */
.brand-badge.badge-light-primary   { color: var(--brand-primary);        background-color: var(--brand-primary-50); }

/* --------------------------------------------------------------- alerts */

/*
 * The tones the design system ships are readable, so only the icon column and
 * the soft variants are defined here. alert-light-{tone} is the quiet inline
 * callout: the badge fill with a hairline of the same tone.
 */
.brand-alert > .bi {
    line-height: 1;
}

.alert-light-success   { color: var(--brand-success-text);   background-color: var(--brand-success-soft);   border-color: var(--brand-success); }
.alert-light-info      { color: var(--brand-info-text);      background-color: var(--brand-info-soft);      border-color: var(--brand-info); }
.alert-light-warning   { color: var(--brand-warning-text);   background-color: var(--brand-warning-soft);   border-color: var(--brand-warning); }
.alert-light-danger    { color: var(--brand-danger-text);    background-color: var(--brand-danger-soft);    border-color: var(--brand-danger); }

/* --------------------------------------------------------- empty states */

.empty-state-icon {
    width: 64px;
    height: 64px;
    background-color: var(--brand-surface-muted);
    color: var(--brand-text-muted);
    font-size: 1.75rem;
}

.empty-state-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--brand-text-strong);
}

.empty-state-text {
    font-size: 1rem;
    color: var(--brand-text-muted);
    max-width: 34rem;
}

/* ---------------------------------------------------------- event tiles */

/*
 * The events list and the event picker both show a card with a banner image.
 * The banner is a fixed-ratio band so a grid of tiles lines up whatever the
 * uploaded image is; object-fit crops rather than distorts.
 */
.event-tile-banner {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--brand-surface-muted);
    overflow: hidden;
}

.event-tile-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.event-tile-id {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.325rem;
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--brand-text-body);
    font-size: 0.8rem;
    font-weight: 600;
}

.event-tile-title {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.35;
}

.event-tile-title a {
    text-decoration: none;
}

/* Two and three line clamps keep a grid of tiles the same height. */
.event-tile-title,
.event-tile-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-tile-title { -webkit-line-clamp: 2; }
.event-tile-summary { -webkit-line-clamp: 3; }

.event-tile .card-footer {
    padding: 1rem 1.5rem;
}

.event-tile .card-body {
    padding: 1.5rem;
}

/* A tile that is a single link, as on the event picker. */
a.event-tile {
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease-in-out;
}

a.event-tile:hover {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

a.event-tile:hover .event-tile-title {
    color: var(--brand-accent);
}

/* ------------------------------------------------------------ form pages */

/*
 * Create and edit pages: a label above every control, and a banner well in the
 * side column. The design system styles the controls themselves.
 */
.form-label-brand {
    font-weight: 600;
    color: var(--brand-text-body);
    margin-bottom: 0.5rem;
}

.banner-well {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--brand-surface-muted);
    border: 1px dashed var(--brand-hairline-strong);
    border-radius: 0.625rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-well img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.banner-well-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--brand-text-muted);
}

.banner-well-placeholder i {
    font-size: 2rem;
}

/* The editor the rich text field is mounted in, so it reads as a form control. */
.editor-shell {
    border: 1px solid var(--brand-hairline-strong);
    border-radius: 0.475rem;
    overflow: hidden;
    background-color: var(--brand-card-bg);
}

.editor-shell textarea {
    width: 100%;
    min-height: 12rem;
    border: 0;
    padding: 1rem;
    outline: none;
    resize: vertical;
}

/* -------------------------------------------------------- activity list */

.activity-item + .activity-item {
    border-top: 1px solid var(--brand-hairline);
}

.activity-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-color: var(--brand-primary-100);
    color: var(--brand-primary);
    font-weight: 600;
}

/* ======================================================= public profile
 *
 * The second of the two layout profiles. The admin profile is dense and sits
 * on the grey canvas inside a sidebar shell; this one is a centred column on
 * white with more room and larger type, for people who see it once.
 *
 * Both profiles share the same tokens, the same typeface, the same semantic
 * colours and the same focus rules. Only the density and the shell differ.
 *
 * Everything here is scoped to .public-page, which the public layout sets on
 * the body. The admin pages already get their controls from the design system,
 * and an unscoped rule here would override them on all 62 of those pages.
 */

/*
 * A reset, because this profile loads no framework.
 *
 * The admin pages get border-box sizing from the design system. The public
 * pages used to get it from the utility framework the old guest layout loaded.
 * Without either, "width: 100%" plus side padding measured 448px inside a
 * 400px phone and the page scrolled sideways.
 */
.public-page *,
.public-page *::before,
.public-page *::after {
    box-sizing: border-box;
}

/*
 * The margin reset is wrapped in :where() on purpose, so it carries no
 * specificity and every component class below wins against it. Written out,
 * ".public-page p" would beat ".public-note" and flatten the spacing on every
 * heading and note on these pages. This is the one job :where() is right for.
 */
.public-page :where(h1, h2, h3, p, ul, figure) {
    margin: 0;
}

.public-page :where(img) {
    max-width: 100%;
}

/*
 * The profile's own spacing scale, in the absence of a framework's. Only the
 * steps the public pages use are defined; add a step here rather than reaching
 * for a value the stylesheet does not have.
 */
.public-page .mb-0 { margin-bottom: 0 !important; }
.public-page .mb-2 { margin-bottom: 0.5rem !important; }
.public-page .mb-4 { margin-bottom: 1rem !important; }
.public-page .mb-5 { margin-bottom: 1.25rem !important; }
.public-page .mb-6 { margin-bottom: 1.5rem !important; }
.public-page .mb-8 { margin-bottom: 2rem !important; }
.public-page .mt-5 { margin-top: 1.25rem !important; }
.public-page .mt-6 { margin-top: 1.5rem !important; }
.public-page .mt-8 { margin-top: 2rem !important; }

.public-page {
    background-color: var(--brand-card-bg);
    color: var(--brand-text-body);
    font-family: var(--bs-font-sans-serif);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* The centred column. Narrow for a sign-in form, wide for a registration flow. */
.public-shell {
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
    padding-block: 3rem;
}

.public-shell-wide { max-width: 48rem; }
.public-shell-full { max-width: 64rem; }

/* Vertically centred for the short pages: sign in, verify, password reset. */
.public-centred {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.public-masthead {
    text-align: center;
    margin-bottom: 2.5rem;
}

.public-masthead img {
    height: 4rem;
    width: auto;
    margin-bottom: 1.5rem;
}

.public-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--brand-text-strong);
    margin: 0 0 0.5rem;
}

.public-lead {
    font-size: 1.0625rem;
    color: var(--brand-text-muted);
    margin: 0;
}

/* A heading inside a panel, one step down from the page title. */
.public-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--brand-text-strong);
    margin: 0 0 0.5rem;
}

/* A bordered panel rather than a shadowed card: on white, a hairline is enough. */
.public-panel {
    background-color: var(--brand-card-bg);
    border: 1px solid var(--brand-hairline);
    border-radius: 0.625rem;
    padding: 2rem;
}

.public-panel-quiet {
    background-color: var(--brand-secondary-soft);
    border-color: var(--brand-hairline);
}

.public-note {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--brand-text-muted);
}

/* A round tinted glyph above a heading, for the confirmation and error pages. */
.public-emblem {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    background-color: var(--brand-primary-100);
    color: var(--brand-primary);
}

.public-emblem-success { background-color: var(--brand-success-soft); color: var(--brand-success-text); }
.public-emblem-danger  { background-color: var(--brand-danger-soft);  color: var(--brand-danger-text); }
.public-emblem-warning { background-color: var(--brand-warning-soft); color: var(--brand-warning-text); }

/* ------------------------------------------------ public profile controls */

/*
 * The atoms the public pages need, written out rather than borrowed from the
 * design system's 1.15 MB stylesheet. A sign-in page should not load an admin
 * component library to draw two inputs and a button.
 */

.public-page .form-field + .form-field { margin-top: 1.25rem; }

.public-page .form-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--brand-text-body);
    margin-bottom: 0.4rem;
}

.public-page .form-control,
.public-page .form-select {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--brand-text-strong);
    background-color: var(--brand-secondary-soft);
    border: 1px solid transparent;
    border-radius: 0.475rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.public-page .form-control::placeholder { color: var(--brand-text-muted); }

.public-page .form-control:focus,
.public-page .form-select:focus {
    background-color: var(--brand-card-bg);
    border-color: var(--brand-primary-200);
}

.public-page .form-control.is-invalid,
.public-page .form-select.is-invalid {
    border-color: var(--brand-danger);
}

.public-page .form-error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--brand-danger-text);
}

.public-page .form-help {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--brand-text-muted);
}

.public-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0.475rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.public-page .btn-block { width: 100%; }

.public-page .btn-light {
    background-color: var(--brand-secondary-soft);
    border-color: var(--brand-hairline);
    color: var(--brand-text-body);
}

.public-page .btn-light:hover { background-color: var(--brand-primary-100); }

.public-page .btn:disabled,
.public-page .btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

.public-page .alert {
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: 0.475rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.public-page a {
    color: var(--brand-accent);
    text-decoration: none;
}

.public-page a:hover { text-decoration: underline; }

.public-page .public-panel a.btn:hover { text-decoration: none; }

/* Two fields side by side, stacking on a phone. */
.public-page .form-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-page .form-row-narrow-first {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}

.public-page .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.public-page .form-check input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--brand-primary);
    flex-shrink: 0;
}

.public-page .form-inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block: 1.25rem;
    font-size: 0.95rem;
}

/* A captioned rule, for "or" between two halves of a page. */
.public-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-block: 2.5rem;
    color: var(--brand-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.public-divider::before,
.public-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--brand-hairline);
}

.public-store-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.public-store-links img { height: 2.5rem; width: auto; }

.public-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.public-list-item {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
}

.public-list-item i {
    color: var(--brand-accent);
    font-size: 1.1rem;
    line-height: 1.5;
    flex-shrink: 0;
}

/* Larger touch targets and a little less padding where the screen is small. */
@media (max-width: 575.98px) {
    .public-shell { padding-block: 2rem; }
    .public-panel { padding: 1.5rem; }
    .public-title { font-size: 1.5rem; }
    .public-page .form-row,
    .public-page .form-row-narrow-first { grid-template-columns: 1fr; }
}

/* ============================================================== printing
 *
 * The product prints badges, and a badge is the one thing here that must not
 * inherit the design system. Its markup is authored per event and carries its
 * own CSS; the page around it is administration chrome that should not reach
 * the paper.
 *
 * These rules deliberately do not style the badge itself. They remove the page
 * it sits on. Badge template CSS is injected after this file and stays in
 * charge of the badge.
 */
@media print {

    /* No canvas, no sidebar, no header, no page furniture. */
    body,
    #kt_body,
    .app-default,
    .page,
    .wrapper,
    .content,
    .post,
    .container-fluid,
    .card-brand,
    .card-brand > .card-body {
        background: #ffffff !important;
        box-shadow: none !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .aside,
    .header,
    #kt_header,
    #kt_aside,
    #kt_scrolltop,
    #loader,
    .card-header-band,
    .card-toolbar,
    .btn,
    .pagination,
    nav[role="navigation"],
    .alert,
    .menu-sub-dropdown {
        display: none !important;
    }

    /* The design system offsets content for its fixed header and sidebar. */
    .wrapper,
    #kt_wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }

    /*
     * Typography is reset to the browser default inside the badge sheet rather
     * than to Poppins: a badge template that names no font should print in a
     * predictable serif-or-sans default, not in whatever the admin area uses.
     */
    #content {
        font-family: initial;
        font-size: initial;
        line-height: initial;
        color: #000000;
        display: block !important;
        gap: 0 !important;
    }

    /* One badge per sheet, and never split across a page break. */
    #content > * {
        break-inside: avoid;
        page-break-inside: avoid;
        break-after: page;
        page-break-after: always;
        display: block !important;
        margin: 0 auto !important;
        transform: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        min-width: 0 !important;
    }

    #content > *:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    /* Print the ink the template asked for, not the browser's economy version. */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    @page {
        margin: 10mm;
    }
}

/* ------------------------------------------------------- badge designer */

/*
 * The badge template designer and its listing. The badge itself is rendered
 * inside an iframe with the template's own CSS, so nothing here reaches it.
 * These style the workbench around it.
 */

/* A listing thumbnail: a fixed-height window onto a full-size badge, scaled
   down by public/js/pages/badge-thumbnails.js. */
.badge-thumb-shell {
    display: block;
    height: 210px;
    background-color: var(--brand-surface-muted);
    overflow: hidden;
}

.badge-thumb-scaler {
    transform-origin: top center;
}

.badge-thumb {
    border: 0;
    background: #ffffff;
    display: block;
    pointer-events: none;
}

/* The live preview panel in the designer. */
.badge-preview-shell {
    background-color: var(--brand-surface-muted);
    border-radius: 0.475rem;
    padding: 1rem;
    overflow: hidden;
}

.badge-preview-frame {
    border: 0;
    background: #ffffff;
    display: block;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

/* A full-size preview, centred on its own panel. */
.badge-preview-stage {
    display: flex;
    justify-content: center;
    background-color: var(--brand-surface-muted);
    padding: 2.5rem;
    border-radius: 0.475rem;
}

/* The preset and token buttons: quiet tiles that fill the editor from a click. */
.badge-preset,
.badge-token {
    display: block;
    width: 100%;
    /* Grid and flex items default to min-width: auto and refuse to shrink below
       their content, which pushed these past the panel they sit in. */
    min-width: 0;
    text-align: left;
    background-color: var(--brand-secondary-soft);
    border: 1px solid transparent;
    border-radius: 0.475rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.badge-preset:hover,
.badge-token:hover {
    background-color: var(--brand-primary-100);
    border-color: var(--brand-primary-200);
}

.badge-preset {
    padding: 1rem;
}

.badge-token {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.badge-token code {
    color: var(--brand-accent);
    font-weight: 600;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* A flex item will not shrink below its content width without this, so the
       longer token names pushed their labels out past the panel edge. */
    min-width: 0;
}

/* The token list is long; it scrolls vertically rather than pushing the preview
   away, and never sideways. */
.badge-token-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
}

/* A code field. Monospace and a little tighter than prose. */
.code-field {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

/* The designer column sticks while the editor beside it scrolls. */
@media (min-width: 1200px) {
    .badge-designer-aside {
        position: sticky;
        top: 1.5rem;
    }
}

/* ------------------------------------------------ registration preview */

/*
 * The registration form preview renders the real public partial inside an
 * admin page. The partial brings its own styling, so this only frames it and
 * makes clear it is not editable.
 */
.form-preview-stage {
    background-color: var(--brand-surface-muted);
    border: 1px solid var(--brand-hairline);
    border-radius: 0.475rem;
    padding: 2rem;
    overflow-x: auto;
}

.form-preview-frame {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    background-color: var(--brand-card-bg);
    border-radius: 0.475rem;
    padding: 1.5rem;
}

/* A disabled fieldset already blocks input; this makes it look deliberate
   rather than broken. */
.form-preview-frame :disabled {
    opacity: 1;
    cursor: default;
}

@media (max-width: 575.98px) {
    .form-preview-stage { padding: 1rem; }
    .form-preview-frame { padding: 1rem; }
}

/* --------------------------------------------------- registration questions */

/*
 * Each question an event asks is its own card, so its answers and its editor
 * sit with it rather than behind a row in a table.
 */
.question-card-position {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--brand-primary-100);
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

/* One answer the question offers, with its fee if it carries one. */
.question-answer {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--brand-hairline-strong);
    border-radius: 0.475rem;
    background-color: var(--brand-card-bg);
    color: var(--brand-text-body);
    font-size: 0.95rem;
}

.question-answer-fee {
    color: var(--brand-info-text);
    background-color: var(--brand-info-soft);
    border-radius: 0.325rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Retired answers stay visible, because people have already chosen them. */
.question-answer-retired {
    color: var(--brand-text-muted);
    background-color: var(--brand-secondary-soft);
    text-decoration: line-through;
}

.question-answer-retired .question-answer-fee {
    text-decoration: none;
}