/* =====================================================================
   Student Council – design system
   ---------------------------------------------------------------------
   1. Design tokens (colours, spacing, fonts...)  <- change the theme HERE
   2. Base styles
   3. Layout (header, footer, containers, grids)
   4. Components (buttons, forms, cards, alerts, toasts, tables, dialog...)
   5. Pages (home, login, errors)
   6. Utilities, print
   Colours come from the CS logo: burgundy, deep wine, cream, light blue.
   ===================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
    /* Brand */
    --brand-burgundy: #9e2a40;
    --brand-wine: #51101c;
    --brand-wine-deep: #340c14;
    --brand-cream: #f7f2e6;
    --brand-blue: #a9cdec;

    /* Light theme */
    --bg: #fbf8f2;
    --surface: #ffffff;
    --surface-2: #f4eee3;
    --border: #e6ddd0;
    --border-strong: #cdbfae;
    --text: #2a1a1e;
    --text-muted: #6b5a5e;
    --primary: var(--brand-burgundy);
    --primary-strong: #7f1f33;
    --primary-soft: #f6e4e7;
    --on-primary: #ffffff;
    --accent: #2f6fa3;          /* the "CS" light blue, darkened for readable text */
    --accent-soft: #e3f0fb;
    --header-bg: var(--brand-wine);
    --header-text: #fbeff0;
    --header-strong: #ffffff;   /* header text on hover; dark on a light header colour (#41) */
    --header-overlay: 255 255 255;  /* hover tint in the header (r g b) */
    --hero-text: #ffffff;
    --success: #2a7347;
    --success-soft: #e3f3e9;
    --warning: #9a6200;
    --warning-soft: #fdf1dc;
    --danger: #b3261e;
    --danger-soft: #fbe5e3;
    --focus: #2f6fa3;

    /* Typography */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
    --text-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;

    /* Shapes */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-full: 999px;
    --shadow-sm: 0 1px 2px rgb(52 12 20 / 0.06);
    --shadow: 0 1px 3px rgb(52 12 20 / 0.08), 0 4px 14px rgb(52 12 20 / 0.06);
    --shadow-lg: 0 10px 40px rgb(52 12 20 / 0.18);

    --container: 1180px;
    --header-height: 64px;
    /* Motion: short, soft, "Apple-like" curves. All motion is switched off for prefers-reduced-motion. */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --transition: 160ms var(--ease-out);
    --transition-spring: 260ms var(--ease-spring);
    color-scheme: light;
}

/* Dark theme: used when the system is dark (unless the user chose light), or when chosen with the toggle. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #160d10;
        --surface: #21151a;
        --surface-2: #2b1c22;
        --border: #3d2a31;
        --border-strong: #5a4048;
        --text: #f3eae7;
        --text-muted: #bba6ab;
        --primary: #e46d83;
        --primary-strong: #f08ca0;
        --primary-soft: #3b1a23;
        --on-primary: #1a0a0e;
        --accent: #a9cdec;
        --accent-soft: #1d2c3a;
        --header-bg: #2a0a12;
        --header-text: #f7e9ec;
        --header-strong: #ffffff;
        --header-overlay: 255 255 255;
        --success: #6fcf97;
        --success-soft: #16301f;
        --warning: #f0b45a;
        --warning-soft: #33260f;
        --danger: #ff8a80;
        --danger-soft: #3a1714;
        --focus: #a9cdec;
        --shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 14px rgb(0 0 0 / 0.3);
        --shadow-lg: 0 10px 40px rgb(0 0 0 / 0.55);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg: #160d10;
    --surface: #21151a;
    --surface-2: #2b1c22;
    --border: #3d2a31;
    --border-strong: #5a4048;
    --text: #f3eae7;
    --text-muted: #bba6ab;
    --primary: #e46d83;
    --primary-strong: #f08ca0;
    --primary-soft: #3b1a23;
    --on-primary: #1a0a0e;
    --accent: #a9cdec;
    --accent-soft: #1d2c3a;
    --header-bg: #2a0a12;
    --header-text: #f7e9ec;
    --header-strong: #ffffff;
    --header-overlay: 255 255 255;
    --success: #6fcf97;
    --success-soft: #16301f;
    --warning: #f0b45a;
    --warning-soft: #33260f;
    --danger: #ff8a80;
    --danger-soft: #3a1714;
    --focus: #a9cdec;
    --shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 14px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 40px rgb(0 0 0 / 0.55);
    color-scheme: dark;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + 1rem);
    /* Always keep room for the scrollbar, so the page does not jump sideways between short and long pages (#37). */
    scrollbar-gutter: stable;
}
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.55;
}
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--space-3); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }
a { color: var(--primary); text-underline-offset: 0.15em; }
a:hover { color: var(--primary-strong); }
img { max-width: 100%; height: auto; }
code { font-family: var(--font-mono); font-size: 0.9em; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

.skip-link {
    position: absolute; left: var(--space-3); top: -100px; z-index: 100;
    background: var(--surface); color: var(--text); padding: var(--space-2) var(--space-4);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.skip-link:focus { top: var(--space-3); }

.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.icon-sm { width: 1em; height: 1em; }
.icon-xl { width: 3rem; height: 3rem; }

/* ---------- 3. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 640px) { .container { padding-inline: var(--space-5); } }
.site-main { flex: 1; }
.section { padding-block: var(--space-6); }
@media (min-width: 768px) { .section { padding-block: var(--space-7); } }
.section-title { font-size: var(--text-lg); margin-bottom: var(--space-4); }

/* Header: brand | navigation | one menu (account, language, theme). */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--header-bg) 94%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
    color: var(--header-text);
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.15);
}
.header-inner { display: flex; align-items: center; gap: var(--space-3); min-height: var(--header-height); }
.brand { display: flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; min-width: 0; flex-shrink: 0; }
.brand:hover { color: inherit; }
.brand-logo { border-radius: 8px; width: 44px; height: 44px; transition: transform var(--transition-spring); }
.brand:hover .brand-logo { transform: rotate(-4deg) scale(1.04); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name { font-family: var(--font-serif); font-weight: 700; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: 0.75rem; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-panel { flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.nav-list a {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-full);
    color: var(--header-text); text-decoration: none; font-weight: 500; font-size: 0.95rem; white-space: nowrap;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.nav-list a:hover { background: rgb(var(--header-overlay) / 0.1); color: var(--header-strong); }
.nav-list a:active { transform: scale(0.96); }
.nav-list a[aria-current="page"] { background: rgb(var(--header-overlay) / 0.16); color: var(--header-strong); }
.nav-list .icon { opacity: 0.85; }

.header-tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-shrink: 0; }
.header-tools .icon-btn { color: var(--header-text); }
.header-tools .icon-btn:hover { background: rgb(var(--header-overlay) / 0.12); color: var(--header-strong); }
.site-header .btn-primary { background: var(--brand-cream); color: var(--brand-wine); border-color: transparent; }
.site-header .btn-primary:hover { background: #fff; color: var(--brand-wine-deep); }

.header-menu-button {
    display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 4px 10px 4px 4px;
    border-radius: var(--radius-full); border: 1px solid rgb(var(--header-overlay) / 0.22); color: var(--header-text);
    font-weight: 600; font-size: var(--text-sm); cursor: pointer; list-style: none;
    transition: background var(--transition), border-color var(--transition);
}
.header-menu-button:hover, .header-menu[open] .header-menu-button { background: rgb(var(--header-overlay) / 0.12); border-color: rgb(var(--header-overlay) / 0.35); }
.header-menu-button > .icon:first-child { margin-left: 6px; }
.header-menu-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-menu-chevron { opacity: 0.75; transition: transform var(--transition); }
.header-menu[open] .header-menu-chevron { transform: rotate(180deg); }
.avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
    background: var(--brand-cream); color: var(--brand-wine); font-weight: 800; font-size: 0.85rem;
}

.site-header .nav-toggle { display: none; }

/* Search (#75) */
.header-search[aria-current="page"] { background: rgb(var(--header-overlay) / 0.12); }
.search-page { max-width: 52rem; display: flex; flex-direction: column; gap: var(--space-5); }
.search-form { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
.search-form > .icon { color: var(--text-muted); flex-shrink: 0; }
.search-form input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; font-size: var(--text-lg); padding-inline: 0; box-shadow: none; }
.search-form input[type="search"]:focus, .search-form input[type="search"]:focus-visible { outline: none; box-shadow: none; }
.search-form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.search-group { display: flex; flex-direction: column; gap: var(--space-3); }
.search-group-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); margin: 0; }
.search-group-title .icon { color: var(--primary); }
.search-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.search-result { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); color: var(--text); text-decoration: none; transition: border-color 150ms, transform 150ms; }
.search-result:hover { border-color: var(--primary); transform: translateY(-1px); }
.search-result-title { font-weight: 600; color: var(--primary); }
.search-result-date { font-size: var(--text-sm); white-space: nowrap; }
.search-result-text { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--text-muted); }
.search-result mark { background: rgb(250 204 21 / 0.35); color: inherit; border-radius: 2px; padding-inline: 1px; }
@media (max-width: 560px) { .search-result { grid-template-columns: 1fr; } .search-form .btn { padding-inline: var(--space-3); } }

/* Narrower screens: the navigation folds into a panel under the bar (only with JS; without JS it stays visible). */
@media (max-width: 1080px) {
    .header-inner { flex-wrap: wrap; }
    /* Brand and buttons stay on one row on phones (#53): the site name shortens with "…" instead. */
    .brand { flex-shrink: 1; }
    .header-tools { flex-wrap: nowrap; }
    .js .site-header .nav-toggle { display: inline-flex; }
    .header-menu-name { display: none; }
    .nav-panel { order: 10; flex-basis: 100%; justify-content: flex-start; }
    .js .nav-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms var(--ease-out); }
    .js .nav-panel.is-open { grid-template-rows: 1fr; }
    .nav-panel > .nav-inner { min-height: 0; overflow: hidden; }
    .nav-list { flex-direction: column; width: 100%; gap: 2px; }
    .js .nav-panel.is-open .nav-inner { padding-bottom: var(--space-3); }
    .nav-list a { padding: var(--space-3); border-radius: var(--radius); }
}
@media (min-width: 1081px) and (max-width: 1280px) {
    /* Medium screens: labels only, so all menu items fit next to the brand. */
    .nav-list .icon { display: none; }
    .nav-list a { padding-inline: 0.7rem; }
    .brand-sub { display: none; }
}
@media (max-width: 420px) { .brand-sub { display: none; } .brand-logo { width: 38px; height: 38px; } .brand-name { font-size: 1rem; } .header-inner { gap: var(--space-2); } }

/* Dropdown menu: <details class="dropdown"><summary>…</summary><div class="dropdown-menu">…</div></details> */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-menu {
    position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 14rem; max-width: min(20rem, calc(100vw - 2rem));
    padding: var(--space-2); background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    transform-origin: top left; animation: pop-in 180ms var(--ease-out);
}
.dropdown-menu-end { left: auto; right: 0; transform-origin: top right; }
/* Open menus float above dialogs and scrolling boxes (placed by app.js, GitHub issue #57). */
.dropdown-menu.is-floating { position: fixed; z-index: 1000; right: auto !important; bottom: auto; margin: 0; overflow-y: auto; overscroll-behavior: contain; }
.dropdown-menu.is-floating.is-above { transform-origin: bottom left; }
/* A menu moved to the end of the page while it is open (app.js, #79): above the header and everything else. */
.dropdown-menu.is-portaled { z-index: 1100; }
.dropdown-menu form { margin: 0; }
.dropdown-item {
    display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 0.55rem 0.7rem;
    border: 0; border-radius: var(--radius); background: transparent; color: var(--text);
    font: inherit; font-size: 0.95rem; text-align: left; text-decoration: none; cursor: pointer;
    transition: background var(--transition);
}
.dropdown-item:hover, .dropdown-item[aria-current="page"] { background: var(--surface-2); color: var(--text); }
.dropdown-item .icon { color: var(--text-muted); }
.dropdown-item-danger, .dropdown-item-danger:hover { color: var(--danger); }
.dropdown-header { display: flex; flex-direction: column; padding: var(--space-2) 0.7rem var(--space-3); line-height: 1.3; }
.dropdown-header .muted { font-size: var(--text-sm); }
.dropdown-divider { height: 1px; background: var(--border); margin: var(--space-2) 0; }
.dropdown-label { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-2) 0.7rem var(--space-1); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.dropdown-choices { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 var(--space-1) var(--space-1); }
.choice {
    display: inline-flex; align-items: center; gap: 4px; padding: 0.3rem 0.65rem; border-radius: var(--radius-full);
    border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm);
    text-decoration: none; cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.choice:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
.choice[aria-current="true"], .choice[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* Footer */
.site-footer { margin-top: var(--space-7); background: var(--surface-2); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-sm); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); padding-block: var(--space-6); }
.footer-credits { font-size: var(--text-sm); color: var(--text-muted); }   /* who made the template and the module (#82) */
.footer-logo { width: 260px; max-width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }

/* Grids and stacks */
.grid { display: grid; gap: var(--space-5); }
/* Grid columns may shrink below their content (wide tables then scroll inside .table-wrap). */
.grid > *, .grid-sidebar-right > * { min-width: 0; }
@media (min-width: 720px) {
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
}
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.row-center { justify-content: center; }

.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.page-head h1 { margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- 4. Components ---------- */

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 44px; padding: 0.55rem 1.1rem;
    border: 1px solid transparent; border-radius: var(--radius);
    font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.2;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn:active:not(:disabled), .icon-btn:active, .choice:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover:not(:disabled) { background: var(--primary-strong); color: var(--on-primary); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(0.92); color: #fff; }
:root[data-theme="dark"] .btn-danger { color: #1a0a0e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-danger { color: #1a0a0e; } }
.btn-sm { min-height: 36px; padding: 0.35rem 0.75rem; font-size: var(--text-sm); }
.btn-block { width: 100%; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
    content: ""; position: absolute; width: 1.1em; height: 1.1em;
    border: 2px solid var(--on-primary); border-right-color: transparent; border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after { border-color: var(--text); border-right-color: transparent; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text); cursor: pointer; transition: background var(--transition);
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn { transition: background var(--transition), transform var(--transition); }

/* Forms */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label, .label { font-weight: 600; font-size: 0.95rem; }
.optional { font-weight: 400; color: var(--text-muted); }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"],
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="file"], select, textarea {
    width: 100%; min-height: 44px; padding: 0.55rem 0.75rem;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    font: inherit; transition: border-color var(--transition), box-shadow var(--transition);
}
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
.hint { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
.field-error { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--danger); margin: 0; font-weight: 500; }
.field-row { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .field-row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.checkbox { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.checkbox input { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); }
.form-narrow { max-width: 560px; }

/* Forms to create something with a date: calendar events and room bookings look the same (GitHub issue #59). */
/* Centred, one card with sections and a footer with the buttons (GitHub issue #63). */
.entry-page { max-width: 820px; }
.entry-page > .page-head { justify-content: center; text-align: center; }
.entry-form {
    gap: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); overflow: clip;
}
.entry-form > .card {
    border: 0; border-radius: 0; box-shadow: none; background: transparent; animation: none;
    padding: var(--space-5) var(--space-6);
}
.entry-form > .card + .card { border-top: 1px solid var(--border); }
.entry-form.stack-lg > * + * { margin-top: 0; }
.entry-form > .card-title, .entry-form .card-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-1); }
.entry-form > .row {
    justify-content: flex-end; padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border); background: var(--surface-2);
}
.entry-form > .row .btn-primary, .entry-form > .row .btn-danger { order: 2; min-width: 8rem; }
@media (max-width: 640px) {
    .entry-form > .card, .entry-form > .row { padding-inline: var(--space-4); }
    .entry-form > .row .btn-primary, .entry-form > .row .btn-danger { flex: 1; }
}
.entry-form .card-title { display: flex; align-items: center; gap: var(--space-2); }
.entry-form .card-title .icon { color: var(--primary); }
.datetime-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .datetime-grid { grid-template-columns: 1fr 1fr; } }
.datetime-inputs { display: flex; gap: var(--space-2); }
.datetime-inputs input[type="date"] { flex: 1 1 60%; }
.datetime-inputs input[type="time"] { flex: 1 1 40%; }
.datetime-inputs input[type="time"]:only-child { flex: 0 1 50%; }
.scope-switch { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); }

/* "Repeat" panel below the date and time (<details class="repeat-panel">, GitHub issue #58) */
.repeat-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.repeat-panel > summary {
    display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); min-height: 48px;
    cursor: pointer; list-style: none; font-weight: 600; border-radius: var(--radius);
}
.repeat-panel > summary::-webkit-details-marker { display: none; }
.repeat-panel > summary:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.repeat-panel > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.repeat-panel > summary > .icon:first-child { color: var(--primary); }
.repeat-summary { flex: 1; min-width: 0; font-weight: 400; color: var(--text-muted); font-size: var(--text-sm); text-align: right; }
.repeat-panel.is-repeating .repeat-summary { color: var(--text); font-weight: 600; }
.repeat-panel > summary .repeat-chevron { flex: 0 0 auto; transition: transform var(--transition); }
.repeat-panel[open] > summary .repeat-chevron { transform: rotate(180deg); }
.repeat-body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) var(--space-4) var(--space-4); }
.repeat-interval { display: flex; align-items: center; gap: var(--space-2); }
.repeat-interval input { max-width: 6rem; }
.js .repeat-unit { display: none; }
.js .repeat-unit.is-active { display: inline; }
.no-js .repeat-unit + .repeat-unit::before { content: "/ "; }
.js .repeat-body.is-none [data-repeat-only], .js .repeat-body [data-repeat-for] { display: none; }
.js .repeat-body [data-repeat-for].is-active { display: flex; }

/* Weekday chips; the weekday of the start date is marked (app.js) */
.weekday-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.weekday-chip { position: relative; }
.weekday-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.weekday-chip span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; padding: 0 0.4rem;
    border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface); font-weight: 600; font-size: var(--text-sm);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.weekday-chip.is-start span { border-width: 2px; border-color: var(--primary); }
.weekday-chip input:checked + span { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.weekday-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Cards */
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--space-5); box-shadow: var(--shadow-sm);
}
.card-title { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.card-accent { border-top: 4px solid var(--card-accent, var(--primary)); }
.details { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.details dt { color: var(--text-muted); }
.details dd { margin: 0; font-weight: 500; }

/* Alerts (inside the page) */
.alert {
    display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid transparent;
    margin-bottom: var(--space-4);
}
.alert p { margin: 0; }
.alert .icon { margin-top: 0.15em; }
.alert-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.alert-info { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.alert-error { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.alert > p, .toast > p { color: var(--text); }

/* Toasts (flash messages) */
.toasts {
    position: fixed; z-index: 90; right: var(--space-4); bottom: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-2); width: min(420px, calc(100vw - 2rem));
}
.toast {
    display: flex; align-items: flex-start; gap: var(--space-3);
    background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent);
    border-radius: var(--radius); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    box-shadow: var(--shadow-lg); animation: toast-in 220ms ease-out;
}
.toast p { margin: 0; flex: 1; }
.toast > .icon { margin-top: 0.15em; color: var(--accent); }
.toast-success { border-left-color: var(--success); }
.toast-success > .icon { color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-error > .icon { color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast-warning > .icon { color: var(--warning); }
.toast-close { background: none; border: 0; padding: var(--space-1); color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); display: flex; }
.toast-close:hover { background: var(--surface-2); color: var(--text); }
.toast.is-hiding { opacity: 0; transform: translateY(8px); transition: opacity 200ms, transform 200ms; }
.no-js .toasts { position: static; width: auto; max-width: var(--container); margin: var(--space-4) auto 0; padding-inline: var(--space-4); }
.no-js .toast-close { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Badges */
.badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 0.15rem 0.6rem; border-radius: var(--radius-full);
    background: var(--surface-2); color: var(--text); font-size: 0.8rem; font-weight: 600; border: 1px solid var(--border);
}
/* Role colours (#49, admin area only): tinted badge with a dot, readable with any colour in light and dark mode. */
.role-badge { gap: 0.4em; background: color-mix(in srgb, var(--role) 14%, var(--surface)); border-color: color-mix(in srgb, var(--role) 45%, transparent); color: var(--text); }
.role-badge::before, .role-dot { content: ""; display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--role); flex: 0 0 auto; }
.role-dot { width: 0.7rem; height: 0.7rem; margin-right: var(--space-2); vertical-align: 0.05em; }
.badge-primary { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.badge-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* Tables */
.table-wrap { overflow-x: auto; position: relative; border: 1px solid var(--border); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { background: var(--surface-2); font-weight: 600; font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Rows that open a page when clicked (tr[data-href], see app.js) */
.table tr.row-link { cursor: pointer; }
.table tr.row-link:hover { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.table tr.row-link:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* Empty state */
.empty-state {
    text-align: center; padding: var(--space-7) var(--space-5);
    background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
    color: var(--text-muted);
}
.empty-state .icon-xl { color: var(--primary); opacity: 0.7; margin-bottom: var(--space-3); }
.empty-state h1, .empty-state h2 { color: var(--text); }
.empty-state p { max-width: 52ch; margin-inline: auto; }

/* Dialog (confirmation) */
.dialog {
    border: 0; border-radius: var(--radius-lg); padding: var(--space-5);
    width: min(440px, calc(100vw - 2rem));
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.dialog::backdrop { background: rgb(20 5 10 / 0.55); backdrop-filter: blur(4px); }
.dialog[open] { animation: dialog-in 260ms var(--ease-out); }
.dialog[open]::backdrop { animation: fade-in 200ms ease-out; }
.dialog h2 { font-size: var(--text-lg); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); flex-wrap: wrap; }

/* Loading */
.spinner {
    display: inline-block; width: 1.5rem; height: 1.5rem;
    border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.skeleton {
    height: 1rem; border-radius: var(--radius-sm); margin-bottom: var(--space-3);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
    background-size: 200% 100%; animation: shimmer 1.4s infinite;
}
.skeleton-short { width: 60%; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Colour swatches (style guide) */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-3); }
.swatch { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
.swatch span { height: 48px; border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* ---------- 5. Pages ---------- */

/* Hero (home) */
.hero {
    background:
        radial-gradient(circle at 85% 20%, rgb(169 205 236 / 0.18), transparent 40%),
        linear-gradient(135deg, var(--brand-wine) 0%, var(--brand-burgundy) 100%);
    color: var(--hero-text);
}
.hero-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-7); }
.hero h1 { font-family: var(--font-serif); font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.hero .lead { font-size: var(--text-lg); max-width: 56ch; opacity: 0.92; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 700; color: var(--brand-blue); margin-bottom: var(--space-2); }
.hero-logo { width: 180px; height: 180px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transform: rotate(3deg); }
@media (max-width: 720px) { .hero-logo { display: none; } .hero-inner { padding-block: var(--space-6); } }
/* Banner images (#47): they fade into each other behind the text; a dark gradient keeps the white text readable. */
.hero.has-images { position: relative; overflow: hidden; background: var(--brand-wine-deep); color: #fff; }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.hero-slide.is-active { opacity: 1; }
.hero.has-images::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.65) 0%, rgb(0 0 0 / 0.4) 55%, rgb(0 0 0 / 0.2) 100%); }
.hero.has-images .hero-inner { position: relative; z-index: 1; min-height: 300px; }
.hero.has-images .eyebrow { color: #cfe3f5; }
/*
 * Parallax (#52): the banner with images stays in place under the header and the page content slides over it
 * like a card. app.js sets --hero-scroll (0 → 1 while scrolling past the banner): the text drifts up and fades,
 * the picture zooms in slightly. With "reduce motion" only the sticking remains.
 */
.hero.has-images { position: sticky; top: var(--header-height); z-index: 0; display: flex; align-items: center; min-height: min(68vh, 620px); }
.hero.has-images .hero-inner { width: 100%; transform: translateY(calc(var(--hero-scroll, 0) * -48px)); opacity: calc(1 - var(--hero-scroll, 0) * 0.85); }
.hero.has-images .hero-slides { transform: scale(calc(1 + var(--hero-scroll, 0) * 0.08)); transform-origin: center top; }
.hero.has-images + .home-content {
    position: relative; z-index: 1; margin-top: calc(-1 * var(--space-6)); background: var(--bg);
    border-radius: 28px 28px 0 0; box-shadow: 0 -18px 40px rgb(0 0 0 / 0.28);
}
@media (max-width: 720px) { .hero.has-images { min-height: 52vh; } .hero.has-images + .home-content { border-radius: 20px 20px 0 0; } }
.banner-thumb { display: block; width: 192px; height: 60px; object-fit: cover; border-radius: var(--radius); background: var(--surface-2); }

/* Quick links */
/* Home page widgets (#78): two columns on wide screens; a widget is half or full width. */
.home-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-widget.is-full { grid-column: 1 / -1; } }
.home-widget { min-width: 0; animation: rise-in 460ms var(--ease-out) both; }
.home-widget > .card { height: 100%; }
/* Organisation widget (#78): groups as small chips with their colour. */
.membri-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.membri-mini a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; font-size: var(--text-sm); font-weight: 600; transition: border-color var(--transition), background var(--transition); }
.membri-mini a:hover { border-color: var(--m); background: color-mix(in srgb, var(--m) 10%, transparent); }
.membri-mini-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--m); color: #fff; font-size: 0.7rem; letter-spacing: 0.02em; }
/* Cafeteria (#80): dishes and special days, on the home page widget and the cafeteria page. */
.cafeteria-dishes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.cafeteria-dishes li { padding: var(--space-1) 0; border-bottom: 1px solid var(--border); }
.cafeteria-dishes li:last-child { border-bottom: 0; }
.cafeteria-widget-day { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.cafeteria-special { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: color-mix(in srgb, #e0a43a 18%, transparent); font-weight: 600; }
.cafeteria-special .icon { color: #b7791f; flex-shrink: 0; }
/* Polls widget (#77): open polls with a vote button. */
.poll-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.poll-mini-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius); background: var(--surface-2); }
.poll-mini-list li > a:first-child { display: flex; flex-direction: column; flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.poll-mini-list li > a:first-child:hover strong { color: var(--primary); }
.poll-mini-list .muted { font-size: var(--text-sm); }
/* Social media widget (#78): icons with the platform name. */
.social-list-large .social-link { width: auto; height: auto; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: 999px; font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.quick-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.quick-link {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    color: var(--text); text-decoration: none; font-weight: 600;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.quick-link:hover { border-color: var(--primary); color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow); }
.quick-link-icon { display: flex; padding: var(--space-2); border-radius: var(--radius); background: var(--primary-soft); color: var(--primary); }
.quick-link-arrow { margin-left: auto; color: var(--text-muted); }

/* Login */
.auth-page { display: flex; justify-content: center; }
.auth-card { width: 100%; max-width: 420px; padding: var(--space-6); }
.auth-logo { display: block; width: 72px; height: 72px; border-radius: var(--radius); margin-bottom: var(--space-4); }

/* Error page */
.error-code { font-family: var(--font-serif); font-size: 4rem; font-weight: 700; color: var(--primary); line-height: 1; margin-bottom: var(--space-3); }

/* Tabs (e.g. admin area) – scroll sideways on small screens */
.tabs {
    /* Scrolls sideways on small screens; never up and down (GitHub issue #17). */
    display: flex; gap: var(--space-1); overflow-x: auto; overflow-y: hidden; position: relative; margin-bottom: var(--space-5);
    box-shadow: inset 0 -1px 0 var(--border); scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
    padding: var(--space-3) var(--space-4); color: var(--text-muted); text-decoration: none; font-weight: 600;
    border-bottom: 3px solid transparent;
}
.tab:hover { color: var(--text); background: var(--surface-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tab[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }

/* More layout helpers */
@media (min-width: 720px) {
    .grid-sidebar-right { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 719px) { .grid-sidebar-right { display: grid; gap: var(--space-5); } }
.dashboard-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }
.nowrap { white-space: nowrap; }
.actions { text-align: right; white-space: nowrap; }
.table-compact th, .table-compact td { padding: var(--space-2) var(--space-3); }
.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }

/* Widgets and stat tiles */
.widget .card-title { display: flex; align-items: center; gap: var(--space-2); }
.widget .card-title .icon { color: var(--primary); }
.widget-link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-4); font-weight: 600; text-decoration: none; }
.widget-link:hover { text-decoration: underline; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.stat { background: var(--surface-2); border-radius: var(--radius); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; }
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { font-size: var(--text-sm); color: var(--text-muted); }
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.activity-list li:last-child { border-bottom: 0; }
.activity-who { font-weight: 600; }
.activity-time { flex-basis: 100%; font-size: 0.8rem; }

/* Permission checkboxes */
.perm-groups { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; }
.perm-group { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.perm-group legend { font-weight: 700; padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2)); }
.perm { align-items: flex-start; }
.perm input { margin-top: 0.2em; }
.perm-name { display: block; font-size: 0.75rem; color: var(--text-muted); }
.perm input:disabled + span { opacity: 0.6; }

/* Module cards */
/* Modules list (GitHub issue #65): one compact row per module, click to see details and buttons. */
.module-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: clip; }
.module-row + .module-row { border-top: 1px solid var(--border); }
.module-summary {
    display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) var(--space-4);
    cursor: pointer; list-style: none; transition: background var(--transition);
}
.module-summary::-webkit-details-marker { display: none; }
.module-summary:hover { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.module-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.module-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius); background: var(--primary-soft); color: var(--primary); }
.module-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); }
.module-chevron { flex: 0 0 auto; color: var(--text-muted); transition: transform var(--transition); }
.module-row[open] .module-chevron { transform: rotate(180deg); }
.module-row.is-disabled .module-icon { background: var(--surface-2); color: var(--text-muted); }
.module-row.is-disabled .module-name { color: var(--text-muted); }
.module-details { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 34px + var(--space-3)); }
.module-details p { margin: 0; }
.module-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
@media (max-width: 520px) { .module-details { padding-left: var(--space-4); } }
.module-actions { display: flex; gap: var(--space-2); }

/* Button groups: related buttons joined into one control (GitHub issue #21) */
.btn-group { display: inline-flex; align-items: stretch; }
.btn-group > .btn, .btn-group > form > .btn { border-radius: 0; }
.btn-group > .btn + .btn, .btn-group > * + form > .btn, .btn-group > form + .btn { margin-left: -1px; }
.btn-group > :first-child, .btn-group > form:first-child > .btn { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); }
.btn-group > :last-child, .btn-group > form:last-child > .btn { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.btn-group > .btn:hover, .btn-group > .btn:focus-visible { position: relative; z-index: 1; }
.btn-group > form { margin: 0; display: flex; }
.btn-icon { padding-inline: 0.55rem; }
.btn-group .btn-ghost { border-color: var(--border-strong); }

/* Search & filter panel (GitHub issue #20): hidden behind a button, opens with a short animation. */
.js .filter-panel:not(.is-open) { display: none; }
.js .filter-panel.is-open { animation: pop-in 200ms var(--ease-out); }
.filter-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem;
    border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font-size: 0.75rem; font-weight: 700;
}
.filter-toggle[aria-expanded="true"] { background: var(--surface-2); border-color: var(--text-muted); }
@media (max-width: 420px) { .filter-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* Multiple-choice filter (core/templates/partials/multiselect.php) */
.multiselect-button {
    display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 38px; min-width: 9.5rem; max-width: 16rem;
    padding: 0.35rem 0.7rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
    font-size: var(--text-sm); cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.multiselect-button:hover { border-color: var(--text-muted); }
.multiselect-button.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.multiselect-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multiselect[open] .multiselect-button .icon { transform: rotate(180deg); }
.multiselect-button .icon { transition: transform var(--transition); }
.multiselect-menu { min-width: 15rem; max-height: min(22rem, 60vh); overflow-y: auto; }
.multiselect-option { display: flex; align-items: center; gap: var(--space-2); padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.95rem; }
.multiselect-option:hover { background: var(--surface-2); }
.multiselect-option input { width: 1.1rem; height: 1.1rem; accent-color: var(--primary); flex: 0 0 auto; }
.multiselect-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ev); flex: 0 0 auto; }
.multiselect-empty { padding: var(--space-2); margin: 0; font-size: var(--text-sm); }
.multiselect-actions { position: sticky; bottom: calc(-1 * var(--space-2)); display: flex; justify-content: flex-end; gap: var(--space-2); margin: var(--space-2) calc(-1 * var(--space-2)) calc(-1 * var(--space-2)); padding: var(--space-2); background: var(--surface); border-top: 1px solid var(--border); }

/* Filters bar */
.filters { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); align-items: end; margin-bottom: var(--space-5); }
.filters-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-4); }
.pagination-gap { padding: 0 var(--space-1); color: var(--text-muted); }
.pagination-info { margin-left: auto; font-size: var(--text-sm); }

/* Misc */
.password-once .password-value code { font-size: 1.4rem; letter-spacing: 0.05em; background: var(--surface); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); user-select: all; }
.danger-zone { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-2); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.logo-preview { border-radius: var(--radius); border: 1px solid var(--border); object-fit: cover; }
.logo-preview-long { width: 200px; height: auto; object-fit: contain; }

/* Small event list (home page widget, Membri profiles) */
.event-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.event-mini-list a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.event-mini-list a:hover { background: var(--surface-2); color: var(--text); }
.event-mini-date { flex: 0 0 3rem; display: flex; flex-direction: column; align-items: center; padding: var(--space-1) 0; border-radius: var(--radius-sm); border-top: 4px solid var(--ev, var(--primary)); background: var(--surface-2); line-height: 1.1; }
.event-mini-day { font-size: 1.2rem; font-weight: 700; }
.event-mini-month { font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); }
.event-mini-main { display: flex; flex-direction: column; min-width: 0; }
.event-mini-main .muted { font-size: var(--text-sm); }
.cal-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* Horizontal bar list (dashboard counts) */
.bar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.bar-list li { display: grid; grid-template-columns: minmax(0, 9rem) 1fr 2rem; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 8px; background: var(--surface-2); border-radius: var(--radius-full); overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--primary); border-radius: var(--radius-full); }
.bar-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Time grid (week/day views of the calendar and the room bookings).
   Events: --ev = colour, --ev-text = readable text colour on it. */
.timegrid-wrap { overflow-x: auto; position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.timegrid { --hour-height: 3.5rem; --label-width: 3.5rem; min-width: calc(var(--label-width) + var(--days) * 5.75rem); } /* a whole week fits on a 768 px tablet (#53) */
.timegrid.is-single { min-width: 0; }
.tg-head, .tg-allday, .tg-body { display: grid; grid-template-columns: var(--label-width) repeat(var(--days), minmax(0, 1fr)); }
.tg-head { position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--border); }
.tg-dayhead { display: flex; flex-direction: column; align-items: center; padding: var(--space-2) 0; text-decoration: none; color: var(--text-muted); border-left: 1px solid var(--border); }
.tg-dayhead:hover { background: var(--surface-2); color: var(--text); }
.tg-weekday { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.tg-date { font-size: 1.25rem; font-weight: 700; color: var(--text); width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.tg-dayhead.is-today .tg-date { background: var(--primary); color: var(--on-primary); }
.tg-allday { border-bottom: 1px solid var(--border); background: var(--surface-2); }
.tg-label { font-size: 0.7rem; color: var(--text-muted); padding: 4px; text-align: right; align-self: center; }
.tg-allday-cell { border-left: 1px solid var(--border); padding: 3px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tg-hours { display: grid; grid-template-rows: repeat(var(--hours), var(--hour-height)); }
.tg-hour { position: relative; font-size: 0.7rem; color: var(--text-muted); text-align: right; padding-right: 6px; }
.tg-hour span { position: relative; top: -0.55em; }
.tg-hour:first-child span { top: 0; }
.tg-col {
    position: relative; border-left: 1px solid var(--border); height: calc(var(--hours) * var(--hour-height));
    background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px);
    background-size: 100% var(--hour-height);
}
.tg-col.is-today { background-color: color-mix(in srgb, var(--primary) 5%, transparent); }
.tg-event {
    position: absolute; overflow: hidden; z-index: 1;
    padding: 2px 6px; border-radius: 6px; border-left: 3px solid color-mix(in srgb, var(--ev) 70%, #000);
    background: var(--ev); color: var(--ev-text); text-decoration: none; font-size: 0.75rem; line-height: 1.25;
    display: flex; flex-direction: column; box-shadow: 0 0 0 1px var(--surface);
}
.tg-event:hover { z-index: 3; filter: brightness(1.08); color: var(--ev-text); box-shadow: var(--shadow); }
.tg-event-time { opacity: 0.85; font-variant-numeric: tabular-nums; }
.tg-event-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.tg-event-loc { opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Short events: one line, title first, never smaller than one line of text. */
.tg-event.is-short, .tg-event.is-tiny { flex-direction: row; align-items: center; gap: 4px; padding-block: 0; min-height: 1.15rem; white-space: nowrap; }
.tg-event.is-short .tg-event-title, .tg-event.is-tiny .tg-event-title { flex: 0 1 auto; min-width: 0; }
.tg-event.is-short .tg-event-time, .tg-event.is-tiny .tg-event-time { flex: 0 0 auto; font-size: 0.7rem; }
.tg-event.is-tiny { font-size: 0.7rem; line-height: 1.1; }
/* Narrow events (several side by side): the title is more important than the time. */
.tg-event { container-type: inline-size; }
@container (max-width: 95px) {
    .tg-event-time { display: none; }
    .tg-event-title { white-space: nowrap; }
}
/* All-day events tint their whole day column (behind the timed events). */
.tg-tint { position: absolute; inset: 0; background: color-mix(in srgb, var(--ev) 10%, transparent); pointer-events: none; }
.tg-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 2; pointer-events: none; }
.tg-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }

/* Week on phones (calendar and room bookings): the days as a list instead of the 7-column grid. */
.week-agenda { display: none; }
@media (max-width: 700px) {
    .timegrid-wrap.is-week { display: none; }
    .week-agenda { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
}
.week-agenda-day { display: flex; gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--border); }
.week-agenda-day:last-child { border-bottom: 0; }
.week-agenda-day.is-today { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.week-agenda-date { flex: 0 0 3rem; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--text-muted); }
.week-agenda-daynum { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 1.15rem; font-weight: 700; color: var(--text); }
.week-agenda-day.is-today .week-agenda-daynum { background: var(--primary); color: var(--on-primary); }
.week-agenda-weekday { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; max-width: 3rem; overflow: hidden; text-overflow: ellipsis; }
.week-agenda-events { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); justify-content: center; }
.week-agenda-none { font-size: var(--text-sm); }
.week-agenda-event {
    display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); border-radius: var(--radius);
    border-left: 4px solid var(--ev); background: color-mix(in srgb, var(--ev) 9%, var(--surface)); color: var(--text); text-decoration: none; line-height: 1.35;
}
.week-agenda-event.is-allday { background: color-mix(in srgb, var(--ev) 20%, var(--surface)); }
.week-agenda-event:hover { color: var(--text); filter: brightness(0.98); }
.week-agenda-time { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.week-agenda-event .muted { font-size: var(--text-sm); }

/* View toolbar (calendar, room bookings): prev / today / next, heading, view switch */
.view-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.view-nav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.view-nav-btn { border: 1px solid var(--border-strong); background: var(--surface); }
.view-heading { font-size: var(--text-xl); font-weight: 700; line-height: 1.2; margin: 0 0 0 var(--space-2); }
.view-heading::first-letter { text-transform: uppercase; } /* "ottobre 2026" -> "Ottobre 2026" */
.view-toolbar-right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 3px; }
.segmented a { padding: 0.35rem 0.8rem; border-radius: calc(var(--radius) - 3px); color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: var(--text-sm); }
.segmented a:hover { color: var(--text); }
.segmented a[aria-current="page"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.empty-note { margin-top: var(--space-3); }
@media (max-width: 640px) {
    .view-heading { font-size: var(--text-lg); margin-left: 0; width: 100%; order: 5; }
    .view-toolbar-right { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
    .segmented a { padding-inline: 0.65rem; }
}
@media (max-width: 420px) {
    /* Only the + icon for "New …" buttons next to the view switch (the text stays for screen readers). */
    .view-toolbar-right .btn-primary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .view-toolbar-right .btn-primary { padding-inline: 0.6rem; }
}

/* Detail page (event, booking) */
.detail-page { max-width: 760px; }
.detail-back { margin-bottom: var(--space-3); }
.detail-head { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.detail-swatch { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 0.4em; border-radius: 5px; background: var(--ev); }
.detail-title { margin: 0; font-size: var(--text-2xl); }
.detail-head .muted { margin: 0; font-size: var(--text-sm); }
.detail-list { margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.detail-list > div { display: flex; gap: var(--space-3); }
.detail-list dt { color: var(--text-muted); flex: 0 0 auto; }
.detail-list dd { margin: 0; }
.detail-text { padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius); margin-bottom: var(--space-4); overflow-wrap: anywhere; }
.detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.detail-manage { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
.detail-manage > form { margin: 0; }
.manage-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.manage-row .label { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 7rem; }
.manage-row form { margin: 0; }

/* Small helpers */
.inline-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.inline-row input[type="date"], .inline-row input[type="number"] { width: auto; max-width: 11rem; }
.conflict-list { margin: var(--space-2) 0; padding-left: 1.2rem; }

/* File type label (archive list, widgets): PDF, DOCX... */
.file-type { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; padding: 0.2rem 0.35rem; border-radius: 6px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; color: #fff; background: #57534e; flex: 0 0 auto; }
.file-type-pdf { background: #b3261e; }
.file-type-doc { background: #2f6fa3; }
.file-type-sheet { background: #2f7d4f; }
.file-type-slides { background: #c2410c; }
.file-type-image { background: #6d4aa8; }

/* Formatting toolbar above textareas (data-format) and formatted text (core/text.php) */
.format-toolbar { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border-strong); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.format-toolbar + textarea { border-top-left-radius: 0; border-top-right-radius: 0; }
.format-btn { min-width: 2.25rem; height: 2rem; border: 0; border-radius: 4px; background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: 0.9rem; }
.format-btn:hover { background: var(--surface); }
.prose { overflow-wrap: anywhere; }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-3); }
.prose > :last-child { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: var(--space-1); }

/* News list in the home page widget */
.news-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.news-mini-list a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius); color: var(--text); text-decoration: none; border-left: 3px solid transparent; }
.news-mini-list a:hover { background: var(--surface-2); color: var(--text); }
.news-mini-list .is-pinned a { border-left-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.news-mini-excerpt { font-size: var(--text-sm); color: var(--text-muted); }
/* Picture placeholder for posts without an image (#50, #51), in the site colours. */
span.news-placeholder { /* "span." so it wins over the image rules (display: block) */
    display: flex; align-items: center; justify-content: center; color: rgb(255 255 255 / 0.85);
    background: radial-gradient(circle at 80% 15%, rgb(169 205 236 / 0.25), transparent 45%), linear-gradient(135deg, var(--brand-wine) 0%, var(--brand-burgundy) 100%);
}
.news-placeholder .icon { width: 2rem; height: 2rem; opacity: 0.8; }
/* Home page news (#50): first post large with its picture, the next ones with thumbnails. */
.news-feature { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); color: var(--text); text-decoration: none; transition: box-shadow var(--transition), transform var(--transition); }
.news-feature:hover { color: var(--text); box-shadow: var(--shadow); transform: translateY(-2px); }
.news-feature-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.news-feature-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-4); }
.news-feature-title { font-size: var(--text-lg); line-height: 1.3; }
/* News widget at full width on the home page (#78): picture and text side by side instead of a huge picture. */
@media (min-width: 720px) {
    .home-widget.is-full .news-feature { flex-direction: row; }
    .home-widget.is-full .news-feature-image { flex: 0 0 50%; width: 50%; aspect-ratio: auto; min-height: 240px; max-height: 340px; }
    .home-widget.is-full .news-feature-body { justify-content: center; padding: var(--space-5); }
}
.news-thumbs { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.news-thumbs a { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.news-thumbs a:hover { background: var(--surface-2); color: var(--text); }
.news-thumb { flex: 0 0 76px; width: 76px; height: 56px; border-radius: var(--radius); object-fit: cover; }
.news-thumb .icon { width: 1.25rem; height: 1.25rem; }
.news-thumb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.news-mini-meta { font-size: 0.78rem; }

/* Show / hide password button (assets/js/app.js) */
.password-wrap { position: relative; display: block; }
.password-wrap input { padding-right: 3rem; }
.password-toggle {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer;
}
.password-toggle:hover { color: var(--text); background: var(--surface-2); }
.password-toggle[aria-pressed="true"] { color: var(--primary); }

/* Admin area (GitHub issue #33): sidebar on the left, content on the right; on phones the sidebar is a menu. */
.admin-page { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--space-6); align-items: start; }
.admin-page > * { grid-column: 2; min-width: 0; }
.admin-page > .admin-nav { grid-column: 1; grid-row: 1 / span 60; position: sticky; top: calc(var(--header-height) + var(--space-4)); }
/* A long sidebar on a short screen scrolls by itself, so its last entries (e.g. Activity log) stay reachable (#91). */
@media (min-width: 901px) {
    .admin-page > .admin-nav { max-height: calc(100vh - var(--header-height) - var(--space-6)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.admin-nav > summary { display: none; }
.admin-nav nav { display: flex; flex-direction: column; gap: var(--space-4); }
.admin-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-nav-label { margin: 0 0 var(--space-1) var(--space-3); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.admin-nav a {
    display: flex; align-items: center; gap: var(--space-2); padding: 0.45rem var(--space-3); border-radius: var(--radius);
    color: var(--text); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: background var(--transition), color var(--transition);
}
.admin-nav a .icon { color: var(--text-muted); width: 1.1em; height: 1.1em; }
.admin-nav a:hover { background: var(--surface-2); color: var(--text); }
.admin-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 650; }
.admin-nav a[aria-current="page"] .icon { color: var(--primary); }
.admin-page > .page-head { margin-bottom: var(--space-3); }
.admin-intro { margin: 0 0 var(--space-5); max-width: 75ch; }
.admin-form { max-width: 820px; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.input-short { max-width: 14rem; }
.admin-link-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.module-group + .module-group { margin-top: var(--space-6); }
.module-group .section-title { display: flex; align-items: center; gap: var(--space-2); }
.language-grid { display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
@media (max-width: 900px) {
    .admin-page { display: block; }
    /* Phones: the menu is part of the page and scrolls with it (it was "sticky" and taller than the screen, #91). */
    .admin-page > .admin-nav { position: static; }
    .admin-nav { margin-bottom: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
    .admin-nav > summary {
        display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; font-weight: 600;
    }
    .admin-nav > summary::-webkit-details-marker { display: none; }
    .admin-nav > summary > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .admin-nav[open] > summary .icon-sm { transform: rotate(180deg); }
    .admin-nav nav { padding: 0 var(--space-3) var(--space-3); }
}

/* Filter bar (search & filters behind a button, e.g. Admin › Modules) */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
.filter-bar .field { flex: 0 1 auto; }
.filter-bar input, .filter-bar select { min-height: 38px; padding: 0.35rem 0.6rem; font-size: var(--text-sm); }
.filter-bar-search { flex: 1 1 220px !important; }
.filter-bar-actions { display: flex; gap: var(--space-2); }

/* Texts in several languages (core/templates/partials/multilang.php) */
.multilang { display: flex; flex-direction: column; gap: var(--space-2); }
.multilang-item { position: relative; }
.js .multilang-item:not(.is-shown) { display: none; }
.multilang-item.is-shown { animation: pop-in 180ms var(--ease-out); }
.multilang-lang { font-weight: 500 !important; font-size: var(--text-sm) !important; color: var(--text-muted); }
.multilang-item:has(.multilang-remove) input, .multilang-item:has(.multilang-remove) textarea { padding-right: 2.75rem; }
.multilang-remove { position: absolute; right: 4px; bottom: 4px; width: 36px; height: 36px; color: var(--text-muted); }
.multilang-add select { width: auto; min-height: 36px; padding: 0.3rem 0.6rem; font-size: var(--text-sm); color: var(--primary); border-style: dashed; cursor: pointer; }

/* Drag-and-drop ordering (sort_controls() in core/template.php) */
.sort-form { display: none; }
.sort-controls { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; }
.sort-controls .icon-btn { width: 30px; height: 30px; color: var(--text-muted); }
.sort-controls .icon-btn:disabled { opacity: 0.3; cursor: default; }
.sort-handle { cursor: grab; touch-action: none; }
.sort-handle:active { cursor: grabbing; }
.sort-cell { width: 1%; white-space: nowrap; }
[data-sort-id].is-dragging { opacity: 0.45; background: var(--primary-soft); }
[data-sort-id].is-moved { animation: sort-flash 400ms var(--ease-out); }
[data-sortable].is-saving { cursor: progress; }
@keyframes sort-flash { from { background: var(--primary-soft); } to { background: transparent; } }

/* Appearance settings (colours, editable texts) */
.theme-colors { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.theme-color input[type="color"] { width: 100%; height: 44px; padding: 4px; cursor: pointer; }
fieldset.text-override { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4) var(--space-4); }
fieldset.text-override + fieldset.text-override { margin-top: var(--space-3); }
.text-override legend { padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2)); }
.text-override-lang { font-weight: 500; font-size: var(--text-sm); color: var(--text-muted); }
.text-override-langs > summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; margin: var(--space-2) 0; }
.text-override-langs .field + .field { margin-top: var(--space-2); }

/* Privacy notice */
.settings-subtitle { font-size: var(--text-base); margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.privacy-page .privacy-text { max-width: 860px; }
.privacy-text h2 { font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-2); }
.privacy-missing { color: var(--danger); }
.privacy-checklist { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-2); }
.privacy-hint { display: flex; gap: var(--space-1); align-items: flex-start; color: var(--accent); }
.privacy-hint .icon { margin-top: 0.2em; }

/* Installer checklist */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.checklist li { display: flex; align-items: center; gap: var(--space-2); }
.checklist .ok .icon { color: var(--success); }
.checklist .warn .icon { color: var(--warning); }
.checklist .fail { color: var(--danger); font-weight: 600; }
textarea.code { font-family: var(--font-mono); font-size: var(--text-sm); }


/* ---------- Motion ---------- */
/* Smooth cross-fade between pages (browsers that support view transitions); the header stays still. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: 140ms ease-in both fade-out; }
::view-transition-new(root) { animation: 260ms var(--ease-out) both rise-in; }

/* Content glides in when a page opens. */
.site-main > * { animation: rise-in 420ms var(--ease-out) both; }
.site-main > * > .card, .dashboard-grid > *, .grid > .card { animation: rise-in 460ms var(--ease-out) both; }
.dashboard-grid > :nth-child(2), .grid > .card:nth-child(2) { animation-delay: 40ms; }
.dashboard-grid > :nth-child(3), .grid > .card:nth-child(3) { animation-delay: 80ms; }
.dashboard-grid > :nth-child(n+4), .grid > .card:nth-child(n+4) { animation-delay: 120ms; }

.card { transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); }
a.card:hover, .card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.segmented a { transition: background var(--transition), color var(--transition), box-shadow var(--transition); }
.tg-event, .month-event, .chip { transition: transform var(--transition), box-shadow var(--transition), filter var(--transition); }
.tg-event:hover { transform: translateY(-1px); }

@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes dialog-in { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 6. Utilities ---------- */
.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--text-muted); }
.no-js .js-only { display: none !important; }
.js .no-js-only { display: none !important; }

/* ---------- Mobile and polish (GitHub issues #53, #54) ---------- */

/* Header gets a soft shadow once the page is scrolled (app.js sets .is-scrolled). */
.site-header { transition: box-shadow 200ms var(--ease-out); }
.site-header.is-scrolled { box-shadow: 0 1px 0 rgb(0 0 0 / 0.15), 0 8px 24px rgb(0 0 0 / 0.18); }

/* Badges never break inside ("Display screen" on two lines). */
.badge { white-space: nowrap; }

/* Bigger tap targets on touch screens (about 44 px, as Apple and Google recommend). */
@media (pointer: coarse) {
    .widget-link { min-height: 44px; }
    .checkbox { min-height: 40px; }
    .checkbox input { width: 1.3rem; height: 1.3rem; }
    .btn-sm { min-height: 40px; }
    .toast-close { min-width: 40px; min-height: 40px; }
}

/* Tables on phones: every row becomes a small card with the column names as labels (app.js adds .table-stack
   and data-label). Without JavaScript the table scrolls sideways as before. */
@media (max-width: 640px) {
    .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
    .table-stack tr:last-child { border-bottom: 0; }
    .table-stack td { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; border: 0; text-align: right; min-height: 0; }
    .table-stack td::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); text-align: left; }
    .table-stack td[data-label=""]::before { content: none; }
    .table-stack td[data-label=""] { justify-content: flex-start; text-align: left; }
    .table-stack td.actions { justify-content: flex-end; padding-top: var(--space-2); }
    .table-stack td.cell-title { display: block; text-align: left; padding-bottom: var(--space-2); }
    .table-stack td.is-empty { display: none; }
    .table-stack .cell-value { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-1) var(--space-2); min-width: 0; }
    .table-stack td.actions .cell-value { justify-content: flex-end; }
    .table-stack td.sort-cell { position: absolute; top: var(--space-2); right: var(--space-2); width: auto; padding: 0; }
    .table-stack tr:has(.sort-cell) td.cell-title { padding-right: 52px; }
    .table-stack tr { position: relative; }
    .table-wrap:has(.table-stack) { overflow-x: visible; }
}

/* "Back to top" button on long pages (created by app.js). */
.back-to-top {
    position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 40;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text);
    display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); cursor: pointer;
    opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.back-to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { background: var(--surface-2); }

/* Cards further down the page fade in when they scroll into view (app.js adds .reveal / .is-visible). */
.reveal { animation: none; opacity: 0; transform: translateY(18px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Lazy-loaded pictures fade in instead of popping up (app.js adds .is-loaded). */
.js img[loading="lazy"]:not(.is-loaded) { opacity: 0; }
.js img[loading="lazy"] { transition: opacity 400ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
    @view-transition { navigation: none; }
}

/* Print: no navigation, black on white. */
@media print {
    :root { --bg: #fff; --surface: #fff; --text: #000; --text-muted: #444; --border: #bbb; }
    .site-header, .site-footer, .toasts, .page-actions, .skip-link, .btn, dialog { display: none !important; }
    .card, .empty-state { box-shadow: none; border-color: #bbb; }
    a { color: #000; }
    .section { padding-block: 0; }
    .view-toolbar-right, .view-nav-btn, .view-nav .btn, .detail-actions, .detail-manage, .detail-back { display: none !important; }
    .timegrid-wrap { overflow: visible; }
    .timegrid { min-width: 0; }
    .tg-event { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* Admin pages (e.g. the new passwords of a new school year, #74): only the content. */
    .admin-page { display: block; }
    .admin-nav, .admin-intro { display: none !important; }
}

/* Forced password change after the first login (core/templates/account_forced.php): a dialog that cannot be closed. */
.is-focus .site-footer { display: none; }
.is-focus .site-main { display: flex; }
.forced-backdrop {
    flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4);
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 60%);
}
.forced-card { width: 100%; max-width: 440px; padding: var(--space-6); box-shadow: var(--shadow-lg); animation: dialog-in 320ms var(--ease-out); }
.forced-card h1 { font-size: var(--text-xl); margin-top: var(--space-3); }
.forced-icon { display: inline-flex; padding: var(--space-3); border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.forced-icon .icon { width: 1.6rem; height: 1.6rem; }
.header-tools .header-logout { color: var(--header-text); }
.header-tools .header-logout:hover { background: rgb(var(--header-overlay) / 0.12); color: var(--header-strong); }
.filters .multiselect, .filters .multiselect-button { width: 100%; max-width: none; }
.filters .multiselect-button { min-height: 44px; font-size: 0.95rem; }

/* Cancelled events (GitHub issue #34): crossed out, faded, with a "Cancelled" label.
   The label is inline-block, so the line-through of its parent does not run through it. */
.cal-cancelled-badge {
    display: inline-block; vertical-align: 0.1em; margin-inline-start: 0.25em;
    padding: 0.1em 0.45em; border-radius: var(--radius-sm, 4px);
    background: var(--danger); color: var(--surface, #fff);   /* dark text on the light red of dark mode */
    font-size: 0.68rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase;
}
.is-cancelled-text,
li.is-cancelled strong,
li.is-cancelled .activity-who { text-decoration: line-through; text-decoration-thickness: 2px; }
li.is-cancelled { opacity: 0.75; }

/* ---------- Links menu in the navigation bar (modules/links, GitHub issue #55) ---------- */
.nav-dropdown { display: block; }
.nav-list .nav-link {
    display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-full);
    color: var(--header-text); font-weight: 500; font-size: 0.95rem; white-space: nowrap; cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.nav-list .nav-link:hover, .nav-dropdown[open] > .nav-link { background: rgb(var(--header-overlay) / 0.1); color: var(--header-strong); }
.nav-list .nav-link.is-active { background: rgb(var(--header-overlay) / 0.16); color: var(--header-strong); }
.nav-dropdown-menu a.nav-dropdown-item[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav-list .nav-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.nav-dropdown-chevron { opacity: 0.75; transition: transform var(--transition); }
.nav-dropdown[open] .nav-dropdown-chevron { transform: rotate(180deg); }
.nav-dropdown-menu { min-width: 17rem; max-width: min(24rem, calc(100vw - 2rem)); }
/* The entries are links inside .nav-list (or, while open in the phone menu or in "More", moved to the end of the
   page by app.js, #79): undo the look of the navigation links. */
.nav-dropdown-menu a.nav-dropdown-item {
    display: flex; align-items: flex-start; gap: var(--space-3); padding: 0.6rem 0.7rem; border-radius: var(--radius);
    color: var(--text); background: transparent; font-weight: 400; white-space: normal;
}
.nav-dropdown-menu a.nav-dropdown-item:hover { background: var(--surface-2); color: var(--text); }
.nav-dropdown-menu .icon { opacity: 1; color: var(--primary); flex: 0 0 auto; margin-top: 1px; display: inline-block; }
.nav-dropdown-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.nav-dropdown-label { font-weight: 600; }
.nav-dropdown-desc { font-size: var(--text-sm); color: var(--text-muted); }
.nav-dropdown-menu .nav-dropdown-ext { color: var(--text-muted); margin-top: 3px; }
@media (max-width: 1080px) {
    /* Phone menu: the dropdown menus float above everything, so nothing in the menu moves (#79, app.js). */
    .nav-list .nav-link { padding: var(--space-3); border-radius: var(--radius); }
    .nav-dropdown-chevron { margin-left: auto; }
}

/* Icon choice (core/templates/partials/icon_picker.php) and platform choice of the social media profiles */
.icon-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.icon-choice { position: relative; }
.icon-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.icon-choice > span {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 2.75rem; height: 2.75rem; padding: 0 0.6rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.icon-choice:hover > span { border-color: var(--primary); }
.icon-choice input:checked + span { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.icon-choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.platform-name { font-size: var(--text-sm); font-weight: 600; }
.link-name { display: inline-flex; align-items: center; gap: var(--space-2); }
.link-name .icon { color: var(--primary); flex: 0 0 auto; }
.link-url { max-width: 22rem; overflow-wrap: anywhere; }

/* Social media icons in the footer (modules/social, GitHub issue #56) */
.footer-social { margin-left: auto; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-social-title { margin: 0; font-weight: 600; color: var(--text); }
.social-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.social-link {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.social-link:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); transform: translateY(-2px); }
@media (max-width: 700px) { .footer-social { margin-left: 0; } }

/* Admin › Navigation (GitHub issue #64) */
.nav-entry { display: inline-flex; align-items: center; gap: var(--space-3); }
.nav-entry-text { display: flex; flex-direction: column; line-height: 1.3; }
.nav-entry-indent { color: var(--text-muted); margin-left: var(--space-2); }
.nav-row.is-child > td:nth-child(2) { padding-left: var(--space-6); }
.nav-row.is-hidden .nav-entry { opacity: 0.55; }
.nav-inline { margin: 0; }
.nav-inline select { min-height: 38px; padding-block: 0.3rem; font-size: var(--text-sm); width: auto; max-width: 14rem; }

/* Status and on/off button on a module's admin page (GitHub issue #66) */
.module-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.module-status > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.module-status .card-title { margin: 0 var(--space-2) 0 0; }

/* "More" menu for navigation entries that do not fit into the bar (app.js, GitHub issue #70) */
.nav-more-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-list .nav-more-list a {
    display: flex; align-items: center; gap: var(--space-2); padding: 0.55rem 0.7rem; border-radius: var(--radius);
    color: var(--text); background: transparent; white-space: normal;
}
.nav-list .nav-more-list a:hover { background: var(--surface-2); color: var(--text); }
.nav-list .nav-more-list a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); }
.nav-list .nav-more-list .icon { display: inline-block; color: var(--primary); }
.nav-list .nav-more-list .nav-link { color: var(--text); border-radius: var(--radius); padding: 0.55rem 0.7rem; }
.nav-list .nav-more-list .nav-link:hover, .nav-more-list .nav-dropdown[open] > .nav-link { background: var(--surface-2); color: var(--text); }
/* A dropdown menu that moved into "More" opens as its own floating box next to it (#79, app.js). */
.nav-more-list .nav-dropdown-chevron { transform: rotate(-90deg); }
.nav-more-list .nav-dropdown[open] .nav-dropdown-chevron { transform: rotate(-90deg); }
.nav-more-list .nav-dropdown-chevron { margin-left: auto; }

/* On/off switch (checkbox with class "switch") */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch-track {
    width: 42px; height: 24px; border-radius: 999px; background: var(--border-strong); position: relative;
    transition: background var(--transition);
}
.switch-track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); transition: transform var(--transition);
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--focus); outline-offset: 2px; }
.nav-list .nav-link .nav-dropdown-chevron { display: inline-block; }   /* also when the other nav icons are hidden */
/* Admin › Navigation: keep all columns (incl. on/off and Edit) on screen (#70) */
.nav-table th, .nav-table td { padding-inline: var(--space-2); }
.nav-table .nav-inline select { max-width: 10rem; text-overflow: ellipsis; }
.nav-table .nav-entry { gap: var(--space-2); }
.nav-table .nav-entry-text .hint { overflow-wrap: anywhere; }

/* Admin › Navigation: a dropdown menu and its entries form one block that moves together and can be folded (#71) */
.nav-table tbody.nav-block > tr > td { border-bottom: 1px solid var(--border); }
.nav-table tbody.nav-block:last-child > tr:last-child > td { border-bottom: 0; }
.nav-table tbody.nav-block.is-collapsed > tr.is-child { display: none; }
.nav-table tbody.nav-block.is-dragging { opacity: 0.5; }
.nav-collapse { width: 28px; height: 28px; min-height: 0; flex: 0 0 auto; color: var(--text-muted); }
.nav-collapse .icon { transition: transform var(--transition); }
.nav-block.is-collapsed .nav-collapse .icon { transform: rotate(-90deg); }

/* Header menu (#72): on wide screens a dropdown at the top right (for visitors "Options", with "Log in" inside it);
   on phones its contents are part of the folded navigation instead of extra buttons in the bar. */
.nav-inner { display: contents; }
.nav-extra { display: none; }
@media (max-width: 1080px) {
    .nav-inner { display: block; }
    .header-tools .header-menu { display: none; }
    .nav-extra {
        display: block; margin-top: var(--space-2); padding-top: var(--space-3);
        border-top: 1px solid rgb(var(--header-overlay) / 0.18); color: var(--header-text);
    }
    .nav-extra .dropdown-item { color: var(--header-text); padding: var(--space-3); }
    .nav-extra .dropdown-item:hover, .nav-extra .dropdown-item[aria-current="page"] { background: rgb(var(--header-overlay) / 0.1); color: var(--header-strong); }
    .nav-extra .dropdown-item .icon { color: currentColor; opacity: 0.85; }
    .nav-extra .dropdown-header, .nav-extra .dropdown-header .muted, .nav-extra .dropdown-label { color: var(--header-text); }
    .nav-extra .dropdown-label { opacity: 0.75; margin-inline: var(--space-3); }
    .nav-extra .dropdown-choices { padding-inline: var(--space-2); }
    .nav-extra .dropdown-divider { background: rgb(var(--header-overlay) / 0.18); }
    .nav-extra .choice { background: rgb(var(--header-overlay) / 0.08); border-color: rgb(var(--header-overlay) / 0.2); color: var(--header-text); }
    .nav-extra .choice:hover { background: rgb(var(--header-overlay) / 0.16); color: var(--header-strong); }
    .nav-extra .choice[aria-current="true"], .nav-extra .choice[aria-pressed="true"] { background: var(--brand-cream); border-color: var(--brand-cream); color: var(--brand-wine); }
}