/*
 Nord Dark Theme (Polar Night) as a static stylesheet.
 - Applied when html has class .theme-dark
 - For System mode: handled via JS applying .theme-dark or .theme-light
 We only override key colors to keep CSS lightweight and non-invasive.

 Inspired by Damien Frigewski

 Actually Overwritten with Jetbrains Darcula-inspired palette for Dark/System(Dark) but anyways^^
*/
/*
div.wunderdata_loader_bg {
    background-color: #fff;
    opacity: 0.7;
    z-index: 49;
    position: fixed;
    width: 100%;
    height: 100%;
    display: block;
}
*/
html.theme-dark div.wunderdata_loader_bg {
    background-color: #5a5a5a;
    opacity: 0.7;
}


html.theme-dark div.table_loader_bg {
    background-color: #5a5a5a;
    opacity: 0.5;
}

:root {
    /* Nord palette */
    --nord0: #2E3440;
    /* Polar Night */
    --nord1: #3B4252;
    --nord2: #434C5E;
    --nord3: #4C566A;
    --nord4: #D8DEE9;
    /* Snow Storm */
    --nord5: #E5E9F0;
    --nord6: #ECEFF4;
    --nord7: #8FBCBB;
    /* Frost */
    --nord8: #88C0D0;
    --nord9: #81A1C1;
    --nord10: #5E81AC;
    --nord11: #BF616A;
    /* Aurora */
    --nord12: #D08770;
    --nord13: #EBCB8B;
    --nord14: #A3BE8C;
    --nord15: #B48EAD;
}

/* JetBrains Darcula-inspired palette for Dark/System(Dark)
   We override the Nord variables in dark mode scopes so the rest of the
   stylesheet automatically picks up the new tones without touching rules. */
html.theme-dark {
    /* Backgrounds / surfaces */
    --nord0: #2B2D30;
    /* base window background */
    --nord1: #31353B;
    /* panels/cards */
    --nord2: #3C4048;
    /* headers/stripes */
    --nord3: #43484F;
    /* borders/dividers */
    /* Text hierarchy (JetBrains-like neutrals) */
    --nord4: #A9B7C6;
    /* secondary text / placeholders */
    --nord5: #C5CCD6;
    /* label text */
    --nord6: #D9DEE5;
    /* primary text */
    /* Accents (JetBrains blue family) */
    --nord8: #3D8BF2;
    /* links */
    --nord9: #62A5FF;
    /* hover/active link */
    --nord10: #3574F0;
    /* primary button */
    /* Semantic hues closer to Darcula */
    --nord11: #C75450;
    /* red */
    --nord12: #CC7832;
    /* orange */
    --nord13: #F2C55C;
    /* yellow */
    --nord14: #6A8759;
    /* green */
    --nord15: #9876AA;
    /* purple */
}

/* Utility helpers to mimic Tailwind-like classes used by toggle button */
.p-1 {
    padding: 4px;
}

.p-2 {
    padding: 8px;
}

.rounded-full {
    border-radius: 9999px;
}

.text-xl {
    font-size: 1.25em;
    line-height: 1.25;
}

.transition-colors {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.text-nord-aurora3 {
    color: var(--nord14);
}

.text-nord-frost4 {
    color: var(--nord10);
}

.focus\:outline-none:focus {
    outline: none;
}

/* Smooth theme transitions when switching Light ↔ Dark */
/* Keep scope small and properties minimal to avoid stutter */
html[class^="theme-"] body,
html[class^="theme-"] .navbar,
html[class^="theme-"] .panel,
html[class^="theme-"] .modal-content {
    transition: background-color .18s ease, color .18s ease;
}

/* Performance: never animate table colors during theme switches */
html[class^="theme-"] table,
html[class^="theme-"] table td,
html[class^="theme-"] table th,
html[class^="theme-"] .table>thead>tr>th,
html[class^="theme-"] .table>tbody>tr>td,
html[class^="theme-"] .table>tbody>tr>th,
html[class^="theme-"] .table-hover>tbody>tr:hover>td,
html[class^="theme-"] .table-hover>tbody>tr:hover>th,
html[class^="theme-"] .panel .table,
html[class^="theme-"] .panel .table td,
html[class^="theme-"] .panel .table th,
html[class^="theme-"] .fancyTable tbody tr td,
html[class^="theme-"] .ExcelTable2007 tr td,
html[class^="theme-"] .ExcelTable2007 tr th,
html[class^="theme-"] .ExcelTable2007 thead tr th {
    transition: none !important;
}

/* Avoid animating the theme toggle itself to keep the switch snappy */
html[class^="theme-"] #theme-toggle,
html[class^="theme-"] #theme-toggle svg {
    transition: none !important;
}

/* Remove any heavy hover effects on table cells to improve responsiveness */
html[class^="theme-"] .table-hover>tbody>tr:hover>td,
html[class^="theme-"] .table-hover>tbody>tr:hover>th,
html[class^="theme-"] .fancyTable tbody tr:hover td,
html[class^="theme-"] .ExcelTable2007 tbody tr:hover td,
html[class^="theme-"] .ExcelTable2007 tbody tr.current td {
    box-shadow: none !important;
    transition: none !important;
}

/* Respect users that prefer reduced motion: turn off transitions entirely */
@media (prefers-reduced-motion: reduce) {

    html[class^="theme-"] *,
    html[class^="theme-"] {
        transition: none !important;
    }
}

/* Theme toggle button base and light hover */
/* Reapply compact sizing so it doesn't increase navbar height */
.theme-toggle-btn {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

.theme-toggle-btn:hover {
    background-color: var(--nord5);
}

/* Theme toggle icons visibility */
#theme-toggle .theme-icon-sun,
#theme-toggle .theme-icon-moon {
    display: inline-block;
}

html.theme-dark #theme-toggle .theme-icon-sun {
    display: none;
}

html.theme-dark #theme-toggle .theme-icon-moon {
    display: inline-block;
}

html.theme-light #theme-toggle .theme-icon-sun {
    display: inline-block;
}

html.theme-light #theme-toggle .theme-icon-moon {
    display: none;
}

/* Base (explicit Dark mode) */
html.theme-dark body {
    background-color: var(--nord0);
    color: var(--nord6);
}

html.theme-dark a {
    color: var(--nord8);
}

html.theme-dark a:hover {
    color: var(--nord7);
}

/* Navbar */
html.theme-dark .navbar {
    background-color: var(--nord1);
    border-color: var(--nord2);
    /* Replace light-theme shadow/highlight with a darker drop shadow */
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

html.theme-dark .navbar .navbar-brand,
html.theme-dark .navbar .nav>li>a {
    color: var(--nord6);
}

html.theme-dark .navbar .nav>li>a:hover {
    background-color: var(--nord2);
}

/* Ensure active/open navbar items match Nord palette instead of deep black */
html.theme-dark .navbar-inverse .navbar-nav>li.active>a,
html.theme-dark .navbar-inverse .navbar-nav>li.active>a:hover,
html.theme-dark .navbar-inverse .navbar-nav>li.active>a:focus,
html.theme-dark .navbar-inverse .navbar-nav>li.open>a,
html.theme-dark .navbar-inverse .navbar-nav>li.open>a:hover,
html.theme-dark .navbar-inverse .navbar-nav>li.open>a:focus,
html.theme-dark .navbar .dropdown.active>a,
html.theme-dark .navbar .dropdown.active>a:hover,
html.theme-dark .navbar .dropdown.active>a:focus {
    background-color: var(--nord2);
    color: var(--nord6);
    border-color: var(--nord2);
}

/* Navbar widgets: reportrange + select-bookmark (Dark) */
/* reportrange has inline light styles; override with !important in dark mode */
html.theme-dark #reportrange {
    background-color: var(--nord2) !important;
    color: var(--nord6) !important;
    border: 1px solid var(--nord3) !important;
    border-radius: 6px;
    margin-top: 9px;
    margin-bottom: 0;
}

html.theme-dark #reportrange:hover {
    background-color: var(--nord3) !important;
}

html.theme-dark #reportrange .glyphicon,
html.theme-dark #reportrange .fa {
    color: var(--nord6) !important;
}

/* Bootstrap caret uses borders for color */
html.theme-dark #reportrange .caret {
    border-top-color: var(--nord6) !important;
    border-bottom-color: var(--nord6) !important;
}

/* Bookmark select in navbar */
html.theme-dark #select-bookmark.form-control {
    background-color: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
    border-radius: 6px;
    height: 32px;
    /* compact to match navbar */
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 9px;
    margin-bottom: 9px;
    border-top: 0;
    border-bottom: 0;
}

html.theme-dark .navbar #select-bookmark.form-control {
    width: auto;
}

html.theme-dark #select-bookmark.form-control option.placeholder {
    color: var(--nord4);
}

/* Panels and wells */
html.theme-dark .panel {
    background-color: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark .panel-heading {
    background-color: var(--nord2);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark .well {
    background-color: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
}

/* Builder tabs (Table Builder) */
/* Scope dark styling to the specific tabs list so we don't affect other navs */
html.theme-dark #table_builder_tabs {
    border-bottom: 1px solid var(--nord3);
}

html.theme-dark #table_builder_tabs>li>a {
    background-color: var(--nord1);
    color: var(--nord6);
    border: 1px solid var(--nord3);
    border-bottom-color: var(--nord3);
}

html.theme-dark #table_builder_tabs>li>a:hover,
html.theme-dark #table_builder_tabs>li>a:focus {
    background-color: var(--nord2);
    color: var(--nord6);
    border-color: var(--nord3);
}

html.theme-dark #table_builder_tabs>li.active>a,
html.theme-dark #table_builder_tabs>li.active>a:hover,
html.theme-dark #table_builder_tabs>li.active>a:focus {
    background-color: var(--nord0);
    color: var(--nord6);
    border: 1px solid var(--nord3);
    border-bottom-color: transparent;
    /* blend with content below */
}

/* Optional: give the tab-content below a subtle border to match tabs */
html.theme-dark #table_builder_tabs+.tab-content {
    background-color: var(--nord0);
    color: var(--nord6);
    border-top: none;
}

/* Forms */
html.theme-dark .form-control {
    background-color: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
    border-radius: 6px;
}

html.theme-dark .form-control:focus {
    border-color: var(--nord8);
    box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.25);
}

html.theme-dark label {
    color: var(--nord5);
}

/* Some modals use a plain input without .form-control (e.g., #form_bookmark_name).
   Ensure it gets dark styling too. */
html.theme-dark #form_bookmark_name {
    background-color: var(--nord1);
    color: var(--nord6);
    border: 1px solid var(--nord3);
    border-radius: 6px;
    padding: .5rem;
}

html.theme-dark #form_bookmark_name:focus {
    border-color: var(--nord8);
    box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.25);
    outline: none;
}

html.theme-dark #form_bookmark_name::placeholder {
    color: var(--nord4);
    opacity: .7;
}

/* Buttons */
html.theme-dark .btn-default {
    background-color: var(--nord2);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark .btn-default:hover {
    background-color: var(--nord3);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark .btn-primary {
    background-color: var(--nord10);
    border-color: var(--nord10);
}

html.theme-dark .btn-primary:hover {
    background-color: var(--nord9);
    border-color: var(--nord9);
}

html.theme-dark .dashboard_object_wrapper .widget_content {
    border-bottom: solid var(--nord3);
}

/* Tables */
html.theme-dark table {
    color: var(--nord6);
}

/* Table headers: JetBrains-like header tone and slightly softer text */
html.theme-dark .table>thead>tr>th {
    background-color: var(--nord2);
    border-color: var(--nord3);
    color: var(--nord5);
}

html.theme-dark .table>tbody>tr>td {
    border-color: var(--nord3);
}

html.theme-dark .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--nord1);
}

html.theme-dark .table-striped>tbody>tr:nth-of-type(even) {
    background-color: var(--nord2);
}

/* Use cell-level hover to ensure it overrides any TD backgrounds from zebra/base CSS */
html.theme-dark .table-hover>tbody>tr:hover>td,
html.theme-dark .table-hover>tbody>tr:hover>th {
    background-color: rgba(216, 222, 233, 0.38);
}

/* Legacy fancyTable hover support */
html.theme-dark .fancyTable tbody tr:hover td {
    background-color: rgba(216, 222, 233, 0.38);
}

/* Alerts */
html.theme-dark .alert-success {
    background-color: #1f2a22;
    border-color: #355e3b;
    color: #cfe7d1;
}

html.theme-dark .alert-danger {
    background-color: #2a1f23;
    border-color: #6b3036;
    color: #f2c9cd;
}

html.theme-dark .alert-warning {
    background-color: var(--nord1);
    border-color: var(--nord13);
    color: var(--nord6);
}

/* Excel-like sticky table overrides (Nord dark) */
/* Base cell colors: odd rows darker (nord1), even rows slightly lighter (nord2) */
html.theme-dark .ExcelTable2007 tbody tr:nth-child(odd) td {
    background-color: var(--nord1);
}

html.theme-dark .ExcelTable2007 tbody tr:nth-child(even) td {
    background-color: var(--nord2);
}

/* If explicit striped rows are used, make sure they follow Nord too */
html.theme-dark .ExcelTable2007 tr.striped td {
    background-color: var(--nord2);
}

/* Alternating darkening for colored cells in Dark Theme */
html.theme-dark .ExcelTable2007 tbody tr:nth-child(odd) td.colored-cell {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05);
}

/* Headers */
html.theme-dark .ExcelTable2007 thead tr.key th {
    background-color: var(--nord2);
    color: var(--nord5);
    border-color: var(--nord3);
}

html.theme-dark .ExcelTable2007 tr.key td,
html.theme-dark .ExcelTable2007 tr.key th.contentheader {
    background-color: var(--nord2);
    color: var(--nord5);
    border-color: var(--nord3);
}

/* Sticky left heading (row number) */
html.theme-dark .ExcelTable2007 tr td.heading.key {
    background-color: var(--nord1);
    border-color: var(--nord3);
}

html.theme-dark .ExcelTable2007 tr th.heading.key {
    background-color: var(--nord2);
    color: var(--nord5);
    border-color: var(--nord3);
}

/* First data column should follow row background */
html.theme-dark .ExcelTable2007 tr td.first-column {
    background-color: inherit;
    color: var(--nord6);
}

/* Generic cell text + borders */
html.theme-dark .ExcelTable2007 tr td {
    color: var(--nord6);
    border-color: var(--nord3);
}

/* Hover/current highlight brighter than base rows */
html.theme-dark .ExcelTable2007 tbody tr:hover td {
    background-color: rgba(216, 222, 233, 0.38);
}

html.theme-dark .ExcelTable2007 tbody tr.current td {
    background-color: rgba(216, 222, 233, 0.38);
}

/* Code blocks, pre */
html.theme-dark pre,
html.theme-dark code {
    background-color: var(--nord1);
    color: var(--nord6);
}

/* Modals */
html.theme-dark .modal-content {
    background-color: var(--nord1);
    color: var(--nord6);
    border-color: var(--nord3);
}

html.theme-dark .modal-header {
    border-bottom-color: var(--nord3);
}

html.theme-dark .modal-footer {
    border-top-color: var(--nord3);
}

/* Compute-heavy table opened without a filter (BITable/Table/filter_gate.html.twig) */
html.theme-dark .wd-filter-gate-text {
    color: var(--nord5);
}

/* Detail overlay opened from a table column (BITable/Overlay/modal.html.twig) */
html.theme-dark #wd-overlay-modal .modal-body {
    background: var(--nord0);
}

html.theme-dark #wd-table-advanced-modal .help-block,
html.theme-dark .wd-table-save-menu > li > a > span,
html.theme-dark #wd-table-add-dashboard-list .list-group-item small {
    color: var(--nord4);
}

/* Table editor: "Add to dashboard" picker */
html.theme-dark #wd-table-add-dashboard-list .list-group-item {
    background: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark #wd-table-add-dashboard-list a.list-group-item:hover,
html.theme-dark #wd-table-add-dashboard-list a.list-group-item:focus {
    background: var(--nord2);
    color: var(--nord6);
}

/* Table editor / chart builder: "Audit Log" viewer (BIBuilder/Audit/_modal.html.twig) */
html.theme-dark #wd-audit-list .list-group-item {
    background: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark #wd-audit-list a.list-group-item:hover,
html.theme-dark #wd-audit-list a.list-group-item:focus {
    background: var(--nord2);
    color: var(--nord6);
}

html.theme-dark #wd-audit-list .list-group-item.active,
html.theme-dark #wd-audit-list .list-group-item.active:hover,
html.theme-dark #wd-audit-list .list-group-item.active:focus {
    background: var(--nord10);
    border-color: var(--nord10);
    color: var(--nord6);
}

html.theme-dark #wd-audit-list .wd-audit-who,
html.theme-dark #wd-audit-list .wd-audit-what,
html.theme-dark .wd-audit-meta,
html.theme-dark .wd-audit-empty,
html.theme-dark .wd-audit-legend {
    color: var(--nord4);
}

html.theme-dark #wd-audit-list .list-group-item.active .wd-audit-who,
html.theme-dark #wd-audit-list .list-group-item.active .wd-audit-what {
    color: var(--nord6);
}

html.theme-dark .wd-audit-diff {
    background: var(--nord0);
    border-color: var(--nord3);
    color: var(--nord5);
}

html.theme-dark .wd-audit-line.wd-audit-add,
html.theme-dark .wd-audit-swatch.wd-audit-add {
    background: rgba(235, 203, 139, 0.38); /* nord13 */
    color: var(--nord6);
}

html.theme-dark .wd-audit-line.wd-audit-del,
html.theme-dark .wd-audit-swatch.wd-audit-del {
    background: var(--nord1);
    color: var(--nord3);
}

html.theme-dark .wd-audit-swatch {
    border-color: var(--nord3);
}

html.theme-dark #wd-table-advanced-modal .close,
html.theme-dark #wd-table-add-dashboard-modal .close,
html.theme-dark #wd-audit-modal .close,
html.theme-dark #wd-overlay-modal .close {
    color: var(--nord6);
    text-shadow: none;
    opacity: 0.7;
}

html.theme-dark .wd-ovl-card {
    background: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark .wd-ovl-card h4 {
    color: var(--nord6);
}

html.theme-dark .wd-ovl-card h4 .fa,
html.theme-dark .wd-ovl-card h4 small,
html.theme-dark .wd-ovl-facts dt,
html.theme-dark .wd-ovl-table th,
html.theme-dark .wd-ovl-note,
html.theme-dark .wd-ovl-empty,
html.theme-dark .wd-ovl-toggle-col,
html.theme-dark .wd-ovl-shipping td,
html.theme-dark .wd-ovl-loading,
html.theme-dark .wd-ovl-message {
    color: var(--nord4);
}

html.theme-dark .wd-ovl-table th,
html.theme-dark .wd-ovl-table td,
html.theme-dark .wd-ovl-subtable td {
    border-bottom-color: var(--nord3);
}

html.theme-dark .wd-ovl-order:hover > td {
    background: var(--nord2);
}

html.theme-dark .wd-ovl-order.wd-ovl-current > td {
    background: rgba(88, 157, 246, 0.16);
}

html.theme-dark .wd-ovl-negative {
    color: #ff8a80;
}

html.theme-dark .wd-ovl-pill {
    background: var(--nord3);
    color: var(--nord5);
}

html.theme-dark .wd-ovl-pill-ok {
    background: rgba(98, 181, 67, 0.22);
    color: #9fd88a;
}

html.theme-dark .wd-ovl-pill-warn {
    background: rgba(230, 170, 60, 0.22);
    color: #f0c674;
}

html.theme-dark .wd-ovl-pill-bad {
    background: rgba(230, 90, 80, 0.24);
    color: #ff9c94;
}

/* Tables inside dashboard objects */

html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4,
html.theme-dark h5,
html.theme-dark h6 {
    color: var(--nord6);
}

/* Inputs placeholder */
html.theme-dark ::placeholder {
    color: var(--nord4);
    opacity: 0.7;
}

/* Horizontal rules */
html.theme-dark hr {
    border-top: 1px solid var(--nord3);
}

/* Dropdowns */
html.theme-dark .dropdown-menu {
    background-color: var(--nord1);
    border-color: var(--nord3);
}

html.theme-dark .dropdown-menu>li>a {
    color: var(--nord6);
}

html.theme-dark .dropdown-menu>li>a:hover {
    background-color: var(--nord2);
}

/* Active item inside dropdown menus */
html.theme-dark .dropdown-menu>li.active>a,
html.theme-dark .dropdown-menu>li.active>a:hover,
html.theme-dark .dropdown-menu>li.active>a:focus {
    background-color: var(--nord3);
    color: var(--nord6);
}

/* Filter Mask & Panel (Filters UI) */
html.theme-dark #filterMask {
    /* Darken the page behind the panel with Polar Night tone */
    background-color: var(--nord0);
    opacity: 0.6;
}

html.theme-dark #filterPanel {
    background-color: var(--nord1);
    color: var(--nord6);
    /* Softer shadow suitable for dark surfaces. The bottom hairline is an inset
       shadow rather than a border: the panel is sized with a content-box
       height, so a real border would make it render 1px taller than the JS
       geometry assumes and the activator would overlap its bottom edge. */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), inset 0 -1px 0 var(--nord3);
}

html.theme-dark #filterPanel .filter-panel-footer {
    background-color: var(--nord1);
    border-top-color: var(--nord3);
}

html.theme-dark #filterPanelActivator {
    background-color: #3964b9;
    /* requested explicit color in dark mode */
    color: var(--nord6);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}

html.theme-dark #filterPanelActivator:hover {
    background-color: #4a75c7;
}

/* Breadcrumbs */
html.theme-dark .breadcrumb {
    background-color: var(--nord1);
    border: 1px solid var(--nord3);
}

/* Tables inside Bootstrap panels */
html.theme-dark .panel .table>thead>tr>th {
    background-color: var(--nord2);
}

/* Ensure the GTM spacer container remains readable */
html.theme-dark .container {
    color: var(--nord6);
}

/* Simple widget placeholder: when inline style sets text color to #333 (wide variant),
   use requested blue background in dark mode. Attribute selector targets the inline style. */
html.theme-dark .dashboard-widget [style*="#111"] {
    background-color: #31708f !important;
}

html.theme-dark .dashboard-widget[style*="#111"] {
    background-color: #31708f !important;
}

html.theme-dark .dashboard_object_wrapper:has(.dashboard-widget[style*="#111"]) {
    background-color: #31708f !important;
}

/* Bookmark select in navbar */

html.theme-dark ul.select-list li,
html.theme-dark ul.drag-list li,
html.theme-dark ul.drop-list li {
    background-color: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
    border-radius: 6px;
    height: 32px;
    /* compact to match navbar */
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 9px;
    margin-bottom: 9px;
    border-top: 0;
    border-bottom: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}


div.widget_content {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 5px;
}


html.theme-dark div.dashboard_object_wrapper {
    background-color: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
    border-radius: 6px;
    height: 32px;
    /* compact to match navbar */
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 9px;
    border-top: 0;
    border-bottom: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}


html.theme-light div.dashboard_object_wrapper {

    border-radius: 6px;
    height: 32px;
    /* compact to match navbar */
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 9px;
    border-top: 0;
    border-bottom: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Generic dark-mode fix: any DIV that inlines a black background should use #31708f instead.
   Covers common inline notations: "background-color: black", "background-color:#000",
   "background-color:#000000", and rgb(0,0,0). Also catch shorthand "background:" usages. */
html.theme-dark div[style*="background-color: black"],
html.theme-dark div[style*="background-color:black"],
html.theme-dark div[style*="background-color:#000"],
html.theme-dark div[style*="background-color: #000"],
html.theme-dark div[style*="background-color:#000000"],
html.theme-dark div[style*="background-color: #000000"],
html.theme-dark div[style*="background-color:rgb(0,0,0)"],
html.theme-dark div[style*="background-color: rgb(0, 0, 0)"],
html.theme-dark div[style*="background: black"],
html.theme-dark div[style*="background:black"],
html.theme-dark div[style*="background:#000"],
html.theme-dark div[style*="background: #000"],
html.theme-dark div[style*="background:#000000"],
html.theme-dark div[style*="background: #000000"],
html.theme-dark div[style*="background:rgb(0,0,0)"],
html.theme-dark div[style*="background: rgb(0, 0, 0)"] {
    background-color: #31708f !important;
}

html.theme-dark div.trend_widget {
    border-bottom-color: #31708f !important;
}

/* Dark-mode fix: triangle-down glyphs colored black should use #31708f */
/* General rule for the glyph in dark mode */
html.theme-dark .glyphicon.glyphicon-triangle-bottom {
    color: #31708f;
}

/* Ensure we override inline black colors as well */
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color: black"],
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color:black"],
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color:#000"],
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color: #000"],
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color:#000000"],
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color: #000000"],
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color:rgb(0,0,0)"],
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color: rgb(0, 0, 0)"] {
    color: #31708f !important;
}

/* Dark-mode hover for theme toggle button */
html.theme-dark .theme-toggle-btn:hover {
    background-color: var(--nord3);
}

/* Charts: make SVG grid lines finer and less bright in dark mode */
html.theme-dark svg .grid line {
    /* Use a soft light tone with low opacity so lines are subtle on dark bg */
    stroke: var(--nord4);
    stroke-opacity: 0.25;
    stroke-width: 0.5px;
    shape-rendering: crispEdges;
}

/* Chart Tooltips (.info) dark mode contrast */
html.theme-dark .info {
    background-color: var(--nord1) !important;
    border: 1px solid var(--nord3) !important;
    color: var(--nord6) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    opacity: 0.95 !important;
    border-radius: 4px;
}

html.theme-dark .info .category,
html.theme-dark .info .xValue {
    color: var(--nord5) !important;
    font-weight: bold;
    border-bottom: 1px solid var(--nord3);
    margin-bottom: 5px;
    padding-bottom: 3px;
}

/* Legend tooltips */
html.theme-dark .series:hover::after {
    background-color: var(--nord1) !important;
    color: var(--nord6) !important;
    border-color: var(--nord3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Light mode explicit tweaks (when user forces light) */
html.theme-light .form-control {
    background-color: #ffffff;
    border-color: var(--nord5);
    color: #111;
    border-radius: 6px;
}

html.theme-light .form-control:focus {
    border-color: var(--nord10);
    box-shadow: 0 0 0 2px rgba(94, 129, 172, 0.25);
}

/* SortableJS Fallback (Drag Preview) - Dark Mode */
html.theme-dark .sortable-fallback {
    background-color: var(--nord1) !important;
    border-color: var(--nord3) !important;
    color: var(--nord6) !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5) !important;
}

html.theme-dark .ghost {
    background-color: var(--nord2) !important;
    opacity: 0.5;
}

html.theme-light ::placeholder {
    color: #6b7280;
    opacity: .8;
}

html.theme-light label {
    color: #111;
}

h2.dashboard_object_title {
    margin-top: 10px;

}

div.dashboard_table {
    margin-bottom: 10px;

}

/* Navbar glow for light mode */
html.theme-light .navbar .nav>li>a:hover {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Navbar glow for dark mode */
html.theme-dark .navbar .nav>li>a:hover {
    background-color: var(--nord2);
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Popovers - Dark theme */
html.theme-dark .popover {
    background-color: var(--nord1);
    border: 1px solid var(--nord3);
}

html.theme-dark .popover-content {
    color: var(--nord6);
}

html.theme-dark .popover-title {
    background-color: var(--nord2);
    border-bottom: 1px solid var(--nord3);
    color: var(--nord6);
}

html.theme-dark .popover.right>.arrow:after {
    border-right-color: var(--nord1);
}

html.theme-dark .popover.left>.arrow:after {
    border-left-color: var(--nord1);
}

html.theme-dark .popover.top>.arrow:after {
    border-top-color: var(--nord1);
}

html.theme-dark .popover.bottom>.arrow:after {
    border-bottom-color: var(--nord1);
}

/* Custom sizer input - Dark theme */
html.theme-dark .custom-sizer {
    background-color: var(--nord1) !important;
    border-color: var(--nord3) !important;
    color: var(--nord6) !important;
}

/* Size changer choice - Dark theme */
html.theme-dark .size-changer-choice,
html.theme-dark div.size-changer-choice {
    background-color: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark .size-changer-choice:hover,
html.theme-dark div.size-changer-choice:hover {
    background-color: var(--nord2);
}

/* Elements searchbar inputs - Dark theme */
html.theme-dark #elements-searchbar1,
html.theme-dark #elements-searchbar2,
html.theme-dark #elements-searchbar3,
html.theme-dark #elements-searchbar4 {
    background-color: var(--nord1) !important;
    border-color: var(--nord3) !important;
    color: var(--nord6) !important;
}

html.theme-dark #elements-searchbar1::placeholder,
html.theme-dark #elements-searchbar2::placeholder,
html.theme-dark #elements-searchbar3::placeholder,
html.theme-dark #elements-searchbar4::placeholder {
    color: var(--nord4);
    opacity: 0.7;
}

/* Date range picker dropdown (reportrange calendar + quick ranges).
   The vendor stylesheet (daterangepicker-bs3.css) is light-only, so every
   inner surface needs a dark override here. */
html.theme-dark .daterangepicker {
    background-color: var(--nord1);
    color: var(--nord6);
}

/* The little arrow pointing at the navbar button */
html.theme-dark .daterangepicker.opensleft:after,
html.theme-dark .daterangepicker.opensright:after,
html.theme-dark .daterangepicker.openscenter:after {
    border-bottom-color: var(--nord1);
}

/* White box around each month grid */
html.theme-dark .daterangepicker .calendar-date {
    background: var(--nord1);
    border-color: var(--nord3);
}

html.theme-dark .daterangepicker .calendar th,
html.theme-dark .daterangepicker .calendar td {
    color: var(--nord6);
}

html.theme-dark .daterangepicker td.off,
html.theme-dark .daterangepicker td.disabled,
html.theme-dark .daterangepicker option.disabled {
    color: var(--nord4);
    opacity: 0.5;
}

html.theme-dark .daterangepicker td.week,
html.theme-dark .daterangepicker th.week {
    color: var(--nord4);
    opacity: 0.6;
}

html.theme-dark .daterangepicker td.available:hover,
html.theme-dark .daterangepicker th.available:hover {
    background: var(--nord3);
}

/* Days between start and end date */
html.theme-dark .daterangepicker td.in-range {
    background: rgba(53, 116, 240, 0.28);
    color: var(--nord6);
}

html.theme-dark .daterangepicker td.active,
html.theme-dark .daterangepicker td.active:hover {
    background-color: var(--nord10);
    border-color: var(--nord10);
    color: #fff;
}

/* Month/year dropdowns in the calendar header */
html.theme-dark .daterangepicker select.monthselect,
html.theme-dark .daterangepicker select.yearselect,
html.theme-dark .daterangepicker select.hourselect,
html.theme-dark .daterangepicker select.minuteselect,
html.theme-dark .daterangepicker select.secondselect,
html.theme-dark .daterangepicker select.ampmselect {
    background-color: var(--nord1);
    color: var(--nord6);
    border: 1px solid var(--nord3);
}

/* Quick-range pills (Today, Yesterday, Last 7 Days, ...) */
html.theme-dark .daterangepicker .ranges li {
    background: var(--nord2);
    border: 1px solid var(--nord3);
    color: var(--nord9);
}

html.theme-dark .daterangepicker .ranges li.active,
html.theme-dark .daterangepicker .ranges li:hover {
    background: var(--nord10);
    border: 1px solid var(--nord10);
    color: #fff;
}

/* FROM / TO labels and inputs of the custom range */
html.theme-dark .daterangepicker .daterangepicker_start_input label,
html.theme-dark .daterangepicker .daterangepicker_end_input label,
html.theme-dark .daterangepicker .daterangepicker_applies_to_wrap label {
    color: var(--nord5);
    text-shadow: none;
}

html.theme-dark .daterangepicker .ranges .input-mini {
    background-color: var(--nord1);
    border: 1px solid var(--nord3);
    color: var(--nord6);
}

/* "Applies to" filter selector inside the picker */
html.theme-dark .daterangepicker select.daterangepicker_applies_to {
    background-color: var(--nord1);
    border: 1px solid var(--nord3);
    color: var(--nord6);
}

/* ---- select2 (v3) pickers: single + multi/tags + dropdown ----
   Used by the dashboard filter panel and the Filter Manager placeholder /
   column-mapping pickers. The stock select2.css is light-only (white
   gradients), so every surface needs an explicit dark override. */
html.theme-dark .select2-container .select2-choice,
html.theme-dark .select2-container-multi .select2-choices {
    background: var(--nord1);
    background-image: none;
    border: 1px solid var(--nord3);
    color: var(--nord6);
}

html.theme-dark .select2-container .select2-choice > .select2-chosen {
    color: var(--nord6);
}

html.theme-dark .select2-container .select2-choice .select2-arrow {
    background: var(--nord2);
    background-image: none;
    border-left: 1px solid var(--nord3);
}

html.theme-dark .select2-dropdown-open .select2-choice,
html.theme-dark .select2-dropdown-open.select2-drop-above .select2-choice,
html.theme-dark .select2-dropdown-open.select2-drop-above .select2-choices {
    background-color: var(--nord1);
    background-image: none;
}

html.theme-dark .select2-container-active .select2-choice,
html.theme-dark .select2-container-multi.select2-container-active .select2-choices {
    border: 1px solid var(--nord10);
    box-shadow: none;
}

/* The dropdown itself (results panel + search box) */
html.theme-dark .select2-drop {
    background: var(--nord1);
    border: 1px solid var(--nord3);
    color: var(--nord6);
}

html.theme-dark .select2-search input {
    background: var(--nord0) url('../js/select2/select2.png') no-repeat 100% -22px;
    border: 1px solid var(--nord3);
    color: var(--nord6);
}

html.theme-dark .select2-search input.select2-active {
    background: var(--nord0) url('../js/select2/select2-spinner.gif') no-repeat 100%;
}

html.theme-dark .select2-results {
    background: var(--nord1);
}

html.theme-dark .select2-results li {
    color: var(--nord6);
}

html.theme-dark .select2-results .select2-highlighted {
    background: var(--nord10);
    color: #fff;
}

html.theme-dark .select2-results .select2-no-results,
html.theme-dark .select2-results .select2-searching,
html.theme-dark .select2-results .select2-selection-limit,
html.theme-dark .select2-results .select2-disabled,
html.theme-dark .select2-more-results {
    background: var(--nord2);
    color: var(--nord4);
}

/* Chips of multi/tags pickers (e.g. linked warehouse tables) */
html.theme-dark .select2-container-multi .select2-choices .select2-search-choice {
    background: var(--nord2);
    background-image: none;
    border: 1px solid var(--nord3);
    color: var(--nord5);
    box-shadow: none;
}

html.theme-dark .select2-container-multi .select2-choices .select2-search-field input {
    color: var(--nord6);
}

/* Placeholder text ("placeholder…", "column name", "warehouse tables…") */
html.theme-dark .select2-default,
html.theme-dark .select2-container-multi .select2-choices .select2-search-field input.select2-default {
    color: var(--nord4) !important;
}

/* Usermanager badges: "User Group" / "inherits access" chips in the user list */
html.theme-dark .label-info {
    background-color: var(--nord9);
    color: var(--nord0);
}

html.theme-dark .label-default {
    background-color: var(--nord3);
    color: var(--nord5);
}

/* User settings / user admin: API tokens (BIMcp/Settings/_api_tokens.html.twig) */
html.theme-dark #wd-api-tokens h3 small,
html.theme-dark #wd-api-tokens h2 small,
html.theme-dark #wd-api-tokens .help-block,
html.theme-dark #wd-api-tokens td small {
    color: var(--nord4);
}

html.theme-dark #wd-api-tokens pre {
    background: var(--nord0);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark #wd-api-tokens .wd-api-token-new {
    background: var(--nord1);
    border-color: var(--nord14);
    color: var(--nord6);
}

html.theme-dark #wd-api-tokens code {
    background: var(--nord1);
    color: var(--nord13);
}

/* OAuth consent + error pages (BIMcp/OAuth/consent.html.twig, error.html.twig) */
html.theme-dark #wd-oauth-consent .well,
html.theme-dark #wd-oauth-error .well {
    background: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark #wd-oauth-consent .help-block,
html.theme-dark #wd-oauth-error .help-block,
html.theme-dark #wd-oauth-consent h3 small {
    color: var(--nord4);
}

html.theme-dark #wd-oauth-consent code,
html.theme-dark #wd-oauth-error code,
html.theme-dark #wd-api-tokens .wd-oauth-howto code {
    background: var(--nord0);
    color: var(--nord13);
}

html.theme-dark #wd-oauth-consent .alert-warning {
    background: var(--nord1);
    border-color: var(--nord13);
    color: var(--nord6);
}

html.theme-dark #wd-oauth-consent a {
    color: var(--nord8);
}

/* Connect-Claude guide (BIMcp/Settings/guide.html.twig) + its link on the settings page */
html.theme-dark #wd-mcp-guide h1 small,
html.theme-dark #wd-mcp-guide h2 small,
html.theme-dark #wd-mcp-guide h4 small,
html.theme-dark #wd-mcp-guide .help-block,
html.theme-dark #wd-mcp-guide .lead {
    color: var(--nord4);
}

html.theme-dark #wd-mcp-guide pre {
    background: var(--nord0);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark #wd-mcp-guide code {
    background: var(--nord1);
    color: var(--nord13);
}

html.theme-dark #wd-mcp-guide .alert-info {
    background: var(--nord1);
    border-color: var(--nord8);
    color: var(--nord6);
}

html.theme-dark #wd-mcp-guide a:not(.btn),
html.theme-dark #wd-api-tokens .wd-api-token-guide {
    color: var(--nord8);
}

html.theme-dark #wd-mcp-guide .table > thead > tr > th,
html.theme-dark #wd-mcp-guide .table > tbody > tr > th,
html.theme-dark #wd-mcp-guide .table > tbody > tr > td {
    border-color: var(--nord3);
}

/* Data access profiles (BIDwh/Access/index.html.twig, edit.html.twig) — layout for both themes */
#wd-dwh-access .wd-dwh-inline { display: inline-block; margin: 0 0 0 4px; }
#wd-dwh-access .wd-dwh-header-actions { margin-top: 20px; }
#wd-dwh-access .form-inline .form-group { margin-right: 12px; }
#wd-dwh-access pre.wd-dwh-error { margin: 6px 0 0; padding: 6px 8px; font-size: 12px; white-space: pre-wrap; max-width: 520px; border-color: #d9534f; }
#wd-dwh-access .wd-dwh-when, #wd-dwh-access .wd-dwh-email, #wd-dwh-access .wd-dwh-comment, #wd-dwh-access .wd-dwh-column-count { color: #777; }
#wd-dwh-access .wd-dwh-back { margin-left: 12px; }
#wd-dwh-access .wd-dwh-empty { color: #777; font-style: italic; }
#wd-dwh-access #wd-dwh-table-search { max-width: 360px; margin-bottom: 6px; }
#wd-dwh-access .wd-dwh-table { border-top: 1px solid #e5e5e5; padding: 6px 0; }
#wd-dwh-access .wd-dwh-table.wd-dwh-enabled { background: #f7fafd; }
#wd-dwh-access .wd-dwh-table-head label { margin: 0 6px 0 0; font-weight: 600; }
#wd-dwh-access .wd-dwh-table-detail { padding: 6px 0 0 22px; }
#wd-dwh-access .wd-dwh-table-detail .form-group { margin-bottom: 8px; }
#wd-dwh-access .wd-dwh-columns { margin-top: 6px; max-height: 260px; overflow-y: auto; }
#wd-dwh-access .wd-dwh-columns:not(:empty) { border: 1px solid #ddd; border-radius: 3px; padding: 6px 8px; background: #fff; }
#wd-dwh-access .wd-dwh-column { display: inline-block; min-width: 260px; margin: 0 12px 2px 0; font-weight: normal; }
#wd-dwh-access .wd-dwh-check { margin-top: 4px; }
#wd-dwh-access .wd-dwh-check-result { margin-left: 6px; white-space: pre-wrap; }
#wd-dwh-access .wd-dwh-check-ok { color: #3c763d; }
#wd-dwh-access .wd-dwh-check-error { color: #a94442; }
#wd-dwh-access .wd-dwh-user { display: inline-block; min-width: 300px; margin: 0 12px 4px 0; font-weight: normal; }
#wd-dwh-access .wd-dwh-resolved th { font-weight: normal; vertical-align: top; }
#wd-dwh-access .wd-dwh-values { max-height: 140px; overflow-y: auto; font-size: 12px; }
#wd-dwh-access .wd-dwh-value { display: inline-block; margin: 2px 4px 0 0; padding: 0 5px; border: 1px solid #ccc; border-radius: 3px; }

/* Data access profiles — dark theme */
html.theme-dark #wd-dwh-access .panel { background: var(--nord1); border-color: var(--nord3); }
html.theme-dark #wd-dwh-access .panel-heading { background: var(--nord2); border-color: var(--nord3); color: var(--nord6); }
html.theme-dark #wd-dwh-access .panel-body,
html.theme-dark #wd-dwh-access .help-block,
html.theme-dark #wd-dwh-access h1 small,
html.theme-dark #wd-dwh-access .wd-dwh-when,
html.theme-dark #wd-dwh-access .wd-dwh-email,
html.theme-dark #wd-dwh-access .wd-dwh-comment,
html.theme-dark #wd-dwh-access .wd-dwh-column-count,
html.theme-dark #wd-dwh-access .wd-dwh-empty { color: var(--nord4); }
html.theme-dark #wd-dwh-access pre.wd-dwh-error { background: var(--nord0); border-color: var(--nord11); color: var(--nord6); }
html.theme-dark #wd-dwh-access code { background: var(--nord0); color: var(--nord13); }
html.theme-dark #wd-dwh-access .wd-dwh-table { border-color: var(--nord3); }
html.theme-dark #wd-dwh-access .wd-dwh-table.wd-dwh-enabled { background: var(--nord2); }
html.theme-dark #wd-dwh-access .wd-dwh-columns:not(:empty) { background: var(--nord0); border-color: var(--nord3); }
html.theme-dark #wd-dwh-access .wd-dwh-check-ok { color: var(--nord14); }
html.theme-dark #wd-dwh-access .wd-dwh-check-error { color: var(--nord11); }
html.theme-dark #wd-dwh-access .wd-dwh-value { border-color: var(--nord3); color: var(--nord8); }
html.theme-dark #wd-dwh-access .table > thead > tr > th,
html.theme-dark #wd-dwh-access .table > tbody > tr > td { border-color: var(--nord3); }
html.theme-dark #wd-dwh-access a:not(.btn) { color: var(--nord8); }
html.theme-dark #wd-dwh-access .label-warning { background-color: var(--nord13); color: var(--nord0); }

/* Company knowledge admin (BIMcp/Knowledge/index, edit, history) — layout for both themes */
#wd-mcp-knowledge [hidden] { display: none !important; }
#wd-mcp-knowledge .wd-kn-header-actions { margin-top: 20px; }
#wd-mcp-knowledge .wd-kn-inline { display: inline-block; margin: 0 0 0 4px; }
#wd-mcp-knowledge .wd-kn-back { margin-left: 12px; }
#wd-mcp-knowledge .wd-kn-meta .label { margin-right: 6px; }
#wd-mcp-knowledge .wd-kn-muted, #wd-mcp-knowledge .wd-kn-staff-note { color: #777; }
#wd-mcp-knowledge .wd-kn-empty { color: #777; font-style: italic; }
#wd-mcp-knowledge .wd-kn-company { margin-bottom: 12px; padding: 8px 10px; background: #f5f7fa; border: 1px solid #e1e5eb; border-radius: 3px; }
#wd-mcp-knowledge .wd-kn-company label { margin-right: 6px; }
#wd-mcp-knowledge .wd-kn-company .wd-kn-staff-note { margin-left: 12px; font-size: 12px; }
#wd-mcp-knowledge .wd-kn-summary { color: #666; font-size: 12px; margin-top: 2px; max-width: 520px; }
#wd-mcp-knowledge .wd-kn-tables code { display: inline-block; margin: 0 2px 2px 0; font-size: 11px; }
#wd-mcp-knowledge .wd-kn-version { font-size: 11px; color: #999; }
#wd-mcp-knowledge .wd-kn-actions { white-space: nowrap; }
#wd-mcp-knowledge .wd-kn-audience { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 12px; border: 1px solid #ccc; color: #555; background: #fff; }
#wd-mcp-knowledge .wd-kn-audience-everyone { border-color: #5cb85c; color: #3c763d; }
#wd-mcp-knowledge .wd-kn-audience-editors { border-color: #5bc0de; color: #31708f; }
#wd-mcp-knowledge .wd-kn-audience-profile { border-color: #337ab7; color: #23527c; }
#wd-mcp-knowledge .wd-kn-audience-internal { border-color: #d9534f; color: #a94442; background: #fdf3f3; }
#wd-mcp-knowledge .wd-kn-no-reach, #wd-mcp-knowledge .wd-kn-no-reach-help, #wd-mcp-knowledge .wd-kn-scan-hit { color: #8a6d3b; font-size: 12px; }
#wd-mcp-knowledge .wd-kn-upload-report .table { margin-bottom: 0; }
#wd-mcp-knowledge .wd-kn-upload-error td, #wd-mcp-knowledge .wd-kn-upload-blocked td { color: #a94442; }
#wd-mcp-knowledge .wd-kn-upload .form-group { margin-right: 12px; }
#wd-mcp-knowledge .wd-kn-findings { margin: 6px 0 0; padding-left: 18px; }
#wd-mcp-knowledge .wd-kn-finding-kind { font-weight: 600; }
#wd-mcp-knowledge .wd-kn-staff-choice { margin: 10px 0 0; }
#wd-mcp-knowledge .wd-kn-tabs { margin-bottom: 0; }
#wd-mcp-knowledge .wd-kn-tabs > li > a { padding: 6px 12px; }
#wd-mcp-knowledge textarea.wd-kn-body, #wd-mcp-knowledge pre.wd-kn-preview { border-top-left-radius: 0; border-top-right-radius: 0; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; }
#wd-mcp-knowledge textarea.wd-kn-tables-input { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; }
#wd-mcp-knowledge pre.wd-kn-preview { min-height: 420px; max-height: 70vh; overflow: auto; white-space: pre-wrap; word-wrap: break-word; margin: 0; background: #fbfbfb; }
#wd-mcp-knowledge .wd-kn-buttons { margin: 12px 0 30px; }
#wd-mcp-knowledge .wd-kn-versions .wd-kn-selected > td { font-weight: 600; }
#wd-mcp-knowledge .wd-kn-diff-select select { margin: 0 4px; }
#wd-mcp-knowledge pre.wd-kn-diff { padding: 0; max-height: 70vh; overflow: auto; font-size: 12px; background: #fff; }
#wd-mcp-knowledge pre.wd-kn-diff > span { display: block; padding: 0 8px; white-space: pre-wrap; word-wrap: break-word; }
#wd-mcp-knowledge .wd-kn-add { background: #e6ffed; color: #22863a; }
#wd-mcp-knowledge .wd-kn-del { background: #ffeef0; color: #b31d28; }
#wd-mcp-knowledge .wd-kn-same { color: #555; }
#wd-mcp-knowledge .wd-kn-field-changes th { width: 110px; }
#wd-mcp-knowledge .wd-kn-field-changes td { white-space: pre-wrap; }

html.theme-dark #wd-mcp-knowledge .panel { background: var(--nord1); border-color: var(--nord3); }
html.theme-dark #wd-mcp-knowledge .panel-heading { background: var(--nord2); border-color: var(--nord3); color: var(--nord6); }
html.theme-dark #wd-mcp-knowledge .page-header { border-color: var(--nord3); }
html.theme-dark #wd-mcp-knowledge .panel-body,
html.theme-dark #wd-mcp-knowledge .help-block,
html.theme-dark #wd-mcp-knowledge h1 small,
html.theme-dark #wd-mcp-knowledge .wd-kn-muted,
html.theme-dark #wd-mcp-knowledge .wd-kn-staff-note,
html.theme-dark #wd-mcp-knowledge .wd-kn-summary,
html.theme-dark #wd-mcp-knowledge .wd-kn-version,
html.theme-dark #wd-mcp-knowledge .wd-kn-empty,
html.theme-dark #wd-mcp-knowledge .wd-kn-same { color: var(--nord4); }
html.theme-dark #wd-mcp-knowledge code { background: var(--nord0); color: var(--nord13); }
html.theme-dark #wd-mcp-knowledge a:not(.btn) { color: var(--nord8); }
html.theme-dark #wd-mcp-knowledge .table > thead > tr > th,
html.theme-dark #wd-mcp-knowledge .table > tbody > tr > th,
html.theme-dark #wd-mcp-knowledge .table > tbody > tr > td { border-color: var(--nord3); }
html.theme-dark #wd-mcp-knowledge .wd-kn-company { background: var(--nord1); border-color: var(--nord3); color: var(--nord6); }
html.theme-dark #wd-mcp-knowledge .wd-kn-audience { background: transparent; border-color: var(--nord3); color: var(--nord4); }
html.theme-dark #wd-mcp-knowledge .wd-kn-audience-everyone { border-color: var(--nord14); color: var(--nord14); }
html.theme-dark #wd-mcp-knowledge .wd-kn-audience-editors { border-color: var(--nord8); color: var(--nord8); }
html.theme-dark #wd-mcp-knowledge .wd-kn-audience-profile { border-color: var(--nord9); color: var(--nord9); }
html.theme-dark #wd-mcp-knowledge .wd-kn-audience-internal { border-color: var(--nord11); color: var(--nord11); background: transparent; }
html.theme-dark #wd-mcp-knowledge .wd-kn-no-reach,
html.theme-dark #wd-mcp-knowledge .wd-kn-no-reach-help,
html.theme-dark #wd-mcp-knowledge .wd-kn-scan-hit { color: var(--nord13); }
html.theme-dark #wd-mcp-knowledge .wd-kn-upload-error td,
html.theme-dark #wd-mcp-knowledge .wd-kn-upload-blocked td { color: var(--nord11); }
html.theme-dark #wd-mcp-knowledge .label-warning { background-color: var(--nord13); color: var(--nord0); }
html.theme-dark #wd-mcp-knowledge .label-success { background-color: var(--nord14); color: var(--nord0); }
html.theme-dark #wd-mcp-knowledge .wd-kn-tabs { border-color: var(--nord3); }
html.theme-dark #wd-mcp-knowledge .wd-kn-tabs > li > a { color: var(--nord8); }
html.theme-dark #wd-mcp-knowledge .wd-kn-tabs > li > a:hover { background: var(--nord2); border-color: var(--nord3); }
html.theme-dark #wd-mcp-knowledge .wd-kn-tabs > li.active > a,
html.theme-dark #wd-mcp-knowledge .wd-kn-tabs > li.active > a:hover,
html.theme-dark #wd-mcp-knowledge .wd-kn-tabs > li.active > a:focus { background: var(--nord1); border-color: var(--nord3) var(--nord3) transparent; color: var(--nord6); }
html.theme-dark #wd-mcp-knowledge pre.wd-kn-preview,
html.theme-dark #wd-mcp-knowledge pre.wd-kn-diff { background: var(--nord0); border-color: var(--nord3); color: var(--nord6); }
html.theme-dark #wd-mcp-knowledge .wd-kn-add { background: rgba(163, 190, 140, 0.2); color: #d4e8c4; }
/* the global `html.theme-dark a` colour beats .btn-primary: link buttons ("New article", "Accept as new article…") were blue on blue */
html.theme-dark #wd-mcp-knowledge a.btn-primary,
html.theme-dark #wd-mcp-knowledge a.btn-primary:hover,
html.theme-dark #wd-mcp-knowledge a.btn-primary:focus { color: #fff; }
html.theme-dark #wd-mcp-knowledge .wd-kn-del { background: rgba(191, 97, 106, 0.2); color: #f2c9cd; }
html.theme-dark #wd-mcp-knowledge .wd-kn-blocked code,
html.theme-dark #wd-mcp-knowledge .wd-kn-scan code { background: var(--nord0); }
html.theme-dark #wd-mcp-knowledge .btn-link { color: var(--nord8); }
html.theme-dark #wd-mcp-knowledge input[type="file"] { color: var(--nord6); }

/* Knowledge proposals (Task 4): nav badge on "Administration" / "Knowledge", section tabs, queue, review page */
.navbar .wd-nav-badge { background-color: #f0ad4e; color: #fff; font-size: 11px; padding: 2px 6px; margin-left: 2px; vertical-align: 1px; }
.dropdown-menu .wd-nav-badge { background-color: #f0ad4e; color: #fff; }
html.theme-dark .navbar .wd-nav-badge,
html.theme-dark .dropdown-menu .wd-nav-badge { background-color: var(--nord13); color: var(--nord0); }

#wd-mcp-knowledge .wd-kn-section-tabs { margin: 4px 0 12px; }
#wd-mcp-knowledge .wd-kn-section-tabs > li > a { padding: 8px 14px; }
#wd-mcp-knowledge .wd-kn-count { background-color: #f0ad4e; color: #fff; margin-left: 2px; }
#wd-mcp-knowledge .wd-kn-kind { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 12px; border: 1px solid #5bc0de; color: #31708f; background: #fff; }
#wd-mcp-knowledge .wd-kn-kind-correction { border-color: #f0ad4e; color: #8a6d3b; background: #fcf8e3; }
#wd-mcp-knowledge pre.wd-kn-proposal-text,
#wd-mcp-knowledge pre.wd-kn-evidence { margin: 0; border: 0; border-radius: 0 0 3px 3px; max-height: 50vh; overflow: auto; white-space: pre-wrap; word-wrap: break-word; font-size: 12px; background: #fbfbfb; color: #333; }
#wd-mcp-knowledge .wd-kn-proposal-facts p:last-child { margin-bottom: 0; }
#wd-mcp-knowledge .wd-kn-review-actions .btn-block + .btn-block { margin-top: 6px; }
#wd-mcp-knowledge .wd-kn-reject { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e5e5e5; }
#wd-mcp-knowledge .wd-kn-reject textarea { margin-bottom: 8px; }
#wd-mcp-knowledge .wd-kn-review-note { margin-top: 4px; white-space: pre-wrap; }
#wd-mcp-knowledge .wd-kn-accept-meta .wd-kn-kind { margin-right: 6px; }
#wd-mcp-knowledge .wd-kn-accept-evidence { margin: 0 0 14px; }
#wd-mcp-knowledge .wd-kn-accept-evidence > summary { cursor: pointer; color: #337ab7; margin-bottom: 6px; }
#wd-mcp-knowledge .wd-kn-accept-evidence pre.wd-kn-evidence { border: 1px solid #ddd; border-radius: 3px; }

html.theme-dark #wd-mcp-knowledge .wd-kn-section-tabs { border-color: var(--nord3); }
html.theme-dark #wd-mcp-knowledge .wd-kn-section-tabs > li > a { color: var(--nord8); }
html.theme-dark #wd-mcp-knowledge .wd-kn-section-tabs > li > a:hover { background: var(--nord2); border-color: var(--nord3); }
html.theme-dark #wd-mcp-knowledge .wd-kn-section-tabs > li.active > a,
html.theme-dark #wd-mcp-knowledge .wd-kn-section-tabs > li.active > a:hover,
html.theme-dark #wd-mcp-knowledge .wd-kn-section-tabs > li.active > a:focus { background: var(--nord1); border-color: var(--nord3) var(--nord3) transparent; color: var(--nord6); }
html.theme-dark #wd-mcp-knowledge .wd-kn-count { background-color: var(--nord13); color: var(--nord0); }
html.theme-dark #wd-mcp-knowledge .wd-kn-kind { background: transparent; border-color: var(--nord8); color: var(--nord8); }
html.theme-dark #wd-mcp-knowledge .wd-kn-kind-correction { border-color: var(--nord13); color: var(--nord13); }
html.theme-dark #wd-mcp-knowledge pre.wd-kn-proposal-text,
html.theme-dark #wd-mcp-knowledge pre.wd-kn-evidence { background: var(--nord0); color: var(--nord6); border-color: var(--nord3); }
html.theme-dark #wd-mcp-knowledge .wd-kn-reject { border-color: var(--nord3); }
html.theme-dark #wd-mcp-knowledge .wd-kn-reject label,
html.theme-dark #wd-mcp-knowledge .wd-kn-proposal-facts { color: var(--nord6); }
html.theme-dark #wd-mcp-knowledge .wd-kn-reviewed { background-color: var(--nord1); border-color: var(--nord9); color: var(--nord6); }
html.theme-dark #wd-mcp-knowledge .wd-kn-accept-evidence > summary { color: var(--nord8); }
html.theme-dark #wd-mcp-knowledge .label-info { background-color: var(--nord9); color: var(--nord0); }

/* Company knowledge help (BIMcp/Knowledge/help.html.twig) + its links on the knowledge pages — layout for both themes */
#wd-mcp-knowledge.wd-kn-help { max-width: 900px; }
#wd-mcp-knowledge.wd-kn-help h2 { margin-top: 36px; padding-top: 6px; }
#wd-mcp-knowledge.wd-kn-help h2 small { font-size: 55%; }
#wd-mcp-knowledge.wd-kn-help h4 { margin-top: 20px; }
#wd-mcp-knowledge.wd-kn-help :target { scroll-margin-top: 70px; }
#wd-mcp-knowledge .wd-kn-help-toc { display: inline-block; margin: 0 0 10px; padding: 10px 18px 6px 14px; background: #f5f7fa; border: 1px solid #e1e5eb; border-radius: 3px; }
#wd-mcp-knowledge .wd-kn-help-toc ol { margin: 6px 0 4px; padding-left: 22px; columns: 2; column-gap: 32px; }
#wd-mcp-knowledge .wd-kn-help-toc li { margin-bottom: 3px; break-inside: avoid; }
#wd-mcp-knowledge .wd-kn-help-list > li, #wd-mcp-knowledge .wd-kn-help-steps > li { margin-bottom: 8px; }
#wd-mcp-knowledge .wd-kn-help-steps ul { margin-top: 6px; }
#wd-mcp-knowledge .wd-kn-help-steps ul > li { margin-bottom: 4px; }
#wd-mcp-knowledge .wd-kn-help-table td:first-child { white-space: nowrap; width: 170px; }
#wd-mcp-knowledge pre.wd-kn-help-example { font-size: 12px; white-space: pre-wrap; background: #fbfbfb; }
#wd-mcp-knowledge .wd-kn-help-link { white-space: nowrap; }
#wd-mcp-knowledge .panel-heading .wd-kn-help-link { font-size: 12px; font-weight: normal; }
#wd-mcp-knowledge .wd-kn-flow { list-style: none; margin: 14px 0 8px; padding: 0; counter-reset: wd-kn-flow; }
#wd-mcp-knowledge .wd-kn-flow-step { position: relative; margin: 0 0 22px 34px; padding: 8px 12px 9px; border: 1px solid #d5dbe3; border-left: 4px solid #337ab7; border-radius: 3px; background: #fff; counter-increment: wd-kn-flow; }
#wd-mcp-knowledge .wd-kn-flow-step::before { content: counter(wd-kn-flow); position: absolute; left: -34px; top: 8px; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; background: #337ab7; color: #fff; font-size: 12px; font-weight: 600; }
#wd-mcp-knowledge .wd-kn-flow-step:not(:last-child)::after { content: "\2193"; position: absolute; left: 50%; bottom: -21px; color: #999; font-size: 16px; line-height: 20px; }
#wd-mcp-knowledge .wd-kn-flow-who { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #777; margin-bottom: 2px; }
#wd-mcp-knowledge .wd-kn-flow-claude { border-left-color: #8e6fbf; }
#wd-mcp-knowledge .wd-kn-flow-claude::before { background: #8e6fbf; }
#wd-mcp-knowledge .wd-kn-flow-server { border-left-color: #5bc0de; }
#wd-mcp-knowledge .wd-kn-flow-server::before { background: #31b0d5; }
#wd-mcp-knowledge .wd-kn-flow-quarantine { border-left-color: #f0ad4e; background: #fcf8e3; border-style: dashed solid dashed solid; }
#wd-mcp-knowledge .wd-kn-flow-quarantine::before { background: #ec971f; }
#wd-mcp-knowledge .wd-kn-flow-review { border-left-color: #337ab7; }
#wd-mcp-knowledge .wd-kn-flow-live { border-left-color: #5cb85c; }
#wd-mcp-knowledge .wd-kn-flow-live::before { background: #449d44; }
#wd-mcp-knowledge .wd-kn-checklist { list-style: none; padding-left: 0; }
#wd-mcp-knowledge .wd-kn-checklist > li { position: relative; padding: 6px 0 6px 28px; border-bottom: 1px solid #eee; }
#wd-mcp-knowledge .wd-kn-checklist > li::before { content: "\2610"; position: absolute; left: 4px; top: 4px; font-size: 16px; color: #337ab7; }
#wd-mcp-knowledge .wd-kn-help-note { margin-top: 10px; }
@media (max-width: 767px) {
    #wd-mcp-knowledge .wd-kn-help-toc { display: block; }
    #wd-mcp-knowledge .wd-kn-help-toc ol { columns: 1; }
    #wd-mcp-knowledge .wd-kn-help-table td:first-child { white-space: normal; width: auto; }
}

html.theme-dark #wd-mcp-knowledge.wd-kn-help,
html.theme-dark #wd-mcp-knowledge.wd-kn-help h1,
html.theme-dark #wd-mcp-knowledge.wd-kn-help h2,
html.theme-dark #wd-mcp-knowledge.wd-kn-help h4 { color: var(--nord6); }
html.theme-dark #wd-mcp-knowledge.wd-kn-help h2 small,
html.theme-dark #wd-mcp-knowledge.wd-kn-help .lead { color: var(--nord4); }
html.theme-dark #wd-mcp-knowledge .wd-kn-help-toc { background: var(--nord1); border-color: var(--nord3); color: var(--nord6); }
html.theme-dark #wd-mcp-knowledge pre.wd-kn-help-example { background: var(--nord0); border-color: var(--nord3); color: var(--nord6); }
html.theme-dark #wd-mcp-knowledge .wd-kn-help-note { background: var(--nord1); border-color: var(--nord8); color: var(--nord6); }
html.theme-dark #wd-mcp-knowledge .wd-kn-flow-step { background: var(--nord1); border-color: var(--nord3); border-left-color: var(--nord9); color: var(--nord6); }
html.theme-dark #wd-mcp-knowledge .wd-kn-flow-step::before { background: var(--nord9); color: var(--nord0); }
html.theme-dark #wd-mcp-knowledge .wd-kn-flow-step:not(:last-child)::after { color: var(--nord4); }
html.theme-dark #wd-mcp-knowledge .wd-kn-flow-who { color: var(--nord4); }
html.theme-dark #wd-mcp-knowledge .wd-kn-flow-claude { border-left-color: var(--nord15); }
html.theme-dark #wd-mcp-knowledge .wd-kn-flow-claude::before { background: var(--nord15); }
html.theme-dark #wd-mcp-knowledge .wd-kn-flow-server { border-left-color: var(--nord8); }
html.theme-dark #wd-mcp-knowledge .wd-kn-flow-server::before { background: var(--nord8); }
html.theme-dark #wd-mcp-knowledge .wd-kn-flow-quarantine { background: rgba(235, 203, 139, 0.10); border-color: var(--nord13); }
html.theme-dark #wd-mcp-knowledge .wd-kn-flow-quarantine::before { background: var(--nord13); }
html.theme-dark #wd-mcp-knowledge .wd-kn-flow-live { border-left-color: var(--nord14); }
html.theme-dark #wd-mcp-knowledge .wd-kn-flow-live::before { background: var(--nord14); }
html.theme-dark #wd-mcp-knowledge .wd-kn-checklist > li { border-color: var(--nord3); }
html.theme-dark #wd-mcp-knowledge .wd-kn-checklist > li::before { color: var(--nord8); }
html.theme-dark #wd-mcp-guide .wd-guide-knowledge-link { color: var(--nord8); }

/* Company knowledge — security review 2026-10-02: reach banner, proposer context, content warnings, checklist, widening */
#wd-mcp-knowledge .wd-kn-reach { margin: 0 0 14px; }
#wd-mcp-knowledge .wd-kn-reach-detail { display: block; margin-top: 3px; font-size: 12px; }
#wd-mcp-knowledge .wd-kn-audience-hints { margin: 6px 0 0; font-size: 12px; }
#wd-mcp-knowledge .wd-kn-upload .wd-kn-audience-hints { margin-top: 8px; }
#wd-mcp-knowledge .wd-kn-content-warnings .wd-kn-findings { margin-top: 4px; }
#wd-mcp-knowledge .wd-kn-proposer .panel-body > p:last-child { margin-bottom: 0; }
#wd-mcp-knowledge .wd-kn-proposer-tables { margin-bottom: 4px; font-size: 12px; }
#wd-mcp-knowledge .wd-kn-proposer-tables code { white-space: normal; word-break: break-all; }
#wd-mcp-knowledge .wd-kn-row-filter { color: #8a6d3b; }
#wd-mcp-knowledge .wd-kn-ok { color: #3c763d; }
#wd-mcp-knowledge .wd-kn-filter code { margin-right: 2px; }
#wd-mcp-knowledge .wd-kn-publish-checklist { margin: 4px 0 6px; padding: 8px 14px 4px; border: 1px solid #f0ad4e; border-radius: 3px; background: #fcf8e3; }
#wd-mcp-knowledge .wd-kn-publish-checklist legend { width: auto; margin: 0; padding: 0 6px; border: 0; font-size: 14px; font-weight: 600; }
#wd-mcp-knowledge .wd-kn-publish-checklist legend small { font-weight: normal; font-size: 12px; }
#wd-mcp-knowledge .wd-kn-publish-checklist .checkbox { margin: 6px 0; }
#wd-mcp-knowledge .wd-kn-widen p { margin-bottom: 4px; }
#wd-mcp-knowledge .wd-kn-widen .checkbox { margin: 4px 0 6px; }
#wd-mcp-knowledge .wd-kn-widen-inline { display: inline-block; margin-right: 4px; }
#wd-mcp-knowledge .wd-kn-widen-inline label { font-weight: normal; margin: 0 4px 0 0; }
#wd-mcp-knowledge .wd-kn-widen-inline input[type="text"] { display: inline-block; width: 190px; height: 24px; padding: 2px 6px; font-size: 12px; }

html.theme-dark #wd-mcp-knowledge .wd-kn-reach.alert-info { background-color: var(--nord1); border-color: var(--nord8); color: var(--nord6); }
html.theme-dark #wd-mcp-knowledge .wd-kn-reach .wd-kn-reach-detail,
html.theme-dark #wd-mcp-knowledge .wd-kn-audience-hints { color: var(--nord4); }
html.theme-dark #wd-mcp-knowledge .wd-kn-content-warnings code,
html.theme-dark #wd-mcp-knowledge .wd-kn-proposer code { background: var(--nord0); }
html.theme-dark #wd-mcp-knowledge .wd-kn-proposer .panel-body { color: var(--nord6); }
html.theme-dark #wd-mcp-knowledge .wd-kn-row-filter { color: var(--nord13); }
html.theme-dark #wd-mcp-knowledge .wd-kn-ok { color: var(--nord14); }
html.theme-dark #wd-mcp-knowledge .wd-kn-publish-checklist { background: rgba(235, 203, 139, 0.08); border-color: var(--nord13); color: var(--nord6); }
html.theme-dark #wd-mcp-knowledge .wd-kn-publish-checklist legend { color: var(--nord6); background: transparent; }
html.theme-dark #wd-mcp-knowledge .wd-kn-publish-checklist legend small { color: var(--nord4); }
html.theme-dark #wd-mcp-knowledge .wd-kn-widen input[type="text"],
html.theme-dark #wd-mcp-knowledge .wd-kn-widen-inline input[type="text"] { background: var(--nord0); border-color: var(--nord3); color: var(--nord6); }

/* Two-factor login pages (BIAccess/TwoFactor/*.html.twig: /2fa, /2fa/setup, backup codes) */
.wd-2fa-card h3 { margin-top: 0; }
.wd-2fa-card .wd-2fa-help { color: #555; }
.wd-2fa-card .wd-2fa-code-input { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; letter-spacing: 3px; max-width: 220px; }
.wd-2fa-card .wd-2fa-confirm { margin: 8px 0 4px; }
.wd-2fa-card .wd-2fa-confirm .wd-2fa-code-input { display: inline-block; width: 180px; margin-right: 6px; }
.wd-2fa-card .wd-2fa-links { margin: 10px 0 0; }
.wd-2fa-card .wd-2fa-sep { color: #999; margin: 0 6px; }
.wd-2fa-card .wd-2fa-attempts { display: block; margin-top: 4px; font-weight: 600; }
.wd-2fa-card .wd-2fa-steps { padding-left: 20px; }
.wd-2fa-card .wd-2fa-steps > li { margin-bottom: 14px; }
/* QR stays dark-on-white in both themes, with a quiet zone, or phones cannot read it */
.wd-2fa-card .wd-2fa-qr { display: block; width: fit-content; margin: 10px 0; padding: 8px; background: #fff; border: 1px solid #ddd; border-radius: 4px; line-height: 0; }
.wd-2fa-card .wd-2fa-qr svg { width: 200px; height: 200px; }
.wd-2fa-card .wd-2fa-secret-box { font-size: 13px; color: #555; }
.wd-2fa-card .wd-2fa-secret-row { margin-top: 4px; }
.wd-2fa-card .wd-2fa-secret { display: inline-block; padding: 4px 8px; font-size: 14px; letter-spacing: 1px; word-break: break-all; color: #333; background: #fff; border: 1px solid #e3e3e3; }
.wd-2fa-card .wd-2fa-copy { margin-left: 6px; vertical-align: middle; }
.wd-2fa-card .wd-2fa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; margin: 14px 0; padding-left: 28px; }
.wd-2fa-card .wd-2fa-codes code { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 15px; letter-spacing: 1px; color: #333; background: #fff; border: 1px solid #e3e3e3; }
.wd-2fa-card .wd-2fa-actions .btn { margin-right: 6px; }
@media (max-width: 480px) { .wd-2fa-card .wd-2fa-codes { grid-template-columns: 1fr; } }
@media print {
    .wd-2fa-navbar, .wd-2fa-card .wd-2fa-actions, .wd-2fa-card .wd-2fa-continue { display: none !important; }
    .wd-2fa-page { padding-top: 0; }
    .wd-2fa-card { border: 0; box-shadow: none; background: #fff !important; color: #000 !important; }
    .wd-2fa-card .wd-2fa-codes code { background: #fff !important; color: #000 !important; }
}

html.theme-dark .wd-2fa-card.well { background: var(--nord1); border-color: var(--nord3); color: var(--nord6); }
html.theme-dark .wd-2fa-card h3 { color: var(--nord6); }
html.theme-dark .wd-2fa-card .wd-2fa-help,
html.theme-dark .wd-2fa-card .wd-2fa-secret-box,
html.theme-dark .wd-2fa-card .checkbox label { color: var(--nord4); }
html.theme-dark .wd-2fa-card .wd-2fa-sep { color: var(--nord3); }
html.theme-dark .wd-2fa-card a:not(.btn) { color: var(--nord8); }
html.theme-dark .wd-2fa-card .wd-2fa-code-input { background: var(--nord0); border-color: var(--nord3); color: var(--nord6); }
html.theme-dark .wd-2fa-card .wd-2fa-code-input::placeholder { color: var(--nord3); }
html.theme-dark .wd-2fa-card .wd-2fa-secret,
html.theme-dark .wd-2fa-card .wd-2fa-codes code { background: var(--nord0); border-color: var(--nord3); color: var(--nord13); }
html.theme-dark .wd-2fa-card .wd-2fa-codes li { color: var(--nord4); }
html.theme-dark .wd-2fa-card .wd-2fa-qr { border-color: var(--nord3); }
html.theme-dark .wd-2fa-card .alert-danger { background: rgba(199, 84, 80, 0.15); border-color: var(--nord11); color: var(--nord6); }
html.theme-dark .wd-2fa-card .btn-default { background: var(--nord2); border-color: var(--nord3); color: var(--nord6); }
html.theme-dark .wd-2fa-card .btn-primary,
html.theme-dark .wd-2fa-card .btn-primary:hover,
html.theme-dark .wd-2fa-card .btn-primary:focus { color: #fff; }
html.theme-dark .wd-2fa-page .alert-danger { background: rgba(199, 84, 80, 0.15); border-color: var(--nord11); color: var(--nord6); }

/* Two-factor section of /user/settings (BIAccess/TwoFactor/_settings_section.html.twig) */
.wd-2fa-settings .wd-2fa-status { margin: 4px 0 10px; }
.wd-2fa-settings .wd-2fa-status-line { display: inline-block; margin: 0 6px 4px 0; padding: 4px 8px; font-size: 12px; font-weight: 600; }
.wd-2fa-settings .wd-2fa-settings-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.wd-2fa-settings .wd-2fa-inline-form { display: inline; margin: 0; }
.wd-2fa-settings .wd-2fa-dialog-form { max-width: 420px; margin: 8px 0 0; }
.wd-2fa-settings .wd-2fa-dialog-form .wd-2fa-code-input { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; letter-spacing: 3px; max-width: 180px; }
html.theme-dark .wd-2fa-settings h3 { color: var(--nord6); }
html.theme-dark .wd-2fa-settings h3 small,
html.theme-dark .wd-2fa-settings .help-block { color: var(--nord4); }
html.theme-dark .wd-2fa-settings .label-success { background: var(--nord14); color: var(--nord0); }
html.theme-dark .wd-2fa-settings .wd-2fa-dialog-form { background: var(--nord1); border-color: var(--nord3); color: var(--nord6); }
html.theme-dark .wd-2fa-settings .wd-2fa-dialog-form label { color: var(--nord5); }
html.theme-dark .wd-2fa-settings .btn-danger { background: var(--nord11); border-color: var(--nord11); color: #fff; }
html.theme-dark .wd-2fa-settings a.btn-primary,
html.theme-dark .wd-2fa-settings a.btn-primary:hover,
html.theme-dark .wd-2fa-settings a.btn-primary:focus { color: #fff; }

/* Two-factor admin: requirement selector (/users, /company/edit) and the "2FA" column — both themes */
.wd-2fa-requirement .wd-2fa-requirement-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wd-2fa-requirement .wd-2fa-requirement-form label { margin: 0; font-weight: 600; }
.wd-2fa-requirement .wd-2fa-requirement-form select { width: auto; }
.wd-2fa-requirement .wd-2fa-requirement-note { margin: 8px 0 0; max-width: 760px; }
.wd-users-active .wd-2fa-col { white-space: nowrap; }
.wd-users-active .wd-2fa-status { display: inline-block; padding: 3px 7px; font-size: 11px; font-weight: 600; }
.wd-users-active .wd-2fa-admin-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.wd-users-active .wd-2fa-admin-actions form { display: inline; margin: 0; }
.wd-users-active .wd-2fa-exempt-label { margin: 0; font-weight: normal; font-size: 12px; cursor: pointer; }
.wd-users-active .wd-2fa-exempt-label input { margin: 0 3px 0 0; vertical-align: -2px; }
@media (max-width: 767px) { .wd-users-active .wd-2fa-col { white-space: normal; } }
html.theme-dark .wd-2fa-requirement { background: var(--nord1); border-color: var(--nord3); }
html.theme-dark .wd-2fa-requirement label { color: var(--nord6); }
html.theme-dark .wd-2fa-requirement .help-block { color: var(--nord4); }
html.theme-dark .wd-2fa-requirement em { color: var(--nord6); }
html.theme-dark .wd-users-active .label-success { background: var(--nord14); color: var(--nord0); }
html.theme-dark .wd-users-active .label-warning { background: var(--nord13); color: var(--nord0); }
html.theme-dark .wd-users-active .label-info { background: var(--nord9); color: var(--nord0); }
html.theme-dark .wd-users-active .label-default { background: var(--nord3); color: var(--nord6); }
html.theme-dark .wd-users-active .wd-2fa-exempt-label { color: var(--nord5); }