/******************
    User custom CSS: dark-mode layer for "Bootstrap Vanilla"
    ----------------------------------------------------------
    LimeSurvey 7.x | bundled Bootstrap 5.1.3 | awesome-bootstrap-checkbox (template-core)

    - Everything after the two default rules is inside
      @media screen and (prefers-color-scheme: dark): participants whose
      OS/browser prefers dark get the dark survey; everyone else and every
      printout keep the stock light look.
    - All colours are tokens (--lsdm-*) in section 1. Tweak them there.
    - Every selector starts with "html" for one extra level of specificity,
      so these rules win over Bootstrap, template-core and question-plugin
      CSS regardless of load order.
    - To disable dark mode, remove or comment out the @media block.
*/

/* Default vanilla custom.css rules (kept) */
.table-bordered > thead > tr > th {
    border: 1px solid #dadada;
}
.table-bordered > thead > tr > td {
    border: 1px solid #dadada;
}


@media screen and (prefers-color-scheme: dark) {

    /* ==========================================================
       1. Tokens
       ========================================================== */
    html:root {
        color-scheme: dark;              /* native controls, scrollbars, date pickers */
        accent-color: #3d8bfd;

        --lsdm-bg:            #16191c;   /* page */
        --lsdm-surface:       #1f2327;   /* question boxes, cards, navbar, menus */
        --lsdm-surface-2:     #282d32;   /* headers, wells, addons */
        --lsdm-surface-3:     #343a40;   /* hover, tracks */
        --lsdm-input-bg:      #121417;
        --lsdm-border:        #3a4047;
        --lsdm-border-strong: #6b737b;   /* input + checkbox outlines (>= 3:1) */

        --lsdm-text:          #dee2e6;
        --lsdm-text-strong:   #f8f9fa;
        --lsdm-text-muted:    #a1a9b1;

        --lsdm-link:          #6ea8fe;
        --lsdm-link-hover:    #9ec5fe;
        --lsdm-accent:        #3d8bfd;   /* checked radio/checkbox */
        --lsdm-focus-border:  #86b7fe;
        --lsdm-focus-ring:    rgba(110, 168, 254, .35);

        --lsdm-primary-text:   #6ea8fe; --lsdm-primary-bg:   #031633; --lsdm-primary-border:   #084298;
        --lsdm-secondary-text: #a7acb1; --lsdm-secondary-bg: #161719; --lsdm-secondary-border: #41464b;
        --lsdm-success-text:   #75b798; --lsdm-success-bg:   #051b11; --lsdm-success-border:   #0f5132;
        --lsdm-info-text:      #6edff6; --lsdm-info-bg:      #032830; --lsdm-info-border:      #087990;
        --lsdm-warning-text:   #ffda6a; --lsdm-warning-bg:   #332701; --lsdm-warning-border:   #997404;
        --lsdm-danger-text:    #ea868f; --lsdm-danger-bg:    #2c0b0e; --lsdm-danger-border:    #842029;

        /* The only colour variables Bootstrap 5.1 itself reads */
        --bs-body-color:     var(--lsdm-text);
        --bs-body-bg:        var(--lsdm-bg);
        --bs-body-color-rgb: 222, 226, 230;
        --bs-body-bg-rgb:    22, 25, 28;
    }

    /* ==========================================================
       2. Page & typography (also beats errors.css / maintenance.css)
       ========================================================== */
    html body {
        color: var(--lsdm-text);
        background-color: var(--lsdm-bg);
    }
    html a       { color: var(--lsdm-link); }
    html a:hover { color: var(--lsdm-link-hover); }
    html code    { color: #e685b5; }
    html kbd     { color: var(--lsdm-bg); background-color: var(--lsdm-text); }
    html mark,
    html .mark   { color: var(--lsdm-text-strong); background-color: rgba(255, 193, 7, .25); }
    html caption,
    html .blockquote-footer,
    html .figure-caption { color: var(--lsdm-text-muted); }
    html .img-thumbnail  { background-color: var(--lsdm-surface); border-color: var(--lsdm-border); }
    html table           { border-color: var(--lsdm-border); } /* base.css cells inherit this */

    /* ==========================================================
       3. Utilities (Bootstrap uses !important here)
       ========================================================== */
    html .text-muted     { color: var(--lsdm-text-muted) !important; }
    html .text-secondary { color: var(--lsdm-secondary-text) !important; }
    html .text-primary   { color: var(--lsdm-primary-text) !important; }
    html .text-success   { color: var(--lsdm-success-text) !important; }
    html .text-info      { color: var(--lsdm-info-text) !important; }     /* EM tips */
    html .text-warning   { color: var(--lsdm-warning-text) !important; }
    html .text-danger    { color: var(--lsdm-danger-text) !important; }   /* asterisks, errors */
    html .text-black-50  { color: rgba(255, 255, 255, .5) !important; }

    html .bg-light,
    html .bg-white             { background-color: var(--lsdm-surface) !important; } /* navbar, save/load/captcha cards */
    html .bg-light.text-dark,
    html .bg-white.text-dark   { color: var(--lsdm-text) !important; }

    html :is(.border, .border-top, .border-end, .border-bottom, .border-start):not(.border-primary, .border-secondary, .border-success, .border-info, .border-warning, .border-danger, .border-light, .border-dark, .border-white) {
        border-color: var(--lsdm-border) !important;
    }

    html .shadow-sm { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .4) !important; }
    html .shadow    { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5) !important; }
    html .shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, .6) !important; }

    /* ==========================================================
       4. Navbar (#survey-nav is "navbar-light bg-light")
       ========================================================== */
    html .navbar-light .navbar-brand,
    html .navbar-light .navbar-brand:hover,
    html .navbar-light .navbar-brand:focus,
    html .navbar-light .navbar-text a,
    html .navbar-light .navbar-text a:hover,
    html .navbar-light .navbar-text a:focus {
        color: var(--lsdm-text-strong);
    }
    html .navbar-light .navbar-text,
    html .navbar-light .navbar-nav .nav-link {
        color: rgba(222, 226, 230, .75);
    }
    html .navbar-light .navbar-nav .nav-link:hover,
    html .navbar-light .navbar-nav .nav-link:focus,
    html .navbar-light .navbar-nav .nav-link.active,
    html .navbar-light .navbar-nav .show > .nav-link,
    html #survey-nav .nav-link:hover,            /* theme.css: #333 */
    html #survey-nav .nav-link:focus {
        color: var(--lsdm-text-strong);
    }
    html .navbar-light .navbar-nav .nav-link.disabled {
        color: rgba(222, 226, 230, .35);
    }
    html .navbar-light .navbar-toggler {
        color: rgba(222, 226, 230, .75);
        border-color: rgba(255, 255, 255, .15);
    }
    html .navbar-light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* ==========================================================
       5. Survey structure (theme.css / base.css)
       ========================================================== */
    html .progress {
        background-color: var(--lsdm-surface-3);
    }
    html .question-container {
        background-color: var(--lsdm-surface);
        border-color: var(--lsdm-border);
    }
    html .well {                                   /* group description */
        background-color: var(--lsdm-surface-2);
        border-color: var(--lsdm-border);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .35);
    }
    html .limit-text-window {                      /* privacy policy text */
        border-top-color: var(--lsdm-border);
        border-bottom-color: var(--lsdm-border);
    }
    html .table-bordered > thead > tr > th,
    html .table-bordered > thead > tr > td {
        border-color: var(--lsdm-border);
    }

    /* ==========================================================
       6. Form controls
       ========================================================== */
    html .form-control,
    html .form-select {
        color: var(--lsdm-text);
        background-color: var(--lsdm-input-bg);
        border-color: var(--lsdm-border-strong);
    }
    html .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    }
    html .form-control:focus,
    html .form-select:focus {
        color: var(--lsdm-text-strong);
        background-color: var(--lsdm-input-bg);
        border-color: var(--lsdm-focus-border);
        box-shadow: 0 0 0 .25rem var(--lsdm-focus-ring);
    }
    html .form-control::placeholder { color: #8b949c; }
    html .form-control:disabled,
    html .form-control[readonly],
    html .form-select:disabled {
        background-color: var(--lsdm-surface-2);
    }
    html .form-control-plaintext { color: var(--lsdm-text); }

    html .form-control::file-selector-button {
        color: var(--lsdm-text);
        background-color: var(--lsdm-surface-3);
    }
    html .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
        background-color: #3f464d;
    }
    html .form-control::-webkit-file-upload-button {
        color: var(--lsdm-text);
        background-color: var(--lsdm-surface-3);
    }
    html .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
        background-color: #3f464d;
    }

    html .input-group-text {
        color: var(--lsdm-text);
        background-color: var(--lsdm-surface-2);
        border-color: var(--lsdm-border-strong);
    }
    html .form-text        { color: var(--lsdm-text-muted); }
    html .valid-feedback   { color: var(--lsdm-success-text); }
    html .invalid-feedback { color: var(--lsdm-danger-text); }

    /* keep LimeSurvey's red error outline */
    html .input-error input,
    html .input-error .form-control {
        border-color: #e75041;
    }

    html .form-check-input {
        background-color: var(--lsdm-input-bg);
        border-color: var(--lsdm-border-strong);
    }
    html .form-check-input:checked,
    html .form-check-input[type=checkbox]:indeterminate {
        background-color: var(--lsdm-accent);
        border-color: var(--lsdm-accent);
    }
    html .form-check-input:focus {
        border-color: var(--lsdm-focus-border);
        box-shadow: 0 0 0 .25rem var(--lsdm-focus-ring);
    }
    html .form-switch .form-check-input:not(:checked):not(:focus) {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.35%29'/%3e%3c/svg%3e");
    }
    html .form-range::-webkit-slider-runnable-track { background-color: var(--lsdm-surface-3); }
    html .form-range::-moz-range-track             { background-color: var(--lsdm-surface-3); }

    html select option,
    html select optgroup {
        color: var(--lsdm-text);
        background-color: var(--lsdm-surface);
    }

    /* Browser autofill (Chrome/Edge/Safari paint it light otherwise) */
    html input:-webkit-autofill,
    html input:-webkit-autofill:hover,
    html input:-webkit-autofill:focus,
    html textarea:-webkit-autofill,
    html select:-webkit-autofill {
        -webkit-text-fill-color: var(--lsdm-text);
        -webkit-box-shadow: 0 0 0 1000px var(--lsdm-input-bg) inset;
        caret-color: var(--lsdm-text);
    }

    /* ==========================================================
       7. Answer radios & checkboxes (awesome-bootstrap-checkbox)
       ========================================================== */
    html .radio-item label::before,
    html .checkbox-item label::before {
        background-color: var(--lsdm-input-bg);
        border-color: var(--lsdm-border-strong);
    }
    html .radio-item label::after {                 /* checked dot, was #2c3e50 */
        background-color: var(--lsdm-accent);
    }
    html .radio-item input[type="radio"]:checked + label::before,
    html .checkbox-item input[type="checkbox"]:checked + label::before {
        border-color: var(--lsdm-accent);
    }
    html .checkbox-item input[type="checkbox"]:checked + label::after {
        color: #fff;
        background-color: var(--lsdm-accent);
    }
    html .checkbox-item input[type="checkbox"]:indeterminate + label::after {
        background-color: var(--lsdm-text-muted);
    }
    html .radio-item input[type="radio"]:disabled + label::before,
    html .checkbox-item input[type="checkbox"]:disabled + label::before {
        background-color: var(--lsdm-surface-3);
    }
    html .radio-item input[type="radio"]:focus-visible + label::before,
    html .checkbox-item input[type="checkbox"]:focus-visible + label::before {
        border-color: var(--lsdm-focus-border);
        box-shadow: 0 0 0 3px var(--lsdm-focus-ring);
    }

    /* ==========================================================
       8. Tables (array questions, print answers)
       ========================================================== */
    html .table {
        --bs-table-striped-color: var(--lsdm-text);
        --bs-table-striped-bg:    rgba(255, 255, 255, .035);
        --bs-table-active-color:  var(--lsdm-text-strong);
        --bs-table-active-bg:     rgba(255, 255, 255, .08);
        --bs-table-hover-color:   var(--lsdm-text-strong);
        --bs-table-hover-bg:      rgba(255, 255, 255, .06);
        color: var(--lsdm-text);
        border-color: var(--lsdm-border);
    }
    html .table > :not(:first-child) {             /* BS 5.1 2px currentColor rule */
        border-top-color: var(--lsdm-border-strong);
    }
    html :is(.table-primary, .table-secondary, .table-success, .table-info, .table-warning, .table-danger, .table-light) {
        --bs-table-striped-color: var(--lsdm-text);
        --bs-table-striped-bg:    rgba(255, 255, 255, .05);
        --bs-table-active-color:  var(--lsdm-text-strong);
        --bs-table-active-bg:     rgba(255, 255, 255, .1);
        --bs-table-hover-color:   var(--lsdm-text-strong);
        --bs-table-hover-bg:      rgba(255, 255, 255, .075);
        color: var(--lsdm-text);
    }
    html .table-primary   { --bs-table-bg: var(--lsdm-primary-bg);   border-color: var(--lsdm-primary-border); }
    html .table-secondary { --bs-table-bg: var(--lsdm-secondary-bg); border-color: var(--lsdm-secondary-border); }
    html .table-success   { --bs-table-bg: var(--lsdm-success-bg);   border-color: var(--lsdm-success-border); }
    html .table-info      { --bs-table-bg: var(--lsdm-info-bg);      border-color: var(--lsdm-info-border); }
    html .table-warning   { --bs-table-bg: var(--lsdm-warning-bg);   border-color: var(--lsdm-warning-border); }
    html .table-danger    { --bs-table-bg: var(--lsdm-danger-bg);    border-color: var(--lsdm-danger-border); }
    html .table-light     { --bs-table-bg: var(--lsdm-surface-2);    border-color: var(--lsdm-border); }

    /* ==========================================================
       9. Buttons
       ========================================================== */
    html .btn-outline-primary { color: var(--lsdm-primary-text); }
    html .btn-outline-success { color: var(--lsdm-success-text); }
    html .btn-outline-danger  { color: var(--lsdm-danger-text); }

    html .btn-outline-secondary {                  /* save / load / clear buttons */
        color: #c1c7cd;
        border-color: #6c757d;
    }
    html .btn-outline-secondary:hover,
    html .btn-outline-secondary:active,
    html .btn-outline-secondary.active,
    html .btn-check:checked + .btn-outline-secondary,
    html .btn-check:active + .btn-outline-secondary {
        color: #fff;
        background-color: #5c636a;
        border-color: #6c757d;
    }
    html .btn-outline-secondary:disabled,
    html .btn-outline-secondary.disabled { color: #8a939b; }

    html .btn-light,
    html .btn-cancel {
        color: var(--lsdm-text);
        background-color: var(--lsdm-surface-3);
        border-color: var(--lsdm-border-strong);
    }
    html .btn-light:hover,  html .btn-light:focus,
    html .btn-cancel:hover, html .btn-cancel:focus {
        color: var(--lsdm-text-strong);
        background-color: #3f464d;
        border-color: var(--lsdm-border-strong);
    }
    html .btn-light:active,  html .btn-light.active,  html .btn-check:checked + .btn-light,
    html .btn-cancel:active, html .btn-cancel.active, html .btn-check:checked + .btn-cancel {
        color: var(--lsdm-text-strong);
        background-color: #4a5158;
    }

    html .btn-outline-dark {
        color: var(--lsdm-text);
        border-color: var(--lsdm-border-strong);
    }
    html .btn-outline-dark:hover,
    html .btn-outline-dark:active,
    html .btn-outline-dark.active,
    html .btn-check:checked + .btn-outline-dark {
        color: var(--lsdm-bg);
        background-color: var(--lsdm-text);
        border-color: var(--lsdm-text);
    }

    html .btn-link                    { color: var(--lsdm-link); }
    html .btn-link:hover,
    html .btn-link:focus              { color: var(--lsdm-link-hover); }
    html .btn-link:disabled,
    html .btn-link.disabled           { color: var(--lsdm-text-muted); }

    html .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

    /* ==========================================================
       10. Dropdowns, language menu, question index
       ========================================================== */
    html .dropdown-menu {
        color: var(--lsdm-text);
        background-color: var(--lsdm-surface);
        border-color: var(--lsdm-border);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .45);
    }
    html .dropdown-item,
    html .dropdown-item-text          { color: var(--lsdm-text); }
    html .dropdown-item:hover,
    html .dropdown-item:focus {
        color: var(--lsdm-text-strong);
        background-color: var(--lsdm-surface-3);
    }
    html .dropdown-item.active,
    html .dropdown-item:active {
        color: #fff;
        background-color: #0d6efd;
    }
    html .dropdown-item.disabled,
    html .dropdown-item:disabled      { color: var(--lsdm-text-muted); }
    html .dropdown-header             { color: var(--lsdm-text-muted); }
    html .dropdown-divider            { border-top-color: var(--lsdm-border); }

    /* theme.css hover: #e9ecef !important */
    html .list-group-itemindex-item a:hover,
    html .list-group-itemindex-item a:focus,
    html .index-item a:hover,
    html .index-item a:focus {
        background-color: var(--lsdm-surface-3) !important;
    }
    /* unanswered / error markers in the question index */
    html .dropdown-menu .dropdown-item.bg-warning {
        color: var(--lsdm-warning-text);
        background-color: var(--lsdm-warning-bg) !important;
    }
    html .dropdown-menu .dropdown-item.bg-danger {
        color: var(--lsdm-danger-text);
        background-color: var(--lsdm-danger-bg) !important;
    }

    /* ==========================================================
       11. Cards, list groups (ranking), modals (popups)
       ========================================================== */
    html .card {
        color: var(--lsdm-text);
        background-color: var(--lsdm-surface);
        border-color: var(--lsdm-border);
    }
    html .card-header,
    html .card-footer {
        background-color: var(--lsdm-surface-2);
        border-color: var(--lsdm-border);
    }

    html .list-group-item {
        color: var(--lsdm-text);
        background-color: var(--lsdm-surface);
        border-color: var(--lsdm-border);
    }
    html .list-group-item.disabled,
    html .list-group-item:disabled    { color: var(--lsdm-text-muted); background-color: var(--lsdm-surface); }
    html .list-group-item-action      { color: var(--lsdm-text); }
    html .list-group-item-action:hover,
    html .list-group-item-action:focus {
        color: var(--lsdm-text-strong);
        background-color: var(--lsdm-surface-2);
    }
    html .list-group-item-action:active { background-color: var(--lsdm-surface-3); }
    html .list-group-item.active {
        color: #fff;
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

    html .modal-content {
        color: var(--lsdm-text);
        background-color: var(--lsdm-surface);
        border-color: var(--lsdm-border);
    }
    html .modal-header        { border-bottom-color: var(--lsdm-border); }
    html .modal-footer        { border-top-color: var(--lsdm-border); }
    html .modal-backdrop.show { opacity: .7; }

    /* ==========================================================
       12. Alerts (warnings, validation popups, messages)
       ========================================================== */
    html .alert-primary   { color: var(--lsdm-primary-text);   background-color: var(--lsdm-primary-bg);   border-color: var(--lsdm-primary-border); }
    html .alert-secondary { color: var(--lsdm-secondary-text); background-color: var(--lsdm-secondary-bg); border-color: var(--lsdm-secondary-border); }
    html .alert-success   { color: var(--lsdm-success-text);   background-color: var(--lsdm-success-bg);   border-color: var(--lsdm-success-border); }
    html .alert-info      { color: var(--lsdm-info-text);      background-color: var(--lsdm-info-bg);      border-color: var(--lsdm-info-border); }
    html .alert-warning   { color: var(--lsdm-warning-text);   background-color: var(--lsdm-warning-bg);   border-color: var(--lsdm-warning-border); }
    html .alert-danger    { color: var(--lsdm-danger-text);    background-color: var(--lsdm-danger-bg);    border-color: var(--lsdm-danger-border); }
    html .alert-light     { color: var(--lsdm-text);           background-color: var(--lsdm-surface-2);    border-color: var(--lsdm-border); }
    html .alert-dark      { color: var(--lsdm-text);           background-color: #1a1d20;                  border-color: #373b3e; }
    html .alert .alert-link { color: inherit; }

    /* ==========================================================
       13. Tooltips, popovers, toasts
       ========================================================== */
    html .tooltip-inner {
        color: var(--lsdm-bg);
        background-color: var(--lsdm-text);
    }
    html .bs-tooltip-top .tooltip-arrow::before,
    html .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before    { border-top-color: var(--lsdm-text); }
    html .bs-tooltip-end .tooltip-arrow::before,
    html .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before  { border-right-color: var(--lsdm-text); }
    html .bs-tooltip-bottom .tooltip-arrow::before,
    html .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before { border-bottom-color: var(--lsdm-text); }
    html .bs-tooltip-start .tooltip-arrow::before,
    html .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before   { border-left-color: var(--lsdm-text); }

    html .popover {
        background-color: var(--lsdm-surface-2);
        border-color: var(--lsdm-border);
    }
    html .popover-header {
        color: var(--lsdm-text-strong);
        background-color: var(--lsdm-surface-3);
        border-bottom-color: var(--lsdm-border);
    }
    html .popover-body { color: var(--lsdm-text); }
    html .bs-popover-top > .popover-arrow::before,
    html .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before    { border-top-color: var(--lsdm-border); }
    html .bs-popover-top > .popover-arrow::after,
    html .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after     { border-top-color: var(--lsdm-surface-2); }
    html .bs-popover-end > .popover-arrow::before,
    html .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before  { border-right-color: var(--lsdm-border); }
    html .bs-popover-end > .popover-arrow::after,
    html .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after   { border-right-color: var(--lsdm-surface-2); }
    html .bs-popover-bottom > .popover-arrow::before,
    html .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { border-bottom-color: var(--lsdm-border); }
    html .bs-popover-bottom > .popover-arrow::after,
    html .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after  { border-bottom-color: var(--lsdm-surface-3); }
    html .bs-popover-bottom .popover-header::before,
    html .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before  { border-bottom-color: var(--lsdm-surface-3); }
    html .bs-popover-start > .popover-arrow::before,
    html .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before   { border-left-color: var(--lsdm-border); }
    html .bs-popover-start > .popover-arrow::after,
    html .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after    { border-left-color: var(--lsdm-surface-2); }

    html .toast {
        color: var(--lsdm-text);
        background-color: rgba(31, 35, 39, .92);
        border-color: var(--lsdm-border);
    }
    html .toast-header {
        color: var(--lsdm-text-muted);
        background-color: rgba(40, 45, 50, .92);
        border-bottom-color: var(--lsdm-border);
    }

    /* ==========================================================
       14. Other Bootstrap components (for HTML in question texts)
       ========================================================== */
    html .nav-link                    { color: var(--lsdm-link); }
    html .nav-link:hover,
    html .nav-link:focus              { color: var(--lsdm-link-hover); }
    html .nav-link.disabled           { color: var(--lsdm-text-muted); }

    html .nav-tabs                    { border-bottom-color: var(--lsdm-border); }
    html .nav-tabs .nav-link:hover,
    html .nav-tabs .nav-link:focus    { border-color: var(--lsdm-surface-3) var(--lsdm-surface-3) var(--lsdm-border); }
    html .nav-tabs .nav-link.active,
    html .nav-tabs .nav-item.show .nav-link {
        color: var(--lsdm-text-strong);
        background-color: var(--lsdm-bg);
        border-color: var(--lsdm-border) var(--lsdm-border) var(--lsdm-bg);
    }

    html .page-link {
        color: var(--lsdm-link);
        background-color: var(--lsdm-surface);
        border-color: var(--lsdm-border);
    }
    html .page-link:hover,
    html .page-link:focus {
        color: var(--lsdm-link-hover);
        background-color: var(--lsdm-surface-3);
        border-color: var(--lsdm-border);
    }
    html .page-item.active .page-link   { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
    html .page-item.disabled .page-link { color: var(--lsdm-text-muted); background-color: var(--lsdm-surface); border-color: var(--lsdm-border); }

    html .breadcrumb-item + .breadcrumb-item::before,
    html .breadcrumb-item.active      { color: var(--lsdm-text-muted); }

    html .accordion-item {
        background-color: var(--lsdm-surface);
        border-color: var(--lsdm-border);
    }
    html .accordion-button {
        color: var(--lsdm-text);
        background-color: var(--lsdm-surface);
    }
    html .accordion-button:not(.collapsed) {
        color: var(--lsdm-primary-text);
        background-color: var(--lsdm-primary-bg);
        box-shadow: inset 0 -1px 0 var(--lsdm-border);
    }
    html .accordion-button::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dee2e6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }
    html .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }
    html .accordion-button:focus {
        border-color: var(--lsdm-focus-border);
        box-shadow: 0 0 0 .25rem var(--lsdm-focus-ring);
    }

    html .offcanvas {
        color: var(--lsdm-text);
        background-color: var(--lsdm-surface);
    }
    html .offcanvas-start,
    html .offcanvas-end,
    html .offcanvas-top,
    html .offcanvas-bottom            { border-color: var(--lsdm-border); }

    /* ==========================================================
       15. Question-type plugins
       ========================================================== */
    /* Numeric slider (bootstrap-slider): light gradients by default */
    html .slider-track {
        background-color: var(--lsdm-surface-3);
        background-image: none;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
    }
    html .slider-selection {
        background-color: #4b535b;
        background-image: none;
        box-shadow: none;
    }
    html .slider-tick {
        background-color: var(--lsdm-surface-3);
        background-image: none;
    }
    html .slider.slider-disabled .slider-track {
        background-color: var(--lsdm-surface-2);
        background-image: none;
    }
    html .slider.slider-disabled .slider-handle {
        background-color: #5c636a;
        background-image: none;
    }
    /* 5-point emoji slider: near-black handle gets a visible ring */
    html .ls-emojislider .slider-handle {
        box-shadow: 0 0 0 2px var(--lsdm-text-muted);
    }

    /* Ranking (dotted #ccc drop zones) */
    html .sortable-list {
        border-color: var(--lsdm-border-strong);
    }

    /* Date picker: Tempus Dominus switches to .dark on its own ("auto"),
       but LimeSurvey forces the weekday headers to black */
    html .tempus-dominus-widget.dark .date-container-days .dow {
        color: var(--lsdm-text-muted);
    }

    /* ==========================================================
       16. Inline colours written by the question-text editor
       (black text / white backgrounds pasted from Word, etc.)
       ========================================================== */
    html body :is(
        [style*="color:#000000" i], [style*="color: #000000" i],
        [style*="color:#000;" i],   [style*="color: #000;" i],
        [style*="color:rgb(0, 0, 0)" i], [style*="color: rgb(0, 0, 0)" i],
        [style*="color:black" i],   [style*="color: black" i],
        [style*="color:#333333" i], [style*="color: #333333" i],
        [style*="color:#222222" i], [style*="color: #222222" i]
    ) {
        color: inherit !important;
    }
    html body :is(
        [style*="background-color:#ffffff" i], [style*="background-color: #ffffff" i],
        [style*="background-color:#fff;" i],   [style*="background-color: #fff;" i],
        [style*="background-color:rgb(255, 255, 255)" i], [style*="background-color: rgb(255, 255, 255)" i],
        [style*="background-color:white" i],   [style*="background-color: white" i],
        [style*="background:#ffffff" i],       [style*="background: #ffffff" i],
        [style*="background:white" i],         [style*="background: white" i]
    ) {
        background-color: transparent !important;
    }
    html body font[color="#000000" i],
    html body font[color="black" i] {
        color: inherit;
    }

    /* ==========================================================
       17. Logo (optional). A dark logo on a transparent PNG
       disappears on the dark navbar. Uncomment ONE option:
       ========================================================== */
    /* A) light "chip" behind the logo
    html .logo-container > img {
        background-color: rgba(255, 255, 255, .92);
        border-radius: .375rem;
    }
    */
    /* B) invert a monochrome logo
    html .logo-container > img {
        filter: invert(1) hue-rotate(180deg);
    }
    */
}