/*
 * ovTwo dark mode - the page frame.
 *
 * Everything here is scoped to html[data-theme="dark"], which js/dark_mode.js
 * sets from the visitor's saved choice. With the attribute absent this file
 * does nothing at all.
 *
 * This file only paints what cannot be derived: the frame around the page,
 * the colours a page inherits when it sets none of its own, and third-party
 * widgets. Colours that modules declare themselves are translated by
 * js/dark_mode.js, so a new page needs nothing added here.
 */

html[data-theme="dark"] {
    --ov-page:     #0b111b;   /* behind the content column */
    --ov-surface:  #151d2b;   /* the content column */
    --ov-raised:   #1c2636;   /* cards, inputs, menus */
    --ov-border:   #2c394d;
    --ov-text:     #e3e9f1;
    --ov-muted:    #9aa8ba;
    --ov-link:     #74abf2;
    --ov-header:   #17365f;   /* the brand blue, dimmed to sit on a dark page */

    /* Bootstrap 5.3 reads these; pointing them at our palette keeps its
       cards, tables, modals and forms on the same navy as the frame instead
       of its stock neutral grey. */
    --bs-body-bg:            #151d2b;
    --bs-body-color:         #e3e9f1;
    --bs-secondary-bg:       #1c2636;
    --bs-tertiary-bg:        #19222f;
    --bs-secondary-color:    rgba(227, 233, 241, 0.72);
    --bs-border-color:       #2c394d;
    --bs-link-color:         #74abf2;
    --bs-link-color-rgb:     116, 171, 242;
    --bs-link-hover-color:   #9cc4f7;
    --bs-link-hover-color-rgb: 156, 196, 247;
    --bs-emphasis-color:     #ffffff;

    color-scheme: dark;
}

/* ── Frame ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] body {
    background-color: var(--ov-page);
    background-image: linear-gradient(180deg, #12213a 0, var(--ov-page) 420px);
    background-repeat: no-repeat;
    color: var(--ov-text);
}

html[data-theme="dark"] tr.midsection td.left,
html[data-theme="dark"] tr.midsection td.right {
    background-image: none;
    background-color: transparent;
}

/* The sidebar art (350x900) is a flat picture with the bright page gradient
   painted into it, so on a navy page it shows up as a hard-edged teal
   rectangle. It cannot be cut out, so it is dimmed and then feathered away
   on the two edges that used to blend into the light page: the outer side
   and the bottom. The mask is sized and anchored to the picture, not the
   cell, because the cell is as wide as the window allows. */
html[data-theme="dark"] tr.midsection td.left div,
html[data-theme="dark"] tr.midsection td.right div {
    filter: brightness(0.42) saturate(0.7) hue-rotate(8deg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 350px 900px;
            mask-size: 350px 900px;
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
}
html[data-theme="dark"] tr.midsection td.left div {
    -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 100%), linear-gradient(to bottom, #000 40%, transparent 90%);
            mask-image: linear-gradient(to left, #000 30%, transparent 100%), linear-gradient(to bottom, #000 40%, transparent 90%);
    -webkit-mask-position: right top;
            mask-position: right top;
}
html[data-theme="dark"] tr.midsection td.right div {
    -webkit-mask-image: linear-gradient(to right, #000 30%, transparent 100%), linear-gradient(to bottom, #000 40%, transparent 90%);
            mask-image: linear-gradient(to right, #000 30%, transparent 100%), linear-gradient(to bottom, #000 40%, transparent 90%);
    -webkit-mask-position: left top;
            mask-position: left top;
}

html[data-theme="dark"] tr.header td {
    background-color: var(--ov-header);
}
html[data-theme="dark"] td.header a:hover {
    background-color: #24518c;
}
html[data-theme="dark"] td.header a.hl,
html[data-theme="dark"] td.header a.hl:hover {
    background-color: #e0812c;
}

html[data-theme="dark"] td.midsection,
html[data-theme="dark"] td.footer {
    background-color: var(--ov-surface);
    color: var(--ov-text);
}

html[data-theme="dark"] td.footer div.Ctnt p {
    color: var(--ov-muted);
}

/* ── Inherited defaults ────────────────────────────────────────────── */
/* :where() keeps these at the weight of a bare element selector, so they
   replace theme.css's own defaults and still give way to any class a page
   puts on the element. Written without it, "a" here would outrank every
   ".some-button { color: #fff }" on the site. */
:where(html[data-theme="dark"]) a {
    color: var(--ov-link);
}
:where(html[data-theme="dark"]) hr {
    border-color: var(--ov-border);
    opacity: 1;
}
:where(html[data-theme="dark"]) ::placeholder {
    color: #7c8a9d;
    opacity: 1;
}
:where(html[data-theme="dark"]) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="image"]):not(.btn), select, textarea) {
    background-color: var(--ov-raised);
    color: var(--ov-text);
    border-color: var(--ov-border);
}

/* ── Inline styles ─────────────────────────────────────────────────────
   js/dark_mode.js never rewrites a style="" attribute. It leaves the dark
   value beside the original in a --ovd-* property and names which ones it
   set in data-ovd; these rules are what apply them. !important is required
   to outrank the inline declaration it stands in for. */
html[data-theme="dark"] [data-ovd~="bg"] { background-color:    var(--ovd-bg) !important; }
html[data-theme="dark"] [data-ovd~="bi"] { background-image:    var(--ovd-bi) !important; }
html[data-theme="dark"] [data-ovd~="c"]  { color:               var(--ovd-c)  !important; }
html[data-theme="dark"] [data-ovd~="bt"] { border-top-color:    var(--ovd-bt) !important; }
html[data-theme="dark"] [data-ovd~="br"] { border-right-color:  var(--ovd-br) !important; }
html[data-theme="dark"] [data-ovd~="bb"] { border-bottom-color: var(--ovd-bb) !important; }
html[data-theme="dark"] [data-ovd~="bl"] { border-left-color:   var(--ovd-bl) !important; }

/* ── Scrollbars ────────────────────────────────────────────────────────
   One look for every scrollbar in dark mode: the window's and the panels
   that scroll on their own (the community photo feed, patch notes, chat).
   !important on purpose - pages set scrollbar-color for the light theme
   (pale grey on near-white), and a single bright track in a dark page is
   the first thing the eye lands on. */
html[data-theme="dark"],
html[data-theme="dark"] * {
    scrollbar-color: #3b4c68 #0f1622 !important;
}
/* Safari, and older Chromium, which read these instead of scrollbar-color. */
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0f1622 !important;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3b4c68 !important;
    border-radius: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4f6588 !important;
}
html[data-theme="dark"] ::-webkit-scrollbar-corner {
    background: #0f1622;
}

/* ── Third-party widgets (their stylesheets come from a CDN, which the
      translator is not allowed to read) ─────────────────────────────── */
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper label {
    color: var(--ov-text);
}
html[data-theme="dark"] .page-link {
    background-color: var(--ov-raised);
    border-color: var(--ov-border);
    color: var(--ov-link);
}
html[data-theme="dark"] .page-item.disabled .page-link {
    color: #6c7a8d;
}
html[data-theme="dark"] .page-item.active .page-link {
    background-color: #2966b8;
    border-color: #2966b8;
    color: #fff;
}
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black {
    color: var(--ov-text) !important;
}
html[data-theme="dark"] .text-muted {
    color: var(--ov-muted) !important;
}
html[data-theme="dark"] .bg-white {
    background-color: var(--ov-raised) !important;
}
html[data-theme="dark"] .bg-light {
    background-color: #19222f !important;
}
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table > thead.table-light > tr > * {
    --bs-table-bg: #1c2636;
    --bs-table-color: #e3e9f1;
    --bs-table-border-color: #2c394d;
    background-color: #1c2636;
    color: #e3e9f1;
}

/* ── The switch itself ─────────────────────────────────────────────────
   The one part of this file that applies in BOTH themes: a round button
   pinned bottom-left, mirroring the chat button bottom-right. Added to the
   page by js/dark_mode.js. */
.ov-theme-toggle {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1030;              /* over the page, under Bootstrap modals (1055) */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, #2966b8, #3d7acc);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ov-theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.36);
}
.ov-theme-toggle:focus-visible {
    outline: 2px solid #ff9c42;
    outline-offset: 2px;
}
html[data-theme="dark"] .ov-theme-toggle {
    background: linear-gradient(135deg, #24344d, #2f4566);
    color: #ffd27a;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
@media print {
    .ov-theme-toggle { display: none; }
}