/* Forum modes other than light. The dark family (dim, dark, navy) is scoped to .forum-dark, which ForumsLayout puts
   on its wrapper from the mho-forum-theme cookie, so history articles, genealogy and other sections are never
   affected. Dim and navy add their own class, which keeps every dark rule and only changes the colour variables
   below. Sepia and green are tinted light modes sharing the .forum-tinted rules at the end of this file.
   The wrapper also gets data-bs-theme="dark" for Bootstrap tables and forms. Forum pages hold many inline
   colours, so the [style*=...] rules below remap the ones in use; add new ones here when markup changes. */

.forum-theme {
    min-height: 100vh;
}

.forum-dark {
    /* Surface colours, darkest first. Rules below use these so dim mode can lighten them all in one place. */
    --forum-bg: #15181d;
    --forum-surface: #1e232b;
    --forum-raised: #252b34;
    --forum-raised-2: #2d343e;
    --forum-line: #3a4250;
    --forum-line-strong: #4a5363;
    /* Text and links. */
    --forum-text: #e4e6ea;
    --forum-text-muted: #b8bec7;
    --forum-text-soft: #d0d4da;
    --forum-link: #9fc3ff;
    --forum-link-hover: #c4dbff;
    color-scheme: dark;
    background-color: var(--forum-bg);
    color: var(--forum-text);
    /* MudBlazor palette, redefined for everything inside the forum wrapper. Primary is lightened so text
       buttons and icons stay readable; filled primary buttons switch to dark text to match. */
    --mud-palette-primary: #9fb0f5;
    --mud-palette-primary-rgb: 159,176,245;
    --mud-palette-primary-text: #10142a;
    --mud-palette-primary-darken: #8597e8;
    --mud-palette-primary-lighten: #c0cbfa;
    --mud-palette-primary-hover: rgba(159,176,245,0.12);
    --mud-palette-info: #9fb0f5;
    --mud-palette-info-rgb: 159,176,245;
    --mud-palette-info-text: #10142a;
    --mud-palette-info-darken: #8597e8;
    --mud-palette-info-lighten: #c0cbfa;
    --mud-palette-info-hover: rgba(159,176,245,0.12);
    --mud-palette-secondary: var(--forum-text);
    --mud-palette-secondary-rgb: 228,230,234;
    --mud-palette-secondary-text: #15181d;
    --mud-palette-secondary-hover: rgba(228,230,234,0.10);
    --mud-palette-tertiary: var(--forum-text);
    --mud-palette-tertiary-text: #15181d;
    --mud-palette-dark: var(--forum-text-soft);
    --mud-palette-dark-rgb: 208,212,218;
    --mud-palette-dark-text: #15181d;
    --mud-palette-dark-hover: rgba(208,212,218,0.10);
    --mud-palette-success: #8bdc8e;
    --mud-palette-success-rgb: 139,220,142;
    --mud-palette-success-text: #10200f;
    --mud-palette-error: #ff7a90;
    --mud-palette-error-text: #2a0a10;
    --mud-palette-warning: #f0c94a;
    --mud-palette-warning-text: #2a2205;
    --mud-palette-black: #15181d;
    --mud-palette-white: var(--forum-text);
    --mud-palette-background: var(--forum-bg);
    --mud-palette-background-gray: var(--forum-surface);
    --mud-palette-surface: var(--forum-surface);
    --mud-palette-text-primary: var(--forum-text);
    --mud-palette-text-secondary: var(--forum-text-muted);
    --mud-palette-text-disabled: rgba(228,230,234,0.45);
    --mud-palette-action-default: #c4cad3;
    --mud-palette-action-default-hover: rgba(255,255,255,0.08);
    --mud-palette-action-disabled: rgba(228,230,234,0.30);
    --mud-palette-action-disabled-background: rgba(228,230,234,0.12);
    --mud-palette-lines-default: var(--forum-line);
    --mud-palette-lines-inputs: #6b7584;
    --mud-palette-table-lines: var(--forum-line);
    --mud-palette-table-striped: rgba(255,255,255,0.04);
    --mud-palette-table-hover: rgba(255,255,255,0.06);
    --mud-palette-divider: var(--forum-line);
    --mud-palette-divider-light: var(--forum-raised-2);
    --mud-palette-overlay-dark: rgba(0,0,0,0.6);
    /* Bootstrap overrides on top of data-bs-theme="dark". */
    --bs-body-bg: var(--forum-bg);
    --bs-body-color: var(--forum-text);
    --bs-link-color: var(--forum-link);
    --bs-link-color-rgb: 159,195,255;
    --bs-link-hover-color: var(--forum-link-hover);
    --bs-link-hover-color-rgb: 196,219,255;
    --bs-border-color: var(--forum-line);
}

/* Dim: the middle brightness. The same light text on blue-gray surfaces a step or two lighter than dark mode;
   body text stays above 10:1 contrast and secondary text above 6:1. */
.forum-dark.forum-dim {
    --forum-bg: #2a2f37;
    --forum-surface: #333944;
    --forum-raised: #3c4350;
    --forum-raised-2: #454d5b;
    --forum-line: #56606f;
    --forum-line-strong: #66707f;
}

/* Navy: dark blue surfaces in the banner's colour family, with the same light text as dark mode. */
.forum-dark.forum-navy {
    --forum-bg: #0f1730;
    --forum-surface: #16213f;
    --forum-raised: #1d2a50;
    --forum-raised-2: #25345f;
    --forum-line: #33467a;
    --forum-line-strong: #43588f;
}

/* The site banner keeps its look but loses its white frame and light surround. */
.forum-dark .top-banner {
    background: transparent;
}

.forum-dark .site-header {
    border-color: var(--forum-line);
    background: var(--forum-surface);
}

.forum-dark .site-header .primary-nav {
    scrollbar-color: #6b7584 var(--forum-surface);
}

.forum-dark .site-header .nav-track .nav-link {
    color: var(--forum-text-soft);
}

.forum-dark .site-header .nav-track .nav-link:hover {
    background: var(--forum-raised-2);
    color: #ffffff;
}

.forum-dark .site-header .nav-track .nav-link.active {
    background: #f7efdf;
    color: #202c45;
}

.forum-dark .page > .container-fluid a:not(.mud-button-root):not(.forumlink):not(.forumlinkicon):not(.mud-nav-link) {
    color: var(--forum-link);
}

.forum-dark .page > .container-fluid a:not(.mud-button-root):not(.forumlink):not(.forumlinkicon):hover {
    color: var(--forum-link-hover);
}

/* Keyboard focus ring for forum links, in both modes; matches the gold ring other sections use. */
.forum-theme .container-fluid a:focus-visible {
    outline: 3px solid #b98d3c;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Forum classes from site.css. */
.forum-dark .forumbackground {
    background-color: var(--forum-surface) !important;
}

.forum-dark .forumlightbackground {
    background-color: var(--forum-raised) !important;
}

.forum-dark .forumbutton,
.forum-dark .mainlightbackground,
.forum-dark .mainbutton {
    background-color: var(--forum-raised-2);
}

.forum-dark .forumborder,
.forum-dark .mainborder {
    border-color: var(--forum-line-strong) !important;
}

.forum-dark .forumlink,
.forum-dark .forumlink:hover,
.forum-dark .forumlinkicon,
.forum-dark .forumlinkicon:hover,
.forum-dark .mud-nav-link-text {
    color: var(--forum-text-soft);
}

.forum-dark .hoverunderline:hover {
    color: var(--forum-link);
}

.forum-dark div.quote {
    background-color: var(--forum-raised);
    border-color: #4f8fd6;
}

.forum-dark blockquote {
    border-left-color: #6b7584;
}

.forum-dark hr {
    border-color: var(--forum-line-strong);
    opacity: 1;
}

/* Site-wide navy and black accents from site.css, many marked !important. */
.forum-dark .articleTitle,
.forum-dark .articleTitleLink:hover {
    color: var(--forum-text);
}

.forum-dark .articleTitleLink {
    color: #9fb0f5;
}

.forum-dark .blue-foreground,
.forum-dark .mud-tab.mud-tab-active,
.forum-dark .mud-input-label {
    color: #9fb0f5 !important;
}

.forum-dark .mud-tab-slider {
    background-color: #9fb0f5 !important;
}

.forum-dark .mud-input-underline:after {
    border-bottom-color: #9fb0f5 !important;
}

.forum-dark .mud-input-outlined .mud-input-outlined-border,
.forum-dark .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: #6b7584 !important;
}

.forum-dark .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: #9fb0f5 !important;
}

/* Filled navy buttons (.blue-background) keep white text; a lighter navy separates them from the page. */
.forum-dark .blue-background {
    background: #34449a !important;
}

/* Bootstrap tables used for forum, thread and post lists. */
.forum-dark .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--forum-text);
    --bs-table-striped-bg: rgba(255,255,255,0.04);
    --bs-table-striped-color: var(--forum-text);
    --bs-table-hover-bg: rgba(255,255,255,0.07);
    --bs-table-hover-color: var(--forum-text);
    --bs-table-border-color: var(--forum-line);
}

/* Inline colours in forum markup. Text colours become light; light backgrounds become dark surfaces. */
.forum-dark [style*="color: #000000"],
.forum-dark [style*="color:#000000"],
.forum-dark [style*="color: black"] {
    color: var(--forum-text) !important;
}

.forum-dark [style*="color: #4b4b4b"],
.forum-dark [style*="color: #424242"],
.forum-dark [style*="color:#666"],
.forum-dark [style*="color: darkgray"],
.forum-dark [style*="color: #a0a0a0"] {
    color: var(--forum-text-muted) !important;
}

.forum-dark [style*="color: #778c99"],
.forum-dark font[color="#778c99"] {
    color: #a3b5c1 !important;
}

.forum-dark [style*="color: #279433"],
.forum-dark [style*="color:#279433"],
.forum-dark [style*="color: green"],
.forum-dark [style*="color: darkgreen"] {
    color: #6cc070 !important;
}

.forum-dark [style*="color: darkred"] {
    color: #ff8a8a !important;
}

.forum-dark [style*="color: #0162a6"] {
    color: var(--forum-link) !important;
}

/* The navy forum group bars keep white text and stay navy, slightly lifted from the page. */
.forum-dark [style*="background-color: #283573"] {
    background-color: #2c3a7e !important;
    border-bottom-color: var(--forum-bg) !important;
}

.forum-dark [style*="background-color: #e7e7e7"],
.forum-dark [style*="background-color: #e0e0e0"] {
    background-color: var(--forum-raised) !important;
}

.forum-dark [style*="background-color: #cfcfcf"] {
    background-color: var(--forum-line) !important;
}

.forum-dark [style*="background-color: white"],
.forum-dark [style*="background-color: #fafbff"] {
    background-color: var(--forum-surface) !important;
}

.forum-dark [style*="border-color: #ffffff"],
.forum-dark [style*="border-color: #dadfe2"] {
    border-color: var(--forum-line) !important;
}

.forum-dark [style*="border-color: #424242"] {
    border-color: var(--forum-line-strong) !important;
}

.forum-dark [style*="outline-color: #cfcfcf"] {
    outline-color: var(--forum-line) !important;
}

/* Search matches keep their yellow highlight with dark text. */
.forum-dark [style*="background-color: yellow"] {
    color: #15181d !important;
}

/* Radzen HTML editor (new post, reply, quote, PMs). site.css gives it a light grey with !important. */
.forum-dark .rz-html-editor,
.forum-dark .rz-html-editor-content,
.forum-dark .rz-html-editor-toolbar {
    background-color: var(--forum-raised) !important;
    color: var(--forum-text);
    border-color: var(--forum-line-strong);
}

.forum-dark .rz-html-editor-button,
.forum-dark .rz-html-editor-toolbar .rz-button,
.forum-dark .rz-html-editor-toolbar .rz-dropdown {
    background-color: var(--forum-raised-2);
    color: var(--forum-text);
}

/* Daily military history box (scoped CSS classes in DailyMilitaryHistory.razor.css). */
.forum-dark .history-day-kicker {
    color: #d2a96a;
}

.forum-dark .history-day-event {
    color: var(--forum-text);
}

.forum-dark .history-day-year,
.forum-dark .history-day-source a {
    color: #9fb0f5;
}

.forum-dark .history-day-source {
    color: var(--forum-text-muted);
}

/* Mode toggle in ForumHeader: shows the current mode's icon; a click moves on to the next mode. */
.forum-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 28px;
    height: 28px;
    margin-right: 6px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: #424242;
    vertical-align: middle;
    cursor: pointer;
}

.forum-theme-toggle:hover {
    background-color: rgba(0,0,0,0.06);
}

.forum-theme-toggle:focus-visible {
    outline: 2px solid #283573;
    outline-offset: 2px;
}

/* Icons sit in inline-flex spans so they centre in the button instead of resting on the text baseline. The wrapper's
   data-forum-mode picks which icon shows, so the server's first paint is already right. */
.forum-theme-toggle [class^="forum-theme-when-"] {
    display: none;
}

.forum-theme[data-forum-mode="light"] .forum-theme-when-light,
.forum-theme[data-forum-mode="sepia"] .forum-theme-when-sepia,
.forum-theme[data-forum-mode="green"] .forum-theme-when-green,
.forum-theme[data-forum-mode="dim"] .forum-theme-when-dim,
.forum-theme[data-forum-mode="dark"] .forum-theme-when-dark,
.forum-theme[data-forum-mode="navy"] .forum-theme-when-navy {
    display: inline-flex;
}

/* "Mode" matches the header's other link labels; the icon keeps its own colour. */
.forum-theme-toggle .forum-theme-label {
    font-size: 13px;
    color: #424242;
}

.forum-dark .forum-theme-toggle .forum-theme-label {
    color: var(--forum-text-soft);
}

/* Room for "Mode" from Bootstrap's md width up; below that the toggle stays a 28px circle. */
@media (min-width: 768px) {
    .forum-theme-toggle {
        padding: 0 6px;
    }
}

/* On phones the toggle and the menu button share a narrow header column (61px on the thread and reply
   pages at 390px). Keep them on one line, vertically centred, with the toggle the same 26px size as the
   menu button so both icons line up. */
@media (max-width: 767.98px) {
    .forum-theme-toggle {
        min-width: 26px;
        height: 26px;
        margin-right: 2px;
    }

    :has(> .forum-theme-toggle) {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    /* ForumHeader's phone-only wrapper around the menu button (d-inline d-md-none). */
    :has(> .forum-theme-toggle) > span.d-md-none {
        display: inline-flex !important;
        align-items: center;
    }
}

.forum-dark .forum-theme-toggle {
    color: #f0c94a;
}

.forum-dark .forum-theme-toggle:hover {
    background-color: rgba(255,255,255,0.08);
}

.forum-dark .forum-theme-toggle:focus-visible {
    outline-color: var(--forum-link);
}

/* Login page text boxes match the reply editor (#252b34) in dark mode, including when the browser autofills a saved login
   (autofill otherwise paints its own light background, so it is covered with an inset shadow). */
.forum-dark .forum-login-card .mud-input.mud-input-underline {
    background-color: var(--forum-raised);
    border-radius: 4px 4px 0 0;
}

.forum-dark .forum-login-card .mud-input > input.mud-input-root {
    padding-left: 8px;
    padding-right: 8px;
    background-color: var(--forum-raised);
    color: var(--forum-text);
}

.forum-dark .forum-login-card input:-webkit-autofill,
.forum-dark .forum-login-card input:-webkit-autofill:hover,
.forum-dark .forum-login-card input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--forum-raised) inset;
    -webkit-text-fill-color: var(--forum-text);
    caret-color: var(--forum-text);
}

/* In light mode the browser paints autofilled login boxes light blue; keep them white like the card. */
.forum-theme:not(.forum-dark) .forum-login-card input:-webkit-autofill,
.forum-theme:not(.forum-dark) .forum-login-card input:-webkit-autofill:hover,
.forum-theme:not(.forum-dark) .forum-login-card input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    -webkit-text-fill-color: #212121;
    caret-color: #212121;
}

/* Light mode: login boxes get a light gray border; the plain underline is dropped so the bottom edge isn't
   doubled, while the navy focus underline still shows which box is active. */
.forum-theme:not(.forum-dark) .forum-login-card .mud-input.mud-input-underline {
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    background-color: #ffffff;
}

.forum-theme:not(.forum-dark) .forum-login-card .mud-input.mud-input-underline:before {
    border-bottom: none;
}

.forum-theme:not(.forum-dark) .forum-login-card .mud-input > input.mud-input-root {
    padding-left: 8px;
    padding-right: 8px;
}

/* Green Save buttons (reply, new post, quote, PMs) set MudBlazor's Green.Darken4 inline, which is too dim on
   dark surfaces; use the same brighter green as the theme's success colour. */
.forum-dark [style*="color:#1b5e20" i] {
    color: #8bdc8e !important;
}

/* Tinted light modes, scoped to .forum-tinted. They mirror the light surfaces that the dark rules above remap,
   keeping dark text; .forum-sepia and .forum-green supply the colours. */
.forum-sepia {
    /* Warm parchment. */
    --forum-page: #f2e8d2;
    --forum-paper: #fbf5e6;
    --forum-paper-raised: #f3e9d2;
    --forum-paper-shade: #ece0c4;
    --forum-paper-line: #d8c8a6;
    --forum-ink: #33281b;
    --forum-ink-muted: #5e4c35;
    --forum-tint-rgb: 120,90,40;
}

.forum-green {
    /* Soft sage, easy on the eyes for long reading; text stays above 10:1 contrast. */
    --forum-page: #dce8d4;
    --forum-paper: #edf4e8;
    --forum-paper-raised: #e2ecda;
    --forum-paper-shade: #d4e2ca;
    --forum-paper-line: #b6c9a9;
    --forum-ink: #22301f;
    --forum-ink-muted: #475a42;
    --forum-tint-rgb: 60,100,50;
}

.forum-tinted {
    background-color: var(--forum-page);
    color: var(--forum-ink);
    --mud-palette-background: var(--forum-page);
    --mud-palette-background-gray: var(--forum-paper-shade);
    --mud-palette-surface: var(--forum-paper);
    --mud-palette-text-primary: var(--forum-ink);
    --mud-palette-text-secondary: var(--forum-ink-muted);
    --mud-palette-lines-default: var(--forum-paper-line);
    --mud-palette-table-lines: var(--forum-paper-line);
    --mud-palette-table-striped: rgba(var(--forum-tint-rgb),0.06);
    --mud-palette-table-hover: rgba(var(--forum-tint-rgb),0.10);
    --mud-palette-divider: var(--forum-paper-line);
    --mud-palette-divider-light: var(--forum-paper-shade);
    --bs-body-bg: var(--forum-page);
    --bs-body-color: var(--forum-ink);
    --bs-border-color: var(--forum-paper-line);
}

/* Green swaps the navy forum group bars for a deep forest green that sits with the sage page; the white text stays
   above 7:1 contrast. The bars set their navy inline with !important, which no stylesheet can override, so the green
   is painted as a background image on top of it. */
.forum-green [style*="background-color: #283573"] {
    background-image: linear-gradient(#3e5c3a, #3e5c3a);
}

.forum-tinted .site-header {
    border-color: var(--forum-paper-line);
    background: var(--forum-paper);
}

.forum-tinted .forumbackground {
    background-color: var(--forum-paper) !important;
}

.forum-tinted .forumlightbackground {
    background-color: var(--forum-paper-raised) !important;
}

.forum-tinted .forumbutton,
.forum-tinted .mainlightbackground,
.forum-tinted .mainbutton {
    background-color: var(--forum-paper-shade);
}

.forum-tinted .forumborder,
.forum-tinted .mainborder {
    border-color: var(--forum-paper-line) !important;
}

.forum-tinted div.quote {
    background-color: var(--forum-paper-raised);
}

.forum-tinted .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--forum-ink);
    --bs-table-striped-bg: rgba(var(--forum-tint-rgb),0.06);
    --bs-table-striped-color: var(--forum-ink);
    --bs-table-hover-bg: rgba(var(--forum-tint-rgb),0.10);
    --bs-table-hover-color: var(--forum-ink);
    --bs-table-border-color: var(--forum-paper-line);
}

.forum-tinted [style*="color: #4b4b4b"],
.forum-tinted [style*="color: #424242"],
.forum-tinted [style*="color:#666"],
.forum-tinted [style*="color: darkgray"],
.forum-tinted [style*="color: #a0a0a0"] {
    color: var(--forum-ink-muted) !important;
}

.forum-tinted [style*="background-color: #e7e7e7"],
.forum-tinted [style*="background-color: #e0e0e0"] {
    background-color: var(--forum-paper-shade) !important;
}

.forum-tinted [style*="background-color: #cfcfcf"] {
    background-color: var(--forum-paper-line) !important;
}

.forum-tinted [style*="background-color: white"],
.forum-tinted [style*="background-color: #fafbff"] {
    background-color: var(--forum-paper) !important;
}

.forum-tinted [style*="border-color: #ffffff"],
.forum-tinted [style*="border-color: #dadfe2"] {
    border-color: var(--forum-paper-line) !important;
}

.forum-tinted [style*="outline-color: #cfcfcf"] {
    outline-color: var(--forum-paper-line) !important;
}

.forum-tinted .rz-html-editor,
.forum-tinted .rz-html-editor-content,
.forum-tinted .rz-html-editor-toolbar {
    background-color: #fffaf0 !important;
    border-color: var(--forum-paper-line);
}