/* Forum dark mode. Every rule is scoped to .forum-dark, which ForumsLayout puts on its wrapper when the
   mho-forum-theme cookie says "dark", so history articles, genealogy and other sections are never affected.
   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 {
    color-scheme: dark;
    background-color: #15181d;
    color: #e4e6ea;
    /* 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: #e4e6ea;
    --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: #e4e6ea;
    --mud-palette-tertiary-text: #15181d;
    --mud-palette-dark: #d0d4da;
    --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: #e4e6ea;
    --mud-palette-background: #15181d;
    --mud-palette-background-gray: #1e232b;
    --mud-palette-surface: #1e232b;
    --mud-palette-text-primary: #e4e6ea;
    --mud-palette-text-secondary: #b8bec7;
    --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: #3a4250;
    --mud-palette-lines-inputs: #6b7584;
    --mud-palette-table-lines: #3a4250;
    --mud-palette-table-striped: rgba(255,255,255,0.04);
    --mud-palette-table-hover: rgba(255,255,255,0.06);
    --mud-palette-divider: #3a4250;
    --mud-palette-divider-light: #2d343e;
    --mud-palette-overlay-dark: rgba(0,0,0,0.6);
    /* Bootstrap overrides on top of data-bs-theme="dark". */
    --bs-body-bg: #15181d;
    --bs-body-color: #e4e6ea;
    --bs-link-color: #9fc3ff;
    --bs-link-color-rgb: 159,195,255;
    --bs-link-hover-color: #c4dbff;
    --bs-link-hover-color-rgb: 196,219,255;
    --bs-border-color: #3a4250;
}

/* 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: #3a4250;
    background: #1e232b;
}

.forum-dark .site-header .primary-nav {
    scrollbar-color: #6b7584 #1e232b;
}

.forum-dark .site-header .nav-track .nav-link {
    color: #d0d4da;
}

.forum-dark .site-header .nav-track .nav-link:hover {
    background: #2d343e;
    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: #9fc3ff;
}

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

/* Forum classes from site.css. */
.forum-dark .forumbackground {
    background-color: #1e232b !important;
}

.forum-dark .forumlightbackground {
    background-color: #252b34 !important;
}

.forum-dark .forumbutton,
.forum-dark .mainlightbackground,
.forum-dark .mainbutton {
    background-color: #2d343e;
}

.forum-dark .forumborder,
.forum-dark .mainborder {
    border-color: #4a5363 !important;
}

.forum-dark .forumlink,
.forum-dark .forumlink:hover,
.forum-dark .forumlinkicon,
.forum-dark .forumlinkicon:hover,
.forum-dark .mud-nav-link-text {
    color: #d0d4da;
}

.forum-dark .hoverunderline:hover {
    color: #9fc3ff;
}

.forum-dark div.quote {
    background-color: #252b34;
    border-color: #4f8fd6;
}

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

.forum-dark hr {
    border-color: #4a5363;
    opacity: 1;
}

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

.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: #e4e6ea;
    --bs-table-striped-bg: rgba(255,255,255,0.04);
    --bs-table-striped-color: #e4e6ea;
    --bs-table-hover-bg: rgba(255,255,255,0.07);
    --bs-table-hover-color: #e4e6ea;
    --bs-table-border-color: #3a4250;
}

/* 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: #e4e6ea !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: #b8bec7 !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: #9fc3ff !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: #15181d !important;
}

.forum-dark [style*="background-color: #e7e7e7"],
.forum-dark [style*="background-color: #e0e0e0"] {
    background-color: #252b34 !important;
}

.forum-dark [style*="background-color: #cfcfcf"] {
    background-color: #3a4250 !important;
}

.forum-dark [style*="background-color: white"],
.forum-dark [style*="background-color: #fafbff"] {
    background-color: #1e232b !important;
}

.forum-dark [style*="border-color: #ffffff"],
.forum-dark [style*="border-color: #dadfe2"] {
    border-color: #3a4250 !important;
}

.forum-dark [style*="border-color: #424242"] {
    border-color: #4a5363 !important;
}

.forum-dark [style*="outline-color: #cfcfcf"] {
    outline-color: #3a4250 !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: #252b34 !important;
    color: #e4e6ea;
    border-color: #4a5363;
}

.forum-dark .rz-html-editor-button,
.forum-dark .rz-html-editor-toolbar .rz-button,
.forum-dark .rz-html-editor-toolbar .rz-dropdown {
    background-color: #2d343e;
    color: #e4e6ea;
}

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

.forum-dark .history-day-event {
    color: #e4e6ea;
}

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

.forum-dark .history-day-source {
    color: #b8bec7;
}

/* Theme toggle in ForumHeader: show the icon for the mode a click switches to. */
.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. */
.forum-theme-toggle .forum-theme-when-light {
    display: inline-flex;
}

.forum-theme-toggle .forum-theme-when-dark {
    display: none;
}

/* "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: #d0d4da;
}

/* 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: #9fc3ff;
}

.forum-dark .forum-theme-toggle .forum-theme-when-light {
    display: none;
}

.forum-dark .forum-theme-toggle .forum-theme-when-dark {
    display: inline-flex;
}

/* 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: #252b34;
    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: #252b34;
    color: #e4e6ea;
}

.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 #252b34 inset;
    -webkit-text-fill-color: #e4e6ea;
    caret-color: #e4e6ea;
}

/* 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;
}