/* DMARC Analyzer - Accessible Stylesheet v2 */
/* WCAG 2.1 AA compliant with high contrast mode */

:root {
    /*
     * WCAG 2.1 AA contrast — palette tuned 2026-05-08x to fix two
     * normal-text failures on the light theme:
     *   - text-muted #6c757d on bg #f5f6f8 → 4.34:1  (AA needs 4.5)
     *   - primary   #0d6efd on bg #f5f6f8 → 4.16:1  (AA needs 4.5)
     * Bumped both toward darker hues that pass AA on bg AND surface
     * AND keep white-on-button-background contrast strong:
     *   - text-muted #5a6268 → 5.74 / 6.21
     *   - primary    #0a58ca → 5.95 / 6.44 (+ white-on = 6.44)
     *   - primary-hover #084298 → 8.66 / 9.36 (kept darker than primary)
     *
     * Loop 2026-05-09(aa) — runtime axe-core scan caught a third
     * failure missed by the 2026-05-08x static audit: the
     * `.text-danger` heading on profile.php's "Delete Account"
     * section sits on `--color-bg` (#f5f6f8), not on a card. The
     * old `--color-danger: #dc3545` only computes 4.18:1 on bg
     * (the static audit only checked danger on surface = 4.51:1
     * which barely passed). Bumped to #b02a37 — Bootstrap 5
     * "danger-emphasis" red — which passes on bg AND surface AND
     * keeps white-on-button strong:
     *   - danger     #b02a37 → 5.95 / 6.51 (+ white-on = 6.51)
     * Other pairs (text on bg/surface, success, warning,
     * header/footer, dark theme, high-contrast theme) already pass AA;
     * not touched. Dark/HC themes audited and unchanged.
     */
    --color-bg: #f5f6f8;
    --color-surface: #ffffff;
    --color-text: #1a1a2e;
    --color-text-muted: #5a6268;
    --color-primary: #0a58ca;
    --color-primary-hover: #084298;
    --color-primary-light: rgba(10,88,202,0.08);
    --color-success: #198754;
    --color-success-light: rgba(25,135,84,0.08);
    --color-warning: #856404;
    --color-warning-bg: #fff3cd;
    --color-danger: #b02a37;
    --color-danger-light: rgba(176,42,55,0.08);
    /* Code-block surface — light theme. Tuned 2026-05-09(ab) so that
       muted-text inheritance (--color-text-muted #5a6268) on inline
       <code> still passes WCAG 1.4.3 AA: #5a6268 on #eef0f2 = 5.42:1.
       Old fallback #d5d6d8 was 4.26:1 — caught by axe-core on
       help.php inline <code> elements inside .help-dl dd. */
    --color-code-bg: #eef0f2;
    --color-border: #e2e5e9;
    /* WCAG 2.1 SC 1.4.11 Non-text Contrast (AA): form input borders MUST
       have ≥3:1 against the input's own background AND against the
       surrounding page bg, so a low-vision user can locate the input. The
       generic --color-border #e2e5e9 only achieves 1.07:1 on input bg
       #f5f6f8 — fine for purely decorative dividers but a 1.4.11 failure
       for active form fields. --color-input-border #80858b passes 3.44:1
       on #f5f6f8 (input default bg) and 3.72:1 on #ffffff (input focused
       bg), with comfortable margin above the 3:1 floor. */
    --color-input-border: #80858b;
    --color-header-bg: #1a1a2e;
    --color-header-text: #ffffff;
    --color-footer-bg: #1a1a2e;
    --color-footer-text: #adb5bd;
    --color-link: #0a58ca;
    --color-focus: #0a58ca;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --transition: 0.2s ease;
    --max-width: 1200px;
    /* CSS color-scheme: tells the UA which palette to use for native form
       controls and scrollbars. Default theme is light. The .theme-dark and
       .high-contrast overrides below switch the UA to its dark palette so
       scrollbars/select dropdowns don't render as bright white strips on a
       dark page. */
    color-scheme: light;
}

/* Dark Mode */
.theme-dark {
    color-scheme: dark;
    --color-bg: #13132b;
    --color-surface: #1e1e3a;
    --color-text: #e0e0e8;
    --color-text-muted: #9a9ab0;
    --color-primary: #6db3f2;
    --color-primary-hover: #9dcbf5;
    --color-primary-light: rgba(109,179,242,0.12);
    --color-success: #4caf7c;
    --color-success-light: rgba(76,175,124,0.12);
    --color-warning: #d4a14a;
    --color-warning-bg: #2e2816;
    --color-danger: #e06060;
    --color-danger-light: rgba(224,96,96,0.12);
    /* Code-block surface — dark theme. Slightly lighter than --color-surface
       so code blocks remain visually distinct without sacrificing AA contrast
       against muted text (#9a9ab0 on #2a2a45 ≈ 5.04:1). */
    --color-code-bg: #2a2a45;
    --color-border: #2d2d4a;
    /* SC 1.4.11 form-input border for dark theme. #7e7e9f passes 4.65:1
       on bg #13132b and 4.13:1 on surface #1e1e3a — both above the 3:1
       floor for active form fields. The decorative --color-border
       #2d2d4a stays unchanged for dividers/cards (1.4.11 exempts purely
       decorative boundaries). */
    --color-input-border: #7e7e9f;
    --color-header-bg: #0d0d22;
    --color-header-text: #e0e0e8;
    --color-footer-bg: #0d0d22;
    --color-footer-text: #9a9ab0;
    --color-link: #6db3f2;
    --color-focus: #6db3f2;
    --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.2);
}

/* High Contrast Mode */
.high-contrast {
    color-scheme: dark;
    --color-bg: #000000;
    --color-surface: #0d0d0d;
    --color-text: #ffffff;
    --color-text-muted: #e0e0e0;
    --color-primary: #5ebbff;
    --color-primary-hover: #8fd0ff;
    --color-primary-light: rgba(94,187,255,0.18);
    --color-success: #44ff44;
    --color-success-light: rgba(68,255,68,0.18);
    --color-warning: #ffcc00;
    --color-warning-bg: #332900;
    --color-danger: #ff4444;
    --color-danger-light: rgba(255,68,68,0.18);
    /* Code-block surface — high-contrast theme. Matches --color-surface so the
       block remains visible against the pure-black bg, with HC's white text
       trivially exceeding AAA contrast. */
    --color-code-bg: #0d0d0d;
    --color-border: #888888;
    /* SC 1.4.11 form-input border for HC theme. #888888 already passes
       5.48:1 on surface #0d0d0d, so the input-border alias matches the
       generic border token at exactly that strength. Aliased rather
       than duplicated so a future HC palette tweak only needs one
       update. */
    --color-input-border: #888888;
    --color-header-bg: #000000;
    --color-header-text: #ffffff;
    --color-footer-bg: #0d0d0d;
    --color-footer-text: #e0e0e0;
    --color-link: #5ebbff;
    --color-focus: #ffff00;
    --shadow: 0 0 0 1px rgba(255,255,255,0.2);
    --shadow-md: 0 0 0 1px rgba(255,255,255,0.3);
    --shadow-lg: 0 0 0 2px rgba(255,255,255,0.4);
}

/* High contrast - stronger visual cues */
.high-contrast a:not(.btn):not(.header-title-link):not(.section-nav-list a) {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.high-contrast .btn {
    border-width: 2px;
    font-weight: 700;
}

.high-contrast table {
    border: 2px solid var(--color-border);
}

.high-contrast th,
.high-contrast td {
    border-color: var(--color-border);
}

.high-contrast .card,
.high-contrast .stat-card {
    border: 2px solid var(--color-border);
}

.high-contrast .form-input,
.high-contrast .form-select,
.high-contrast .form-textarea {
    border-width: 2px;
    border-color: var(--color-border);
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Base */
html {
    font-size: 100%;
    scroll-behavior: smooth;
    /* WCAG 2.4.11 Focus Not Obscured (Minimum, AA, WCAG 2.2):
       leave clearance above any focused or scrolled-to element so the
       sticky .section-nav (top: 0) on dashboard/help pages does not
       obscure focus when keyboard Tab triggers scroll-into-view. 5rem
       (~80px) covers the section-nav (~40px) plus comfortable padding
       and matches the help-page anchor offset (scroll-margin-top: 80px).
       On pages without a sticky top bar the only effect is slightly
       more breathing room above scrolled-in elements — harmless. */
    scroll-padding-top: 5rem;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--color-primary);
    color: #fff;
    padding: 0.5rem 1rem;
    z-index: 1000;
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
}

/* Focus styles - WCAG requirement */
:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header */
header {
    background: var(--color-header-bg);
    color: var(--color-header-text);
    padding: 1.25rem 0;
    border-bottom: 3px solid var(--color-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    position: relative;
    z-index: 101;
}

header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

header h1 {
    font-size: 1.75rem;
    margin: 0;
    flex: 1;
    letter-spacing: -0.02em;
}

header .subtitle {
    width: 100%;
    margin: 0;
    opacity: 0.7;
    font-size: 0.875rem;
    order: 3;
    letter-spacing: 0.01em;
}

/* Main */
main {
    flex: 1;
    padding: 2rem 0;
}

main section {
    margin-bottom: 2.5rem;
}

/* Typography */
h2 {
    font-size: 1.375rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1.5px solid var(--color-border);
    letter-spacing: -0.01em;
}

/* Section header with action button */
.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.section-header h2 {
    flex: 1;
}

.export-btns {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}
.export-form {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.5rem 1.125rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition);
    line-height: 1.5;
    white-space: nowrap;
}

.btn:hover {
    background: var(--color-bg);
    border-color: var(--color-text-muted);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-primary {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    box-shadow: 0 1px 2px rgba(10, 88, 202,0.3);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: 0 3px 8px rgba(10, 88, 202,0.3);
}

.btn-sm {
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
}

/* Forms */
.upload-form {
    background: var(--color-surface);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--color-border);
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition);
}

.form-group {
    margin-bottom: 1.25rem;
    position: relative;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    color: var(--color-text);
    transition: color var(--transition);
}

.form-group label .required-star {
    color: var(--color-danger);
    margin-left: 0.15em;
}

/* Unified text input styling */
.form-input {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.5;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.form-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.form-input:hover {
    border-color: var(--color-text-muted);
}

.form-input:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 88, 202, 0.15);
    background: var(--color-surface);
}

.theme-dark .form-input:focus,
.high-contrast .form-input:focus {
    box-shadow: 0 0 0 3px rgba(94, 187, 255, 0.4);
}

.form-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--color-bg);
}

/* Input validation states.
 * WCAG 2.1 SC 1.4.1 Use of Color (Level A): validation state must NOT
 * be conveyed by border colour alone — colour-blind users (especially
 * red/green deuteranopia, ~7% of men) cannot reliably distinguish the
 * green is-valid border from the red is-invalid border. We pair every
 * colour change with a non-colour indicator: a background SVG icon
 * (✓ for valid, ✗ for invalid) inset at the right edge of the input.
 * The icons are inline data URIs so they render identically across
 * light/dark/high-contrast themes and require no extra HTTP request.
 * The is-invalid border is also widened to 3px so the difference from
 * is-valid (2px) is visible in monochrome and to users who disable
 * background-image rendering. */
.form-input.is-valid {
    border-color: var(--color-success);
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23198754' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
}

.form-input.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.15);
}

.form-input.is-invalid {
    border-color: var(--color-danger);
    border-width: 3px;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b02a37' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='4' x2='12' y2='12'/%3E%3Cline x1='12' y1='4' x2='4' y2='12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1rem 1rem;
}

.form-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(176, 42, 55, 0.15);
}

.form-feedback {
    display: none;
    font-size: 0.8125rem;
    margin-top: 0.3rem;
}

.form-feedback-valid {
    color: var(--color-success);
}

.form-feedback-invalid {
    color: var(--color-danger);
}

.form-input.is-valid ~ .form-feedback-valid,
.form-input.is-invalid ~ .form-feedback-invalid {
    display: block;
}

/* Per-field validation error rendered by initFormValidation() in theme.js.
 * WCAG 3.3.1 Error Identification (Level A): when checkValidity() fails the
 * JS writes input.validationMessage (or a data-error-* override) into a
 * <small class="field-error"> element placed next to the input. The element
 * is created with role=alert + aria-live=polite so AT users are announced.
 *
 * We DO NOT depend on the .form-input.is-invalid ~ .form-feedback-invalid
 * sibling selector because password fields sit inside .password-wrapper —
 * the wrapper is the sibling of the error element, not the input, so the
 * combinator would never match. :empty hides the element when JS clears the
 * message so screen readers do not announce a blank alert. */
.field-error {
    display: block;
    color: var(--color-danger);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 0.3rem;
}
.field-error:empty {
    display: none;
}

/* Select inputs */
.form-select {
    display: block;
    width: 100%;
    padding: 0.625rem 2.25rem 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.5;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
    background-size: 16px 12px;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.form-select:hover {
    border-color: var(--color-text-muted);
}

.form-select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 88, 202, 0.15);
}

.theme-dark .form-select:focus,
.high-contrast .form-select:focus {
    box-shadow: 0 0 0 3px rgba(94, 187, 255, 0.4);
}

.form-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Textarea */
.form-textarea {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.5;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-textarea:hover {
    border-color: var(--color-text-muted);
}

.form-textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 88, 202, 0.15);
    background: var(--color-surface);
}

.theme-dark .form-textarea:focus,
.high-contrast .form-textarea:focus {
    box-shadow: 0 0 0 3px rgba(94, 187, 255, 0.4);
}

/* Password field wrapper with toggle */
.password-wrapper {
    position: relative;
}

.password-wrapper .form-input {
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color var(--transition);
}

.password-toggle:hover {
    color: var(--color-text);
}

.password-toggle:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 1px;
}

.password-toggle svg {
    width: 18px;
    height: 18px;
}

/* Checkbox styling */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.form-check input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.form-check-label {
    font-size: 0.9rem;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}

/* Inline style replacements */
.resend-verification-box {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.resend-verification-box p {
    margin-bottom: 0.75rem;
    color: var(--color-text-muted);
}

.api-key-display {
    margin-bottom: 1rem;
}

.api-key-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.api-key-info {
    margin-bottom: 1rem;
    color: var(--color-text-muted);
}

.upload-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 1.5rem;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
    gap: 0.5rem;
}

.upload-dropzone:hover,
.upload-dropzone.dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.upload-dropzone.dragover {
    border-style: solid;
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.upload-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-dropzone-icon {
    opacity: 0.5;
    transition: opacity var(--transition);
}

.upload-dropzone:hover .upload-dropzone-icon,
.upload-dropzone.dragover .upload-dropzone-icon {
    opacity: 0.8;
}

.upload-dropzone-text {
    font-size: 0.9375rem;
    font-weight: 500;
}

.upload-dropzone-hint {
    font-size: 0.8125rem;
}

.upload-file-list {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text);
}

.upload-file-list .file-count {
    font-weight: 600;
    color: var(--color-primary);
}

/* Email fetch status bar */
.fetch-status-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.fetch-status-bar .icon {
    flex-shrink: 0;
    color: var(--color-primary);
}
.fetch-status-label {
    font-weight: 600;
    color: var(--color-text);
}
.fetch-status-item {
    white-space: nowrap;
}
.fetch-status-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}
.fetch-status-actions .inline-form {
    display: inline;
}
.fetch-cooldown {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
    cursor: help;
}

.form-group input[type="file"] {
    display: block;
    width: 100%;
    padding: 0.75rem;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1rem;
    cursor: pointer;
    transition: border-color var(--transition);
}

.form-group input[type="file"]:hover {
    border-color: var(--color-primary);
}

.form-help {
    display: block;
    margin-top: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* "(optional)" marker inside a <label>. Inline (the label already carries the
   field name) and font-weight normal so it reads as an aside rather than part
   of the name. Uses --color-text-muted, which every theme defines against its
   own surface colour, so contrast holds in light/dark/high-contrast alike. */
.form-optional {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
}

.tooltip-icon {
    display: inline-block;
    cursor: help;
    color: var(--color-primary);
    font-size: 1rem;
    vertical-align: middle;
    margin-left: 0.25rem;
}

/* Alerts */
.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    border: 1.5px solid;
    font-weight: 500;
    animation: alertSlideIn 0.3s ease-out;
}

@keyframes alertSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.alert-success {
    background: #d1e7dd;
    border-color: var(--color-success);
    color: #0f5132;
}

.alert-error {
    background: #f8d7da;
    border-color: var(--color-danger);
    color: #842029;
}

.alert-warning {
    background: var(--color-warning-bg);
    border-color: #ffecb5;
    color: var(--color-warning);
}

.alert-info {
    background: #cfe2ff;
    border-color: #9ec5fe;
    color: #084298;
}

.system-message {
    position: relative;
}

.sys-msg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.theme-dark .alert-info,
.high-contrast .alert-info {
    background: #031633;
    color: #6ea8fe;
}

.theme-dark .alert-success,
.high-contrast .alert-success {
    background: #0a3622;
    color: #5cb85c;
}

.theme-dark .alert-error,
.high-contrast .alert-error {
    background: #3a0a0a;
    color: #ff6b6b;
}

.theme-dark .alert-warning,
.high-contrast .alert-warning {
    background: #3a3000;
    color: #f0ad4e;
}

/* Free-tier quota banner / paywall — public tool pages
   (header_analyzer, domain_checker, blacklist_checker). Banner sits
   above the action form when an anonymous or free-tier visitor has
   remaining > 0; paywall replaces the form when remaining = 0. */
.quota-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius);
    background: var(--color-primary-light);
    color: var(--color-text);
    font-size: 0.95rem;
}

.quota-banner-label {
    color: var(--color-primary);
}

.quota-banner-cta {
    margin-left: auto;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
}

.quota-banner-cta:hover,
.quota-banner-cta:focus {
    color: var(--color-primary-hover);
}

.quota-paywall {
    text-align: center;
    border: 2px solid var(--color-primary);
    background: var(--color-primary-light);
}

.quota-paywall-title {
    color: var(--color-primary);
    margin-top: 0;
}

.quota-paywall-countdown {
    font-size: 1.05rem;
    margin: 0.75rem 0 1.25rem;
}

.quota-paywall-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.theme-dark .quota-banner,
.theme-dark .quota-paywall {
    background: rgba(109, 179, 242, 0.10);
}

.high-contrast .quota-banner {
    background: #0a1a2e;
    border: 2px solid #5ebbff;
    color: #ffffff;
}

.high-contrast .quota-banner-label,
.high-contrast .quota-banner-cta,
.high-contrast .quota-paywall-title {
    color: #5ebbff;
}

.high-contrast .quota-paywall {
    background: #0a1a2e;
    border: 2px solid #5ebbff;
    color: #ffffff;
}

/* Blacklist zone-cap upgrade banner — visible only on blacklist_checker.php
   for anonymous and free-tier visitors (paid tiers see no cap). Sits ABOVE
   the quota_banner and uses a softer informational treatment than the
   blocking alert-warning style: border-left accent only, no full background
   panel, so it reads as a nudge rather than an error. */
.blacklist-upgrade-banner {
    margin: 0.75rem 0 1.25rem;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    border-left: 4px solid var(--color-primary);
    background: var(--color-primary-light);
    border-radius: var(--radius);
    color: var(--color-text);
}

.blacklist-upgrade-banner strong {
    display: block;
    color: var(--color-primary);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.blacklist-upgrade-banner-body {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.95rem;
    line-height: 1.45;
}

.blacklist-upgrade-banner-cta {
    margin-top: 0.25rem;
}

.theme-dark .blacklist-upgrade-banner {
    background: rgba(109, 179, 242, 0.10);
}

.high-contrast .blacklist-upgrade-banner {
    background: #0a1a2e;
    border-left: 4px solid #5ebbff;
    color: #ffffff;
}

.high-contrast .blacklist-upgrade-banner strong {
    color: #5ebbff;
}

/* High contrast alert overrides - brighter colors and visible borders */
.high-contrast .alert-info {
    background: #001a3d;
    color: #8ecfff;
    border: 2px solid #5ebbff;
}
.high-contrast .alert-success {
    background: #002200;
    color: #44ff44;
    border: 2px solid #44ff44;
}
.high-contrast .alert-error {
    background: #330000;
    color: #ff6666;
    border: 2px solid #ff4444;
}
.high-contrast .alert-warning {
    background: #332900;
    color: #ffdd44;
    border: 2px solid #ffcc00;
}

.form-error-inline {
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* Dashboard Cards */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.card {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
}

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

.card-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.card-label {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.375rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Tables */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

.table-responsive.table-wide {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive.table-wide table {
    min-width: 900px;
}

.table-responsive.table-wide td,
.table-responsive.table-wide th {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    table-layout: auto;
    box-shadow: var(--shadow);
}


/* Compact column widths for reports table */
.reports-table .col-toggle { width: 2.5rem; }

/* Truncate overflowing cell text */
td, th {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Allow wrapping for detail tables */
.detail-row td,
.detail-table td,
.detail-table th {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

thead {
    background: var(--color-header-bg);
    color: var(--color-header-text);
}

th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

td {
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--color-border);
    vertical-align: top;
}

tbody tr {
    transition: background var(--transition);
}

tbody tr:hover {
    background: var(--color-primary-light);
}

.theme-dark tbody tr:hover,
.high-contrast tbody tr:hover {
    background: rgba(94, 187, 255, 0.15);
}

/* Text Colors */
.text-success { color: var(--color-success); font-weight: 600; }
.text-danger { color: var(--color-danger); font-weight: 600; }
.text-muted { color: var(--color-text-muted); }

/* Blacklist detail styles */
.bl-detail-category { font-weight: 600; color: var(--color-danger); display: inline-block; }
.bl-detail-reason { color: var(--color-text-muted); font-size: 0.8rem; word-break: break-word; max-width: 320px; display: inline-block; line-height: 1.3; }

/* Blacklist History & Trend */
.bl-history-content { padding: 0.75rem 0; }
.bl-trend-section { margin-bottom: 1.5rem; }
.bl-trend-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--color-text); }
.bl-trend-chart-wrap { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 0.75rem; }
.bl-trend-canvas { width: 100%; height: 200px; display: block; }
.bl-trend-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: 0.875rem; color: var(--color-text-muted); }
.bl-trend-indicator { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.8rem; }
.bl-trend-up { color: #fff; background: var(--color-danger); }
.bl-trend-down { color: #fff; background: var(--color-success); }
.bl-trend-stable { color: var(--color-text); background: rgba(128,128,128,0.15); }
.bl-trend-stats strong { color: var(--color-text); }
.bl-history-table-wrap { max-height: 400px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius); }
.bl-history-table { margin: 0; }
.bl-history-table thead th { position: sticky; top: 0; z-index: 1; background: var(--color-bg); }
.bl-row-listed { background: rgba(231, 76, 60, 0.06); }
.theme-dark .bl-row-listed { background: rgba(231, 76, 60, 0.1); }
.high-contrast .bl-trend-up { background: #ff4444; }
.high-contrast .bl-trend-down { background: #44ff44; color: #000; }
.high-contrast .bl-row-listed { background: rgba(255, 68, 68, 0.15); }
@media (max-width: 600px) {
    .bl-trend-summary { flex-direction: column; align-items: flex-start; }
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge-success {
    background: var(--color-success);
    color: #fff;
}

.badge.ip-whitelisted { text-transform: none; letter-spacing: 0; padding: 0.15rem 0.45rem; cursor: help; }
.badge.ip-whitelisted code { background: transparent; color: inherit; padding: 0; font-size: inherit; }

.badge-warning {
    background: #ffc107;
    color: #000;
}

.badge-danger {
    background: var(--color-danger);
    color: #fff;
}

.badge-info {
    background: var(--color-primary);
    color: #fff;
}
.badge-muted {
    background: #6c757d;
    color: #fff;
}

.trial-expired {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    text-decoration: line-through;
    border: 2px solid var(--text-secondary, #8b949e);
    color: var(--text-secondary, #8b949e);
    background: transparent;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: help;
}

/* Compliance Score Section */
.compliance-wrapper {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

.compliance-gauge-container {
    text-align: center;
    position: relative;
}

.compliance-grade-label {
    margin-top: 0.25rem;
}

.grade {
    font-size: 2rem;
    font-weight: 800;
    display: inline-block;
}

.grade-a { color: #198754; }
.grade-b { color: #20c997; }
.grade-c { color: #ffc107; }
.grade-d { color: #fd7e14; }
.grade-f { color: #dc3545; }

.theme-dark .grade-a, .high-contrast .grade-a { color: #5cb85c; }
.theme-dark .grade-b, .high-contrast .grade-b { color: #2dd4a8; }
.theme-dark .grade-c, .high-contrast .grade-c { color: #f0ad4e; }
.theme-dark .grade-d, .high-contrast .grade-d { color: #ff8c00; }
.theme-dark .grade-f, .high-contrast .grade-f { color: #ff6b6b; }
.high-contrast .grade-a { color: #44ff44; }
.high-contrast .grade-b { color: #44ffcc; }
.high-contrast .grade-c { color: #ffdd44; }
.high-contrast .grade-d { color: #ffaa00; }
.high-contrast .grade-f { color: #ff4444; }

.compliance-breakdown h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.score-bar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.score-bar-label {
    min-width: 180px;
    font-size: 0.875rem;
}

.score-bar {
    flex: 1;
    height: 10px;
    background: var(--color-border);
    border-radius: 5px;
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 5px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.score-bar-value {
    min-width: 3rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: right;
}

.recommendations {
    margin-top: 1rem;
}

.recommendations h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.recommendation {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    border-left: 4px solid var(--color-border);
    background: var(--color-surface);
    transition: transform var(--transition), box-shadow var(--transition);
}

.recommendation:hover {
    transform: translateX(2px);
    box-shadow: var(--shadow);
}

.recommendation-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.recommendation p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.recommendation-high { border-left-color: var(--color-danger); }
.recommendation-medium { border-left-color: #ffc107; }
.recommendation-low { border-left-color: var(--color-primary); }
.recommendation-info { border-left-color: var(--color-text-muted); }
.recommendation-success { border-left-color: var(--color-success); }

@media (max-width: 768px) {
    .compliance-wrapper {
        grid-template-columns: 1fr;
    }
    .score-bar-label {
        min-width: 120px;
    }
}

/* Detail Meta */
.detail-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    background: var(--color-surface);
    padding: 1rem 1.25rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.detail-meta dt {
    font-weight: 600;
    color: var(--color-text-muted);
}

.detail-meta dd {
    margin: 0;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 1.5rem;
    background: var(--color-surface);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

.empty-state h2 {
    border: none;
    margin-bottom: 0.5rem;
    font-size: 1.375rem;
}

.empty-state p {
    color: var(--color-text-muted);
    max-width: 500px;
    margin: 0.5rem auto;
    line-height: 1.6;
}

/* Charts */
.chart-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.chart-container-fullwidth {
    margin-bottom: 1.5rem;
}

.chart-container {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition);
    position: relative;
}

.chart-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    line-height: 1.3;
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    z-index: 5;
}

.chart-container:hover {
    box-shadow: var(--shadow-md);
}

.chart-container h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: var(--color-text);
}

.chart-container canvas {
    display: block;
    max-width: 100%;
}

/* Keyboard focus indicators for the dashboard chart canvases (loops jb/jc:
   WCAG SC 2.1.1 / 2.4.7). Each canvas is keyboard-focusable so arrow keys
   can step through bars/rows; this visible outline tells sighted keyboard
   users which canvas has focus. Uses :focus-visible only so mouse clicks
   (which also focus the canvas) don't show the outline — keyboard-only
   convention. See feedback_focus_visible_antipattern memory: never write
   `:focus + :focus:not(:focus-visible) { outline: none }`. */
#chart-volume:focus-visible,
#chart-reporter:focus-visible,
#chart-sourceip:focus-visible,
#chart-disposition:focus-visible,
#chart-geo:focus-visible,
#chart-timeseries:focus-visible,
#chart-gauge:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .chart-grid {
        grid-template-columns: 1fr;
    }
}

/* Section actions (multiple buttons in header) */
.section-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Icon utilities */
.icon {
    vertical-align: middle;
    flex-shrink: 0;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Toggle button for report details */
.btn-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    color: var(--color-primary);
    line-height: 1;
    border-radius: var(--radius);
    /* WCAG 2.5.8 (AA, WCAG 2.2): touch target must be ≥ 24×24 CSS px.
       Without these the button is 14px svg + 0.25rem×2 padding = 22px tall. */
    min-width: 24px;
    min-height: 24px;
}

.btn-toggle .toggle-icon {
    display: inline-block;
    transition: transform 0.2s ease;
}

.btn-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(90deg);
}

/* Expand All button icon rotation */
#toggle-all-details .icon-expand-all {
    transition: transform 0.2s ease;
}

#toggle-all-details[aria-expanded="true"] .icon-expand-all {
    transform: rotate(180deg);
}

/* Wide view toggle active state */
#toggle-table-width[aria-pressed="true"] {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.btn-toggle:hover {
    background: rgba(10, 88, 202, 0.08);
}

.theme-dark .btn-toggle:hover,
.high-contrast .btn-toggle:hover {
    background: rgba(94, 187, 255, 0.2);
}

.col-toggle {
    text-align: center;
}

.report-row {
    cursor: pointer;
}

.report-row:hover {
    background: rgba(10, 88, 202, 0.06);
}

.theme-dark .report-row:hover,
.high-contrast .report-row:hover {
    background: rgba(94, 187, 255, 0.15);
}

/* Inline detail row */
.detail-row td {
    padding: 0;
    border-top: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.inline-detail {
    background: var(--color-bg);
    border-top: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    padding: 1rem;
}

.detail-meta-inline {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.detail-table {
    font-size: 0.875rem;
    margin: 0;
    border: 1px solid var(--color-border);
    table-layout: auto;
}

.detail-table th {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.detail-table td {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* Responsive table: card layout on mobile */
@media (max-width: 768px) {
    .table-responsive,
    .table-responsive.table-wide {
        overflow-x: visible;
    }

    table:not(.detail-table) {
        table-layout: auto;
    }

    table:not(.detail-table) thead {
        display: none;
    }

    table:not(.detail-table) tbody tr:not(.detail-row) {
        display: block;
        background: var(--color-surface);
        border: 2px solid var(--color-border);
        border-radius: var(--radius);
        margin-bottom: 0.75rem;
        padding: 0.5rem 0;
    }

    table:not(.detail-table) tbody tr:not(.detail-row) td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.375rem 1rem;
        border-top: none;
        border-bottom: 1px solid var(--color-border);
        text-align: right;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        width: auto;
    }

    table:not(.detail-table) tbody tr:not(.detail-row) td:last-child {
        border-bottom: none;
    }

    table:not(.detail-table) tbody tr:not(.detail-row) td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        margin-right: 1rem;
        flex-shrink: 0;
        color: var(--color-text);
    }

    table:not(.detail-table) tbody tr:not(.detail-row) td.col-toggle {
        justify-content: flex-start;
        border-bottom: 1px solid var(--color-border);
    }

    /* Detail row spans full width in card mode */
    .detail-row {
        display: block;
        margin-top: -0.75rem;
        margin-bottom: 0.75rem;
    }

    .detail-row td {
        display: block;
    }

    /* Inner detail table stays horizontal but scrolls */
    .inline-detail {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Code */
code {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
    font-size: 0.875em;
    background: var(--color-bg);
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

/* WCAG 2.1 SC 1.4.10 Reflow (Level AA): bare <pre> blocks must scroll
   horizontally inside their own box rather than overflow the page at
   320 CSS px viewport. Specific classes (.code-block, .raw-header) set
   their own overflow-x; this default catches any future bare <pre> use
   (e.g. inline help-page code samples) so it cannot silently break
   320px-viewport layout. max-width: 100% prevents the pre from busting
   out of its parent's content-box width. */
pre {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Auth Forms */
.auth-container {
    max-width: 440px;
    margin: 0 auto;
}

.auth-tabs {
    display: flex;
    border-bottom: 1.5px solid var(--color-border);
    margin-bottom: 0;
}

.auth-tab {
    flex: 1;
    text-align: center;
    padding: 0.75rem 1rem;
    text-decoration: none;
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition), border-color var(--transition);
}

.auth-tab:hover {
    color: var(--color-text);
}

.auth-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/*
 * Orphan-payment-pending badge on the host-app "Payment Admin" tab.
 * Rendered by admin.php when getOrphanInvoiceCount() > 0. Background
 * #d63031 on white text = 5.71:1 contrast (WCAG 2.2 SC 1.4.3 AA).
 * Mirror of payment_solution's .admin-nav-badge for visual continuity
 * across the host-admin tab and the payment-admin sidebar.
 */
.admin-tab-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    background: #d63031;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 0.65rem;
    vertical-align: middle;
}

.auth-heading {
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1.5px solid var(--color-border);
    font-size: 1.25rem;
}

.auth-link {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.auth-link a {
    color: var(--color-primary);
    text-decoration: none;
}

.auth-link a:hover {
    text-decoration: underline;
}

.auth-form {
    background: var(--color-surface);
    padding: 2rem 1.75rem;
    border: 1.5px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.auth-form .form-group {
    margin-bottom: 1.25rem;
}

/* Legacy support: auth-form inputs without .form-input class */
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.5;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.auth-form input[type="text"]:hover,
.auth-form input[type="email"]:hover,
.auth-form input[type="password"]:hover {
    border-color: var(--color-text-muted);
}

.auth-form input:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 88, 202, 0.15);
    background: var(--color-surface);
}

.theme-dark .auth-form input:focus,
.high-contrast .auth-form input:focus {
    box-shadow: 0 0 0 3px rgba(94, 187, 255, 0.4);
}

.btn-full {
    width: 100%;
    margin-top: 0.5rem;
}

/* User nav */
.user-nav {
    display: flex;
    flex-wrap: nowrap;       /* never push items onto a second line */
    align-items: center;
    gap: 0.75rem;
    /* Allow the nav strip to shrink inside the header flex row and scroll
       horizontally when translated labels are wider than available space.
       This prevents layout shifts on language change without wrapping.
       Higher grow factor (3) gives the user-nav priority over siblings; the
       shrink factor (2) lets it yield first when overflow is unavoidable. */
    flex: 3 2 0%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    /* Hide the scrollbar visually — users can still scroll via touch/drag */
    scrollbar-width: none;
    flex-direction: row;
    justify-content: flex-end;
}

.user-nav::-webkit-scrollbar {
    display: none;
}

.user-nav .user-name {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;     /* prevent username from wrapping */
    flex-shrink: 0;
}

.user-nav a {
    color: var(--color-header-text);
    text-decoration: none;
    opacity: 0.85;
    font-size: 0.9rem;
    white-space: nowrap;     /* prevent link text from breaking mid-word */
    flex-shrink: 0;
}

/* Active page indicator — works with aria-current="page" on the link */
.user-nav a[aria-current="page"] {
    opacity: 1;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.user-nav a:hover {
    opacity: 1;
    text-decoration: underline;
}

.logout-form {
    display: inline;
    margin: 0;
    padding: 0;
    flex-shrink: 0;          /* keep logout button in the flex row, unshrunk */
}

.logout-btn {
    background: none;
    border: none;
    color: var(--color-header-text);
    text-decoration: none;
    opacity: 0.85;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    line-height: inherit;
    white-space: nowrap;     /* prevent "Log out" from splitting across lines */
}

.logout-btn:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Header title link */
.header-title-link {
    color: inherit;
    text-decoration: none;
}

.header-title-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Mobile nav toggle (hamburger) */
.nav-toggle {
    display: none;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius, 6px);
    color: var(--color-header-text);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
    background: rgba(255,255,255,0.2);
}
.nav-toggle[aria-expanded="true"] {
    background: rgba(255,255,255,0.25);
}

/* Section navigation bar */
.section-nav {
    background: var(--color-surface);
    border-bottom: 1.5px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.section-nav .container {
    padding-top: 0;
    padding-bottom: 0;
}

.section-nav-list {
    display: flex;
    list-style: none;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.section-nav-list::-webkit-scrollbar {
    display: none;
}

.section-nav-list li {
    flex-shrink: 0;
}

.section-nav-list a {
    display: block;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.section-nav-list a:hover {
    color: var(--color-text);
    border-bottom-color: var(--color-border);
}

.section-nav-list a.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Primary site navigation (Main Nav)
   Sits below <header role="banner"> on every authenticated page.
   Provides quick access to the main site sections. */
.main-nav {
    background: var(--color-surface);
    border-bottom: 1.5px solid var(--color-border);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
    position: relative;
    z-index: 90;
}

.main-nav .container {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

.main-nav-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 6px);
    color: var(--color-text);
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font: inherit;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    margin: 0.5rem 0;
}

.main-nav-toggle:hover,
.main-nav-toggle:focus-visible {
    background: var(--color-bg);
}

.main-nav-toggle[aria-expanded="true"] {
    background: var(--color-bg);
}

.main-nav-toggle-label {
    font-size: 0.9375rem;
    font-weight: 600;
}

/* The primary nav carries 10 links (Dashboard … Help). Their combined
   width EXCEEDS the 1168px content box of .container (max-width 1200px
   minus padding) in EVERY locale — measured 1409px in en, 1423px in de,
   1655px in fr — so a single-row layout is impossible at any desktop
   viewport, not just narrow ones. The previous `flex-wrap: nowrap` +
   `overflow-x: auto` + `scrollbar-width: none` combination therefore
   clipped the trailing links (History/Help in en+de, the last three in
   fr) behind a DELIBERATELY INVISIBLE scroller on every screen size,
   including 1920px — a link the user cannot see and has no affordance
   to reach is a lost site section (WCAG 2.4.5 Multiple Ways / 1.4.10
   Reflow). Shrinking the padding cannot fix this: even at 0.5rem the
   English row still measures 1169px.

   The nav therefore WRAPS. Overflow of the list is never hidden, so
   every link stays reachable at every width, in all 13 locales, and at
   200% text zoom (1.4.4). Horizontal padding is 1rem rather than the
   original 1.25rem, which shortens the wrapped second row without
   touching the 44px-tall touch target. Below 768px the media query
   further down replaces this entirely with the hamburger + column
   layout, so wrapping only governs the ≥769px range. */
.main-nav-list {
    display: flex;
    list-style: none;
    gap: 0;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    overflow-x: visible;
}

.main-nav-item {
    flex-shrink: 0;
}

.main-nav-link {
    display: block;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
    white-space: nowrap;
}

.main-nav-link:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-border);
    text-decoration: none;
}

.main-nav-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.main-nav-link.active,
.main-nav-link[aria-current="page"] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Dashboard / Help TOC — Bootstrap-style right-side anchor navigation (≥ 1100px).
   On smaller viewports the .section-nav stays as a horizontal sticky bar.
   Scroll behavior: starts at top: 13rem and tracks the page scroll until it
   reaches the viewport top, then sticks at top: 2rem. The is-stuck class is
   toggled by theme.js's initDashboardTocSticky() handler.
   Same rules apply to .section-nav.help-toc (help.php) so the Help page
   inherits identical sticky behavior. */
@media (min-width: 1100px) {
    .section-nav.dashboard-toc,
    .section-nav.help-toc {
        position: fixed;
        top: 13rem;
        right: 1.5rem;
        width: 14rem;
        max-height: calc(100vh - 6rem);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius, 6px);
        padding: 0.75rem;
        box-shadow: var(--shadow-md);
        overflow-y: auto;
        z-index: 50;
        transition: top 0.15s linear;
    }
    .section-nav.dashboard-toc.is-stuck,
    .section-nav.help-toc.is-stuck {
        top: 2rem;
    }
    .section-nav.dashboard-toc .container,
    .section-nav.help-toc .container {
        padding: 0;
    }
    .section-nav.dashboard-toc .section-nav-list,
    .section-nav.help-toc .section-nav-list {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.125rem;
    }
    .section-nav.dashboard-toc .section-nav-list a,
    .section-nav.help-toc .section-nav-list a {
        border-bottom: 0;
        border-left: 3px solid transparent;
        padding: 0.4rem 0.5rem 0.4rem 0.75rem;
        text-transform: none;
        letter-spacing: 0;
        font-size: 0.875rem;
    }
    .section-nav.dashboard-toc .section-nav-list a:hover,
    .section-nav.help-toc .section-nav-list a:hover {
        border-left-color: var(--color-border);
        border-bottom-color: transparent;
    }
    .section-nav.dashboard-toc .section-nav-list a.active,
    .section-nav.help-toc .section-nav-list a.active {
        border-left-color: var(--color-primary);
        border-bottom-color: transparent;
    }
    /* Reserve space on the right of main content for the floating TOC */
    body:has(.section-nav.dashboard-toc) main#main-content,
    body:has(.section-nav.help-toc) main#main-content {
        padding-right: 16rem;
    }
}

/* Filter Bar */
.filter-bar {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 0.5rem);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.filter-group-reporters {
    flex: 1;
    min-width: 200px;
}
.filter-group-actions {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: flex-end;
    padding-bottom: 0.125rem;
}
.filter-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.filter-input {
    min-width: 150px;
    max-width: 200px;
}

/* Date preset buttons */
.filter-group-presets { min-width: 0; }
.filter-presets {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.btn-xs {
    font-size: 0.6875rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius, 0.375rem);
    line-height: 1.4;
    /* WCAG 2.5.8 (AA, WCAG 2.2): touch target must be ≥ 24×24 CSS px.
       Without min-height the .btn-preset filter chips render at ~23.8px tall
       (11px text × 1.4 + 0.2rem×2 padding + 1px border×2 ≈ 23.8). */
    min-height: 24px;
}
.btn-preset {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition, 0.15s ease);
    white-space: nowrap;
}
.btn-preset:hover, .btn-preset:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light, rgba(37, 99, 235, 0.06));
}
.btn-preset.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Custom Multi-select Dropdown */
.multiselect {
    position: relative;
    min-width: 220px;
    max-width: 400px;
}
.multiselect-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    background: var(--color-bg);
    width: 100%;
    text-align: left;
    min-height: 2.375rem;
}
.multiselect-trigger[aria-expanded="true"] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light, rgba(37, 99, 235, 0.15));
}
.multiselect-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
}
.multiselect-chevron {
    flex-shrink: 0;
    transition: transform var(--transition, 0.15s ease);
}
.multiselect-trigger[aria-expanded="true"] .multiselect-chevron {
    transform: rotate(180deg);
}
.multiselect-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 240px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15));
    z-index: 100;
    max-height: 320px;
    overflow: hidden;
    flex-direction: column;
    display: none;
}
.multiselect.open .multiselect-dropdown {
    display: flex;
}
.multiselect-header {
    padding: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
.multiselect-search {
    width: 100%;
    font-size: 0.8125rem;
    padding: 0.375rem 0.625rem;
}
.multiselect-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-hover, rgba(0,0,0,0.02));
}
.multiselect-btn-all,
.multiselect-btn-none {
    flex: 1;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 0.375rem);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    transition: all var(--transition, 0.15s ease);
}
.multiselect-btn-all:hover,
.multiselect-btn-none:hover {
    background: var(--color-primary-light, rgba(37, 99, 235, 0.08));
    border-color: var(--color-primary);
}
.multiselect-options {
    overflow-y: auto;
    max-height: 220px;
    padding: 0.25rem 0;
}
.multiselect-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    transition: background-color var(--transition, 0.15s ease);
    font-size: 0.8125rem;
    user-select: none;
}
.multiselect-option:hover {
    background: var(--color-bg-hover, rgba(0,0,0,0.04));
}
.multiselect-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.multiselect-checkbox-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-bg);
    transition: all var(--transition, 0.15s ease);
    position: relative;
}
.multiselect-option input[type="checkbox"]:checked + .multiselect-checkbox-icon {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.multiselect-option input[type="checkbox"]:checked + .multiselect-checkbox-icon::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.multiselect-option input[type="checkbox"]:focus-visible + .multiselect-checkbox-icon {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.multiselect-option-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.multiselect-option[aria-selected="true"] {
    font-weight: 600;
}
.multiselect-no-results {
    padding: 0.75rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-style: italic;
}

.filter-active-info {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
}
.filter-active-info .icon {
    flex-shrink: 0;
}

/* Sortable Tables */
.sortable-table th[data-sort] {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background-color var(--transition, 0.15s ease);
}
.sortable-table th[data-sort]:hover {
    background-color: var(--color-bg-hover, rgba(0,0,0,0.04));
}
.sortable-table th[data-sort]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
.sort-indicator {
    font-size: 0.75rem;
    opacity: 0.8;
}
.sortable-table th[aria-sort="ascending"],
.sortable-table th[aria-sort="descending"] {
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .user-nav {
        display: none;
        width: 100%;
        /* In mobile column layout, undo the desktop horizontal-scroll setup */
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding: 0.75rem 0 0.25rem;
        border-top: 1px solid rgba(255,255,255,0.2);
        order: 4;
        max-height: 70vh;
        overflow-x: visible;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .user-nav.nav-open {
        display: flex;
    }

    .user-nav a,
    .user-nav .user-name,
    .user-nav .logout-btn {
        font-size: 1rem;
        padding: 0.5rem 0;
        /* In vertical layout, allow wrapping of very long translated strings */
        white-space: normal;
    }

    .user-nav .theme-toggle {
        align-self: flex-start;
        margin: 0.25rem 0;
    }

    .section-nav-list a {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    /* Main nav on mobile: show toggle button, collapse list under it */
    .main-nav .container {
        flex-direction: column;
        align-items: stretch;
    }
    .main-nav-toggle {
        display: flex;
    }
    .main-nav-list {
        display: none;
        flex-direction: column;
        /* Column layout stacks one link per row already; wrapping would be a
           no-op here but is switched off so the collapsed menu can never
           produce a second column. */
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
    }
    .main-nav-list.nav-open {
        display: flex;
    }
    .main-nav-link {
        padding: 0.75rem 0.5rem;
        border-bottom: 1px solid var(--color-border);
    }
    .main-nav-link.active,
    .main-nav-link[aria-current="page"] {
        border-bottom-color: var(--color-primary);
    }

    .filter-controls {
        flex-direction: column;
    }
    .filter-input {
        max-width: 100%;
        width: 100%;
    }
    .filter-select {
        max-width: 100%;
        width: 100%;
    }
    .multiselect {
        max-width: 100%;
        width: 100%;
    }
    .multiselect-dropdown {
        min-width: 100%;
    }
}

/* Admin plan selector */
.plan-select {
    padding: 0.2rem 0.4rem;
    font-size: 0.8125rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

/* Profile Form */
.profile-form {
    background: var(--color-surface);
    padding: 1.75rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    max-width: 540px;
}

/* Legacy support: profile-form inputs without .form-input class */
.profile-form input[type="text"],
.profile-form input[type="email"],
.profile-form input[type="password"],
.profile-form input[type="number"] {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.5;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.profile-form input[type="text"]:hover,
.profile-form input[type="email"]:hover,
.profile-form input[type="password"]:hover,
.profile-form input[type="number"]:hover {
    border-color: var(--color-text-muted);
}

.profile-form input:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 88, 202, 0.15);
    background: var(--color-surface);
}

.theme-dark .profile-form input:focus,
.high-contrast .profile-form input:focus {
    box-shadow: 0 0 0 3px rgba(94, 187, 255, 0.4);
}

.inline-form {
    display: inline;
}

/* Admin Actions row: keep per-row action buttons on a single horizontal line
 * (Promote/Demote | Verify/Unverify | Switch User | Flush cache | Delete on
 * the user table; Activate/Deactivate | View acks | Delete on the messages
 * table). flex-wrap:nowrap forces single-row layout; overflow-x:auto lets
 * the row scroll horizontally on narrow viewports without breaking the
 * promise that all actions appear inline. */
.admin-actions-row {
    display: flex;
    gap: 0.25rem;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
}

.btn-danger {
    background: var(--color-danger);
    color: #ffffff;
    border-color: var(--color-danger);
}

.btn-danger:hover {
    background: #bb2d3b;
    border-color: #bb2d3b;
}

.theme-dark .btn-danger:hover,
.high-contrast .btn-danger:hover {
    background: #ff4444;
    border-color: #ff4444;
}

/* Footer */
footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: 1.25rem 0;
    text-align: center;
    font-size: 0.8125rem;
    margin-top: auto;
    border-top: 1.5px solid var(--color-border);
}

/* Pagination */
.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.per-page-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pagination {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.pagination-info {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.pagination-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    font-weight: 700;
    color: var(--color-bg);
    background: var(--color-primary);
    border-radius: var(--radius);
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    color: var(--color-primary);
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: background 0.15s, color 0.15s;
}

.pagination-link:hover {
    background: var(--color-primary);
    color: var(--color-bg);
}

/* Utility classes to replace inline styles */
.sys-msg-date {
    color: var(--color-text-muted);
}

.sys-msg-body {
    margin: 0.5rem 0 0.75rem;
}

.sys-msg-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.sys-msg-checkbox-label input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.sys-msg-checkbox-wrapper {
    margin-bottom: 0.5rem;
}

.form-inline {
    display: inline;
}

.ip-limit-note {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.ml-sm {
    margin-left: 0.5em;
}

/* Responsive */
@media (max-width: 768px) {
    header h1 { font-size: 1.35rem; }
    h2 { font-size: 1.25rem; }
    .dashboard-cards { grid-template-columns: repeat(2, 1fr); }
    .card-value { font-size: 1.5rem; }
    td, th { padding: 0.5rem 0.625rem; font-size: 0.875rem; }
}

@media (max-width: 480px) {
    .dashboard-cards { grid-template-columns: 1fr; }
    .detail-meta { grid-template-columns: 1fr; }
    .detail-meta dt { margin-top: 0.5rem; }
}

/* Theme Switcher - 3-state toggle */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 100px;
    padding: 2px;
    gap: 2px;
    vertical-align: middle;
}

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
    padding: 0;
    line-height: 1;
}

.theme-toggle-btn svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.theme-toggle-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.15);
}

.theme-toggle-btn.active {
    background: rgba(255,255,255,0.25);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.theme-toggle-btn:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* Keep .theme-select for lang dropdown only */
.theme-select {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.1);
    color: var(--color-header-text);
    cursor: pointer;
    font-weight: 500;
}

.theme-select:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.theme-select option {
    background: var(--color-surface);
    color: var(--color-text);
}

/* Admin user uploads inline table */
.user-uploads-row td { padding: 0.25rem 0.5rem !important; }
.inner-table { font-size: 0.9em; border: 1px solid var(--color-border); border-radius: var(--radius); }
.inner-table th { background: var(--color-bg); font-size: 0.85em; padding: 0.4rem 0.6rem; }
.inner-table td { padding: 0.35rem 0.6rem; }
.chevron-icon { transition: transform 0.2s ease; vertical-align: middle; }

/* === Email Header Analyzer === */
.section-description { color: var(--color-text-muted); margin-bottom: 1.5rem; }
.header-textarea {
    font-family: monospace; font-size: 0.85rem;
    min-height: 150px; background: var(--color-surface);
}
.form-help { display: block; margin-top: 0.4rem; color: var(--color-text-muted); font-size: 0.8rem; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }

.auth-overview {
    padding: 1rem 1.5rem; border-radius: var(--radius); margin-bottom: 1.5rem; text-align: center;
}
.auth-overview-excellent { background: var(--color-success-light); border: 2px solid var(--color-success); }
.auth-overview-good { background: var(--color-primary-light); border: 2px solid var(--color-primary); }
.auth-overview-warning { background: var(--color-warning-bg); border: 2px solid var(--color-warning); }
.auth-overview-danger { background: var(--color-danger-light); border: 2px solid var(--color-danger); }
.auth-score-badge { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.auth-score-number { font-size: 2rem; font-weight: 700; color: var(--color-text); }
.auth-score-label { font-size: 1rem; color: var(--color-text-muted); }

.auth-badges {
    display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem;
}
.auth-badge {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    padding: 1rem 1.5rem; border-radius: var(--radius); min-width: 100px;
    border: 2px solid var(--color-border); transition: transform var(--transition), box-shadow var(--transition);
}
.auth-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.auth-badge-pass { border-color: var(--color-success); background: var(--color-success-light); }
.auth-badge-fail { border-color: var(--color-danger); background: var(--color-danger-light); }
.auth-badge-missing { border-color: var(--color-text-muted); background: var(--color-bg); }
.auth-badge-icon { font-size: 1.5rem; font-weight: bold; }
.auth-badge-pass .auth-badge-icon { color: var(--color-success); }
.auth-badge-fail .auth-badge-icon { color: var(--color-danger); }
.auth-badge-missing .auth-badge-icon { color: var(--color-text-muted); }
.auth-badge-label { font-weight: 600; font-size: 0.9rem; color: var(--color-text); }
.auth-badge-result { font-size: 0.8rem; color: var(--color-text-muted); text-transform: uppercase; }

.routing-summary { margin-top: 0.5rem; color: var(--color-text-muted); text-align: center; }
.tls-ok { color: var(--color-success); font-weight: 600; }
.tls-partial { color: var(--color-warning); font-weight: 600; }

.header-details { margin: 0; }
.header-detail-row { display: flex; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.header-detail-row:last-child { border-bottom: none; }
.header-detail-row dt { font-weight: 600; min-width: 140px; flex-shrink: 0; color: var(--color-text); }
.header-detail-row dd { margin: 0; word-break: break-all; color: var(--color-text); flex: 1; }

.auth-detail-block { margin-bottom: 1.5rem; }
.auth-detail-block h4 { margin-bottom: 0.5rem; font-size: 1rem; color: var(--color-text); }

.status-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; }
.status-pass { background: var(--color-success-light); color: var(--color-success); border: 1px solid var(--color-success); }
.status-fail { background: var(--color-danger-light); color: var(--color-danger); border: 1px solid var(--color-danger); }
.status-warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning); }
.no-data { color: var(--color-text-muted); font-style: italic; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.raw-header {
    background: var(--color-bg); padding: 0.75rem; border-radius: var(--radius);
    font-size: 0.8rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all;
    border: 1px solid var(--color-border); margin-top: 0.5rem; color: var(--color-text);
}

/* === Domain Checker === */
.form-row-inline { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.form-group-grow { flex: 1; min-width: 200px; }
.form-group-btn { flex-shrink: 0; padding-bottom: 0.15rem; }
.optional { font-weight: normal; color: var(--color-text-muted); font-size: 0.8rem; }

.dns-record-box {
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 0.75rem 1rem; margin-bottom: 1rem; overflow-x: auto;
}
.dns-record-box code { font-size: 0.85rem; word-break: break-all; color: var(--color-text); }

.dns-issues, .dns-recs { margin-top: 0.75rem; }
.dns-issue, .dns-rec { margin: 0.35rem 0; font-size: 0.9rem; }
.dns-issue .status-badge, .dns-rec .status-badge { margin-right: 0.5rem; }

.checker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }

.dns-generator-link { margin-top: 0.75rem; }
.dns-generator-link .btn-sm { font-size: 0.85rem; padding: 0.35rem 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.dns-generator-link .btn-outline { border: 1.5px solid var(--color-primary); color: var(--color-primary); background: transparent; border-radius: var(--radius); text-decoration: none; transition: var(--transition); }
.dns-generator-link .btn-outline:hover, .dns-generator-link .btn-outline:focus-visible { background: var(--color-primary); color: #fff; }
.dns-generator-hint { font-size: 0.85rem; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.dns-generator-hint a { color: var(--color-primary); text-decoration: underline; }

/* === DNS Generator === */
.gen-tabs {
    display: flex; gap: 0.25rem; margin-bottom: 1.5rem; flex-wrap: wrap;
    border-bottom: 2px solid var(--color-border); padding-bottom: 0;
}
.gen-tab {
    padding: 0.6rem 1.2rem; border-radius: var(--radius) var(--radius) 0 0;
    text-decoration: none; font-weight: 600; font-size: 0.9rem;
    color: var(--color-text-muted); background: transparent;
    border: 1px solid transparent; border-bottom: none;
    transition: color var(--transition), background var(--transition);
    margin-bottom: -2px;
}
.gen-tab:hover { color: var(--color-primary); background: var(--color-primary-light); }
.gen-tab-active {
    color: var(--color-primary); background: var(--color-surface);
    border-color: var(--color-border); border-bottom-color: var(--color-surface);
}
.gen-card {
    padding: 2rem;
}
.gen-card h3 {
    margin-bottom: 0.25rem;
}
.gen-card .help-text {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}
.gen-form {
    margin-bottom: 1.5rem;
}
.gen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.form-group-full { grid-column: 1 / -1; }
.gen-form .form-help {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.gen-output {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}
.gen-output h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--color-primary);
}
.gen-output h4 + .gen-instruction {
    margin-top: -0.5rem;
}
.gen-instruction {
    margin-bottom: 0.75rem;
}
.gen-instruction p {
    margin: 0.3rem 0;
    font-size: 0.9375rem;
}
.gen-instruction strong {
    min-width: 6rem;
    display: inline-block;
}
.gen-record-box {
    position: relative;
    padding-right: 5rem;
}
.btn-copy {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
}
.btn-copied {
    background: var(--color-success) !important;
    color: #fff !important;
    border-color: var(--color-success) !important;
}
.gen-steps {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}
.gen-steps ol {
    padding-left: 1.5rem;
}
.gen-steps li {
    margin: 0.5rem 0;
    line-height: 1.5;
}
/* VMC Guide */
.vmc-guide { border-top: 1px solid var(--color-border); padding-top: 1.5rem; }
.vmc-guide-title { margin: 0 0 0.5rem; font-size: 1.2rem; }
.vmc-section { margin-bottom: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.vmc-section-header { padding: 0.75rem 1rem; font-weight: 600; cursor: pointer; background: var(--color-surface); list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.vmc-section-header::before { content: '\25B6'; font-size: 0.7rem; transition: transform 0.2s; }
.vmc-section[open] > .vmc-section-header::before { transform: rotate(90deg); }
.vmc-section-header:hover { background: var(--color-primary-light); }
.vmc-section-body { padding: 0.75rem 1rem; }
.vmc-section-body p { margin: 0 0 0.75rem; line-height: 1.6; }
.vmc-section-body p:last-child { margin-bottom: 0; }
.vmc-step { margin-bottom: 1.25rem; }
.vmc-step:last-child { margin-bottom: 0; }
.vmc-step h5 { margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--color-primary); }
.vmc-step p { margin: 0 0 0.5rem; }
.vmc-step .dns-record-box { margin-top: 0.5rem; }
.vmc-step .dns-record-box code { white-space: pre-wrap; word-break: break-all; font-size: 0.8rem; }
.vmc-provider-list { margin: 0.5rem 0 0 1.5rem; }
.vmc-provider-list li { margin: 0.35rem 0; line-height: 1.5; }

.alert-info { background: var(--color-primary-light); border: 1px solid var(--color-primary); color: var(--color-text); padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; }

/* Details/Collapsible sections */
.details-section {
    margin-top: 1rem;
}

.details-summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.5rem 0;
    color: var(--color-text);
    transition: color var(--transition);
}

.details-summary:hover {
    color: var(--color-primary);
}

.details-content {
    margin-top: 0.75rem;
}

/* Code blocks */
.code-block {
    background: var(--color-bg);
    padding: 0.75rem;
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: 0.85rem;
    border: 1px solid var(--color-border);
}

.api-key-code {
    font-size: 0.95rem;
    word-break: break-all;
}

/* IMAP status */
.imap-status {
    margin-bottom: 1rem;
}

/* IMAP mailbox quota display */
.imap-quota-display {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 6px;
    border: 1px solid var(--border-color, #dee2e6);
}
.quota-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.quota-title {
    font-weight: 600;
    font-size: 0.9rem;
}
.quota-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.quota-bar-container {
    height: 8px;
    background: var(--border-color, #dee2e6);
    border-radius: 4px;
    overflow: hidden;
}
.quota-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.quota-bar-ok {
    background: var(--success-color, #28a745);
}
.quota-bar-warning {
    background: var(--warning-color, #ffc107);
}
.quota-bar-critical {
    background: var(--danger-color, #dc3545);
}
.quota-checked {
    display: block;
    margin-top: 0.3rem;
    color: var(--text-secondary);
}

/* Alert list (no margin, left padding) */
.alert-list {
    margin: 0;
    padding-left: 1.2em;
}

/* Conditional form groups (hidden by default, shown via JS) */
.form-group-conditional {
    display: none;
}

/* Admin-specific */
.admin-messages-section {
    margin-top: 1.5rem;
}

.msg-create-form {
    margin-top: 1rem;
    max-width: 600px;
}

.details-summary-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.auth-tabs-wide {
    max-width: none;
}

/* ─── Landing Page ────────────────────────────────────────────────────────── */

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-primary);
    color: #ffffff;
}

.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.125rem;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

.landing-page {
    background: var(--color-bg);
}

.landing-header {
    background: var(--color-header-bg);
    color: var(--color-header-text);
    padding: 1rem 0;
}

.landing-header .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.landing-header h1 {
    margin: 0;
    font-size: 1.5rem;
}

.landing-header .subtitle {
    margin: 0;
    opacity: 0.8;
    font-size: 0.875rem;
    flex: 1;
}

.landing-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.landing-nav .btn {
    font-size: 0.875rem;
    padding: 0.4rem 1rem;
}

.landing-nav .btn-outline {
    color: var(--color-header-text);
    border-color: var(--color-header-text);
}

.landing-nav .btn-outline:hover {
    background: var(--color-header-text);
    color: var(--color-header-bg);
}

/* WCAG 2.4.5 Multiple Ways: in-page anchor nav for the landing page.
   Provides the second discovery mechanism (alongside footer) so visitors
   can jump to features / how-it-works / pricing without scrolling. */
.landing-nav-anchor {
    color: var(--color-header-text);
    text-decoration: none;
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius);
}
.landing-nav-anchor:hover,
.landing-nav-anchor:focus-visible {
    text-decoration: underline;
    background: rgba(255, 255, 255, 0.1);
}

/* Hero */
.landing-hero {
    background: linear-gradient(135deg, var(--color-header-bg) 0%, #2d2d5e 100%);
    color: #ffffff;
    padding: 4rem 0;
    text-align: center;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 1rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 3rem;
}

.hero-actions .btn-outline {
    color: #ffffff;
    border-color: rgba(255,255,255,0.5);
}

.hero-actions .btn-outline:hover {
    background: rgba(255,255,255,0.15);
    border-color: #ffffff;
    color: #ffffff;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    opacity: 0.85;
}

.stat-icon {
    display: flex;
    align-items: center;
}

/* Sections */
.section-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 0.5rem;
    color: var(--color-text);
}

.section-subtitle {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

/* Features */
.landing-features {
    padding: 4rem 0;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.feature-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: transform var(--transition), box-shadow var(--transition);
}

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

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: var(--color-primary-light);
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
    color: var(--color-text);
}

.feature-card p {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
}

/* How It Works */
.landing-steps {
    padding: 4rem 0;
    background: var(--color-surface);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

.step-card {
    text-align: center;
    padding: 1.5rem;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.step-card h3 {
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
    color: var(--color-text);
}

.step-card p {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

/* Pricing */
.landing-pricing {
    padding: 4rem 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .landing-pricing .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.pricing-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    text-align: center;
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition);
}

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

.pricing-card-featured {
    border-color: var(--color-primary);
    border-width: 2px;
    box-shadow: var(--shadow-md);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-card h3 {
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
    color: var(--color-text);
}

.pricing-amount {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

.pricing-period {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
}

.pricing-features li {
    padding: 0.4rem 0;
    font-size: 0.9375rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}

.pricing-features li::before {
    content: "\2713";
    color: var(--color-success);
    font-weight: 700;
    margin-right: 0.5rem;
}

/* Why DMARC */
.landing-why {
    padding: 4rem 0;
    background: var(--color-surface);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.why-card {
    padding: 1.5rem;
    border-left: 4px solid var(--color-primary);
    background: var(--color-bg);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.why-card h3 {
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
    color: var(--color-text);
}

.why-card p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* CTA */
.landing-cta {
    padding: 4rem 0;
    text-align: center;
    background: linear-gradient(135deg, var(--color-header-bg) 0%, #2d2d5e 100%);
    color: #ffffff;
}

.landing-cta h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.landing-cta p {
    font-size: 1.125rem;
    opacity: 0.9;
    margin: 0 0 2rem;
}

.landing-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.landing-cta-actions .btn-outline {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

.landing-cta-actions .btn-outline:hover,
.landing-cta-actions .btn-outline:focus {
    background: #ffffff;
    color: var(--color-primary);
}

/* Footer */
.landing-footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.875rem;
}

.landing-footer p {
    margin: 0;
}

/* Landing responsive */
@media (max-width: 768px) {
    .landing-header .container {
        justify-content: center;
        text-align: center;
    }
    .landing-header .subtitle {
        width: 100%;
        text-align: center;
    }
    .landing-nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    .hero-title {
        font-size: 1.75rem;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }
    .hero-stats {
        gap: 1.5rem;
    }
    .section-title {
        font-size: 1.5rem;
    }
    .feature-grid,
    .steps-grid,
    .pricing-grid,
    .why-grid {
        grid-template-columns: 1fr;
    }
    .landing-hero,
    .landing-features,
    .landing-steps,
    .landing-pricing,
    .landing-why,
    .landing-cta {
        padding: 2.5rem 0;
    }
}

/* Confirm Modal */
.confirm-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    opacity: 0; pointer-events: none;
    transition: opacity var(--transition);
}
.confirm-modal-backdrop.active {
    opacity: 1; pointer-events: auto;
}
.confirm-modal {
    background: var(--color-surface); border-radius: var(--radius-lg);
    padding: 2rem; max-width: 420px; width: 90%;
    box-shadow: var(--shadow-lg);
    transform: scale(0.95);
    transition: transform var(--transition);
}
.confirm-modal-backdrop.active .confirm-modal {
    transform: scale(1);
}
.confirm-modal h3 { margin: 0 0 1rem; color: var(--color-text); }
.confirm-modal p { color: var(--color-text-muted); margin-bottom: 1.5rem; line-height: 1.5; }
.confirm-modal-actions {
    display: flex; gap: 0.75rem; justify-content: flex-end;
}

/* WCAG 2.2.1 Timing Adjustable — session timeout warning dialog
 * (assets/theme.js initSessionWarning, session_keepalive.php).
 * Uses native <dialog> for built-in focus-trap, role="dialog",
 * Esc-to-dismiss. The ::backdrop pseudo-element handles the
 * overlay shading without needing a wrapper div.
 *
 * Theming: respects the active CSS variables so light/dark/HC
 * themes render correctly. The card surface, body text colour,
 * and shadow scale all come from existing tokens — adding the
 * dialog touches no new theme code.
 */
dialog.session-warning-dialog {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    box-shadow: var(--shadow-lg);
}
dialog.session-warning-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
}
.session-warning-title {
    margin: 0 0 0.75rem;
    color: var(--color-text);
    font-size: 1.25rem;
    line-height: 1.3;
}
.session-warning-body {
    color: var(--color-text-muted);
    margin: 0 0 1.5rem;
    line-height: 1.55;
}
.session-warning-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.session-warning-actions .btn {
    /* Ensure the buttons meet WCAG 2.5.8 Target Size (≥24x24 CSS px)
     * even when the dialog is shown on small viewports. The .btn
     * baseline already provides this; the explicit min-height here
     * guards against a future .btn refactor accidentally shrinking
     * the click target inside the dialog. */
    min-height: 44px;
    min-width: 44px;
}

/* Help / knowledge-base page (help.php) */
.help-page article { max-width: 860px; margin: 0 auto; padding: 1.5rem 0 3rem; line-height: 1.65; }
/* WCAG 1.4.3 fix 2026-05-09(ab): the section uses <header class="help-hero">
   for an article intro, but the global `header { background: var(--color-header-bg);
   color: var(--color-header-text); }` selector (line ~233) was applying the dark
   nav-header chrome to it. Result: .help-notice em text (#5a6268 muted) on
   #1a1a2e dark hero bg = 2.74:1 — caught by axe-core. The overrides below
   restore the help-hero to in-article flow: transparent bg over body bg, body
   text colour, no chrome shadow. The existing 1px border-bottom is preserved. */
.help-hero { background: transparent; color: var(--color-text); box-shadow: none; padding: 1.5rem 0 1.25rem; border-bottom: 1px solid var(--color-border, #30363d); margin-bottom: 1.75rem; }
.help-hero h2 { font-size: 1.85rem; line-height: 1.2; margin: 0 0 0.75rem; }
.help-lede { font-size: 1.05rem; color: var(--color-text, #c9d1d9); margin: 0 0 0.5rem; }
.help-notice { font-size: 0.85rem; color: var(--color-text-muted, #8b949e); margin: 0.5rem 0 0; }
.help-page section { margin: 1.75rem 0; }
.help-page section h3 { font-size: 1.4rem; margin: 0 0 0.75rem; scroll-margin-top: 80px; }
.help-page section h4 { font-size: 1.1rem; margin: 1.25rem 0 0.5rem; color: var(--color-text, #c9d1d9); }
.help-page section p { margin: 0.5rem 0 0.9rem; }
.help-page section ul, .help-page section ol { padding-left: 1.5rem; margin: 0.5rem 0 1rem; }
.help-page section li { margin-bottom: 0.35rem; }
.help-page pre { background: var(--color-code-bg, #d5d6d8); border: 1px solid var(--color-border, #30363d); border-radius: 6px; padding: 0.9rem 1rem; overflow-x: auto; font-size: 0.825rem; line-height: 1.55; margin: 0.75rem 0 1.25rem; }
.help-page pre code { background: none; padding: 0; font-size: inherit; }
.help-page code { background: var(--color-code-bg, #d5d6d8); padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.875em; }
.help-dl dt { font-weight: 600; margin-top: 1rem; color: var(--color-text, #c9d1d9); }
.help-dl dd { margin: 0.25rem 0 0 0; padding-left: 1.25rem; color: var(--color-text-muted, #8b949e); }
.help-cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.btn-lg { padding: 0.7rem 1.25rem; font-size: 1rem; }
/* WCAG 1.4.3 fix 2026-05-09(ab): same root cause as .help-hero above — the
   <footer class="help-footer-meta"> was inheriting the global `footer` rule's
   dark bg (#1a1a2e) + footer-text colour. Result: muted text was 2.74:1 and
   the RFC-link blues were 1.81:1 — caught by axe-core. The override below
   restores the in-article meta line to body bg (transparent), letting the
   muted text colour pass on the page bg, and pinning links to the app's
   --color-link token (#0a58ca, 5.95:1 on bg) for design-system consistency. */
.help-footer-meta { background: transparent; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-border, #30363d); font-size: 0.85rem; color: var(--color-text-muted, #8b949e); }
.help-footer-meta a { color: var(--color-link, #0a58ca); }

/* In-page breadcrumb for help-cluster topic pages (loop 2026-05-18 km).
   Visual companion to the BreadcrumbList JSON-LD; sized to align with the
   860px-max-width article body. Uses --color-link for crumb links and
   matches the .help-page typography scale (font-size 0.85rem, same as
   .help-footer-meta). The CSS-generated ' › ' separator after each
   non-last crumb is `aria-hidden` via `content`-only insertion (decorative
   pseudo-element, not in the accessibility tree). */
.help-breadcrumb { max-width: 860px; margin: 0.5rem auto 0; padding: 0; font-size: 0.85rem; color: var(--color-text-muted, #8b949e); }
.help-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.help-breadcrumb li { display: inline-flex; align-items: center; }
.help-breadcrumb li + li::before { content: '›'; margin: 0 0.4rem; color: var(--color-text-muted, #8b949e); }
.help-breadcrumb a { color: var(--color-link, #0a58ca); text-decoration: none; }
.help-breadcrumb a:hover, .help-breadcrumb a:focus-visible { text-decoration: underline; }
.help-breadcrumb [aria-current="page"] { color: var(--color-text, #c9d1d9); }

/* Help comparison tables (used on .help-page topic pillars). Inherits
   from generic table styles where applicable; this rule sets sane defaults
   for the SPF qualifier comparison table and any future strict-vs-relaxed
   tables. Bordered, with header-row emphasis and zebra-striping for
   WCAG 1.4.3 contrast across alternating rows on the page background. */
.help-page .help-table { width: 100%; border-collapse: collapse; margin: 0.75rem 0 1.25rem; font-size: 0.92rem; }
.help-page .help-table th, .help-page .help-table td { padding: 0.5rem 0.7rem; border: 1px solid var(--color-border, #30363d); text-align: left; vertical-align: top; }
.help-page .help-table thead th { background: var(--color-code-bg, #d5d6d8); font-weight: 600; }
.help-page .help-table tbody tr:nth-child(even) td { background: rgba(0,0,0,0.02); }

/* Section title links (dashboard headings that link to detail pages) */
.section-title-link { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.15s; }
.section-title-link:hover, .section-title-link:focus { border-bottom-color: var(--color-primary, #58a6ff); }

/* Filter active note */
.filter-active-note { font-size: 0.9rem; color: var(--color-primary, #58a6ff); margin-bottom: 0.5rem; font-style: italic; }

/* Export modal overlay */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-overlay[hidden] { display: none; }
.modal-content { background: var(--color-bg, #0d1117); border: 1px solid var(--color-border, #30363d); border-radius: 8px; padding: 1.5rem; max-width: 500px; width: 90%; }
.modal-content h3 { margin-top: 0; margin-bottom: 0.75rem; }
.modal-content p { margin-bottom: 1rem; font-size: 0.9rem; color: var(--color-text-muted, #8b949e); }
.modal-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.modal-close { margin-top: 0.5rem; }

/* Wide mode for reports table */
.table-responsive.wide-mode { max-width: none; overflow-x: auto; }
.table-responsive.wide-mode table { min-width: 1200px; }

/* Admin impersonation banner */
.impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: #d32f2f;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 9999;
    flex-wrap: wrap;
}
.impersonation-banner-text {
    flex-shrink: 1;
}
.impersonation-banner-form {
    flex-shrink: 0;
}
.impersonation-back-btn {
    background: #fff;
    color: #d32f2f;
    border: 2px solid #fff;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
}
.impersonation-back-btn:hover,
.impersonation-back-btn:focus {
    background: transparent;
    color: #fff;
    border-color: #fff;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Print */
@media print {
    header, footer, .upload-form, .btn, .theme-select, .theme-toggle, .skip-link, .impersonation-banner { display: none; }
    body { background: #fff; color: #000; }
    table { border: 1px solid #000; }
    .text-success { color: #000; }
    .text-danger { color: #000; text-decoration: underline; }
}

/*
 * Reduced motion (WCAG 2.3.3 — Animation from Interactions, prefers-reduced-
 * motion). Users who enable the OS-level "reduce motion" preference get
 * vestibular-safe defaults: transitions collapse to 0.01ms (so state changes
 * still trigger transitionend listeners but are imperceptible), animations
 * complete in one iteration without looping, smooth scroll becomes auto, and
 * any large translate/scale/rotate effects collapse. We deliberately keep
 * opacity/color transitions short rather than zeroing them so focus rings
 * (box-shadow on :focus) and hover affordances still indicate interactive
 * state — research (Sara Soueidan, 2019) shows users with vestibular
 * disorders benefit from reduced motion, NOT removed feedback.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === PUBLIC DEMO DASHBOARD (dashboard_demo.php) === */
/* The .demo-banner sits at the top of the demo route and explains the
   "this is synthetic data" context with Register/Login CTAs. Visual
   treatment is intentionally STRONGER than the upgrade nudge banners
   (filled background, no border-left accent) because the demo context
   needs to be unmistakable — visitors should not confuse demo data
   with their own data on first glance. */
.demo-banner {
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-primary);
    color: #ffffff;
    border-radius: var(--radius);
}

/* Bottom-of-page CTA mirror of the top .demo-banner — flips the default
   top→bottom margin to a top margin so the section breathes away from the
   FAQ above it rather than from (nonexistent) content below. */
.demo-banner.demo-banner-bottom {
    margin: 2rem 0 0;
}

.demo-banner-inner {
    max-width: 60rem;
    margin: 0 auto;
}

.demo-banner-title {
    margin: 0 0 0.5rem;
    color: #ffffff;
    font-size: 1.25rem;
}

.demo-banner-body {
    margin: 0 0 1rem;
    color: #ffffff;
    line-height: 1.45;
}

.demo-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.demo-banner-actions .btn {
    background: #ffffff;
    color: var(--color-primary);
    border-color: #ffffff;
}

.demo-banner-actions .btn-primary {
    background: var(--color-success, #198754);
    border-color: var(--color-success, #198754);
    color: #ffffff;
}

.demo-banner-actions .btn:hover,
.demo-banner-actions .btn:focus {
    background: var(--color-primary-light, #e2e9f4);
    color: var(--color-primary);
}

.demo-banner-actions .btn-primary:hover,
.demo-banner-actions .btn-primary:focus {
    filter: brightness(1.1);
    color: #ffffff;
}

.demo-heading {
    margin: 1rem 0 1rem;
}

.demo-stats-card {
    /* Inherits .card spacing — only override the grid layout below. */
}

.demo-stats-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
}

.demo-stat {
    background: var(--color-bg-secondary, #f5f6f8);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}

.demo-stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}

.demo-stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-secondary, #555);
    margin-top: 0.25rem;
}

.demo-empty-state {
    color: var(--color-text-secondary, #555);
    font-style: italic;
    margin: 0;
}

/* Dark theme overrides. The CTAs invert to the dark surface so visual
   separation from the banner background remains strong. */
.theme-dark .demo-banner {
    background: #1a3a5c;
}

.theme-dark .demo-banner-actions .btn {
    background: #13132b;
    color: #6db3f2;
    border-color: #13132b;
}

.theme-dark .demo-banner-actions .btn:hover,
.theme-dark .demo-banner-actions .btn:focus {
    background: #1c233f;
    color: #6db3f2;
}

.theme-dark .demo-stat {
    background: rgba(255, 255, 255, 0.05);
}

.theme-dark .demo-stat-value {
    color: #6db3f2;
}

/* High-contrast theme: deep navy bg + bright cyan accents + white text.
   The CTAs use the same #000 / #ffff00 / #5ebbff palette as the rest
   of the HC theme. */
.high-contrast .demo-banner {
    background: #000000;
    color: #ffffff;
    border: 2px solid #5ebbff;
}

.high-contrast .demo-banner-title {
    color: #5ebbff;
}

.high-contrast .demo-banner-actions .btn {
    background: #000000;
    color: #5ebbff;
    border: 2px solid #5ebbff;
}

.high-contrast .demo-banner-actions .btn-primary {
    background: #5ebbff;
    color: #000000;
    border: 2px solid #5ebbff;
}

.high-contrast .demo-stat {
    background: #000000;
    border: 2px solid #5ebbff;
}

.high-contrast .demo-stat-value {
    color: #5ebbff;
}

.high-contrast .demo-stat-label {
    color: #ffffff;
}

/* DMARC Policy Outcomes — CSS-only stacked horizontal bar showing the
   none / quarantine / reject disposition breakdown. The bar is purely
   visual; the underlying numeric values live in the <dl> legend below
   so screen readers always see the data even when CSS fails. The bar
   itself carries `role="img"` + aria-label for AT users. Colors map
   semantically: green=delivered (good), amber=quarantine (warn),
   red=reject (block) — matching the .badge-success / .badge-warning /
   .badge-danger semantics used elsewhere in the dashboard. */
.demo-disposition-card {
    margin-bottom: 1.5rem;
}

.demo-disposition-bar {
    display: flex;
    width: 100%;
    height: 2.5rem;
    border-radius: 0.375rem;
    overflow: hidden;
    margin-bottom: 1rem;
    background: var(--color-bg-subtle, #f5f6f8);
    border: 1px solid var(--color-border, #e0e0e8);
}

.demo-disposition-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: width 0.3s ease-in-out;
}

.demo-disposition-none {
    background: #2c8a3d;
}

.demo-disposition-quarantine {
    background: #d97706;
}

.demo-disposition-reject {
    background: #b91c1c;
}

.demo-disposition-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 0;
    padding: 0;
}

.demo-disposition-legend-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.demo-disposition-legend-item dt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin: 0;
}

.demo-disposition-legend-item dd {
    margin: 0 0 0 1.5rem;
    color: var(--color-text-secondary, #555);
    font-variant-numeric: tabular-nums;
}

.demo-disposition-swatch {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

/* Dark theme — keep the same semantic colors (green/amber/red) but
   brighten them slightly so they pop against the dark page background. */
.theme-dark .demo-disposition-bar {
    background: #1c233f;
    border-color: #2d3a5f;
}

.theme-dark .demo-disposition-none {
    background: #4ade80;
    color: #0f1729;
}

.theme-dark .demo-disposition-quarantine {
    background: #fbbf24;
    color: #0f1729;
}

.theme-dark .demo-disposition-reject {
    background: #f87171;
    color: #0f1729;
}

.theme-dark .demo-disposition-legend-item dd {
    color: #b0b0c0;
}

/* High-contrast theme — flat black bars with bold colored borders;
   audited HC palette (#5ebbff / #ffff00 / #ff5050) used for the swatches. */
.high-contrast .demo-disposition-bar {
    background: #000000;
    border: 2px solid #5ebbff;
}

.high-contrast .demo-disposition-none {
    background: #00d27a;
    color: #000000;
}

.high-contrast .demo-disposition-quarantine {
    background: #ffff00;
    color: #000000;
}

.high-contrast .demo-disposition-reject {
    background: #ff5050;
    color: #000000;
}

.high-contrast .demo-disposition-legend-item dt {
    color: #ffffff;
}

.high-contrast .demo-disposition-legend-item dd {
    color: #ffffff;
}

/* Reduced motion: kill the width transition so users with
   prefers-reduced-motion don't see the bar grow on every page load. */
@media (prefers-reduced-motion: reduce) {
    .demo-disposition-segment {
        transition: none;
    }
}

/* Top Source IPs + Top monitored domains tables on the demo dashboard.
   Both render technical identifiers (IP addresses / domain names) in
   <code> elements, so they share the same monospaced + per-theme
   styling to keep the visual language consistent. Inherits the generic
   `table { … }` rule for layout; this block adds only the cell-level
   monospace + per-theme tweaks that distinguish the source-ip / domain
   widgets from the reporters / reports tables visually. */
.demo-source-ips-table code,
.demo-domains-table code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.9em;
    background: var(--color-bg-secondary);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    color: var(--color-text);
}

.theme-dark .demo-source-ips-table code,
.theme-dark .demo-domains-table code {
    background: rgba(255, 255, 255, 0.06);
    color: #e8e8f0;
}

.high-contrast .demo-source-ips-table code,
.high-contrast .demo-domains-table code {
    background: #000000;
    color: #ffffff;
    border: 1px solid #ffffff;
}

/* Demo compliance score card — JS-free gauge replacement.
   The authed dashboard's compliance widget uses a Chart.js canvas gauge;
   the demo route renders a CSS-only big-number + letter-grade box so the
   widget works with JavaScript disabled (search-engine crawlers + privacy-
   conscious browsers both benefit). Score-bar styling, .grade, .grade-{a..f},
   and the wrapping .compliance-wrapper grid are reused from the authed
   dashboard's CSS — only the gauge-replacement box needs new rules. */
.demo-compliance-grade-box {
    padding: 1rem 0.5rem;
    border-radius: 0.5rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
}

.demo-compliance-score-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.demo-compliance-score-number {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text);
}

.demo-compliance-score-max {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.theme-dark .demo-compliance-grade-box {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.high-contrast .demo-compliance-grade-box {
    background: #000000;
    border: 2px solid #ffffff;
}

.high-contrast .demo-compliance-score-number,
.high-contrast .demo-compliance-score-max {
    color: #ffffff;
}

/* Daily activity timeline — JS-free vertical-bar sparkline.
   The authed dashboard renders this trend as a Chart.js line graph;
   the demo route deliberately uses a CSS-only sparkline so the widget
   works with JavaScript disabled (search-engine crawlers + privacy-
   conscious browsers both benefit). Each bar's height comes from an
   inline `--bar-height: X%` custom property set in the markup; this
   stylesheet maps that token to `height: var(--bar-height)` plus
   per-theme color overrides. */
.demo-timeseries-card {
    margin-bottom: 1.5rem;
}

.demo-timeseries-bar {
    width: 100%;
    height: 6rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    background: var(--color-bg-subtle, #f5f6f8);
    border: 1px solid var(--color-border, #e0e0e8);
    margin-bottom: 1rem;
}

.demo-timeseries-bar-list {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.demo-timeseries-bar-day {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--bar-height, 2%);
    background: var(--color-primary);
    border-radius: 2px 2px 0 0;
    transition: opacity 0.15s ease-in-out;
}

.demo-timeseries-bar-day:hover,
.demo-timeseries-bar-day:focus-within {
    opacity: 0.75;
}

.demo-timeseries-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
}

.demo-timeseries-legend-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.demo-timeseries-legend-item dt {
    font-weight: 600;
    color: var(--color-text-secondary, #555);
    margin: 0;
}

.demo-timeseries-legend-item dd {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

/* Dark theme — brighter bars on the dark page background;
   audited 4.5:1 contrast against the dark card. */
.theme-dark .demo-timeseries-bar {
    background: #1c233f;
    border-color: #2d3a5f;
}

.theme-dark .demo-timeseries-bar-day {
    background: var(--color-primary);
}

.theme-dark .demo-timeseries-legend-item dt {
    color: #b0b0c0;
}

.theme-dark .demo-timeseries-legend-item dd {
    color: #e8e8f0;
}

/* High-contrast theme — flat black container with bold yellow bars
   (audited HC palette pair) for maximum visibility. */
.high-contrast .demo-timeseries-bar {
    background: #000000;
    border: 2px solid #5ebbff;
}

.high-contrast .demo-timeseries-bar-day {
    background: #ffff00;
    border: 1px solid #ffffff;
    border-bottom: none;
}

.high-contrast .demo-timeseries-legend-item dt {
    color: #ffffff;
}

.high-contrast .demo-timeseries-legend-item dd {
    color: #ffff00;
}

/* Authentication pass-rate trend — dual-row sparkline.
   Builds on the demo-timeseries pattern (inline `--bar-height: X%` read
   by `height: var(--bar-height)`) but renders TWO sparkline rows stacked
   vertically: DKIM (green semantics) above, SPF (blue semantics) below.
   Each row carries a label on the left (DKIM / SPF), the sparkline in
   the middle, and the weighted-average percentage on the right. Unlike
   the volume timeline above, these are rate-percentage bars (naturally
   0-100%) so no peak-normalization is needed. */
.demo-authtrend-card {
    margin-bottom: 1.5rem;
}

.demo-authtrend-row {
    display: grid;
    grid-template-columns: 3.5rem 1fr 3.5rem;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.demo-authtrend-row:last-child {
    margin-bottom: 0;
}

.demo-authtrend-row-label {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-secondary, #555);
}

.demo-authtrend-row-avg {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.demo-authtrend-bar {
    height: 3.5rem;
    padding: 0.375rem;
    border-radius: 0.375rem;
    background: var(--color-bg-subtle, #f5f6f8);
    border: 1px solid var(--color-border, #e0e0e8);
}

.demo-authtrend-bar-list {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.demo-authtrend-bar-day {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--bar-height, 2%);
    border-radius: 2px 2px 0 0;
    transition: opacity 0.15s ease-in-out;
}

.demo-authtrend-bar-day:hover,
.demo-authtrend-bar-day:focus-within {
    opacity: 0.75;
}

/* DKIM row — semantic green (delivers / passes). Matches the
   .demo-disposition-none green for visual rhyme. */
.demo-authtrend-bar-dkim .demo-authtrend-bar-day {
    background: #2c8a3d;
}

/* SPF row — semantic blue (info / accent). Distinguishes from DKIM
   at-a-glance without competing for "pass" semantic with the green. */
.demo-authtrend-bar-spf .demo-authtrend-bar-day {
    background: #0a58ca;
}

/* Dark theme — brighter pass-tone hues against the dark page background;
   audited 4.5:1 contrast against the dark card. */
.theme-dark .demo-authtrend-bar {
    background: #1c233f;
    border-color: #2d3a5f;
}

.theme-dark .demo-authtrend-row-label {
    color: #b0b0c0;
}

.theme-dark .demo-authtrend-row-avg {
    color: #e8e8f0;
}

.theme-dark .demo-authtrend-bar-dkim .demo-authtrend-bar-day {
    background: #4ade80;
}

.theme-dark .demo-authtrend-bar-spf .demo-authtrend-bar-day {
    background: #6db3f2;
}

/* High-contrast theme — flat black container with bold colored bars
   (audited HC palette: green/cyan pair for the two-stream distinction). */
.high-contrast .demo-authtrend-bar {
    background: #000000;
    border: 2px solid #5ebbff;
}

.high-contrast .demo-authtrend-row-label,
.high-contrast .demo-authtrend-row-avg {
    color: #ffffff;
}

.high-contrast .demo-authtrend-bar-dkim .demo-authtrend-bar-day {
    background: #00d27a;
    border: 1px solid #ffffff;
    border-bottom: none;
}

.high-contrast .demo-authtrend-bar-spf .demo-authtrend-bar-day {
    background: #5ebbff;
    border: 1px solid #ffffff;
    border-bottom: none;
}

/* ────────────────────────────────────────────────────────────────
   Demo FAQ accordion — visible Q&A section required for Google's
   FAQPage rich-result eligibility. Uses native <details>/<summary>
   so the accordion is WCAG-compliant out of the box (keyboard
   navigation + focus management + screen-reader announcements
   handled by the browser). The first item ships with `open` so
   page-loads always show ≥ 1 answer immediately — without that,
   the section reads as a wall of headings on first paint.
   ──────────────────────────────────────────────────────────────── */
.demo-faq-card {
    /* Inherits .card padding/border/background from the shared card class. */
}

.demo-faq-intro {
    margin: 0 0 1rem 0;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

.demo-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.demo-faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 6px);
    background: var(--color-bg);
    transition: border-color 0.15s ease;
}

.demo-faq-item[open] {
    border-color: var(--color-primary);
}

.demo-faq-question {
    cursor: pointer;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--color-text);
    list-style: none;
    position: relative;
    padding-right: 2.5rem;
}

/* Hide the default disclosure-triangle marker in WebKit + Firefox so we
   can render a custom chevron that rotates on open — purely visual,
   browsers still expose the expanded/collapsed state to screen readers
   via the <details> ARIA mapping. */
.demo-faq-question::-webkit-details-marker {
    display: none;
}

.demo-faq-question::after {
    content: '▸';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    transition: transform 0.15s ease;
    font-size: 0.875rem;
}

.demo-faq-item[open] .demo-faq-question::after {
    transform: translateY(-50%) rotate(90deg);
}

.demo-faq-question:hover {
    color: var(--color-primary);
}

.demo-faq-question:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.demo-faq-answer {
    padding: 0 1rem 1rem 1rem;
    color: var(--color-text);
    line-height: 1.6;
}

/* Dark theme — slightly elevated FAQ container against the dark page
   background so the accordion items are visually distinct from the
   surrounding card padding. */
.theme-dark .demo-faq-item {
    background: #1c233f;
    border-color: #2d3a5f;
}

.theme-dark .demo-faq-intro {
    color: #b0b0c0;
}

/* High-contrast theme — flat black accordion items with thick primary
   borders and white text. Open-state border switches to the brand
   accent (#5ebbff) for unmistakable focus indication. */
.high-contrast .demo-faq-item {
    background: #000000;
    border: 2px solid #ffffff;
}

.high-contrast .demo-faq-item[open] {
    border-color: #5ebbff;
}

.high-contrast .demo-faq-question {
    color: #ffffff;
}

.high-contrast .demo-faq-question::after {
    color: #5ebbff;
}

.high-contrast .demo-faq-question:hover,
.high-contrast .demo-faq-question:focus-visible {
    color: #5ebbff;
    outline: 2px solid #5ebbff;
}

.high-contrast .demo-faq-answer {
    color: #ffffff;
}

.high-contrast .demo-faq-intro {
    color: #ffffff;
}

/* Reduced motion: kill the chevron rotation transition so users with
   prefers-reduced-motion: reduce don't see the ▸ glyph rotate when an
   accordion item is opened. The `[open]` state still applies (the
   transformed end-state is unchanged); only the in-between animation
   is suppressed. Matches WCAG 2.3.3 (Animation from Interactions). */
@media (prefers-reduced-motion: reduce) {
    .demo-faq-question::after {
        transition: none;
    }
}

/* Admin Maintenance disclosure cards (loop eg).
   Each of the 8 maintenance forms (flush_dashboard_cache, flush_vies_cache,
   flush_dns_cache, flush_user_dashboard_cache, cleanup_orphaned_uploads,
   resend_verification_emails, recompute_compliance_scores,
   prune_old_audit_log) is wrapped in a <details> element so the
   Maintenance subsection collapses by default and admins can expand
   only the action they need. The previous .admin-maintenance-card .card
   rule chain still applies (each <details> retains both classes) — these
   selectors add the disclosure-trigger styling for the new <summary>
   child element. The disclosure markers are kept simple (▸ rotating to ▾)
   and visually inherit the page's color tokens so the per-theme palette
   (light/dark/high-contrast) auto-adapts without per-theme overrides. */
.admin-maintenance-summary {
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    user-select: none;
    list-style: none; /* hide the default disclosure triangle */
}
.admin-maintenance-summary::-webkit-details-marker {
    display: none; /* Safari/older Chromium use this pseudo-element instead of list-style */
}
.admin-maintenance-summary::before {
    content: '\25B8'; /* right-pointing small triangle */
    display: inline-block;
    margin-right: 0.5rem;
    color: var(--color-text-muted, currentColor);
    transition: transform 0.15s ease-out;
}
details.admin-maintenance-card[open] > .admin-maintenance-summary::before {
    transform: rotate(90deg);
}
.admin-maintenance-summary:focus-visible {
    outline: 2px solid var(--color-primary, #0a58ca);
    outline-offset: 3px;
    border-radius: 2px;
}
/* Spacing inside the disclosure body — the existing <p> + <form> children
   should breathe away from the summary when expanded. */
details.admin-maintenance-card[open] > .admin-maintenance-summary {
    margin-bottom: 0.75rem;
}

/* WCAG 2.3.3 — animation kill-switch for prefers-reduced-motion on the
   maintenance disclosure chevron. The [open] end-state still applies;
   only the rotation transition is suppressed. */
@media (prefers-reduced-motion: reduce) {
    .admin-maintenance-summary::before {
        transition: none;
    }
}