/*
  Admin app styles, design "Varm og venlig" (Phase 33). No CSS framework.

  Every colour, radius, shadow, space and text size is a design token: a CSS variable in :root below (≈ one theme
  file). The rest of this file uses only the tokens, so the look is changed in one place. Text colours are checked
  against WCAG AA on the backgrounds they are used on.
*/

/* ---------- Design tokens ---------- */

:root {
    /* Surfaces: a warm, light page with white cards on it. */
    --color-page: #f7f5ef;
    --color-surface: #ffffff;
    --color-surface-muted: #f1efe8;
    --color-border: #e4e0d5;
    --color-border-strong: #cfcabd;

    /* Text */
    --color-text: #2c2c2a;
    --color-text-muted: #5f5e5a;
    --color-on-primary: #ffffff; /* text on the green and red buttons */
    --color-row-hover: #fbfaf6;
    --color-backdrop: rgba(44, 44, 42, 0.45); /* behind a popup */

    /* Main colour (green): buttons, links, the current menu item. White text on it is 6:1. */
    --color-primary: #3b6d11;
    --color-primary-hover: #27500a;
    --color-primary-soft: #eaf3de;
    --color-primary-border: #c0dd97;
    --color-primary-text: #27500a;

    /* Second and third colour for the shortcut cards. */
    --color-amber-soft: #faeeda;
    --color-amber-border: #fac775;
    --color-amber-text: #633806;
    --color-teal-soft: #e1f5ee;
    --color-teal-border: #9fe1cb;
    --color-teal-text: #085041;
    --color-violet-soft: #eeedfe;
    --color-violet-border: #cecbf6;
    --color-violet-text: #3c3489;

    /* Status: success = main colour; warning = amber; danger = red. */
    --color-danger: #a32d2d;
    --color-danger-hover: #791f1f;
    --color-danger-soft: #fcebeb;
    --color-danger-border: #f7c1c1;
    --color-danger-text: #791f1f;
    --color-warning-text: #854f0b;

    /* The AI assistant's own colour (violet), so AI text is never mistaken for the board's own. */
    --color-ai-soft: #f4f2fd;
    --color-ai-border: #cecbf6;
    --color-ai-text: #3c3489;

    /* Keyboard focus: a clear ring in every part of the app. */
    --focus-ring: 0 0 0 3px #9fe1cb;

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

    --shadow-sm: 0 1px 2px rgba(44, 44, 42, 0.06), 0 1px 3px rgba(44, 44, 42, 0.05);
    --shadow-md: 0 4px 16px rgba(44, 44, 42, 0.08);
    --shadow-lg: 0 12px 36px rgba(44, 44, 42, 0.2);

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* The computer's own font (Segoe UI on Windows, San Francisco on Mac): free, fast and familiar. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: Consolas, "Courier New", monospace;
    --font-size-base: 1.0625rem; /* 17 px: slightly larger, easier for board members who are rarely here */
    --font-size-small: 0.9rem;
    --font-size-tiny: 0.8rem;
    --font-size-h1: 1.85rem;
    --font-size-h2: 1.3rem;
    --font-size-h3: 1.1rem;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: 1.55;
    /* A very long word (an association name, a web address) breaks instead of making the page wider than a phone.
       break-word, not anywhere: table columns keep their width (tables scroll inside .table-wrapper instead). */
    overflow-wrap: break-word;
    color: var(--color-text);
    background: var(--color-page);
}

h1,
h2,
h3 {
    line-height: 1.25;
    color: var(--color-text);
}

h1 {
    margin: var(--space-sm) 0 var(--space-md);
    font-size: var(--font-size-h1);
    font-weight: 650;
    letter-spacing: -0.01em;
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: 600;
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: 600;
}

h1:focus {
    outline: none;
}

a {
    color: var(--color-primary);
    text-underline-offset: 2px;
}

a:hover {
    color: var(--color-primary-hover);
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

.muted {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

code,
kbd {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* An icon from the local Tabler file (Icon.razor). Size follows the text; the colour too. */
.icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-lg {
    width: 1.6rem;
    height: 1.6rem;
}

/* For screen readers only (a label that sighted users get from the layout). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Header ---------- */

.app-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    padding: 0.65rem var(--space-lg);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.app-name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-right: auto;
    font-weight: 650;
    color: var(--color-primary-text);
    text-decoration: none;
}

.app-header a:not(.app-name),
.app-header .link-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text-muted);
    text-decoration: none;
}

.app-header a:not(.app-name):hover,
.app-header .link-button:hover {
    color: var(--color-primary);
}

.app-header form {
    margin: 0;
}

.link-button {
    padding: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    background: none;
    border: none;
    box-shadow: none;
    cursor: pointer;
}

.link-button:hover {
    background: none;
}

/* ---------- Frame: side menu + page (MainLayout.razor) ---------- */

.app-shell {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 3.2rem);
}

.app-main {
    flex: 1 1 auto;
    min-width: 0; /* lets wide tables scroll inside the page instead of widening it */
    max-width: 1080px;
    padding: var(--space-lg) var(--space-xl);
}

.app-sidebar {
    flex: 0 0 16rem;
    align-self: stretch;
    padding: var(--space-md) 0.75rem;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
}

/* Nothing in it (e.g. a board member's start page): no empty column. */
.app-sidebar:not(:has(a)) {
    display: none;
}

.side-association {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0 0.6rem 0.85rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border);
}

.side-association strong {
    font-size: 1.1rem;
}

.side-association a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--font-size-small);
    text-decoration: none;
}

.side-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0.9rem;
}

.side-group-title {
    padding: 0 0.6rem;
    margin-bottom: 0.15rem;
    font-size: var(--font-size-tiny);
    font-weight: 600;
    color: var(--color-text-muted);
}

.side-group a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.42rem 0.6rem;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.side-group a .icon {
    color: var(--color-text-muted);
}

.side-group a:hover {
    background: var(--color-surface-muted);
}

/* NavLink marks the current page with class="active": a green pill. */
.side-group a.active {
    font-weight: 600;
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
}

.side-group a.active .icon {
    color: var(--color-primary);
}

/* The "Menu" button and its checkbox: only on phones (below). */
.side-menu-toggle,
.side-menu-button {
    display: none;
}

/* Keyboard users see where they are on the "Menu" button (the checkbox itself is invisible). */
.side-menu-toggle:focus-visible + .side-menu-button {
    box-shadow: var(--focus-ring);
}

@media (max-width: 48rem) {
    .app-header {
        padding: 0.6rem var(--space-md);
    }

    /* The e-mail address of the logged-in user: "Min konto" leads to it; on a phone the header stays one line. */
    .app-header > .muted {
        display: none;
    }

    /* "Min konto" and "Log ud" as icons only; the words stay for screen readers (like .visually-hidden). */
    .app-header .header-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .app-header .icon {
        width: 1.4rem;
        height: 1.4rem;
    }

    .app-shell {
        display: block;
    }

    .side-menu-button {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        width: fit-content;
        margin: 0.75rem var(--space-md) 0;
        padding: 0.45rem 1rem;
        font-weight: 600;
        color: var(--color-primary-text);
        background: var(--color-primary-soft);
        border: 1px solid var(--color-primary-border);
        border-radius: var(--radius-pill);
        cursor: pointer;
    }

    /* No menu to open (a page without an association, for a board member): no button either. */
    .app-shell:not(:has(.app-sidebar a)) .side-menu-button {
        display: none;
    }

    .side-menu-button::after {
        content: "▾";
    }

    .side-menu-toggle:checked + .side-menu-button::after {
        content: "▴";
    }

    /* The checkbox can still get keyboard focus, but isn't seen. */
    .side-menu-toggle {
        display: block;
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
    }

    /* Hidden until the button is pressed (the checkbox is ticked). */
    .app-sidebar,
    .app-sidebar:not(:has(a)) {
        display: none;
        margin: var(--space-sm) var(--space-md) 0;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-md);
    }

    .side-menu-toggle:checked ~ .app-sidebar:has(a) {
        display: block;
    }

    .app-main {
        padding: var(--space-md);
    }

    h1 {
        font-size: 1.55rem;
    }
}

/* The start page's list of associations. */
.association-list {
    display: grid;
    gap: var(--space-sm);
    padding: 0;
    list-style: none;
}

.association-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-sm);
    padding: 0.85rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.association-list a,
.dashboard-list a,
.dashboard-list li,
.dashboard-greeting p {
    overflow-wrap: anywhere; /* a very long name breaks, also inside these flex rows */
}

.association-list a {
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
}

/* ---------- Page top and tables ---------- */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-md);
}

.toolbar h1 {
    min-width: 0; /* lets a long name wrap inside the flex row instead of widening the page */
    margin-bottom: var(--space-sm);
}

/* Several links/buttons together on the right side of a toolbar. */
.toolbar > span {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

/* On narrow screens the table scrolls sideways inside its card instead of breaking the page. */
.table-wrapper {
    overflow-x: auto;
    margin: var(--space-md) 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
}

.admin-table th,
.admin-table td {
    padding: 0.7rem 0.85rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}

.admin-table th {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: var(--color-row-hover);
}

.admin-table td a {
    font-weight: 500;
    text-decoration: none;
}

.admin-table td a:hover {
    text-decoration: underline;
}

.admin-table form {
    display: inline;
    margin: 0;
}

.admin-table tfoot th {
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
    border-bottom: none;
}

/* Status pills: "Offentlig" green, "Kladde" amber (PublicToggle.razor); "Vises i menuen"/"Vises ikke" the same. */
.status-public,
.status-hidden {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    margin-right: 0.35rem;
    font-size: var(--font-size-tiny);
    font-weight: 600;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.status-public {
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
}

.status-hidden {
    color: var(--color-amber-text);
    background: var(--color-amber-soft);
}

/* "← Nyere  Side 2  Ældre →" under paged lists. */
.pager {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

/* "← Tilbage til …" at the top of edit pages (BackLink.razor). */
.back-link {
    margin: 0 0 var(--space-xs);
    font-size: var(--font-size-small);
}

.back-link a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.back-link a:hover {
    color: var(--color-primary);
}

/* An empty list: a friendly box with an icon and what to do (EmptyState.razor). */
.empty-state {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-md) 0;
    padding: var(--space-lg);
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius);
}

.empty-state p {
    margin: 0;
}

.empty-state .icon {
    width: 2rem;
    height: 2rem;
    color: var(--color-primary);
}

/* ---------- Forms ---------- */

.admin-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-width: 42rem;
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.admin-form label {
    margin-top: 0.75rem;
    font-weight: 600;
}

.admin-form label.checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: normal;
}

.admin-form > .muted,
.admin-form span.muted {
    margin-top: -0.1rem;
}

input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=hidden]),
select,
textarea,
.email-list {
    width: 100%;
    font: inherit;
    padding: 0.55rem 0.75rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}

input[type=number] {
    max-width: 10rem;
}

input:not([type=checkbox]):not([type=radio]):focus,
select:focus,
textarea:focus,
.email-list:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

input[type=checkbox],
input[type=radio] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-primary);
}

input[type=color] {
    width: 4rem;
    height: 2.4rem;
    padding: 0.15rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
}

input[type=file] {
    font: inherit;
    font-size: var(--font-size-small);
}

input[type=file]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.45rem 0.9rem;
    font: inherit;
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.admin-form textarea {
    min-height: 10rem;
}

/* The "Om foreningen" text is longer than the other fields. */
.admin-form textarea.about-text {
    min-height: 16rem;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    margin-top: var(--space-md);
}

/* Fields side by side (e.g. "Ny side": title + button). */
.inline-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.inline-fields input {
    flex: 1 1 16rem;
    width: auto;
}

/* ---------- Buttons ---------- */

/* The main button: green, one per area. Secondary: white with a border. Danger: red. Icons sit inside. */
button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 1.1rem;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

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

button.secondary,
.button.secondary {
    color: var(--color-primary-text);
    background: var(--color-surface);
    border-color: var(--color-border-strong);
}

button.secondary:hover,
.button.secondary:hover {
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border);
}

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

button.danger:hover {
    background: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
}

button[disabled],
button[disabled]:hover {
    opacity: 0.4;
    cursor: default;
}

/* Small buttons in table rows and the menu and block lists (↑ ↓ Vis Slet …). */
.admin-table button,
.menu-buttons button,
.menu-buttons .button {
    padding: 0.35rem 0.75rem;
    font-size: var(--font-size-small);
}

/* ---------- Messages ---------- */

/* "Gemt." and errors: a soft box with an icon (a small picture drawn by CSS, so every page gets it). */
.notice,
.error-summary,
.consent-note {
    position: relative;
    margin: var(--space-md) 0;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1px solid;
    border-radius: var(--radius);
}

.notice::before,
.error-summary::before,
.consent-note::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    left: 1rem;
    width: 1.15rem;
    height: 1.15rem;
    background: currentColor;
    -webkit-mask: var(--message-icon) center / contain no-repeat;
    mask: var(--message-icon) center / contain no-repeat;
}

.notice {
    --message-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E");
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border);
}

.error-summary {
    --message-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
    color: var(--color-danger-text);
    background: var(--color-danger-soft);
    border-color: var(--color-danger-border);
}

.consent-note {
    --message-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 9h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/svg%3E");
    color: var(--color-amber-text);
    background: var(--color-amber-soft);
    border-color: var(--color-amber-border);
}

.error-summary ul {
    margin: var(--space-xs) 0 0;
    padding-left: 1.2rem;
}

.error-summary p {
    margin: 0;
}

.valid.modified:not([type=checkbox]) {
    border-color: var(--color-primary-border);
}

.invalid {
    border-color: var(--color-danger) !important;
}

.validation-message {
    font-size: var(--font-size-small);
    color: var(--color-danger-text);
}

.blazor-error-boundary {
    padding: var(--space-md);
    color: var(--color-on-primary);
    background: var(--color-danger);
    border-radius: var(--radius);
}

.blazor-error-boundary::after {
    content: "Der opstod en fejl.";
}

/* ---------- AI assistant ---------- */

/* Text from the AI assistant: line breaks kept, marked as a suggestion to read before use. */
.ai-text {
    max-width: 50rem;
    padding: 0.75rem 1rem;
    white-space: pre-wrap;
    background: var(--color-ai-soft);
    border: 1px solid var(--color-ai-border);
    border-radius: var(--radius);
}

/* "Skriv med AI" under an editor's text field (AiWritingHelp.razor). */
.ai-help {
    margin: var(--space-sm) 0;
    padding: 0.6rem 0.9rem;
    background: var(--color-ai-soft);
    border: 1px solid var(--color-ai-border);
    border-radius: var(--radius);
}

.ai-help summary {
    font-weight: 600;
    color: var(--color-ai-text);
    cursor: pointer;
}

.ai-help label,
.ai-help textarea {
    display: block;
    width: 100%;
}

.admin-form .ai-help textarea {
    min-height: 4rem;
}

.ai-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: var(--space-sm) 0;
}

/* "Spørg dokumenterne": the numbered sources under an answer. */
.ai-sources li {
    margin-bottom: 0.75rem;
}

.ai-sources blockquote,
.ai-remarks blockquote {
    margin: var(--space-xs) 0 0;
    padding-left: 0.75rem;
    color: var(--color-text-muted);
    border-left: 3px solid var(--color-ai-border);
}

.ai-sources blockquote {
    white-space: pre-wrap;
}

/* "Tjek mod reglerne": one remark per item (the sentence, the problem, the quoted rule). */
.ai-remarks {
    padding-left: 1.2rem;
}

.ai-remarks li {
    margin-bottom: 0.75rem;
}

.ai-label {
    margin-bottom: var(--space-xs);
}

/* ---------- Lists of signups, users, e-mail preview ---------- */

.email-list {
    display: block;
    max-width: 42rem;
    margin: var(--space-xs) 0 var(--space-md);
}

/* Status after a user's e-mail on the Brugere page, e.g. "Låst til kl. 14:30". */
.member-status {
    margin-left: var(--space-sm);
}

/* The news e-mail as it will be sent (plain text, line breaks kept). */
.email-preview {
    max-width: 42rem;
    padding: var(--space-md) 1.25rem;
    font: inherit;
    white-space: pre-wrap;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

/* ---------- Image previews ---------- */

/* The news image and image blocks on their edit pages (the small version). */
.news-image-preview {
    display: block;
    max-width: 16rem;
    height: auto;
    margin: var(--space-xs) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

/* The current banner on "Forsiden" (the small version). */
.banner-preview {
    display: block;
    width: 100%;
    max-width: 30rem;
    height: auto;
    margin: var(--space-xs) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

/* The logo on a light background, so a transparent white logo is visible too. */
.logo-preview {
    display: block;
    max-width: 12rem;
    max-height: 5rem;
    margin: var(--space-xs) 0;
    padding: var(--space-sm);
    background: var(--color-surface-muted);
    border-radius: var(--radius-sm);
}

/* The template pictures on "Udseende"; the current one is outlined in green. */
.template-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin: var(--space-sm) 0 var(--space-md);
}

.template-preview {
    margin: 0;
    padding: var(--space-sm);
    font-size: var(--font-size-tiny);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.template-preview.current {
    border: 2px solid var(--color-primary);
    background: var(--color-primary-soft);
}

.template-preview img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0.35rem;
    border-radius: var(--radius-sm);
}

/* ---------- Statistik (Statistics.razor) ---------- */

/* One bar per day. The bar's height is set inline; the darker inner part is entrances. */
.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 10rem;
    padding: var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.bar-day {
    display: flex;
    align-items: flex-end;
    flex: 1;
    height: 100%;
}

.bar-views {
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: 1px;
    background: var(--color-primary-border);
    border-radius: 3px 3px 0 0;
}

.bar-entrances {
    width: 100%;
    background: var(--color-primary);
    border-radius: 3px 3px 0 0;
}

.bar-chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-xs);
}

.legend {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: var(--space-sm);
    vertical-align: middle;
    border-radius: 3px;
}

.legend-views {
    background: var(--color-primary-border);
}

.legend-entrances {
    background: var(--color-primary);
}

/* ---------- Menu editor (MenuEditor.razor) ---------- */

.menu-tree {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The drop-down items, indented under their parent. Never quite empty, so items can be dragged into it. */
.menu-children {
    min-height: 0.4rem;
    margin-left: var(--space-xl);
}

.menu-row,
.block-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) 0.75rem;
    margin: 0.4rem 0;
    padding: 0.6rem 0.85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.menu-row-hidden .menu-name {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.menu-name {
    font-weight: 600;
}

.menu-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-left: auto;
}

/* Only when menu-editor.js / block-order.js run; without them, the arrow buttons do the same. */
.drag-handle {
    display: none;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: grab;
    touch-action: none;
}

.drag-ready .drag-handle {
    display: inline;
}

/* While dragging: every drop-down area as a visible drop zone, also the empty ones. */
.dragging .menu-children {
    min-height: 2.4rem;
    margin-top: 0.2rem;
    margin-bottom: var(--space-sm);
    border: 2px dashed var(--color-primary-border);
    border-radius: var(--radius);
}

/* SortableJS: the copy that follows the mouse or finger (it is moved to <body>, outside the list). */
.sortable-fallback {
    list-style: none;
}

/* SortableJS: the place where the item will land. */
.sortable-ghost .menu-row,
.sortable-ghost.block-row,
.sortable-ghost.gallery-photo-admin {
    background: var(--color-primary-soft);
    border-style: dashed;
}

/* "Ikke i menuen": own pages without a menu item, below the menu tree. */
.menu-not-in-menu {
    margin-top: var(--space-xl);
}

.plain-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- Popup (<dialog>, opened by menu-editor.js) ---------- */

dialog.confirm-dialog {
    max-width: 32rem;
    padding: var(--space-lg);
    color: var(--color-text);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

dialog.confirm-dialog::backdrop {
    background: var(--color-backdrop);
}

dialog.confirm-dialog h2 {
    margin-top: 0;
}

.dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* ---------- Ny bestyrelse (BoardHandover) ---------- */

/* One new member: the fields two by two on wide screens, one under the other on phones. */
.handover-new {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs) var(--space-md);
    margin: 0 0 var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.handover-new legend {
    padding: 0 var(--space-xs);
    font-weight: 600;
}

/* A label with its field, stacked, as one cell of the grid. */
.handover-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.handover-field.checkbox {
    flex-direction: row;
    align-items: center;
}

@media (max-width: 700px) {
    .handover-new {
        grid-template-columns: 1fr;
    }
}

.handover-summary ul {
    margin-bottom: 0;
}

/* The role field in the table of today's members: wide enough for "Næstformand" (the table scrolls on phones). */
.handover-form .admin-table input[type="text"] {
    width: 100%;
    min-width: 11rem;
}

/* ---------- Stairwell notice (NoticePrint, PrintLayout) ---------- */

/* On screen: the A4 sheet as a white page on the usual background, with the toolbar above it. */
.print-page {
    max-width: 210mm;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md);
}

.print-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-lg);
}

.print-toolbar p {
    flex-basis: 100%;
    margin: 0;
}

.notice-sheet {
    --notice-accent: var(--color-primary); /* the association's colour, set on the element when it has one */
    min-height: 260mm;
    padding: 18mm 16mm;
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
}

.notice-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 3px solid var(--notice-accent);
}

.notice-logo {
    max-height: 22mm;
    max-width: 50mm;
}

.notice-association {
    font-size: 1.4rem;
    font-weight: 700;
}

.notice-title {
    margin: 12mm 0 6mm;
    font-size: 2.6rem;
    line-height: 1.15;
    color: var(--notice-accent);
}

.notice-when,
.notice-where {
    margin: 0 0 var(--space-sm);
    font-size: 1.35rem;
}

.notice-image {
    display: block;
    max-width: 100%;
    max-height: 80mm;
    margin: var(--space-md) 0;
    object-fit: contain;
}

/* The text keeps its line breaks (it is plain text, as on the website). */
.notice-text {
    margin-top: var(--space-md);
    font-size: 1.2rem;
    line-height: 1.5;
    white-space: pre-line;
}

/* The address and QR code at the bottom of the sheet. */
.notice-footer {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-top: auto;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-strong);
}

.notice-qr {
    flex: none;
    width: 35mm;
}

.notice-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.notice-footer p {
    margin: 0;
    font-size: 1.1rem;
}

.notice-url {
    font-size: 1.25rem;
    font-weight: 700;
    word-break: break-all;
}

/* On paper: only the sheet, filling one A4 page. */
@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    body {
        background: none;
    }

    .screen-only {
        display: none !important;
    }

    .print-page {
        max-width: none;
        padding: 0;
    }

    .notice-sheet {
        min-height: calc(297mm - 24mm - 2px); /* the page minus its margins: the footer sits at the bottom */
        padding: 0;
        box-shadow: none;
        break-inside: avoid;
    }
}

/* ---------- General meeting checklist (GeneralMeetingPage) ---------- */

.meeting-steps {
    padding: 0;
    list-style: none;
}

/* One step: its date on the left, the text in the middle, the button on the right (stacked on phones). */
.meeting-step {
    display: grid;
    grid-template-columns: 7rem 1fr auto;
    gap: var(--space-sm) var(--space-md);
    align-items: start;
    margin-bottom: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border-strong);
    border-radius: var(--radius);
}

.meeting-step.is-done {
    border-left-color: var(--color-primary);
    background: var(--color-surface-muted);
}

.meeting-step.is-overdue {
    border-left-color: var(--color-danger);
}

.meeting-step-date {
    display: flex;
    flex-direction: column;
}

.meeting-step-text p {
    margin: var(--space-xs) 0 0;
}

.meeting-step-text .status-public,
.meeting-step-text .status-hidden {
    margin-left: var(--space-sm);
}

@media (max-width: 700px) {
    .meeting-step {
        grid-template-columns: 1fr;
    }
}

/* ---------- Help: the "?" next to each heading, its popup, and the Hjælp page (Components/Admin/Help) ---------- */

/* The heading and its "?" side by side; in a .toolbar this whole block is the left item. */
.page-heading {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.page-heading h1 {
    min-width: 0; /* a long heading wraps instead of pushing the "?" off the page */
}

.help-button {
    flex: none;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.05rem;
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border);
    border-radius: var(--radius-pill);
}

.help-button:hover {
    color: var(--color-on-primary);
}

/* The popup (HTML popover): the browser centres it in the window, like a <dialog>. */
.help-popover {
    width: min(36rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: var(--space-lg);
    color: var(--color-text);
    background: var(--color-surface);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.help-popover::backdrop {
    background: var(--color-backdrop);
}

.help-popover-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
}

.help-popover-head h2 {
    margin-top: 0;
}

.help-close {
    flex: none;
    padding: 0.35rem;
}

.help-popover h3,
.help-section h3 {
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-h3);
}

.help-popover ol,
.help-popover ul,
.help-section ol,
.help-section ul {
    padding-left: 1.4rem;
}

.help-popover li,
.help-section li {
    margin-bottom: var(--space-xs);
}

.help-more {
    margin-bottom: 0;
    font-size: var(--font-size-small);
}

.help-contents ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    padding: 0;
    list-style: none;
}

.help-section {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    scroll-margin-top: var(--space-md); /* a "Læs mere" link doesn't hide the heading under the top edge */
}

.help-section h2 {
    margin-top: 0;
}

/* ---------- Own pages (PagesAdmin, PageEdit, PageBlockEdit) ---------- */

.new-page-form {
    margin-bottom: var(--space-lg);
}

.block-list {
    max-width: 52rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.block-type {
    font-weight: 600;
}

.block-preview {
    flex: 1 1 12rem;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.add-block-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.add-block-form select {
    width: auto;
}

/* "Vis: [Alle kategorier ▾] [Vis]" above a list (DocumentsAdmin). */
.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.filter-form select {
    width: auto;
    max-width: 100%;
}

/* The text editor (Trix) and its Danish toolbar (TextEditorToolbar.razor). */
.text-editor {
    min-height: 14rem;
    max-width: 52rem;
    padding: 0.6rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-sm) !important;
}

.text-editor:focus {
    border-color: var(--color-primary) !important;
    box-shadow: var(--focus-ring);
}

trix-toolbar {
    max-width: 52rem;
}

trix-toolbar .trix-button-group {
    border-color: var(--color-border-strong) !important;
    border-radius: var(--radius-sm) !important;
}

trix-toolbar .trix-button.trix-active {
    background: var(--color-primary-soft) !important;
}

/* What the website will show, roughly, so headings and lists look like headings and lists while writing. */
.text-editor h2 {
    margin: var(--space-sm) 0;
    font-size: var(--font-size-h2);
}

/* ---------- Gallery block (GalleryPhotos.razor) ---------- */

.gallery-editor {
    max-width: 62rem;
    margin-top: var(--space-xl);
}

.gallery-grid-admin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin: var(--space-md) 0 0;
    padding: 0;
    list-style: none;
}

.gallery-photo-admin {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.gallery-photo-admin img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.gallery-photo-admin input[type=text] {
    padding: 0.4rem 0.6rem;
    font-size: var(--font-size-small);
}

.gallery-photo-admin .menu-buttons {
    margin-left: 0;
}

/* ---------- Overblik (Dashboard.razor) ---------- */

.dashboard-greeting {
    margin-bottom: var(--space-lg);
}

.dashboard-greeting h1 {
    margin-bottom: 0.15rem;
}

.dashboard-greeting p {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

/* The big coloured shortcut cards: what a board member most often comes to do. */
.shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* four in a row, or two by two on narrow screens (below) */
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.shortcut {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.1rem 1.15rem;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    border: 1px solid;
    border-radius: var(--radius-lg);
    transition: transform 0.15s, box-shadow 0.15s;
}

.shortcut:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.shortcut .icon {
    width: 1.75rem;
    height: 1.75rem;
}

.shortcut-green,
.shortcut-green:hover {
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border);
}

.shortcut-amber,
.shortcut-amber:hover {
    color: var(--color-amber-text);
    background: var(--color-amber-soft);
    border-color: var(--color-amber-border);
}

.shortcut-teal,
.shortcut-teal:hover {
    color: var(--color-teal-text);
    background: var(--color-teal-soft);
    border-color: var(--color-teal-border);
}

.shortcut-violet,
.shortcut-violet:hover {
    color: var(--color-violet-text);
    background: var(--color-violet-soft);
    border-color: var(--color-violet-border);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: var(--space-md);
}

.dashboard-card {
    margin-bottom: var(--space-md);
    padding: var(--space-md) 1.15rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.dashboard-grid .dashboard-card {
    margin-bottom: 0;
}

.dashboard-card h2 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0 0 0.6rem;
    font-size: var(--font-size-h3);
}

.dashboard-card h2 .icon {
    color: var(--color-primary);
}

.dashboard-missing {
    background: var(--color-amber-soft);
    border-color: var(--color-amber-border);
}

/* The coming general meeting's next step: teal, like its shortcut colour family, so it stands out from the lists. */
.dashboard-meeting {
    margin-bottom: var(--space-lg);
    background: var(--color-teal-soft);
    border-color: var(--color-teal-border);
}

.dashboard-meeting h2,
.dashboard-meeting h2 .icon {
    color: var(--color-teal-text);
}

.dashboard-missing h2,
.dashboard-missing h2 .icon,
.dashboard-missing li {
    color: var(--color-amber-text);
}

.dashboard-missing a {
    color: var(--color-amber-text);
}

.dashboard-missing ul {
    margin: 0;
    padding-left: 1.2rem;
}

.dashboard-ai {
    background: var(--color-ai-soft);
    border-color: var(--color-ai-border);
}

.dashboard-ai h2,
.dashboard-ai h2 .icon {
    color: var(--color-ai-text);
}

.dashboard-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-sm);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.dashboard-list li:last-child {
    border-bottom: none;
}

.dashboard-list .muted {
    flex-basis: 100%;
}

.dashboard-list a {
    font-weight: 500;
    text-decoration: none;
}

.dashboard-list a:hover {
    text-decoration: underline;
}

@media (max-width: 40rem) {
    .shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dashboard-ask {
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.dashboard-ask textarea {
    width: 100%;
    min-height: 4.5rem;
}

/* ---------- Account pages (login, register, Min konto) ----------
   These pages come from the Identity template and use Bootstrap class names, but Bootstrap is not included.
   The rules below give exactly those class names the admin app's look (the same tokens). They only apply inside
   <main class="account-page">, which MainLayout sets on /Account/ pages, so they never affect the admin pages. */

.account-page h1 {
    margin-bottom: var(--space-sm);
}

.account-page h2 {
    font-size: var(--font-size-h3);
}

.account-page h3 {
    font-size: var(--font-size-h3);
}

.account-page hr {
    margin: var(--space-md) 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

/* Columns: side by side on wide screens, stacked on narrow ones (flex-wrap). */
.account-page .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-lg) var(--space-xl);
}

.account-page .col-lg-6,
.account-page .col-md-6,
.account-page .col-xl-6,
.account-page .col-md-4 {
    flex: 1 1 22rem;
    max-width: 32rem;
}

.account-page .col-lg-4 {
    flex: 1 1 16rem;
    max-width: 24rem;
}

.account-page .col-md-12 {
    flex: 1 1 100%;
}

/* Min konto: menu on the left, page on the right. */
.account-page .col-lg-3 {
    flex: 0 0 14rem;
}

.account-page .col-lg-9 {
    flex: 1 1 20rem;
    min-width: 0;
}

/* Forms with input fields look like the admin forms: a white card. Forms with only a button stay plain. */
.account-page form:has(input:not([type=hidden])) {
    padding: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.account-page form h2 {
    margin-top: 0;
}

/* Bootstrap's "floating label" markup puts the label after the field; show it above, like the admin forms. */
.account-page .form-floating {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.account-page .form-floating > label {
    order: -1;
    font-weight: 600;
}

.account-page .mb-3 {
    margin-bottom: var(--space-md);
}

.account-page .mt-2 {
    margin-top: var(--space-sm);
}

.account-page .checkbox label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: normal;
}

/* The ✓ next to a confirmed e-mail address. */
.account-page .input-group-text {
    font-weight: 600;
    color: var(--color-primary);
}

/* Buttons and button-like links, the same as on the admin pages. */
.account-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 var(--space-xs) var(--space-xs) 0;
    padding: 0.55rem 1.1rem;
    font: inherit;
    font-weight: 600;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
}

.account-page .btn:hover {
    background: var(--color-primary-hover);
}

.account-page .btn-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
}

.account-page .btn-lg {
    padding: 0.7rem 1.3rem;
    font-size: 1.05rem;
}

.account-page .w-100 {
    width: 100%;
}

.account-page .btn-link {
    padding: 0;
    color: var(--color-primary);
    background: none;
    border: none;
    text-decoration: underline;
}

.account-page .btn-link:hover {
    background: none;
}

.account-page .d-flex {
    display: flex;
}

.account-page .flex-column {
    flex-direction: column;
}

.account-page .mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Message boxes, matching .notice and .error-summary on the admin pages. */
.account-page .alert {
    margin-bottom: var(--space-md);
    padding: 0.75rem 1rem;
    color: var(--color-teal-text);
    background: var(--color-teal-soft);
    border: 1px solid var(--color-teal-border);
    border-radius: var(--radius);
}

.account-page .alert p {
    margin: var(--space-xs) 0;
}

.account-page .alert-success {
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border);
}

.account-page .alert-danger {
    color: var(--color-danger-text);
    background: var(--color-danger-soft);
    border-color: var(--color-danger-border);
}

.account-page .alert-warning {
    color: var(--color-amber-text);
    background: var(--color-amber-soft);
    border-color: var(--color-amber-border);
}

.account-page .text-danger {
    color: var(--color-danger-text);
}

.account-page .text-success {
    color: var(--color-primary-text);
}

.account-page .text-secondary {
    color: var(--color-text-muted);
}

.account-page .text-info {
    color: var(--color-teal-text);
}

/* Min konto menu: like the side menu. */
.account-page .nav {
    margin: 0;
    padding: var(--space-sm);
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.account-page .nav-link {
    display: block;
    padding: 0.45rem 0.75rem;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.account-page .nav-link:hover {
    background: var(--color-surface-muted);
}

.account-page .nav-link.active {
    font-weight: 600;
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
}

/* Tables (passkeys, external logins). */
.account-page .table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border-radius: var(--radius);
}

.account-page .table td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}

.account-page .table form {
    display: inline;
}

/* The QR code for the authenticator app (an SVG with a white quiet zone, so it scans on any background). */
.authenticator-qr {
    width: 12rem;
    max-width: 100%;
    margin-bottom: var(--space-md);
}

.authenticator-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Authenticator key and recovery codes. */
.account-page kbd,
.account-page .recovery-code {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    font-family: var(--font-mono);
    background: var(--color-surface-muted);
    border-radius: var(--radius-sm);
}

.account-page .list li {
    margin-bottom: 0.75rem;
}

@media (max-width: 700px) {
    .account-page .col-lg-3 {
        flex: 1 1 100%;
    }
}