/* Rotary Club de Neuchâtel — brand tokens & public site base. See docs/09-branding.md. */
:root {
    --rcn-blue: #0c3c7c;       /* Royal Blue */
    --rcn-gold: #f7a81b;       /* Gold */
    --rcn-blue-ink: #0a2f61;   /* darker hover/active */
    --rcn-surface: #ffffff;
    --rcn-surface-alt: #f5f7fa;
    --rcn-text: #1a1a1a;
    --rcn-font: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

body {
    margin: 0;
    font-family: var(--rcn-font);
    color: var(--rcn-text);
    background: var(--rcn-surface);
}

.rcn-site { display: flex; flex-direction: column; min-height: 100vh; }

/* --- DEV environment marker (rendered only when IHostEnvironment.IsDevelopment()) --- */
.rcn-dev-ribbon {
    display: flex; align-items: center; justify-content: center;
    padding: 0.35rem 1rem;
    background: repeating-linear-gradient(
        45deg, #b91c1c, #b91c1c 14px, #991b1b 14px, #991b1b 28px);
    color: #fff;
    font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
/* Recolour the header's gold underline to red on DEV */
.rcn-env-dev .rcn-header { border-bottom-color: #b91c1c; }

.rcn-header {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 0.75rem 1.5rem;
    border-bottom: 3px solid var(--rcn-gold);
    background: var(--rcn-surface);
}

.rcn-brand { display: flex; align-items: center; text-decoration: none; }
.rcn-logo { height: 50px; width: auto; display: block; }

.rcn-header-right { display: flex; align-items: center; gap: 1.5rem; }
.rcn-nav { display: flex; gap: 1.25rem; }
.rcn-nav a { color: var(--rcn-blue); text-decoration: none; font-weight: 600; }
.rcn-nav a:hover { color: var(--rcn-gold); }

/* Hamburger toggle — hidden on desktop, shown below the breakpoint */
.rcn-nav-toggle {
    display: none;
    flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0;
    background: none; border: 0; cursor: pointer;
}
.rcn-nav-toggle-bar {
    display: block; width: 26px; height: 3px; border-radius: 2px;
    background: var(--rcn-blue); transition: transform 0.2s ease, opacity 0.2s ease;
}
.rcn-nav-toggle[aria-expanded="true"] .rcn-nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.rcn-nav-toggle[aria-expanded="true"] .rcn-nav-toggle-bar:nth-child(2) { opacity: 0; }
.rcn-nav-toggle[aria-expanded="true"] .rcn-nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Discreet account control on the right of the header */
.rcn-account { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; }
.rcn-account-name { color: var(--rcn-blue); font-weight: 600; text-decoration: none; }
.rcn-account-name:hover { color: var(--rcn-gold); }
.rcn-account-link { color: var(--rcn-text-muted, #6b7280); text-decoration: none; }
.rcn-account-link:hover { color: var(--rcn-gold); }

.rcn-main { flex: 1 1 auto; }

.rcn-hero {
    background: var(--rcn-blue);
    color: #fff;
    padding: 4rem 1.5rem;
    text-align: center;
}
.rcn-hero h1 { margin: 0 0 0.5rem; font-size: 2.4rem; }
.rcn-hero p { margin: 0; opacity: 0.9; }

#blazor-error-ui {
    background: #fff3cd;
    color: #1a1a1a;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
#blazor-error-ui a { color: var(--rcn-blue); font-weight: 600; }

.rcn-page { max-width: 880px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.rcn-page h1 { color: var(--rcn-blue); margin-top: 0; }
.rcn-muted { color: #888; font-size: 0.95rem; }

.rcn-footer {
    padding: 1.25rem 1.5rem;
    background: var(--rcn-surface-alt);
    color: #555;
    font-size: 0.9rem;
    border-top: 1px solid #e3e8ef;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
    justify-content: space-between;
}

.rcn-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.rcn-footer-legal a {
    color: #555;
    text-decoration: none;
}

.rcn-footer-legal a:hover {
    color: var(--rcn-blue);
    text-decoration: underline;
}

/* --- Legal pages (docs/21-crm.md) --- */
.rcn-legal-body {
    max-width: 60rem;
    line-height: 1.65;
}

.rcn-legal-body h2 { margin-top: 1.75rem; }

/* --- In-app user manual (/admin/help, docs/manual/*.md) --- */
.rcn-help-body {
    max-width: 62rem;
    line-height: 1.65;
}

.rcn-help-body h1 { color: var(--rcn-blue); font-size: 1.75rem; margin: 0 0 1rem; }
.rcn-help-body h2 { color: var(--rcn-blue); margin-top: 2rem; border-bottom: 2px solid var(--rcn-gold); padding-bottom: 0.25rem; }
.rcn-help-body h3 { margin-top: 1.5rem; }
.rcn-help-body table { border-collapse: collapse; margin: 1rem 0; width: 100%; }
.rcn-help-body th, .rcn-help-body td { border: 1px solid #e3e8ef; padding: 0.45rem 0.75rem; text-align: left; vertical-align: top; }
.rcn-help-body th { background: #f5f8fc; }
.rcn-help-body code { background: #f0f3f8; padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.9em; }
.rcn-help-body pre { background: #0a2f61; color: #eef3fb; padding: 0.9rem 1.1rem; border-radius: 6px; overflow-x: auto; }
.rcn-help-body pre code { background: transparent; color: inherit; padding: 0; }
.rcn-help-body blockquote { margin: 1rem 0; padding: 0.6rem 1rem; border-left: 4px solid var(--rcn-gold); background: #fffaf0; }
.rcn-help-body blockquote > :first-child { margin-top: 0; }
.rcn-help-body blockquote > :last-child { margin-bottom: 0; }

/* --- Preference center (docs/21-crm.md) --- */
.rcn-pref-table {
    border-collapse: collapse;
    margin: 1.25rem 0;
}

.rcn-pref-table th, .rcn-pref-table td {
    border: 1px solid #e3e8ef;
    padding: 0.5rem 0.9rem;
    text-align: center;
}

.rcn-pref-table th:first-child, .rcn-pref-table td:first-child { text-align: left; }

.rcn-pref-cell { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }

.rcn-pref-ok { color: #1f7a3d; font-weight: 600; }

.rcn-btn-secondary {
    background: #fff;
    border: 1px solid var(--rcn-blue);
    color: var(--rcn-blue);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
}

.rcn-btn-secondary:hover { background: var(--rcn-surface-alt); }

.rcn-btn-primary {
    background: var(--rcn-blue);
    border: 1px solid var(--rcn-blue);
    color: #fff;
    padding: 0.5rem 1.1rem;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    margin-right: 0.5rem;
}

.rcn-btn-primary:hover { filter: brightness(1.08); }

.rcn-btn-primary:disabled, .rcn-btn-secondary:disabled { opacity: 0.5; cursor: default; }

/* --- Photo galleries (docs/07-photo-library.md) --- */

/* Album tiles on /galleries */
.rcn-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.rcn-album-tile {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    overflow: hidden;
    background: var(--rcn-surface);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.rcn-album-tile:hover {
    box-shadow: 0 6px 18px rgba(12, 60, 124, 0.15);
    transform: translateY(-2px);
}
.rcn-album-cover {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--rcn-surface-alt);
}
.rcn-album-cover--empty {
    background: repeating-linear-gradient(45deg, #eef2f7, #eef2f7 12px, #e3e8ef 12px, #e3e8ef 24px);
}
.rcn-album-meta { padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; }
.rcn-album-title { color: var(--rcn-blue); font-weight: 700; }
.rcn-album-date { color: #888; font-size: 0.85rem; }

/* Album header: subtitle + Markdown description */
.rcn-album-subtitle {
    font-size: 1.2rem;
    color: var(--rcn-blue-ink);
    margin: -0.25rem 0 0.5rem;
    font-weight: 600;
}
.rcn-album-description {
    margin: 0.75rem 0 0.5rem;
    line-height: 1.6;
}
.rcn-album-description > :first-child { margin-top: 0; }
.rcn-album-description > :last-child { margin-bottom: 0; }
.rcn-album-description h1,
.rcn-album-description h2,
.rcn-album-description h3 { color: var(--rcn-blue); }
.rcn-album-description a { color: var(--rcn-blue); }
.rcn-album-description img { max-width: 100%; height: auto; }

/* Thumbnail grid inside an album */
.rcn-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.rcn-gallery-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    background: var(--rcn-surface-alt);
}
.rcn-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}
.rcn-gallery-item:hover img { transform: scale(1.04); }
.rcn-gallery-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    opacity: 0;
    transition: opacity 0.15s ease;
}
.rcn-gallery-item:hover .rcn-gallery-caption { opacity: 1; }

/* Events list */
.rcn-event-list { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; }
.rcn-event-card {
    border: 1px solid #e3e8ef;
    border-left: 4px solid var(--rcn-gold);
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    background: var(--rcn-surface);
}
.rcn-event-card--past { border-left-color: #cbd3dd; opacity: 0.72; }
.rcn-event-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.rcn-event-title { color: var(--rcn-blue); margin: 0; font-size: 1.35rem; }
.rcn-event-subtitle { color: var(--rcn-blue-ink); font-weight: 600; margin: 0.15rem 0 0; }
.rcn-event-date { margin: 0.25rem 0 0; }
.rcn-event-description { margin: 0.6rem 0 0; line-height: 1.6; }
.rcn-event-description > :first-child { margin-top: 0; }
.rcn-event-description > :last-child { margin-bottom: 0; }
.rcn-event-description h1, .rcn-event-description h2, .rcn-event-description h3 { color: var(--rcn-blue); }
.rcn-event-description a { color: var(--rcn-blue); }
.rcn-event-description img { max-width: 100%; height: auto; }
.rcn-event-cta { display: flex; align-items: center; gap: 1rem; margin-top: 0.9rem; flex-wrap: wrap; }

.rcn-event-badge {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap;
}
/* Badge text colours darkened to clear WCAG AA (≥4.5:1) on their tints. */
.rcn-event-badge--open { background: #e6f4ea; color: #0f5f28; }
.rcn-event-badge--soon { background: #fff3cd; color: #6b5200; }
.rcn-event-badge--closed { background: #eef0f3; color: #4b5563; }

.rcn-btn {
    display: inline-block; background: var(--rcn-blue); color: #fff; text-decoration: none;
    font-weight: 600; padding: 0.5rem 1.1rem; border-radius: 6px;
}
.rcn-btn:hover { background: var(--rcn-blue-ink); }

/* --- Accessibility & robustness (public site) --- */
/* Visible keyboard-focus ring on the custom (non-MudBlazor) interactive elements.
   Offset places the blue ring on the white page, so it reads against any element
   fill (including the blue buttons). :focus-visible keeps it keyboard-only. */
.rcn-brand:focus-visible,
.rcn-nav a:focus-visible,
.rcn-account a:focus-visible,
.rcn-nav-toggle:focus-visible,
.rcn-btn:focus-visible,
.rcn-album-tile:focus-visible,
.rcn-gallery-item:focus-visible,
.rcn-page a:focus-visible {
    outline: 3px solid var(--rcn-blue);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Long unbroken strings (pasted URLs in Markdown descriptions, etc.) must not
   force horizontal scroll on a phone. break-word only kicks in when needed. */
.rcn-event-title, .rcn-album-title, .rcn-hero h1,
.rcn-event-description, .rcn-album-description { overflow-wrap: break-word; }

/* MudTable toolbars (the registrations grid, etc.) pack a search box, a status
   filter, an expand toggle and — once rows are selected — a whole row of bulk
   actions. MudBlazor's toolbar is a fixed-height, non-wrapping flex row, so they
   overflow / get cramped even on a desktop. Let the toolbar grow and wrap to
   multiple lines. Scoped to table toolbars only (app bars are untouched). */
.mud-table-toolbar {
    height: auto;
    min-height: var(--mud-internal-toolbar-height, 64px);
    flex-wrap: wrap;
    row-gap: 0.4rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* Admin layout utilities — shared so wrapping is defined once instead of via
   per-element inline `display:flex`. All wrap, so rows of title+actions or
   multiple fields reflow on narrow screens (desktop unaffected when they fit). */
.rcn-adminhead { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.rcn-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.rcn-fieldrow { display: flex; gap: 1rem; flex-wrap: wrap; }
.rcn-fieldrow > .mud-input-control { flex: 1 1 12rem; }

/* === Generic responsive list: a table on wide screens, cards on phones ===
   Used via the <ResponsiveList> + <DataCard> components across the admin. */

/* Layout switch (toggled in the @media block below). */
.rcn-tbl-cards { display: none; }

.rcn-card { padding: 0.75rem 0.9rem; margin-bottom: 0.6rem; }
.rcn-card-selectall { margin-bottom: 0.4rem; }
.rcn-card-head { display: flex; align-items: flex-start; gap: 0.4rem; }
.rcn-card-select { flex: 0 0 auto; margin-top: -0.15rem; }
.rcn-card-headmain {
    display: flex; flex: 1 1 auto; min-width: 0;
    justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.rcn-card-title { font-weight: 700; color: var(--rcn-blue); overflow-wrap: anywhere; }
.rcn-card-status { font-size: 0.8rem; font-weight: 600; color: #555; white-space: nowrap; }
.rcn-card-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.rcn-card-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; color: #666; font-size: 0.85rem; margin-top: 0.25rem; }
.rcn-card-body { margin-top: 0.4rem; font-size: 0.9rem; }
/* Long unbreakable values (SendGrid error JSON/URLs, message-ids, emails) must
   wrap inside the card instead of forcing it wider than the screen. overflow-wrap
   isn't inherited, so it's applied to the card and its descendants. */
.rcn-card, .rcn-card * { overflow-wrap: anywhere; }
.rcn-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-top: 0.4rem; }
.rcn-card-detail { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #eef1f5; }
/* Optional slots collapse when their (conditional) content renders nothing. */
.rcn-card-select:empty, .rcn-card-meta:empty, .rcn-card-body:empty, .rcn-card-detail:empty { display: none; }

/* --- Registrations grid: bespoke toolbar (search + filter + selection bar) --- */
.rcn-reg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.rcn-search { position: relative; display: inline-flex; }
.rcn-search-popup {
    position: absolute; top: 100%; left: 0; z-index: 60; margin-top: 0.25rem;
    width: 22rem; max-width: calc(100vw - 2rem);
}
.rcn-selbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    background: var(--rcn-surface-alt); border: 1px solid #e3e8ef;
}
/* FilterButton: the checklist floats below its button. */
.rcn-filter { position: relative; display: inline-flex; }
.rcn-filter-panel {
    position: absolute; top: 100%; left: 0; z-index: 60; margin-top: 0.25rem;
    min-width: 15rem; max-width: calc(100vw - 2rem);
}

/* --- Internal admin notes (NotesPanel) --- */
.rcn-notes { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed #d9dee5; }
.rcn-notes-head { display: block; color: var(--rcn-blue-ink); margin-bottom: 0.25rem; }
.rcn-note {
    background: var(--rcn-surface-alt); border: 1px solid #e3e8ef; border-radius: 6px;
    padding: 0.4rem 0.6rem; margin-bottom: 0.35rem;
}
.rcn-note-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9rem; }
.rcn-note-meta { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; color: #888; font-size: 0.78rem; margin-top: 0.15rem; }
.rcn-note-buttons { display: flex; gap: 0.1rem; flex-shrink: 0; }
.rcn-note-actions { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
.rcn-note-add { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.4rem; }
.rcn-note-add > .mud-input-control { flex: 1 1 auto; }
/* In the dialog the panel is the whole content — drop its inline separator. */
.rcn-notes-dialog .rcn-notes { margin-top: 0; padding-top: 0; border-top: none; }
.rcn-notes-dialog .rcn-notes-head { display: none; }   /* the dialog title already names it */

/* ============================================================
   Responsive — phones & small tablets (see docs/09-branding.md)
   ============================================================ */
@media (max-width: 720px) {
    /* Header collapses to logo + hamburger; nav/account drop into a panel. */
    .rcn-header { padding: 0.6rem 1rem; flex-wrap: nowrap; }
    .rcn-logo { height: 40px; }
    .rcn-nav-toggle { display: flex; }

    .rcn-header-right {
        position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
        display: none;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 0.5rem 0 0.75rem;
        background: var(--rcn-surface);
        border-bottom: 3px solid var(--rcn-gold);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    }
    .rcn-header-right.open { display: flex; }

    .rcn-nav { flex-direction: column; gap: 0; width: 100%; }
    .rcn-nav a { padding: 0.7rem 1.25rem; border-top: 1px solid #eef1f5; }

    .rcn-account {
        flex-direction: column; align-items: stretch; gap: 0;
        font-size: 0.95rem; border-top: 1px solid #eef1f5; margin-top: 0.25rem;
    }
    .rcn-account-name, .rcn-account-link { padding: 0.7rem 1.25rem; }

    /* On DEV, match the panel underline to the red marker. */
    .rcn-env-dev .rcn-header-right { border-bottom-color: #b91c1c; }

    /* Public content breathes a bit tighter on phones. */
    .rcn-hero { padding: 2.5rem 1.25rem; }
    .rcn-hero h1 { font-size: 1.8rem; }
    .rcn-page { padding: 1.75rem 1.25rem; }

    /* (Admin title/action & field rows now use the .rcn-adminhead/.rcn-actions/
       .rcn-fieldrow utilities, which wrap intrinsically — no inline-style hack.) */

    /* Registrations grid: show the search icon, collapse the field until tapped
       (then it drops to its own full-width line), and swap the table for cards. */
    .rcn-tbl-wide { display: none; }
    .rcn-tbl-cards { display: block; }

    /* MudTable mobile (stacked-card) layout: long values — email addresses,
       SendGrid message-ids, cc/bcc lists on the email log — must wrap instead
       of forcing the card wider than the screen (horizontal scroll). The cells
       are flex with the label as ::before; give the value room to shrink/break.
       overflow-wrap isn't inherited, so it's set on the cell and its children. */
    .mud-xs-table .mud-table-cell { min-width: 0; overflow-wrap: anywhere; }
    .mud-xs-table .mud-table-cell > * { min-width: 0; overflow-wrap: anywhere; }
}

/* Monaco source editor in the email-template editor must fill its fixed-height wrapper. Monaco measures its
   container, so without an explicit height on the editor element it collapses to a few px. */
.rcn-monaco { height: 100%; width: 100%; display: block; }

/* Rendered-Markdown preview in the note / custom-email editors (MarkdownFieldEditor). */
.rcn-md-preview p { margin: 0 0 8px; } .rcn-md-preview p:last-child { margin-bottom: 0; }
.rcn-md-preview ul, .rcn-md-preview ol { margin: 0 0 8px; padding-left: 20px; }
.rcn-md-preview a { color: var(--rcn-blue); }