/* ---------------------------------------------------------------------------
 * theme.css — site-wide light/dark theming.
 *
 * Loaded after custom.css and pm.css, before {% block stylesheets %}.
 * Every dark rule is prefixed with [data-theme="dark"], which adds (0,1,0) of
 * specificity. That is what makes these rules beat build/app.css (Bootstrap),
 * custom.css, pm.css AND the per-page <style> blocks that load later --
 * without !important. Sectie 4 is intussen leeg: alle templates zijn
 * ge-de-inlined, dus er zijn nog vier !important-declaraties over en die
 * counteren allemaal een bestaande !important-regel in custom.css of pm.css
 * (elk geannoteerd met het bronregelnummer).
 *
 * Sections:
 *   1. Palette
 *   2. Bootstrap 3 components
 *   3. Project classes (custom.css / pm.css / per-page <style> mirrors)
 *   4. Inline-style band-aids  <-- leeg; alle templates zijn ge-de-inlined
 * ------------------------------------------------------------------------ */


/* === 1. Palette ========================================================== */

:root {
    --ww-bg: #ffffff;
    --ww-bg-elevated: #f5f5f5;
    --ww-bg-inset: #f5f2f2;
    --ww-text: #333333;
    --ww-text-muted: #777777;
    --ww-border: #dddddd;
    --ww-link: #337ab7;
    --ww-link-hover: #23527c;
    --ww-navbar-bg: #e0af67;
    --ww-navbar-text: #000000;
    --ww-accent: #d09e6d;
    --ww-input-bg: #ffffff;

    /* Navigatiebalk -- de lichte waarden komen letterlijk uit ontwerp 2a/2b;
     * de donkere hieronder zijn daarvan afgeleid op --ww-navbar-bg/-text.
     * Het ontwerp werkt met zwarte/witte washes over het zand; over de donkere
     * balk verdwijnt een zwarte wash, dus die MOETEN tokens zijn. Daardoor is
     * de hele balk themavrij en heeft custom.css geen dark-regels nodig. */
    --ww-navbar-h: 52px;
    --ww-navbar-border: rgba(0, 0, 0, .35);
    --ww-navbar-well: rgba(0, 0, 0, .09);
    --ww-navbar-seg-active-bg: #ffffff;
    --ww-navbar-seg-active-text: #000000;
    --ww-navbar-text-dim: rgba(0, 0, 0, .72);
    --ww-navbar-hover: rgba(255, 255, 255, .40);
    --ww-navbar-hover-soft: rgba(255, 255, 255, .32);
    --ww-navbar-divider: rgba(0, 0, 0, .18);
    --ww-navbar-avatar-bg: rgba(0, 0, 0, .28);
    --ww-navbar-avatar-text: #ffffff;
    --ww-navbar-focus: #1c1a17;
    --ww-pill-bg: #d07370;
    --ww-pill-alert-bg: #d9534f;
    --ww-pill-text: #ffffff;
    --ww-menu-bg: #ffffff;
    --ww-menu-border: #d9d2c6;
    --ww-menu-separator: #efe9df;
    --ww-menu-hover: #f6f2ea;
    --ww-menu-text: #1c1a17;
    --ww-menu-avatar-bg: var(--ww-accent);
    --ww-menu-avatar-text: #ffffff;
    --ww-menu-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    --ww-danger: #a94442;
    --ww-notify-empty-icon: #c9c2b6;
}

[data-theme="dark"] {
    --ww-bg: #1c1b19;
    --ww-bg-elevated: #26241f;
    --ww-bg-inset: #2b2b2a;
    --ww-text: #d8d4cc;
    /* Bright enough that muted text still clears 4.5:1 on the elevated
     * surfaces, not just on the page background. */
    --ww-text-muted: #a8a298;
    --ww-border: #3a3733;
    --ww-link: #e0af67;
    --ww-link-hover: #f0c68c;
    --ww-navbar-bg: #2a2621;
    --ww-navbar-text: #d8d4cc;
    --ww-accent: #d09e6d;
    --ww-input-bg: #16150f;

    --ww-navbar-border: var(--ww-border);
    --ww-navbar-well: rgba(0, 0, 0, .35);
    --ww-navbar-seg-active-bg: #4a443a;
    --ww-navbar-seg-active-text: #f2ede4;
    --ww-navbar-text-dim: #a8a298;
    --ww-navbar-hover: rgba(255, 255, 255, .10);
    --ww-navbar-hover-soft: rgba(255, 255, 255, .07);
    --ww-navbar-divider: rgba(255, 255, 255, .16);
    --ww-navbar-avatar-bg: rgba(255, 255, 255, .18);
    --ww-navbar-avatar-text: #f2ede4;
    --ww-navbar-focus: var(--ww-link-hover);
    --ww-pill-bg: #b5504d;
    --ww-pill-alert-bg: #b5504d;
    --ww-pill-text: #ffffff;
    --ww-menu-bg: var(--ww-bg-elevated);
    --ww-menu-border: var(--ww-border);
    --ww-menu-separator: var(--ww-border);
    --ww-menu-hover: #35322c;
    --ww-menu-text: var(--ww-text);
    --ww-menu-avatar-bg: var(--ww-accent);
    --ww-menu-avatar-text: #1c1b19;
    --ww-menu-shadow: 0 6px 18px rgba(0, 0, 0, .55);
    --ww-danger: #e08b88;
    --ww-notify-empty-icon: var(--ww-text-muted);

    /* Native dark scrollbars, <select> popups, date pickers and form-control
     * defaults -- roughly 20 override rules we do not have to write. */
    color-scheme: dark;
}


/* === 2. Bootstrap 3 components =========================================== */

[data-theme="dark"] body {
    background-color: var(--ww-bg);
    color: var(--ww-text);
}

[data-theme="dark"] a {
    color: var(--ww-link);
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
    color: var(--ww-link-hover);
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] small,
[data-theme="dark"] .small {
    color: var(--ww-text-muted);
}

[data-theme="dark"] hr {
    border-top-color: var(--ww-border);
}

[data-theme="dark"] .text-primary { color: #8ab4d8; }
[data-theme="dark"] .text-success { color: #8fc98f; }
[data-theme="dark"] .text-info    { color: #7fc4d4; }
[data-theme="dark"] .text-warning { color: #e0b877; }
[data-theme="dark"] .text-danger  { color: #e08b88; }

/* --- surfaces --- */

[data-theme="dark"] .panel,
[data-theme="dark"] .well,
[data-theme="dark"] .jumbotron {
    background-color: var(--ww-bg-elevated);
    border-color: var(--ww-border);
    color: var(--ww-text);
}

[data-theme="dark"] .panel-default > .panel-heading,
[data-theme="dark"] .panel-heading,
[data-theme="dark"] .panel-footer {
    background-color: var(--ww-bg-inset);
    border-color: var(--ww-border);
    color: var(--ww-text);
}

[data-theme="dark"] .panel-body {
    background-color: transparent;
    color: var(--ww-text);
}

[data-theme="dark"] .thumbnail {
    background-color: var(--ww-bg-elevated);
    border-color: var(--ww-border);
}

/* --- modals (also covers bootbox, which appends to <body>; data-theme
       sits on <html> precisely so that works) --- */

[data-theme="dark"] .modal-content {
    background-color: var(--ww-bg-elevated);
    color: var(--ww-text);
    border-color: var(--ww-border);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--ww-border);
}

[data-theme="dark"] .modal-backdrop {
    background-color: #000000;
}

[data-theme="dark"] .close {
    color: var(--ww-text);
    text-shadow: none;
    opacity: .6;
}

[data-theme="dark"] .close:hover,
[data-theme="dark"] .close:focus {
    color: var(--ww-text);
    opacity: 1;
}

/* --- buttons --- */

[data-theme="dark"] .btn-default {
    background-color: #35322c;
    border-color: var(--ww-border);
    color: var(--ww-text);
}

[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] .btn-default:focus,
[data-theme="dark"] .btn-default:active,
[data-theme="dark"] .btn-default.active,
[data-theme="dark"] .open > .dropdown-toggle.btn-default {
    background-color: #45413a;
    border-color: #55504a;
    color: var(--ww-text);
}

[data-theme="dark"] .btn-link {
    color: var(--ww-link);
}

/* Keep the semantic buttons recognisable but stop them glaring on a dark page. */
[data-theme="dark"] .btn-primary { background-color: #2f5d8a; border-color: #27496b; }
[data-theme="dark"] .btn-danger  { background-color: #9c3f3c; border-color: #7f3330; }
[data-theme="dark"] .btn-success { background-color: #3f7a45; border-color: #336237; }
[data-theme="dark"] .btn-info    { background-color: #2f6f80; border-color: #265866; }
/* Amber is the one that needs care: white-on-amber only clears 4.5:1 below
 * roughly #8c6727, so this is darker than the other semantic buttons. */
[data-theme="dark"] .btn-warning { background-color: #855f22; border-color: #6d4e1c; }

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn-success,
[data-theme="dark"] .btn-info,
[data-theme="dark"] .btn-warning {
    color: #ffffff;
}

/* --- forms --- */

[data-theme="dark"] .form-control,
[data-theme="dark"] textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] select {
    background-color: var(--ww-input-bg);
    border-color: var(--ww-border);
    color: var(--ww-text);
}

[data-theme="dark"] .form-control:focus {
    border-color: var(--ww-accent);
    box-shadow: none;
}

[data-theme="dark"] .form-control::placeholder { color: var(--ww-text-muted); }

[data-theme="dark"] .input-group-addon {
    background-color: var(--ww-bg-inset);
    border-color: var(--ww-border);
    color: var(--ww-text);
}

[data-theme="dark"] .help-block,
[data-theme="dark"] .control-label {
    color: var(--ww-text-muted);
}

/* --- tables --- */

[data-theme="dark"] .table,
[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > tbody > tr > th,
[data-theme="dark"] .table > tfoot > tr > td {
    border-color: var(--ww-border);
    color: var(--ww-text);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--ww-bg-elevated);
}

[data-theme="dark"] .table-hover > tbody > tr:hover {
    background-color: #302d27;
}

/* --- dropdowns, popovers, tooltips --- */

[data-theme="dark"] .dropdown-menu {
    background-color: var(--ww-bg-elevated);
    border-color: var(--ww-border);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .5);
}

[data-theme="dark"] .dropdown-menu > li > a {
    color: var(--ww-text);
}

[data-theme="dark"] .dropdown-menu > li > a:hover,
[data-theme="dark"] .dropdown-menu > li > a:focus {
    background-color: #35322c;
    color: var(--ww-text);
}

[data-theme="dark"] .dropdown-menu .divider {
    background-color: var(--ww-border);
}

[data-theme="dark"] .popover {
    background-color: var(--ww-bg-elevated);
    border-color: var(--ww-border);
    color: var(--ww-text);
}

[data-theme="dark"] .popover-title {
    background-color: var(--ww-bg-inset);
    border-bottom-color: var(--ww-border);
    color: var(--ww-text);
}

[data-theme="dark"] .popover.bottom > .arrow:after { border-bottom-color: var(--ww-bg-inset); }
[data-theme="dark"] .popover.top > .arrow:after    { border-top-color: var(--ww-bg-elevated); }
[data-theme="dark"] .popover.left > .arrow:after   { border-left-color: var(--ww-bg-elevated); }
[data-theme="dark"] .popover.right > .arrow:after  { border-right-color: var(--ww-bg-elevated); }

/* --- lists, labels, alerts, pagination, tabs --- */

[data-theme="dark"] .list-group-item {
    background-color: var(--ww-bg-elevated);
    border-color: var(--ww-border);
    color: var(--ww-text);
}

[data-theme="dark"] .list-group-item.active,
[data-theme="dark"] .list-group-item.active:hover {
    background-color: #3a352d;
    border-color: var(--ww-border);
    color: var(--ww-text);
}

[data-theme="dark"] .label-default { background-color: #4a453d; }

[data-theme="dark"] .alert-success { background-color: #24331f; border-color: #38512f; color: #b8d8b0; }
[data-theme="dark"] .alert-info    { background-color: #1e2f34; border-color: #2e4c55; color: #a9d2dc; }
[data-theme="dark"] .alert-warning { background-color: #342c1a; border-color: #55452a; color: #e0c48d; }
[data-theme="dark"] .alert-danger  { background-color: #351f1e; border-color: #593231; color: #e2aeac; }

[data-theme="dark"] .pagination > li > a,
[data-theme="dark"] .pagination > li > span {
    background-color: var(--ww-bg-elevated);
    border-color: var(--ww-border);
    color: var(--ww-link);
}

[data-theme="dark"] .pagination > .active > a,
[data-theme="dark"] .pagination > .active > span {
    background-color: var(--ww-accent);
    border-color: var(--ww-accent);
    color: #1c1b19;
}

[data-theme="dark"] .pagination > .disabled > span {
    background-color: var(--ww-bg);
    border-color: var(--ww-border);
    color: var(--ww-text-muted);
}

[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--ww-border);
}

[data-theme="dark"] .nav-tabs > li > a:hover {
    background-color: var(--ww-bg-elevated);
    border-color: var(--ww-border);
}

[data-theme="dark"] .nav-tabs > li.active > a,
[data-theme="dark"] .nav-tabs > li.active > a:hover,
[data-theme="dark"] .nav-tabs > li.active > a:focus {
    background-color: var(--ww-bg-elevated);
    border-color: var(--ww-border);
    border-bottom-color: transparent;
    color: var(--ww-text);
}

[data-theme="dark"] .breadcrumb {
    background-color: var(--ww-bg-elevated);
}

[data-theme="dark"] .progress {
    background-color: var(--ww-bg-inset);
}

[data-theme="dark"] .lead {
    color: var(--ww-text);
}

[data-theme="dark"] .page-header {
    border-bottom-color: var(--ww-border);
}

[data-theme="dark"] code {
    background-color: var(--ww-bg-inset);
    color: #e0a0a0;
}

[data-theme="dark"] pre {
    background-color: var(--ww-bg-inset);
    border-color: var(--ww-border);
    color: var(--ww-text);
}


/* === 3. Project classes ================================================== */

/* --- custom.css mirrors --- */

/* custom.css:28-35 hardcodes black for the sidebar links. */
[data-theme="dark"] div.content_useful_links a:link,
[data-theme="dark"] div.content_useful_links a:visited,
[data-theme="dark"] div.content_useful_links a:hover {
    color: var(--ww-link);
}

/* custom.css:71-79 -- the olive rgba background survives on dark, the text does not. */
[data-theme="dark"] div.day-transition {
    color: var(--ww-text);
}

/* custom.css:112-131 -- the message action buttons are warm pastels. */
[data-theme="dark"] .btn-message-action {
    background-color: #4a3b26;
    color: #e2cba6;
}

[data-theme="dark"] .btn-message-action:hover {
    background-color: #6a5433;
    color: #f5e4c6;
}

[data-theme="dark"] .btn-message-delete-action {
    background-color: #4d2b2b;
    color: #e6bcbc;
}

[data-theme="dark"] .btn-message-delete-action:hover {
    background-color: #6d3a3a;
    color: #f6d6d6;
}

/* The "currently open message" highlight in the dual-panel list. Used to be a
 * hardcoded #fff0d6 set from JS in default/index.html.twig; it is a class now
 * so both themes can define it. Light values reproduce the original exactly. */
/* Qualified with div.message_header on purpose: custom.css:90-93 sets
 * `div.message_header { border: 1px solid transparent }` at (0,1,1), which a
 * bare class at (0,1,0) would lose to -- the border would silently vanish. */
div.message_header.message-header--open {
    border: 1px solid #e0af67;
    background-color: #fff0d6;
}

[data-theme="dark"] div.message_header.message-header--open {
    border-color: #6a5433;
    background-color: #332b1f;
}

/* --- Message list / thread markers ----------------------------------------
 * These replace the hardcoded colours that used to sit in style="" attributes
 * in message_list.html.twig, message.html.twig and message_mobile.html.twig.
 * The light values reproduce the originals exactly, so the light theme is
 * unchanged; the dark values are what the band-aids in section 4 used to
 * approximate. */

.msg-locked       { color: darkred; }
.msg-sticky       { color: #B82323; }
.msg-marker       { color: #eabdbd; }
.msg-pinned       { color: #0584f5; }
.msg-has-image    { color: #b22222; }
/* Same warm accent as the poll bars, so the marker reads as "poll" in both themes and
 * stays quieter than the red image marker next to it. */
.msg-has-poll     { color: var(--ww-accent); }
.msg-replycount   { color: dimgrey; font-style: italic; }
.msg-thanks       { font-weight: bold; color: darkred; }
.msg-edited       { color: #363636; }
.msg-altitude     { color: grey; }
.msg-title        { color: black; }
.msg-title--empty { color: #686868; }
.msg-hidden-icon  { color: #686868; }
.msg-hidden-mark  { background-color: rgba(86, 222, 75, 0.26); }

[data-theme="dark"] .msg-locked       { color: #e08b88; }
[data-theme="dark"] .msg-sticky       { color: #e08b88; }
[data-theme="dark"] .msg-marker       { color: #a9807f; }
[data-theme="dark"] .msg-pinned       { color: #6fb6e8; }
[data-theme="dark"] .msg-has-image    { color: #e08b88; }
[data-theme="dark"] .msg-replycount   { color: var(--ww-text-muted); }
[data-theme="dark"] .msg-thanks       { color: #e08b88; }
[data-theme="dark"] .msg-edited       { color: var(--ww-text-muted); }
[data-theme="dark"] .msg-altitude     { color: var(--ww-text-muted); }
[data-theme="dark"] .msg-title        { color: var(--ww-text); }
[data-theme="dark"] .msg-title--empty { color: var(--ww-text-muted); }
[data-theme="dark"] .msg-hidden-icon  { color: var(--ww-text-muted); }
[data-theme="dark"] .msg-hidden-mark  { background-color: rgba(86, 222, 75, 0.16); }

/* Thread view (message.html.twig / message_mobile.html.twig). */

.msg-actions-toggle { background-color: #f5f5f5; }
.msg-profile-icon   { color: #a94442; }
.msg-copy-link      { color: #c8c8c8; }
.msg-favorite       { color: #ffbe21; }
/* De rapporteerknop draagt óók .addFav, en custom.css:1-7 zet
 * `a.addFav:link, a.addFav:visited { color: #9C9C9C }` op (0,2,1). Een kale
 * klasse (0,1,0) verliest daarvan, dus dezelfde vorm aannemen en op volgorde
 * winnen -- theme.css laadt na custom.css. */
a.msg-report:link,
a.msg-report:visited,
.msg-report         { color: #ef8289; }
.msg-thanked        { color: green; }
.msg-copy-feedback  { background-color: #fbdeb4; border: 1px solid black; }
.msg-admin-btn       { background-color: whitesmoke; border: 1px solid dimgrey; }
.modal-header--accent { background-color: #d09e6d; }
.msg-footnote {
    color: #b1b1b1;
    font-size: 75%;
    border-top: 1px dotted #c1c1c1;
    margin-top: 4%;
    padding-top: 0.5%;
}
.msg-nav-btn        { background-color: rgba(90, 90, 90, 0.31); }

[data-theme="dark"] .msg-actions-toggle { background-color: #35322c; }
[data-theme="dark"] .msg-profile-icon   { color: #e08b88; }
[data-theme="dark"] .msg-copy-link      { color: var(--ww-text-muted); }
[data-theme="dark"] .msg-favorite       { color: #e0b877; }
[data-theme="dark"] a.msg-report:link,
[data-theme="dark"] a.msg-report:visited,
[data-theme="dark"] .msg-report         { color: #e08b88; }
[data-theme="dark"] .msg-thanked        { color: #8fc98f; }
[data-theme="dark"] .msg-copy-feedback  { background-color: #4a3b26; border-color: #6a5433; }
[data-theme="dark"] .msg-admin-btn       { background-color: var(--ww-bg-inset); border-color: var(--ww-border); }
[data-theme="dark"] .msg-footnote       { color: var(--ww-text-muted); border-top-color: var(--ww-border); }
[data-theme="dark"] .msg-nav-btn        { background-color: rgba(150, 150, 150, 0.18); }

/* message_mobile gebruikte 'grey' waar message_list '#686868' gebruikt voor
 * dezelfde toestand. In lichte modus blijven beide zoals ze waren; in donkere
 * modus vallen ze samen. */
.msg-title--empty-mobile { color: grey; }
[data-theme="dark"] .msg-title--empty-mobile { color: var(--ww-text-muted); }

/* Het geopende bericht in de mobiele draadweergave. */
div.message_header.msg-current {
    border: 1px solid #e0af67;
    background-color: #fff0d6;
    padding: 2px;
}
[data-theme="dark"] div.message_header.msg-current {
    border-color: #6a5433;
    background-color: #332b1f;
}

/* The amber modal headers keep their accent; only the text on them flips. */
[data-theme="dark"] .modal-header--accent,
[data-theme="dark"] .modal-header--accent .modal-title,
[data-theme="dark"] .modal-header--accent .close {
    color: #1c1b19;
}

/* custom.css:158-160 */
[data-theme="dark"] a.addFav {
    background-color: #35322c;
}

[data-theme="dark"] a.addFav:link,
[data-theme="dark"] a.addFav:visited,
[data-theme="dark"] a.btn-thank-user:link,
[data-theme="dark"] a.btn-thank-user:visited {
    color: var(--ww-text-muted);
}

/* Counters custom.css:164 `a.btn-thank-user { color: white !important }` --
 * white on darkred still reads on a dark page, so only the resting state
 * of the icon needs help. Kept as-is deliberately; no override needed. */

/* custom.css:262-291 -- blockquote is the quoted-message styling. */
[data-theme="dark"] blockquote {
    color: var(--ww-text-muted);
    border-left-color: var(--ww-border);
}

[data-theme="dark"] blockquote:before {
    color: #6a655c;
}

[data-theme="dark"] blockquote cite {
    color: var(--ww-text-muted);
}

/* custom.css:298-357 -- material cards (notifications, favourites, search hits). */
[data-theme="dark"] .card {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .5), 0 2px 10px 0 rgba(0, 0, 0, .4);
}

[data-theme="dark"] .card .card-content {
    background-color: var(--ww-bg-elevated);
    color: var(--ww-text);
}

[data-theme="dark"] .card .card-action {
    background-color: var(--ww-bg-elevated);
    border-top-color: var(--ww-border);
}

/* custom.css:205-237 -- the floating scroll buttons. */
[data-theme="dark"] #scroll,
[data-theme="dark"] #scrollbottom {
    background-color: rgba(120, 116, 110, 0.45);
    border-color: var(--ww-border);
}

/* custom.css:239-254 -- map chrome. The tiles themselves stay light: a dark
 * basemap is a different tile source, not a CSS change. */
[data-theme="dark"] .map {
    border-color: #8a5f2a;
}

/* --- per-page <style> block mirrors ---------------------------------------
 * These load AFTER this file, but the [data-theme="dark"] prefix outranks
 * them on specificity, so source order does not matter. */

/* templates/featured/day.html.twig */
[data-theme="dark"] .day-header { border-bottom-color: var(--ww-border); }
[data-theme="dark"] .day-header .episode-link { color: var(--ww-text-muted); }
[data-theme="dark"] .weather-panel {
    background: var(--ww-bg-elevated);
    border-color: var(--ww-border);
}
[data-theme="dark"] .weather-panel h3 { color: var(--ww-text-muted); }
[data-theme="dark"] .observation .source { color: var(--ww-text-muted); }
[data-theme="dark"] .observation .values strong { color: var(--ww-link); }
[data-theme="dark"] .thread-row { border-bottom-color: var(--ww-border); }
[data-theme="dark"] .thread-row .message-count,
[data-theme="dark"] .thread-row .author { color: var(--ww-text-muted); }
[data-theme="dark"] .thread-row .board-4 { color: #c0a3d4; border-color: #5a4a68; }
[data-theme="dark"] .day-metrics { color: var(--ww-text-muted); }
[data-theme="dark"] .day-metrics strong { color: var(--ww-text); }
[data-theme="dark"] .featured-sources { color: var(--ww-text-muted); }

/* templates/featured/index.html.twig */
[data-theme="dark"] .featured-header p.uitleg { color: var(--ww-text-muted); }
[data-theme="dark"] .episode {
    background: var(--ww-bg-elevated);
    border-color: var(--ww-border);
    border-left-color: #4d5a6b;
}
[data-theme="dark"] .episode:hover { border-left-color: var(--ww-accent); }
[data-theme="dark"] .episode .rank { color: var(--ww-text-muted); }
[data-theme="dark"] .episode h2 a { color: var(--ww-link); }
[data-theme="dark"] .episode .period,
[data-theme="dark"] .episode .metrics { color: var(--ww-text-muted); }
[data-theme="dark"] .episode .description { color: var(--ww-text); }
[data-theme="dark"] .episode .metrics strong { color: var(--ww-text); }
[data-theme="dark"] table.heatmap td.month-name,
[data-theme="dark"] table.heatmap td.day-name { color: var(--ww-text-muted); }

/* The light heatmap ramps from pale (#d3e0ee) to dark navy (#1f4e79): on white,
 * "busy" reads as heavy. On a dark page that ordering inverts -- the busiest
 * cells sink into the background and the quietest ones shout. So the dark ramp
 * runs the other way, from just-above-background to bright. */
[data-theme="dark"] .heatmap-cell { background-color: #302d28; }
[data-theme="dark"] .heatmap-level-1 { background-color: #2b4257; }
[data-theme="dark"] .heatmap-level-2 { background-color: #35617f; }
[data-theme="dark"] .heatmap-level-3 { background-color: #4083a8; }
[data-theme="dark"] .heatmap-level-4 { background-color: #55a6cf; }
[data-theme="dark"] .heatmap-level-5 { background-color: #7fc9ec; }
[data-theme="dark"] .heatmap-empty { background-color: transparent; }
[data-theme="dark"] a.heatmap-cell:hover { outline-color: var(--ww-accent); }
[data-theme="dark"] .heatmap-legend { color: var(--ww-text-muted); }

/* --- pm.css mirror (the biggest single block) --- */

[data-theme="dark"] .pm-head__icon {
    border-color: #4a3b26;
    background: #332b1f;
    color: #d2a768;
}
[data-theme="dark"] .pm-head h1 { color: var(--ww-text); }
[data-theme="dark"] .pm-head__meta { color: var(--ww-text-muted); }
[data-theme="dark"] .pm-head__unread { color: var(--ww-link); }

[data-theme="dark"] a.pm-btn,
[data-theme="dark"] a.pm-btn:visited,
[data-theme="dark"] button.pm-btn {
    border-color: var(--ww-border);
    background: var(--ww-bg-elevated);
    color: var(--ww-text);
}
[data-theme="dark"] a.pm-btn:hover,
[data-theme="dark"] a.pm-btn:focus,
[data-theme="dark"] button.pm-btn:hover,
[data-theme="dark"] button.pm-btn:focus {
    border-color: #55504a;
    background: #35322c;
    color: var(--ww-text);
}
[data-theme="dark"] .pm-btn .fa { color: #9ab88a; }

[data-theme="dark"] button.pm-btn--reply {
    border-color: #6a5433;
    background: #4a3b26;
    color: #f0dcbb;
}
[data-theme="dark"] .pm-btn--reply .fa { color: #f0dcbb; }
[data-theme="dark"] button.pm-btn--reply:hover,
[data-theme="dark"] button.pm-btn--reply:focus {
    border-color: #86693e;
    background: #5d4a2f;
    color: #fbecd3;
}

[data-theme="dark"] a.pm-btn--delete,
[data-theme="dark"] a.pm-btn--delete:visited {
    border-color: #5a3634;
    background: var(--ww-bg-elevated);
    color: #e08b88;
}
[data-theme="dark"] .pm-btn--delete .fa { color: #e08b88; }
[data-theme="dark"] a.pm-btn--delete:hover,
[data-theme="dark"] a.pm-btn--delete:focus {
    border-color: #7a4442;
    background: #3a2626;
    color: #f0a9a6;
}
[data-theme="dark"] button.pm-btn--quiet {
    border-color: var(--ww-border);
    background: var(--ww-bg-elevated);
    color: var(--ww-text-muted);
}

[data-theme="dark"] .pm-tabs { border-bottom-color: var(--ww-border); }
[data-theme="dark"] .pm-tabs > li > a,
[data-theme="dark"] .pm-tabs > li > a:visited { color: var(--ww-text-muted); }
[data-theme="dark"] .pm-tabs > li > a:hover,
[data-theme="dark"] .pm-tabs > li > a:focus {
    color: var(--ww-text);
    border-bottom-color: #4a3b26;
}
[data-theme="dark"] .pm-tabs > li.active > a,
[data-theme="dark"] .pm-tabs > li.active > a:hover {
    border-bottom-color: var(--ww-accent);
    color: var(--ww-text);
}
[data-theme="dark"] .pm-tab-count { background: var(--ww-accent); color: #1c1b19; }

[data-theme="dark"] #pmDatatable_wrapper .pm-toolbar .dataTables_filter input,
[data-theme="dark"] .pm-toolbar .dataTables_length select {
    border-color: var(--ww-border);
    background-color: var(--ww-input-bg);
    color: var(--ww-text);
}
[data-theme="dark"] .pm-toolbar .dataTables_filter input:focus { border-color: var(--ww-accent); }
[data-theme="dark"] .pm-toolbar .dataTables_length { color: var(--ww-text-muted); }

[data-theme="dark"] .pm-table-wrap { border-color: var(--ww-border); }
[data-theme="dark"] table#pmDatatable > thead > tr > th {
    border-bottom-color: #4a3b26 !important; /* counters the !important in pm.css */
    background: var(--ww-bg-inset);
    color: #d2a768;
}
[data-theme="dark"] table#pmDatatable thead > tr > th:after { color: #d2a768; }
[data-theme="dark"] table#pmDatatable > tbody > tr > td { border-bottom-color: var(--ww-border); }
[data-theme="dark"] table#pmDatatable > tbody > tr.pm-row:hover > td { background: #302d27; }
[data-theme="dark"] table#pmDatatable > tbody > tr.pm-row:hover > td:first-child { border-left-color: #302d27; }
[data-theme="dark"] table#pmDatatable > tbody > tr.pm-row--unread > td { background: #232a33; }
[data-theme="dark"] table#pmDatatable > tbody > tr.pm-row--unread > td:first-child { border-left-color: var(--ww-link); }
[data-theme="dark"] table#pmDatatable > tbody > tr.pm-row--unread:hover > td { background: #2a323d; }
/* pm.css:386-390 sets the open row on BOTH the resting and the hover selector.
 * Mirroring only :hover left the opened row white. */
[data-theme="dark"] table#pmDatatable > tbody > tr.pm-row--open > td,
[data-theme="dark"] table#pmDatatable > tbody > tr.pm-row--open:hover > td { background: #332c22; }
[data-theme="dark"] table#pmDatatable > tbody > tr.pm-row--open > td:first-child { border-left-color: var(--ww-accent); }

[data-theme="dark"] .pm-subject__icon { color: #6a655c; }
[data-theme="dark"] .pm-subject__text { color: var(--ww-text); }
[data-theme="dark"] .pm-subject__caret { color: #a08a6c; }
[data-theme="dark"] .pm-row--unread .pm-subject__icon,
[data-theme="dark"] .pm-row--unread .pm-subject__text { color: var(--ww-link); }
[data-theme="dark"] .pm-row--open .pm-subject__icon { color: #d2a768; }
[data-theme="dark"] .pm-row--open .pm-subject__text { color: var(--ww-text); }

[data-theme="dark"] .pm-avatar { background: #3a352d; color: #d2a768; }
[data-theme="dark"] .pm-from__name { color: var(--ww-text); }
[data-theme="dark"] .pm-from__place { color: var(--ww-text-muted); }
[data-theme="dark"] table#pmDatatable td.pm-cell-date { color: var(--ww-text-muted); }
[data-theme="dark"] .pm-date__sep { color: #6a655c; }

[data-theme="dark"] table#pmDatatable > tbody > tr.pm-group > td {
    border-bottom-color: var(--ww-border);
    background: var(--ww-bg-inset) !important; /* counters the !important in pm.css */
    color: var(--ww-text-muted);
}
[data-theme="dark"] table#pmDatatable > tbody > tr.pm-detail-row > td {
    border-left-color: var(--ww-accent);
    border-bottom-color: var(--ww-border);
    background: #2a251d !important; /* counters the !important in pm.css */
}

[data-theme="dark"] .pm-detail {
    border-color: var(--ww-border);
    background: var(--ww-bg-elevated);
}
[data-theme="dark"] .pm-detail__head { border-bottom-color: var(--ww-border); }
[data-theme="dark"] .pm-detail__from { color: var(--ww-text); }
[data-theme="dark"] .pm-detail__date { color: var(--ww-text-muted); }
[data-theme="dark"] .pm-detail__body { color: var(--ww-text); }
[data-theme="dark"] .pm-detail__actions { border-top-color: var(--ww-border); }

[data-theme="dark"] .pm-form {
    border-color: var(--ww-border);
    background: var(--ww-bg-elevated);
}
[data-theme="dark"] .pm-form__head {
    border-bottom-color: var(--ww-border);
    background: var(--ww-bg-inset);
    color: var(--ww-text-muted);
}
[data-theme="dark"] .pm-form__head strong { color: var(--ww-text); }
[data-theme="dark"] #new-pm-form .pm-form__body textarea {
    border-color: var(--ww-border);
    background: var(--ww-input-bg);
    color: var(--ww-text);
}
[data-theme="dark"] #new-pm-form .pm-form__body textarea:focus { border-color: var(--ww-accent); }

[data-theme="dark"] .pm-foot .dataTables_info { color: var(--ww-text-muted); }
[data-theme="dark"] .pm-foot .pagination > li > a,
[data-theme="dark"] .pm-foot .pagination > li > span {
    border-color: var(--ww-border);
    background: var(--ww-bg-elevated);
    color: var(--ww-text);
}
[data-theme="dark"] .pm-foot .pagination > li > a:hover,
[data-theme="dark"] .pm-foot .pagination > li > a:focus {
    border-color: #55504a;
    background: #35322c;
    color: var(--ww-link);
}
[data-theme="dark"] .pm-foot .pagination > .active > span,
[data-theme="dark"] .pm-foot .pagination > .active > span:focus {
    border-color: var(--ww-accent);
    background: var(--ww-accent);
    color: #1c1b19;
}
[data-theme="dark"] .pm-foot .pagination > .disabled > span {
    border-color: var(--ww-border);
    background: var(--ww-bg);
    color: var(--ww-text-muted);
}

[data-theme="dark"] .pm-empty__icon { color: #6a5433; }
[data-theme="dark"] .pm-empty__title { color: var(--ww-text); }
[data-theme="dark"] .pm-empty__text { color: var(--ww-text-muted); }
/* pm.css:748-752 paints the empty cell white for both tr.odd and tr.even --
 * mirror both, or the "geen berichten" panel stays a white island. */
[data-theme="dark"] table#pmDatatable > tbody > tr.odd > td.dataTables_empty,
[data-theme="dark"] table#pmDatatable > tbody > tr.even > td.dataTables_empty { background: transparent; }

/* pm.css:757+ restacks the table into cards below 768px and moves the row
 * backgrounds from the <td> onto the <tr>, so the desktop mirrors above do
 * not reach them. Same breakpoint, same selectors. */
@media (max-width: 767px) {
    [data-theme="dark"] table#pmDatatable > tbody > tr.pm-row,
    [data-theme="dark"] table#pmDatatable > tbody > tr.pm-group,
    [data-theme="dark"] table#pmDatatable > tbody > tr.pm-detail-row {
        border-bottom-color: var(--ww-border);
    }
    [data-theme="dark"] table#pmDatatable > tbody > tr.pm-row--unread { background: #232a33; }
    [data-theme="dark"] table#pmDatatable > tbody > tr.pm-row--open { background: #332c22; }
}

/* --- DataTables (bootstrap theme, used on /pm and the member list) --- */

[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
    color: var(--ww-text-muted);
}

[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable thead td {
    border-bottom-color: var(--ww-border);
    color: var(--ww-text);
}

[data-theme="dark"] table.dataTable tbody tr,
[data-theme="dark"] table.dataTable tbody td.dataTables_empty {
    background-color: transparent;
}

/* --- fine-uploader --- */

[data-theme="dark"] .qq-uploader,
[data-theme="dark"] .qq-upload-drop-area {
    background-color: var(--ww-bg-elevated);
    border-color: var(--ww-border);
    color: var(--ww-text);
}

[data-theme="dark"] .qq-upload-list li {
    background-color: var(--ww-bg-inset);
    color: var(--ww-text);
}

[data-theme="dark"] .qq-upload-button {
    background-color: #35322c;
    color: var(--ww-text);
}

/* Counters custom.css:199-201 `.qq-upload-button-hover { background-color: whitesmoke !important }` */
[data-theme="dark"] .qq-upload-button-hover {
    background-color: #45413a !important;
}

/* --- date pickers --- */

[data-theme="dark"] .bootstrap-datetimepicker-widget,
[data-theme="dark"] .datepicker {
    background-color: var(--ww-bg-elevated);
    border-color: var(--ww-border);
    color: var(--ww-text);
}

[data-theme="dark"] .bootstrap-datetimepicker-widget table td,
[data-theme="dark"] .bootstrap-datetimepicker-widget table th,
[data-theme="dark"] .datepicker table tr td,
[data-theme="dark"] .datepicker table tr th {
    color: var(--ww-text);
}

[data-theme="dark"] .bootstrap-datetimepicker-widget table td.day:hover,
[data-theme="dark"] .datepicker table tr td.day:hover {
    background-color: #35322c;
}

[data-theme="dark"] .bootstrap-datetimepicker-widget table td.active,
[data-theme="dark"] .datepicker table tr td.active {
    background-color: var(--ww-accent);
    color: #1c1b19;
}

[data-theme="dark"] .bootstrap-datetimepicker-widget table td.old,
[data-theme="dark"] .bootstrap-datetimepicker-widget table td.new,
[data-theme="dark"] .datepicker table tr td.old,
[data-theme="dark"] .datepicker table tr td.new {
    color: var(--ww-text-muted);
}

/* --- Navbar en meldingen (base.html.twig) --- */

.notify-card          { background-color: #f5f2f2; }
.notify-card--unread  { background-color: #ffbd94; }
.notify-open          { color: #a94442; }

/* Het accountmenu moet onder `[data-theme="dark"] .dropdown-menu` hierboven
 * uit komen: dat is (0,2,0) en staat eerder in dit bestand. Deze regels zijn
 * inhoudelijk gelijk aan die in custom.css -- ze bestaan puur om te winnen op
 * specificiteit en volgorde, niet om andere kleuren te zetten. */
[data-theme="dark"] .ww-nav-menu {
    color: var(--ww-menu-text);
    background-color: var(--ww-menu-bg);
    border-color: var(--ww-menu-border);
    box-shadow: var(--ww-menu-shadow);
}

[data-theme="dark"] .ww-nav-menu > li > a {
    color: var(--ww-menu-text);
}

[data-theme="dark"] .ww-nav-menu > li > a:hover,
[data-theme="dark"] .ww-nav-menu > li > a:focus {
    color: var(--ww-menu-text);
    background-color: var(--ww-menu-hover);
}

[data-theme="dark"] .ww-nav-menu > li > a.ww-nav-menu-danger,
[data-theme="dark"] .ww-nav-menu > li > a.ww-nav-menu-danger:hover,
[data-theme="dark"] .ww-nav-menu > li > a.ww-nav-menu-danger:focus {
    color: var(--ww-danger);
}

[data-theme="dark"] .ww-nav-menu .divider {
    background-color: var(--ww-menu-separator);
}

[data-theme="dark"] .notify-card          { background-color: var(--ww-bg-inset); }
[data-theme="dark"] .notify-card--unread  { background-color: #3d3222; }
[data-theme="dark"] .notify-open          { color: #e08b88; }

/* --- Zijbalk met links en de KNMI-verwachting (links.html.twig) --- */

.links-header       { background-color: #46393d; opacity: 0.5; }
.links-header-title { color: #FFFFFF; }
.links-header-src   { color: whitesmoke; font-style: italic; }
.forecast-card      { background-color: #f5f2f6; }
.forecast-min       { color: blue; }
.forecast-max       { color: red; }
.forecast-precip    { color: #379dde; }
div.content_useful_links a.links-button:link,
div.content_useful_links a.links-button:visited,
.links-button { color: black; font-weight: bold; text-decoration: none; background-color: rgba(178, 34, 34, 0.16); }
div.content_useful_links a.links-quiet:link,
div.content_useful_links a.links-quiet:visited,
.links-quiet { text-decoration: none; color: gray; }
div.content_useful_links a.links-plain:link,
div.content_useful_links a.links-plain:visited,
.links-plain { color: black; }

[data-theme="dark"] .links-header       { background-color: var(--ww-bg-inset); opacity: 1; }
[data-theme="dark"] .links-header-title { color: var(--ww-text); }
[data-theme="dark"] .links-header-src   { color: var(--ww-text-muted); }
[data-theme="dark"] .forecast-card      { background-color: var(--ww-bg-elevated); }
[data-theme="dark"] .forecast-min       { color: #7fb3e0; }
[data-theme="dark"] .forecast-max       { color: #e08b88; }
[data-theme="dark"] .forecast-precip    { color: #6fb6e8; }
[data-theme="dark"] div.content_useful_links a.links-button:link,
[data-theme="dark"] div.content_useful_links a.links-button:visited,
[data-theme="dark"] .links-button { color: var(--ww-text); background-color: rgba(178, 34, 34, 0.28); }
[data-theme="dark"] div.content_useful_links a.links-quiet:link,
[data-theme="dark"] div.content_useful_links a.links-quiet:visited,
[data-theme="dark"] .links-quiet { color: var(--ww-text-muted); }
[data-theme="dark"] div.content_useful_links a.links-plain:link,
[data-theme="dark"] div.content_useful_links a.links-plain:visited,
[data-theme="dark"] .links-plain { color: var(--ww-link); }

/* --- Bordoverzicht (default/index.html.twig) --- */

.board-toolbar-btn      { background-color: whitesmoke; }
.board-dualpanel-active { background-color: #ceffce; }
.board-linkhint         { color: #d2d2d2; }

[data-theme="dark"] .board-toolbar-btn      { background-color: #35322c; }
[data-theme="dark"] .board-dualpanel-active { background-color: #2b3d2b; }
[data-theme="dark"] .board-linkhint         { color: #6a655c; }

/* --- Fotofeed --------------------------------------------------------------
 * Was een eigen cookie-gestuurde dark mode met negen inline styles. De panelen
 * erven nu gewoon van de Bootstrap-regels in sectie 2; alleen de wrapper en de
 * bijschriften hebben nog iets eigens nodig. */

.photofeed-wrap    { }
.photofeed-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

[data-theme="dark"] .photofeed-wrap    { background-color: var(--ww-bg); }
[data-theme="dark"] .photofeed-caption { color: var(--ww-text); }

/* --- Staart: favorieten, zoeken, profiel, ledenlijst, foutpagina's --------- */

.fav-heading        { background-color: #ffd9a2; }
.fav-category       { background-color: #fbf2e4; color: black; }
.fav-nocategory     { background-color: #d6d6c7; font-weight: normal; color: darkgrey; }
.fav-open           { color: #a94442; }
.table-head--accent { background-color: #d09e6d; opacity: 0.9; }
.search-box         { background-color: #f1ede8; }
.result-title       { color: black; font-weight: bold; }
.alert-note         { background-color: #edef94; }
.profile-box        { border: 1px solid #a9a9a9; background-color: rgba(251, 178, 70, 0.06); }
.error-text         { color: #666; }

[data-theme="dark"] .fav-heading        { background-color: #4a3b26; }
[data-theme="dark"] .fav-category       { background-color: #3d3527; color: var(--ww-text); }
[data-theme="dark"] .fav-nocategory     { background-color: #33322b; color: var(--ww-text-muted); }
[data-theme="dark"] .fav-open           { color: #e08b88; }
[data-theme="dark"] .table-head--accent { opacity: 1; }
/* Moet dieper dan `[data-theme="dark"] .table > thead > tr > th` (0,3,1)
 * hierboven, anders krijgt de amberen kop lichte tekst. */
[data-theme="dark"] .table > thead.table-head--accent > tr > th,
[data-theme="dark"] .table > thead.table-head--accent > tr > td,
[data-theme="dark"] .table-head--accent th,
[data-theme="dark"] .table-head--accent td { color: #1c1b19; }
[data-theme="dark"] .search-box         { background-color: var(--ww-bg-elevated); }
[data-theme="dark"] .result-title       { color: var(--ww-text); }
/* .alert-info zet zelf een lichtblauwe tekstkleur; die moet wijken voor de
 * olijfgroene achtergrond van deze melding. */
[data-theme="dark"] .alert-info.alert-note,
[data-theme="dark"] .alert-note         { background-color: #3d3f1f; color: var(--ww-text); }
/* De <small> erin zou anders op de gedempte kleur uitkomen en net onder 4,5:1
 * blijven tegen deze olijfgroene achtergrond. */
[data-theme="dark"] .alert-note small   { color: var(--ww-text); }
[data-theme="dark"] .profile-box        { border-color: var(--ww-border); background-color: rgba(251, 178, 70, 0.08); }
[data-theme="dark"] .error-text         { color: var(--ww-text-muted); }


/* === 4. Inline-style band-aids =========================================== */
/* Leeg -- en dat is de bedoeling.
 *
 * Deze sectie bevatte veertien !important-regels die hardgecodeerde kleuren in
 * style=""-attributen moesten overrulen. Alle templates zijn intussen
 * ge-de-inlined, dus er valt niets meer te overrulen. Blijft dit leeg, dan zijn
 * er in het hele bestand nul !important-declaraties nodig.
 *
 * Komt er ooit weer een kleur in een style="" terecht, controleer dan met:
 *
 *   grep -rnE 'style="[^"]*(background-color|color[[:space:]]*:)' templates/
 */