/**
 * Dark mode override sheet.
 *
 * Loaded by base-new.html.twig ONLY when settings.night_mode == 'on', so light
 * mode never sees these rules (clean revert by definition) and every rule here
 * may use !important freely to win over the legacy hardcoded-colour CSS.
 *
 * Strategy (modern token approach, adapted to a BS3+BS5+Materialize app whose
 * CSS uses hardcoded colours):
 *   1. Semantic tokens (--ugr-d-*) define the palette once.
 *   2. Remap Bootstrap 5's own --bs-* variables → every BS5 component that
 *      reads them (card, modal, dropdown, table, list-group, .bg-light…) flips
 *      automatically and consistently.
 *   3. color-scheme: dark → native controls, scrollbars, autofill.
 *   4. Explicit rules for the legacy / Materialize / custom components that do
 *      NOT use --bs-* vars, plus catches for inline white backgrounds.
 * Brand orange accent and semantic state colours are preserved.
 */

/* ====================================================================== */
/* 1. Tokens + Bootstrap variable remap                                   */
/* ====================================================================== */
:root,
body {
    /* palette — rich obsidian dark base with slate surfaces */
    --ugr-d-bg:        #0d111a;
    --ugr-d-surface:   #151a26;  /* cards, panels, modals, wells */
    --ugr-d-surface-2: #1e2433;  /* navbar, inputs, table headers, raised */
    --ugr-d-surface-3: #272f42;  /* hover / active */
    --ugr-d-text:      #e2e7f3;
    --ugr-d-muted:     #959eb5;
    --ugr-d-border:    #252e42;
    --ugr-d-accent:    #e8884a;  /* brand orange, lightened for dark contrast */
    --ugr-d-accent-2:  #f0995c;

    color-scheme: dark;

    /* --- remap Bootstrap 5 variables so BS5 components switch in one go --- */
    --bs-body-bg:            var(--ugr-d-bg);
    --bs-body-bg-rgb:        13, 17, 26;
    --bs-body-color:         var(--ugr-d-text);
    --bs-body-color-rgb:     226, 231, 243;
    --bs-emphasis-color:     #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color:    var(--ugr-d-muted);
    --bs-secondary-bg:       var(--ugr-d-surface-2);
    --bs-tertiary-color:     var(--ugr-d-muted);
    --bs-tertiary-bg:        var(--ugr-d-surface);
    --bs-border-color:       var(--ugr-d-border);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
    --bs-heading-color:      var(--ugr-d-text);
    --bs-link-color:         var(--ugr-d-accent);
    --bs-link-color-rgb:     232, 136, 74;
    --bs-link-hover-color:   var(--ugr-d-accent-2);
    --bs-code-color:         #ff9e6b;

    --bs-card-bg:            var(--ugr-d-surface);
    --bs-card-color:         var(--ugr-d-text);
    --bs-card-border-color:  var(--ugr-d-border);
    --bs-card-cap-bg:        var(--ugr-d-surface-2);

    --bs-modal-bg:           var(--ugr-d-surface);
    --bs-modal-color:        var(--ugr-d-text);
    --bs-modal-border-color: var(--ugr-d-border);
    --bs-modal-header-border-color: var(--ugr-d-border);
    --bs-modal-footer-border-color: var(--ugr-d-border);

    --bs-dropdown-bg:           var(--ugr-d-surface-2);
    --bs-dropdown-color:        var(--ugr-d-text);
    --bs-dropdown-border-color: var(--ugr-d-border);
    --bs-dropdown-link-color:   var(--ugr-d-text);
    --bs-dropdown-link-hover-bg:    var(--ugr-d-surface-3);
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-link-active-bg:   var(--ugr-d-accent);

    --bs-table-bg:          transparent;
    --bs-table-color:       var(--ugr-d-text);
    --bs-table-border-color: var(--ugr-d-border);
    --bs-table-striped-bg:    rgba(255, 255, 255, 0.03);
    --bs-table-striped-color: var(--ugr-d-text);
    --bs-table-hover-bg:      rgba(255, 255, 255, 0.06);
    --bs-table-hover-color:   var(--ugr-d-text);

    --bs-list-group-bg:           var(--ugr-d-surface);
    --bs-list-group-color:        var(--ugr-d-text);
    --bs-list-group-border-color: var(--ugr-d-border);
    --bs-list-group-action-color:       var(--ugr-d-text);
    --bs-list-group-action-hover-bg:    var(--ugr-d-surface-3);
    --bs-list-group-action-hover-color: #ffffff;

    --bs-secondary-bg-rgb:  30, 36, 51;
    --bs-tertiary-bg-rgb:   21, 26, 38;
    /* .bg-light / .text-bg-light → dark surface instead of white */
    --bs-light:     var(--ugr-d-surface-2);
    --bs-light-rgb: 30, 36, 51;
}

/* --- WebKit Autofill adaptation in dark mode --- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ugr-d-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--ugr-d-surface-2) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* --- Dark Mode Leaflet / OSM Map Tiles Fallback --- */
.leaflet-tile-container,
.leaflet-tile-pane {
    filter: invert(90%) hue-rotate(180deg) contrast(1.1) saturate(1.1);
}

.leaflet-marker-pane,
.leaflet-popup-pane,
.leaflet-control {
    filter: invert(0%) hue-rotate(0deg) !important;
}

/* --- Dark Mode Google Maps InfoWindows & Controls --- */
.gm-style-iw-c {
    background-color: var(--ugr-d-surface-2) !important;
    color: var(--ugr-d-text) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    border: 1px solid var(--ugr-d-border) !important;
}

.gm-style-iw-tc::after {
    background-color: var(--ugr-d-surface-2) !important;
}

.gm-style-iw-d {
    color: var(--ugr-d-text) !important;
}

.gm-ui-hover-effect {
    filter: invert(100%) !important;
}

.gm-style .gmnoprint button,
.gm-style .gmnoprint a {
    background-color: var(--ugr-d-surface-2) !important;
    color: var(--ugr-d-text) !important;
    border-color: var(--ugr-d-border) !important;
}

.gm-style .gmnoprint button span,
.gm-style .gmnoprint button img {
    filter: invert(90%) !important;
}

/* --- Dark Mode Popovers & Dropdown Menus --- */
.popover {
    background-color: var(--ugr-d-surface-2) !important;
    border-color: var(--ugr-d-border) !important;
    color: var(--ugr-d-text) !important;
}

.popover-header {
    background-color: var(--ugr-d-surface) !important;
    color: var(--ugr-d-text) !important;
    border-bottom-color: var(--ugr-d-border) !important;
}

.popover-body {
    color: var(--ugr-d-text-muted) !important;
}

.dropdown-menu {
    background-color: var(--ugr-d-surface-2) !important;
    border-color: var(--ugr-d-border) !important;
}

.dropdown-item {
    color: var(--ugr-d-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ugr-d-hover) !important;
    color: var(--ugr-d-text) !important;
}

/* ====================================================================== */
/* 2. Base surfaces                                                       */
/* ====================================================================== */
html,
body,
main,
.main-container,
.main-content,
section,
.content,
.page-content {
    background-color: var(--ugr-d-bg) !important;
    color: var(--ugr-d-text) !important;
}

/* Inline white backgrounds (23x .modal-body + .drow/.well/td/etc.) — a
   stylesheet !important beats a non-important inline style. Case-insensitive
   so it catches #fff / #ffffff / #FFF, but only on background declarations. */
[style*="background-color: #fff" i],
[style*="background-color:#fff" i],
[style*="background: #fff" i],
[style*="background:#fff" i],
[style*="background-color: white" i],
[style*="background-color:white" i],
[style*="background: white" i],
[style*="background:white" i],
.modal-body,
.drow,
.well.white,
.bg-white,
.white {
    background-color: var(--ugr-d-surface) !important;
}
/* Light inline BORDERS (e.g. page-header `border-bottom:1px solid #eee`) —
   darken the border only, never add a background (chained [style] selectors). */
[style*="border"][style*="#eee" i],
[style*="border"][style*="#ddd" i],
[style*="border"][style*="#eaeaea" i],
[style*="border"][style*="#ececec" i],
[style*="border"][style*="#e0e0e0" i],
[style*="border"][style*="#dee2e6" i] {
    border-color: var(--ugr-d-border) !important;
}

/* ====================================================================== */
/* 3. Top menu (legacy BS3 .navbar-default) + sidebar                     */
/* ====================================================================== */
.navbar-default,
.main-header,
.top-menu,
.sidebar,
.theme-sidenav {
    background-color: var(--ugr-d-surface-2) !important;
    border-color: var(--ugr-d-border) !important;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.nav-top-custom > li > a,
.nav-top-custom > li > a:hover,
.user-type-title,
.navbar-brand {
    color: var(--ugr-d-text) !important;
}

/* ====================================================================== */
/* 4. Cards / wells / panels                                             */
/* ====================================================================== */
.card,
.card-content,
.well,
.panel,
.panel-default,
.panel-body,
#forms-validation-container,
#eventBody #forms-validation-container,
#eventBody .well {
    background-color: var(--ugr-d-surface) !important;
    color: var(--ugr-d-text) !important;
    border-color: var(--ugr-d-border) !important;
}
.card-header,
.panel-heading {
    background-color: var(--ugr-d-surface-2) !important;
    border-color: var(--ugr-d-border) !important;
    color: var(--ugr-d-text) !important;
}

/* ====================================================================== */
/* 5. Typography & links                                                  */
/* ====================================================================== */
h1, h2, h3, h4, h5, h6,
p, span, label, td, th, li, dd, dt, strong, b, small, div {
    color: var(--ugr-d-text);
}
.text-muted,
.push-device-note,
.stat-label,
small.text-muted,
.form-text,
.help-block { color: var(--ugr-d-muted) !important; }

a { color: var(--ugr-d-accent); }
a:hover, a:focus { color: var(--ugr-d-accent-2); }

/* Page titles keep the brand accent */
.page-header h1,
.page-header .h1,
.theme-pink .page-header h1,
.theme-text,
.text-theme,
.text-ugoround { color: var(--ugr-d-accent) !important; }

hr { border-color: var(--ugr-d-border) !important; opacity: 1; }
code, kbd { background-color: #11162a !important; color: #ff9e6b !important; }
pre { background-color: #0c1018 !important; color: var(--ugr-d-text) !important; border-color: var(--ugr-d-border) !important; }
blockquote { border-color: var(--ugr-d-border) !important; color: var(--ugr-d-muted) !important; }

/* ====================================================================== */
/* 6. Tables (+ DataTables)                                               */
/* ====================================================================== */
table, .table, .dataTable, thead, tbody, tfoot, tr {
    background-color: transparent !important;
    color: var(--ugr-d-text) !important;
    border-color: var(--ugr-d-border) !important;
}
.table > :not(caption) > * > *,
.table > tbody > tr > td, .table > tbody > tr > th,
.table > thead > tr > td, .table > thead > tr > th,
.table > tfoot > tr > td, .table > tfoot > tr > th {
    background-color: transparent !important;
    color: var(--ugr-d-text) !important;
    border-color: var(--ugr-d-border) !important;
}
.table thead th, .table > thead { background-color: var(--ugr-d-surface-2) !important; }
table { border: 1px solid var(--ugr-d-border) !important; }
.table-bordered > :not(caption) > *, .table-bordered th, .table-bordered td { border-color: var(--ugr-d-border) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.03) !important; }
.table-hover > tbody > tr:hover > * { background-color: rgba(255, 255, 255, 0.06) !important; }
/* DataTables — the custom theme (_micro-interactions.scss) hardcodes light
   $dt-* values with !important at specificity (0,1,4)/(0,2,4) and the entry CSS
   loads AFTER this sheet, so generic rules lose. Prefix with `body
   .dataTables_wrapper` to outrank both the table rules and the .dt-surface
   variant. (DataTables 1.13 has no native dark mode; that's 2.x / BS5.3.) */
body .dataTables_wrapper { color: var(--ugr-d-text) !important; }
/* header row */
body .dataTables_wrapper table.dataTable > thead > tr > th,
body .dataTables_wrapper table.dataTable > thead > tr > td {
    background-color: var(--ugr-d-surface-2) !important;
    color: var(--ugr-d-muted) !important;
    border-bottom-color: var(--ugr-d-border) !important;
}
/* body cells + the light row dividers */
body .dataTables_wrapper table.dataTable > tbody > tr { background-color: transparent !important; }
body .dataTables_wrapper table.dataTable > tbody > tr > td {
    color: var(--ugr-d-text) !important;
    border-top-color: var(--ugr-d-border) !important;
}
/* Text links inside cells (org/group name etc.): the DataTables theme pins
   `table.dataTable > tbody > tr > td a` to the light-mode body colour #2b2f36,
   which stays dark-on-dark. Links here are styled as plain text (not a distinct
   link colour), so match the cell text; keep `.btn`/icon-only action links out. */
body .dataTables_wrapper table.dataTable > tbody > tr > td a:not(.btn) {
    color: var(--ugr-d-text) !important;
}
body .dataTables_wrapper table.dataTable > tbody > tr > td a:not(.btn):hover {
    color: var(--ugr-d-accent) !important;
}
body .dataTables_wrapper table.dataTable > tbody > tr:hover > td,
body .dataTables_wrapper table.dataTable.table-hover > tbody > tr:hover > td,
body .dataTables_wrapper table.table-full > tbody > tr:hover > td,
body table.table-full > tbody > tr:hover > td,
body table.table-full > tbody > tr:hover,
body .table-hover > tbody > tr:hover > td {
    background-color: var(--ugr-d-surface-3) !important;
    color: var(--ugr-d-text) !important;
}
/* sort arrows inherit the header colour */
body .dataTables_wrapper table.dataTable > thead > tr > th[class*="sorting"]::before,
body .dataTables_wrapper table.dataTable > thead > tr > th[class*="sorting"]::after { color: var(--ugr-d-text) !important; opacity: .5; }
/* per-page select + search input (theme sets background:#fff) */
body .dataTables_wrapper .dataTables_length,
body .dataTables_wrapper .dataTables_filter { color: var(--ugr-d-muted) !important; }
body .dataTables_wrapper .dataTables_length select,
body .dataTables_wrapper .dataTables_length .form-select,
body .dataTables_wrapper .dataTables_filter input {
    background-color: var(--ugr-d-surface-2) !important;
    color: var(--ugr-d-text) !important;
    border-color: var(--ugr-d-border) !important;
}
body .dataTables_wrapper .dataTables_filter input::placeholder { color: var(--ugr-d-muted) !important; }
/* info text */
body .dataTables_wrapper .dataTables_info { color: var(--ugr-d-muted) !important; }
body .dataTables_wrapper .dataTables_info strong { color: var(--ugr-d-text) !important; }
/* pagination buttons */
body .dataTables_wrapper .dataTables_paginate .paginate_button,
body .dataTables_wrapper .dataTables_paginate .page-link {
    background-color: var(--ugr-d-surface-2) !important; color: var(--ugr-d-text) !important; border-color: var(--ugr-d-border) !important;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button.active,
body .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
body .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--ugr-d-accent) !important; color: #ffffff !important; border-color: var(--ugr-d-accent) !important;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background-color: var(--ugr-d-surface) !important; color: var(--ugr-d-muted) !important;
}
body .dataTables_wrapper .dataTables_processing {
    background-color: var(--ugr-d-surface) !important; color: var(--ugr-d-text) !important; border-color: var(--ugr-d-border) !important;
}
/* The custom search/controls toolbar bar: main.css gives `#divSearchPanel`
   a hardcoded `background:#fff`. Show the dark surface behind it instead. */
body #divSearchPanel,
body .form-inline,
body .dt-toolbar,
body .dataTables_scrollHead,
body .dataTables_scrollBody { background-color: transparent !important; }
body .dataTables_scrollHead table, body .dataTables_scrollBody table { background-color: transparent !important; }
/* Event/alert form-card section header: `event.css`/`alert.css` give
   `.sortables .switch` (and one inline style) a light `#ecf0f1` bar. Use a
   raised surface so it still reads as a header over the darker card body. */
body .sortables .switch,
[style*="#ecf0f1" i] { background-color: var(--ugr-d-surface-2) !important; }

/* Delete / force-expire ("lose") confirmation modal bodies. event.css and
   alert.css pin these to `#fff !important` via an ID selector (1,0,1) that
   outranks the generic `.modal-body` override — match the ID specificity so
   the later-loaded dark rule wins. (Phone-mockup push previews are left light
   on purpose: they represent the recipient's device, not the app chrome.) */
#deleteModal .modal-body,
#loseModal .modal-body { background-color: var(--ugr-d-surface) !important; }

/* Private-group dropdown menu (user.css: #f9f9f9 bg, black links, #f1f1f1 hover). */
#private-group-dropdown-content { background-color: var(--ugr-d-surface-2) !important; border-color: var(--ugr-d-border) !important; }
#private-group-dropdown-content a { color: var(--ugr-d-text) !important; }
#private-group-dropdown-content a:hover { background-color: var(--ugr-d-surface-3) !important; }

/* List-page short preview panel (event.css/alert.css give `#shortView` a #fff bg). */
#shortView { background-color: var(--ugr-d-surface) !important; color: var(--ugr-d-text) !important; }
#shortView ul li, #shortView ul li a, #shortView .event-name { color: var(--ugr-d-text) !important; }

/* Share-group modal: the org/admin picker cards (group-list.css gives
   `.admin-grid-container .form-check` a #f9f9f9 bg + #e0e0e0 border). Without
   this the card stays light while night-mode lightens the label = unreadable. */
.admin-grid-container .form-check { background-color: var(--ugr-d-surface-2) !important; border-color: var(--ugr-d-border) !important; }
.admin-grid-container .form-check:hover { background-color: var(--ugr-d-surface-3) !important; }
.admin-grid-container .form-check-label { color: var(--ugr-d-text) !important; }
/* Delete-confirm note stays muted in dark mode (it no longer uses .text-muted). */
body .modal-body .delete-confirm-note { color: var(--ugr-d-muted) !important; }

/* Remaining user.css panels/inputs/modal pinned to `#fff !important` by ID
   selectors that outrank the generic class overrides. */
#groupStatusModal .modal-body { background-color: var(--ugr-d-surface) !important; }
#divFormPanel #member_form_phone { background-color: var(--ugr-d-surface-2) !important; color: var(--ugr-d-text) !important; border-color: var(--ugr-d-border) !important; }
#member-map-list, #member-location-detail { background-color: var(--ugr-d-surface) !important; }
.pagination > li > a, .pagination > li > span, .page-link {
    background-color: var(--ugr-d-surface-2) !important; color: var(--ugr-d-text) !important; border-color: var(--ugr-d-border) !important;
}
.page-item.active .page-link { background-color: var(--ugr-d-accent) !important; border-color: var(--ugr-d-accent) !important; color: #fff !important; }

/* ====================================================================== */
/* 7. Forms                                                               */
/* ====================================================================== */
.form-control, .form-select, .custom-select,
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], input[type=url], input[type=date],
input[type=datetime-local], input[type=time], textarea, select {
    background-color: var(--ugr-d-surface-2) !important;
    color: var(--ugr-d-text) !important;
    border-color: var(--ugr-d-border) !important;
}
.form-control::placeholder, textarea::placeholder { color: var(--ugr-d-muted) !important; opacity: 1; }
.form-control:focus, .form-select:focus, textarea:focus, select:focus {
    background-color: var(--ugr-d-surface-2) !important;
    border-color: var(--ugr-d-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(232, 136, 74, 0.25) !important;
    color: var(--ugr-d-text) !important;
}
.form-label, label.control-label { color: var(--ugr-d-text) !important; }
.input-group-text, .input-group-addon {
    background-color: var(--ugr-d-surface-3) !important; color: var(--ugr-d-text) !important; border-color: var(--ugr-d-border) !important;
}
/* Native <option> renders on the OS layer — keep dark text on the system menu */
select option, .form-select option { color: #1a1a1a; background: #fff; }
.form-check-input { background-color: var(--ugr-d-surface-3); border-color: var(--ugr-d-border); }
.form-check-input:checked { background-color: var(--ugr-d-accent); border-color: var(--ugr-d-accent); }
.form-check-label { color: var(--ugr-d-text) !important; }
.switch label { color: var(--ugr-d-text) !important; }
/* legacy multiselect plugin (.ms-options) renders its menu light — keep legible */
.ms-options-wrap > .ms-options { background: var(--ugr-d-surface-2) !important; border-color: var(--ugr-d-border) !important; }
.ms-options-wrap > .ms-options > ul label, .ms-options-wrap > .ms-options > a { color: var(--ugr-d-text) !important; }
.ms-options-wrap button { color: var(--ugr-d-text) !important; background: var(--ugr-d-surface-2) !important; border-color: var(--ugr-d-border) !important; }

/* ====================================================================== */
/* 8. Modals                                                              */
/* ====================================================================== */
.modal-content {
    background-color: var(--ugr-d-surface) !important; color: var(--ugr-d-text) !important; border-color: var(--ugr-d-border) !important;
}
.modal-header, .modal-footer { border-color: var(--ugr-d-border) !important; }
.modal-header .close, .btn-close { filter: invert(1) grayscale(1) brightness(1.8); opacity: 0.8; }
.modal-backdrop.show { opacity: 0.6; }
/* Force ALL modal text light. Many modals hardcode `color:#555` / `#5f5f5f`
   inline or via page rules; a stylesheet !important beats a non-important
   inline style, and `.modal-content{color}` alone can't (it only sets the
   inherited base, which an explicit child colour overrides). */
.modal-content, .modal-header, .modal-body, .modal-footer, .modal-title,
.modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6,
.modal-body h1, .modal-body h2, .modal-body h3, .modal-body h4, .modal-body h5, .modal-body h6,
.modal-body p, .modal-body span, .modal-body label, .modal-body li, .modal-body dd, .modal-body dt,
.modal-body strong, .modal-body b, .modal-body small, .modal-body td, .modal-body th,
.modal-footer p, .modal-footer span, .modal-footer label {
    color: var(--ugr-d-text) !important;
}
/* …while keeping semantic colours readable inside modals */
.modal-body .text-muted, .modal-footer .text-muted, .modal-body small.text-muted,
.modal-body .help-block, .modal-body .modal-output-msg, .modal-footer .modal-output-msg { color: var(--ugr-d-muted) !important; }
.modal-body .text-danger, .modal-body .text-error, .modal-footer .text-danger { color: #f59a9f !important; }
.modal-body .text-success, .modal-footer .text-success { color: #74d99a !important; }
.modal-body .text-warning { color: #ffcb7d !important; }
.modal-body .text-info { color: #79e0f5 !important; }
.modal-body .text-white, .modal-header .text-white { color: #ffffff !important; }
.modal-body a:not(.btn), .modal-footer a:not(.btn) { color: var(--ugr-d-accent) !important; }
.modal-body code, .modal-body kbd { color: #ff9e6b !important; background-color: #11162a !important; }
/* an alert nested in a modal keeps its tinted text (beats the rule above) */
.modal-body .alert-info, .modal-body .alert-info * { color: #79e0f5 !important; }
.modal-body .alert-success, .modal-body .alert-success * { color: #74d99a !important; }
.modal-body .alert-warning, .modal-body .alert-warning * { color: #ffcb7d !important; }
.modal-body .alert-danger, .modal-body .alert-danger * { color: #f59a9f !important; }

/* ====================================================================== */
/* 9. Dropdowns / tabs / nav                                              */
/* ====================================================================== */
.dropdown-menu { background-color: var(--ugr-d-surface-2) !important; border-color: var(--ugr-d-border) !important; }
.dropdown-item, .dropdown-menu > li > a { color: var(--ugr-d-text) !important; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-menu > li > a:hover {
    background-color: var(--ugr-d-surface-3) !important; color: #ffffff !important;
}
.dropdown-divider, .dropdown-menu .divider { border-color: var(--ugr-d-border) !important; background-color: var(--ugr-d-border) !important; }
.nav-tabs { border-color: var(--ugr-d-border) !important; }
.nav-tabs > li > a, .nav-tabs .nav-link { color: var(--ugr-d-muted) !important; border-color: transparent !important; }
.nav-tabs > li.active > a, .nav-tabs .nav-link.active {
    background-color: var(--ugr-d-surface) !important; color: var(--ugr-d-accent) !important;
    border-color: var(--ugr-d-border) var(--ugr-d-border) var(--ugr-d-surface) !important;
}
.nav-pills .nav-link.active { background-color: var(--ugr-d-accent) !important; }

/* ====================================================================== */
/* 10. Alerts / badges / list-groups / misc                              */
/* ====================================================================== */
.list-group-item {
    background-color: var(--ugr-d-surface) !important; color: var(--ugr-d-text) !important; border-color: var(--ugr-d-border) !important;
}
.list-group-item-action:hover { background-color: var(--ugr-d-surface-3) !important; }
.breadcrumb { background-color: var(--ugr-d-surface-2) !important; }
/* Alerts: legacy/BS pastels are light-mode tints; re-tint dark with readable
   coloured text (light pastel bg + light text was unreadable). */
.alert-secondary, .alert-light, .alert-default {
    background-color: var(--ugr-d-surface-2) !important; color: var(--ugr-d-text) !important; border-color: var(--ugr-d-border) !important;
}
.alert-info    { background-color: rgba(13, 202, 240, 0.12) !important; border-color: rgba(13, 202, 240, 0.35) !important; color: #79e0f5 !important; }
.alert-success { background-color: rgba(40, 167, 69, 0.15) !important;  border-color: rgba(40, 167, 69, 0.40) !important;  color: #74d99a !important; }
.alert-warning { background-color: rgba(255, 171, 64, 0.14) !important; border-color: rgba(255, 171, 64, 0.40) !important; color: #ffcb7d !important; }
.alert-danger  { background-color: rgba(244, 67, 54, 0.13) !important;  border-color: rgba(244, 67, 54, 0.40) !important;  color: #f59a9f !important; }
.alert-primary { background-color: rgba(232, 136, 74, 0.14) !important; border-color: rgba(232, 136, 74, 0.40) !important; color: #f0a772 !important; }
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert p, .alert strong, .alert a, .alert .alert-link { color: inherit !important; }
.tooltip-inner { background-color: #000 !important; }
.popover { background-color: var(--ugr-d-surface-2) !important; border-color: var(--ugr-d-border) !important; }
.popover-body, .popover-header { color: var(--ugr-d-text) !important; background-color: transparent !important; }
.accordion-item, .accordion-button { background-color: var(--ugr-d-surface) !important; color: var(--ugr-d-text) !important; }
.accordion-button:not(.collapsed) { background-color: var(--ugr-d-surface-2) !important; color: var(--ugr-d-accent) !important; }
.progress { background-color: var(--ugr-d-surface-3) !important; }
.close, .btn-close { color: var(--ugr-d-text); }

/* ====================================================================== */
/* 11. Buttons — keep semantic/brand buttons; neutralise BS3 .btn-default */
/* ====================================================================== */
.btn-default, .btn-secondary, .btn-light, .btn-outline-secondary {
    background-color: var(--ugr-d-surface-2) !important; color: var(--ugr-d-text) !important; border-color: var(--ugr-d-border) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover {
    background-color: var(--ugr-d-surface-3) !important; color: #fff !important;
}
.btn-link { color: var(--ugr-d-accent) !important; }

/* ====================================================================== */
/* 12. Preserve elements that carry their OWN semantic colour             */
/* ====================================================================== */
.push-stat-card,
.badge, .label,
.btn-primary, .btn-theme, .btn-ugoround, .btn-warning, .btn-danger, .btn-success, .btn-info,
.two-factor-status, .status-icon,
[class*="card-sent"], [class*="card-delivered"], [class*="card-failed"], [class*="card-ios"],
[class*="card-android"], [class*="card-app-"] {
    color: inherit;
}
/* re-assert the summary headings the legacy sheet handled */
#pushSummary h3, #pushSummary h5, #emailsummary h3, #emailsummary h5,
#smssummary h3, #smssummary h5, #sendSummary h3 { color: var(--ugr-d-text) !important; }

/* ====================================================================== */
/* 13. Page-specific light surfaces (set via page <style> rules or         */
/*     light-tint inline backgrounds) that the rules above don't reach.    */
/* ====================================================================== */
.qr-code-container,
.backup-codes-info,
#device-ids-list,
.device-ids-list,
[style*="background-color: #f5f5f5" i], [style*="background:#f5f5f5" i], [style*="background: #f5f5f5" i],
[style*="background-color: #f8f9fa" i], [style*="background: #f8f9fa" i],
[style*="background-color: #f9f9f9" i], [style*="background: #f9f9f9" i],
[style*="background-color: #fafafa" i], [style*="background: #fafafa" i],
[style*="background-color: #fff8e1" i], [style*="background: #fff8e1" i],
[style*="background-color: #fff3e0" i], [style*="background: #fff3e0" i],
[style*="background-color: #e3f2fd" i], [style*="background: #e3f2fd" i],
[style*="background-color: #e8f5e9" i], [style*="background: #e8f5e9" i] {
    background-color: var(--ugr-d-surface-2) !important;
    color: var(--ugr-d-text) !important;
    border-color: var(--ugr-d-border) !important;
}
.qr-code-container img { border-color: var(--ugr-d-surface) !important; }
.secret-key { background-color: #0c1018 !important; color: var(--ugr-d-accent) !important; border-color: var(--ugr-d-border) !important; }
.two-factor-status.enabled  { background-color: rgba(76, 175, 80, 0.14) !important; border-color: rgba(76, 175, 80, 0.40) !important; }
.two-factor-status.disabled { background-color: rgba(255, 152, 0, 0.14) !important; border-color: rgba(255, 152, 0, 0.40) !important; }
#dev-push-section { background-color: rgba(255, 193, 7, 0.08) !important; border-color: rgba(255, 193, 7, 0.30) !important; }
#dev-push-section h4 { color: #ffcb7d !important; }

/* Scrollbars */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ugr-d-bg); }
::-webkit-scrollbar-thumb { background: var(--ugr-d-surface-3); border-radius: 6px; border: 3px solid var(--ugr-d-bg); }